/* ─ Body ─ */
.news-card-body { padding: 0; }
.news-card-content {
  font-family: Georgia, "Playfair Display", "Times New Roman", serif;
  font-size: 0.97rem;
  line-height: 1.78;
  color: #1c1814;
}
.news-card-content a {
  color: #8a6a10;
  text-decoration-color: rgba(138,106,16,0.35);
}
.news-card-content a:hover { color: #c9a227; }

/* ─ Meta row ─ */
.news-card-meta {
  border-top: none;
  margin-top: 12px;
  padding-top: 0;
}
.news-card-time {
  font-family: "Manrope", sans-serif;
  font-size: 0.70rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a8b6e;
  font-weight: 700;
}

/* ─ Empty state ─ */
.news-empty {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #9a8b6e;
  padding: 48px 0;
}

/* ══ DARK THEME ══ */
[data-theme="dark"] .news-overlay {
  background: rgba(4, 8, 16, 0.72);
}
[data-theme="dark"] .news-dialog {
  background: #131b28;
}
[data-theme="dark"] .news-dialog-header {
  background: #0a0e18;
  border-bottom-color: #c9a227;
}
[data-theme="dark"] .news-admin-bar {
  background: #0f1622;
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .news-editor-wrap {
  background: #0f1622;
  border-bottom-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .news-feed {
  background: #131b28;
}
[data-theme="dark"] .news-card {
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .news-card:first-child {
  border-top-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .news-card:hover {
  background: rgba(201,162,39,0.05);
}
[data-theme="dark"] .news-card-content {
  color: #cfc4b0;
}
[data-theme="dark"] .news-card-content a {
  color: #c9a227;
  text-decoration-color: rgba(201,162,39,0.35);
}
[data-theme="dark"] .news-card-time {
  color: #6b5f48;
}
[data-theme="dark"] .news-empty {
  color: #5a5040;
}
[data-theme="dark"] .news-card-new-badge {
  background: #c9a227;
}


/* ════════════════════════════════════════════
   NEWS MODAL — MAGAZINE COVER PAGE
════════════════════════════════════════════ */

/* Parent needs perspective for 3D flip */
.news-dialog {
  perspective: 1400px;
}

/* ─ Cover page — sits on top of the feed ─ */
.news-cover-page {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: 14px;
  overflow: hidden;
  background: #e8e4da;
  display: flex;
  flex-direction: column;
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}
.news-cover-page.is-flipping {
  transform: rotateY(-170deg);
  opacity: 0;
  pointer-events: none;
}

/* Thin gold top stripe */
.news-cover-top-stripe {
  height: 5px;
  background: linear-gradient(90deg, #8c6a0a, #c9a227, #e8c84a, #c9a227, #8c6a0a);
  flex-shrink: 0;
}

/* ─ Masthead ─ */
.news-cover-masthead {
  text-align: center;
  padding: 14px 20px 10px;
  flex-shrink: 0;
}
.news-cover-logo {
  height: 52px;
  width: auto;
  display: block;
  margin: 0 auto 6px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}
.news-cover-edition {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #6b5c3e;
}

/* ─ Thick rule ─ */
.news-cover-thick-rule {
  flex-shrink: 0;
  margin: 0 16px;
  border: none;
  border-top: 3px double #8c6a0a;
  border-bottom: 1px solid #8c6a0a;
  padding-bottom: 2px;
}

/* ─ 3-column body ─ */
.news-cover-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 0;
  overflow: hidden;
}
.news-cover-col {
  padding: 10px 12px;
  border-right: 1px solid rgba(100,80,40,0.20);
  overflow: hidden;
}
.news-cover-col:last-child { border-right: none; }

/* Labels like "EDUCATION", "FEATURED" */
.news-cover-snippet-label {
  margin: 0 0 4px;
  font-family: "Manrope", sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8c6a0a;
}
.news-cover-snippet-title {
  margin: 0 0 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1c1408;
  line-height: 1.3;
}
.news-cover-snippet-text {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 0.72rem;
  color: #3a2e1c;
  line-height: 1.55;
}
.news-cover-col-rule {
  border: none;
  border-top: 1px solid rgba(100,80,40,0.25);
  margin: 8px 0;
}
/* Small placeholder image in side columns */
.news-cover-snippet-img {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #c8c4b8, #b0ac9e, #c0bc10);
  background: linear-gradient(135deg, #c8c4b8, #b4b0a4);
  border-radius: 3px;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}
.news-cover-snippet-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px,
    transparent 1px, transparent 5px
  );
}

/* Center main column */
.news-cover-main-img {
  width: 100%;
  height: 110px;
  background: linear-gradient(160deg, #c0bdb0, #a8a498, #b8b4a8);
  border-radius: 3px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.news-cover-main-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px,
    transparent 1px, transparent 5px
  );
}
.news-cover-main-title {
  margin: 0 0 5px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0e0a04;
  line-height: 1.25;
}
.news-cover-main-text {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 0.73rem;
  color: #2e2414;
  line-height: 1.55;
}

/* ─ Footer with "Open Edition" button ─ */
.news-cover-footer {
  flex-shrink: 0;
  padding: 10px 20px 14px;
  text-align: center;
  border-top: 2px double #8c6a0a;
  background: #e0dbd0;
}
.news-cover-open-btn {
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #faf6ee;
  background: linear-gradient(135deg, #6b4e10, #c9a227, #8c6a0a);
  border: none;
  padding: 10px 32px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(100,70,10,0.35);
  transition: filter 0.18s, transform 0.18s;
}
.news-cover-open-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
}

/* ─ Dark theme cover — warm parchment (newspaper stays paper-coloured) ─ */
[data-theme="dark"] .news-cover-page      { background: #f0e9d8; }
[data-theme="dark"] .news-cover-edition   { color: #6b5c3e; }
[data-theme="dark"] .news-cover-snippet-label { color: #8c6a0a; }
[data-theme="dark"] .news-cover-snippet-title { color: #1c1408; }
[data-theme="dark"] .news-cover-snippet-text  { color: #3a2e1c; }
[data-theme="dark"] .news-cover-main-title    { color: #0e0a04; }
[data-theme="dark"] .news-cover-main-text     { color: #2e2414; }
[data-theme="dark"] .news-cover-footer        { background: #e0d8c8; border-top-color: #8c6a0a; }
[data-theme="dark"] .news-cover-thick-rule    { border-top-color: #8c6a0a; border-bottom-color: #8c6a0a; }
[data-theme="dark"] .news-cover-col           { border-right-color: rgba(100,80,40,0.20); }
[data-theme="dark"] .news-cover-col           { border-right-color: rgba(200,160,60,0.15); }
[data-theme="dark"] .news-cover-snippet-img,
[data-theme="dark"] .news-cover-main-img      { background: linear-gradient(135deg, #2a2618, #1e1c10); }

/* ══════════════════════════════════════════════════════
   MOBILE UX FIXES
══════════════════════════════════════════════════════ */

/* 2. Mobile hero greeting — show when logged in (hidden attr absent) */
@media (max-width: 900px) {
  .hero-greeting:not([hidden]) {
    display: block;
    font-family: "Dancing Script", "Segoe Script", cursive;
    font-size: 1.55rem;
    font-weight: 700;
    color: #16395d;
    margin: 0 0 4px;
    text-align: center;
    letter-spacing: 0.01em;
  }
  [data-theme="dark"] .hero-greeting:not([hidden]) {
    color: #c8d8ec;
  }
}

/* 3. Login welcome overlay — fix overflow on narrow screens */
@media (max-width: 600px) {
  .login-welcome-scene {
    max-width: calc(100vw - 56px);
    text-align: center;
  }
  .login-welcome-text {
    font-size: 2.1rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.25;
  }
  .login-welcome-pen {
    display: none; /* pen animation doesn't track wrapped text */
  }
}

/* 4. News cover — collapse to single column on mobile */
@media (max-width: 600px) {
  .news-cover-page {
    border-radius: 0;
  }
  .news-cover-masthead {
    padding: 14px 16px 10px;
  }
  .news-cover-logo {
    height: 48px;
  }
  .news-cover-edition {
    font-size: 0.68rem;
  }
  .news-cover-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .news-cover-col--side {
    display: none; /* hide side columns, show only featured */
  }
  .news-cover-col--main {
    border-right: none;
    padding: 16px 20px 20px;
  }
  .news-cover-main-img {
    height: 140px;
    border-radius: 6px;
    margin-bottom: 12px;
  }
  .news-cover-main-title {
    font-size: 1.25rem;
  }
  .news-cover-footer {
    padding: 14px 20px 20px;
  }
  .news-cover-open-btn {
    width: 100%;
    padding: 14px 0;
    font-size: 0.9rem;
  }
}

/* 5. Drawer items — prevent overflow on very long names */
.mobile-nav-drawer-greeting {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 24px; /* avoid close-button overlap */
}

/* ── Retry-modal inline explanation block ── */
.qre-block { margin: 0 0 18px; text-align: left; }
.qre-text {
  margin: 0 0 2px;
  color: #0a1f33 !important;
  font-weight: 700 !important;
  line-height: 1.55;
  font-size: 1rem;
  background: #ddeeff;
  border: 1px solid #b0cce8;
  border-left: 4px solid #1a5fa8;
  border-radius: 12px;
  padding: 10px 12px;
}
.qre-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid #d7e3ef; }
.qre-ask { margin: 0 0 10px; color: #0a1f33 !important; font-weight: 800 !important; font-size: 0.97rem; }
.qre-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.qre-option {
  border-radius: 999px !important;
  background: #eef4fb !important;
  border: 1px solid #c6d7ea !important;
  color: #1f4f7a !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.qre-option.is-active { background: #1f4f7a !important; border-color: #1f4f7a !important; color: #ffffff !important; }
.qre-option:hover:not(.is-active) { background: #dbe9f7 !important; border-color: #a8c4e0 !important; }
.qre-lang-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qre-lang-label { color: #1a3653; font-weight: 700; font-size: 0.93rem; }
.qre-lang-dd { position: relative; }
.qre-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c6d7ea;
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a3653;
  background: #ffffff;
  min-width: 120px;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color .15s;
}
.qre-lang-trigger:hover { border-color: #a0bcd8; }
.qre-lang-value { flex: 1; text-align: left; }
.qre-lang-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #1f4f7a; }
.qre-lang-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  background: #ffffff;
  border: 1px solid #c6d7ea;
  border-radius: 12px;
  box-shadow: 0 12px 22px rgba(16,39,64,.12);
  padding: 6px;
  display: none;
  z-index: 2400;
}
.qre-lang-list.is-open { display: grid; gap: 4px; }
.qre-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f4f8fd;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a3653;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.qre-lang-item:hover, .qre-lang-item:focus { background: #e7f0fa; }
.qre-lang-item.is-active { background: #dbe9f7; border-color: #b9cee6; }
.qre-note { margin: 0; color: #6a7f95; font-size: 0.9rem; min-height: 1em; }

/* dark mode */
[data-theme="dark"] .qre-text { color: #c8e4ff; background: rgba(30,60,100,.45); border-color: rgba(100,160,220,.25); border-left-color: #4a90d0; }
[data-theme="dark"] .qre-actions { border-top-color: rgba(255,255,255,.1); }
[data-theme="dark"] .qre-ask { color: #b0cce6; }
[data-theme="dark"] .qre-option { background: rgba(31,59,88,.4) !important; border-color: rgba(255,255,255,.12) !important; color: #a8c8e8 !important; }
[data-theme="dark"] .qre-option.is-active { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }
[data-theme="dark"] .qre-option:hover:not(.is-active) { background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .qre-lang-label { color: #b0cce6; }
[data-theme="dark"] .qre-lang-trigger { background: #0f1e38; border-color: rgba(255,255,255,.12); color: #c0d8f0; }
[data-theme="dark"] .qre-lang-trigger:hover { border-color: rgba(255,255,255,.25); }
[data-theme="dark"] .qre-lang-caret { border-top-color: #6a9fd0; }
[data-theme="dark"] .qre-lang-list { background: #0f1e38; border-color: rgba(255,255,255,.12); box-shadow: 0 12px 22px rgba(0,0,0,.4); }
[data-theme="dark"] .qre-lang-item { background: rgba(255,255,255,.05); color: #c0d8f0; }
[data-theme="dark"] .qre-lang-item:hover { background: rgba(255,255,255,.1); }
[data-theme="dark"] .qre-lang-item.is-active { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.35); }
[data-theme="dark"] .qre-note { color: #7a96b2; }

/* ── Admin Panel Analytics Charts ── */
.admin-charts-section {
  margin: 0 0 28px;
}
.admin-charts-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a3653;
  margin: 0 0 16px;
}
.admin-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .admin-charts-grid { grid-template-columns: 1fr; }
}
.admin-chart-card {
  background: #ffffff;
  border: 1px solid #dde8f4;
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 2px 12px rgba(20,50,90,.06);
}
.admin-chart-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a3653;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-chart-wrap {
  position: relative;
  height: 240px;
}
.admin-chart-wrap canvas {
  max-height: 240px;
}
[data-theme="dark"] .admin-charts-heading { color: #b8d4f0; }
[data-theme="dark"] .admin-chart-card { background: #0e1c32; border-color: rgba(255,255,255,.08); box-shadow: none; }
[data-theme="dark"] .admin-chart-title { color: #8ab4d8; }

/* ── Admin Panel User Cards ── */
.admin-users-section {
  margin: 0 0 28px;
}
.admin-users-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.admin-users-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a3a5c;
  margin: 0;
}
.admin-users-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: #ddeeff;
  color: #1a5fa8;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
}
.admin-users-page-size-label {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a6a8a;
}
.admin-users-page-size {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  background: #f0f5fb;
  border: 1px solid #c8daed;
  color: #1a5fa8;
  cursor: pointer;
}
.admin-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.admin-user-card {
  background: #ffffff;
  border: 1px solid #dde8f4;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20,50,90,.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.18s;
}
.admin-user-card:hover {
  box-shadow: 0 4px 20px rgba(20,50,90,.13);
}
.admin-user-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.admin-user-info {
  flex: 1;
  min-width: 0;
}
.admin-user-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: #0a1f33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}
.admin-user-username {
  font-size: 0.8rem;
  color: #4a7aa8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-level-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #ddeeff;
  color: #1a5fa8;
  white-space: nowrap;
}
.admin-user-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-user-meta-item {
  font-size: 0.82rem;
  color: #4a6a8a;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.4;
}
.admin-user-meta-item strong {
  color: #1a3a5c;
  font-weight: 600;
  white-space: nowrap;
}
.admin-user-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-user-payment-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a5fa8;
  background: #eef5ff;
  border: 1px solid #c0d8f4;
  border-radius: 8px;
  padding: 3px 10px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-user-payment-link:hover {
  background: #d4e8ff;
  border-color: #7ab2e8;
}
.admin-user-card-actions {
  display: flex;
  gap: 8px;
}
.admin-user-more-btn {
  font-size: 0.82rem;
  padding: 5px 14px;
  border-radius: 8px;
  background: #f0f5fb;
  border: 1px solid #c8daed;
  color: #1a5fa8;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-user-more-btn:hover {
  background: #ddeeff;
}
.admin-users-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.admin-users-expand-btn {
  font-size: 0.88rem;
  padding: 8px 24px;
  border-radius: 10px;
  background: #eef5ff;
  border: 1px solid #b0cce8;
  color: #1a5fa8;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-users-expand-btn:hover {
  background: #d4e8ff;
  border-color: #7ab2e8;
}
.admin-users-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-users-page-btn {
  font-size: 0.85rem;
  padding: 7px 16px;
  border-radius: 8px;
  background: #eef5ff;
  border: 1px solid #b0cce8;
  color: #1a5fa8;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-users-page-btn:hover:not(:disabled) {
  background: #d4e8ff;
  border-color: #7ab2e8;
}
.admin-users-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-users-page-info {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a6a8a;
}
[data-theme="dark"] .admin-users-heading { color: #b8d4f0; }
[data-theme="dark"] .admin-users-count-badge { background: #0e2a4a; color: #7ab2e8; }
[data-theme="dark"] .admin-user-card { background: #0e1c32; border-color: rgba(255,255,255,.08); box-shadow: none; }
[data-theme="dark"] .admin-user-name { color: #dde8f8; }
[data-theme="dark"] .admin-user-username { color: #6a9abf; }
[data-theme="dark"] .admin-user-level-badge { background: #0e2a4a; color: #7ab2e8; }
[data-theme="dark"] .admin-user-meta-item { color: #8ab4d8; }
[data-theme="dark"] .admin-user-meta-item strong { color: #b8d4f0; }
[data-theme="dark"] .admin-user-payment-link { background: #0e2a4a; border-color: #2a4a7a; color: #7ab2e8; }
[data-theme="dark"] .admin-user-payment-link:hover { background: #163660; border-color: #4a7ab0; }
[data-theme="dark"] .admin-user-more-btn { background: #0e2040; border-color: #2a4060; color: #7ab2e8; }
[data-theme="dark"] .admin-user-more-btn:hover { background: #163050; }
[data-theme="dark"] .admin-users-expand-btn { background: #0e2040; border-color: #2a4060; color: #7ab2e8; }
[data-theme="dark"] .admin-users-expand-btn:hover { background: #163050; border-color: #4a7ab0; }
[data-theme="dark"] .admin-users-page-size-label { color: #8ab4d8; }
[data-theme="dark"] .admin-users-page-size { background: #0e2040; border-color: #2a4060; color: #7ab2e8; }
[data-theme="dark"] .admin-users-page-btn { background: #0e2040; border-color: #2a4060; color: #7ab2e8; }
[data-theme="dark"] .admin-users-page-btn:hover:not(:disabled) { background: #163050; border-color: #4a7ab0; }
[data-theme="dark"] .admin-users-page-info { color: #8ab4d8; }

/* ── Admin Level Drill-down Modal ── */
.admin-drill-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
}
.admin-drill-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 48px rgba(10,30,70,.22);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-drill-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e8eef8;
  flex-shrink: 0;
}
.admin-drill-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a1f33;
  margin: 0;
}
.admin-drill-body {
  overflow-y: auto;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-drill-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .admin-drill-charts { grid-template-columns: 1fr; }
}
.admin-drill-chart-card {
  background: #f7faff;
  border: 1px solid #dde8f4;
  border-radius: 12px;
  padding: 14px 16px;
}
.admin-drill-chart-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4a6a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.admin-drill-chart-wrap {
  position: relative;
  min-height: 200px;
  overflow-y: auto;
}
.admin-drill-flashcard-note {
  font-size: 0.82rem;
  color: #6a8aaa;
  background: #f0f5fb;
  border: 1px solid #dde8f4;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 0;
}
[data-theme="dark"] .admin-drill-card { background: #0c1826; }
[data-theme="dark"] .admin-drill-topbar { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .admin-drill-title { color: #dde8f8; }
[data-theme="dark"] .admin-drill-chart-card { background: #0e1c32; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .admin-drill-chart-label { color: #6a9abf; }
[data-theme="dark"] .admin-drill-flashcard-note { background: #0e1a2e; border-color: rgba(255,255,255,.08); color: #6a9abf; }

/* ── Admin Site Health (automated site_check.py reports) ── */
.admin-site-health-btn {
  position: relative;
}
.admin-site-health-btn .admin-requests-badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

.admin-site-health-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 34, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}
.admin-site-health-modal.is-open {
  display: flex;
}

.admin-site-health-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(242, 180, 69, 0.25);
  box-shadow: 0 24px 64px rgba(10, 30, 70, 0.28);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lessons-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .admin-site-health-card {
  background: linear-gradient(160deg, #101f3a 0%, #0d1e38 100%);
  border-color: rgba(240, 180, 41, 0.28);
}

.admin-site-health-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #e8eef8;
  flex-shrink: 0;
}
[data-theme="dark"] .admin-site-health-topbar {
  border-color: rgba(255, 255, 255, 0.08);
}
.admin-site-health-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a1f33;
  margin: 0;
}
[data-theme="dark"] .admin-site-health-title {
  color: #f0b429;
}
.sh-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf71;
  box-shadow: 0 0 0 rgba(47, 191, 113, 0.5);
  animation: sh-live-pulse 2.2s ease-out infinite;
}
@keyframes sh-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(47, 191, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}
.admin-site-health-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-site-health-refresh-btn {
  background: #eef4fb;
  color: #1278d0;
  border: 1px solid #d6e4f4;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .admin-site-health-refresh-btn {
  background: rgba(240, 180, 41, 0.12);
  color: #f2c14e;
  border-color: rgba(240, 180, 41, 0.25);
}
.sh-refresh-icon {
  display: inline-block;
  transition: transform 0.4s ease;
}
.admin-site-health-refresh-btn.is-spinning .sh-refresh-icon {
  animation: sh-spin 0.7s linear infinite;
}
@keyframes sh-spin {
  to { transform: rotate(360deg); }
}

.admin-site-health-run-btn {
  background: #eafbf1;
  color: #17925a;
  border: 1px solid #c8ecd9;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-site-health-run-btn:hover:not(:disabled) {
  background: #d7f5e5;
  border-color: #8fdcb6;
}
.admin-site-health-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-theme="dark"] .admin-site-health-run-btn {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.28);
}
[data-theme="dark"] .admin-site-health-run-btn:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.45);
}

.admin-site-health-sub {
  margin: 0;
  padding: 10px 22px 0;
  font-size: 0.85rem;
  color: #5a7591;
  flex-shrink: 0;
}
[data-theme="dark"] .admin-site-health-sub {
  color: #8fa9c4;
}

.site-health-run-status {
  margin: 0;
  padding: 8px 22px 0;
  font-size: 0.83rem;
  font-weight: 600;
  color: #1278d0;
  flex-shrink: 0;
}
.site-health-run-status.is-error {
  color: #d0483d;
}
.site-health-run-status.is-success {
  color: #17925a;
}
[data-theme="dark"] .site-health-run-status {
  color: #f2c14e;
}
[data-theme="dark"] .site-health-run-status.is-error {
  color: #ff8a8a;
}
[data-theme="dark"] .site-health-run-status.is-success {
  color: #34d399;
}

.admin-site-health-body {
  overflow-y: auto;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-db-backups-title {
  margin: 0;
  padding: 4px 22px 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0a1f33;
  flex-shrink: 0;
}
[data-theme="dark"] .admin-db-backups-title {
  color: #f0b429;
}

.admin-db-backups-body {
  overflow-y: auto;
  padding: 10px 22px 22px;
  flex-shrink: 0;
  max-height: 260px;
}

.admin-db-backups-status-ok {
  color: #17925a;
  font-weight: 700;
}
.admin-db-backups-status-fail {
  color: #d0483d;
  font-weight: 700;
}
[data-theme="dark"] .admin-db-backups-status-ok {
  color: #34d399;
}
[data-theme="dark"] .admin-db-backups-status-fail {
  color: #ff8a8a;
}

.site-health-loading,
.site-health-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #7a93ac;
  font-size: 0.92rem;
  padding: 34px 0;
  margin: 0;
}

.sh-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(18, 120, 208, 0.18);
  border-top-color: #1278d0;
  animation: sh-spin 0.7s linear infinite;
}
[data-theme="dark"] .sh-spinner {
  border-color: rgba(242, 193, 78, 0.2);
  border-top-color: #f2c14e;
}

/* ── Hero: current status + live ECG line ── */
.sh-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 20px 20px 16px;
  background: linear-gradient(165deg, #eafff3 0%, #f4fbff 100%);
  border: 1px solid rgba(47, 191, 113, 0.22);
}
.sh-hero.is-bad {
  background: linear-gradient(165deg, #fff1f1 0%, #fff8f4 100%);
  border-color: rgba(229, 72, 77, 0.25);
}
[data-theme="dark"] .sh-hero {
  background: linear-gradient(165deg, rgba(47, 191, 113, 0.12) 0%, rgba(16, 31, 47, 0.4) 100%);
  border-color: rgba(47, 191, 113, 0.3);
}
[data-theme="dark"] .sh-hero.is-bad {
  background: linear-gradient(165deg, rgba(229, 72, 77, 0.14) 0%, rgba(16, 31, 47, 0.4) 100%);
  border-color: rgba(229, 72, 77, 0.32);
}

.sh-ecg {
  display: block;
  width: 100%;
  height: 44px;
  overflow: visible;
}
.sh-ecg-track {
  animation: sh-ecg-scroll 4.5s linear infinite;
}
.sh-ecg-track path {
  fill: none;
  stroke: #2fbf71;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(47, 191, 113, 0.55));
}
.sh-hero.is-bad .sh-ecg-track path {
  stroke: #e5484d;
  filter: drop-shadow(0 0 4px rgba(229, 72, 77, 0.5));
}
@keyframes sh-ecg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-300px); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-ecg-track { animation: none; }
}

.sh-hero-content {
  position: relative;
  margin-top: 8px;
}
.sh-hero-word {
  margin: 0;
  font-family: var(--serif, inherit);
  font-size: 1.3rem;
  font-weight: 800;
  color: #157347;
  letter-spacing: -0.01em;
}
.sh-hero.is-bad .sh-hero-word {
  color: #b83034;
}
[data-theme="dark"] .sh-hero-word {
  color: #4ade80;
}
[data-theme="dark"] .sh-hero.is-bad .sh-hero-word {
  color: #ff8a8d;
}
.sh-hero-sub {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a6a5a;
}
.sh-hero.is-bad .sh-hero-sub {
  color: #8a5a5a;
}
[data-theme="dark"] .sh-hero-sub {
  color: #9fc4b4;
}
[data-theme="dark"] .sh-hero.is-bad .sh-hero-sub {
  color: #c49a9a;
}

/* ── History strip: one bar per run, height = pass rate ── */
.sh-strip-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sh-strip-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #96a9bd;
  margin: 0;
}
[data-theme="dark"] .sh-strip-label {
  color: #5f7893;
}
.sh-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 2px 20px;
  border-bottom: 1.5px solid #e3ecf7;
}
[data-theme="dark"] .sh-strip {
  border-color: rgba(255, 255, 255, 0.08);
}
.sh-strip-ring {
  --sh-pct: 0;
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#34d399 calc(var(--sh-pct) * 1%), #e3ecf7 0);
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-theme="dark"] .sh-strip-ring {
  background: conic-gradient(#34d399 calc(var(--sh-pct) * 1%), rgba(255, 255, 255, 0.1) 0);
}
.sh-strip-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #f8fbff;
  box-shadow: inset 0 1px 3px rgba(10, 30, 70, 0.06);
}
[data-theme="dark"] .sh-strip-ring::before {
  background: #101f2f;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sh-strip-ring.is-bad {
  background: conic-gradient(#f0656a calc(var(--sh-pct) * 1%), #e3ecf7 0);
}
[data-theme="dark"] .sh-strip-ring.is-bad {
  background: conic-gradient(#f0656a calc(var(--sh-pct) * 1%), rgba(255, 255, 255, 0.1) 0);
}
.sh-strip-ring-num {
  position: relative;
  font-size: 1rem;
  font-weight: 800;
  color: #17324a;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .sh-strip-ring-num {
  color: #e6edf6;
}
.sh-strip-ring:hover {
  opacity: 0.85;
  transform: scale(1.05);
}
.sh-strip-ring.is-selected {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px #f2b445, 0 6px 14px rgba(242, 180, 69, 0.3);
}
[data-theme="dark"] .sh-strip-ring.is-selected {
  box-shadow: 0 0 0 3px #f2c14e, 0 6px 14px rgba(242, 193, 78, 0.3);
}
.sh-strip-ring:focus-visible {
  outline: 2px solid #1278d0;
  outline-offset: 3px;
}

.sh-strip-expand-btn {
  display: block;
  margin: 2px auto 0;
  background: #eef4fb;
  color: #1278d0;
  border: 1px solid #d6e4f4;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
}
.sh-strip-expand-btn:hover {
  background: #d9e9fb;
  border-color: #b0cce8;
}
[data-theme="dark"] .sh-strip-expand-btn {
  background: rgba(240, 180, 41, 0.12);
  color: #f2c14e;
  border-color: rgba(240, 180, 41, 0.25);
}
[data-theme="dark"] .sh-strip-expand-btn:hover {
  background: rgba(240, 180, 41, 0.2);
}

/* ── Detail: selected run's checks (hidden until a ring is clicked) ── */
.sh-detail {
  animation: sh-detail-in 0.22s ease;
}
@keyframes sh-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sh-detail-hint {
  text-align: center;
  color: #96a9bd;
  font-size: 0.85rem;
  padding: 6px 0 2px;
  margin: 0;
}
[data-theme="dark"] .sh-detail-hint {
  color: #5f7893;
}
.sh-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.site-health-scope-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1278d0;
  background: rgba(18, 120, 208, 0.1);
  border-radius: 999px;
  padding: 2px 9px;
}
[data-theme="dark"] .site-health-scope-badge {
  color: #75bdf2;
  background: rgba(117, 189, 242, 0.12);
}
.sh-detail-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: #17324a;
}
[data-theme="dark"] .sh-detail-count {
  color: #dde8f8;
}
.sh-detail-time {
  font-size: 0.78rem;
  color: #8098b0;
  margin-left: auto;
}
[data-theme="dark"] .sh-detail-time {
  color: #6a86a2;
}

.site-health-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-health-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-health-check-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
}
.site-health-check.is-pass .site-health-check-icon {
  background: #2fbf71;
}
.site-health-check.is-fail .site-health-check-icon {
  background: #e5484d;
}
.site-health-check-name {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: #3a5064;
}
[data-theme="dark"] .site-health-check-name {
  color: #b9cbdd;
}
.site-health-check.is-fail .site-health-check-name {
  color: #b83034;
  font-weight: 600;
}
[data-theme="dark"] .site-health-check.is-fail .site-health-check-name {
  color: #ff8a8d;
}
.site-health-check-ms {
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  color: #a3b6c8;
}
.site-health-check-error {
  margin: 4px 0 0 25px;
  font-size: 0.78rem;
  color: #b83034;
  background: rgba(229, 72, 77, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  word-break: break-word;
}
[data-theme="dark"] .site-health-check-error {
  color: #ff9da0;
  background: rgba(229, 72, 77, 0.14);
}

@media (max-width: 560px) {
  .admin-site-health-card {
    max-height: 94vh;
    border-radius: 16px;
  }
  .sh-strip-ring {
    width: 64px;
    height: 64px;
  }
  .sh-strip-ring-num {
    font-size: 0.85rem;
  }
}

/* ── Admin Articles Manager ── */
.admin-articles-open-btn {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff;
  border: none;
  font-size: 0.82rem;
  padding: 7px 14px;
  margin-right: 8px;
}
.admin-articles-edit-fields {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-articles-select {
  max-width: 120px;
}
.admin-articles-gradient-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-articles-gradient-preview {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.1);
}
.admin-articles-gradient-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-articles-preset-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.admin-articles-preset-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,.7);
}
.admin-articles-gradient-input {
  font-size: 0.8rem !important;
}
.admin-articles-row-cover {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.admin-articles-mini-edit {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 14px rgba(29,78,216,0.28) !important;
}

/* Admin articles — PDF upload row */
.admin-articles-pdf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-articles-pdf-name {
  font-size: 0.82rem;
  color: #6a8aaa;
  word-break: break-all;
}
[data-theme="dark"] .admin-articles-pdf-name {
  color: #7a9ab8;
}

/* ── Emoji icon picker ── */
.admin-articles-icon-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-articles-icon-preview-btn {
  width: 56px;
  height: 56px;
  font-size: 1.8rem;
  background: #f0f4fb;
  border: 2px solid #d0dcea;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, transform .1s;
  line-height: 1;
}
.admin-articles-icon-preview-btn:hover {
  border-color: #3b82f6;
  transform: scale(1.06);
}
[data-theme="dark"] .admin-articles-icon-preview-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
.admin-articles-icon-hint {
  font-size: 0.78rem;
  color: #7a9ab8;
}
.admin-articles-emoji-picker {
  border: 1.5px solid #d0dcea;
  border-radius: 14px;
  background: #f7faff;
  overflow: hidden;
  margin-top: 4px;
}
[data-theme="dark"] .admin-articles-emoji-picker {
  background: #0c1826;
  border-color: rgba(255,255,255,0.12);
}
.admin-articles-emoji-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 6px;
  overflow-x: auto;
  border-bottom: 1px solid #e2eaf4;
  scrollbar-width: thin;
}
[data-theme="dark"] .admin-articles-emoji-tabs {
  border-color: rgba(255,255,255,0.08);
}
.admin-articles-emoji-tab {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 1.25rem;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.admin-articles-emoji-tab:hover {
  background: rgba(59,130,246,0.1);
}
.admin-articles-emoji-tab.is-active {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.12);
}
.admin-articles-emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 8px 10px 10px;
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.admin-articles-emoji-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 1.3rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .1s, border-color .1s, transform .1s;
  line-height: 1;
}
.admin-articles-emoji-btn:hover {
  background: rgba(59,130,246,0.13);
  border-color: rgba(59,130,246,0.35);
  transform: scale(1.18);
}
/* Gradient presets — make them wrap in more rows */
.admin-articles-gradient-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 320px;
}
.admin-articles-preset-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.admin-articles-preset-btn:hover {
  transform: scale(1.2);
  border-color: rgba(255,255,255,0.8);
}

/* ── Article topic badge — clickable ── */
.article-badge-topic {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  transition: color .15s, background .15s, transform .1s;
}
.article-badge-topic:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.article-badge-topic.is-active {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 1px;
}

/* ── Active topic filter chip ── */
.articles-topic-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  animation: fadeIn .2s ease;
}
.articles-topic-chip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e40af;
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.1) 100%);
  border: 2px solid rgba(59,130,246,0.45);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 2px 10px rgba(59,130,246,0.18);
}
.articles-topic-chip-label strong {
  color: #2563eb;
  font-weight: 700;
}
.articles-topic-chip-clear {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(59,130,246,0.18);
  border: 2px solid rgba(59,130,246,0.4);
  color: #2563eb;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .12s;
  font-weight: 700;
}
.articles-topic-chip-clear:hover {
  background: rgba(59,130,246,0.32);
  transform: scale(1.1);
}
[data-theme="dark"] .articles-topic-chip-label {
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(37,99,235,0.12) 100%);
  border-color: rgba(96,165,250,0.5);
  box-shadow: 0 2px 12px rgba(59,130,246,0.25);
}
[data-theme="dark"] .articles-topic-chip-label strong { color: #60a5fa; }
[data-theme="dark"] .articles-topic-chip-clear { color: #60a5fa; background: rgba(59,130,246,0.2); border-color: rgba(96,165,250,0.45); }

/* ── Article card title — redesign ── */
.article-card-item h3 {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.35;
  min-height: unset;
  margin: 10px 0 6px;
  /* side padding keeps serif ends inside the gradient clip box */
  padding: 2px 6px;
  letter-spacing: -0.15px;
  text-wrap: balance;
  color: #0d1f3c;
  position: relative;
  /* clip long ascenders/descenders to the element box */
  overflow: hidden;
}

/* Thin accent rule — full width of the badges row */
.article-card-item .article-card-badges {
  position: relative;
  padding-bottom: 10px;
  width: 100%;
}
.article-card-item .article-card-badges::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6 60%, transparent 100%);
}

[data-theme="dark"] .article-cover-read-badge {
  background: rgba(6, 11, 22, 0.45);
  color: #3ddc84;
}

/* Dark mode — white-to-sky gradient text */
[data-theme="dark"] .article-card-item h3 {
  background: linear-gradient(135deg, #ffffff 10%, #9ecfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .article-card-item .article-card-badges::after {
  background: linear-gradient(90deg, #60a5fa 60%, transparent 100%);
}

/* Hover: title lifts slightly */
.article-card-item:hover h3 {
  transform: translateY(-1px);
  transition: transform .2s ease;
}

/* Level-matched page backgrounds — fixed, no theme switching */
.lessons-page.lp-a1 { background: linear-gradient(180deg,#2a0f00 0%,#1a0800 100%); }
.lessons-page.lp-a2 { background: linear-gradient(180deg,#0c1528 0%,#07101f 100%); }
.lessons-page.lp-b1 { background: linear-gradient(180deg,#021a19 0%,#011010 100%); }
.lessons-page.lp-b2 { background: linear-gradient(180deg,#10042a 0%,#08031a 100%); }

/* Header fade-into-level-page — gradient strip just below the sticky header */
body.lp-a1 .level-header::after,
body.lp-a2 .level-header::after,
body.lp-b1 .level-header::after,
body.lp-b2 .level-header::after {
  content: '';
  position: absolute;
  bottom: -28px; left: 0; right: 0;
  height: 28px;
  pointer-events: none;
  z-index: 0;
}
body.lp-a1 .level-header::after { background: linear-gradient(to bottom,#1a0800,transparent); }
body.lp-a2 .level-header::after { background: linear-gradient(to bottom,#07101f,transparent); }
body.lp-b1 .level-header::after { background: linear-gradient(to bottom,#011010,transparent); }
body.lp-b2 .level-header::after { background: linear-gradient(to bottom,#08031a,transparent); }

/* Level-matched upgrade banner */
body.lp-a1 .lessons-header h1,
body.lp-a2 .lessons-header h1,
body.lp-b1 .lessons-header h1,
body.lp-b2 .lessons-header h1 { color: #ffffff; }
body.lp-a1 .lessons-header p,
body.lp-a2 .lessons-header p,
body.lp-b1 .lessons-header p,
body.lp-b2 .lessons-header p { color: rgba(255,255,255,.60); }
body.lp-a1 .lessons-header .lessons-access-note { background: rgba(234,88,12,.18); border-color: rgba(234,88,12,.55); color: #fed7aa; }
body.lp-a2 .lessons-header .lessons-access-note { background: rgba(37,99,235,.18);  border-color: rgba(37,99,235,.55);  color: #bfdbfe; }
body.lp-b1 .lessons-header .lessons-access-note { background: rgba(13,148,136,.18); border-color: rgba(13,148,136,.55); color: #99f6e4; }
body.lp-b2 .lessons-header .lessons-access-note { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.55); color: #ddd6fe; }

body.lp-a1 .level-upgrade-banner-inner { background: linear-gradient(135deg,#3a1500 0%,#7a3800 60%,#3a1500 100%); }
body.lp-a1 .level-upgrade-sub strong   { color: #FCD34D; }
body.lp-a2 .level-upgrade-banner-inner { background: linear-gradient(135deg,#0d1e38 0%,#1e3a70 60%,#0d1e38 100%); }
body.lp-a2 .level-upgrade-sub strong   { color: #93c5fd; }
body.lp-b1 .level-upgrade-banner-inner { background: linear-gradient(135deg,#042f2e 0%,#0d6b64 60%,#042f2e 100%); }
body.lp-b1 .level-upgrade-sub strong   { color: #5EEAD4; }
body.lp-b2 .level-upgrade-banner-inner { background: linear-gradient(135deg,#1a073d 0%,#4c1d95 60%,#1a073d 100%); }
body.lp-b2 .level-upgrade-sub strong   { color: #c4b5fd; }

/* Level-matched loading overlay */
body.lp-a1 .lessons-loading-overlay { background: #1a0800; }
body.lp-a1 .lessons-loading-overlay::before { background: #EA580C; }
body.lp-a1 .lessons-loading-overlay::after  { background: #F59E0B; }

body.lp-a2 .lessons-loading-overlay { background: #07101f; }
body.lp-a2 .lessons-loading-overlay::before { background: #2563EB; }
body.lp-a2 .lessons-loading-overlay::after  { background: #60A5FA; }

body.lp-b1 .lessons-loading-overlay { background: #011010; }
body.lp-b1 .lessons-loading-overlay::before { background: #0D9488; }
body.lp-b1 .lessons-loading-overlay::after  { background: #2DD4BF; }

body.lp-b2 .lessons-loading-overlay { background: #08031a; }
body.lp-b2 .lessons-loading-overlay::before { background: #7C3AED; }
body.lp-b2 .lessons-loading-overlay::after  { background: #A78BFA; }

/* Articles grid — always 3 equal columns (1 card stays same size as in a full row) */
#articles-grid,
#articles-favorites-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  #articles-grid,
  #articles-favorites-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  #articles-grid,
  #articles-favorites-grid {
    grid-template-columns: 1fr;
  }
}