/* ================================================================
   MIRROR MVP · DESIGN SYSTEM
   The Relationship Codex™
   Components: CodexCard, GoldButton, MirrorHeader, BottomNav,
   ProgressBar, SealModal, PathwayCard, ReflectionInput,
   InsightCard, DashboardPanel, StatsRow, RelationalMap
   ================================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────────── */
:root {
  /* Transparent so #codexAtmos atmosphere shows through */
  --mirror-bg:          transparent;
  --mirror-surface:     rgba(10,16,32,0.80);
  /* Gold — activation, earned, illuminated states */
  --mirror-gold:        #C8A76A;
  --mirror-gold-light:  #D4B87A;
  --mirror-gold-dim:    rgba(200,167,106,0.45);
  --mirror-gold-glow:   rgba(200,167,106,0.07);
  --mirror-text:        #F2EDE3;
  --mirror-muted:       rgba(243,238,230,0.52);
  --mirror-wine:        #5D3754;
  --mirror-wine-dim:    rgba(93,55,84,0.15);
  /* Dark card surfaces */
  --mirror-card-bg:     rgba(8,8,8,0.80);
  --mirror-card-border: rgba(200,167,106,0.10);
  --mirror-card-shadow: 0 20px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(200,167,106,0.06);
  /* Body font → Lora for reading/reflection content */
  --mirror-font-head:   'Cinzel', serif;
  --mirror-font-serif:  'Cormorant Garamond', serif;
  --mirror-font-body:   'Lora', Georgia, serif;
  --mirror-radius:      12px;
  --mirror-radius-sm:   8px;
  --mirror-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --mirror-t:           300ms var(--mirror-ease);
  --mirror-nav-h:       64px;
}

/* ── 2. APP SHELL ────────────────────────────────────────────── */
.mirror-app {
  min-height: 100vh;
  background: transparent;
  color: var(--mirror-text);
  font-family: var(--mirror-font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.mirror-main {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 1rem calc(var(--mirror-nav-h) + 1.5rem);
}

/* ── 3. KEYFRAMES ────────────────────────────────────────────── */
/* The `to` frames omit `transform` for tidiness, but that alone does NOT stop
   these animations from trapping position:fixed descendants. The animation still
   owns `transform` (it's in the `from` frame), so while applied the element
   computes an identity matrix (matrix(1,0,0,1,0,0) != none) and becomes a
   containing block — which breaks centered modals (they size to the faded column,
   not the viewport). The real fix is on the .m-fade-* rules below: fill-mode
   `backwards`, not `both`, so the element settles to transform:none when done. */
@keyframes mFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1;                              }
}
@keyframes mScale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1;                         }
}
@keyframes mPulseRing {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  50%       { transform: scale(1.1); opacity: 0.1;  }
}
@keyframes mGlow {
  0%, 100% { box-shadow: 0 0 0   0 rgba(200,167,106,0); }
  50%       { box-shadow: 0 0 24px 4px rgba(200,167,106,0.12); }
}
@keyframes mParticle {
  0%   { opacity: 0; transform: translate(var(--px,0),var(--py,0)) scale(0); }
  20%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(calc(var(--px,0) * 3), calc(var(--py,0) * 3 - 80px)) scale(1.2); }
}
@keyframes mDrawLine {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* fill-mode is `backwards`, NOT `both`, on purpose. `both` holds the animation
   forwards after it ends, which keeps an identity-matrix transform on the
   element (matrix(1,0,0,1,0,0) != none) — and ANY non-none transform makes the
   element a containing block for position:fixed descendants, silently breaking
   centered modals/overlays (they size to the faded column, not the viewport).
   `backwards` still hides+offsets the element during its stagger delay, but
   lets it settle to transform:none once the entrance finishes. Don't use `both`. */
.m-fade-1 { animation: mFadeUp 0.6s var(--mirror-ease) 0.10s backwards; }
.m-fade-2 { animation: mFadeUp 0.6s var(--mirror-ease) 0.22s backwards; }
.m-fade-3 { animation: mFadeUp 0.6s var(--mirror-ease) 0.36s backwards; }
.m-fade-4 { animation: mFadeUp 0.6s var(--mirror-ease) 0.50s backwards; }
.m-fade-5 { animation: mFadeUp 0.6s var(--mirror-ease) 0.65s backwards; }
.m-fade-6 { animation: mFadeUp 0.6s var(--mirror-ease) 0.80s backwards; }

/* ── 4. CODEX CARD ───────────────────────────────────────────── */
.codex-card {
  background: var(--mirror-card-bg);
  border: 1px solid var(--mirror-card-border);
  border-radius: var(--mirror-radius);
  padding: 1.25rem;
  box-shadow: var(--mirror-card-shadow);
  position: relative;
  overflow: hidden;
}
.codex-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,167,106,.28),transparent);
  pointer-events: none;
}
.codex-card--glow { animation: mGlow 5s ease-in-out infinite; }
.codex-card--sm   { padding: 1rem; }

/* ── 5. GOLD BUTTON ──────────────────────────────────────────── */
.gold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.95rem 2rem;
  background: linear-gradient(
    170deg,
    #7a5218 0%,
    #b8924e 20%,
    #c8a76a 38%,
    #e8d090 52%,
    #c8a76a 66%,
    #b08448 82%,
    #7a5218 100%
  );
  color: #0c0904;
  font-family: var(--mirror-font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, filter 0.35s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.55),
    inset 0 -1px 0 rgba(60,35,5,0.45),
    0 4px 22px rgba(140,100,30,0.40),
    0 1px 3px rgba(60,35,5,0.55);
  -webkit-tap-highlight-color: transparent;
}
/* Shimmer sweep */
.gold-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,248,200,0.12) 40%,
    rgba(255,252,230,0.30) 50%,
    rgba(255,248,200,0.12) 60%,
    transparent 100%
  );
  transition: left 0.65s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
/* Top edge reflection */
.gold-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,245,180,0.75), transparent);
  pointer-events: none;
}
.gold-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.55),
    inset 0 -1px 0 rgba(60,35,5,0.45),
    0 10px 32px rgba(140,100,30,0.50),
    0 0 48px rgba(140,100,30,0.18),
    0 1px 3px rgba(60,35,5,0.55);
  color: #0c0904;
  text-decoration: none;
}
.gold-btn:hover::before {
  left: 130%;
}
.gold-btn:active {
  transform: translateY(0);
  filter: brightness(0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.35),
    inset 0 -1px 0 rgba(60,35,5,0.35),
    0 2px 10px rgba(140,100,30,0.25);
}
.gold-btn--auto  { width: auto; padding: 0.75rem 1.5rem; }
.gold-btn--ghost {
  background: transparent;
  border: 1px solid rgba(200,167,106,.25);
  color: var(--mirror-muted);
}
.gold-btn--ghost:hover {
  border-color: var(--mirror-gold);
  color: var(--mirror-gold);
  box-shadow: none;
}

/* ── 6. MIRROR HEADER ────────────────────────────────────────── */
.mirror-header {
  text-align: center;
  padding: 2rem 0 1.5rem;
}
.mirror-header__eye {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.5rem;
  opacity: 0.65;
}
.mirror-header__title {
  font-family: var(--mirror-font-head);
  font-size: 1.35rem;
  color: var(--mirror-text);
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.mirror-header__title em { color: var(--mirror-gold); font-style: normal; }
.mirror-header__sub {
  font-family: var(--mirror-font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--mirror-muted);
  line-height: 1.5;
}

/* ── 7. BOTTOM NAV ───────────────────────────────────────────── */
/* Bottom nav is mobile-only — on desktop the sidebar (or top drawer) is the nav */
@media (min-width: 860px){ .mirror-bottom-nav{ display:none !important; } }
.mirror-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mirror-nav-h);
  /* Opaque base + NO backdrop-filter: a fixed element with backdrop-filter
     detaches and "floats" on iOS Safari instead of pinning to bottom:0. */
  background:
    radial-gradient(ellipse 120% 180% at 50% 0%, rgba(139,121,201,.18) 0%, rgba(139,121,201,.06) 40%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(200,167,106,.08) 0%, transparent 50%),
    #080808;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, rgba(62,124,140,.4), rgba(141,175,214,.4), rgba(161,139,216,.4), rgba(216,184,122,.4), rgba(231,214,160,.4), transparent) 1;
  display: flex;
  align-items: stretch;
  z-index: 200;
  box-shadow:
    0 -12px 60px rgba(139,121,201,.16),
    0 -6px 20px rgba(200,167,106,.12),
    inset 0 1px 0 rgba(200,167,106,.12),
    inset 0 -1px 0 rgba(139,121,201,.08);
}
.mirror-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  color: rgba(231,214,170,.74);
  transition: color .24s ease, filter .24s ease, text-shadow .24s ease, transform .24s ease;
  padding: 8px 4px;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.mirror-nav-item:nth-child(1) { --nav-color: #3E7C8C; }
.mirror-nav-item:nth-child(2) { --nav-color: #8DAFD6; }
.mirror-nav-item:nth-child(3) { --nav-color: #A18BD8; }
.mirror-nav-item:nth-child(4) { --nav-color: #D8B87A; }
.mirror-nav-item:nth-child(5) { --nav-color: #E7D6A0; }
.mirror-nav-item:hover {
  color: var(--nav-color);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px var(--nav-color));
  text-shadow: 0 0 10px var(--nav-color);
}
.mirror-nav-item svg {
  width: 21px; height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: color var(--mirror-t);
}
.mirror-nav-item__lbl {
  font-family: var(--mirror-font-head);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(243,238,230,.82);
  transition: color var(--mirror-t);
}

/* ── A11Y LARGE TEXT PROTECTION ──────────────────────────────
   When large-text mode is active (html.a11y-large), the bottom
   nav must not reflow or overflow. Lock its dimensions. */
html.a11y-large .mirror-bottom-nav {
  height: var(--mirror-nav-h) !important;
  min-height: var(--mirror-nav-h) !important;
}
html.a11y-large .mirror-nav-item {
  font-size: 0 !important;
  padding: 6px 4px !important;
}
html.a11y-large .mirror-nav-item__lbl {
  font-size: 8px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
}
html.a11y-large .mirror-nav-item svg {
  width: 22px !important;
  height: 22px !important;
}
.mirror-nav-item--active,
.mirror-nav-item.active {
  color: var(--nav-color);
  filter: drop-shadow(0 0 12px var(--nav-color));
  text-shadow: 0 0 12px var(--nav-color);
}
.mirror-nav-item.active .mirror-nav-item__lbl {
  color: var(--nav-color);
}
/* small gold dot under the active tab */
.mirror-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--nav-color);
  box-shadow: 0 0 8px rgba(228,201,138,.8);
}

/* ── 8. PROGRESS BAR ─────────────────────────────────────────── */
.mirror-progress {
  height: 3px;
  background: rgba(200,167,106,.15);
  border-radius: 2px;
  overflow: hidden;
}
.mirror-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mirror-gold), var(--mirror-gold-light));
  border-radius: 2px;
  transition: width 1.2s var(--mirror-ease);
  width: 0;
}

/* ── 9. STATS ROW ────────────────────────────────────────────── */
.mirror-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
  position: relative;
}
/* Atmospheric glow behind the whole stats section */
.mirror-stats::before {
  content: '';
  position: absolute;
  inset: -20px -30px;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,167,106,.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.mirror-stat-col { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; }
.mirror-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mirror-stat--l { align-items: flex-start; }
.mirror-stat--r { align-items: flex-end;   }
.mirror-stat__lbl {
  font-family: var(--mirror-font-head);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,167,106,.65);
}
.mirror-stat__val {
  font-family: var(--mirror-font-head);
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(145deg, #f0e2a0, #c8a76a, #9a7228);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mirror-stat__sub {
  font-family: var(--mirror-font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(200,167,106,.72);
}

/* ── 10. AVATAR ──────────────────────────────────────────────── */
.mirror-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  z-index: 1;
}
.mirror-avatar {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e1608, #110d1c);
  border: 2px solid rgba(200,167,106,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mirror-font-head);
  font-size: 1.5rem;
  color: var(--mirror-gold);
  overflow: hidden;
  box-shadow: 0 0 32px rgba(200,167,106,.12), 0 0 60px rgba(200,167,106,.06);
}
.mirror-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* SVG XP ring — absolutely positioned over the wrap */
.mirror-xp-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Soft gold bloom behind the avatar on earned arc progress */
.mirror-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,167,106,.08) 0%, transparent 65%);
  pointer-events: none;
  animation: mirrorAvatarBreath 4s ease-in-out infinite;
}
@keyframes mirrorAvatarBreath {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

/* ── 11. LEVEL BADGE ─────────────────────────────────────────── */
.mirror-level {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--mirror-card-bg);
  border: 1px solid var(--mirror-card-border);
  border-radius: var(--mirror-radius-sm);
  gap: 2px;
}
.mirror-level__num {
  font-family: var(--mirror-font-head);
  font-size: 1.5rem;
  color: var(--mirror-text);
  line-height: 1;
}
.mirror-level__lbl {
  font-family: var(--mirror-font-head);
  font-size: 0.42rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mirror-gold);
}

/* ── 12. RELATIONAL MAP (SVG orbital) ────────────────────────── */
.relational-map-wrap {
  width: 100%;
  max-width: min(480px, 100%);
  margin: 0 auto;
  aspect-ratio: 1;
}
.relational-map-wrap svg { width: 100%; height: 100%; overflow: visible; }
@media (min-width: 700px) {
  .relational-map-wrap { max-width: min(520px, 100%); }
}
.rm-line {
  stroke: rgba(200,167,106,.18);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  animation: mDrawLine 1.2s var(--mirror-ease) both;
}
.rm-line:nth-child(1) { animation-delay: 0.3s; }
.rm-line:nth-child(2) { animation-delay: 0.4s; }
.rm-line:nth-child(3) { animation-delay: 0.5s; }
.rm-line:nth-child(4) { animation-delay: 0.6s; }
.rm-line:nth-child(5) { animation-delay: 0.7s; }
.rm-line:nth-child(6) { animation-delay: 0.8s; }
.rm-center-circle { animation: mFadeUp 0.5s var(--mirror-ease) 0.2s both; }
.rm-node         { animation: mFadeUp 0.5s var(--mirror-ease) 0.5s both; }

/* ── 13. PATTERN SPOTLIGHT ───────────────────────────────────── */
.pattern-spotlight {
  border-left: 2px solid var(--mirror-gold);
  padding-left: 0.875rem;
}
.pattern-spotlight__badge {
  font-family: var(--mirror-font-head);
  font-size: 0.46rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pattern-spotlight__name {
  font-family: var(--mirror-font-serif);
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  color: var(--mirror-text);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.pattern-spotlight__desc {
  font-family: var(--mirror-font-serif);
  font-size: 0.85rem;
  color: var(--mirror-muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}
.pattern-spotlight__state {
  font-family: var(--mirror-font-head);
  font-size: 0.48rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mirror-muted);
  margin-bottom: 0.6rem;
}
.pattern-spotlight__cta {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  text-decoration: none;
  padding: 0.45rem 0.875rem;
  border: 1px solid rgba(200,167,106,.3);
  border-radius: 8px;
  display: inline-block;
  transition: border-color var(--mirror-t), color var(--mirror-t);
}
.pattern-spotlight__cta:hover {
  border-color: var(--mirror-gold);
  color: var(--mirror-gold);
  text-decoration: none;
}

/* ── 14. TODAY'S PRACTICE ────────────────────────────────────── */
.todays-practice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(200,167,106,.09);
  text-decoration: none;
  transition: opacity var(--mirror-t);
}
.todays-practice:hover { opacity: 0.75; text-decoration: none; }
.todays-practice__ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(200,167,106,.18);
  background: var(--mirror-card-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.todays-practice__ico svg {
  width: 15px; height: 15px;
  stroke: var(--mirror-gold);
  fill: none;
  stroke-width: 1.5;
}
.todays-practice__body { flex: 1; }
.todays-practice__lbl {
  font-family: var(--mirror-font-head);
  font-size: 0.46rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mirror-muted);
  margin-bottom: 3px;
}
.todays-practice__name {
  font-family: var(--mirror-font-head);
  font-size: 0.82rem;
  color: var(--mirror-text);
  margin-bottom: 2px;
}
.todays-practice__desc {
  font-family: var(--mirror-font-serif);
  font-size: 0.82rem;
  color: var(--mirror-muted);
  font-style: italic;
  line-height: 1.4;
}
.todays-practice__arr {
  color: var(--mirror-muted);
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 0.8rem;
}

/* ── 15. INSIGHT CARD ────────────────────────────────────────── */
.insight-card {
  padding: 1.5rem;
  text-align: center;
}
.insight-card__planet { font-size: 1.5rem; margin-bottom: 1rem; }
.insight-card__main {
  font-family: var(--mirror-font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--mirror-text);
  line-height: 1.6;
  margin-bottom: 0.875rem;
}
.insight-card__main strong {
  font-style: normal;
  color: var(--mirror-gold);
}
.insight-card__body {
  font-size: 0.85rem;
  color: var(--mirror-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.insight-card__try {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.4rem;
}

/* ── 16. PATHWAY CARD ────────────────────────────────────────── */
.pathway-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--mirror-card-bg);
  border: 1px solid var(--mirror-card-border);
  border-radius: var(--mirror-radius);
  text-decoration: none;
  transition: border-color var(--mirror-t), transform var(--mirror-t);
  position: relative;
  overflow: hidden;
}
.pathway-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,167,106,.2),transparent);
}
.pathway-card:hover {
  border-color: rgba(200,167,106,.35);
  transform: translateX(3px);
  text-decoration: none;
}
.pathway-card__ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(200,167,106,.07);
  border: 1px solid rgba(200,167,106,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--mirror-gold);
}
.pathway-card__body { flex: 1; min-width: 0; }
.pathway-card__title {
  font-family: var(--mirror-font-head);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--mirror-text);
  margin-bottom: 3px;
}
.pathway-card__meta {
  font-size: 0.68rem;
  color: var(--mirror-muted);
  margin-bottom: 6px;
}
.pathway-card__pct {
  font-family: var(--mirror-font-head);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--mirror-gold);
  margin-top: 4px;
}
.pathway-card__arr {
  color: var(--mirror-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── 17. REFLECTION INPUT ────────────────────────────────────── */
.reflection-input {
  width: 100%;
  min-height: 140px;
  background: rgba(200,167,106,.03);
  border: 1px solid rgba(200,167,106,.12);
  border-radius: var(--mirror-radius);
  padding: 1.25rem;
  color: var(--mirror-text);
  font-family: var(--mirror-font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  font-style: italic;
  resize: none;
  transition: border-color var(--mirror-t), box-shadow var(--mirror-t);
}
.reflection-input:focus {
  outline: none;
  border-color: rgba(200,167,106,.38);
  box-shadow: 0 0 0 3px rgba(200,167,106,.06);
}
.reflection-input::placeholder { color: rgba(140,122,110,.4); }

/* ── 18. SECTION LABEL ───────────────────────────────────────── */
.mirror-section-lbl {
  font-family: var(--mirror-font-head);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.80;
}
.mirror-section-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,rgba(200,167,106,.2),transparent);
}

/* ── 19. RULE ────────────────────────────────────────────────── */
.mirror-rule {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,167,106,.18),transparent);
  margin: 1.5rem 0;
  border: none;
}

/* ── 20. TABS ────────────────────────────────────────────────── */
.mirror-tabs {
  display: flex;
  border-bottom: 1px solid rgba(200,167,106,.1);
  margin-bottom: 1.25rem;
}
.mirror-tab {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  font-family: var(--mirror-font-head);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mirror-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--mirror-t), border-color var(--mirror-t);
}
.mirror-tab--active {
  color: var(--mirror-gold);
  border-bottom-color: var(--mirror-gold);
}

/* ── 21. LOGIN SCREEN ────────────────────────────────────────── */
.mirror-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1.5rem;
  background: var(--mirror-bg);
  max-width: 420px;
  margin: 0 auto;
}
.mirror-login__brand { text-align: center; margin-bottom: 3rem; }
.mirror-login__logo  { width: 68px; height: 68px; margin: 0 auto 1.25rem; display: block; }
.mirror-login__name {
  font-family: var(--mirror-font-head);
  font-size: 0.92rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.25rem;
}
.mirror-login__tag {
  font-family: var(--mirror-font-head);
  font-size: 0.48rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mirror-muted);
  opacity: 0.55;
}
.mirror-input-grp { margin-bottom: 1rem; }
.mirror-input-lbl {
  display: block;
  font-family: var(--mirror-font-head);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mirror-muted);
  margin-bottom: 0.5rem;
}
.mirror-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(200,167,106,.04);
  border: 1px solid rgba(200,167,106,.14);
  border-radius: var(--mirror-radius-sm);
  color: var(--mirror-text);
  font-family: var(--mirror-font-body);
  font-size: 0.95rem;
  transition: border-color var(--mirror-t);
}
.mirror-input:focus {
  outline: none;
  border-color: rgba(200,167,106,.45);
}
.mirror-input::placeholder { color: rgba(140,122,110,.45); }
.mirror-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.mirror-check-row label { font-size: 0.8rem; color: var(--mirror-muted); }
.mirror-login__foot {
  text-align: center;
  margin-top: 1.25rem;
}
.mirror-login__foot a {
  font-size: 0.78rem;
  color: var(--mirror-muted);
  text-decoration: none;
  transition: color var(--mirror-t);
}
.mirror-login__foot a:hover { color: var(--mirror-gold); }

/* ── 22. REFLECTION GATE SCREEN ──────────────────────────────── */
.rg-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--mirror-nav-h));
  padding: 2rem 0;
}
.rg-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--mirror-gold);
  opacity: 0.5;
  margin-bottom: 1.5rem;
  width: 100%;
}
.rg-pattern-name {
  font-family: var(--mirror-font-head);
  font-size: 1.35rem;
  color: var(--mirror-gold);
  text-align: center;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.rg-found {
  font-family: var(--mirror-font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--mirror-muted);
  text-align: center;
  margin-bottom: 2rem;
}
.rg-prompt {
  font-family: var(--mirror-font-serif);
  font-size: 1.1rem;
  color: var(--mirror-text);
  line-height: 1.75;
  text-align: center;
  margin-bottom: 1.75rem;
}
.rg-safety {
  font-size: 0.72rem;
  color: var(--mirror-muted);
  text-align: center;
  opacity: 0.55;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.rg-skip {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--mirror-muted);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--mirror-t);
}
.rg-skip:hover { opacity: 0.85; color: var(--mirror-muted); text-decoration: none; }

/* ── 23. SEAL CEREMONY SCREEN ────────────────────────────────── */
.seal-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--mirror-nav-h));
  padding: 2rem 0;
  position: relative;
}
.seal-screen__eye {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 2rem;
  opacity: 0.65;
  animation: mFadeUp 0.6s var(--mirror-ease) 0.2s both;
}
.seal-screen__ring-wrap {
  position: relative;
  width: 148px; height: 148px;
  margin: 0 auto 2rem;
  animation: mScale 0.9s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.seal-screen__ring-outer {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(200,167,106,.1);
  animation: mPulseRing 3.5s ease-in-out 1.5s infinite;
}
.seal-screen__icon {
  width: 148px; height: 148px;
  border-radius: 50%;
  background: rgba(200,167,106,.07);
  border: 1.5px solid rgba(200,167,106,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(200,167,106,.08);
}
.seal-screen__icon svg { width: 72px; height: 72px; color: var(--mirror-gold); }
.seal-screen__sub {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.5rem;
  animation: mFadeUp 0.6s var(--mirror-ease) 0.9s both;
}
.seal-screen__name {
  font-family: var(--mirror-font-head);
  font-size: 1.5rem;
  color: var(--mirror-text);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
  animation: mFadeUp 0.6s var(--mirror-ease) 1.05s both;
}
.seal-screen__flavor {
  font-family: var(--mirror-font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--mirror-muted);
  line-height: 1.7;
  max-width: 300px;
  margin: 0 auto 2.5rem;
  animation: mFadeUp 0.6s var(--mirror-ease) 1.2s both;
}
/* Gold dust particles */
.seal-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.seal-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--mirror-gold);
  opacity: 0;
  animation: mParticle 3.5s var(--mirror-ease) both;
}

/* ── 24. DASHBOARD QUICK CARD ────────────────────────────────── */
.dash-quick-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--quick-rgb,139,121,201),.14) 0%, transparent 70%),
    var(--mirror-card-bg);
  border: 1.5px solid rgba(var(--quick-rgb,139,121,201),.18);
  border-radius: var(--mirror-radius);
  text-decoration: none;
  transition: border-color var(--mirror-t), transform var(--mirror-t), box-shadow var(--mirror-t), background var(--mirror-t);
  align-items: flex-start;
  position: relative;
  box-shadow:
    0 0 36px rgba(var(--quick-rgb,139,121,201),.16),
    0 0 72px rgba(var(--quick-rgb,139,121,201),.08),
    inset 0 0 46px rgba(var(--quick-rgb,139,121,201),.11);
}
.dash-quick-row a:nth-child(1) .dash-quick-card { --quick-rgb: 62,124,140; }
.dash-quick-row a:nth-child(2) .dash-quick-card { --quick-rgb: 161,139,216; }
.dash-quick-row a:nth-child(3) .dash-quick-card { --quick-rgb: 216,184,122; }
.dash-quick-card:hover {
  border-color: rgba(var(--quick-rgb,200,167,106),.45);
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow:
    0 0 48px rgba(var(--quick-rgb,139,121,201),.18),
    0 0 96px rgba(var(--quick-rgb,139,121,201),.10),
    inset 0 0 60px rgba(var(--quick-rgb,139,121,201),.12),
    0 16px 48px rgba(0,0,0,.40);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--quick-rgb,139,121,201),.22) 0%, transparent 70%),
    var(--mirror-card-bg);
}
.dash-quick-card__ico {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.dash-quick-card__title {
  font-family: var(--mirror-font-head);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 5px;
}
.dash-quick-card__desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(243,238,230,0.58);
  line-height: 1.5;
}

/* ── 25. DASHBOARD SEALS STRIP ───────────────────────────────── */
.seal-strip {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.seal-pip {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(200,167,106,.05);
  border: 1px solid rgba(200,167,106,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .3s, border-color .3s;
  position: relative;
}
.seal-pip svg { width: 24px; height: 24px; color: var(--mirror-gold); }
.seal-pip--earned {
  background: radial-gradient(circle at 38% 32%, rgba(200,167,106,.18) 0%, rgba(200,167,106,.05) 100%);
  border-color: rgba(200,167,106,.55);
  box-shadow: 0 0 14px rgba(200,167,106,.22), inset 0 1px 0 rgba(200,167,106,.2);
}
.seal-pip--earned::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(200,167,106,.14);
  pointer-events: none;
}
.seal-pip--locked {
  border-style: dashed;
  border-color: rgba(200,167,106,.1);
  opacity: 0.45;
}
.seal-pip--empty {
  border-style: dashed;
  opacity: 0.3;
}

@keyframes rmPulse {
  0%   { transform: scale(1); opacity: .18; }
  50%  { transform: scale(1.18); opacity: .06; }
  100% { transform: scale(1); opacity: .18; }
}
.rm-pulse-ring {
  transform-origin: 100px 100px;
  animation: rmPulse 3.2s ease-in-out infinite;
}

/* ── 26. DESKTOP CENTERING ───────────────────────────────────── */
@media (min-width: 640px) {
  .mirror-main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .mirror-bottom-nav {
    max-width: 430px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(200,167,106,.1);
    border-right: 1px solid rgba(200,167,106,.1);
    border-radius: 14px 14px 0 0;
  }
}

/* ── 26b. DESKTOP MIRROR CONTENT WIDTH ───────────────────────────
   The mobile-first .mirror-main is capped at 430px. On desktop the shell
   glues it 256px from the left (to clear the sidebar), which left a skinny
   430px column with the right half of the screen empty (the dashboard
   "not desktop responsive" report). On >=860px, let .mirror-main fill the
   region right of the sidebar and center its content column at a comfortable
   reading width. Pathways keep their own wider 2-col grid via .mirror-main--wide. */
@media (min-width: 860px){
  .mirror-main:not(.mirror-main--wide){
    max-width: none !important;
    margin-left: 256px !important;
    margin-right: 0 !important;
    padding-left: clamp(1.5rem, 4vw, 4rem) !important;
    padding-right: clamp(1.5rem, 4vw, 4rem) !important;
  }
  /* Center each top-level content block in the available desktop space. */
  .mirror-main:not(.mirror-main--wide) > *{
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 27. SAFE AREA (iPhone notch / home bar) ─────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mirror-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--mirror-nav-h) + env(safe-area-inset-bottom));
  }
  .mirror-main {
    padding-bottom: calc(var(--mirror-nav-h) + env(safe-area-inset-bottom) + 1.5rem);
  }
}

/* ── 31. DESKTOP PATHWAYS LAYOUT ────────────────────────────── */

/* Pathways — 2-column grid on desktop, single column on mobile */
.pathways-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 700px) {
  /* Desktop mirror shell expands to 860px for pathways */
  .mirror-main--wide {
    max-width: 860px;
  }
  .pathways-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  /* Pathway tabs span full width on desktop */
  .mirror-tabs {
    margin-bottom: 1.5rem;
  }
  /* Browse all button spans both columns */
  .pathways-browse-all {
    grid-column: 1 / -1;
  }
}

/* ── 31. MOBILE RESPONSIVENESS FIXES ─────────────────────────── */

/* Dashboard map+spotlight grid — collapses to single column on mobile */
.dash-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}
@media (max-width: 500px) {
  .dash-map-grid {
    grid-template-columns: 1fr;
  }
  /* On mobile show pattern spotlight FIRST, map below */
  .dash-map-grid > div:first-child { order: 2; }
  .dash-map-grid > div:last-child  { order: 1; }
}

/* Stats row — prevent cramping on 320px phones */
@media (max-width: 360px) {
  .mirror-stats {
    gap: 0.5rem;
  }
  .mirror-avatar {
    width: 60px;
    height: 60px;
    font-size: 1rem;
  }
  .mirror-stat__val {
    font-size: 0.9rem;
  }
}

/* Nav touch targets — minimum 44px (WCAG 2.5.5) */
.mirror-nav-item {
  min-height: 44px;
  padding: 10px 4px;
}
.mirror-nav-item svg {
  width: 22px;
  height: 22px;
}
/* Nav labels — floor at 0.5rem for legibility */
.mirror-nav-item__lbl {
  font-size: 0.5rem;
}
@media (max-width: 340px) {
  .mirror-nav-item__lbl { display: none; }
}

/* Gold button — minimum 44px touch target on mobile */
@media (max-width: 640px) {
  .gold-btn {
    min-height: 44px;
    font-size: 0.72rem;
    padding: 0.875rem 1.5rem;
  }
}

/* Relational map — don't let it squish below 180px */
@media (max-width: 380px) {
  .relational-map-wrap {
    max-width: 180px;
  }
}

/* Dashboard right sidebar — hide on mobile to prevent jumble */
@media (max-width: 640px) {
  .stats-pair--r {
    display: none;
  }
  .stats-hub-grid {
    grid-template-columns: 1fr 110px;
  }
}

/* Ceremony glow — prevent horizontal overflow on narrow screens */
.ceremony-glow,
.ceremony-sheen {
  max-width: 100vw;
  overflow: hidden;
}

/* Reflection input — reduce min-height on small screens so context shows */
@media (max-width: 480px) {
  .reflection-input {
    min-height: 100px;
  }
}

/* Seal image — floor at 160x203 on very small screens */
@media (max-width: 340px) {
  .ceremony-seal {
    width: 160px;
    height: 203px;
  }
}

/* ── 28. TODAY'S FOCUS CARD (dashboard widget) ───────────────── */
.todays-focus-card {
  padding: 1.4rem 1.5rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(161,139,216,0.12), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(200,167,106,0.10), transparent 60%),
    var(--mirror-card-bg);
  border: 1px solid var(--mirror-card-border);
  border-left: 3px solid rgba(161,139,216,0.60);
  border-radius: var(--mirror-radius);
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.todays-focus-card > * { position: relative; z-index: 2; }
/* soft depth glow that blooms toward the arrow on hover */
.todays-focus-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 120% at 100% 50%, rgba(161,139,216,0.14), transparent 62%);
  opacity: 0.65;
  transition: opacity .35s ease;
}
.todays-focus-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200,167,106,0.30);
  box-shadow: 0 0 34px -6px rgba(139,121,201,0.30), 0 0 0 1px rgba(200,167,106,0.10);
}
.todays-focus-card:hover::after { opacity: 1; }
/* rainbow arc hairline along the top, gently shimmering */
.todays-focus-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1.5px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(62,124,140,.55), rgba(141,175,214,.55), rgba(161,139,216,.75), rgba(216,184,122,.55), rgba(231,214,160,.6), transparent);
  background-size: 220% 100%;
  animation: todaysFocusSheen 9s ease-in-out infinite;
}
@keyframes todaysFocusSheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .todays-focus-card::before { animation: none; }
  .todays-focus-card { transition: none; }
}
.todays-focus-card__eye {
  font-family: var(--mirror-font-head);
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.todays-focus-card__title {
  font-family: var(--mirror-font-head);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: #F6D28D;
  margin-bottom: 0.35rem;
  text-shadow: 0 0 18px rgba(200,167,106,0.22);
}
.todays-focus-card__sub {
  font-family: var(--mirror-font-serif);
  font-size: 0.9rem;
  color: var(--mirror-muted);
  font-style: italic;
  line-height: 1.55;
  max-width: 88%;
}
.todays-focus-card__arrow {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(200,167,106,0.75);
  font-size: 1.1rem;
  transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s;
}
.todays-focus-card:hover .todays-focus-card__arrow {
  color: var(--mirror-gold);
  transform: translateY(-50%) translateX(4px);
}

/* ── 29. MAP HEADER ──────────────────────────────────────────── */
.map-header {
  font-family: var(--mirror-font-head);
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mirror-gold);
  opacity: 0.6;
  text-align: right;
  margin-bottom: 0.5rem;
}

/* ── 30. GENERAL UTILITY ─────────────────────────────────────── */
.mirror-gap-sm { display: flex; flex-direction: column; gap: 0.75rem; }
.mirror-gap-md { display: flex; flex-direction: column; gap: 1rem;    }
.mirror-gap-lg { display: flex; flex-direction: column; gap: 1.5rem;  }
.mirror-mt-sm  { margin-top: 0.75rem; }
.mirror-mt-md  { margin-top: 1rem;    }
.mirror-mt-lg  { margin-top: 1.5rem;  }

/* ── 32. SEAL GRID + PROGRESS + POPUP ───────────────────────── */

/* Grid replaces the old strip */
/* Compact horizontal seal strip — just the key seals, one line */
.seal-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* Generous vertical + edge padding so the seal glows (drop-shadow up to ~14px)
     live INSIDE the scroll clip box. overflow-x:auto forces overflow-y to clip,
     so without this room the glow gets sliced off with a hard line. Negative
     margins reclaim the extra space so the strip sits flush in the layout. */
  padding: 1.15rem;
  margin: -0.9rem -1.15rem -0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seal-strip::-webkit-scrollbar { display: none; }

/* View all link at end of strip */
.seal-strip__view-all {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mirror-font-head);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,167,106,.65);
  text-decoration: none;
  white-space: nowrap;
  border-left: 1px solid rgba(200,167,106,.15);
  padding-left: 0.85rem;
  transition: color 0.2s;
}
.seal-strip__view-all:hover { color: var(--mirror-gold-light); }
.seal-strip__view-all svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Backward compat — keep .seal-grid for full seal wall on /portal/mirror */
.seal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  padding: 0.25rem 0;
}

/* Individual seal card */
.seal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The circle itself */
.seal-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.seal-ring svg.seal-progress-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.seal-ring__face {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.seal-ring__face img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  border-radius: 50%;
}

/* State: earned */
.seal-ring--earned .seal-ring__face {
  background: radial-gradient(circle at 38% 32%, rgba(200,167,106,.22) 0%, rgba(200,167,106,.07) 100%);
}
.seal-ring--earned {
  filter: drop-shadow(0 0 8px rgba(200,167,106,.35));
}

/* State: in_progress — glowing outer ring */
.seal-ring--in-progress .seal-ring__face {
  background: rgba(200,167,106,.07);
}
.seal-ring--in-progress .seal-ring__face img {
  opacity: 0.6;
}
/* Pulsing bloom on the in-progress arc */
.seal-ring--in-progress {
  filter: drop-shadow(0 0 6px rgba(200,167,106,.22));
  animation: sealInProgressGlow 2.4s ease-in-out infinite;
}
@keyframes sealInProgressGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(200,167,106,.18));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(200,167,106,.52));
  }
}

/* State: locked */
.seal-ring--locked .seal-ring__face {
  background: rgba(200,167,106,.03);
}
.seal-ring--locked .seal-ring__face img {
  opacity: 0.18;
  filter: grayscale(1);
}

/* Seal name label */
.seal-card__lbl {
  font-family: var(--mirror-font-head);
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,167,106,.5);
  text-align: center;
  line-height: 1.3;
  max-width: 64px;
  display: none; /* hidden on mobile, shown desktop */
}

/* Subtle pulse on "inspiring" locked seals */
@keyframes sealInspire {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,167,106,.15)); }
  50%       { filter: drop-shadow(0 0 12px rgba(200,167,106,.45)); }
}
.seal-ring--inspire {
  animation: sealInspire 2.8s ease-in-out infinite;
}

/* Hover ring glow — desktop */
@media (hover: hover) {
  .seal-card:hover .seal-ring--earned {
    filter: drop-shadow(0 0 14px rgba(200,167,106,.55));
  }
  .seal-card:hover .seal-ring--in-progress,
  .seal-card:hover .seal-ring--locked {
    filter: drop-shadow(0 0 8px rgba(200,167,106,.28));
  }
  .seal-card__lbl { display: block; }
}

/* Featured recently-earned: first 2 are larger */
.seal-card--featured .seal-ring {
  width: 72px;
  height: 72px;
}

/* ── Seal popup overlay ───────────────────────────────────── */
.seal-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,3,8,.92);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: sealOverlayIn .22s ease both;
}
@keyframes sealOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Popup: flex column so header stays fixed and body scrolls */
.seal-popup {
  position: relative;
  max-width: 400px;
  width: 100%;
  background: linear-gradient(155deg, #12101A 0%, #080808 100%);
  border: 1px solid rgba(200,167,106,.28);
  border-top: 2px solid rgba(139,121,201,.55);
  border-radius: 18px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 80px rgba(139,121,201,.18), 0 32px 80px rgba(0,0,0,.85);
  animation: sealPopupIn .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sealPopupIn {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* Sticky close header — never scrolls away */
.seal-popup__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 1rem 0;
  flex-shrink: 0;
}

/* Scrollable body */
.seal-popup__scroll {
  overflow-y: auto;
  flex: 1;
  padding: 0.25rem 1.5rem 1.75rem;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.seal-popup__scroll::-webkit-scrollbar { width: 3px; }
.seal-popup__scroll::-webkit-scrollbar-track { background: transparent; }
.seal-popup__scroll::-webkit-scrollbar-thumb { background: rgba(200,167,106,.25); border-radius: 2px; }

.seal-popup__close {
  background: rgba(139,121,201,.15);
  border: 1px solid rgba(139,121,201,.40);
  border-radius: 50%;
  color: rgba(243,238,230,.85);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(139,121,201,.20);
}
.seal-popup__close:hover {
  background: rgba(139,121,201,.32);
  color: #ffffff;
  border-color: rgba(139,121,201,.70);
  box-shadow: 0 0 20px rgba(139,121,201,.35);
}

/* Seal medallions are circular PNGs (transparent corners). Frame them in a
   round obsidian disc with a gold hairline + violet depth glow — never a square. */
.seal-popup__img-wrap {
  width: 220px;
  max-width: 64%;
  aspect-ratio: 1 / 1;
  margin: 0.5rem auto 1.25rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(40,32,66,.50) 0%, rgba(8,7,13,.97) 78%);
  box-shadow:
    0 0 0 1px rgba(200,167,106,.22),
    0 0 26px rgba(139,121,201,.16),
    inset 0 2px 16px rgba(0,0,0,.6);
}
.seal-popup__img-wrap img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  border-radius: 50%;
}
.seal-popup__img-wrap--earned {
  box-shadow:
    0 0 0 1px rgba(200,167,106,.5),
    0 0 30px rgba(200,167,106,.26),
    0 0 52px rgba(139,121,201,.18),
    inset 0 2px 16px rgba(0,0,0,.55);
}

.seal-popup__eyebrow {
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,167,106,.5);
  margin-bottom: 0.5rem;
}
/* Seal name — shown under the medallion (PNG art carries no baked-in name) */
.seal-popup__name {
  font-family: var(--mirror-font-head);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200,167,106,.92);
  margin-bottom: 0.4rem;
  text-shadow: 0 0 14px rgba(200,167,106,.25);
}
.seal-popup__body {
  font-family: var(--mirror-font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(243,238,230,.58);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.seal-popup__progress-wrap {
  margin: 0.75rem auto 1rem;
  max-width: 200px;
}
.seal-popup__progress-track {
  height: 3px;
  background: rgba(200,167,106,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.seal-popup__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8903a, #eed88a);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(.16,1,.3,1);
}
.seal-popup__progress-lbl {
  font-family: var(--mirror-font-body);
  font-size: 0.7rem;
  color: rgba(200,167,106,.45);
  text-align: center;
}
.seal-popup__earned-date {
  font-family: var(--mirror-font-body);
  font-size: 0.72rem;
  color: rgba(200,167,106,.4);
  margin-bottom: 0.5rem;
}
.seal-popup__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--mirror-font-head);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,167,106,.72);
  text-decoration: none;
  border: 1px solid rgba(200,167,106,.28);
  border-radius: 10px;
  padding: 0.65rem 1.4rem;
  transition: all .25s;
}
.seal-popup__cta:hover {
  background: rgba(200,167,106,.10);
  border-color: rgba(200,167,106,.55);
  color: var(--mirror-gold);
  box-shadow: 0 0 16px rgba(200,167,106,.15);
}

/* ── 33. DESKTOP LAYOUT IMPROVEMENTS ────────────────────────── */
@media (min-width: 680px) {
  .mirror-app {
    min-height: 100vh;
  }
  .mirror-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 2rem 6rem;
  }
  .mirror-header {
    text-align: left;
    margin-bottom: 2rem;
  }
  .mirror-header__title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
  }
  /* Stats row — more breathing room */
  .mirror-stats {
    gap: 2rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
  }
  .mirror-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
  .mirror-stat__val {
    font-size: 1.8rem;
  }
  /* Seal grid — 4 columns on desktop, show labels */
  .seal-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    padding: 0.5rem 0;
  }
  .seal-ring {
    width: 72px;
    height: 72px;
  }
  .seal-card__lbl {
    display: block;
    font-size: 0.5rem;
    max-width: 80px;
  }
  .seal-card--featured .seal-ring {
    width: 88px;
    height: 88px;
  }
  /* Quick action cards — 3-col row on desktop */
  .dash-quick-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   STATS HERO CARD — high-end gamification redesign
   ══════════════════════════════════════════════════════════════ */

.stats-hero-card {
  position: relative;
  background:
    radial-gradient(ellipse 140% 100% at 50% 0%, rgba(200,167,106,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(139,121,201,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 100% at 0% 40%, rgba(108,139,170,0.06) 0%, transparent 45%),
    linear-gradient(160deg, rgba(16,11,4,0.97) 0%, rgba(8,6,2,0.99) 100%);
  border: 1px solid rgba(200,167,106,0.18);
  border-radius: 14px;
  padding: 1.1rem 1rem 0.8rem;
  margin-bottom: 1.2rem;
  overflow: visible;
  box-shadow:
    0 0 32px rgba(200,167,106,0.12),
    0 0 48px rgba(139,121,201,0.08),
    inset 0 1px 0 rgba(200,167,106,0.08);
}
.stats-hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(200,167,106,0.16) 0%, transparent 45%, rgba(139,121,201,0.08) 100%),
    radial-gradient(ellipse 150% 80% at 70% 20%, rgba(108,139,170,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.stats-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 65% 45% at 50% 55%, rgba(200,167,106,0.035) 0%, transparent 65%),
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(139,121,201,0.025) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Arc-stage atmospheric backdrop — generated art, low opacity, masked so the
   centre stays legible. Sits behind the card content (which is z-index:1). */
.stats-hero-bg {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: blur(5px) saturate(1.05);
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 42%, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 78% 86% at 50% 42%, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%);
  pointer-events: none;
  z-index: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
/* Richer two-temperature breathing halo (JS adds .is-alive on load). */
@keyframes heroBreath {
  0%, 100% { box-shadow: 0 0 30px rgba(200,167,106,0.12), 0 0 50px rgba(139,121,201,0.09), inset 0 1px 0 rgba(200,167,106,0.08); }
  50%      { box-shadow: 0 0 46px rgba(200,167,106,0.20), 0 0 74px rgba(139,121,201,0.16), inset 0 1px 0 rgba(200,167,106,0.11); }
}
.stats-hero-card.is-alive { animation: heroBreath 6.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .stats-hero-card.is-alive { animation: none; }
  .stats-hero-bg { transition: none !important; }
}

/* Arc stage badge */
.arc-stage-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}
.arc-stage-badge__roman {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8DAFD6;
  font-weight: 600;
}
.arc-stage-badge__sep {
  color: #A18BD8;
  font-size: 0.65rem;
}
.arc-stage-badge__name {
  font-family: 'Lora', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: #8DAFD6;
  letter-spacing: 0.04em;
}

/* 3-column hub grid */
.stats-hub-grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}

/* Mobile: hide right column, show only left + center */
@media (max-width: 860px) {
  .stats-hub-grid {
    grid-template-columns: 1fr 140px;
    gap: 0.8rem;
  }
  .stats-pair--r {
    display: none !important;
  }
  .stats-pair--l {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .stat-gem--desktop-only { display: none !important; }
  .stat-gem--mobile-only  { display: flex !important; }
}

/* Desktop: mobile-only gems hidden */
.stat-gem--mobile-only { display: none !important; }

/* Stat pairs */
.stats-pair {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.stats-pair--l { align-items: flex-start; }
.stats-pair--r { align-items: flex-end; }

/* Individual stat gem */
.stat-gem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-gem--l { align-items: flex-start; }
.stat-gem--r { align-items: flex-end; }
.stat-gem__lbl {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F3EEE6;
  white-space: nowrap;
  font-weight: 600;
}
.stat-gem__val {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  line-height: 1;
  background: linear-gradient(145deg, #a18bd8 0%, #8B79C9 50%, #6C5BA8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}
.stat-gem__val--roman {
  letter-spacing: 0.06em;
}
.stat-gem__val--apex {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  background: linear-gradient(145deg, #a18bd8, #8B79C9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-gem__unit {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.64rem;
  color: rgba(139,121,201,0.55);
  margin-top: 1px;
}

/* Avatar hub */
.stats-avatar-hub {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.stats-bloom {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,167,106,0.09) 0%, transparent 65%);
  animation: statsBloom 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statsBloom {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.1); }
}
.stats-xp-ring {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
/* Purple ring overlay — rendered ABOVE the avatar */
.stats-purple-overlay {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.stats-xp-fill {
  transition: stroke-dasharray 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-avatar {
  position: absolute !important;
  top: 28px !important;
  left: 28px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e1608, #0d0a14);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: #c8a76a;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 0 16px rgba(200,167,106,0.06),
    inset 0 0 28px rgba(0,0,0,0.65);
}
.stats-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;  /* bias the crop up so the face stays centred */
  border-radius: 50%;
}
.stats-level-pip {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(8,5,2,0.98);
  background: linear-gradient(135deg, #E4C98A 0%, #C8A76A 50%, #D0A858 100%);
  border: 2.5px solid rgba(200,167,106,0.65);
  border-radius: 50%;
  padding: 4px 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow:
    0 0 28px rgba(200,167,106,0.70),
    0 0 16px rgba(139,121,201,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 8px rgba(0,0,0,0.4);
  z-index: 12;
  text-shadow: 0 0 10px rgba(8,5,2,0.9), 0 0 6px rgba(139,121,201,0.3);
}

/* XP progress bar */
.stats-xp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 0.1rem;
  position: relative;
  z-index: 1;
}
.stats-xp-bar__from,
.stats-xp-bar__to {
  font-family: 'Cinzel', serif;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stats-xp-bar__from { color: rgba(200,167,106,0.5); }
.stats-xp-bar__to   { color: rgba(200,167,106,0.38); }
.stats-xp-bar__track {
  flex: 1;
  height: 2px;
  background: rgba(200,167,106,0.07);
  border-radius: 1px;
  overflow: hidden;
}
.stats-xp-bar__fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  background: linear-gradient(90deg, rgba(200,167,106,0.35), #c8a76a);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(200,167,106,0.38);
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive: tighten on very small screens */
@media (max-width: 360px) {
  .stats-hub-grid {
    grid-template-columns: 1fr 110px;
    gap: 0.4rem;
  }
  .stats-pair--r {
    display: none;
  }
  .stats-avatar-hub {
    width: 110px;
    height: 110px;
  }
  .stat-gem__val { font-size: 1.25rem; }
  .stats-avatar  { font-size: 1.2rem; }
}

/* ── Journal / Reflection entry cards ─────────────────────────── */
.mirror-entry {
  display: block;
  text-decoration: none;
  border-left: 2px solid rgba(200,167,106,.22);
  padding: 10px 10px 10px 14px;
  border-radius: 0 10px 10px 0;
  transition: border-left-color .28s ease, background .28s ease,
              box-shadow .28s ease, transform .22s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  margin-bottom: 2px;
}
.mirror-entry:hover {
  border-left-color: rgba(var(--arc-feeling-rgb, 161,139,216), .72);
  background: rgba(var(--arc-feeling-rgb, 161,139,216), .04);
  box-shadow:
    inset 2px 0 12px rgba(var(--arc-feeling-rgb, 161,139,216), .08),
    0 4px 20px rgba(0,0,0,.35),
    -2px 0 18px rgba(var(--arc-feeling-rgb, 161,139,216), .14);
  transform: translateX(3px);
}
.mirror-entry:nth-child(2):hover {
  border-left-color: rgba(var(--arc-seeing-rgb, 141,175,214), .72);
  background: rgba(var(--arc-seeing-rgb, 141,175,214), .04);
  box-shadow:
    inset 2px 0 12px rgba(var(--arc-seeing-rgb, 141,175,214), .08),
    0 4px 20px rgba(0,0,0,.35),
    -2px 0 18px rgba(var(--arc-seeing-rgb, 141,175,214), .14);
}
.mirror-entry:nth-child(3):hover {
  border-left-color: rgba(var(--arc-practising-rgb, 216,184,122), .72);
  background: rgba(var(--arc-practising-rgb, 216,184,122), .04);
  box-shadow:
    inset 2px 0 12px rgba(var(--arc-practising-rgb, 216,184,122), .08),
    0 4px 20px rgba(0,0,0,.35),
    -2px 0 18px rgba(var(--arc-practising-rgb, 216,184,122), .14);
}
.mirror-entry:nth-child(4):hover {
  border-left-color: rgba(var(--arc-seeker-rgb, 108,139,170), .72);
  background: rgba(var(--arc-seeker-rgb, 108,139,170), .04);
  box-shadow:
    inset 2px 0 12px rgba(var(--arc-seeker-rgb, 108,139,170), .08),
    0 4px 20px rgba(0,0,0,.35),
    -2px 0 18px rgba(var(--arc-seeker-rgb, 108,139,170), .14);
}
.mirror-entry__title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,167,106,.82);
  margin-bottom: 4px;
}
.mirror-entry__body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  color: rgba(243,238,230,.70);
  font-style: italic;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pattern Map formatted display */
.mirror-entry__pattern-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mirror-entry__stat {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid rgba(161,139,216,.35);
  border-radius: 20px;
  color: rgba(161,139,216,.85);
  background: rgba(161,139,216,.06);
}
.mirror-entry__date {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: rgba(243,238,230,.28);
  letter-spacing: .06em;
  margin-left: auto;
}

/* ── Seal count — below the constellation ─────────────────────── */
.cx-seal-count-below {
  text-align: center;
  margin-top: 8px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(200,167,106,.62);
  text-shadow: 0 0 8px rgba(200,167,106,.28);
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED MODAL SYSTEM — Dashboard-wide atmospheric modals
   Two-temperature glow + arc colors + violet depth · no visible borders
   ══════════════════════════════════════════════════════════════════ */

/* Base modal backdrop — clean, no harsh overlay */
.modal-backdrop,
.modal-overlay,
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}
.modal-backdrop.show,
.modal-overlay.show,
.dialog-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Modal box — atmospheric card with violet + gold glow */
.modal-box,
.modal-content,
.dialog-content {
  background:
    radial-gradient(ellipse 100% 50% at 50% -10%, rgba(139,121,201,.12) 0%, transparent 70%),
    rgba(8,8,8,.92);
  border: 1.5px solid rgba(139,121,201,.20);
  border-radius: 16px;
  position: relative;
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem 2.5rem;
  box-shadow:
    0 0 50px rgba(139,121,201,.15),
    0 0 100px rgba(139,121,201,.08),
    inset 0 0 60px rgba(139,121,201,.08),
    inset 0 1px 0 rgba(200,167,106,.08);
  animation: modalFadeIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Close button — large, no circle, violet color */
.modal-close,
.modal-btn-close,
.dialog-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  color: rgba(139,121,201,.7);
  cursor: pointer;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 10;
}
.modal-close:hover,
.modal-btn-close:hover,
.dialog-close:hover {
  color: rgba(139,121,201,.95);
  background: rgba(139,121,201,.12);
  transform: scale(1.15);
}

/* Modal header — minimal, spacious */
.modal-header,
.dialog-header {
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  padding-right: 50px;
}
.modal-header h2,
.dialog-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #F3EDE2;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.modal-header p,
.dialog-header p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(243,237,226,.6);
  margin: 0;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .modal-box,
  .modal-content,
  .dialog-content {
    margin: 1rem;
    max-width: calc(100% - 2rem);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.5rem;
  }
  .modal-close,
  .modal-btn-close,
  .dialog-close {
    width: 44px;
    height: 44px;
    font-size: 28px;
    top: 1rem;
    right: 1rem;
  }
  .modal-header,
  .dialog-header {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 400px) {
  .modal-box,
  .modal-content,
  .dialog-content {
    padding: 1.25rem 1.25rem 1rem;
  }
  .modal-close,
  .modal-btn-close,
  .dialog-close {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* ── 10. MIRROR TOPBAR (always-visible header) ─────────────────── */
.mirror-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background:
    radial-gradient(ellipse 100% 150% at 50% 100%, rgba(139,121,201,.10) 0%, transparent 60%),
    linear-gradient(180deg, #121016 0%, #0c0b0e 100%);
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, rgba(62,124,140,.5), rgba(141,175,214,.5), rgba(161,139,216,.5), rgba(216,184,122,.5), rgba(231,214,160,.5), transparent) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 210;
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: 0 6px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(200,167,106,.06);
}

/* Offset content below the fixed topbar on all screen sizes */
.mirror-app > .mirror-main,
.mirror-app > main.mirror-main {
  padding-top: 56px;
}

/* Desktop sidebar: start below topbar */
@media (min-width: 861px) {
  .mirror-sidebar {
    top: 56px;
  }
}

.mirror-topbar__btn {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--mirror-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mirror-t), transform var(--mirror-t);
  position: relative;
}

.mirror-topbar__btn:active {
  transform: scale(0.95);
}

.mirror-topbar__btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mirror-topbar__title {
  flex: 1;
  text-align: center;
  font-family: var(--mirror-font-head);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mirror-text);
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}

/* Bell with unread badge */
.mirror-topbar__bell {
  position: relative;
}

.mirror-topbar__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #C8A76A;
  border-radius: 50%;
  animation: mPulseRing 1.8s ease-in-out infinite;
}

/* ── 11. HAMBURGER MENU DRAWER ───────────────────────────────── */
.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mirror-t);
}

.menu-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(139,121,201,.12) 0%, transparent 60%),
    rgba(8,8,8,.98);
  border-bottom: 1px solid rgba(200,167,106,.14);
  z-index: 300;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.92, 0.51, 1);
  padding-top: 56px;
}

.menu-drawer.open {
  transform: translateY(0);
}

.menu-drawer__inner {
  padding: 2rem 1.5rem 2rem;
  max-width: 430px;
  margin: 0 auto;
}

/* Depth/Arc card in drawer */
.menu-drawer__card {
  background: linear-gradient(135deg, rgba(139,121,201,.06), rgba(200,167,106,.04));
  border: 1px solid rgba(200,167,106,.15);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-drawer__card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,167,106,.25), rgba(139,121,201,.15));
  border: 1.5px solid rgba(200,167,106,.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mirror-font-head);
  font-size: 1.1rem;
  color: var(--mirror-gold);
}

.menu-drawer__card-info {
  flex: 1;
}

.menu-drawer__card-name {
  font-family: var(--mirror-font-head);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--mirror-text);
  margin: 0 0 2px;
}

.menu-drawer__card-depth {
  font-family: var(--mirror-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200,167,106,.6);
}

/* Nav groups */
.menu-drawer__group {
  margin-bottom: 2.5rem;
}

.menu-drawer__group-label {
  font-family: var(--mirror-font-head);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(200,167,106,.5);
  margin-bottom: 0.75rem;
}

.menu-drawer__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.menu-drawer__item {
  padding: 1rem 0;
  border-top: 1px solid rgba(200,167,106,.08);
  text-decoration: none;
  color: var(--mirror-text);
  font-family: var(--mirror-font-body);
  font-size: 0.95rem;
  transition: color var(--mirror-t);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-drawer__item:last-child {
  border-bottom: 1px solid rgba(200,167,106,.08);
}

.menu-drawer__item:hover {
  color: var(--mirror-gold);
}

.menu-drawer__item-arrow {
  font-size: 1.2rem;
  color: rgba(200,167,106,.3);
  transition: color var(--mirror-t);
}

.menu-drawer__item:hover .menu-drawer__item-arrow {
  color: var(--mirror-gold);
}

/* Featured Erotic Codex card in drawer */
.menu-drawer__featured {
  background: linear-gradient(135deg, rgba(216,184,122,.08), rgba(139,121,201,.06));
  border: 1px solid rgba(200,167,106,.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}

.menu-drawer__featured-label {
  font-family: var(--mirror-font-head);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200,167,106,.6);
  margin-bottom: 0.5rem;
}

.menu-drawer__featured-title {
  font-family: var(--mirror-font-head);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--mirror-text);
  margin-bottom: 0.75rem;
}

.menu-drawer__featured-cta {
  padding: 0.75rem 1.25rem;
  background: linear-gradient(90deg, var(--mirror-gold), var(--mirror-gold-light));
  border: none;
  border-radius: 8px;
  color: #080808;
  font-family: var(--mirror-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--mirror-t), box-shadow var(--mirror-t);
}

.menu-drawer__featured-cta:active {
  transform: scale(0.96);
}

/* Logout */
.menu-drawer__logout {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200,167,106,.14);
}

.menu-drawer__logout-btn {
  width: 100%;
  padding: 1rem;
  background: rgba(200,167,106,.08);
  border: 1px solid rgba(200,167,106,.2);
  border-radius: 8px;
  color: var(--mirror-text);
  font-family: var(--mirror-font-head);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--mirror-t), color var(--mirror-t);
}

.menu-drawer__logout-btn:active {
  background: rgba(200,167,106,.15);
}

/* ── 12. NOTIFICATIONS PANEL ─────────────────────────────────── */
.notif-panel-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mirror-t);
}

.notif-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.notif-panel {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: auto;
  max-height: calc(100dvh - 70px);
  border-bottom-left-radius: 18px;
  width: 100%;
  max-width: 380px;
  background:
    radial-gradient(ellipse 120% 30% at 100% 0%,  rgba(161,139,216,.18) 0%, transparent 55%),
    radial-gradient(ellipse 90% 26% at 0% 12%,    rgba(141,175,214,.10) 0%, transparent 55%),
    radial-gradient(ellipse 120% 40% at 50% 102%, rgba(216,184,122,.07) 0%, transparent 60%),
    rgba(8,8,8,.98);
  border-left: 1px solid rgba(139,121,201,.22);
  border-top: 1px solid rgba(200,167,106,.10);
  box-shadow: -24px 0 60px rgba(0,0,0,.5), inset 1px 0 0 rgba(161,139,216,.10);
  z-index: 300;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.92, 0.51, 1);
  display: flex;
  flex-direction: column;
}

.notif-panel.open {
  transform: translateX(0);
}

/* On a phone the panel goes full-width so the whole notification is readable */
@media (max-width: 600px) {
  .notif-panel {
    left: 0; right: 0; width: 100%; max-width: none;
    top: 56px;
    max-height: calc(100dvh - 56px);
    border-radius: 0 0 20px 20px;
    border-left: none;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .notif-filter-pills { flex-wrap: wrap; }
}

.notif-panel__header {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(200,167,106,.12);
  flex-shrink: 0;
  position: relative;
}
/* Arc-spectrum accent line across the top of the panel */
.notif-panel__header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #3E7C8C 0%, #8DAFD6 26%, #A18BD8 52%, #D8B87A 78%, #E7D6A0 100%);
  opacity: .85;
}

.notif-panel__title {
  font-family: var(--mirror-font-head);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mirror-text);
  margin: 0 0 1rem;
}

.notif-panel__mark-read {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200,167,106,.6);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--mirror-t);
}

.notif-panel__mark-read:active {
  color: var(--mirror-gold);
}

.notif-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.notif-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(200,167,106,.08);
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: background var(--mirror-t);
  text-decoration: none;
  color: inherit;
}

.notif-item:active {
  background: rgba(200,167,106,.05);
}

.notif-item__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,167,106,.2), rgba(139,121,201,.1));
  border: 1px solid rgba(200,167,106,.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mirror-font-head);
  font-size: 0.9rem;
  color: var(--mirror-gold);
}

.notif-item__content {
  flex: 1;
}

.notif-item__message {
  font-size: 0.9rem;
  color: var(--mirror-text);
  line-height: 1.4;
  margin-bottom: 0.3rem;
}

.notif-item__time {
  font-size: 0.75rem;
  color: rgba(243,238,230,.45);
}

.notif-item__accent {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--mirror-gold);
  opacity: 0;
}

.notif-item.unread .notif-item__accent {
  opacity: 1;
}

/* Unread dot (replaces accent for new JS) */
.notif-item__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mirror-gold);
  box-shadow: 0 0 8px rgba(200,167,106,.6);
  flex-shrink: 0; margin-left: auto;
}

/* Badge shows unread count */
.mirror-topbar__badge {
  min-width: 16px; height: 16px;
  padding: 0 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 600;
  line-height: 16px; text-align: center;
}

/* Per-page highlight pulse when navigating from a notification */
@keyframes codexHighlightPulse {
  0%   { outline-color: rgba(200,167,106,.7); box-shadow: 0 0 0 0 rgba(200,167,106,.5); }
  40%  { outline-color: rgba(200,167,106,.4); box-shadow: 0 0 0 10px rgba(200,167,106,.0); }
  100% { outline-color: transparent; box-shadow: none; }
}
.codex-highlight {
  animation: codexHighlightPulse 2s ease-out 1;
  outline: 2px solid rgba(200,167,106,.7);
  outline-offset: 3px;
  border-radius: 8px;
}

.notif-panel__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
  color: rgba(243,238,230,.45);
}

.notif-panel__empty-title {
  font-family: var(--mirror-font-serif);
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* ── Notification filter pills ───────────────────────────────── */
.notif-filter-pills {
  display: flex;
  gap: 6px;
  padding: 0.75rem 1.25rem 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(200,167,106,.08);
}
.notif-filter-pills::-webkit-scrollbar { display: none; }

.notif-filter-pill {
  flex-shrink: 0;
  padding: 4px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243,238,230,.45);
  background: none;
  border: 1px solid rgba(200,167,106,.12);
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.notif-filter-pill:hover {
  color: rgba(200,167,106,.8);
  border-color: rgba(200,167,106,.3);
}
.notif-filter-pill.active {
  color: #C9BBEC;
  border-color: rgba(161,139,216,.55);
  background: linear-gradient(135deg, rgba(161,139,216,.16), rgba(141,175,214,.10));
  box-shadow: 0 0 12px rgba(161,139,216,.18);
}

/* ── Notification item body text ─────────────────────────────── */
.notif-item__body {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(243,238,230,.45);
  line-height: 1.4;
  margin-top: 3px;
}

/* ── Grouped partner notification row ────────────────────────── */
.notif-item--group {
  background: rgba(139,121,201,.04);
  border-left: 2px solid rgba(139,121,201,.3);
}
.notif-item--group .notif-item__avatar {
  background: radial-gradient(circle at 30% 30%, rgba(139,121,201,.25), rgba(200,167,106,.08));
  border-color: rgba(139,121,201,.3);
  color: rgba(139,121,201,.9);
}
.notif-group-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  background: rgba(139,121,201,.25);
  color: rgba(139,121,201,.9);
  border-radius: 9px;
  margin-left: 6px;
  vertical-align: middle;
}
.notif-group-expand {
  font-size: 0.7rem;
  color: rgba(139,121,201,.7);
  cursor: pointer;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.notif-group-expand:hover { color: rgba(139,121,201,1); }
.notif-group-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.notif-group-children.open {
  max-height: 400px;
}
.notif-group-child {
  padding: 0.6rem 1.25rem 0.6rem 3.5rem;
  border-bottom: 1px solid rgba(200,167,106,.05);
  font-size: 0.82rem;
  color: rgba(243,238,230,.65);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.notif-group-child:hover { background: rgba(200,167,106,.04); }
.notif-group-child-time {
  font-size: 0.7rem;
  color: rgba(243,238,230,.3);
  flex-shrink: 0;
  margin-left: 8px;
}

/* ── Bell glow after opening panel ──────────────────────────── */
@keyframes bellGlow {
  0%   { box-shadow: 0 0 0 0 rgba(200,167,106,0); color: var(--mirror-text); }
  30%  { box-shadow: 0 0 16px 4px rgba(200,167,106,.28); color: var(--mirror-gold); }
  100% { box-shadow: 0 0 0 0 rgba(200,167,106,0); color: var(--mirror-text); }
}
.notif-bell--lit {
  animation: bellGlow 1.8s ease-out forwards;
}
.notif-bell--lit svg {
  stroke: var(--mirror-gold) !important;
}