.article-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: #e8f0f9;
  color: #1f4570;
  border: 1px solid #c8d8ea;
}

.article-badge-level {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
  border-color: #93c5fd;
}

.article-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto auto 0;
  width: calc(100% - 28px);
  max-width: 260px;
}

.article-read-btn {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.article-list-heart {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cfd7e3;
  background: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  color: #9baab8;
}

.article-list-heart:hover {
  transform: scale(1.12);
  border-color: #f47c7c;
  color: #e53935;
}

.article-list-heart.is-liked {
  color: #e53935;
  border-color: #f47c7c;
  background: #fff0f0;
}

/* ── Favourites section ── */
.articles-favorites {
  margin-top: 48px;
}

/* ── Articles filter bar ── */
/* ── iOS-style glass segmented control ── */
.articles-filter-bar {
  position: relative;        /* anchor for the sliding pill */
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0 0 20px;
  padding: 4px;
  width: fit-content;
  border-radius: 999px;

  /* Light mode glass */
  background: rgba(120, 120, 128, 0.12);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Sliding pill — absolutely positioned, moved by JS */
.articles-filter-slider {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 3px 10px rgba(59, 130, 246, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    left .3s cubic-bezier(0.34, 1.4, 0.64, 1),
    width .3s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}

.articles-filter-btn {
  position: relative;
  z-index: 1;
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(60, 60, 67, 0.75);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: color .2s;
  -webkit-font-smoothing: antialiased;
}

.articles-filter-btn:hover {
  color: rgba(60, 60, 67, 1);
}

.articles-filter-btn.is-active {
  color: #fff;
}

/* Dark mode — iOS dark glass */
[data-theme="dark"] .articles-filter-bar {
  background: rgba(118, 118, 128, 0.22);
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .articles-filter-slider {
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow:
    0 3px 14px rgba(59, 130, 246, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .articles-filter-btn {
  color: rgba(235, 235, 245, 0.6);
}

[data-theme="dark"] .articles-filter-btn:hover {
  color: rgba(235, 235, 245, 0.9);
}

[data-theme="dark"] .articles-filter-btn.is-active {
  color: #fff;
}

.articles-favorites-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f3a55;
  margin: 0 0 20px;
  text-align: center;
}

/* Jump-to-favourites shortcut above the grid — same glossy-gradient-pill
   treatment as .lesson-watch-btn (the "Read article" buttons) instead of
   a flat outlined chip, so it reads as a real button, not an afterthought.
   Red to match a liked heart (.article-list-heart.is-liked): "go to the
   things you hearted", not an unrelated new accent color. */
.articles-favorites-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 20px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, #ff5252 0%, #e53935 50%, #b71c1c 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(183, 28, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 2px rgba(120, 0, 0, 0.2);
  letter-spacing: 0.1px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.articles-favorites-jump-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(183, 28, 28, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.articles-favorites-jump-btn:active {
  transform: translateY(0);
}

.articles-favorites-jump-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.articles-favorites-jump-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #c62828;
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: none;
}

/* ── Article reader page ── */
.article-reader-page {
  padding: 20px;
}

.article-reader-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article-reader-topbar {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

/* The wrapper (.presentation-frame-shell, shared with the lesson
   presentation viewer) is sized, but that viewer's #presentation-frame
   width/height rule never matched this page's #article-frame iframe —
   so the iframe was left at the browser's tiny default intrinsic size
   instead of filling its shell. */
#article-frame {
  width: 100%;
  height: 78vh;
  border: 0;
  display: block;
  background: #f4f8fc;
}

/* ── Responsive HTML article reader ──────────────────────────────────────────
   Replaces the raw-PDF iframe as the primary reading view: mobile browsers'
   embedded PDF renderers show the page at its fixed intrinsic width, cutting
   every line off at the screen edge and forcing horizontal scrolling to read
   a single sentence. Real HTML reflows to any width, so this is used on all
   screen sizes; the PDF stays available as an optional download. */
.article-reader-card .presentation-frame-shell {
  overflow: visible;
  min-height: 0;
  background: transparent;
  border: none;
}

.article-read-content {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #cfdae7;
  background: #ffffff;
}

.article-read-header {
  padding: 28px 26px 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.article-read-header::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -40%;
  width: 60%;
  padding-bottom: 60%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.article-read-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.article-read-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.article-read-pill {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 12px;
  border-radius: 999px;
}

.article-read-pill.is-level {
  background: rgba(255, 255, 255, 0.92);
  color: #1e2a38;
}

.article-read-title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.article-read-byline {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.92;
  position: relative;
  z-index: 1;
}

.article-read-body {
  padding: 24px 22px 28px;
}

/* Keeps the header full-bleed (better visual impact) while capping the
   text column at a comfortable reading width on wide screens — otherwise
   lines run edge-to-edge of the card on a desktop monitor. */
.article-read-lede,
.article-read-body > p,
.article-read-body > h2,
.article-read-stat,
.article-read-box {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.article-read-lede {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
  color: #17324f;
  margin-top: 0;
  margin-bottom: 20px;
  border-left: 4px solid var(--article-accent, #2563eb);
  padding-left: 16px;
}

.article-read-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin-top: 0;
  margin-bottom: 16px;
  color: #2a3a4a;
}

.article-read-body h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--article-accent-dark, #1a3f6f);
  margin-top: 28px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.article-read-body h2:first-of-type {
  margin-top: 20px;
}

.article-read-stat {
  margin-top: 22px;
  margin-bottom: 22px;
  padding: 14px 18px;
  border-top: 2px solid var(--article-accent, #2563eb);
  border-bottom: 2px solid var(--article-accent, #2563eb);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--article-accent-dark, #1a3f6f);
  text-align: center;
  line-height: 1.45;
}

.article-read-box {
  margin-top: 22px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--article-accent, #2563eb);
  border-radius: 12px;
  padding: 18px 20px;
  background: #f8fafc;
}

.article-read-box h3 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--article-accent-dark, #1a3f6f);
}

.article-read-glossary-item {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #2a3a4a;
}

.article-read-glossary-item:last-child {
  margin-bottom: 0;
}

.article-read-glossary-item b {
  color: #17324f;
}

.article-read-questions {
  margin: 0;
  padding-left: 20px;
}

.article-read-questions li {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #2a3a4a;
  margin-bottom: 6px;
}

.article-read-questions li:last-child {
  margin-bottom: 0;
}

.article-read-footer {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid #e2eaf3;
  font-size: 0.8rem;
  color: #8898a8;
  text-align: center;
}

.article-read-loading {
  padding: 60px 20px;
  text-align: center;
  color: #5c7290;
}

.article-read-locked {
  padding: 60px 24px;
  text-align: center;
}

.article-read-locked h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  color: #1f2d3d;
}

.article-read-locked p {
  margin: 0 0 20px;
  color: #5c7290;
}

.article-read-lock-cta {
  display: inline-block;
}

@media (max-width: 640px) {
  .article-read-header {
    padding: 22px 18px 18px;
  }

  .article-read-body {
    padding: 20px 16px 24px;
  }
}

.article-close-btn {
  background: linear-gradient(135deg, #e53935, #b71c1c);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 6px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 18px rgba(183, 28, 28, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}

.article-close-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 24px rgba(183, 28, 28, 0.36);
}

.article-actions-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2eaf3;
}

/* ── Timer button ── */
.article-timer-btn {
  min-width: 130px;
  font-weight: 700;
  font-size: 1rem;
  font-family: "Courier New", Courier, monospace;
  border-radius: 12px;
  border: 1px solid #b0c8e8;
  background: linear-gradient(180deg, #f0f7ff 0%, #deeaf8 100%);
  color: #1a3f6f;
  padding: 8px 18px;
  box-shadow: 0 4px 10px rgba(14, 42, 90, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  letter-spacing: 0.5px;
}

.article-timer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(14, 42, 90, 0.16);
}

.article-timer-btn.is-running {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.32);
}

.article-timer-btn.is-paused {
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  color: #1a3f6f;
  border-color: #93b4e0;
}

/* ── Mark as Read button ── */
.article-read-mark-btn {
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid #7ed19a;
  background: linear-gradient(180deg, #eafbf0 0%, #d7f9e1 100%);
  color: #0f5b2f;
  padding: 8px 18px;
  box-shadow: 0 4px 10px rgba(15, 91, 47, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.article-read-mark-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 91, 47, 0.2);
}

.article-read-mark-btn.is-read {
  cursor: default;
  opacity: 0.85;
  background: linear-gradient(135deg, #34a866, #1f7a45);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(31, 122, 69, 0.28);
}

/* ── Heart button ── */
.article-heart-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #cfd7e3;
  background: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #9baab8;
  box-shadow: 0 4px 10px rgba(14, 42, 90, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
}

.article-heart-btn:hover {
  transform: scale(1.14);
  border-color: #f47c7c;
  color: #e53935;
  box-shadow: 0 6px 14px rgba(229, 57, 53, 0.18);
}

.article-heart-btn.is-liked {
  color: #e53935;
  border-color: #f47c7c;
  background: #fff0f0;
  box-shadow: 0 6px 14px rgba(229, 57, 53, 0.22);
}

/* ── "Mark as Read" quiz modal ── */
.article-quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 22, 35, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1300;
}

.article-quiz-card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(8, 21, 70, 0.22), 0 4px 16px rgba(8, 21, 70, 0.08);
}

.article-quiz-header {
  background: linear-gradient(135deg, #1a3560 0%, #2563eb 100%);
  border-radius: 20px 20px 0 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.article-quiz-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.35;
}

.article-quiz-close {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.article-quiz-body {
  padding: 20px;
}

.article-quiz-loading,
.article-quiz-error {
  margin: 0;
  color: #5c7290;
  text-align: center;
}

.article-quiz-error {
  color: #c62828;
}

.article-quiz-intro {
  margin: 0 0 16px;
  color: #5c7290;
  font-size: 0.92rem;
}

.article-quiz-question {
  margin-bottom: 18px;
}

.article-quiz-question-text {
  margin: 0 0 10px;
  font-weight: 700;
  color: #1a2c45;
  line-height: 1.4;
}

.article-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-quiz-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.article-quiz-choice:hover {
  border-color: #93b4e0;
  background: #f6faff;
}

.article-quiz-choice input {
  accent-color: #2563eb;
  flex-shrink: 0;
}

.article-quiz-choice span {
  color: #1a2c45;
  font-size: 0.95rem;
}

.article-quiz-feedback {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
}

.article-quiz-feedback.is-error {
  background: #fdecea;
  color: #c62828;
}

.article-quiz-feedback.is-success {
  background: #d7f9e1;
  color: #0f5b2f;
}

.article-quiz-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.article-quiz-submit {
  min-width: 120px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTICLES — dark theme
══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .article-reader-page {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 100%);
}

[data-theme="dark"] .article-reader-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .presentation-title {
  color: #e8f0ff;
}

[data-theme="dark"] .article-read-content {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .article-read-lede {
  color: #cfe0f5;
}

[data-theme="dark"] .article-read-body p,
[data-theme="dark"] .article-read-glossary-item,
[data-theme="dark"] .article-read-questions li {
  color: #b8c8dc;
}

[data-theme="dark"] .article-read-glossary-item b {
  color: #e8f0ff;
}

[data-theme="dark"] .article-read-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .article-read-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #6f88a8;
}

[data-theme="dark"] .article-read-loading {
  color: #9bb8d8;
}

[data-theme="dark"] .article-read-locked h2 {
  color: #e8f0ff;
}

[data-theme="dark"] .article-read-locked p {
  color: #9bb8d8;
}

[data-theme="dark"] .article-actions-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .article-timer-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .article-timer-btn.is-running {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: #ffffff;
  border-color: transparent;
}

[data-theme="dark"] .article-timer-btn.is-paused {
  background: rgba(255, 255, 255, 0.06);
  color: #9bb8d8;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .article-read-mark-btn {
  background: rgba(52, 168, 102, 0.14);
  border-color: rgba(52, 168, 102, 0.4);
  color: #6ee6a0;
}

[data-theme="dark"] .article-read-mark-btn.is-read {
  background: linear-gradient(135deg, #2d8a57, #1a5c37);
  color: #eafff0;
  border-color: transparent;
}

[data-theme="dark"] .article-heart-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: #6f88a8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .article-heart-btn:hover {
  border-color: #f47c7c;
  color: #ff6b6b;
}

[data-theme="dark"] .article-heart-btn.is-liked {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.1);
}

[data-theme="dark"] .article-list-heart {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: #6f88a8;
}

[data-theme="dark"] .article-list-heart:hover {
  border-color: rgba(255, 107, 107, 0.5);
  color: #ff6b6b;
}

[data-theme="dark"] .article-list-heart.is-liked {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.1);
}

[data-theme="dark"] .article-badge {
  background: rgba(255, 255, 255, 0.07);
  color: #9bb8d8;
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .article-badge-level {
  background: rgba(99, 179, 237, 0.12);
  color: #7ab8ff;
  border-color: rgba(99, 179, 237, 0.25);
}

[data-theme="dark"] .articles-favorites-title {
  color: #e8f0ff;
}

[data-theme="dark"] .article-quiz-card {
  background: #0f1e38;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .article-quiz-loading,
[data-theme="dark"] .article-quiz-intro {
  color: #9bb8d8;
}

[data-theme="dark"] .article-quiz-question-text,
[data-theme="dark"] .article-quiz-choice span {
  color: #e8f0ff;
}

[data-theme="dark"] .article-quiz-choice {
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .article-quiz-choice:hover {
  border-color: #4a7ac2;
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .article-quiz-feedback.is-error {
  background: rgba(198, 40, 40, 0.18);
  color: #ff8a8a;
}

[data-theme="dark"] .article-quiz-feedback.is-success {
  background: rgba(52, 168, 102, 0.18);
  color: #6ee6a0;
}

/* ── Team modal: level-header layout ────────────────────────────── */
.team-modal .level-header {
  position: relative !important;
  min-height: 68px !important;
  padding: 8px 14px !important;
  --logo-size: 52px !important;
}

.team-modal .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Count badge sits above the list, inside the body */
.team-modal-count {
  display: block;
  text-align: center;
  margin: 0 auto 14px;
}

/* Hide scrollbar on body but keep scrollability */
.team-modal-body {
  scrollbar-width: none;
}
.team-modal-body::-webkit-scrollbar {
  display: none;
}

/* Members badge: golden so it pops on the cosmic header */
.team-modal-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.45);
}

/* ── Team modal dark theme ───────────────────────────────────────── */
[data-theme="dark"] .team-modal-card {
  background: linear-gradient(160deg, #0d1c35 0%, #091525 100%);
}

[data-theme="dark"] .team-modal-body {
  background:
    linear-gradient(180deg, rgba(13, 28, 53, 0.92), rgba(9, 21, 37, 0.88)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 28px
    );
}

[data-theme="dark"] .team-modal-count {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}

/* Dark team-member detail modal */
[data-theme="dark"] .team-member-card {
  background: linear-gradient(160deg, #0d1c35 0%, #091525 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-member-header {
  color: #e8f0ff;
}

[data-theme="dark"] .team-member-subheader {
  color: #9bb8d8;
}

[data-theme="dark"] .team-member-avatar {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #a8c8f0;
}

[data-theme="dark"] .team-member-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-member-section-title {
  color: #c8deff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-member-achievements li {
  color: #9bb8d8;
}

[data-theme="dark"] .team-modal-edit-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
}

/* ── Lesson Flashcard Modal overlay ── */
.fc-lesson-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 10, 22, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fc-lesson-overlay.is-open {
  display: flex;
}

.fc-lesson-dialog {
  width: min(560px, 100%);
  max-height: min(92vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 24px;
  scrollbar-width: none;
}

.fc-lesson-dialog::-webkit-scrollbar { display: none; }

.fc-lesson-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fc-lesson-modal-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #102740;
  letter-spacing: 0.01em;
}

.fc-lesson-skip-btn {
  font-size: 0.8rem !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #7a90a8 !important;
  border: 1px solid rgba(22,57,93,.2) !important;
  font-weight: 700 !important;
}

.fc-lesson-skip-btn:hover {
  color: #1e3a58 !important;
  border-color: rgba(22,57,93,.4) !important;
}

.fc-lesson-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-lesson-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(22,57,93,.1);
  border-radius: 999px;
  overflow: hidden;
}

.fc-lesson-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

.fc-lesson-progress-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a90a8;
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}

.fc-lm-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fc-lm-card-area .fc-card {
  width: 100%;
  height: 200px;
}

.fc-done-btn--continue {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.35) !important;
}

.fc-done-btn--continue:hover {
  box-shadow: 0 10px 26px rgba(59,130,246,.45) !important;
}

/* Dark theme */
[data-theme="dark"] .fc-lesson-dialog {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
}

[data-theme="dark"] .fc-lesson-modal-title { color: #e8f0ff; }

[data-theme="dark"] .fc-lesson-skip-btn {
  color: #6a86a8 !important;
  border-color: rgba(255,255,255,.12) !important;
}

[data-theme="dark"] .fc-lesson-skip-btn:hover {
  color: #d8e8ff !important;
  border-color: rgba(255,255,255,.28) !important;
}

[data-theme="dark"] .fc-lesson-progress-track { background: rgba(255,255,255,.08); }
[data-theme="dark"] .fc-lesson-progress-text { color: #5a7a96; }

/* ── Streak badge (hero-header, index.html) ── */
@keyframes streakPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  cursor: default;
  user-select: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  white-space: nowrap;
  flex-shrink: 0;
}

.streak-badge--pop {
  animation: streakPop .4s cubic-bezier(.4,0,.2,1) both;
}

.streak-fire {
  font-size: 1.1rem;
  line-height: 1;
}

.streak-count {
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.streak-freeze-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid rgba(255,255,255,.28);
}

.streak-freeze-icon {
  font-size: 0.95rem;
  line-height: 1;
}

#streak-freeze-count {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.streak-fire-group,
.streak-freeze-indicator {
  cursor: default;
}

/* Custom hover tooltip for the streak badge (built in streak.js) -
   replaces the browser's native title-attribute tooltip, which renders
   as a plain black rectangle regardless of the site's own design. Each
   tooltip is tinted to match the icon it explains (warm orange for the
   fire streak, icy blue for the freeze) rather than one flat color. */
.streak-tooltip {
  position: fixed;
  z-index: 2000;
  max-width: 240px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.streak-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.streak-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--streak-tooltip-arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
}

.streak-tooltip--fire {
  background: linear-gradient(135deg, #ff9248 0%, #d63a0f 100%);
}

.streak-tooltip--fire::before {
  border-bottom-color: #ff9248;
}

.streak-tooltip--freeze {
  background: linear-gradient(135deg, #5bc8f5 0%, #0f6fb0 100%);
}

.streak-tooltip--freeze::before {
  border-bottom-color: #5bc8f5;
}

@media (max-width: 640px) {
  .streak-badge {
    padding: 4px 10px 4px 8px;
  }
  .streak-fire { font-size: 0.95rem; }
  .streak-count { font-size: 0.8rem; }
  .streak-freeze-icon { font-size: 0.82rem; }
  #streak-freeze-count { font-size: 0.72rem; }
}

/* ══════════════════════════════════════════
   LOGIN WELCOME OVERLAY  (iPhone-style)
══════════════════════════════════════════ */
.login-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.login-welcome-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Animated aurora gradient background — light theme (default) */
.login-welcome-overlay::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255, 220, 80,  0.72) 0%, transparent 44%),
    radial-gradient(ellipse at 78% 22%, rgba(100, 160, 255, 0.65) 0%, transparent 44%),
    radial-gradient(ellipse at 18% 78%, rgba(255, 140, 180, 0.62) 0%, transparent 44%),
    radial-gradient(ellipse at 80% 78%, rgba(80,  210, 200, 0.62) 0%, transparent 44%),
    radial-gradient(ellipse at 50% 50%, rgba(180, 140, 255, 0.45) 0%, transparent 55%);
  background-color: #e8f0fb;
  animation: login-aurora-drift 10s ease-in-out infinite alternate;
}

/* Dark theme — blue / violet / pink / coral, no green or yellow */
[data-theme="dark"] .login-welcome-overlay::before {
  background:
    radial-gradient(ellipse at 12% 12%, rgba(60,  80,  255, 0.85) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 15%, rgba(160, 50,  255, 0.80) 0%, transparent 42%),
    radial-gradient(ellipse at 10% 88%, rgba(240, 50,  130, 0.80) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 85%, rgba(255, 100, 80,  0.72) 0%, transparent 42%);
  background-color: #07070e;
}

@keyframes login-aurora-drift {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(8deg) scale(1.14); }
}

.login-welcome-scene {
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* Light theme text — dark navy */
.login-welcome-text {
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 700;
  color: #1a3252;
  white-space: nowrap;
  margin: 0;
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.6);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* Dark theme text — white */
[data-theme="dark"] .login-welcome-text {
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.login-welcome-text.is-writing {
  animation: login-handwrite 2s cubic-bezier(0.25, 0.1, 0.3, 1) forwards;
}

@keyframes login-handwrite {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0%   0 0); }
}

/* Glowing pen-tip dot — light theme */
.login-welcome-pen {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a3252;
  box-shadow: 0 0 0 4px rgba(26, 50, 82, 0.2), 0 0 18px 7px rgba(26, 50, 82, 0.35);
  top: 60%;
  left: 0%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  will-change: left;
}

/* Dark theme pen dot — white glow */
[data-theme="dark"] .login-welcome-pen {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 0 18px 7px rgba(255,255,255,0.6);
}

.login-welcome-pen.is-writing {
  animation: login-pen-slide 2s cubic-bezier(0.25, 0.1, 0.3, 1) forwards;
}

@keyframes login-pen-slide {
  0%   { left: 1%;   opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}


/* ════════════════════════════════════════════
   NEWS MODAL — MAGAZINE / EDITORIAL REDESIGN
════════════════════════════════════════════ */

/* ─ Panel ─ */
.news-dialog {
  background: #faf8f3;
  max-width: 620px;
  border-radius: 14px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.45), 0 4px 20px rgba(0,0,0,0.20);
}

/* ─ Masthead ─ */
.news-dialog-header {
  background: #111820;
  padding: 22px 28px 18px;
  border-bottom: 3px solid #c9a227;
}
.news-dialog-header::before { display: none; }
.news-dialog-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  font-style: italic;
  color: #f5f0e8;
  letter-spacing: 0.3px;
}
/* Gold CitizenX tagline under the title */
.news-dialog-title::after {
  content: "CitizenX";
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c9a227;
  margin-top: 3px;
}
.news-close-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: #d8d0c4;
}
.news-close-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.08);
}

/* ─ Admin bar ─ */
.news-admin-bar {
  background: #f3f0e8;
  border-bottom: 1px solid rgba(16,39,64,0.10);
}

/* ─ Feed ─ */
.news-feed {
  background: #faf8f3;
  padding: 0;
  gap: 0;
}

/* ─ Cards → editorial article strips ─ */
.news-card {
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(16,39,64,0.10);
  box-shadow: none;
  padding: 22px 28px;
  transition: background 0.15s;
}
.news-card:first-child { border-top: 2px solid rgba(16,39,64,0.08); }
.news-card:last-child  { border-bottom: none; }
.news-card:hover       { background: rgba(201,162,39,0.04); box-shadow: none; }

/* Photo grid inside card — rounded */
.news-card .news-photo-grid {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.news-card .news-card-img {
  border-radius: 8px 8px 0 0;
}

/* ─ "NEW" badge — gold editorial ribbon ─ */
.news-card-new-badge {
  background: #c9a227;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 9px;
  border-radius: 0 0 6px 0;
  box-shadow: none;
}

/* ══════════════════════════════════════════
   SITE NOTICE CARD (logged out elsewhere, new version available, etc.)
   Styled after the .lessons-loading-card look (see mentor-admin.css /
   admin-editors.css): a floating, themed card with drifting emoji
   stickers, centered over a translucent backdrop.
══════════════════════════════════════════ */
.site-notice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 22, 35, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.site-notice-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.site-notice-backdrop[hidden] {
  display: none;
}

.site-notice-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 24px;
  border: 2px solid rgba(18, 120, 208, 0.18);
  padding: 40px 30px 28px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(12, 32, 54, 0.32);
  animation: site-notice-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .site-notice-card {
  background: linear-gradient(160deg, #101f3a 0%, #0d1e38 100%);
  border-color: rgba(240, 180, 41, 0.28);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
@keyframes site-notice-card-in {
  from { transform: scale(0.86) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}

.site-notice-float {
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
  line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(31, 79, 122, 0.22));
  animation: site-notice-float-drift 8s ease-in-out infinite;
}
.site-notice-float--1 { top: 10%; left: 8%;  font-size: 28px; }
.site-notice-float--2 { top: 14%; right: 9%; font-size: 22px; animation-delay: -2.5s; }
.site-notice-float--3 { bottom: 12%; left: 11%; font-size: 20px; animation-delay: -5s; }
@keyframes site-notice-float-drift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(6px, -8px) rotate(6deg); }
}

.site-notice-icon-badge {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: radial-gradient(circle, rgba(18, 120, 208, 0.12) 0%, rgba(18, 120, 208, 0) 70%);
  border: 2px solid rgba(18, 120, 208, 0.35);
  animation: site-notice-icon-pulse 2.4s ease-in-out infinite;
}
[data-theme="dark"] .site-notice-icon-badge {
  background: radial-gradient(circle, rgba(240, 180, 41, 0.14) 0%, rgba(240, 180, 41, 0) 70%);
  border-color: rgba(240, 180, 41, 0.4);
  animation-name: site-notice-icon-pulse-dark;
}
@keyframes site-notice-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(18, 120, 208, 0); }
  50%      { box-shadow: 0 0 22px rgba(18, 120, 208, 0.28); }
}
@keyframes site-notice-icon-pulse-dark {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 180, 41, 0); }
  50%      { box-shadow: 0 0 22px rgba(240, 180, 41, 0.28); }
}

.site-notice-text {
  position: relative;
  margin: 0 0 22px;
  color: #2b4b69;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
[data-theme="dark"] .site-notice-text {
  color: #eaf2fb;
}

.site-notice-actions {
  position: relative;
  display: flex;
  justify-content: center;
}
.site-notice-btn {
  background: #1278d0;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 120, 208, 0.3);
}
.site-notice-btn:hover {
  background: #0f6bb8;
}
[data-theme="dark"] .site-notice-btn {
  background: #f0b429;
  color: #1a1305;
  box-shadow: 0 8px 20px rgba(240, 180, 41, 0.25);
}
[data-theme="dark"] .site-notice-btn:hover {
  background: #f7d98a;
}

.site-notice-dismiss {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: #8296a8;
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.site-notice-dismiss:hover {
  opacity: 1;
  color: #2b4b69;
}
[data-theme="dark"] .site-notice-dismiss {
  color: #9fb3c8;
}
[data-theme="dark"] .site-notice-dismiss:hover {
  color: #eaf2fb;
}

/* "danger" variant - a hard-rule warning (e.g. video copyright), not a
   friendly heads-up. Red instead of the default blue/gold, same layout. */
.site-notice-card.is-danger {
  border-color: rgba(198, 40, 40, 0.35);
}
[data-theme="dark"] .site-notice-card.is-danger {
  border-color: rgba(239, 83, 80, 0.45);
}
.site-notice-card.is-danger .site-notice-icon-badge {
  background: radial-gradient(circle, rgba(198, 40, 40, 0.14) 0%, rgba(198, 40, 40, 0) 70%);
  border-color: rgba(198, 40, 40, 0.4);
  animation-name: site-notice-icon-pulse-danger;
}
[data-theme="dark"] .site-notice-card.is-danger .site-notice-icon-badge {
  background: radial-gradient(circle, rgba(239, 83, 80, 0.18) 0%, rgba(239, 83, 80, 0) 70%);
  border-color: rgba(239, 83, 80, 0.5);
}
@keyframes site-notice-icon-pulse-danger {
  0%, 100% { box-shadow: 0 0 0 rgba(198, 40, 40, 0); }
  50%      { box-shadow: 0 0 22px rgba(198, 40, 40, 0.32); }
}
.site-notice-card.is-danger .site-notice-text {
  color: #b3261e;
}
[data-theme="dark"] .site-notice-card.is-danger .site-notice-text {
  color: #ff8a80;
}
.site-notice-card.is-danger .site-notice-btn {
  background: #c62828;
  box-shadow: 0 8px 20px rgba(198, 40, 40, 0.3);
}
.site-notice-card.is-danger .site-notice-btn:hover {
  background: #a81f1f;
}
[data-theme="dark"] .site-notice-card.is-danger .site-notice-btn {
  background: #ef5350;
  color: #2a0a08;
  box-shadow: 0 8px 20px rgba(239, 83, 80, 0.3);
}
[data-theme="dark"] .site-notice-card.is-danger .site-notice-btn:hover {
  background: #ff8a80;
}

@media (max-width: 600px) {
  .site-notice-card {
    max-width: 320px;
    padding: 34px 20px 24px;
  }
  .site-notice-text {
    font-size: 0.92rem;
  }
  .site-notice-float--1 { font-size: 22px; }
  .site-notice-float--2 { font-size: 18px; }
  .site-notice-float--3 { font-size: 16px; }
}