/**
 * File: spa.css
 * Purpose: Single-Page Application shell — tab bar, panel switching,
 * and merged panel-specific styles from profile-account.css,
 * subscription-status.css, and current-affairs-list.css.
 * All panel rules are scoped under their #panel-* ID so there are
 * zero conflicts between sections that share class names (e.g. .section-label,
 * .topbar, .panel, .page).
 */

/* ══════════════════════════════════════════════════════════════
   SPA SHELL & PANEL SWITCHING
   ══════════════════════════════════════════════════════════════ */

/* Page wrapper — used by all panels */
.spa-page {
  width: 100%;
  padding: 16px;
}

@media (min-width: 1024px) {
  .spa-page { padding: 40px; }
}


/* Support panel — override support.css standalone padding
   since .spa-page already handles margins/padding */
#panel-support .spa-page.support-page {
  padding: 16px 16px 24px;
}

@media (min-width: 768px) {
  #panel-support .spa-page.support-page { padding: 20px; }
}

@media (min-width: 1024px) {
  #panel-support .spa-page.support-page {
    padding: 32px;
  }
}

/* Panel container — hidden by default */
.spa-panel {
  display: none;
  animation: ao-fade-in 0.22s ease both;
}

.spa-panel.is-active {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════════════════════ */

.spa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(15,23,42,0.22);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

.spa-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.spa-toast.is-success { background: #16a34a; }
.spa-toast.is-error   { background: var(--red-soft-text); }

.spa-toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   PANEL: HOME (dashboard cards + search)
   Matches original dashboard.css exactly.
   ══════════════════════════════════════════════════════════════ */

/* ── SEARCH BOX ─────────────────────────────────── */
.search-box-wrap {
  margin-bottom: 24px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 0 14px;
  height: 46px;
}

.search-box .search-icon {
  width: 18px; height: 18px; color: var(--muted); flex-shrink: 0;
}

.search-input {
  flex: 1; height: 100%; border: none;
  background: transparent; outline: none;
  font-size: 13px; color: var(--ink); padding: 0 10px; min-width: 0;
}

.search-input::placeholder { color: var(--muted); }

.search-spinner {
  border-color: rgba(37, 99, 235, 0.25);
  border-top-color: var(--blue);
  flex-shrink: 0;
}

.search-results { margin-top: 14px; }

@media (min-width: 1024px) {
  .search-box { height: 50px; border-radius: 16px; }
  .search-input { font-size: 14px; }
}

/* ── SECTION LABEL (home) ───────────────────────── */
#panel-home .section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  #panel-home .section-label { gap: 12px; margin-bottom: 20px; }
}

#panel-home .section-label .icon-box {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; overflow: hidden;
}

#panel-home .section-label .icon-box svg { width: 19px; height: 19px; }
#panel-home .section-label .icon-box img { width: 22px; height: 22px; object-fit: contain; }

#panel-home .section-label h2,
#panel-home .category-line {
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  margin: 0; white-space: nowrap;
}

@media (min-width: 1024px) {
  #panel-home .section-label h2,
  #panel-home .category-line { font-size: 13px; }
}

#panel-home .section-label .rule {
  flex: 1; height: 2px; background: #d8deea; position: relative;
  align-self: center;
}

#panel-home .section-label .rule::after {
  content: ''; position: absolute; right: 0; top: -1px;
  width: 22px; height: 4px; border-radius: 2px;
  background: var(--section-accent, var(--blue));
}

@media (min-width: 1024px) {
  #panel-home .section-label .rule::after { width: 28px; }
}

/* ── CARDS GRID (home) ──────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 28px;
  align-items: start; /* Fix: mixed card types (tool/digest/classic) shouldn't stretch to match each other's height */
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Fix: grid items need min-width:0 so they can shrink below content width
   (CSS grid default is min-width:auto which causes horizontal overflow at grid=2 on mobile) */
.cards > .digest-card,
.cards > .tool-card {
  min-width: 0;
}

/* ── CARD COLOR WASHES ──────────────────────────── */
.card.blue::before   { background: linear-gradient(135deg, #cfdcff 0%, rgba(207,220,255,0) 75%); }
.card.green::before  { background: linear-gradient(135deg, #c9ecd6 0%, rgba(201,236,214,0) 75%); }
.card.purple::before { background: linear-gradient(135deg, #d9cdf9 0%, rgba(217,205,249,0) 75%); }
.card.orange::before { background: linear-gradient(135deg, #fbd9ad 0%, rgba(251,217,173,0) 75%); }
.card.red::before    { background: linear-gradient(135deg, #fbd0d0 0%, rgba(251,208,208,0) 75%); }
.card.pink::before   { background: linear-gradient(135deg, #fad3e7 0%, rgba(250,211,231,0) 75%); }

/* Bookmarks color washes */
.card.free::before    { background: linear-gradient(135deg, #c9ecd6 0%, rgba(201,236,214,0) 75%); }
.card.premium::before { background: linear-gradient(135deg, #fbd9ad 0%, rgba(251,217,173,0) 75%); }

/* ── ICON CIRCLE content ────────────────────────── */
.icon-circle img,
.icon-circle .placeholder,
.category-card-icon { width: 34px; height: 34px; }

.icon-circle .placeholder,
.category-card-icon { display: flex; align-items: center; justify-content: center; }

/* ── TAG / BADGE ────────────────────────────────── */
.tag, .category-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  max-width: 100%; height: 16px; font-size: 8px; font-weight: 700;
  letter-spacing: 0.4px; gap: 4px; padding: 0 8px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 1px rgba(20,30,70,0.05);
  border: 1px solid rgba(255,255,255,0.4);
}

.tag::after, .category-tag::after {
  content: ''; position: absolute; inset: 0; border-radius: 5px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%);
}

.tag svg, .category-tag svg { width: 11px; height: 11px; flex-shrink: 0; }

.card-pill-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 8px; width: 100%; margin: 4px 0 0;
}

.card-pill-row .tag,
.card-pill-row .free-pill { align-self: center; margin: 0; }

.tag.blue   { background: color-mix(in srgb, var(--blue-soft) 78%, transparent);   color: var(--blue-soft-text); }
.tag.green  { background: color-mix(in srgb, var(--green-soft) 78%, transparent);  color: var(--green-soft-text); }
.tag.purple { background: color-mix(in srgb, var(--purple-soft) 78%, transparent); color: var(--purple-soft-text); }
.tag.orange { background: color-mix(in srgb, var(--orange-soft) 78%, transparent); color: var(--orange-soft-text); }
.tag.red    { background: color-mix(in srgb, var(--red-soft) 78%, transparent);    color: var(--red-soft-text); }
.tag.pink   { background: color-mix(in srgb, var(--pink-soft) 78%, transparent);   color: var(--pink-soft-text); }
.tag.premium, .category-tag.premium {
  background: color-mix(in srgb, var(--orange-soft) 78%, transparent);
  color: var(--orange-soft-text);
}

.card-body h3, .category-card-name { margin: 1px 0 0; text-align: left; width: 100%; }

/* ══════════════════════════════════════════════════════════════
   SHARED: TOP BAR (used by Profile, Bookmarks, Subscription panels)
   ══════════════════════════════════════════════════════════════ */

.topbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}

@media (min-width: 1024px) { .topbar { margin-bottom: 26px; } }

/* Rule line inside topbar — same row as icon + title */
.topbar .topbar-rule {
  flex: 1; height: 2px; background: #d8deea; position: relative; align-self: center;
}

.topbar .topbar-rule::after {
  content: ''; position: absolute; right: 0; top: -1px;
  width: 22px; height: 4px; border-radius: 2px;
  background: var(--topbar-accent, var(--blue));
}

@media (min-width: 1024px) {
  .topbar .topbar-rule::after { width: 28px; }
}

.title-icon-box {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}

.title-icon-box svg { width: 18px; height: 18px; }
.title-icon-box img { width: 20px; height: 20px; object-fit: contain; }

/* Content panel rule with dynamic accent color from section icon */
.section-rule-wrap {
  --rule-accent: var(--blue);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.section-rule-wrap .rule {
  flex: 1; height: 2px; background: #d8deea; position: relative; align-self: center;
}
.section-rule-wrap .rule::after {
  content: ''; position: absolute; right: 0; top: -1px;
  width: 22px; height: 4px; border-radius: 2px;
  background: var(--rule-accent);
}
@media (min-width: 1024px) {
  .section-rule-wrap .rule::after { width: 28px; }
}

.topbar h2 {
  font-size: 13px; font-weight: 800; letter-spacing: 0.2px;
  margin: 0; white-space: nowrap; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   PANEL: PROFILE
   ══════════════════════════════════════════════════════════════ */

/* ── PROFILE HERO CARD ──────────────────────────── */
.profile-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 16px; overflow: hidden;
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.profile-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 80%;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(135deg, #cfdcff 0%, rgba(207,220,255,0) 75%);
  pointer-events: none; z-index: 1;
}

.profile-hero::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.avatar {
  position: relative; z-index: 2; width: 64px; height: 64px; min-width: 64px;
  border-radius: 50%; background: #0f172a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; box-shadow: 0 4px 16px rgba(20,30,70,0.12);
}

.ph-body { position: relative; z-index: 2; flex: 1; min-width: 0; }

.ph-body h2 {
  font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin: 0 0 4px;
  text-transform: none;
}

.ph-body .ph-mail {
  font-size: 12px; color: var(--muted); margin: 0 0 8px; overflow-wrap: anywhere;
}

.plan-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
  padding: 0 10px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-soft-text);
}

.plan-pill.is-free { background: var(--blue-soft); color: var(--blue-soft-text); }
.plan-pill svg { width: 13px; height: 13px; }

/* ── STAT ROW ───────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px;
}

.stat-box {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 14px 12px; text-align: center;
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stat-box::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.stat-row .stat-box:nth-child(1) { animation-delay: 0.12s; }
.stat-row .stat-box:nth-child(2) { animation-delay: 0.17s; }
.stat-row .stat-box:nth-child(3) { animation-delay: 0.22s; }

.stat-box .num { position: relative; z-index: 2; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; line-height: 1; margin-bottom: 4px; color: var(--ink); }
.stat-box .label { position: relative; z-index: 2; font-size: 9.5px; font-weight: 600; color: var(--muted); }

@media (max-width: 420px) {
  .stat-box { padding: 12px 8px; }
  .stat-box .num { font-size: 16px; }
  .stat-box .label { font-size: 8.5px; }
}

/* ── SECTION LABEL (profile/subscription) ───────── */
#panel-profile .section-label,
#panel-subscription .section-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.3px; color: var(--muted); text-transform: uppercase;
}

/* ── PANEL CARD ─────────────────────────────────── */
.panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 6px; margin-bottom: 18px;
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both;
}

.panel::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.panel + .section-label + .panel { animation-delay: 0.36s; }
.section-label + .panel { animation-delay: 0.36s; }

/* ── INFO ROWS ──────────────────────────────────── */
.info-row {
  position: relative; z-index: 1; display: flex; align-items: center;
  gap: 14px; padding: 14px; border-bottom: 1px solid var(--card-border);
}

.info-row:last-child { border-bottom: none; }

/* ── 2-COL GRID (desktop) ───────────────────────────────────── */
@media (min-width: 1024px) {
  .panel.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* Kill all horizontal borders — hidden items break nth-last-child counting */
  .panel.info-grid .info-row,
  .panel.info-grid .info-row:last-child {
    border-bottom: none;
  }
  /* Only column separator */
  .panel.info-grid .info-row:nth-child(odd) {
    border-right: 1px solid var(--card-border);
  }
  /* Row separator via top-border on 2nd row (Account Details: items 3,4 always visible) */
  .panel.info-grid.has-2rows .info-row:nth-child(n+3) {
    border-top: 1px solid var(--card-border);
  }
}

.info-row .ir-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}

.info-row .ir-icon svg { width: 18px; height: 18px; }

.info-row.c-blue .ir-icon   { background: var(--blue-soft);   color: var(--blue-soft-text); }
.info-row.c-green .ir-icon  { background: var(--green-soft);  color: var(--green-soft-text); }
.info-row.c-orange .ir-icon { background: var(--orange-soft); color: var(--orange-soft-text); }
.info-row.c-red .ir-icon    { background: var(--red-soft);    color: var(--red-soft-text); }

.ir-body { flex: 1; min-width: 0; }
.ir-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--muted); text-transform: uppercase; margin-bottom: 3px; }
.ir-value { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

.ir-action {
  position: relative; overflow: hidden; flex-shrink: 0;
  height: 32px; padding: 0 13px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.68) 100%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(20,30,70,0.04), 0 1px 4px rgba(20,30,70,0.08);
  font-size: 11px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--font-main);
}

.ir-action::after {
  content: ''; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.ir-action:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.80) 100%);
  transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(20,30,70,0.10);
}

.ir-action:active { transform: scale(0.96); }

/* ── MODAL ──────────────────────────────────────── */
.ao-modal-scrim {
  position: fixed; inset: 0; background: rgba(15,23,42,0.35);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  display: none; align-items: center; justify-content: center;
  padding: 16px; z-index: 210;
}

.ao-modal-scrim.is-open { display: flex; }

.ao-modal-box {
  position: relative; overflow: hidden;
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.66) 100%);
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--modal-shadow), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  padding: 22px;
  animation: ao-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ao-modal-box::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.ao-modal-box h3 { position: relative; z-index: 1; font-size: 15px; font-weight: 800; margin: 0 0 14px; }
.ao-modal-box .field { position: relative; z-index: 1; margin-bottom: 14px; }
.ao-modal-box label {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 6px;
}

.ao-modal-box input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.55) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), inset 0 2px 6px rgba(20,30,70,0.04), 0 1px 3px rgba(20,30,70,0.06);
  font-size: 13px; font-weight: 600; color: var(--ink); outline: none;
  font-family: var(--font-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ao-modal-box input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-soft) 80%, transparent), inset 0 1px 0 rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.92);
}

.ao-modal-actions { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 16px; }

.ao-modal-actions button {
  position: relative; overflow: hidden; flex: 1; height: 42px;
  border-radius: 11px; font-size: 13px; font-weight: 700; border: none;
  cursor: pointer; font-family: var(--font-main);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ao-modal-actions button:active { transform: scale(0.97); }

.ao-modal-actions .btn-cancel {
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.68) 100%);
  color: var(--ink); border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 4px rgba(20,30,70,0.08);
}

.ao-modal-actions .btn-cancel::after {
  content: ''; position: absolute; inset: 0; border-radius: 11px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.ao-modal-actions .btn-cancel:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.80) 100%);
}

.ao-modal-actions .btn-save {
  background: linear-gradient(180deg, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.85) 100%);
  color: #fff; border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(20,30,70,0.18);
}

.ao-modal-actions .btn-save::after {
  content: ''; position: absolute; inset: 0; border-radius: 11px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.ao-modal-actions .btn-save:hover {
  background: linear-gradient(180deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.90) 100%);
}

/* ── INLINE FEEDBACK BANNERS ─────────────────────── */
.spa-feedback {
  border-radius: 12px; padding: 13px 16px; font-size: 13px;
  font-weight: 600; margin-bottom: 16px;
}

.spa-feedback.is-error   { background: var(--red-soft);   color: var(--red-soft-text); }
.spa-feedback.is-success { background: var(--green-soft); color: var(--green-soft-text); }

/* ══════════════════════════════════════════════════════════════
   PANEL: BOOKMARKS
   ══════════════════════════════════════════════════════════════ */

/* Date icon-circle (stacked day-num / day-mon) */
#panel-bookmarks .icon-circle,
#panel-content .icon-circle { flex-direction: column; }

#panel-bookmarks .icon-circle .day-num,
#panel-content .icon-circle .day-num {
  font-size: 17px; font-weight: 800; line-height: 1; color: var(--ink);
}

#panel-bookmarks .icon-circle .day-mon,
#panel-content .icon-circle .day-mon {
  font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--muted); text-transform: uppercase; margin-top: 1px;
}

#panel-bookmarks .meta-row,
#panel-content .meta-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px;
}

#panel-bookmarks .meta-row span,
#panel-content .meta-row span {
  font-size: 10.5px; font-weight: 400; color: var(--muted);
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}

#panel-content .meta-row .dot {
  width: 3px; height: 3px; border-radius: 50%; background: #cbd2de; flex-shrink: 0;
}

#panel-content .card-body {
  align-self: center; gap: 0;
}

#panel-content .card-body h3 {
  margin: 0;
}

#panel-content .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  background: #eef1f6;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

#panel-content .back-btn:hover { background: #e3e7ef; }
#panel-content .back-btn svg { width: 15px; height: 15px; }

@media (max-width: 420px) {
  #panel-content .meta-row span { font-size: 10px; }
  #panel-content .card { padding: 12px 14px; gap: 11px; }
  #panel-content .icon-circle { width: 50px; height: 50px; min-width: 50px; }
  #panel-content .icon-circle .day-num { font-size: 16px; }
  #panel-content .card-body h3 { font-size: 11.5px; }
}

/* Remove bookmark button */
.remove-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 26px;
  padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.4);
  background: color-mix(in srgb, #ffffff 78%, transparent);
  font-size: 10px; font-weight: 700; color: var(--muted);
  cursor: pointer; position: relative;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 1px rgba(20,30,70,0.05);
  transition: background 0.15s ease, color 0.15s ease;
  font-family: var(--font-main);
}

.remove-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%);
}

@media (hover: hover) and (pointer: fine) {
  .remove-btn:hover {
    background: color-mix(in srgb, var(--red-soft) 78%, transparent);
    color: var(--red-soft-text); border-color: transparent;
  }
}

.remove-btn svg { width: 11px; height: 11px; position: relative; z-index: 1; }

/* Fade-out animation when bookmark is removed */
@keyframes bookmark-remove {
  from { opacity: 1; transform: scale(1); max-height: 200px; margin-bottom: 12px; }
  to   { opacity: 0; transform: scale(0.95); max-height: 0; margin-bottom: 0; padding: 0; }
}

.bookmark-removing {
  animation: bookmark-remove 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  overflow: hidden;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   PANEL: SUBSCRIPTION
   ══════════════════════════════════════════════════════════════ */

/* ── STATUS HERO ────────────────────────────────── */
.status-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 24px; margin-bottom: 18px; overflow: hidden; text-align: center;
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.status-hero::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.status-hero.premium::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--orange), #ffc23c); z-index: 2;
}

.status-hero.free::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--blue), #5b8dff); z-index: 2;
}

.status-hero.free    { background: linear-gradient(135deg, rgba(231,237,255,0.55) 0%, rgba(255,255,255,0.55) 60%); }
.status-hero.premium { background: linear-gradient(135deg, rgba(255,238,222,0.55) 0%, rgba(255,255,255,0.55) 60%); }

.status-icon {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
}

.status-hero.premium .status-icon { background: var(--orange-soft); color: var(--orange-soft-text); }
.status-hero.free    .status-icon { background: var(--blue-soft);   color: var(--blue-soft-text); }
.status-icon svg { width: 27px; height: 27px; }

.status-hero h2 {
  position: relative; z-index: 2; font-size: 18px; font-weight: 800;
  letter-spacing: -0.2px; margin: 0 0 6px; text-transform: none;
}

.status-hero .sh-sub {
  position: relative; z-index: 2; font-size: 13px; color: var(--muted);
  margin: 0 0 18px; line-height: 1.5;
}

/* ── PLAN CARD ──────────────────────────────────── */
.plan-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 16px; margin-bottom: 18px;
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s both;
}

.plan-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.plan-row {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; padding: 7px 0;
}

.plan-row + .plan-row { border-top: 1px solid var(--card-border); }
.plan-row .label { font-size: 12px; color: var(--muted); font-weight: 600; }
.plan-row .value { font-size: 13px; font-weight: 700; color: var(--ink); }
.plan-row .value.price { font-size: 20px; font-weight: 800; color: var(--blue); }
.plan-row .value.price span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ── FEATURE LIST ───────────────────────────────── */
.feature-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.feature-list li {
  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
  color: #334155; line-height: 1.4;
  animation: cardPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.feature-list li:nth-child(1) { animation-delay: 0.20s; }
.feature-list li:nth-child(2) { animation-delay: 0.25s; }
.feature-list li:nth-child(3) { animation-delay: 0.30s; }
.feature-list li:nth-child(4) { animation-delay: 0.35s; }

.feature-list .tick {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  background: var(--green-soft); display: flex; align-items: center;
  justify-content: center; margin-top: 1px;
}

.feature-list .tick svg { width: 11px; height: 11px; }

.feature-list .lock {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  background: #eef1f6; display: flex; align-items: center; justify-content: center;
  margin-top: 1px; color: var(--muted);
}

.feature-list .lock svg { width: 11px; height: 11px; }
.feature-list li.locked { color: var(--muted); }

/* ── BUTTONS ────────────────────────────────────── */
.btn-primary {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; gap: 8px; width: 100%; height: 46px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.85) 100%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(20,30,70,0.18);
  color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  margin-bottom: 10px; font-family: var(--font-main);
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s both;
}

.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-primary:hover {
  background: linear-gradient(180deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.90) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px rgba(20,30,70,0.22);
}

.btn-primary:active { transform: scale(0.985); }
.btn-primary svg { width: 16px; height: 16px; }

.btn-secondary {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; width: 100%; height: 44px;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.68) 100%);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(20,30,70,0.04), 0 1px 4px rgba(20,30,70,0.08);
  color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--font-main);
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s both;
}

.btn-secondary::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.btn-secondary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.80) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(20,30,70,0.10);
}

.btn-secondary:active { transform: scale(0.985); }

/* ── PAYMENT HISTORY ────────────────────────────── */
.history-row {
  position: relative; z-index: 1; display: flex; align-items: center;
  gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--card-border);
}

.history-row:last-child { border-bottom: none; }

.history-row .hr-icon {
  width: 32px; height: 32px; min-width: 32px; border-radius: 9px;
  background: var(--green-soft); color: var(--green-soft-text);
  display: flex; align-items: center; justify-content: center;
}

.history-row .hr-icon svg { width: 16px; height: 16px; }

.hr-body { flex: 1; min-width: 0; }
.hr-title { font-size: 12.5px; font-weight: 700; }
.hr-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.hr-amount { font-size: 13px; font-weight: 800; flex-shrink: 0; }

/* Pill badge */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 9.5px; font-weight: 700; flex-shrink: 0;
}

.pill.green { background: var(--green-soft); color: var(--green-soft-text); }

/* Less space between cards and pagination */
#content-notes-list { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════
   DIGEST CARD — exact match to card desgin.html
   Scoped inside .digest-card to avoid conflicts with classic
   .free-pill / .premium-pill elsewhere in spa.css
   ══════════════════════════════════════════════════════════════ */

/* Grid wrapper — same as design file .cards-wrap */
.cards-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  padding: 10px;
}

/* Outer card */
.digest-card {
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: #0d1117;
  min-height: 72px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  border: 1px solid #f2f5f9;
}

/* ── Date calendar widget (content cards) ─────────────────── */
.digest-card .date-col {
  width: 44px;
  background: #ffffff;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 12px 10px 12px 12px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #f0f3f6;
}

.digest-card .date-month {
  background: linear-gradient(90deg, #2563eb, #20b2aa);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  padding: 2.5px 0;
}

.digest-card .date-day {
  font-size: 22px;
  font-weight: 900;
  color: #0d1117;
  line-height: 1;
  letter-spacing: -0.5px;
  margin-top: 5px;
}

.digest-card .date-wd {
  font-size: 8.5px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 1px;
  margin-bottom: 5px;
}

/* ── Icon column (category cards — no date) ──────────────── */
.digest-card .cat-icon-col {
  width: 44px;
  background: #f1f5fd;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 10px 12px 12px;
  flex-shrink: 0;
  min-height: 56px;
  font-size: 24px;
  line-height: 1;
}

/* ── Middle content area ─────────────────────────────────── */
.digest-card .card-content {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.digest-card .card-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.digest-card .card-chip {
  display: inline-flex;
  align-items: center;
  background: #e8f0fe;
  color: #2563eb;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 5px;
  width: fit-content;
}

.digest-card .card-title {
  font-size: 12px;
  font-weight: 700;
  color: #0d1117;
  line-height: 1.2;
}
@media (min-width: 576px) {
  .digest-card .card-title { font-size: 13px; }
}

.digest-card .card-topics {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.digest-card .card-topics svg {
  width: 11px;
  height: 11px;
  color: #8a96a3;
  flex-shrink: 0;
  margin-top: 1px;
}
.digest-card .card-topics span {
  font-size: 10.5px;
  font-weight: 400;
  color: #5a6779;
  line-height: 1.35;
}

/* ── Free / Premium pills (scoped to digest-card) ─────────── */
/* Use !important to override any inherited .free-pill / .premium-pill
   styles from classic card rules elsewhere in spa.css              */
.digest-card .free-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #e5f6ed !important;
  color: #16a34a !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 2px 5px !important;
  width: fit-content !important;
  min-width: unset !important;
  max-width: unset !important;
  border: none !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  /* Neutralise base.css .free-pill bloat */
  height: auto !important;
  margin-top: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: static !important;
  white-space: normal !important;
}
/* Kill the glassmorphism ::after overlay from base.css */
.digest-card .free-pill::after {
  display: none !important;
  content: none !important;
}
.digest-card .free-pill svg {
  width: 8.5px !important;
  height: 8.5px !important;
  min-width: 8.5px !important;
  flex-shrink: 0;
  stroke-width: 3;
}

.digest-card .premium-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #fffbeb !important;
  color: #d97706 !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 2px 5px !important;
  width: fit-content !important;
  min-width: unset !important;
  max-width: unset !important;
  border: none !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.digest-card .premium-pill svg {
  width: 8.5px !important;
  height: 8.5px !important;
  min-width: 8.5px !important;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
}

/* ── Right arrow ─────────────────────────────────────────── */
.digest-card .card-arrow-wrap {
  display: flex;
  align-items: center;
  padding: 0 8px 0 2px;
  flex-shrink: 0;
}
.digest-card .arrow-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8f0fe;
  display: flex;
  align-items: center;
  justify-content: center;
}
.digest-card .arrow-btn svg { width: 13px; height: 13px; color: #2563eb; }

/* ══════════════════════════════════════════════════════════════
   TOOL CARD — exact match to card desgin (5).html
   ══════════════════════════════════════════════════════════════ */

.tool-card {
  display: flex;
  align-items: center;
  padding: 12px;
  min-height: 72px;
  background: #ffffff;
  border: 1px solid #f2f5f9;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  text-decoration: none;
  color: #0d1117;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.tool-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: #e2e8f0;
}

/* Staggered entry — same pattern as .cards .card:nth-child */
.cards .tool-card:nth-child(1)  { animation-delay: 0.02s; }
.cards .tool-card:nth-child(2)  { animation-delay: 0.06s; }
.cards .tool-card:nth-child(3)  { animation-delay: 0.10s; }
.cards .tool-card:nth-child(4)  { animation-delay: 0.14s; }
.cards .tool-card:nth-child(5)  { animation-delay: 0.18s; }
.cards .tool-card:nth-child(6)  { animation-delay: 0.22s; }

.tool-card .tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;        /* design: 18px */
  margin-right: 10px;
  flex-shrink: 0;
  line-height: 1;
}

.tool-card .tool-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-card .tool-info h3 {
  font-size: 12px;
  font-weight: 700;
  color: #0d1117;
  line-height: 1.2;
  margin: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (min-width: 576px) {
  .tool-card .tool-info h3 { font-size: 13px; }
}

.tool-card .tool-info p {
  font-size: 10.5px;
  color: #5a6779;
  line-height: 1.35;
  font-weight: 400;
  margin: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tool-card .use-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;      /* design: 6px 12px */
  border-radius: 4px;
  border: none;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.tool-card .use-tool-btn svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Colour themes */
.tool-card .blue-theme   { background: #EFF6FF; color: #2563EB; }
.tool-card .blue-btn     { background: #EFF6FF; color: #2563EB; }
.tool-card .green-theme  { background: #ECFDF5; color: #059669; }
.tool-card .green-btn    { background: #ECFDF5; color: #059669; }
.tool-card .orange-theme { background: #FFF7ED; color: #EA580C; }
.tool-card .orange-btn   { background: #FFF7ED; color: #EA580C; }
.tool-card .purple-theme { background: #F5F3FF; color: #7c3aed; }
.tool-card .purple-btn   { background: #F5F3FF; color: #7c3aed; }
.tool-card .red-theme    { background: #FEF2F2; color: #dc2626; }
.tool-card .red-btn      { background: #FEF2F2; color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   MCQ PRACTICE CARD
   Horizontal card with icon circle, title, coloured rule & link
   Adapted from card desgin.html for SPA rendering
   ══════════════════════════════════════════════════════════════ */
.cards > .mcq-card {
  animation: cardIn 0.25s ease both;
}
.cards > .mcq-card:nth-child(1) { animation-delay: 0.02s; }
.cards > .mcq-card:nth-child(2) { animation-delay: 0.06s; }
.cards > .mcq-card:nth-child(3) { animation-delay: 0.10s; }
.cards > .mcq-card:nth-child(4) { animation-delay: 0.14s; }
.cards > .mcq-card:nth-child(5) { animation-delay: 0.18s; }
.cards > .mcq-card:nth-child(6) { animation-delay: 0.22s; }

.mcq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}

.mcq-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.mcq-card .mcq-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  overflow: hidden;
}

.mcq-card .mcq-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.mcq-card .mcq-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mcq-card .mcq-info h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  white-space: normal;
}
@media (min-width: 576px) {
  .mcq-card .mcq-info h3 { font-size: 13px; }
}
@media (min-width: 992px) {
  .mcq-card .mcq-icon { font-size: 16px; }
}

.mcq-card .mcq-line {
  height: 3px;
  width: 26px;
  margin-bottom: 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.mcq-card .mcq-link {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}

.mcq-card .mcq-link svg {
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .mcq-card .mcq-icon { font-size: 18px; }
  .mcq-card .mcq-link { font-size: 8.5px; }
}
@media (min-width: 992px) {
  .mcq-card .mcq-link { font-size: 8px; }
}

/* Named colour presets — bg, circle, text, rule, link */
.mcq-card.blue-mcq   { background: #F1F6FF; }
.mcq-card.blue-mcq   .mcq-icon { background: #4898F6; color: #fff; }
.mcq-card.blue-mcq   .mcq-info h3 { color: #0D4A90; }
.mcq-card.blue-mcq   .mcq-line { background: #4898F6; }
.mcq-card.blue-mcq   .mcq-link { color: #1C68E6; }

.mcq-card.green-mcq  { background: #F1FBF2; }
.mcq-card.green-mcq  .mcq-icon { background: #54D189; color: #fff; }
.mcq-card.green-mcq  .mcq-info h3 { color: #0A6A40; }
.mcq-card.green-mcq  .mcq-line { background: #54D189; }
.mcq-card.green-mcq  .mcq-link { color: #2CA160; }

.mcq-card.orange-mcq { background: #FFF6EF; }
.mcq-card.orange-mcq .mcq-icon { background: #FFA553; color: #fff; }
.mcq-card.orange-mcq .mcq-info h3 { color: #B14C1D; }
.mcq-card.orange-mcq .mcq-line { background: #FFA553; }
.mcq-card.orange-mcq .mcq-link { color: #FA7324; }

.mcq-card.purple-mcq { background: #F5F3FF; }
.mcq-card.purple-mcq .mcq-icon { background: #7c3aed; color: #fff; }
.mcq-card.purple-mcq .mcq-info h3 { color: #4c1d95; }
.mcq-card.purple-mcq .mcq-line { background: #7c3aed; }
.mcq-card.purple-mcq .mcq-link { color: #6d28d9; }

.mcq-card.red-mcq    { background: #FEF2F2; }
.mcq-card.red-mcq    .mcq-icon { background: #dc2626; color: #fff; }
.mcq-card.red-mcq    .mcq-info h3 { color: #7f1d1d; }
.mcq-card.red-mcq    .mcq-line { background: #dc2626; }
.mcq-card.red-mcq    .mcq-link { color: #b91c1c; }

/* ── MCQ CARD — MOBILE RESPONSIVE (2-column grid) ─────────────
   Jab mobile pe 2-col grid set ho tab card chhota lagega
   ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .mcq-card {
    padding: 11px 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .mcq-card .mcq-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    flex-shrink: 0;
  }
  .mcq-card .mcq-icon img {
    width: 22px;
    height: 22px;
  }
  .mcq-card .mcq-info h3 {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 5px;
  }
  .mcq-card .mcq-line {
    height: 2px;
    width: 20px;
    margin-bottom: 5px;
  }
  .mcq-card .mcq-link {
    font-size: 8.5px;
    gap: 2px;
  }
  .mcq-card .mcq-link svg {
    width: 10px;
    height: 10px;
  }
}

/* Extra small phones (iPhone SE etc.) */
@media (max-width: 375px) {
  .mcq-card {
    padding: 9px 10px;
    gap: 8px;
  }
  .mcq-card .mcq-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .mcq-card .mcq-icon img {
    width: 20px;
    height: 20px;
  }
  .mcq-card .mcq-info h3 {
    font-size: 9.5px;
    margin-bottom: 4px;
  }
  .mcq-card .mcq-line {
    height: 2px;
    width: 18px;
    margin-bottom: 4px;
  }
  .mcq-card .mcq-link {
    font-size: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LIST CARD
   Full-width row: circle icon · title + desc · badge + chevron
   Design from card design.html — "listcard" style key
   ══════════════════════════════════════════════════════════════ */

/* ── LISTCARD GROUP CONTAINER ─────────────────────────────────
   Wraps consecutive listcard items — matches mcq-list-container
   from card design.html: one unified white box with dividers.
   ─────────────────────────────────────────────────────────── */
.cards > .listcard-group {
  grid-column: 1 / -1;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  overflow: hidden;
  animation: cardIn 0.25s ease both;
}

/* Span the full grid width for standalone listcards (outside a group) */
.cards > .listcard {
  grid-column: 1 / -1;
  animation: cardIn 0.25s ease both;
}
.cards > .listcard:nth-child(1) { animation-delay: 0.02s; }
.cards > .listcard:nth-child(2) { animation-delay: 0.06s; }
.cards > .listcard:nth-child(3) { animation-delay: 0.10s; }
.cards > .listcard:nth-child(4) { animation-delay: 0.14s; }
.cards > .listcard:nth-child(5) { animation-delay: 0.18s; }
.cards > .listcard:nth-child(6) { animation-delay: 0.22s; }

.listcard {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #eeeeee;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-decoration: none;
  cursor: pointer;
  gap: 16px;
  min-width: 0;
  transition: background 0.15s ease, box-shadow 0.18s ease;
}

.listcard:hover {
  background: #f9fafd;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

/* ── Listcard inside group: remove individual card chrome ──── */
.listcard-group .listcard {
  border-radius: 0;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid #eeeeee;
  animation: none; /* group container animates, not each row */
}

.listcard-group .listcard:last-child {
  border-bottom: none;
}

.listcard-group .listcard:hover {
  background: #f9fafd;
  box-shadow: none;
}

/* Circle icon */
.listcard .lc-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  overflow: hidden;
  /* default neutral */
  background: #eaf1fa;
  color: #2374e1;
}

.listcard .lc-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Title + description */
.listcard .lc-content {
  flex: 1;
  min-width: 0;
}

.listcard .lc-title {
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: normal;
}
@media (min-width: 576px) {
  .listcard .lc-title { font-size: 13px; }
}

.listcard .lc-desc {
  font-size: 10.5px;
  color: #717171;
  font-weight: 400;
  line-height: 1.4;
}

/* Right side: badge + chevron */
.listcard .lc-action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.listcard .lc-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  /* default */
  background: #eaf1fa;
  color: #2374e1;
}

.listcard .lc-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #4b5563;
}

/* ── Named colour presets ─────────────────────────────────── */
.listcard .lc-blue   { background: #eaf1fa; color: #2374e1; }
.listcard .lc-orange { background: #fff2e8; color: #fd5601; }
.listcard .lc-green  { background: #e9f7eb; color: #29a347; }
.listcard .lc-purple { background: #f0ebff; color: #7c3aed; }
.listcard .lc-red    { background: #feecec; color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════
   GRID CARD — compact centered icon+title+subtitle (gridcard)
   ══════════════════════════════════════════════════════════════ */

/* Full-width group wrapper inside .cards */
.cards > .gridcard-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  animation: cardIn 0.25s ease both;
}
@media (min-width: 576px) {
  .cards > .gridcard-group { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (min-width: 992px) {
  .cards > .gridcard-group { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}

/* Individual gridcard */
.gridcard {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  border: 1px solid #F6F8FA;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.gridcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
@media (min-width: 992px) {
  .gridcard { padding: 20px 10px 16px; }
}

/* Icon box */
.gridcard .gc-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 992px) {
  .gridcard .gc-icon { width: 36px; height: 36px; border-radius: 10px; }
}

/* Gradient presets — mapped from tool_config icon_color names */
.gridcard .gc-blue   { background: linear-gradient(180deg, #44A6FF, #007AF5); box-shadow: 0 14px 24px -6px rgba(0,122,245,0.45); }
.gridcard .gc-green  { background: linear-gradient(180deg, #2ED768, #00B147); box-shadow: 0 14px 24px -6px rgba(0,177,71,0.45); }
.gridcard .gc-purple { background: linear-gradient(180deg, #C56BFF, #9214FF); box-shadow: 0 14px 24px -6px rgba(146,20,255,0.45); }
.gridcard .gc-orange { background: linear-gradient(180deg, #FFAB3D, #FF6600); box-shadow: 0 14px 24px -6px rgba(255,102,0,0.45); }
.gridcard .gc-red    { background: linear-gradient(180deg, #FF689A, #F00E52); box-shadow: 0 14px 24px -6px rgba(240,14,82,0.45); }
.gridcard .gc-teal   { background: linear-gradient(180deg, #32E2CE, #00A896); box-shadow: 0 14px 24px -6px rgba(0,168,150,0.45); }

/* Title */
.gridcard h3 {
  font-size: 12px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 4px;
  line-height: 1.25;
  letter-spacing: -0.1px;
  padding: 0 4px;
}
@media (min-width: 576px) {
  .gridcard h3 { font-size: 13px; }
}

/* Subtitle */
.gridcard p {
  font-size: 10.5px;
  font-weight: 400;
  color: #98A2B3;
  line-height: 1.35;
  margin: 0;
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════════
   QUICK CARD — pastel icon+label grid (quickcard)
   Design from card desgin.html
   ══════════════════════════════════════════════════════════════ */

/* Full-width group wrapper inside .cards */
.cards > .quickcard-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  animation: cardIn 0.25s ease both;
}
@media (min-width: 480px) {
  .cards > .quickcard-group { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (min-width: 768px) {
  .cards > .quickcard-group { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
}

/* Individual quickcard */
.quickcard {
  border-radius: 12px;
  padding: 16px 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.quickcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

/* Icon wrapper */
.qc-icon-wrap {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  font-size: 26px;
  line-height: 1;
}
.qc-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Label */
.qc-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #101828;
}
@media (min-width: 576px) {
  .qc-label { font-size: 13px; }
}

/* ── Color variants ─────────────────────────────────────────── */
.quickcard.qc-orange { background: #fff6ee; border-color: #ffe0c9; }
.quickcard.qc-blue   { background: #f3f8ff; border-color: #d8e6ff; }
.quickcard.qc-green  { background: #f2fcf3; border-color: #d8f2db; }
.quickcard.qc-purple { background: #f9f5ff; border-color: #eadfff; }
.quickcard.qc-cyan   { background: #f1fdfd; border-color: #c9f5f7; }
.quickcard.qc-yellow { background: #fffbf2; border-color: #ffeec2; }
.quickcard.qc-pink   { background: #fff4f8; border-color: #ffdbe9; }
.quickcard.qc-indigo { background: #f5f8ff; border-color: #dbe4ff; }
.quickcard.qc-red    { background: #fff4f4; border-color: #ffdcdc; }
.quickcard.qc-teal   { background: #f0fdfc; border-color: #ccfbf1; }

/* Icon color per variant (works for emoji font-color & SVG currentColor) */
.quickcard.qc-orange .qc-icon-wrap { color: #fd5601; }
.quickcard.qc-blue   .qc-icon-wrap { color: #2374e1; }
.quickcard.qc-green  .qc-icon-wrap { color: #29a347; }
.quickcard.qc-purple .qc-icon-wrap { color: #8235ce; }
.quickcard.qc-cyan   .qc-icon-wrap { color: #009fa7; }
.quickcard.qc-yellow .qc-icon-wrap { color: #e49410; }
.quickcard.qc-pink   .qc-icon-wrap { color: #e75480; }
.quickcard.qc-indigo .qc-icon-wrap { color: #6b7fd4; }
.quickcard.qc-red    .qc-icon-wrap { color: #ef4444; }
.quickcard.qc-teal   .qc-icon-wrap { color: #0d9488; }

/* ══════════════════════════════════════════════════════════════
   GLASS UPGRADE — Classic liquid-glass look applied to all cards
   Source: .card (base.css) — backdrop-filter + gradient bg +
   inset shadow + spring animation + glass sheen ::after
   ══════════════════════════════════════════════════════════════ */

/* Shared keyframe (cards that referenced undefined cardIn now use
   the same spring-pop as classic cardPopIn)                      */
@keyframes cardIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── TOOL CARD ─────────────────────────────────────────────── */
.tool-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease, border-color 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.50)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,30,70,0.10);
    border-color: rgba(255,255,255,0.75);
  }
}
.tool-card:active { transform: scale(0.98); }

/* Keep inner elements above the ::after sheen */
.tool-card .tool-icon,
.tool-card .tool-info,
.tool-card .use-tool-btn { position: relative; z-index: 2; }

/* ── MCQ PRACTICE CARD ─────────────────────────────────────── */
.mcq-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.mcq-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.45)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.15) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* Glassmorphic tinted backgrounds (replace flat #HEX with gradient) */
.mcq-card.blue-mcq   { background: linear-gradient(180deg, rgba(241,246,255,0.85) 0%, rgba(241,246,255,0.65) 100%); }
.mcq-card.green-mcq  { background: linear-gradient(180deg, rgba(241,251,242,0.85) 0%, rgba(241,251,242,0.65) 100%); }
.mcq-card.orange-mcq { background: linear-gradient(180deg, rgba(255,246,239,0.85) 0%, rgba(255,246,239,0.65) 100%); }
.mcq-card.purple-mcq { background: linear-gradient(180deg, rgba(245,243,255,0.85) 0%, rgba(245,243,255,0.65) 100%); }
.mcq-card.red-mcq    { background: linear-gradient(180deg, rgba(254,242,242,0.85) 0%, rgba(254,242,242,0.65) 100%); }

@media (hover: hover) and (pointer: fine) {
  .mcq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,30,70,0.10);
  }
}
.mcq-card:active { transform: scale(0.98); }

/* Stagger (overrides earlier identical rules — no functional change) */
.cards > .mcq-card:nth-child(1) { animation-delay: 0.02s; }
.cards > .mcq-card:nth-child(2) { animation-delay: 0.06s; }
.cards > .mcq-card:nth-child(3) { animation-delay: 0.10s; }
.cards > .mcq-card:nth-child(4) { animation-delay: 0.14s; }
.cards > .mcq-card:nth-child(5) { animation-delay: 0.18s; }
.cards > .mcq-card:nth-child(6) { animation-delay: 0.22s; }

/* Keep inner elements above sheen */
.mcq-card .mcq-icon,
.mcq-card .mcq-info { position: relative; z-index: 2; }

/* ── LIST CARD (standalone) ────────────────────────────────── */
.listcard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.listcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.50)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

@media (hover: hover) and (pointer: fine) {
  .listcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,30,70,0.10);
    border-color: rgba(255,255,255,0.75);
  }
}
.listcard:active { transform: scale(0.98); }

/* Stagger */
.cards > .listcard:nth-child(1) { animation-delay: 0.02s; }
.cards > .listcard:nth-child(2) { animation-delay: 0.06s; }
.cards > .listcard:nth-child(3) { animation-delay: 0.10s; }
.cards > .listcard:nth-child(4) { animation-delay: 0.14s; }
.cards > .listcard:nth-child(5) { animation-delay: 0.18s; }
.cards > .listcard:nth-child(6) { animation-delay: 0.22s; }

/* Inner elements above sheen */
.listcard .lc-icon,
.listcard .lc-content,
.listcard .lc-action { position: relative; z-index: 2; }

/* ── LIST CARD inside group: strip individual glass chrome ─── */
.listcard-group .listcard {
  border-radius: 0;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(200,210,230,0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  animation: none;
}
.listcard-group .listcard::after { display: none; }
.listcard-group .listcard:last-child { border-bottom: none; }
.listcard-group .listcard:hover {
  background: rgba(255,255,255,0.35);
  transform: none;
  box-shadow: none;
}

/* ── LIST CARD GROUP (container) — glass on the wrapper ─────── */
.cards > .listcard-group {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.cards > .listcard-group::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.50)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* ── GRID CARD (individual tile) ───────────────────────────── */
.gridcard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.gridcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.50)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

@media (hover: hover) and (pointer: fine) {
  .gridcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,30,70,0.10);
    border-color: rgba(255,255,255,0.75);
  }
}
.gridcard:active { transform: scale(0.98); }

/* Inner elements above sheen */
.gridcard .gc-icon,
.gridcard h3,
.gridcard p,
.gridcard .gc-sub { position: relative; z-index: 2; }

/* Gridcard-group: just upgrade animation (individual tiles carry the glass) */
.cards > .gridcard-group {
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── DIGEST CARD — glass upgrade ───────────────────────────── */
.digest-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.digest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.50)  0%,
    rgba(255,255,255,0)    30%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

@media (hover: hover) and (pointer: fine) {
  .digest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20,30,70,0.10);
  }
}
.digest-card:active { transform: scale(0.98); }

/* Inner elements above sheen */
.digest-card .date-col,
.digest-card .card-content,
.digest-card .card-arrow-wrap { position: relative; z-index: 2; }

/* ── QUICKCARD — glass upgrade ─────────────────────────────── */
.quickcard {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(20,30,70,0.03);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  animation: cardPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.quickcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.45)  0%,
    rgba(255,255,255,0)    35%,
    rgba(255,255,255,0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

@media (hover: hover) and (pointer: fine) {
  .quickcard:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(20,30,70,0.10);
  }
}
.quickcard:active { transform: scale(0.96); }

.quickcard .qc-icon-wrap,
.quickcard .qc-label { position: relative; z-index: 2; }


/* ── PANEL: TEST RESULTS ─────────────────────────────────────── */

/* Skeleton loader */
.results-skeleton-wrap { display: flex; flex-direction: column; gap: 14px; }

.results-skeleton {
  height: 190px; border-radius: 16px;
  background: linear-gradient(90deg, #eef1f6 25%, #f8fafc 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: results-shimmer 1.4s infinite;
}

@keyframes results-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── Result card wrapper ──────────────────────────────────────── */

.result-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.2s cubic-bezier(0.22,1,0.36,1);
}

.result-card:last-child { margin-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(20,30,70,0.11);
  }
}


/* ── Top row: icon + title + accuracy badge ───────────────────── */

.rc-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--card-border);
}

.rc-icon-box {
  width: 40px; height: 40px;
  border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--purple-soft);
}
.rc-icon-box svg { width: 20px; height: 20px; }

.rc-title-group { flex: 1; min-width: 0; }

.rc-title {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px; line-height: 1.3;
}

.rc-meta-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.rc-date  { font-size: 11px; color: var(--muted); font-weight: 500; }
.rc-sep   { color: var(--card-border); font-size: 14px; line-height: 1; }

.rc-time-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: var(--grey-soft); border-radius: 6px;
  padding: 2px 6px; line-height: 1;
}
.rc-time-chip svg { width: 10px; height: 10px; }

/* Accuracy badge (top right) */
.rc-acc-badge {
  flex-shrink: 0; text-align: center;
  padding: 5px 10px; border-radius: 10px;
  min-width: 52px;
}
.rc-acc-num {
  font-size: 17px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.rc-acc-lbl {
  font-size: 9px; font-weight: 600; display: block;
  margin-top: 1px; letter-spacing: 0.2px; text-transform: uppercase;
}
.rc-acc-badge.acc-great { background: var(--green-soft); color: var(--green-soft-text); }
.rc-acc-badge.acc-ok    { background: var(--purple-soft); color: var(--purple-soft-text); }
.rc-acc-badge.acc-low   { background: var(--red-soft); color: var(--red-soft-text); }


/* ── Stats row: Total | Solved | Correct | Wrong | Skipped ──── */

.rc-stats-row {
  display: flex;
  align-items: stretch;
  padding: 10px 8px;
  border-bottom: 1px solid var(--card-border);
  background: #fafbfe;
}

.rc-stat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  padding: 4px 2px;
  position: relative;
}

.rc-stat + .rc-stat::before {
  content: '';
  position: absolute; left: 0; top: 15%; height: 70%;
  width: 1px; background: var(--card-border);
}

.rc-sv {
  font-size: 16px; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.rc-sl {
  font-size: 9.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.2px;
  text-transform: uppercase; line-height: 1.2;
}

/* Stat value colors */
.rc-sv.total   { color: var(--ink); }
.rc-sv.solved  { color: var(--blue); }
.rc-sv.correct { color: var(--green-soft-text); }
.rc-sv.wrong   { color: var(--red-soft-text); }
.rc-sv.skipped { color: var(--orange-soft-text); }


/* ── Score row: Neg. Marks | Final Marks | Accuracy ─────────── */

.rc-score-row {
  display: flex;
  align-items: stretch;
  padding: 10px 8px;
  border-bottom: 1px solid var(--card-border);
}

.rc-score-cell {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  padding: 4px 4px;
  position: relative;
}

.rc-score-cell + .rc-score-cell::before {
  content: '';
  position: absolute; left: 0; top: 10%; height: 80%;
  width: 1px; background: var(--card-border);
}

.rc-score-big {
  font-size: 19px; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.rc-score-lbl {
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.2;
}

/* Score cell variant backgrounds */
.rc-score-cell.neg-cell  { background: transparent; }
.rc-score-cell.mark-cell { background: transparent; }
.rc-score-cell.acc-cell  { background: transparent; }


/* ── Bottom row: Retry button ────────────────────────────────── */

.rc-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  gap: 10px;
  min-height: 50px;
}

.rc-retry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: 10px;
  background: var(--purple-soft); color: var(--purple-soft-text);
  font-size: 12px; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-family: var(--font-main);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.rc-retry-btn:hover {
  background: var(--purple); color: #fff;
}
.rc-retry-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Guest / no-retry placeholder */
.rc-no-retry {
  font-size: 11px; color: var(--muted); font-weight: 500; font-style: italic;
}


/* ── Empty state ─────────────────────────────────────────────── */

.results-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px; gap: 14px; text-align: center;
}
.results-empty svg  { opacity: .22; }
.results-empty h3   { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.results-empty p    { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.results-empty a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 20px; border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: opacity 0.15s;
}
.results-empty a:hover { opacity: 0.85; }


/* ── Pagination ──────────────────────────────────────────────── */

.results-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 20px; flex-wrap: wrap;
}
.results-pg-btn {
  height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--card-border); background: #fff;
  font-size: 12px; font-weight: 700; color: var(--ink);
  cursor: pointer; font-family: var(--font-main);
  transition: background 0.15s;
}
.results-pg-btn:hover:not(:disabled) { background: #f1f5f9; }
.results-pg-btn:disabled { opacity: .4; cursor: default; }
.results-pg-info { font-size: 11.5px; color: var(--muted); font-weight: 600; }


/* ── Mobile tweaks ───────────────────────────────────────────── */

@media (max-width: 480px) {
  .rc-top    { padding: 12px 13px 11px; gap: 9px; }
  .rc-icon-box { width: 36px; height: 36px; border-radius: 10px; }
  .rc-icon-box svg { width: 17px; height: 17px; }
  .rc-title  { font-size: 12.5px; }
  .rc-acc-num { font-size: 15px; }
  .rc-acc-badge { padding: 4px 8px; min-width: 46px; }
  .rc-stats-row { padding: 8px 4px; }
  .rc-sv { font-size: 14px; }
  .rc-sl { font-size: 8.5px; }
  .rc-score-row { padding: 8px 4px; }
  .rc-score-big { font-size: 16px; }
  .rc-score-lbl { font-size: 8.5px; }
  .rc-bottom { padding: 9px 12px; min-height: 44px; }
  .rc-retry-btn { height: 30px; font-size: 11px; padding: 0 13px; }
}