/* Color tokens: exactly 5 colors */
:root {
  --color-primary: #ff0000; /* brand red */
  --color-bg: #f7f7f8; /* light background */
  --color-fg: #111111; /* dark text */
  --color-muted: #6b6b73; /* muted grey */
  --color-bg-dark: #0F0F0F; /* dark background */
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 10px 32px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --surface: #ffffff;
  --border: color-mix(in oklab, var(--color-muted), white 70%);
  --muted: var(--color-muted);
  --bsr-panel: #ffffff;
  --bsr-border: rgba(15, 23, 42, 0.06);
  --bsr-inactive-text: #000103;
  --bsr-active-grad-start: #ff0000;
  --bsr-active-grad-end: #941010;
  --bsr-shadow: 0 8px 20px rgba(0, 0, 0, 0.253);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-bg-dark);
  --fg: #DEDEDE;
  --surface: #151618;
  --border: color-mix(in oklab, var(--color-muted), black 60%);
  --muted: color-mix(in oklab, var(--color-muted), white 20%);
  --bsr-panel: #151618;
  --bsr-border: rgba(255,255,255,0.06);
  --bsr-inactive-text: #DEDEDE;
  --bsr-active-grad-start: #ff2020;
  --bsr-active-grad-end: #a30000;
  --bsr-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Performance optimizations */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Prevent image layout shifts */
  content-visibility: auto;
}

a, button {
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header optimizations */
.site-header {
  padding: 1rem 0 0.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  will-change: backdrop-filter;
}

.title {
  margin: 0.25rem 0;
  text-align: center;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.2px;
  will-change: transform;
}

.title .accent {
  color: var(--color-primary);
}

.controls {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
}

/* Toggle switch */
.switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch {
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  background: #b4c6ff;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 200ms ease;
  cursor: pointer;
  display: inline-block;
  will-change: transform;
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 200ms ease;
  will-change: transform;
}

.switch-input:checked + .switch {
  background: var(--color-primary);
}

.switch-input:checked + .switch .switch-knob {
  transform: translateX(26px);
}

@media (max-width: 640px) {
  .controls {
    top: 10px;
    right: 10px;
  }

  .switch {
    width: 44px;
    height: 24px;
  }

  .switch-knob {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
  }

  .switch-input:checked + .switch .switch-knob {
    transform: translateX(20px);
  }
}

/* Intro */
.intro {
  text-align: center;
  margin: 0.75rem auto 1.5rem;
  max-width: 65ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gallery - Critical CSS loaded first */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1rem;
  /* Optimize scrolling */
  contain: content;
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile first approach */
@media screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem;
  }
}

@media screen and (min-width: 601px) and (max-width: 899px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery.hidden {
  display: none !important;
  visibility: hidden;
}

.card {
  background: var(--surface);
  border: 2px solid color-mix(in oklab, var(--color-primary), var(--surface) 75%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  outline: none;
  cursor: pointer;
  /* Optimize for GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

.card:hover {
  box-shadow: var(--shadow-strong);
  border-color: color-mix(in oklab, var(--color-primary), var(--surface) 55%);
}

.card:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary), white 60%), var(--shadow);
}

.card-figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: color-mix(in oklab, var(--bg), var(--muted) 10%);
  /* Prevent layout shift */
  position: relative;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
  /* Optimize image rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
}

.card:hover .card-img {
  transform: scale(1.03);
}

.card-body {
  padding: 0.5rem 0.8rem 0.7rem;
  text-align: center;
}

.card-title {
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  /* Prevent text wrapping issues */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* BSR toggle */
.bsr-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.9rem 0 0.6rem;
  width: 100%;
}

.bsr-btns {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bsr-panel);
  border: 1px solid var(--bsr-border);
  box-shadow: var(--bsr-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: transform;
}

.bsr-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--bsr-inactive-text);
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 180ms ease;
  font-size: 0.88rem;
  text-align: center;
  line-height: 1;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.bsr-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary), white 70%);
}

.bsr-btn.active,
.bsr-btn[aria-selected="true"] {
  color: white;
  background: linear-gradient(180deg, var(--bsr-active-grad-start), var(--bsr-active-grad-end));
  box-shadow: 0 8px 22px rgba(11,95,255,0.18), 0 2px 6px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

@media (max-width: 520px) {
  .bsr-btns { 
    padding: 4px; 
    gap: 6px; 
  }
  .bsr-btn { 
    padding: 8px 14px; 
    font-size: 0.82rem; 
  }
}

/* Regular nested tabs */
.regular-subtabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0.15rem auto 1rem;
  padding: 5px;
  border: 1px solid var(--bsr-border);
  border-radius: 999px;
  background: var(--bsr-panel);
  box-shadow: var(--bsr-shadow);
}

.regular-subtabs.hidden {
  display: none !important;
}

.regular-subtab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--bsr-inactive-text);
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.regular-subtab:hover {
  transform: translateY(-1px);
}

.regular-subtab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary), white 70%);
}

.regular-subtab.active,
.regular-subtab[aria-selected="true"] {
  color: white;
  background: linear-gradient(180deg, var(--bsr-active-grad-start), var(--bsr-active-grad-end));
  box-shadow: 0 5px 14px rgba(11,95,255,0.16);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .regular-subtabs {
    width: calc(100% - 1rem);
  }

  .regular-subtab {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}

/* Modal optimizations */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-dialog {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  overflow: auto;
  width: 100%;
  will-change: transform;
}

.image-viewer {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#modalImg {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  /* Optimize modal image */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  appearance: none;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 0;
  will-change: transform;
}

.modal-close:hover {
  background: color-mix(in oklab, var(--surface), var(--color-primary) 10%);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.download-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  appearance: none;
  border: none;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
  will-change: transform;
}

.download-btn:hover {
  background: color-mix(in oklab, var(--color-primary), black 15%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
}

.download-btn svg {
  width: 20px;
  height: 30px;
}

@media (max-width: 640px) {
  .image-viewer {
    max-width: 100vw;
    max-height: 100vh;
  }
  
  #modalImg {
    max-height: 85vh;
  }
  
  .modal-close {
    width: 28px;
    height: 28px;
    top: 10px;
    right: 10px;
    font-size: 1rem;
  }
  
  .download-btn {
    width: 40px;
    height: 40px;
    bottom: 15px;
    right: 15px;
  }
  
  .download-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Footer */
.site-footer {
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  border-top: 1px solid color-mix(in oklab, var(--muted), transparent 85%);
  background: transparent;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.site-footer .year {
  font-weight: 700;
  color: var(--color-primary);
}

.site-footer .footer-note {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in oklab, var(--muted), black 10%);
}

@media (max-width: 640px) {
  .site-footer { 
    font-size: 0.85rem; 
    padding: 0.75rem 0; 
    margin-top: 1.5rem;
  }
  .site-footer-inner { 
    padding: 0 0.75rem; 
  }
}

/* Loading state for images */
.card-img.loading {
  opacity: 0.5;
  filter: blur(2px);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.card-img.loaded {
  opacity: 1;
  filter: blur(0);
}

/* ============================================================
   MathsMarvel enhanced problem tools
   ============================================================ */
.feature-panel{margin:.7rem 0 .8rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--surface),color-mix(in oklab,var(--surface),var(--color-primary) 5%));box-shadow:0 3px 12px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;gap:.65rem}.feature-copy{gap:.55rem}.feature-copy h2{font-size:.9rem}.feature-copy p{margin:.1rem 0 0;font-size:.74rem;line-height:1.35}.feature-badge{padding:.22rem .42rem;font-size:.6rem}.feature-actions{gap:.35rem}.feature-btn{padding:.42rem .62rem;border-radius:9px;font-size:.76rem}.feature-btn.small{padding:.35rem .55rem;font-size:.72rem}
.feature-copy{display:flex;align-items:center;gap:.8rem}.feature-copy h2{margin:0;font-size:1.05rem}.feature-copy p{margin:.2rem 0 0;color:var(--muted);font-size:.86rem}.feature-badge{display:inline-flex;align-items:center;padding:.3rem .55rem;border-radius:999px;background:var(--color-primary);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.08em}.feature-actions{display:flex;gap:.5rem;flex-shrink:0}.feature-btn{border:0;border-radius:11px;background:var(--color-primary);color:#fff;font-weight:800;padding:.65rem .9rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .15s ease,opacity .15s ease}.feature-btn:hover{transform:translateY(-1px)}.feature-btn.secondary{background:var(--surface);color:var(--fg);border:1px solid var(--border);box-shadow:none}.feature-btn.small{padding:.45rem .65rem;font-size:.78rem}
.problem-toolbar{position:absolute;bottom:12px;left:12px;right:12px;z-index:12;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.problem-action{border:1px solid rgba(255,255,255,.2);background:rgba(15,23,42,.86);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:.5rem .7rem;font-size:.72rem;font-weight:800;cursor:pointer;transition:transform .15s ease,background .15s ease}.problem-action:hover{transform:translateY(-1px);background:rgba(15,23,42,.98)}.problem-action.gemini-action{background:var(--color-primary)}.problem-action.saved{background:var(--color-primary)}
.tool-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem}.tool-modal.hidden{display:none}.tool-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(5px)}.tool-dialog{position:relative;z-index:2;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:20px;padding:1.25rem;box-shadow:var(--shadow-strong)}.tool-dialog.wide{width:min(850px,100%)}.tool-dialog h2{margin:.55rem 0 .35rem}.tool-close{position:absolute;right:12px;top:10px;border:1px solid var(--border);background:var(--surface);color:var(--fg);width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer}.tool-muted{color:var(--muted);font-size:.86rem}.tool-muted.tiny{font-size:.72rem}.tool-label{display:block;font-weight:800;font-size:.82rem;margin:.9rem 0 .35rem}.key-row{display:flex;gap:.45rem}.key-row input,.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:11px;padding:.7rem;font:inherit}.icon-btn{width:44px;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:11px;cursor:pointer}.tool-warning{font-size:.75rem;color:#b45309;background:color-mix(in oklab,#f59e0b,var(--surface) 88%);padding:.65rem;border-radius:10px}.tool-footer-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.assistant-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-right:2rem}.assistant-status{margin:.8rem 0;color:var(--muted);font-size:.84rem}.assistant-output{min-height:110px;padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--bg);line-height:1.7;overflow:auto}.assistant-output pre{white-space:pre-wrap;overflow:auto;background:#111827;color:#f8fafc;padding:.8rem;border-radius:10px}.assistant-output code{padding:.1rem .25rem;border-radius:5px;background:color-mix(in oklab,var(--muted),transparent 85%)}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--color-primary);border-radius:50%;animation:mmspin .7s linear infinite;vertical-align:-2px;margin-right:.4rem}@keyframes mmspin{to{transform:rotate(360deg)}}.error-box{border:1px solid #ef4444;background:color-mix(in oklab,#ef4444,var(--surface) 93%);padding:1rem;border-radius:12px}.problem-reference{padding:.8rem;border-left:3px solid var(--color-primary);margin-bottom:.8rem;background:var(--surface)}
.comments-section{margin-top:1rem}.comments-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.comments-header h3{margin:.4rem 0}.comments-header span{font-size:.75rem;color:var(--muted)}.comments-list{display:grid;gap:.6rem;margin:.7rem 0}.comment-card{padding:.75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.comment-card p{margin:.35rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.comment-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem}.comment-meta time{color:var(--muted)}.comment-form{display:grid;gap:.55rem}.comment-form textarea{resize:vertical}.empty-state{padding:1rem;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px}.saved-list{display:grid;gap:.55rem;margin-top:1rem}.saved-item{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:.75rem;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:.45rem;border-radius:12px;text-align:left;cursor:pointer}.saved-item img{width:70px;height:50px;object-fit:cover;border-radius:8px}.saved-item span{font-weight:750}.mm-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:3000;background:#111827;color:#fff;padding:.7rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;opacity:0;pointer-events:none;transition:.2s ease;box-shadow:var(--shadow-strong)}.mm-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.feature-panel{align-items:stretch;flex-direction:column}.feature-actions{width:100%}.feature-actions .feature-btn{flex:1}.problem-toolbar{bottom:8px}.problem-action{font-size:.67rem;padding:.45rem .58rem}.tool-dialog{padding:1rem}.assistant-heading{flex-direction:column}.assistant-heading .feature-btn{margin-bottom:.3rem}}



/* MathsMarvel learning dashboard */
.mm-dashboard{margin:1rem 0 1.2rem;padding:1rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.mm-dash-head{display:flex;justify-content:space-between;gap:1rem;align-items:center}.mm-dash-head h2{margin:.35rem 0}.mm-dash-head p{margin:0;color:var(--muted);font-size:.86rem}.mm-stats{display:grid;grid-template-columns:repeat(4,minmax(65px,1fr));gap:.5rem}.mm-stats div{text-align:center;padding:.55rem .7rem;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.mm-stats strong,.mm-stats span{display:block}.mm-stats strong{font-size:1.05rem}.mm-stats span{font-size:.65rem;color:var(--muted)}
.mm-tools-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem;margin:1rem 0}.mm-tool{border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:14px;padding:.75rem;text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.mm-tool:hover{transform:translateY(-2px);border-color:var(--color-primary)}.mm-tool b{font-size:1.25rem;display:block;margin-bottom:.35rem}.mm-tool strong,.mm-tool span{display:block}.mm-tool strong{font-size:.8rem}.mm-tool span{font-size:.68rem;color:var(--muted);margin-top:.15rem}.mm-searchbar{display:grid;grid-template-columns:1fr 170px 170px;gap:.5rem}.mm-searchbar input,.mm-searchbar select,.mm-form input,.mm-form textarea{border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:11px;padding:.7rem;font:inherit}.mm-feature-modal{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:1rem}.mm-feature-modal.hidden{display:none}.mm-feature-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(5px)}.mm-feature-dialog{position:relative;z-index:2;width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:20px;padding:1.25rem;box-shadow:var(--shadow-strong)}.mm-feature-dialog h2{margin:.2rem 0 .5rem}.mm-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem}.mm-mini-card{border:1px solid var(--border);border-radius:13px;padding:.8rem;background:var(--bg)}.mm-mini-card strong{display:block}.mm-muted{color:var(--muted);font-size:.82rem}.mm-form{display:grid;gap:.55rem}.mm-form textarea{resize:vertical}.mm-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.mm-row>*{flex:1}.mm-primary{border:0;border-radius:11px;background:var(--color-primary);color:#fff;padding:.7rem 1rem;font-weight:800;cursor:pointer}.mm-secondary{border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--fg);padding:.7rem 1rem;font-weight:800;cursor:pointer}.mm-timer{font-size:3rem;text-align:center;font-variant-numeric:tabular-nums;padding:1rem}.mm-calc{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.mm-calc input{grid-column:1/-1;text-align:right;font-size:1.25rem}.mm-calc button{padding:.8rem;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:10px;cursor:pointer;font-weight:700}.mm-achievements{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}.mm-achievement{padding:.8rem;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.mm-locked{opacity:.5;filter:grayscale(1)}
@media(max-width:900px){.mm-tools-grid{grid-template-columns:repeat(3,1fr)}.mm-dash-head{align-items:stretch;flex-direction:column}}@media(max-width:600px){.mm-tools-grid{grid-template-columns:repeat(2,1fr)}.mm-stats{grid-template-columns:repeat(2,1fr)}.mm-searchbar{grid-template-columns:1fr}.mm-feature-dialog{padding:1rem}}

/* Collapsible three-line MathsMarvel tools menu */
.mm-menu-toggle{position:fixed;top:18px;left:18px;z-index:3200;width:48px;height:48px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--fg);box-shadow:var(--shadow);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mm-menu-toggle:hover{transform:translateY(-1px);border-color:var(--color-primary)}
.mm-sidebar{position:fixed;top:0;left:0;bottom:0;width:min(330px,88vw);z-index:3150;background:var(--surface);color:var(--fg);border-right:1px solid var(--border);box-shadow:12px 0 35px rgba(0,0,0,.18);padding:18px;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease}
.mm-sidebar.open{transform:translateX(0)}
.mm-menu-overlay{position:fixed;inset:0;z-index:3140;background:rgba(2,6,23,.52);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.mm-menu-overlay.open{opacity:1;visibility:visible}
.mm-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.mm-sidebar-head h2{margin:4px 0 0;font-size:1.15rem}
.mm-sidebar-close{width:38px;height:38px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:10px;font-size:1.5rem;cursor:pointer}
.mm-side-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.mm-side-stats div{padding:9px 5px;text-align:center;border:1px solid var(--border);border-radius:11px;background:var(--bg)}
.mm-side-stats strong,.mm-side-stats span{display:block}.mm-side-stats strong{font-size:.95rem}.mm-side-stats span{font-size:.62rem;color:var(--muted);margin-top:2px}
.mm-side-nav{display:grid;gap:7px}
.mm-side-nav .mm-tool{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:13px;padding:11px;text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.mm-side-nav .mm-tool:hover{transform:translateX(3px);border-color:var(--color-primary)}
.mm-side-nav .mm-tool b{font-size:1.25rem;min-width:28px;text-align:center}.mm-side-nav .mm-tool span{display:block}.mm-side-nav .mm-tool strong,.mm-side-nav .mm-tool small{display:block}.mm-side-nav .mm-tool strong{font-size:.82rem}.mm-side-nav .mm-tool small{font-size:.68rem;color:var(--muted);margin-top:2px}
.mm-side-search{margin-top:16px;padding-top:15px;border-top:1px solid var(--border);display:grid;gap:7px}.mm-side-search label{font-weight:800;font-size:.78rem}.mm-side-search input,.mm-side-search select{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:10px;padding:.65rem;font:inherit}
body.mm-menu-open{overflow:hidden}
@media(max-width:600px){.mm-menu-toggle{top:12px;left:12px;width:44px;height:44px}.mm-sidebar{width:min(320px,92vw);padding:14px}.mm-side-stats{grid-template-columns:repeat(2,1fr)}}

/* Enhanced scientific calculator and math solver */
.mm-calc-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin:.8rem 0}.mm-calc-tab{border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:.65rem .85rem;border-radius:10px;font-weight:800;cursor:pointer}.mm-calc-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.mm-calc-panel{display:block}.mm-calc-display{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:12px;padding:.85rem;font:600 1rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;margin-bottom:.55rem}.mm-calc-scientific{grid-template-columns:repeat(4,1fr)}.mm-calc-scientific button{min-height:46px}.mm-calc-result,.mm-solver-output{margin-top:.7rem;padding:.85rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);white-space:pre-wrap;overflow:auto;min-height:2.5rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.mm-solver-output{font-size:.88rem;line-height:1.55}.mm-calculus-extra{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:end;margin-top:.65rem}.mm-calculus-extra label{display:grid;gap:.3rem;font-size:.8rem;font-weight:700}.mm-calculus-extra input{border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:10px;padding:.65rem;font:inherit}.mm-form label{display:grid;gap:.3rem;font-weight:700;font-size:.82rem}.mm-form label input,.mm-form label textarea{font-weight:400}@media(max-width:600px){.mm-calculus-extra{grid-template-columns:1fr}.mm-calc-scientific{grid-template-columns:repeat(4,1fr)}}

/* MathsMarvel saved + comments polish */
.saved-item{min-height:64px;transition:transform .15s ease,border-color .15s ease}
.saved-item:hover,.saved-item:focus-visible{transform:translateY(-1px);border-color:var(--color-primary);outline:none}
.saved-item span{min-width:0}.saved-item span strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-item span small{display:block;margin-top:.18rem;color:var(--muted);font-size:.72rem;font-weight:500}
.comments-section{display:block}.comments-list{max-height:340px;overflow:auto;padding-right:.15rem}.comment-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.82rem}.comment-head time{color:var(--muted);font-size:.7rem;white-space:nowrap}.comment-form{margin-top:.8rem}.comment-form input:focus,.comment-form textarea:focus{outline:2px solid color-mix(in oklab,var(--color-primary),transparent 65%);outline-offset:1px}

/* Simple search bar (Math Lab removed) */
.mm-search-only{max-width:760px;margin:1rem auto 1.25rem;padding:0 1rem;display:grid;gap:.45rem}
.mm-search-only label{font-weight:800;font-size:.82rem}
.mm-search-only input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:14px;padding:.85rem 1rem;font:inherit;box-shadow:var(--shadow)}
.mm-search-only input:focus{outline:2px solid color-mix(in oklab,var(--color-primary),transparent 65%);outline-offset:2px}

/* Problem likes */
.problem-action.liked { font-weight: 700; }
#likeCount { margin-left: 4px; min-width: 1ch; display: inline-block; }

/* Enhanced right-side social controls */
.problem-toolbar{
  position:absolute;
  top:50%;
  right:16px;
  left:auto;
  bottom:auto;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  width:142px;
  padding:10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(8,15,30,.72);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}
.problem-action{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:.62rem .7rem;
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.01em;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.problem-action:hover{transform:translateX(-3px);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);box-shadow:0 7px 18px rgba(0,0,0,.2)}
.problem-action.liked{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.45)}
.problem-action.saved{background:color-mix(in oklab,var(--color-primary),transparent 78%);border-color:color-mix(in oklab,var(--color-primary),white 20%)}
#likeCount{margin-left:2px;min-width:1.2ch}
@media(max-width:700px){
  .problem-toolbar{top:auto;right:10px;bottom:10px;transform:none;width:auto;max-width:calc(100% - 20px);padding:7px;flex-direction:row;align-items:center;gap:6px;border-radius:14px}
  .problem-action{width:auto;min-height:38px;padding:.48rem .58rem;font-size:.66rem}
}

/* ============================================================
   Mobile-first problem viewer + community controls refresh
   ============================================================ */
.image-viewer{width:min(100vw,1100px);max-width:100vw;max-height:100vh;background:var(--bg)}
#modalImg{max-width:100%;max-height:calc(100vh - 24px);object-fit:contain}
.problem-toolbar{top:auto;right:14px;left:auto;bottom:14px;transform:none;width:auto;max-width:calc(100% - 28px);padding:6px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(5,9,20,.68);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.problem-action{width:auto;min-width:0;min-height:34px;height:34px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-size:.68rem;line-height:1;font-weight:800;letter-spacing:0;white-space:nowrap}
.problem-action:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}.problem-action:active{transform:scale(.96)}
.problem-action .action-icon{font-size:1rem;line-height:1}.problem-action .action-count{min-width:1ch;font-variant-numeric:tabular-nums}
.problem-action.liked{background:rgba(239,68,68,.22);border-color:rgba(248,113,113,.45)}.problem-action.saved{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
#assistantModal .tool-dialog{width:min(620px,calc(100vw - 24px));max-height:min(82vh,760px);padding:0;overflow:hidden;border-radius:24px;border:1px solid var(--border);box-shadow:0 24px 70px rgba(0,0,0,.28)}
#assistantModal .tool-close{top:14px;right:14px;width:36px;height:36px;z-index:4;background:color-mix(in oklab,var(--surface),transparent 10%)}
#assistantModal .assistant-heading{padding:20px 54px 16px 20px;margin:0;background:linear-gradient(135deg,var(--surface),color-mix(in oklab,var(--surface),var(--color-primary) 7%));border-bottom:1px solid var(--border)}
#assistantModal .assistant-heading h2{font-size:1.18rem;margin:.55rem 0 0}#assistantModal .assistant-status{margin:0;padding:10px 20px;font-size:.76rem;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--border)}#assistantModal .assistant-output{display:none}
#assistantModal .comments-section{margin:0;padding:16px 20px 20px;overflow:auto;max-height:calc(min(82vh,760px) - 112px)}
#assistantModal .comments-header{position:sticky;top:0;z-index:2;padding:0 0 10px;background:var(--surface)}#assistantModal .comments-header h3{margin:0;font-size:1rem}#assistantModal .comments-header span{padding:.25rem .55rem;border-radius:999px;background:var(--bg);border:1px solid var(--border)}
.comments-list{max-height:none;overflow:visible;display:grid;gap:10px;margin:4px 0 14px}.comment-card{position:relative;padding:11px 13px;border:1px solid var(--border);border-radius:15px;background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.035)}
.comment-card::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:4px;background:var(--color-primary);opacity:.75}.comment-head{padding-left:7px;gap:8px;font-size:.78rem}.comment-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-card p{padding-left:7px;margin:.45rem 0 0;font-size:.86rem;line-height:1.5}
.comment-form{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:17px;background:color-mix(in oklab,var(--bg),var(--surface) 35%)}.comment-compose{display:flex;align-items:flex-start;gap:9px}.comment-avatar{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.8rem;font-weight:900}.comment-fields{flex:1;min-width:0;display:grid;gap:7px}
.comment-form input,.comment-form textarea{border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:.65rem .75rem;font-size:.84rem}.comment-form textarea{min-height:76px}.comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}.comment-limit{color:var(--muted);font-size:.68rem}.comment-submit{display:inline-flex;align-items:center;gap:6px;padding:.5rem .75rem;border-radius:10px;font-size:.74rem}#assistantModal .tool-muted.tiny{margin:9px 2px 0;font-size:.66rem}
@media (max-width:600px){
 #modalImg{width:100%;max-width:100vw;max-height:calc(100dvh - 70px)}
 .problem-toolbar{left:50%;right:auto;bottom:8px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 16px);padding:4px;gap:3px;border-radius:13px}
 .problem-action{min-height:30px;height:30px;padding:0 7px;border-radius:9px;font-size:.62rem}.problem-action .action-icon{font-size:.9rem}.problem-action .action-count{font-size:.62rem}
 #assistantModal{padding:8px}#assistantModal .tool-dialog{width:100%;max-height:88dvh;border-radius:20px}#assistantModal .comments-section{max-height:calc(88dvh - 112px);padding:14px 13px 16px}#assistantModal .assistant-heading{padding:17px 50px 13px 15px}#assistantModal .assistant-status{padding:8px 15px}.comment-card{padding:10px 11px}.comment-form{padding:10px}.comment-limit{display:none}.comment-form-footer{justify-content:flex-end}
}
@media (max-width:360px){.problem-action{padding:0 5px;font-size:.58rem}.problem-action .action-label{display:none}.problem-action .action-icon{font-size:.95rem}.problem-action .action-count{display:inline}}

/* Final mobile problem viewer fix: keep social actions below the question, never over it. */
.image-viewer{
  width:min(100vw,1100px);
  max-width:100vw;
  max-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}
#modalImg{
  display:block;
  width:auto;
  height:auto;
  max-width:100vw;
  max-height:calc(100vh - 82px);
  object-fit:contain;
  flex:0 1 auto;
}
.problem-toolbar{
  position:static;
  order:2;
  width:auto;
  max-width:calc(100% - 20px);
  margin:8px auto 10px;
  padding:5px;
  transform:none;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(5,9,20,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.problem-action{
  width:auto;
  min-width:0;
  min-height:30px;
  height:30px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:9px;
  font-size:.62rem;
  line-height:1;
  white-space:nowrap;
}
@media(max-width:600px){
  #modalImg{
    width:100%;
    max-width:100vw;
    max-height:calc(100dvh - 82px);
  }
  .problem-toolbar{
    max-width:calc(100vw - 12px);
    margin:6px auto 8px;
    padding:4px;
    gap:3px;
  }
  .problem-action{
    min-height:29px;
    height:29px;
    padding:0 6px;
    font-size:.59rem;
  }
  .problem-action .action-icon{font-size:.88rem}
}
@media(max-width:360px){
  #modalImg{max-height:calc(100dvh - 62px)}
  .problem-toolbar{max-width:calc(100vw - 8px);margin:5px auto 6px}
  .problem-action{padding:0 5px;min-height:28px;height:28px}
  .problem-action .action-label{display:none}
}




/* Premium problem-opening and tap motion */
@keyframes mmBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mmViewerIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  60% { transform: translateY(-2px) scale(1.012); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mmToolbarIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mmCardTap {
  0% { transform: scale(1); }
  45% { transform: scale(.975); }
  100% { transform: scale(1); }
}

#imageModal.mm-modal-opening .modal-backdrop { animation: mmBackdropIn .28s ease-out both; }
#imageModal.mm-modal-opening .modal-dialog { animation: mmViewerIn .4s cubic-bezier(.2,.8,.2,1) both; }
#imageModal.mm-modal-opening .problem-toolbar { animation: mmToolbarIn .35s .12s cubic-bezier(.2,.8,.2,1) both; }
.card { -webkit-tap-highlight-color: transparent; }
.card:active { animation: mmCardTap .18s ease-out; }
.problem-action { transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.problem-action:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  #imageModal.mm-modal-opening .modal-backdrop,
  #imageModal.mm-modal-opening .modal-dialog,
  #imageModal.mm-modal-opening .problem-toolbar,
  .card:active { animation: none !important; }
}

.profile-btn{border:1px solid rgba(127,127,127,.25);background:var(--card-bg,#fff);color:inherit;border-radius:10px;padding:7px 10px;cursor:pointer;font-weight:700;font-size:.8rem}
.profile-dialog{max-width:520px}
.profile-hero{display:flex;align-items:center;gap:14px;margin:18px 0}.profile-hero h2{margin:0}.profile-hero p{margin:4px 0 0;opacity:.65}
.profile-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,#6c63ff,#00bcd4);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.profile-form{display:grid;gap:12px}.profile-form label{display:grid;gap:6px;font-weight:700;font-size:.82rem}.profile-form input,.profile-form textarea{font:inherit;padding:10px 12px;border:1px solid rgba(127,127,127,.25);border-radius:11px;background:transparent;color:inherit;outline:none}.profile-form input:focus,.profile-form textarea:focus{border-color:currentColor}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.profile-stats div{padding:12px;border-radius:12px;background:rgba(127,127,127,.08);text-align:center}.profile-stats strong,.profile-stats span{display:block}.profile-stats span{font-size:.72rem;opacity:.65;margin-top:3px}
.replying-to{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;margin:8px 0;border-radius:10px;background:rgba(108,99,255,.1);font-size:.8rem}.replying-to button{border:0;background:transparent;color:inherit;font-weight:700;cursor:pointer}.reply-card{margin-left:34px;position:relative}.reply-card:before{content:"";position:absolute;left:-18px;top:0;height:100%;border-left:2px solid rgba(108,99,255,.25)}.comment-content{min-width:0;flex:1}.comment-avatar.small{flex:0 0 34px;width:34px;height:34px;font-size:.8rem}.reply-context{font-size:.72rem;opacity:.6;margin:-2px 0 5px}.reply-btn{border:0;background:transparent;padding:2px 0;color:inherit;opacity:.68;font-weight:700;font-size:.72rem;cursor:pointer}.reply-btn:hover{opacity:1}
@media(max-width:600px){.profile-btn span{display:none}.profile-btn{padding:7px 8px}.reply-card{margin-left:20px}}

/* Compact Saved Problems home panel */
@media(max-width:700px){.feature-panel{margin:.55rem 0 .7rem;padding:.55rem .65rem;gap:.5rem}.feature-copy p{font-size:.7rem}.feature-actions .feature-btn{padding:.38rem .55rem;font-size:.72rem}}




/* Saved problems as a first-class content tab */
.bsr-btns{max-width:100%;overflow-x:auto;scrollbar-width:none}
.bsr-btns::-webkit-scrollbar{display:none}
.saved-gallery{min-height:180px}
.saved-gallery-empty{grid-column:1/-1;min-height:240px;display:grid;place-items:center;align-content:center;gap:.35rem;padding:2rem;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface)}
.saved-gallery-empty h2{margin:.2rem 0;font-size:1.15rem}
.saved-gallery-empty p{margin:0;color:var(--muted);max-width:42ch}
.saved-empty-icon{font-size:2rem;font-weight:900;color:var(--color-primary)}
.saved-problem-card{position:relative}
.saved-card-badge{position:absolute;top:9px;left:9px;z-index:2;padding:.28rem .5rem;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-size:.68rem;font-weight:850;backdrop-filter:blur(6px)}
.feature-saved-hint{display:inline-flex;align-items:center;padding:.65rem .8rem;border:1px solid var(--border);border-radius:11px;color:var(--muted);font-size:.78rem;font-weight:700;background:var(--surface)}
@media(max-width:520px){.bsr-btn{padding:8px 12px;font-size:.78rem}.saved-card-badge{font-size:.62rem}}


.olympiad-vault-panel{display:flex;align-items:center;justify-content:center;min-height:360px;padding:32px 20px}
.olympiad-vault-panel.hidden{display:none}
.olympiad-vault-card{width:min(760px,100%);text-align:center;padding:42px 34px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.olympiad-vault-icon{font-size:3.375rem;margin-bottom:12px}
.olympiad-vault-card h2{margin:0 0 14px}
.olympiad-vault-message,.olympiad-vault-submessage{line-height:1.7}
.olympiad-vault-status{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.9rem}
.olympiad-vault-dot{width:9px;height:9px;border-radius:50%;background:currentColor;animation:olympiadVaultPulse 1.8s ease-in-out infinite}
@keyframes olympiadVaultPulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}

/* ============================================================
   MathNet Olympiad Vault
   ============================================================ */
.olympiad-vault-panel{display:block;padding:22px 0 38px}
.olympiad-vault-panel.hidden{display:none}
.olympiad-vault-shell{width:min(1180px,100%);margin:0 auto;padding:0 12px}
.olympiad-vault-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:18px}
.olympiad-vault-kicker{font-size:.72rem;font-weight:900;letter-spacing:.12em;opacity:.7;margin-bottom:5px}
.olympiad-vault-head h2{margin:0;font-size:clamp(1.5rem,3vw,2.2rem)}
.olympiad-vault-head p{margin:7px 0 0;color:var(--muted);max-width:720px;line-height:1.55}
.olympiad-vault-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.olympiad-vault-stats span{min-width:82px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:center}
.olympiad-vault-stats strong,.olympiad-vault-stats small{display:block}.olympiad-vault-stats strong{font-size:1.05rem}.olympiad-vault-stats small{font-size:.67rem;opacity:.62;margin-top:2px}
.olympiad-vault-filters{display:grid;grid-template-columns:minmax(220px,1.8fr) repeat(4,minmax(140px,1fr)) auto;gap:8px;margin:16px 0}
.mathnet-search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0 12px;min-height:44px}.mathnet-search-wrap span{font-size:1.2rem;opacity:.6}.mathnet-search-wrap input{border:0!important;outline:0!important;background:transparent!important;width:100%;min-width:0;color:inherit}
.olympiad-vault-filters select,.olympiad-vault-filters .feature-btn{min-height:44px;border-radius:12px}
.mathnet-status{margin:8px 0 12px;color:var(--muted);font-size:.82rem;min-height:20px}
.mathnet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mathnet-grid.is-loading{opacity:.58;pointer-events:none}
.mathnet-problem-card{cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.mathnet-problem-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.mathnet-card-figure{aspect-ratio:16/9}.mathnet-card-figure .card-img{object-fit:cover}
.mathnet-card-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.mathnet-card-badges span,.mathnet-topic-row span{font-size:.62rem;font-weight:800;padding:4px 7px;border-radius:999px;background:rgba(108,99,255,.1);color:inherit}
.mathnet-card-preview{margin:7px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mathnet-topic-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.mathnet-topic-row span{font-size:.58rem;padding:3px 6px;opacity:.78}
.mathnet-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}.mathnet-pagination span{font-size:.8rem;color:var(--muted);font-weight:800}
.mathnet-attribution{font-size:.68rem;color:var(--muted);margin:18px 0 0;text-align:center;line-height:1.5}
.mathnet-detail-dialog{max-height:90vh;overflow:auto}.mathnet-detail-top h2{margin:.35rem 0 .2rem}.mathnet-detail-meta{margin:0;color:var(--muted);font-size:.8rem}.mathnet-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0}.mathnet-detail-content{font-family:Cambria,Georgia,serif;font-size:1.03rem;line-height:1.75}.mathnet-detail-content p{margin:0}.mathnet-detail-content h4,.mathnet-solution h4{font-family:inherit;margin:1rem 0 .35rem}.mathnet-detail-content code{padding:2px 5px;border-radius:5px;background:rgba(127,127,127,.1)}.mathnet-solution{margin-top:20px;border:1px solid var(--border);border-radius:14px;padding:12px 15px}.mathnet-solution summary{cursor:pointer;font-weight:850}.mathnet-solution>div{margin-top:14px}.mathnet-ideas{margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(108,99,255,.07);font-size:.82rem}.mathnet-ideas ul{margin:.5rem 0 0;padding-left:1.2rem}.mathnet-source-link{display:inline-block;margin-top:16px;font-size:.78rem;font-weight:800}
@media(max-width:980px){.olympiad-vault-filters{grid-template-columns:1fr 1fr 1fr}.mathnet-search-wrap{grid-column:1/-1}.mathnet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.olympiad-vault-head{align-items:flex-start;flex-direction:column}.olympiad-vault-stats{justify-content:flex-start}}
@media(max-width:620px){.olympiad-vault-filters{grid-template-columns:1fr 1fr}.mathnet-grid{grid-template-columns:1fr}.olympiad-vault-stats{width:100%}.olympiad-vault-stats span{flex:1}.mathnet-detail-dialog{padding:18px}.mathnet-detail-content{font-size:.96rem}}

/* ============================================================
   MathNet Olympiad Vault UI
   ============================================================ */
.mm-vault-shell{width:100%;max-width:1400px;margin:0 auto;padding:22px 18px 40px}
.mm-vault-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:24px;border:1px solid var(--border-color,#ddd);border-radius:22px;background:var(--card-bg,#fff);box-shadow:0 10px 30px rgba(0,0,0,.06);margin-bottom:18px}
.mm-vault-hero h2{margin:8px 0 6px;font-size:clamp(1.5625rem,3vw,2.375rem)}
.mm-vault-hero p{margin:0;opacity:.75}
.mm-vault-stats{min-width:190px;text-align:right;display:flex;flex-direction:column;gap:3px}.mm-vault-stats strong{font-size:1.875rem}.mm-vault-stats span,.mm-vault-stats small{opacity:.7}
.mm-vault-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(4,minmax(150px,1fr)) auto;gap:10px;align-items:end;margin-bottom:12px}
.mm-vault-filters label{display:flex;flex-direction:column;gap:6px;font-size:0.75rem;font-weight:700}.mm-vault-filters input,.mm-vault-filters select{width:100%;min-height:44px;border:1px solid var(--border-color,#d9d9d9);border-radius:12px;background:var(--card-bg,#fff);padding:0 12px;color:inherit}
.mm-vault-clear,.mm-vault-secondary,.mm-vault-primary{border:1px solid var(--border-color,#ccc);border-radius:11px;padding:10px 14px;cursor:pointer;font:inherit}.mm-vault-clear{min-height:44px;background:transparent}.mm-vault-primary{background:var(--color-primary,#111);color:#fff;border-color:var(--color-primary,#111)}.mm-vault-secondary{background:transparent;color:inherit}.mm-vault-card-actions,.mm-vault-modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mm-vault-statusbar{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;color:var(--muted,#777);font-size:0.8125rem}
.mm-vault-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mm-vault-problem{border:1px solid var(--border-color,#ddd);border-radius:18px;padding:17px;background:var(--card-bg,#fff);box-shadow:0 5px 18px rgba(0,0,0,.045);display:flex;flex-direction:column;min-width:0}.mm-vault-problem-top{display:flex;justify-content:space-between;gap:8px;font-size:0.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.7}.mm-vault-problem h3{font-size:1.0625rem;margin:9px 0 7px;line-height:1.3}.mm-vault-meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.mm-vault-meta span,.mm-vault-tags span{font-size:0.6875rem;padding:4px 7px;border-radius:999px;background:rgba(127,127,127,.1)}.mm-vault-preview{font-size:0.8125rem;line-height:1.55;max-height:145px;overflow:hidden;mask-image:linear-gradient(to bottom,#000 70%,transparent)}.mm-vault-preview p{margin:0 0 8px}.mm-vault-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}.mm-vault-loading,.mm-vault-empty{grid-column:1/-1;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;border:1px dashed var(--border-color,#ccc);border-radius:18px;padding:25px}.mm-vault-empty span{opacity:.65}.mm-spinner{width:26px;height:26px;border:3px solid rgba(127,127,127,.25);border-top-color:currentColor;border-radius:50%;animation:mmVaultSpin .8s linear infinite}@keyframes mmVaultSpin{to{transform:rotate(360deg)}}
.mm-vault-pagination{display:flex;justify-content:center;gap:6px;margin:20px 0}.mm-vault-pagination button{min-width:38px;padding:8px 11px;border:1px solid var(--border-color,#ccc);border-radius:9px;background:transparent;color:inherit;cursor:pointer}.mm-vault-pagination button.active{background:var(--color-primary,#111);color:#fff}.mm-vault-pagination button:disabled{opacity:.4;cursor:not-allowed}.mm-vault-source{text-align:center;font-size:0.6875rem;opacity:.6;margin:20px 0 0}.mm-vault-source a{color:inherit}
.mm-vault-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.mm-vault-modal.hidden{display:none}.mm-vault-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}.mm-vault-problem-dialog{position:relative;z-index:1;width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--card-bg,#fff);color:inherit;border-radius:22px;padding:30px;box-shadow:0 25px 80px rgba(0,0,0,.3)}.mm-vault-close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:1.875rem;cursor:pointer;color:inherit}.mm-vault-problem-head{padding-right:35px;border-bottom:1px solid var(--border-color,#ddd);padding-bottom:18px;margin-bottom:18px}.mm-vault-problem-head h2{margin:8px 0;font-size:clamp(1.375rem,3vw,2.125rem)}.mm-vault-problem-head p{margin:0;opacity:.65}.mm-vault-full-section{margin:20px 0}.mm-vault-full-section h3{margin-bottom:10px}.mm-vault-math{line-height:1.7;font-size:max(1rem,16px)}.mm-vault-math p{margin:0 0 13px}.mm-vault-solution{border:1px solid var(--border-color,#ddd);border-radius:12px;margin:10px 0;padding:10px 14px}.mm-vault-solution summary{cursor:pointer;font-weight:700}.mm-vault-answer{border-left:4px solid var(--color-primary,#111);padding:12px 16px;background:rgba(127,127,127,.08);border-radius:8px}.mm-vault-link{text-decoration:none;display:inline-flex;align-items:center}
@media(max-width:1050px){.mm-vault-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.mm-vault-search{grid-column:1/-1}.mm-vault-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mm-vault-hero{flex-direction:column}.mm-vault-stats{text-align:left}}
@media(max-width:650px){.mm-vault-shell{padding:12px 9px 28px}.mm-vault-filters{grid-template-columns:1fr}.mm-vault-search{grid-column:auto}.mm-vault-grid{grid-template-columns:1fr}.mm-vault-problem-dialog{padding:22px 15px;border-radius:16px}.mm-vault-hero{padding:18px}}

/* ============================================================
   Olympiad-grade mathematical typesetting
   ============================================================ */
.mm-vault-math, .mathnet-detail-content {
  font-family: Cambria, "Cambria Math", "STIX Two Math", "Latin Modern Math", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.82;
  letter-spacing: .005em;
}
.mm-math-block {
  width: 100%; margin: 1.15rem 0; padding: .85rem .55rem;
  overflow-x: auto; overflow-y: hidden; text-align: center;
  -webkit-overflow-scrolling: touch;
}
.mm-math-inline { white-space: normal; }
.mm-math-block mjx-container[jax="CHTML"][display="true"] { margin: .35rem 0 !important; }
.mm-vault-math mjx-container, .mathnet-detail-content mjx-container { max-width: 100%; }
.mm-vault-math mjx-container[display="true"], .mathnet-detail-content mjx-container[display="true"] {
  overflow-x: auto; overflow-y: hidden; padding: .15rem 0;
}
.mathnet-solution, .mm-vault-solution { font-family: Cambria, "Cambria Math", Georgia, serif; }
.mathnet-detail-content p, .mm-vault-math p { margin: .75rem 0; }
.mathnet-detail-content h4, .mm-vault-math h4 { margin: 1.25rem 0 .45rem; font-size: 1.08em; }
@media (max-width: 700px) {
  .mm-vault-math, .mathnet-detail-content { font-size: 1rem; line-height: 1.7; }
  .mm-math-block { margin: .8rem -.2rem; padding: .65rem .2rem; }
}

/* MathNet Vault — full mathematical reading surface */
.mm-vault-source-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.65rem 0 1.15rem;color:var(--muted,#667085);font-size:.86rem}
.mm-vault-source-meta span{padding:.32rem .55rem;border:1px solid rgba(127,127,127,.18);border-radius:999px;background:rgba(127,127,127,.05)}

.mm-vault-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.mm-vault-figures h4{grid-column:1/-1;margin:.25rem 0 0}
.mm-vault-figures figure{margin:0;padding:.75rem;border:1px solid rgba(127,127,127,.18);border-radius:14px;background:rgba(127,127,127,.04)}
.mm-vault-figures img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:9px;background:#fff}
.mm-vault-figures figcaption{text-align:center;margin-top:.45rem;font-size:.78rem;color:var(--muted,#667085)}
.mm-vault-preview{line-height:1.55;color:var(--muted,#667085);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.mm-vault-math{font-family:Cambria, "Cambria Math", "STIX Two Math", "Latin Modern Math", serif;font-size:1.02rem;line-height:1.72}
.mm-vault-math .mm-math-block{overflow-x:auto;overflow-y:hidden;padding:.55rem 0;text-align:center}
.mm-vault-math .mm-math-inline{white-space:nowrap}
.mm-vault-math mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}
@media (max-width:700px){.mm-vault-source-meta{gap:.35rem}.mm-vault-source-meta span{font-size:.78rem}.mm-vault-figures{grid-template-columns:1fr}}

.mm-vault-search-btn{min-height:44px;white-space:nowrap}
.mm-vault-card-math{font-family:Cambria,"Cambria Math","STIX Two Math",Georgia,serif;font-size:1rem;line-height:1.65;max-height:190px;overflow:hidden;position:relative}
.mm-vault-card-math p{margin:.15rem 0 .6rem}
.mm-vault-card-math .mm-math-block{margin:.45rem 0;padding:.2rem 0;overflow-x:auto}
.mm-vault-card-math mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}
@media(max-width:1050px){.mm-vault-search-btn{grid-column:1/-1}}

/* Compact Olympiad Vault controls — layout only; functionality untouched */
.mm-vault-hero{padding:16px 18px;border-radius:16px;gap:16px;margin-bottom:12px}
.mm-vault-hero h2{margin:4px 0 4px;font-size:clamp(1.375rem,2.4vw,1.875rem)}
.mm-vault-hero p{font-size:0.8125rem;line-height:1.4}
.mm-vault-hero .feature-badge{font-size:0.625rem;padding:4px 7px}
.mm-vault-stats{min-width:150px;gap:2px}.mm-vault-stats strong{font-size:1.5rem}.mm-vault-stats span,.mm-vault-stats small{font-size:0.75rem}
.mm-vault-filters{grid-template-columns:minmax(190px,2fr) repeat(4,minmax(115px,1fr)) auto;gap:7px;margin-bottom:9px}
.mm-vault-filters label{gap:4px;font-size:0.6875rem}
.mm-vault-filters input,.mm-vault-filters select{min-height:38px;border-radius:9px;padding:0 10px;font-size:0.8125rem}
.mm-vault-clear,.mm-vault-secondary,.mm-vault-primary{border-radius:9px;padding:8px 11px;font-size:0.8125rem}
.mm-vault-clear,.mm-vault-search-btn{min-height:38px}
.mm-vault-search-btn{padding:8px 12px}
@media(max-width:1050px){.mm-vault-filters{gap:7px}.mm-vault-hero{padding:15px 16px}}
@media(max-width:650px){.mm-vault-hero{padding:14px;border-radius:14px}.mm-vault-hero h2{font-size:1.4375rem}.mm-vault-hero p{font-size:0.75rem}.mm-vault-stats strong{font-size:1.3125rem}.mm-vault-filters input,.mm-vault-filters select{min-height:36px}}

/* Compact Olympiad Vault controls: search and filters stay as small buttons until opened. */
.mm-vault-compact-actions{display:flex;gap:7px;align-items:center;margin:8px 0 10px}
.mm-vault-compact-btn{border:1px solid var(--border-color,#d9d9d9);background:var(--surface,#fff);color:inherit;border-radius:999px;padding:7px 12px;font-size:0.75rem;font-weight:800;line-height:1;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.mm-vault-compact-btn:hover{transform:translateY(-1px);border-color:var(--color-primary,#111)}
.mm-vault-compact-btn.active{background:color-mix(in oklab,var(--color-primary,#111),var(--surface,#fff) 90%);border-color:var(--color-primary,#111)}
.mm-vault-filters[hidden]{display:none}
.mm-vault-filter-panel{grid-template-columns:repeat(4,minmax(120px,1fr)) auto;margin-top:0}
@media(max-width:650px){.mm-vault-compact-actions{margin:6px 0 8px}.mm-vault-compact-btn{padding:7px 11px}.mm-vault-filter-panel{grid-template-columns:1fr 1fr}}


/* Olympiad Vault — dark mode fix only */
html[data-theme="dark"] #gallery-olympiad,
html[data-theme="dark"] #gallery-olympiad .mm-vault-shell,
html[data-theme="dark"] #gallery-olympiad .mm-vault-hero,
html[data-theme="dark"] #gallery-olympiad .mm-vault-filters,
html[data-theme="dark"] #gallery-olympiad .mm-vault-problem,
html[data-theme="dark"] #gallery-olympiad .mm-vault-loading,
html[data-theme="dark"] #gallery-olympiad .mm-vault-empty,
html[data-theme="dark"] #gallery-olympiad .mm-vault-compact-btn,
html[data-theme="dark"] #gallery-olympiad .mm-vault-filters input,
html[data-theme="dark"] #gallery-olympiad .mm-vault-filters select,
html[data-theme="dark"] #mmVaultProblemModal .mm-vault-problem-dialog,html[data-theme="dark"] #gallery-mdoc .mm-vault-problem ,html[data-theme="dark"] #gallery-events .mm-vault-problem {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] #gallery-olympiad .mm-vault-hero p,
html[data-theme="dark"] #gallery-olympiad .mm-vault-statusbar,
html[data-theme="dark"] #gallery-olympiad .mm-vault-meta,
html[data-theme="dark"] #gallery-olympiad .mm-vault-problem-top,
html[data-theme="dark"] #gallery-olympiad .mm-vault-preview,
html[data-theme="dark"] #gallery-olympiad .mm-vault-stats span,
html[data-theme="dark"] #gallery-olympiad .mm-vault-stats small,html[data-theme="dark"] #gallery-mdoc .mm-vault-statusbar,html[data-theme="dark"] #gallery-events .mm-vault-statusbar,html[data-theme="dark"] #gallery-mdoc .mm-vault-meta,html[data-theme="dark"] #gallery-events .mm-vault-meta,html[data-theme="dark"] #gallery-mdoc .mm-vault-problem-top,html[data-theme="dark"] #gallery-events .mm-vault-problem-top,html[data-theme="dark"] #gallery-mdoc .mm-vault-preview ,html[data-theme="dark"] #gallery-events .mm-vault-preview {
  color: var(--muted) !important;
}

html[data-theme="dark"] #gallery-olympiad .mm-vault-meta span,
html[data-theme="dark"] #gallery-olympiad .mm-vault-tags span,html[data-theme="dark"] #gallery-mdoc .mm-vault-meta span,html[data-theme="dark"] #gallery-events .mm-vault-meta span,html[data-theme="dark"] #gallery-mdoc .mm-vault-tags span ,html[data-theme="dark"] #gallery-events .mm-vault-tags span {
  background: rgba(255,255,255,.08) !important;
  color: var(--fg) !important;
}

html[data-theme="dark"] #gallery-olympiad .mm-vault-primary {
  background: var(--color-primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] #gallery-olympiad .mm-vault-secondary,
html[data-theme="dark"] #gallery-olympiad .mm-vault-clear,
html[data-theme="dark"] #gallery-olympiad .mm-vault-pagination button {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] #gallery-olympiad .mm-vault-filters input::placeholder {
  color: var(--muted) !important;
}

html[data-theme="dark"] #mmVaultProblemModal .mm-vault-problem-dialog,
html[data-theme="dark"] #mmVaultProblemModal .mm-vault-problem-head,
html[data-theme="dark"] #mmVaultProblemModal .mm-vault-solution {
  border-color: var(--border) !important;
}

html[data-theme="dark"] #mmVaultProblemModal .mm-vault-answer {
  background: rgba(255,255,255,.06) !important;
}


/* Stable top-level feature panels */
.mm-profile-panel{width:100%;min-height:360px;padding:22px 0 40px}
.mm-profile-panel.hidden,.mm-profile-content.hidden{display:none!important}
.mm-profile-shell{width:min(1180px,100%);margin:0 auto;padding:0 14px}
.mm-profile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.mm-profile-head h2{margin:.45rem 0}.mm-profile-head p{margin:0;color:var(--muted);max-width:700px;line-height:1.55}.mm-profile-tabs{display:flex;gap:6px;margin:12px 0 18px;border-bottom:1px solid var(--border);padding-bottom:6px}.mm-profile-tab{border:0;background:transparent;color:inherit;padding:9px 13px;border-radius:9px;cursor:pointer;font-weight:800}.mm-profile-tab.active{background:var(--color-primary);color:#fff}.mm-profile-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:22px;max-width:760px}.mm-profile-card .profile-hero{margin-top:0}.mm-profile-content{width:100%}
@media(max-width:850px){.mm-profile-head{flex-direction:column}}

/* ============================================================
   MPOTD — Marvel Problem of the Day
   Isolated styles: does not alter Olympiad Vault or Profile.
   ============================================================ */
.mpotd-shell {
  width: 100%;
  margin: 0 auto 1rem;
}

.mpotd-shell.hidden { display: none !important; }

.mpotd-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: .25rem 0 1rem;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--bsr-border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 35%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(124,77,255,.12), transparent 32%),
    var(--surface);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.mpotd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.055) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: mpotdShimmer 7s ease-in-out infinite;
}

@keyframes mpotdShimmer {
  0%, 55% { transform: translateX(-100%); }
  75%, 100% { transform: translateX(100%); }
}

.mpotd-hero-icon {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--color-primary), #7e0000);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mpotd-hero-copy { min-width: 0; }
.mpotd-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1.7px;
  color: var(--color-primary);
}
.mpotd-hero h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.05; }
.mpotd-hero p { margin: 4px 0 2px; font-size: 1.08rem; font-weight: 800; }
.mpotd-hero small { color: var(--muted); font-size: .86rem; }
.mpotd-hero-badge {
  margin-left: auto;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #ff1818, #b00000);
  box-shadow: 0 8px 25px rgba(220,0,0,.22);
}

.mpotd-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto 1.15rem;
  padding: 6px;
  border: 1px solid var(--bsr-border);
  border-radius: 18px;
  background: var(--bsr-panel);
  box-shadow: var(--bsr-shadow);
}

.mpotd-tab {
  appearance: none;
  border: 0;
  min-height: 46px;
  border-radius: 13px;
  background: transparent;
  color: var(--bsr-inactive-text);
  font-weight: 850;
  font-size: .94rem;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 0 6px;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.mpotd-tab:hover { transform: translateY(-1px); }
.mpotd-tab.active,
.mpotd-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #860000);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.mpotd-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent); outline-offset: 2px; }

@media (max-width: 600px) {
  .mpotd-hero { padding: 16px; gap: 12px; border-radius: 17px; }
  .mpotd-hero-icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 1.45rem; }
  .mpotd-hero-badge { display: none; }
  .mpotd-hero p { font-size: .96rem; }
  .mpotd-hero small { font-size: .76rem; }
  .mpotd-tabs { gap: 4px; padding: 4px; border-radius: 15px; }
  .mpotd-tab { min-height: 42px; font-size: .76rem; padding: 0 2px; letter-spacing: 0; }
}
@media (max-width: 400px) {
  .mpotd-tab { font-size: .7rem; }
}

/* Olympiad Vault in-page translation controls */
.mm-vault-translation-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.mm-vault-translation-tools span{font-size:.82rem;color:var(--muted,#777)}
.mm-vault-translation{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,var(--surface))}
.mm-vault-translation.hidden{display:none}


/* Compact PDF tile in Regular tab — fixed layout */
.pdf-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.pdf-card-content {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  overflow: hidden !important;
}

.pdf-card .card-title {
  margin: 0 0 5px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pdf-card .card-meta {
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Open button stays on the right, immediately before the PDF logo */
.pdf-card-link {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: .75rem !important;
  white-space: nowrap !important;
  color: var(--color-primary) !important;
  background: color-mix(in oklab, var(--color-primary), transparent 90%) !important;
  transition: transform .18s ease, background .18s ease !important;
  z-index: 3 !important;
}

.pdf-card-link:hover,
.pdf-card-link:focus-visible {
  transform: translateX(2px) !important;
  background: color-mix(in oklab, var(--color-primary), transparent 82%) !important;
}

/* PDF logo is always visible on the far right */
.pdf-card-icon {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 58px !important;
  min-width: 52px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 4 !important;
  border-radius: 8px !important;
  background: #e53935 !important;
  color: #fff !important;
  font: 800 13px/1 Arial, sans-serif !important;
  letter-spacing: .5px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pdf-card-icon span {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pdf-card-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background: rgba(255,255,255,.95) !important;
  clip-path: polygon(0 0,100% 100%,0 100%) !important;
  border-bottom-left-radius: 2px !important;
}

.pdf-card::after {
  content: none !important;
}

.pdf-card:hover .pdf-card-icon {
  transform: translateY(2px);
}

@media (max-width: 520px) {
  .pdf-card {
    gap: 8px !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 8px 9px !important;
  }

  .pdf-card-icon {
    flex-basis: 4px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 50px !important;
    min-height: 50px !important;
    font-size: 0.6875rem !important;
  }

  .pdf-card-link {
    padding: 6px 7px !important;
    font-size: .7rem !important;
  }
}


/* MathsMarvel premium visual layer — theme-aware mathematical atmosphere */
:root {
  --mm-glow-a: rgba(120, 120, 120, .09);
  --mm-glow-b: rgba(255, 0, 0, .05);
  --mm-line: rgba(0, 0, 0, .07);
  --mm-glass: rgba(255,255,255,.72);
}
html[data-theme="dark"] {
  --mm-glow-a: rgba(255, 255, 255, .035);
  --mm-glow-b: rgba(255, 0, 0, .07);
  --mm-line: rgba(255, 255, 255, .06);
  --mm-glass: rgba(15,15,15,.76);
}
body { position: relative; isolation: isolate; background-color: var(--bg); }
body::before, body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; }
body::before {
  background: radial-gradient(ellipse at 8% 12%,var(--mm-glow-a),transparent 34%),
              radial-gradient(ellipse at 92% 24%,var(--mm-glow-b),transparent 35%),
              radial-gradient(ellipse at 52% 100%,var(--mm-glow-a),transparent 38%);
  animation:mm-atmosphere 18s ease-in-out infinite alternate;
}
body::after {
  opacity:.9;
  background-image: linear-gradient(var(--mm-line) 1px,transparent 1px),linear-gradient(90deg,var(--mm-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
@keyframes mm-atmosphere { from { transform:translate3d(-1.2%,0,0) scale(1); } to { transform:translate3d(1.2%,1%,0) scale(1.04); } }
.site-header { background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom-color:color-mix(in srgb,var(--color-primary) 16%,var(--border)); box-shadow:0 10px 35px rgba(15,23,42,.045); }
.mm-brand { display:flex; align-items:center; justify-content:center; gap:12px; padding:5px 70px 9px; min-height:76px; }
.mm-brand-mark { width:55px; height:55px; flex:0 0 auto; overflow:visible; filter:drop-shadow(0 7px 13px rgba(139,92,246,.22)); animation:mm-mark-float 5s ease-in-out infinite; }
.mm-logo-tile { fill:var(--surface); stroke: url(#mmLogoGradient); stroke-width:1.8; }
.mm-logo-grid { fill:none; stroke:var(--muted); stroke-width:.65; opacity:.24; }
.mm-logo-curve { fill:none; stroke:url(#mmLogoGradient); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:120; stroke-dashoffset:0; animation:mm-curve-draw 7s ease-in-out infinite; }
.mm-logo-orbit { fill:none; stroke:var(--color-primary); stroke-width:1.5; stroke-linecap:round; opacity:.65; stroke-dasharray:3 4; animation:mm-orbit 12s linear infinite; transform-origin:32px 32px; }
.mm-logo-node { fill:var(--surface); stroke:var(--color-primary); stroke-width:2; }
.mm-brand-word { display:flex; flex-direction:column; align-items:flex-start; line-height:1; font-size:clamp(2rem,3vw,2.5rem); font-weight:1200; letter-spacing:.095em; }
.mm-brand-word > span:first-child { color:var(--fg); }
.mm-brand-word .accent { color:var(--color-primary); background:linear-gradient(95deg,#ff0000 0%,#ff0000 55%,#ff0000 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.mm-brand-word small { margin-top:6px; font-size:.47rem; letter-spacing:.24em; font-weight:750; color:var(--muted); }
@keyframes mm-mark-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-4px) rotate(2deg); } }
@keyframes mm-curve-draw { 0%,100% { stroke-dashoffset:0; } 50% { stroke-dashoffset:38; } }
@keyframes mm-orbit { to { transform:rotate(360deg); } }
.card { position:relative; border:1px solid color-mix(in srgb,var(--color-primary) 17%,var(--border)); background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--mm-glass)),var(--surface)); box-shadow:0 8px 24px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s; }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 72%); transform:translateX(-110%); }
.card:hover { transform:translateY(-6px) scale(1.012); border-color:color-mix(in srgb,#e00000 48%,var(--color-primary)); box-shadow:0 18px 42px rgba(220,0,0,.13),0 5px 14px rgba(15,23,42,.07); }
.card:hover::before { opacity:1; animation:mm-card-sheen .8s ease forwards; }
@keyframes mm-card-sheen { to { transform:translateX(110%); } }
.bsr-btns,.mpotd-tabs,.regular-subtabs { border-color:color-mix(in srgb,#e00000 22%,var(--border)); box-shadow:0 12px 32px rgba(220,0,0,.08),inset 0 1px 0 rgba(255,255,255,.24); }
.bsr-btn.active,.bsr-btn[aria-selected="true"],.mpotd-tab.active,.regular-subtab.active { background:linear-gradient(115deg,#ff2424,#e00000 62%,#a90000); box-shadow:0 8px 22px rgba(220,0,0,.2); }
.intro { position:relative; }
.intro::after { content:""; display:block; width:clamp(70px,12vw,132px); height:2px; margin:13px auto 0; border-radius:5px; background:linear-gradient(90deg,transparent,#ff2424,#e00000,#a90000,transparent); transform-origin:center; animation:mm-rule-glow 3.5s ease-in-out infinite; }
@keyframes mm-rule-glow { 0%,100% { opacity:.55; transform:scaleX(.78); } 50% { opacity:1; transform:scaleX(1); } }
html[data-theme="dark"] .card { box-shadow:0 12px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035); }
html[data-theme="dark"] .card:hover { box-shadow:0 20px 48px rgba(0,0,0,.36),0 0 0 1px rgba(139,92,246,.12); }
@media(max-width:520px) { .mm-brand { gap:8px; min-height:66px; padding:4px 54px 7px; } .mm-brand-mark { width:43px;height:43px; } .mm-brand-word { font-size:2rem; } .mm-brand-word small { font-size:.39rem;letter-spacing:.16em; } }
@media(prefers-reduced-motion:reduce) { body::before,.mm-brand-mark,.mm-logo-curve,.mm-logo-orbit,.intro::after { animation:none!important; } .card:hover { transform:none; } }

/* ============================================================
   Premium interior styling — Olympiad Vault and Profile
   Theme-aware surfaces; keeps existing navigation and behavior.
   ============================================================ */
#gallery-olympiad .mm-vault-shell,
#gallery-profile .mm-profile-shell{position:relative}
#gallery-olympiad .mm-vault-hero,
#gallery-profile .mm-profile-head,
#gallery-profile .mm-profile-card{
  border:1px solid color-mix(in srgb,var(--border) 72%,var(--color-primary) 10%);
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 91%,var(--color-primary) 9%));
  border-radius:22px;box-shadow:0 14px 38px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.42);
}
#gallery-olympiad .mm-vault-hero{padding:clamp(20px,3vw,30px);align-items:center;position:relative;overflow:hidden}
#gallery-olympiad .mm-vault-hero:after{content:"∫  ∑  π";position:absolute;right:20%;bottom:-28px;font:700 76px/1 Georgia,serif;letter-spacing:.12em;color:var(--color-primary);opacity:.045;pointer-events:none;transform:rotate(-9deg)}
#gallery-olympiad .mm-vault-hero h2,#gallery-profile .mm-profile-head h2{letter-spacing:-.035em;font-weight:850}
#gallery-olympiad .mm-vault-stats{position:relative;z-index:1;min-width:170px;padding:14px 18px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 7px 20px rgba(15,23,42,.045)}
#gallery-profile .mm-profile-tabs{padding:6px;gap:6px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.055);width:max-content;max-width:100%;border-bottom:1px solid var(--border)}
#gallery-profile .mm-profile-tab{border:1px solid transparent;border-radius:11px;padding:10px 17px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
#gallery-profile .mm-profile-tab:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--color-primary) 8%,var(--surface));color:var(--fg)}
#gallery-profile .mm-profile-tab.active{background:var(--color-primary);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--color-primary) 25%,transparent)}
#gallery-olympiad .mm-vault-compact-btn,#gallery-olympiad .mm-vault-filters,
#gallery-olympiad .mm-vault-problem,#gallery-profile .mm-profile-card,#gallery-mdoc .mm-vault-problem ,#gallery-events .mm-vault-problem {
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
#gallery-olympiad .mm-vault-compact-btn{border-radius:12px;padding:10px 15px;font-weight:750}
#gallery-olympiad .mm-vault-problem,#gallery-mdoc .mm-vault-problem ,#gallery-events .mm-vault-problem {border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.055);padding:19px;position:relative;overflow:hidden}
#gallery-olympiad .mm-vault-problem:before,#gallery-mdoc .mm-vault-problem:before ,#gallery-events .mm-vault-problem:before {content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 18%,transparent));opacity:.8}
#gallery-olympiad .mm-vault-problem:hover,#gallery-profile .mm-profile-card:hover,#gallery-mdoc .mm-vault-problem:hover ,#gallery-events .mm-vault-problem:hover {transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 38%,var(--border));box-shadow:0 16px 34px rgba(15,23,42,.11)}
#gallery-olympiad .mm-vault-meta span,#gallery-olympiad .mm-vault-tags span,#gallery-mdoc .mm-vault-meta span,#gallery-events .mm-vault-meta span,#gallery-mdoc .mm-vault-tags span ,#gallery-events .mm-vault-tags span {border:1px solid var(--border);padding:5px 9px;font-weight:650}
#gallery-olympiad .mm-vault-statusbar,#gallery-mdoc .mm-vault-statusbar ,#gallery-events .mm-vault-statusbar {padding:12px 4px;font-weight:650}
#gallery-profile .mm-profile-head{padding:clamp(18px,3vw,27px);align-items:center;margin-bottom:16px}
#gallery-profile .mm-profile-card{max-width:900px;padding:clamp(20px,3vw,30px);background:var(--surface)}
#gallery-profile .profile-hero{display:flex;align-items:center;gap:18px;padding:4px 0 18px;border-bottom:1px solid var(--border)}
#gallery-profile .profile-avatar{width:76px;height:76px;min-width:76px;border-radius:23px;display:grid;place-items:center;font-size:1.8rem;font-weight:900;color:#fff;background:linear-gradient(145deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 65%,#111));box-shadow:0 10px 24px color-mix(in srgb,var(--color-primary) 22%,transparent);border:3px solid color-mix(in srgb,var(--surface) 75%,transparent)}
#gallery-profile #mmProfileDisplayName{font-size:clamp(1.3125rem,3vw,1.8125rem);letter-spacing:-.03em;margin:0 0 4px}
#gallery-profile #mmProfileHandle{margin:0;color:var(--muted);font-weight:600}
#gallery-profile #mmProfileBio{margin:18px 0;color:var(--muted);line-height:1.65}
#gallery-profile .profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
#gallery-profile .profile-stats>div{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface) 82%,var(--color-primary) 4%);text-align:center}
#gallery-profile .profile-stats strong{font-size:clamp(1.3125rem,3vw,1.8125rem);line-height:1.1;color:var(--color-primary);font-variant-numeric:tabular-nums}
#gallery-profile .profile-stats span{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.025em}
#gallery-olympiad button:focus-visible,#gallery-profile button:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 48%,transparent);outline-offset:3px}
@media(max-width:600px){#gallery-profile .mm-profile-tabs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#gallery-profile .profile-stats{gap:7px}#gallery-profile .profile-stats>div{padding:12px 6px}#gallery-profile .profile-avatar{width:62px;height:62px;min-width:62px;border-radius:19px}}
@media(prefers-reduced-motion:reduce){#gallery-olympiad .mm-vault-problem,#gallery-profile .mm-profile-tab,#gallery-profile .mm-profile-card,#gallery-mdoc .mm-vault-problem ,#gallery-events .mm-vault-problem {transition:none}}

/* Logo refinement: single-line wordmark with a mathematical pi orbit */
.mm-brand-word{position:relative;display:flex;flex-direction:row;align-items:center;gap:.32em;white-space:nowrap;line-height:1;font-size:clamp(1.08rem,2.15vw,1.72rem);letter-spacing:.065em;padding-bottom:10px}
.mm-brand-word small{position:absolute;left:0;right:0;bottom:-1px;margin:0;text-align:center;font-size:.39em;letter-spacing:.2em;white-space:nowrap}
.mm-logo-pi{font:700 10px Georgia,serif;fill:var(--color-primary);paint-order:stroke;stroke:var(--surface);stroke-width:1.2px;transform-box:view-box;transform-origin:32px 32px;animation:mm-pi-orbit 8s linear infinite}
@keyframes mm-pi-orbit{to{transform:rotate(360deg)}}
@media(max-width:520px){.mm-brand-word{font-size:clamp(.92rem,4.2vw,1.16rem);gap:.27em;letter-spacing:.045em;padding-bottom:9px}.mm-brand-word small{font-size:.34em;letter-spacing:.15em}}
@media(prefers-reduced-motion:reduce){.mm-logo-pi{animation:none!important}}

/* Final Maths Marvel text-only wordmark */
.mm-brand { gap: 0; }
.mm-brand-word { display:flex; flex-direction:row; align-items:center; gap:.32em; white-space:nowrap; line-height:1; font-size:clamp(2rem,2vw,3rem); font-weight:950; letter-spacing:.065em; padding-bottom:0; }
.mm-brand-word small { display:none !important; }
.mm-brand-word > span:first-child { color:var(--fg); }
.mm-brand-word .accent { color:#e00000; background:none; -webkit-text-fill-color:#e00000; }
@media(max-width:520px){.mm-brand{gap:0;min-height:66px;padding:4px 54px 7px}.mm-brand-word{font: size 1.7em;rem;gap:.27em;letter-spacing:.045em}}

/* Maths Marvel text-only logo animation */
.mm-brand-word {
  animation: mm-text-logo 3.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes mm-text-logo {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-2px) scale(1.025);
    opacity: .96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-brand-word { animation: none !important; }
}

/* ============================================================
   Olympiad Vault: search bar, filters, chips and like button
   (all colours come from the theme variables, so light/dark both work)
   ============================================================ */
.mm-vault-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#gallery-olympiad .mm-vault-toolbar{display:flex;align-items:stretch;gap:8px;margin:6px 0 10px}
#gallery-olympiad .mm-vault-searchbox,#gallery-mdoc .mm-vault-searchbox ,#gallery-events .mm-vault-searchbox {position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
#gallery-olympiad .mm-vault-searchbox input,#gallery-mdoc .mm-vault-searchbox input ,#gallery-events .mm-vault-searchbox input {width:100%;min-height:46px;box-sizing:border-box;padding:0 42px 0 42px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--fg);font:inherit;font-size:0.9375rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
#gallery-olympiad .mm-vault-searchbox input::-webkit-search-cancel-button,#gallery-mdoc .mm-vault-searchbox input::-webkit-search-cancel-button ,#gallery-events .mm-vault-searchbox input::-webkit-search-cancel-button {display:none}
#gallery-olympiad .mm-vault-searchbox input::placeholder,#gallery-mdoc .mm-vault-searchbox input::placeholder ,#gallery-events .mm-vault-searchbox input::placeholder {color:var(--muted);opacity:.85}
#gallery-olympiad .mm-vault-searchbox input:focus,#gallery-mdoc .mm-vault-searchbox input:focus ,#gallery-events .mm-vault-searchbox input:focus {border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 16%,transparent)}
#gallery-olympiad .mm-vault-searchicon,#gallery-mdoc .mm-vault-searchicon ,#gallery-events .mm-vault-searchicon {position:absolute;left:14px;pointer-events:none;opacity:.65;font-size:0.9375rem}
#gallery-olympiad .mm-vault-searchclear,#gallery-mdoc .mm-vault-searchclear ,#gallery-events .mm-vault-searchclear {position:absolute;right:7px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.375rem;line-height:1;cursor:pointer}
#gallery-olympiad .mm-vault-searchclear:hover,#gallery-mdoc .mm-vault-searchclear:hover ,#gallery-events .mm-vault-searchclear:hover {background:color-mix(in srgb,var(--fg) 8%,transparent)}
#gallery-olympiad .mm-vault-searchclear[hidden],#gallery-mdoc .mm-vault-searchclear[hidden] ,#gallery-events .mm-vault-searchclear[hidden] {display:none}
#gallery-olympiad .mm-vault-toolbar .mm-vault-search-btn,
#gallery-olympiad .mm-vault-toolbar .mm-vault-compact-btn{min-height:46px;border-radius:14px;white-space:nowrap}
#gallery-olympiad .mm-vault-toolbar .mm-vault-compact-btn{display:inline-flex;align-items:center;gap:7px}
#gallery-olympiad .mm-vault-toolbar .mm-vault-compact-btn.has-filters{border-color:var(--color-primary)}
.mm-vault-badge{min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;display:inline-grid;place-items:center;border-radius:10px;background:var(--color-primary);color:#fff;font-size:0.6875rem;font-weight:800;line-height:1}
.mm-vault-badge[hidden]{display:none}

/* filter panel now holds only the 4 dropdowns + clear */
#gallery-olympiad .mm-vault-filter-panel{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
#gallery-olympiad .mm-vault-filter-panel[hidden]{display:none}
.mm-vault-note{grid-column:1/-1;margin:2px 0 0;font-size:0.8125rem;color:var(--muted)}
.mm-vault-note[hidden]{display:none}
.mm-vault-note button{border:0;background:none;color:var(--color-primary);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0}

/* active filter chips */
.mm-vault-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.mm-vault-chips[hidden]{display:none}
.mm-vault-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 6px 5px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-size:0.7812rem;font-weight:700;cursor:pointer}
.mm-vault-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.mm-vault-chip b{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--fg) 11%,transparent);font-size:0.8125rem;line-height:1}
.mm-vault-chip:hover{border-color:var(--color-primary)}
.mm-vault-chip-clear{border:0;background:none;color:var(--color-primary);font:inherit;font-size:0.7812rem;font-weight:800;text-decoration:underline;cursor:pointer;padding:4px 6px}

/* cards */
#gallery-olympiad .mm-vault-problem,/* cards */
#gallery-mdoc .mm-vault-problem ,#gallery-events .mm-vault-problem {cursor:pointer}
#gallery-olympiad .mm-vault-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px}
#gallery-olympiad .mm-vault-card-actions .mm-vault-primary{flex:1 1 auto}
.mm-vault-like{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:0.8125rem;font-weight:800;line-height:1;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease}
.mm-vault-like .mm-like-heart{font-size:1.0625rem;line-height:1}
.mm-vault-like:hover{border-color:#e11d2e;color:#e11d2e}
.mm-vault-like:active{transform:scale(.93)}
.mm-vault-like.liked{border-color:#e11d2e;color:#e11d2e;background:color-mix(in srgb,#e11d2e 10%,transparent)}
.mm-vault-like:focus-visible,.mm-vault-chip:focus-visible,.mm-vault-searchclear:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 45%,transparent);outline-offset:2px}
.mm-vault-error-detail{display:block;max-width:520px;margin-top:2px;font-size:0.6875rem;opacity:.55;word-break:break-word}
.mm-vault-pagination button[disabled]{opacity:.45;cursor:default}

@media(max-width:1050px){
  #gallery-olympiad .mm-vault-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  #gallery-olympiad .mm-vault-toolbar{flex-wrap:wrap}
  #gallery-olympiad .mm-vault-searchbox,#gallery-mdoc .mm-vault-searchbox ,#gallery-events .mm-vault-searchbox {flex:1 1 100%}
  #gallery-olympiad .mm-vault-toolbar .mm-vault-search-btn,
  #gallery-olympiad .mm-vault-toolbar .mm-vault-compact-btn{flex:1 1 0;justify-content:center}
  #gallery-olympiad .mm-vault-filter-panel{grid-template-columns:1fr 1fr}
  #gallery-olympiad .mm-vault-card-actions .mm-vault-primary{flex:1 1 100%}
  #gallery-olympiad .mm-vault-card-actions .mm-vault-like,
  #gallery-olympiad .mm-vault-card-actions .mm-vault-secondary{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){.mm-vault-like{transition:none}}


/* ============================================================
   Customize → Themes
   ============================================================ */
/* nav pill + brand word follow the accent (the default red look is left exactly as it was) */
html[data-accent][data-theme]{--bsr-active-grad-start:var(--color-primary);--bsr-active-grad-end:var(--acc-deep)}
html[data-accent][data-theme="dark"]{--bsr-active-grad-start:color-mix(in srgb,var(--color-primary) 75%,#000)}
html[data-accent] .mm-brand-word .accent{color:var(--color-primary);-webkit-text-fill-color:var(--color-primary);background:none}
/* the site's premium layer paints these with fixed reds, so they need accent versions too */
:root{--mm-pill-bg:linear-gradient(115deg,#ff2424,#e00000 62%,#a90000)}
html[data-accent]{--mm-pill-bg:linear-gradient(115deg,color-mix(in srgb,var(--color-primary) 88%,#fff),var(--color-primary) 62%,var(--acc-deep))}
html[data-accent] .bsr-btn.active,html[data-accent] .bsr-btn[aria-selected="true"],html[data-accent] .mpotd-tab.active,html[data-accent] .regular-subtab.active{background:var(--mm-pill-bg);box-shadow:0 8px 22px color-mix(in srgb,var(--color-primary) 28%,transparent)}
html[data-accent] .bsr-btns,html[data-accent] .mpotd-tabs,html[data-accent] .regular-subtabs{border-color:color-mix(in srgb,var(--color-primary) 22%,var(--border));box-shadow:0 12px 32px color-mix(in srgb,var(--color-primary) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.24)}
html[data-accent] .card:hover{border-color:color-mix(in srgb,var(--color-primary) 60%,var(--border));box-shadow:0 18px 42px color-mix(in srgb,var(--color-primary) 16%,transparent),0 5px 14px rgba(15,23,42,.07)}
html[data-accent] .mpotd-hero-badge{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 88%,#fff),var(--acc-deep));box-shadow:0 8px 25px color-mix(in srgb,var(--color-primary) 24%,transparent)}
html[data-accent] .intro::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 88%,#fff),var(--color-primary),var(--acc-deep),transparent)}
html[data-bg="plain"] body::before,html[data-bg="plain"] body::after{display:none}
#gallery-profile{display:block}
#gallery-profile.hidden{display:none!important}

.mm-th{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px 34px;align-items:start;max-width:980px}
.mm-th-group{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.mm-th-group h3{margin:0 0 3px;font-size:1.0625rem;letter-spacing:-.015em}
.mm-th-group p{margin:0 0 12px;color:var(--muted);font-size:0.875rem;line-height:1.5;max-width:52ch}
.mm-th-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mm-th-swatch,.mm-th-seg button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--border);background:var(--surface);text-align:left}
.mm-th-swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:0.875rem;font-weight:700;min-height:46px}
.mm-th-dot{width:22px;height:22px;flex:none;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 35%,transparent)}
.mm-th-swatch:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--border))}
.mm-th-swatch.on{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.mm-th-swatch.on::after{content:"✓";margin-left:auto;font-weight:900;color:var(--color-primary)}
.mm-th-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.mm-th-seg button{border:0;border-radius:0;padding:11px 18px;font-size:0.875rem;font-weight:700;min-height:44px;text-align:center}
.mm-th-seg button + button{border-left:1px solid var(--border)}
.mm-th-seg button.on{background:var(--color-primary);color:#fff}
.mm-th-swatch:focus-visible,.mm-th-seg button:focus-visible,.mm-th-reset:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 45%,transparent);outline-offset:2px}
.mm-th-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.mm-th-reset{font:inherit;font-size:0.875rem;font-weight:750;padding:10px 16px;min-height:44px;border:1px solid var(--border);border-radius:11px;background:transparent;color:inherit;cursor:pointer}
.mm-th-reset:hover{border-color:var(--color-primary)}
.mm-th-actions p{margin:0;font-size:0.8125rem;color:var(--muted)}

.mm-th-preview{position:sticky;top:96px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--bg)}
.mm-th-preview-title{margin:0 0 10px;font-size:0.8125rem;font-weight:750;color:var(--muted)}
.mm-th-pillnav{display:inline-flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:999px;background:var(--bsr-panel);border:1px solid var(--bsr-border);box-shadow:var(--bsr-shadow)}
.mm-th-pillnav span{padding:6px 13px;border-radius:999px;font-size:0.7812rem;font-weight:750;color:var(--bsr-inactive-text)}
.mm-th-pillnav span.on{color:#fff;background:var(--mm-pill-bg)}
.mm-th-card{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--fg)}
.mm-th-card h4{margin:0 0 6px;font-size:1.0625rem}
.mm-th-card p{margin:0 0 10px;color:var(--muted);font-size:0.875rem;line-height:1.5}
.mm-th-chips{display:flex;gap:6px;margin-bottom:12px}
.mm-th-chips span{padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:750;border:1px solid color-mix(in srgb,var(--color-primary) 40%,var(--border));color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 9%,transparent)}
.mm-th-btnrow{display:flex;gap:8px}
.mm-th-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:10px;font-size:0.8438rem;font-weight:750;background:var(--color-primary);color:#fff;border:1px solid var(--color-primary)}
.mm-th-btn.ghost{background:transparent;color:var(--fg);border-color:var(--border)}
@media(max-width:860px){
  .mm-th{grid-template-columns:1fr}
  .mm-th-preview{position:static;order:-1}
  .mm-th-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-th-seg{display:flex}
  .mm-th-seg button{flex:1 1 auto}
}

/* three Customize sub-tabs fit on one row on phones */
@media(max-width:600px){#gallery-profile .mm-profile-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}#gallery-profile .mm-profile-tab{padding:10px 6px;text-align:center}}
@media(max-width:600px){#gallery-profile{padding-bottom:96px}}


/* ===== Problem filters: month navigation, topic/exam chips, random problem ===== */
.mm-filterbar{width:min(780px,100%);margin:0 auto 1.1rem;padding:12px 14px;border:1px solid var(--bsr-border,var(--border,rgba(128,128,128,.25)));border-radius:18px;background:var(--bsr-panel,var(--surface,transparent));display:grid;gap:.65rem}
.mm-filterbar[hidden],.mm-filterbar [hidden]{display:none!important}
.mm-fb-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mm-fb-label{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#667);min-width:5.2rem}
.mm-chips{display:flex;flex-wrap:wrap;gap:.4rem;overflow:visible;padding:2px 0 4px;flex:1 1 220px;min-width:0}
.mm-chips.wrap{flex-wrap:wrap;overflow:visible}
.mm-chip{flex:0 0 auto;border:1px solid var(--border,rgba(128,128,128,.35));background:var(--surface,transparent);color:var(--fg,inherit);border-radius:999px;padding:.34rem .8rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.mm-chip small{opacity:.7;font-weight:700;margin-left:.15rem}
.mm-chip:hover{transform:translateY(-1px)}
.mm-chip:focus-visible,.mm-fb-btn:focus-visible,.mm-jump input:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:2px}
.mm-chip[aria-pressed="true"]{background:var(--color-primary,#ff0000);border-color:transparent;color:#fff}
.mm-jump{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--muted,#667)}
.mm-jump input{font:inherit;font-size:.82rem;padding:.28rem .5rem;border-radius:10px;border:1px solid var(--border,rgba(128,128,128,.35));background:var(--surface,transparent);color:var(--fg,inherit)}
.mm-fb-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
#mmFilterSummary{font-size:.84rem;font-weight:700;color:var(--muted,#667)}
.mm-fb-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.mm-fb-btn{border:1px solid var(--border,rgba(128,128,128,.35));background:var(--surface,transparent);color:var(--fg,inherit);border-radius:999px;padding:.4rem .95rem;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}
.mm-fb-btn.mm-fb-primary{background:var(--color-primary,#ff0000);color:#fff;border-color:transparent}
.mm-filtered-out{display:none!important}
.card-tags{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;margin:.4rem 0 0;padding:0}
.card-tag{font-size:.64rem;font-weight:800;letter-spacing:.02em;padding:.12rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary,#ff0000)}
.mm-pulse{animation:mmPulse 1.6s ease}
@keyframes mmPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.7)}60%{box-shadow:0 0 0 14px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
@media (prefers-reduced-motion:reduce){.mm-pulse{animation:none;outline:3px solid var(--color-primary,#ff0000)}.mm-chip:hover{transform:none}}
@media (max-width:560px){.mm-fb-label{min-width:100%}.mm-fb-actions{width:100%}.mm-fb-btn{flex:1;padding:.45rem .6rem;white-space:nowrap}}

/* Footer brand text (also read by search engines) */
.footer-seo{max-width:640px;margin:0 auto .9rem;font-size:.86rem;line-height:1.55;opacity:.85;text-align:center}
.footer-seo a{color:var(--color-primary,#ff0000);font-weight:700}

/* Collapsible Month / Random problem card (arrow toggle) */
.mm-fb-toggle{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;margin:0;padding:2px 2px;border:0;background:transparent;color:var(--fg,inherit);font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;text-align:left}
.mm-fb-toggle:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:3px;border-radius:10px}
.mm-fb-arrow{flex:0 0 auto;transition:transform .25s ease;color:var(--color-primary,#ff0000)}
.mm-filterbar.collapsed .mm-fb-arrow{transform:rotate(-90deg)}
.mm-fb-body{display:grid;gap:.6rem;margin-top:.7rem}
.mm-filterbar.collapsed .mm-fb-body{display:none}
.mm-filterbar.collapsed{padding-top:10px;padding-bottom:10px}

/* Problem cards follow each image's own dimensions: the whole image is shown, nothing is cropped */
.gallery { align-items: start; }
.gallery .card-figure:not(.mathnet-card-figure) { aspect-ratio: auto; height: auto; margin: 0; } /* margin:0 removes the browser's default <figure> side gaps so the image fills the whole card */
.gallery .card-figure:not(.mathnet-card-figure) .card-img {
  display: block;
  width: 100%;
  height: auto;          /* card height comes from the image's real aspect ratio */
  object-fit: contain;
}

/* Like / Comment / Share / Download row on problem cards */
.card-actions{display:flex;align-items:stretch;justify-content:space-between;gap:2px;padding:4px 6px 6px;border-top:1px solid color-mix(in oklab,var(--border,rgba(128,128,128,.3)),transparent 30%)}
.card-act{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.28rem;padding:.42rem .2rem;border:0;border-radius:10px;background:transparent;color:var(--muted,#667);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease,transform .15s ease}
.card-act:hover{background:color-mix(in oklab,var(--color-primary,#ff0000),transparent 90%);color:var(--color-primary,#ff0000)}
.card-act:active{transform:scale(.94)}
.card-act:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:1px}
.card-act-ic{display:inline-flex}
.card-act.liked{color:#e11d48}
.card-act.liked:hover{background:rgba(225,29,72,.1);color:#e11d48}
.card-act-count{font-variant-numeric:tabular-nums}
.card-act-count[hidden]{display:none}
/* Labels only when the card is wide enough; otherwise icons only, so nothing gets cut off */
.card-actions{container-type:inline-size}
.card-act-txt{display:none}
@container (min-width: 380px){.card-act-txt{display:inline}}

/* ===== Card button animations: every button has its own ===== */
.card-act{position:relative;overflow:visible}
.card-act-ic{position:relative;display:inline-flex;align-items:center;justify-content:center}
.card-act-ic svg{transition:transform .2s ease,opacity .2s ease}

/* tap ripple (colour depends on the button) */
.card-ripple{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;opacity:.5;animation:cardRipple .65s ease-out forwards}
.card-ripple.rp-like{background:#fb7185}
.card-ripple.rp-comment{background:#38bdf8}
.card-ripple.rp-share{background:#a78bfa}
.card-ripple.rp-download{background:#34d399}
@keyframes cardRipple{to{transform:scale(7);opacity:0}}

/* LIKE: heart pops with a bounce + hearts/sparks burst out */
.card-act.anim-like .card-act-ic svg{animation:cardHeartPop .65s cubic-bezier(.2,1.6,.4,1)}
@keyframes cardHeartPop{0%{transform:scale(1)}25%{transform:scale(.55)}55%{transform:scale(1.55) rotate(-8deg)}80%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.card-act.anim-unlike .card-act-ic svg{animation:cardHeartShrink .38s ease}
@keyframes cardHeartShrink{0%{transform:scale(1)}40%{transform:scale(.6)}100%{transform:scale(1)}}
.card-burst{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--c,#fb7185);pointer-events:none;animation:cardBurst .7s ease-out forwards}
@keyframes cardBurst{0%{transform:rotate(var(--a)) translateY(-2px) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-24px) scale(.2);opacity:0}}

/* COMMENT: speech bubble wobbles like a message arriving */
.card-act.anim-comment{color:#0284c7}
.card-act.anim-comment .card-act-ic svg{transform-origin:25% 85%;animation:cardBubble .65s ease}
@keyframes cardBubble{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.35) rotate(-14deg)}40%{transform:scale(1.15) rotate(10deg)}60%{transform:scale(1.25) rotate(-6deg)}80%{transform:scale(1.05) rotate(3deg)}100%{transform:scale(1) rotate(0)}}

/* SHARE: arrow shoots up and comes back in from below */
.card-act.anim-share{color:#7c3aed}
.card-act.anim-share .card-act-ic{overflow:hidden;height:22px;padding:2px 0}
.card-act.anim-share .card-act-ic svg{animation:cardFly .75s cubic-bezier(.5,0,.3,1)}
@keyframes cardFly{0%{transform:translateY(0);opacity:1}38%{transform:translateY(-22px) scale(.8);opacity:0}39%{transform:translateY(22px) scale(.8);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}

/* DOWNLOAD: arrow drops down, then turns into a tick */
.card-act[data-act="download"] .ic-tick{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.3)}
.card-act.anim-download{color:#059669}
.card-act.anim-download .ic-main{animation:cardDrop .8s cubic-bezier(.5,0,.3,1)}
@keyframes cardDrop{0%{transform:translateY(0)}30%{transform:translateY(-4px)}60%{transform:translateY(7px)}100%{transform:translateY(0)}}
.card-act.done{color:#059669}
.card-act.done .ic-main{opacity:0;transform:scale(.3)}
.card-act.done .ic-tick{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.2,1.6,.4,1),opacity .2s ease}

@media (prefers-reduced-motion:reduce){.card-ripple,.card-burst{display:none}.card-act .card-act-ic svg{animation:none!important}}


/* ============================================================
   Typography
   BM Parabolica is a capitals-only display face, so it is used ONLY for
   uppercase brand/tab text. Everything readable stays in the fallback family.
   ============================================================ */
@font-face{font-family:"BM Parabolica";font-weight:400;font-style:normal;font-display:block;src:url("fonts/BMParabolica-Regular.woff2") format("woff2")}
/* Switzer (optional): to use it, put Switzer-Variable.woff2 (free from fontshare.com) in the fonts folder and remove the comment marks around the next line. Until then Hanken Grotesk is used. */
/* @font-face{font-family:"Switzer";font-weight:100 900;font-style:normal;font-display:swap;src:url("fonts/Switzer-Variable.woff2") format("woff2")} */

:root {
  --mm-font-display: "BM Parabolica", "Hanken Grotesk", system-ui, sans-serif;
  --mm-font-body: "Switzer", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mm-ease: cubic-bezier(.22, 1, .36, 1);
}
body { font-family: var(--mm-font-body); }
.mm-brand-word, .title, .bsr-btn { font-family: var(--mm-font-display); font-weight: 400; font-synthesis-weight: none; text-transform: uppercase; }
.mm-brand-word, .title { letter-spacing: .03em; }
.bsr-btn { letter-spacing: .05em; font-size: .8rem; }
.intro { letter-spacing: .01em; }

/* Entrance choreography: waits for the loader curtain (body.mm-ready) */
@keyframes mm-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mm-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

.mm-ready .site-header { animation: mm-drop .9s var(--mm-ease) .55s backwards; }
.mm-ready .bsr-toggle, .mm-ready .mm-search-only { animation: mm-rise .8s var(--mm-ease) .85s backwards; }
.mm-ready .card { animation: mm-rise .75s var(--mm-ease) backwards; }
.mm-ready .card:nth-child(1) { animation-delay: 1.0s; }
.mm-ready .card:nth-child(2) { animation-delay: 1.08s; }
.mm-ready .card:nth-child(3) { animation-delay: 1.16s; }
.mm-ready .card:nth-child(4) { animation-delay: 1.24s; }
.mm-ready .card:nth-child(5) { animation-delay: 1.32s; }
.mm-ready .card:nth-child(6) { animation-delay: 1.4s; }
.mm-ready .card:nth-child(n+7) { animation-delay: 1.48s; }
/* hold the existing intro fade until the curtain has lifted */
html.mm-loading .intro { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mm-ready .site-header, .mm-ready .bsr-toggle, .mm-ready .mm-search-only, .mm-ready .card { animation: none !important; }
}


/* ============================================================
   Diamond theme (default): near-black surfaces + red accent
   (picked from Customize > Themes; switches to dark automatically)
   ============================================================ */
html[data-accent="diamond"]{--color-primary:#ff0000;--acc-deep:#a30000;--mm-frame:#0F0F0F}
html[data-accent="diamond"][data-theme="dark"]{
  --bg:#0F0F0F;--surface:#151618;--fg:#DEDEDE;--muted:#8E8E95;
  --border:#2A2B2F;--bsr-panel:#151618;--bsr-border:rgba(255,255,255,.07);--bsr-inactive-text:#DEDEDE;
  --mm-frame:#1D1D21;
}
html[data-accent="diamond"] .mm-brand-word>span:first-child{color:var(--fg)}

/* ============================================================
   Framed page edges (desktop): top / left / right
   ============================================================ */
.mm-frame{display:none}
@media (min-width:900px){
  .mm-frame{display:block;position:fixed;inset:0;z-index:9;pointer-events:none;
    border:clamp(6px,.7vw,10px) solid var(--mm-frame,#0F0F0F);border-bottom:0;opacity:0;transition:opacity .8s ease .9s}
  .mm-ready .mm-frame{opacity:1}
}
html.mm-loading .mm-frame{opacity:0}

/* ============================================================
   Scroll reveal for cards below the fold
   ============================================================ */
.mm-rv{opacity:0}
.mm-rv.mm-rv-in{opacity:1;animation:mm-rise .75s var(--mm-ease) backwards}
@media (prefers-reduced-motion:reduce){.mm-rv{opacity:1}.mm-rv.mm-rv-in{animation:none}}


/* ============================================================
   Bottom navigation: slim dark bar, fixed
   ============================================================ */
:root{--mm-bnav-h:44px;--mm-mbar-h:60px}
.mm-bnav,.mm-mbar{font-family:var(--mm-font-body);text-transform:uppercase}
.mm-bnav{display:none}
.mm-bnav ul{list-style:none;margin:0;padding:0}
@media (min-width:768px){
  body{padding-bottom:calc(var(--mm-bnav-h) + env(safe-area-inset-bottom,0px))}
  .whatsapp-wrap{bottom:calc(var(--mm-bnav-h) + 16px)!important}
  .mm-bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;height:calc(var(--mm-bnav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    background:#0F0F0F;border-top:1px solid #1c1c1f;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .7s cubic-bezier(.22,1,.36,1) .9s}
  .mm-ready .mm-bnav{transform:none}
  .mm-bnav-inner{display:flex;width:100%;align-items:center;justify-content:center;gap:32px;padding:0 64px}
  .mm-bnav-links{display:flex;flex:1;gap:32px}
  .mm-bnav-left{justify-content:flex-end}.mm-bnav-right{justify-content:flex-start}
  .mm-bnav a,.mm-bnav button{font-family:inherit;text-transform:uppercase}
  .mm-bnav-links a{position:relative;display:inline-flex;height:40px;align-items:center;color:#DEDEDE;font-size:0.8125rem;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
  .mm-bnav-links a::after,.mm-bnav-cta>*::after{content:"";position:absolute;bottom:4px;left:0;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
  .mm-bnav-links a:hover::after,.mm-bnav-links a[aria-current="page"]::after{transform:scaleX(1)}
  .mm-bnav-links a::after{background:#fff}
  .mm-bnav-cta{display:inline-flex;flex:none;height:36px;align-items:stretch;border:1px solid #DEDEDE}
  .mm-bnav-cta>*{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:132px;padding:0 18px;border:0;cursor:pointer;font-size:0.8125rem;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
  .mm-bnav-cta>*::after{left:20px;width:calc(100% - 40px);bottom:5px}
  .mm-bnav-cta>*:hover::after,.mm-bnav-cta>[aria-current="page"]::after{transform:scaleX(1)}
  .mm-bnav-cta .is-fill{background:#DEDEDE;color:#151618}
  .mm-bnav-xy{position:absolute;left:16px;font-size:0.625rem;letter-spacing:-.01em;color:#c4c4c4;font-variant-numeric:tabular-nums}
  .mm-bnav-xy b{font-weight:800}
  .mm-bnav-top{position:absolute;right:16px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:#7d7d7d;cursor:pointer;transition:color .2s}
  .mm-bnav-top:hover{color:#DEDEDE}
  .mm-bnav a:focus-visible,.mm-bnav button:focus-visible{outline:2px solid #ff4d4d;outline-offset:2px}
}
@media (min-width:768px) and (max-width:1000px){.mm-bnav-inner{padding:0 40px;gap:18px}.mm-bnav-links{gap:18px}.mm-bnav-cta>*{min-width:104px}.mm-bnav-xy{display:none}}

/* Mobile: every item sits directly in the bottom bar (no side menu) */
.mm-mbar{display:none}
@media (max-width:767.98px){
  body{padding-bottom:calc(var(--mm-mbar-h) + env(safe-area-inset-bottom,0px))}
  .whatsapp-wrap{bottom:calc(var(--mm-mbar-h) + 16px)!important}
  .mm-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;height:calc(var(--mm-mbar-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    background:#0F0F0F;border-top:1px solid #1c1c1f;transform:translateY(100%);transition:transform .7s cubic-bezier(.22,1,.36,1) .9s}
  .mm-ready .mm-mbar{transform:none}
  .mm-mbar>*{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:0;background:transparent;cursor:pointer;
    color:#9a9aa1;font-family:inherit;font-size:0.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s}
  .mm-mbar>*::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:#DEDEDE;transform:scaleX(0);transition:transform .2s}
  .mm-mbar>*:active,.mm-mbar>[aria-current="page"]{color:#DEDEDE}
  .mm-mbar>[aria-current="page"]::before{transform:scaleX(1)}
  .mm-mbar svg{flex:none}
}
@media (prefers-reduced-motion:reduce){.mm-bnav,.mm-mbar{transition:none}}

/* Keep tab labels on one line on small phones (caps display font is wide) */
@media (max-width:520px){
  .bsr-btn{font-size:.62rem;letter-spacing:.02em;white-space:nowrap;padding-left:.55rem;padding-right:.55rem}
}

/* Tabs live in the bottom navigation now; the in-page pill stays in the DOM (the nav drives it) but is not shown */
.bsr-toggle{display:none!important}
@media (max-width:380px){.mm-mbar>*{font-size:0.5625rem;letter-spacing:.01em}}


/* ============================================================
   About page
   ============================================================ */
.mm-about{width:100%;padding:28px 0 48px;display:flex;flex-direction:column;gap:clamp(28px,5vw,48px)}
.mm-about.hidden{display:none!important}
.mm-ab-hero{text-align:center;max-width:46rem;margin:0 auto}
.mm-ab-kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:0.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mm-ab-hero h2{margin:14px 0 12px;font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05}
.mm-ab-acc{color:var(--color-primary)}
.mm-ab-hero p{color:var(--muted);line-height:1.7;font-size:clamp(.95rem,2vw,1.08rem)}
.mm-ab-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mm-ab-fact{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.mm-ab-fact strong{font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:1.35rem;color:var(--color-primary)}
.mm-ab-fact span{color:var(--muted);font-size:.92rem}
.mm-ab-block h3{margin:0 0 16px;font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.4rem,3.4vw,2rem)}
.mm-ab-me,.mm-ab-person{border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.mm-ab-me{display:flex;gap:22px;align-items:flex-start;padding:clamp(18px,3vw,28px)}
.mm-ab-avatar{flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--acc-deep,var(--color-primary)));color:#fff;font-weight:800;font-size:1.6rem}
.mm-ab-avatar img{width:100%;height:100%;object-fit:cover}
.mm-ab-txt h4,.mm-ab-person h4{margin:0;font-size:1.15rem}
.mm-ab-txt em,.mm-ab-person em{display:block;margin:2px 0 8px;color:var(--color-primary);font-style:normal;font-weight:700;font-size:.85rem}
.mm-ab-txt p,.mm-ab-person p{margin:0;color:var(--muted);line-height:1.65;font-size:.95rem}
.mm-ab-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mm-ab-person{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .2s}
.mm-ab-person:hover{transform:translateY(-4px);border-color:var(--color-primary)}
.mm-ab-person .mm-ab-avatar{width:64px;height:64px;font-size:1.2rem;margin-bottom:12px}
.mm-ab-soc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.mm-ab-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--fg);text-decoration:none;transition:border-color .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.mm-ab-link:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.mm-ab-link strong{display:block}.mm-ab-link small{display:block;margin-top:2px;color:var(--muted);font-size:.8rem}
.mm-ab-link b{color:var(--color-primary);font-size:1.2rem}
@media (max-width:560px){.mm-ab-me{flex-direction:column}}
.mm-about{align-items:stretch;justify-items:stretch;grid-template-columns:none}
.mm-about>*{align-self:stretch;width:100%;min-width:0;max-width:100%}
.mm-ab-hero{margin-left:auto;margin-right:auto}

.mm-ab-pfp{display:block;width:clamp(120px,22vw,168px);height:auto;aspect-ratio:1;margin:0 auto 18px;border-radius:50%;object-fit:cover;background:#000;
  border:3px solid var(--color-primary);box-shadow:0 0 0 6px color-mix(in srgb,var(--color-primary) 18%,transparent),0 18px 40px rgba(0,0,0,.28)}
.mm-ab-link{justify-content:flex-start}
.mm-ab-link>span:not(.mm-ab-ico){flex:1;min-width:0}
.mm-ab-ico{flex:none;display:inline-flex;width:40px;height:40px}.mm-ab-ico svg{width:100%;height:100%}
.mm-ab-link b{margin-left:auto}
.mm-ab-closing{margin-top:6px;padding:clamp(22px,5vw,44px);text-align:center;border:1px solid var(--border);border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 10%,var(--surface)),var(--surface))}
.mm-ab-closing[hidden]{display:none}
.mm-ab-closing p{margin:0 auto;max-width:44rem;font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:1.25;font-size:clamp(1.25rem,3.6vw,2.2rem)}

/* Search bar + archive link belong to MPOTD only */
html[data-view]:not([data-view="mpotd"]) .mm-search-only,
html[data-view]:not([data-view="mpotd"]) .intro,
html[data-view]:not([data-view="mpotd"]) .mm-only-mpotd{display:none!important}

/* Two-word labels (Olympiad Vault, About ME) may wrap to two lines on the phone bar */
@media (max-width:767.98px){.mm-mbar>*{text-align:center;line-height:1.15;justify-content:flex-start;padding-top:9px}.mm-mbar>* span{white-space:normal;max-width:92%}}


/* Top-right light/dark switch is hidden: light/dark now lives in Customize > Themes (the element stays so the theme code keeps working) */
.controls{display:none!important}


/* ============================================================
   Paper theme: warm cream paper, ink text, crimson accent, serif body
   ============================================================ */
html[data-accent="paper"]{--color-primary:#c1121f;--acc-deep:#7d0b13;--mm-frame:#231c14;--radius:8px;
  --mm-font-body:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
html[data-accent="paper"] input,html[data-accent="paper"] button,html[data-accent="paper"] select,html[data-accent="paper"] textarea{font-family:inherit}
html[data-accent="paper"][data-theme="light"]{--bg:#f4eee2;--fg:#231c14;--muted:#7a6f60;--surface:#fffaf0;--border:#ded3bf;--bsr-panel:#fffaf0;--bsr-border:rgba(35,28,20,.08);--bsr-inactive-text:#231c14;
  --mm-glow-a:rgba(193,143,60,.10);--mm-glow-b:rgba(193,18,31,.05);--mm-line:rgba(120,90,40,.13);--mm-glass:rgba(255,250,240,.78)}
html[data-accent="paper"][data-theme="dark"]{--color-primary:#e5383b;--bg:#16130f;--fg:#eadfce;--muted:#a09481;--surface:#1d1914;--border:#342d23;--bsr-panel:#1d1914;--bsr-border:rgba(234,223,206,.07);--bsr-inactive-text:#eadfce;
  --mm-glow-a:rgba(193,143,60,.08);--mm-glow-b:rgba(229,56,59,.07);--mm-line:rgba(234,223,206,.06);--mm-glass:rgba(29,25,20,.78);--mm-frame:#2a241c}
html[data-accent="paper"] .site-header{box-shadow:0 2px 0 color-mix(in srgb,var(--fg) 8%,transparent)}

/* ============================================================
   Red restraint: red is kept for the brand name, primary buttons,
   the selected tab/segment and check marks. Everything else is neutral.
   ============================================================ */
html[data-accent]{--mm-hover-line:color-mix(in srgb,var(--fg) 28%,var(--border))}
:root,html[data-theme]{--mm-glow-b:rgba(128,128,128,.05)}
html[data-accent] .site-header{border-bottom-color:var(--border)}
html[data-accent] .intro::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 35%,transparent),transparent);box-shadow:none}
html[data-accent] .card{border-color:var(--border);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--fg) 5%))}
html[data-accent] .card:hover{border-color:var(--mm-hover-line);box-shadow:0 18px 42px rgba(0,0,0,.14),0 5px 14px rgba(0,0,0,.08)}
html[data-accent] .bsr-btns,html[data-accent] .mpotd-tabs,html[data-accent] .regular-subtabs{border-color:var(--border);box-shadow:0 10px 28px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.08)}
/* hero panels + badges */
html[data-accent] .mpotd-hero{border-color:var(--border);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--fg) 6%))}
html[data-accent] .mpotd-hero-icon{background:linear-gradient(135deg,#2b2b2f,#111);box-shadow:0 10px 24px rgba(0,0,0,.18)}
html[data-accent] .mpotd-hero-badge,html[data-accent] .feature-badge{background:var(--fg);color:var(--bg);box-shadow:none}
#gallery-olympiad .mm-vault-hero,#gallery-profile .mm-profile-head,#gallery-profile .mm-profile-card{border-color:var(--border);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--fg) 5%))}
#gallery-olympiad .mm-vault-problem:before,#gallery-mdoc .mm-vault-problem:before ,#gallery-events .mm-vault-problem:before {background:var(--border);opacity:1}
#gallery-olympiad .mm-vault-problem:hover,#gallery-profile .mm-profile-card:hover,#gallery-mdoc .mm-vault-problem:hover ,#gallery-events .mm-vault-problem:hover {border-color:var(--mm-hover-line);box-shadow:0 16px 34px rgba(0,0,0,.12)}
#gallery-profile .profile-avatar{background:linear-gradient(145deg,#2b2b2f,#111);box-shadow:0 10px 24px rgba(0,0,0,.2)}
#gallery-profile .profile-stats>div{background:color-mix(in srgb,var(--surface) 94%,var(--fg) 6%)}
#gallery-profile .profile-stats strong{color:var(--fg)}
/* chips, links, arrows */
html[data-accent] .card-tag{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--muted)}
.mm-th-chips span{border-color:var(--border);color:var(--muted);background:transparent}
.footer-seo a{color:var(--fg);text-decoration:underline}
.mm-fb-arrow,.saved-empty-icon{color:var(--muted)}
.mm-vault-note button,.mm-vault-chip-clear{color:var(--fg)}
.card-act:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.pdf-card-link{color:var(--fg)!important;background:color-mix(in oklab,var(--fg),transparent 92%)!important}
.pdf-card-link:hover,.pdf-card-link:focus-visible{background:color-mix(in oklab,var(--fg),transparent 85%)!important}
.comment-card::before{background:var(--border)}
.mm-menu-toggle:hover,.mm-side-nav .mm-tool:hover,.saved-item:hover,.saved-item:focus-visible,.mm-vault-compact-btn:hover,.mm-vault-chip:hover,.mm-th-reset:hover,
#gallery-olympiad .mm-vault-toolbar .mm-vault-compact-btn.has-filters,.mm-ab-link:hover{border-color:var(--mm-hover-line)}
.mm-vault-compact-btn.active{background:color-mix(in srgb,var(--fg) 8%,var(--surface));border-color:var(--mm-hover-line)}
/* About page */
.mm-ab-kicker{background:transparent;color:var(--muted);border:1px solid var(--border)}
.mm-ab-fact strong{color:var(--fg)}
.mm-ab-link b{color:var(--muted)}
.mm-ab-pfp{border:3px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.mm-ab-closing{background:var(--surface)}
.copyright .year{color:inherit!important;font-weight:700}

/* Topic / exam filter row is not shown in "Month & Random problem" */
#mmTagRow{display:none!important}

/* ============================================================
   Night view for problem images (night-view.js sets html[data-night])
   Dim: softens the white background. Invert: dark background, light ink; hue-rotate keeps diagram colours roughly true.
   ============================================================ */
#modalImg, .card-img { transition: filter .25s ease; }
html[data-night="dim"] #modalImg,
html[data-night="dim"] .card-img { filter: brightness(.82) contrast(.95); }
html[data-night="invert"] #modalImg,
html[data-night="invert"] .card-img { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92); }
html[data-night="invert"] .card-figure { background: #111; }
.mm-fb-head { display: flex; align-items: center; gap: .6rem; }
.mm-fb-head .mm-fb-toggle { flex: 1 1 auto; min-width: 0; width: auto; }
.mm-night-btn { flex: 0 0 auto; white-space: nowrap; padding: .34rem .8rem; }
.mm-night-btn[aria-pressed="true"] { background: #facc15; color: #1a1a1a; border-color: transparent; }
@media (max-width: 420px) { .mm-fb-head .mm-fb-toggle-title { font-size: .8rem; } .mm-night-btn { padding: .3rem .6rem; font-size: .78rem; } }

/* About tab: the large "Maths Marvel" title is hidden (kept for screen readers and search engines). */
.mm-ab-hero h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mm-ab-kicker{margin-bottom:14px}

/* ============================================================
   "How to use" tour (onboarding.js)
   ============================================================ */
.mm-howto-wrap{display:flex;justify-content:center;margin:.2rem 0 .9rem}
.mm-howto-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem .3rem .35rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-size:.8rem;cursor:pointer;transition:transform .15s,border-color .15s}
.mm-howto-btn span{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:900;font-size:.85rem}
.mm-howto-btn b{font-weight:800}
.mm-howto-btn:hover{border-color:var(--color-primary);transform:translateY(-1px)}
.mm-howto-btn:focus-visible,.mm-tour button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.mm-tour[hidden]{display:none!important}
.mm-tour{position:fixed;inset:0;z-index:10050}
.mm-tour-block{position:absolute;inset:0}                       /* swallows taps so nothing behind is triggered mid-tour */
.mm-tour.mm-tour-dim .mm-tour-block{background:rgba(2,6,23,.62)}
.mm-tour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(2,6,23,.62),0 0 0 3px var(--color-primary);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;pointer-events:none}
.mm-tour-card{position:fixed;width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:16px 16px 14px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--fg);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.mm-tour-step{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)}
.mm-tour-title{margin:.25rem 0 .4rem;font-size:1.1rem;line-height:1.25}
.mm-tour-text{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.mm-tour-dots{display:flex;gap:5px;margin:.8rem 0 .2rem}
.mm-tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--border)}
.mm-tour-dots i.on{width:20px;border-radius:99px;background:var(--color-primary)}
.mm-tour-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.7rem}
.mm-tour-nav{display:flex;gap:.5rem}
.mm-tour button{font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;border-radius:999px;padding:.5rem 1rem}
.mm-tour-skip{border:0;background:transparent;color:var(--muted);padding-left:.2rem!important}
.mm-tour-back{border:1px solid var(--border);background:transparent;color:var(--fg)}
.mm-tour-next{border:0;background:var(--color-primary);color:#fff}
@media (prefers-reduced-motion:reduce){.mm-tour-spot{transition:none}}

/* ===== Olympiad Vault: Play tab ===== */
.mm-vault-tabs{display:flex;gap:8px;margin:0 0 14px}
.mm-vault-tab{flex:1;min-height:46px;border:1px solid var(--border-color,#ccc);border-radius:12px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.mm-vault-tab.active{background:var(--color-primary,#111);border-color:var(--color-primary,#111);color:#fff}
.mm-play[hidden],.mm-play [hidden],#mmVaultProblemsPanel[hidden]{display:none!important}
.mm-play-card{max-width:760px;margin:0 auto;padding:20px;border:1px solid var(--border-color,#ddd);border-radius:18px;background:var(--card-bg,transparent)}
.mm-play-home{text-align:center;padding:36px 20px}
.mm-play-home h3{margin:6px 0 4px;font-size:clamp(1.5rem,5vw,2.125rem)}
.mm-play-home p{margin:6px 0;opacity:.75}
.mm-play-emoji{font-size:3rem}
.mm-play-big{min-height:54px;padding:12px 38px;font-size:1.125rem;font-weight:800;margin-top:12px}
.mm-play-error{color:#c62828;opacity:1!important}
.mm-play-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.mm-play-bar{height:6px;border-radius:99px;background:rgba(127,127,127,.2);margin:12px 0;overflow:hidden}
.mm-play-bar i{display:block;height:100%;width:0;background:var(--color-primary,#111);transition:width .3s}
.mm-play-source{display:block;opacity:.65;margin-bottom:8px}
.mm-play-problem{padding:6px 0 14px;overflow-x:auto}
.mm-play-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-play-opt{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;text-align:left;border:2px solid var(--border-color,#ccc);border-radius:14px;background:transparent;color:inherit;font:inherit;font-size:1.0625rem;cursor:pointer;transition:border-color .15s,background .15s}
.mm-play-opt:hover:not(:disabled){border-color:var(--color-primary,#111)}
.mm-play-opt b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(127,127,127,.18);font-size:0.875rem}
.mm-play-opt span p{margin:0;display:inline}
.mm-play-opt:disabled{cursor:default}
.mm-play-opt.is-right{border-color:#2e9d4f;background:rgba(46,157,79,.16)}
.mm-play-opt.is-wrong{border-color:#d33;background:rgba(220,50,50,.14)}
.mm-play-feedback{margin-top:14px;padding:12px 14px;border-radius:12px;font-weight:700}
.mm-play-feedback.good{background:rgba(46,157,79,.14)}.mm-play-feedback.bad{background:rgba(220,50,50,.12)}
.mm-play-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mm-play-home .mm-play-actions{justify-content:center}
@media (max-width:560px){.mm-play-options{grid-template-columns:1fr}.mm-play-card{padding:14px}}

/* ===== Play: full-screen game layer + animations ===== */
html.mm-play-lock,html.mm-play-lock body{overflow:hidden}
.mm-play-game[hidden]{display:none!important}
.mm-play-game{position:fixed;inset:0;z-index:20000;background:var(--bg,#fff);color:var(--fg,inherit);overflow-y:auto;overscroll-behavior-y:contain;overscroll-behavior-x:auto;
  background-image:radial-gradient(ellipse at 15% 10%,rgba(255,0,0,.10),transparent 40%),radial-gradient(ellipse at 90% 85%,rgba(80,120,255,.10),transparent 45%)}
.mm-play-game.open{animation:mmPlayIn .38s cubic-bezier(.2,.8,.2,1)}
.mm-play-game-inner{min-height:100%;display:flex;flex-direction:column;justify-content:center;max-width:860px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.mm-play-game .mm-play-card{width:100%;max-width:none;border:0;background:transparent;padding:10px 4px}
.mm-play-game .mm-play-problem{font-size:clamp(1.0625rem,2.6vw,1.375rem)}
.mm-play-game .mm-play-opt{min-height:64px;font-size:clamp(1.0625rem,2.4vw,1.3125rem)}
.mm-play-chips{display:flex;align-items:center;gap:8px}
.mm-play-chips>span{padding:4px 12px;border-radius:99px;background:rgba(127,127,127,.16)}
.mm-play-streak{background:linear-gradient(115deg,#ff9f1a,#ff4d4d)!important;color:#fff}
.mm-play-flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:1}
.mm-play-flash.good{animation:mmFlashGood .6s ease-out}
.mm-play-flash.bad{animation:mmFlashBad .6s ease-out}
.mm-play-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.mm-play-game-inner{position:relative;z-index:2}
.mm-p{position:absolute;width:9px;height:9px;border-radius:2px;animation:mmBurst 1.1s cubic-bezier(.15,.7,.3,1) forwards}
.mm-rain{position:absolute;top:-24px;width:10px;height:14px;border-radius:2px;font-size:1.25rem;line-height:1;animation:mmRain 3s linear forwards}
.mm-float{position:absolute;transform:translate(-50%,-50%);font-size:1.625rem;white-space:nowrap;animation:mmFloat 1.2s ease-out forwards;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.mm-float.good{color:#2ecc71}.mm-float.bad{color:#ff4d4d}
.mm-slide{animation:mmSlide .35s cubic-bezier(.2,.8,.2,1)}
.mm-shake{animation:mmShake .45s}
.mm-pop{animation:mmPop .4s cubic-bezier(.3,1.6,.5,1)}
.mm-bounce{animation:mmBounce .9s cubic-bezier(.3,1.5,.5,1)}
.mm-play-opt.celebrate{animation:mmCelebrate .6s cubic-bezier(.3,1.6,.5,1)}
.mm-play-opt.wobble{animation:mmWobble .5s}
.mm-play-feedback:not([hidden]){animation:mmSlide .3s}
#mmPlayResult h3{font-size:clamp(2.75rem,12vw,5.25rem);margin:8px 0}
#mmPlayResult .mm-play-emoji{font-size:5.25rem;display:inline-block}
@keyframes mmPlayIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes mmSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mmShake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes mmPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes mmBounce{0%{transform:scale(.2) rotate(-12deg);opacity:0}60%{transform:scale(1.25) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes mmCelebrate{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes mmWobble{0%,100%{transform:none}25%{transform:rotate(-2deg) translateX(-6px)}75%{transform:rotate(2deg) translateX(6px)}}
@keyframes mmFlashGood{0%{opacity:.9;box-shadow:inset 0 0 120px 30px rgba(46,204,113,.55)}100%{opacity:0}}
@keyframes mmFlashBad{0%{opacity:.9;box-shadow:inset 0 0 120px 30px rgba(255,60,60,.55)}100%{opacity:0}}
@keyframes mmBurst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes mmRain{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.9}}
@keyframes mmFloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
@media (prefers-reduced-motion:reduce){.mm-play-game *,.mm-play-game{animation:none!important;transition:none!important}}

/* ===== Play: setup screen ===== */
.mm-play-setup{text-align:center}
.mm-play-setup h3{font-size:clamp(1.625rem,6vw,2.375rem);margin:10px 0 6px}
.mm-play-label{margin:22px 0 10px;font-weight:700;opacity:.85}
.mm-play-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto}
.mm-play-choices.three{grid-template-columns:repeat(3,1fr)}
.mm-play-choices button{min-height:58px;border:2px solid var(--border-color,#ccc);border-radius:14px;background:transparent;color:inherit;font:inherit;font-size:1.1875rem;font-weight:800;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.mm-play-choices button:hover{border-color:var(--color-primary,#111)}
.mm-play-choices button[aria-checked="true"]{background:var(--color-primary,#111);border-color:var(--color-primary,#111);color:#fff;transform:scale(1.05)}
.mm-play-setup .mm-play-big{margin-top:26px}
.mm-play-note{font-size:0.8125rem;opacity:.6;margin:12px 0 0}
@media (max-width:420px){.mm-play-choices.three button{font-size:max(1rem,16px)}}

/* ===== Play: translate button ===== */
.mm-play-translate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.mm-play-translate button{min-height:40px;font-weight:700}
.mm-play-translate small{opacity:.65}


/* ============================================================
   Customize > Accessibility
   (attributes on <html>: data-a11y-size / -motion / -font)
   ============================================================ */
/* --- Text size: all text sizes are rem-based, so scaling the root scales the site --- */
html[data-a11y-size="85"]{font-size:85%}
html[data-a11y-size="90"]{font-size:90%}
html[data-a11y-size="95"]{font-size:95%}
html[data-a11y-size="105"]{font-size:105%}
html[data-a11y-size="110"]{font-size:110%}
html[data-a11y-size="115"]{font-size:115%}
html[data-a11y-size="120"]{font-size:120%}
html[data-a11y-size="125"]{font-size:125%}
html[data-a11y-size="130"]{font-size:130%}
html[data-a11y-size="135"]{font-size:135%}
html[data-a11y-size="140"]{font-size:140%}
html[data-a11y-size="145"]{font-size:145%}
html[data-a11y-size="150"]{font-size:150%}
html[data-a11y-size]{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* --- Slider on the Accessibility tab --- */
.mm-a11y-slider{display:flex;align-items:center;gap:12px;max-width:460px}
.mm-a11y-slider input[type=range]{flex:1 1 auto;min-width:0;min-height:44px;margin:0;accent-color:var(--color-primary);cursor:pointer}
.mm-a11y-a{font-weight:800;color:var(--muted);line-height:1}
.mm-a11y-a.small{font-size:.8rem}.mm-a11y-a.big{font-size:1.5rem}
.mm-a11y-slider output{min-width:3.4em;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#mmA11ySize:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 45%,transparent);outline-offset:3px;border-radius:8px}
.mm-profile-tabs{overflow-x:auto;scrollbar-width:none}.mm-profile-tabs::-webkit-scrollbar{display:none}.mm-profile-tab{white-space:nowrap;flex:0 0 auto}
@media(max-width:480px){.mm-profile-tabs{gap:4px}.mm-profile-tab{padding:9px 10px;font-size:.84rem}}

/* --- Reduce animations --- */
html[data-a11y-motion="reduce"] *,html[data-a11y-motion="reduce"] *::before,html[data-a11y-motion="reduce"] *::after{
  animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-a11y-motion="reduce"] body::before{animation:none!important}
html[data-a11y-motion="reduce"] .card-burst,html[data-a11y-motion="reduce"] .card-ripple{display:none!important}
html[data-a11y-motion="reduce"] .card:hover,html[data-a11y-motion="reduce"] .mpotd-tab:hover,html[data-a11y-motion="reduce"] .card-act:active{transform:none!important}

/* --- Font choice --- */
html[data-a11y-font="clear"]{--mm-font-body:Verdana,Tahoma,"Segoe UI",Arial,sans-serif;--mm-font-display:Verdana,Tahoma,"Segoe UI",Arial,sans-serif}
html[data-a11y-font="dyslexia"]{
  --mm-font-body:"OpenDyslexic","Atkinson Hyperlegible","Lexend","Comic Neue","Comic Sans MS","Chalkboard SE","Trebuchet MS",Verdana,sans-serif;
  --mm-font-display:"OpenDyslexic","Atkinson Hyperlegible","Lexend","Comic Neue","Comic Sans MS","Chalkboard SE","Trebuchet MS",Verdana,sans-serif}
html[data-a11y-font] body,html[data-a11y-font] button,html[data-a11y-font] input,html[data-a11y-font] select,html[data-a11y-font] textarea{font-family:var(--mm-font-body)}
html[data-a11y-font="clear"] body{letter-spacing:.01em;line-height:1.6}
html[data-a11y-font="dyslexia"] body{letter-spacing:.03em;word-spacing:.12em;line-height:1.7}
html[data-a11y-font] .bsr-btn{text-transform:none}

/* NEW badge on recently dropped problems */
.mm-new-badge{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;background:linear-gradient(115deg,#ff2424,#e00000);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.06em;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none;animation:mm-new-pulse 2.2s ease-in-out infinite}
@keyframes mm-new-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.mm-new-badge{animation:none}}

/* Share chooser (PDF / JPG / Link) */
.mm-share-chooser{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center}
.mm-share-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.mm-share-sheet{position:relative;width:min(420px,100%);background:var(--surface,#fff);color:var(--fg,#111);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:mm-share-up .22s ease}
.mm-share-sheet h3{margin:0 0 2px;font-size:1.1rem}
.mm-share-sheet p{margin:0 0 14px;font-size:.85rem;opacity:.65}
.mm-share-x{position:absolute;top:8px;right:12px;border:0;background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.mm-share-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mm-share-opts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid var(--border,#ddd);border-radius:14px;background:var(--bg,#fafafa);color:inherit;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;transition:transform .15s,border-color .15s}
.mm-share-opts button:hover,.mm-share-opts button:focus-visible{transform:translateY(-2px);border-color:#e00000;outline:none}
.mm-share-opts b{font-size:1.6rem;line-height:1}
@media(min-width:600px){.mm-share-chooser{align-items:center}.mm-share-sheet{border-radius:20px}}
@keyframes mm-share-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* Night view everywhere: full-screen viewer, saved cards, Olympiad Vault, Play and any problem image */
html[data-night="dim"] .image-viewer img,
html[data-night="dim"] .saved-problem-card img,
html[data-night="dim"] .mm-vault-math img,
html[data-night="dim"] .mm-vault-problem-dialog img,
html[data-night="dim"] .mm-play-problem img,
html[data-night="dim"] .mathnet-detail-content img { filter: brightness(.82) contrast(.95); }
html[data-night="invert"] .image-viewer img,
html[data-night="invert"] .saved-problem-card img,
html[data-night="invert"] .mm-vault-math img,
html[data-night="invert"] .mm-vault-problem-dialog img,
html[data-night="invert"] .mm-play-problem img,
html[data-night="invert"] .mathnet-detail-content img { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92); }
html[data-night="invert"] .image-viewer { background: #111; }
/* Night button inside the full-screen viewer (top-left, opposite the close button) */
.mm-viewer-night{position:absolute;top:15px;left:15px;z-index:10;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;border:2px solid var(--border);background:var(--surface);color:var(--fg);font-family:inherit;font-weight:700;font-size:.78rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);-webkit-tap-highlight-color:transparent}
.mm-viewer-night[aria-pressed="true"]{background:#facc15;color:#1a1a1a;border-color:transparent}
@media (max-width:600px){.mm-viewer-night{top:10px;left:10px;padding:4px 9px;font-size:.72rem}}

/* Play: end-of-game analysis */
.mm-play-analysis{text-align:left;margin:18px 0 6px}
.mm-an-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mm-an-stat{padding:10px 6px;border:1px solid var(--border-color,#ddd);border-radius:12px;text-align:center;background:rgba(127,127,127,.06)}
.mm-an-stat b{display:block;font-size:1.15rem;line-height:1.2}
.mm-an-stat span{display:block;font-size:.68rem;opacity:.65;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.mm-an-stat.main{grid-column:span 2;background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.45)}.mm-an-stat.main b{font-size:1.6rem}
.mm-an-stat.good b{color:#2ecc71}.mm-an-stat.bad b{color:#ff6b6b}
.mm-an-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:12px 0 4px;background:rgba(127,127,127,.2)}
.mm-an-bar i.g{background:#2ecc71}.mm-an-bar i.r{background:#ff6b6b}.mm-an-bar i.s{background:#9aa0a6}
.mm-an-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
.mm-an-head h4{margin:0;font-size:1.05rem}
.mm-an-filter{display:flex;gap:6px}
.mm-an-filter button{border:1px solid var(--border-color,#ccc);background:transparent;color:inherit;border-radius:99px;padding:5px 12px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.mm-an-filter button.on{background:#e00000;color:#fff;border-color:#e00000}
.mm-an-filter button:disabled{opacity:.4;cursor:default}
.mm-an-list{display:grid;gap:12px}
.mm-an-item[hidden]{display:none}
.mm-an-item{border:1px solid var(--border-color,#ddd);border-left-width:4px;border-radius:14px;padding:12px 14px;background:var(--card-bg,transparent)}
.mm-an-item.is-ok{border-left-color:#2ecc71}.mm-an-item.is-bad{border-left-color:#ff6b6b}.mm-an-item.is-skip{border-left-color:#9aa0a6}
.mm-an-item header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.76rem;margin-bottom:8px}
.mm-an-num{font-weight:800;font-size:.9rem}.mm-an-tag{font-weight:700}.mm-an-src,.mm-an-time{opacity:.65}.mm-an-time{margin-left:auto}
.mm-an-problem{font-size:.92rem;max-height:220px;overflow:auto;padding-right:4px}
.mm-an-ans{margin:10px 0 8px;font-size:.88rem}.mm-an-ans .g{color:#2ecc71}.mm-an-ans .r{color:#ff6b6b}
.mm-an-sol{margin-top:8px;font-size:.9rem}.mm-an-sol h5{margin:0 0 4px}.mm-an-nosol{opacity:.65;font-size:.85rem;margin:8px 0 0}
@media (max-width:560px){.mm-an-stats{grid-template-columns:repeat(2,1fr)}.mm-an-stat.main,.mm-an-stat:last-child{grid-column:span 2}}


/* ---------- "Similar problems" under the problem viewer (related-problems.js) ----------
   The viewer now scrolls: the problem and its Like / Save / Comment / Share bar come first, suggestions below. */
#imageModal .modal-dialog{align-items:flex-start;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;overscroll-behavior-x:auto;-webkit-overflow-scrolling:touch}
#imageModal .image-viewer{max-height:none;overflow:visible;justify-content:flex-start;margin-block:auto}
.mm-viewer-main{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
/* Close button stays in view while scrolling through suggestions (zero-height sticky row over the picture). */
#imageModal .modal-close{position:sticky;top:15px;right:auto;align-self:flex-end;margin:15px 15px -47px 0;flex:0 0 auto}
@media (max-width:640px){#imageModal .modal-close{top:10px;margin:10px 10px -38px 0}}

.mm-related{order:5;width:100%;box-sizing:border-box;padding:6px 14px 28px;color:#e8edf3;border-top:1px solid rgba(255,255,255,.1)}
.mm-related[hidden]{display:none}
.mm-rel-head{margin:18px 0 10px;font-size:1.02rem;font-weight:900;letter-spacing:.01em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;color:#fff}
.mm-rel-sub{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.6)}
.mm-rel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.mm-rel-item{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:transform .15s ease,border-color .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}
.mm-rel-item:hover,.mm-rel-item:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:var(--color-primary,#ff0000)}
.mm-rel-item:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:2px}
.mm-rel-thumb{display:block;aspect-ratio:16/10;background:#fff;overflow:hidden}
.mm-rel-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.mm-rel-info{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}
.mm-rel-title{font-size:.84rem;font-weight:800;line-height:1.25;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm-rel-tags{display:flex;flex-wrap:wrap;gap:4px}
.mm-rel-tag{font-size:.64rem;font-weight:800;padding:.1rem .5rem;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78)}
.mm-rel-tag.match{background:color-mix(in srgb,var(--color-primary,#ff0000) 28%,transparent);color:#fff}
@media (max-width:640px){
  .mm-related{padding:4px 10px 24px}
  .mm-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mm-rel-title{font-size:.78rem}
}
html[data-night="dim"] .mm-rel-thumb img{filter:brightness(.82) contrast(.95)}
html[data-night="invert"] .mm-rel-thumb{background:#111}
html[data-night="invert"] .mm-rel-thumb img{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
@media (prefers-reduced-motion:reduce){.mm-rel-item{transition:none}.mm-rel-item:hover{transform:none}}


/* Swipe left/right in the problem viewer: let the page keep vertical scroll + pinch-zoom, we handle sideways swipes. */
.mm-viewer-main { touch-action: pan-y pinch-zoom; }
@keyframes mmSlideNext { from { transform: translateX(42px); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes mmSlidePrev { from { transform: translateX(-42px); opacity: .55; } to { transform: none; opacity: 1; } }
#modalImg.mm-slide-next { animation: mmSlideNext .28s cubic-bezier(.2,.8,.2,1) both; }
#modalImg.mm-slide-prev { animation: mmSlidePrev .28s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { #modalImg.mm-slide-next, #modalImg.mm-slide-prev { animation: none; } }

/* ============================================================
   Image logo in the header (replaces the MATHS MARVEL text).
   One file per theme: black MATHS on light, white MATHS on dark.
   Width = 203px on PC (75% of the first size), shrinks on phones so it never runs under
   the menu button (left) or the controls (right).
   ============================================================ */
.mm-brand { padding: 6px 70px 8px; min-height: 0; }
.mm-logo-link { display: block; line-height: 0; -webkit-tap-highlight-color: transparent; }
.mm-logo { display: block; width: min(203px, calc((100vw - 132px) * .75)); height: auto; aspect-ratio: 810 / 167; user-select: none; -webkit-user-drag: none; }
.mm-logo-for-dark { display: none; }
html[data-theme="dark"] .mm-logo-for-light { display: none; }
html[data-theme="dark"] .mm-logo-for-dark { display: block; }
@media (min-width: 1100px) { .mm-logo { width: 225px; } }
@media (max-width: 520px) { .mm-brand { padding: 5px 58px 7px; } }

/* Latest / Old sort buttons (Regular tab) */
.mm-sortbar{width:min(780px,100%);margin:0 auto .8rem;display:flex;justify-content:center;gap:.5rem}
.mm-sortbar[hidden]{display:none!important}
.mm-sort-btn{flex:0 1 auto;border:1px solid var(--border,rgba(128,128,128,.35));background:var(--surface,transparent);color:var(--fg,inherit);border-radius:999px;padding:.45rem 1.15rem;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.mm-sort-btn:hover{transform:translateY(-1px)}
.mm-sort-btn:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:2px}
.mm-sort-btn.active,.mm-sort-btn[aria-pressed="true"]{background:var(--color-primary,#ff0000);border-color:transparent;color:#fff}
@media (max-width:560px){.mm-sortbar{padding:0 .5rem}.mm-sort-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.mm-sort-btn:hover{transform:none}}

/* Latest / Old now sit in the same row as the Month & Random problem toggle */
.mm-fb-head{flex-wrap:wrap}
.mm-fb-head .mm-sortbar{width:auto;margin:0;display:flex;gap:.4rem;flex:0 0 auto}
.mm-fb-head .mm-sort-btn{padding:.34rem .8rem;font-size:.82rem;white-space:nowrap}
.mm-fb-head .mm-fb-toggle{flex:1 1 140px}
.mm-fb-head .mm-fb-toggle-title{white-space:nowrap}
@media (max-width:560px){.mm-fb-head .mm-sort-btn{flex:0 0 auto;padding:.3rem .65rem;font-size:.78rem}.mm-fb-head .mm-sortbar{padding:0}.mm-fb-head .mm-fb-toggle{flex:1 1 120px}.mm-fb-head .mm-fb-toggle-title{font-size:.8rem}}

/* One compact row: Latest | Old | Month | Night */
.mm-fb-head{flex-wrap:nowrap;gap:.4rem}
.mm-fb-head .mm-fb-toggle{flex:1 1 auto;min-width:0;justify-content:center;gap:.25rem}
.mm-fb-head .mm-fb-arrow{width:18px;height:18px}
.mm-fb-head .mm-night-btn{flex:0 0 auto}
@media (max-width:560px){
  .mm-fb-head{gap:.3rem}
  .mm-fb-head .mm-sortbar{gap:.3rem}
  .mm-fb-head .mm-sort-btn,.mm-fb-head .mm-night-btn{padding:.3rem .5rem;font-size:.74rem}
  .mm-fb-head .mm-fb-toggle-title{font-size:.76rem}
}

/* "How to use": small x in the corner, same look as the WhatsApp button's x */
.mm-howto-holder{position:relative;display:inline-block}
.mm-howto-close{position:absolute;top:-8px;right:-8px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#222;color:#fff;font:700 14px/20px Arial,sans-serif;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:2;-webkit-tap-highlight-color:transparent}
.mm-howto-close:hover{background:#000}
.mm-howto-close:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:2px}

/* "Month" looks like the Latest / Old buttons */
.mm-fb-head .mm-fb-toggle{flex:0 0 auto;width:auto;justify-content:center;gap:.3rem;padding:.34rem .8rem;border:1px solid var(--border,rgba(128,128,128,.35));border-radius:999px;background:var(--surface,transparent);color:var(--fg,inherit);font-size:.82rem;font-weight:800;transition:background .15s,transform .1s}
.mm-fb-head .mm-fb-toggle:hover{transform:translateY(-1px)}
.mm-fb-head .mm-fb-toggle:focus-visible{outline:2px solid var(--color-primary,#ff0000);outline-offset:2px;border-radius:999px}
.mm-fb-head .mm-fb-arrow{width:16px;height:16px}
.mm-fb-head .mm-night-btn{margin-left:auto}
@media (max-width:560px){
  .mm-fb-head .mm-fb-toggle{padding:.3rem .5rem;font-size:.74rem;gap:.2rem}
  .mm-fb-head .mm-fb-toggle-title{font-size:.74rem}
  .mm-fb-head .mm-fb-arrow{width:13px;height:13px}
  .mm-fb-head .mm-night-btn{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.mm-fb-head .mm-fb-toggle:hover{transform:none}}

/* Narrow phones: drop the little emoji so Latest | Old | Month | Night always fit on one line */
@media (max-width:440px){
  .mm-fb-head .mm-emo,.mm-fb-head .mm-night-btn > span[aria-hidden="true"]{display:none}
}
@media (max-width:330px){ .mm-fb-head{flex-wrap:wrap} }


/* ===== Search button (beside Latest / Old / Month) – the search bar opens when it is tapped ===== */
.mm-fb-head .mm-search-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.34rem .8rem;font-size:.82rem;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
.mm-fb-head .mm-search-btn:hover{transform:translateY(-1px)}
.mm-fb-head .mm-search-btn svg{flex:none}
.mm-filterbar.mm-search-open .mm-search-btn,.mm-search-btn[aria-expanded="true"]{background:var(--color-primary,#ff0000);color:#fff;border-color:transparent}
.mm-filterbar .mm-search-only{display:none;max-width:none;margin:0;padding:0}
.mm-filterbar.mm-search-open .mm-search-only{display:grid}
.mm-filterbar .mm-search-only label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mm-filterbar .mm-search-only input{padding:.65rem .9rem;border-radius:12px}
@media (max-width:520px){.mm-fb-head .mm-search-btn{padding:.3rem .5rem;font-size:.74rem}.mm-fb-head .mm-search-label{display:none}.mm-fb-head .mm-search-btn svg{width:17px;height:17px}}
@media (prefers-reduced-motion:reduce){.mm-fb-head .mm-search-btn:hover{transform:none}}


/* ===== Maths Marvel: theme-aware problem action bar refresh ===== */
/* Keep the existing actions and event handlers; this is a visual-only override. */
.card-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:5px;
  margin:8px 10px 10px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 3px 12px rgba(0,0,0,.045);
  overflow:visible;
}
.card-act{
  min-height:36px;
  padding:7px 9px;
  gap:6px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:.76rem;
  font-weight:750;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card-act:hover{
  background:color-mix(in oklab,var(--color-primary,#e11d48),var(--surface) 91%);
  border-color:color-mix(in oklab,var(--color-primary,#e11d48),transparent 78%);
  color:var(--color-primary,#e11d48);
  box-shadow:0 2px 7px rgba(0,0,0,.055);
}
.card-act:active{transform:scale(.96)}
.card-act-ic svg{width:17px;height:17px}
.card-act-count{font-size:.72rem}
/* The image-viewer toolbar now follows the selected theme instead of navy. */
.problem-toolbar{
  left:clamp(10px,2vw,20px);
  right:clamp(10px,2vw,20px);
  bottom:clamp(10px,2vw,20px);
  gap:7px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:18px;
  background:color-mix(in oklab,var(--surface) 92%,transparent);
  color:var(--fg);
  box-shadow:0 8px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
}
.problem-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--fg);
  border-radius:12px;
  padding:.55rem .82rem;
  font-size:.76rem;
  font-weight:750;
  box-shadow:0 2px 7px rgba(0,0,0,.055);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.problem-action:hover{
  transform:translateY(-1px);
  background:color-mix(in oklab,var(--color-primary),var(--surface) 91%);
  border-color:color-mix(in oklab,var(--color-primary),transparent 55%);
  color:var(--color-primary);
  box-shadow:0 5px 14px rgba(0,0,0,.1);
}
.problem-action.gemini-action,.problem-action.saved{
  background:var(--color-primary);
  color:#fff;
  border-color:transparent;
}
.problem-action.gemini-action:hover,.problem-action.saved:hover{background:color-mix(in oklab,var(--color-primary),black 12%);color:#fff}
@media(max-width:520px){
  .card-actions{margin:6px 7px 8px;padding:4px;gap:2px;border-radius:13px}
  .card-act{min-height:34px;padding:6px 4px;gap:4px;font-size:.7rem}
  .problem-toolbar{left:8px;right:8px;bottom:8px;padding:6px;gap:5px;border-radius:15px}
  .problem-action{min-height:34px;padding:.48rem .6rem;font-size:.7rem;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.card-act,.problem-action{transition:none}}

/* Internal recommendation tags: keep available in data-tags for similarity ranking, never expose them in the public UI. */
.card-tags,
.mm-rel-tags,
.mm-rel-sub {
  display: none !important;
}


/* Mobile browser navigation gestures: do not trap horizontal edge swipes. */
html,body{overscroll-behavior-x:auto!important;}


/* ===== Olympiad Vault: problem card redesign (matches the home-tab cards) ===== */
#gallery-olympiad .mm-vault-grid,/* ===== Olympiad Vault: problem card redesign (matches the home-tab cards) ===== */
#gallery-mdoc .mm-vault-grid ,#gallery-events .mm-vault-grid {gap:16px}
#gallery-olympiad .mm-vault-problem,#gallery-mdoc .mm-vault-problem ,#gallery-events .mm-vault-problem {
  padding:0;
  border:2px solid color-mix(in oklab,var(--color-primary),var(--surface) 75%);
  border-radius:var(--radius,18px);
  background:var(--surface);
  box-shadow:var(--shadow,0 8px 24px rgba(15,23,42,.07));
  overflow:hidden;
  display:flex;flex-direction:column;
}
#gallery-olympiad .mm-vault-problem:before,#gallery-mdoc .mm-vault-problem:before ,#gallery-events .mm-vault-problem:before {display:none}
#gallery-olympiad .mm-vault-problem:hover,#gallery-mdoc .mm-vault-problem:hover ,#gallery-events .mm-vault-problem:hover {
  transform:translateY(-3px);
  border-color:color-mix(in oklab,var(--color-primary),var(--surface) 55%);
  box-shadow:var(--shadow-strong,0 16px 34px rgba(15,23,42,.13));
}
/* header strip: country + language */
#gallery-olympiad .mm-vault-problem-top,/* header strip: country + language */
#gallery-mdoc .mm-vault-problem-top ,#gallery-events .mm-vault-problem-top {
  justify-content:flex-start;align-items:center;gap:8px;opacity:1;
  padding:12px 16px 0;margin:0;
}
#gallery-olympiad .mm-vp-country,#gallery-mdoc .mm-vp-country ,#gallery-events .mm-vp-country {
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:color-mix(in oklab,var(--color-primary),var(--surface) 90%);
  color:var(--color-primary);
  border:1px solid color-mix(in oklab,var(--color-primary),transparent 78%);
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
#gallery-olympiad .mm-vp-lang,#gallery-mdoc .mm-vp-lang ,#gallery-events .mm-vp-lang {
  margin-left:auto;font-size:.68rem;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
#gallery-olympiad .mm-vault-problem h3,#gallery-mdoc .mm-vault-problem h3 ,#gallery-events .mm-vault-problem h3 {
  margin:10px 16px 8px;font-size:1.06rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  color:var(--fg);
}
#gallery-olympiad .mm-vault-meta,#gallery-mdoc .mm-vault-meta ,#gallery-events .mm-vault-meta {margin:0 16px 12px;gap:6px}
#gallery-olympiad .mm-vault-meta span,#gallery-mdoc .mm-vault-meta span ,#gallery-events .mm-vault-meta span {
  font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:999px;
  background:transparent;color:var(--muted);border:1px solid var(--border);
}
/* problem text sits in a soft inset panel, like the image area of a home card */
#gallery-olympiad .mm-vault-problem .mm-vault-preview,like the image area of a home card */
#gallery-mdoc .mm-vault-problem .mm-vault-preview ,#gallery-events .mm-vault-problem .mm-vault-preview {
  margin:0 12px;padding:12px 14px;
  border:1px solid color-mix(in oklab,var(--border),transparent 35%);
  border-radius:13px;
  background:color-mix(in oklab,var(--bg),var(--muted) 8%);
  color:var(--fg);
  font-size:.86rem;line-height:1.6;
  max-height:170px;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,#000 72%,transparent);
}
#gallery-olympiad .mm-vault-tags,#gallery-mdoc .mm-vault-tags ,#gallery-events .mm-vault-tags {margin:0;padding:12px 16px 0;margin-top:auto}
#gallery-olympiad .mm-vault-tags span,#gallery-mdoc .mm-vault-tags span ,#gallery-events .mm-vault-tags span {
  font-size:.68rem;font-weight:750;padding:4px 9px;
  background:color-mix(in oklab,var(--fg),transparent 92%);
  color:var(--muted);border:0;
}

/* action bar: same look as the home cards' Like / Comment / Share / Download bar */
.mm-vault-bar{
  container-type:inline-size;
  display:flex;align-items:center;justify-content:space-around;gap:5px;
  margin:12px 10px 10px;padding:6px;
  border:1px solid var(--border);border-radius:15px;
  background:var(--surface);
  box-shadow:0 3px 12px rgba(0,0,0,.045);
}
#gallery-olympiad .mm-vault-problem > .mm-vault-bar:first-child,#gallery-mdoc .mm-vault-problem > .mm-vault-bar:first-child ,#gallery-events .mm-vault-problem > .mm-vault-bar:first-child {margin-top:auto}
#gallery-olympiad .mm-vault-tags + .mm-vault-bar,
#gallery-olympiad .mm-vault-preview + .mm-vault-bar,#gallery-mdoc .mm-vault-tags + .mm-vault-bar,#gallery-events .mm-vault-tags + .mm-vault-bar,#gallery-mdoc .mm-vault-preview + .mm-vault-bar ,#gallery-events .mm-vault-preview + .mm-vault-bar {margin-top:12px}
.mm-vact{
  position:relative;flex:1 1 0;min-width:0;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 9px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--muted);
  font:inherit;font-size:.78rem;font-weight:800;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.mm-vact:hover{
  background:color-mix(in oklab,var(--color-primary,#e11d48),var(--surface) 91%);
  border-color:color-mix(in oklab,var(--color-primary,#e11d48),transparent 78%);
  color:var(--color-primary,#e11d48);
  box-shadow:0 2px 7px rgba(0,0,0,.055);
}
.mm-vact:active{transform:scale(.95)}
.mm-vact:focus-visible{outline:2px solid var(--color-primary,#e11d48);outline-offset:1px}
.mm-vact-ic{display:inline-flex;align-items:center;justify-content:center;position:relative}
.mm-vact-ic svg{width:17px;height:17px;transition:transform .2s ease}
.mm-vact-count{font-variant-numeric:tabular-nums;font-size:.72rem}
/* Open = the filled accent button so it is always seen */
.mm-vact-open{
  flex:1.25 1 0;
  background:var(--color-primary,#e11d48);color:#fff;
  box-shadow:0 4px 12px color-mix(in oklab,var(--color-primary,#e11d48),transparent 72%);
}
.mm-vact-open:hover{
  background:color-mix(in oklab,var(--color-primary,#e11d48),black 12%);
  border-color:transparent;color:#fff;
  box-shadow:0 6px 16px color-mix(in oklab,var(--color-primary,#e11d48),transparent 62%);
}
.mm-vact-open:hover .mm-vact-ic svg{transform:translateX(3px)}
/* Like */
.mm-vact.liked,.mm-vact.liked:hover{color:#e11d48}
.mm-vact.liked{background:rgba(225,29,72,.08)}
.mm-vact.liked:hover{background:rgba(225,29,72,.12);border-color:rgba(225,29,72,.25)}
.mm-vact.mm-pop .mm-vact-ic svg{animation:mmHeartPop .65s cubic-bezier(.2,1.6,.4,1)}
@keyframes mmHeartPop{0%{transform:scale(1)}25%{transform:scale(.55)}55%{transform:scale(1.55) rotate(-8deg)}80%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
/* Share */
.mm-vact-share:active .mm-vact-ic svg{transform:translateY(-3px)}
/* Labels only when the bar is wide enough; otherwise icons only (like the home cards) */
.mm-vact-txt{display:none}
@container (min-width: 250px){.mm-vact-txt{display:inline}}
@media(max-width:520px){
  #gallery-olympiad .mm-vault-problem h3,#gallery-mdoc .mm-vault-problem h3 ,#gallery-events .mm-vault-problem h3 {margin-left:14px;margin-right:14px}
  #gallery-olympiad .mm-vault-problem-top,#gallery-mdoc .mm-vault-problem-top ,#gallery-events .mm-vault-problem-top {padding:11px 14px 0}
  #gallery-olympiad .mm-vault-meta,#gallery-mdoc .mm-vault-meta ,#gallery-events .mm-vault-meta {margin-left:14px;margin-right:14px}
  #gallery-olympiad .mm-vault-problem .mm-vault-preview,#gallery-mdoc .mm-vault-problem .mm-vault-preview ,#gallery-events .mm-vault-problem .mm-vault-preview {margin:0 10px}
  #gallery-olympiad .mm-vault-tags,#gallery-mdoc .mm-vault-tags ,#gallery-events .mm-vault-tags {padding:10px 14px 0}
  .mm-vault-bar{margin:10px 7px 8px;padding:4px;gap:2px;border-radius:13px}
  .mm-vact{min-height:36px;padding:6px 4px;gap:4px;font-size:.72rem}
}
/* dark theme: the older dark overrides force these colours, so match their specificity */
html[data-theme="dark"] #gallery-olympiad .mm-vault-problem .mm-vault-preview,so match their specificity */
html[data-theme="dark"] #gallery-mdoc .mm-vault-problem .mm-vault-preview ,html[data-theme="dark"] #gallery-events .mm-vault-problem .mm-vault-preview {color:var(--fg)!important;background:color-mix(in oklab,var(--surface),#fff 5%)!important}
html[data-theme="dark"] #gallery-olympiad .mm-vault-problem .mm-vault-meta span,html[data-theme="dark"] #gallery-mdoc .mm-vault-problem .mm-vault-meta span ,html[data-theme="dark"] #gallery-events .mm-vault-problem .mm-vault-meta span {background:transparent!important;color:var(--muted)!important}
html[data-theme="dark"] #gallery-olympiad .mm-vault-problem h3,html[data-theme="dark"] #gallery-mdoc .mm-vault-problem h3 ,html[data-theme="dark"] #gallery-events .mm-vault-problem h3 {color:var(--fg)}
html[data-theme="dark"] .mm-vault-bar{box-shadow:0 3px 12px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.mm-vact,.mm-vact-ic svg{transition:none}.mm-vact.mm-pop .mm-vact-ic svg{animation:none}}
html[data-a11y-motion="reduce"] .mm-vact.mm-pop .mm-vact-ic svg{animation:none!important}

/* ===== Olympiad Vault: new problem page ===== */
#mmVaultProblemModal{padding:16px}
#mmVaultProblemModal .mm-vault-modal-backdrop{background:rgba(8,10,16,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#mmVaultProblemModal .mm-vault-problem-dialog{
  width:min(860px,100%);max-height:calc(100dvh - 32px);padding:0;
  border:1px solid var(--border);border-radius:24px;
  background:var(--bg);color:var(--fg);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  overflow-y:auto;overscroll-behavior:contain;
}
#mmVaultProblemModal > .mm-vault-problem-dialog > .mm-vault-close{display:none}
#mmVaultProblemModal:not(.hidden) .mm-vault-problem-dialog{animation:mmPgIn .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes mmPgIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
html[data-theme="dark"] #mmVaultProblemModal .mm-vault-problem-dialog{background:var(--bg)!important;border-color:var(--border)!important}

.mm-pg{display:flex;flex-direction:column;min-height:100%}
/* sticky top bar */
.mm-pg-top{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.mm-pg-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;
  padding:0 13px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--fg);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.mm-pg-iconbtn:hover{background:color-mix(in oklab,var(--color-primary),var(--surface) 91%);border-color:color-mix(in oklab,var(--color-primary),transparent 60%);color:var(--color-primary)}
.mm-pg-iconbtn:active{transform:scale(.95)}
.mm-pg-x{width:38px;padding:0;margin-left:auto}
.mm-pg-crumb{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.mm-pg-body{padding:22px clamp(14px,4vw,30px) 8px;display:flex;flex-direction:column;gap:18px;flex:1}

/* hero */
.mm-pg-hero{
  padding:clamp(18px,3.5vw,28px);
  border:2px solid color-mix(in oklab,var(--color-primary),var(--surface) 75%);
  border-radius:20px;
  background:linear-gradient(145deg,var(--surface),color-mix(in oklab,var(--surface) 94%,var(--color-primary) 6%));
  box-shadow:var(--shadow,0 8px 24px rgba(15,23,42,.07));
}
.mm-pg-country{
  display:inline-flex;padding:4px 11px;border-radius:999px;
  background:color-mix(in oklab,var(--color-primary),var(--surface) 90%);
  border:1px solid color-mix(in oklab,var(--color-primary),transparent 78%);
  color:var(--color-primary);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.mm-pg-hero h2{margin:12px 0 12px;font-size:clamp(1.4rem,4.2vw,2.15rem);line-height:1.18;letter-spacing:-.02em;color:var(--fg)}
.mm-pg-chips{display:flex;flex-wrap:wrap;gap:7px}
.mm-pg-chips span{padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:750}
.mm-pg-info{display:none}

/* cards */
.mm-pg-card{
  padding:clamp(16px,3vw,24px);
  border:1px solid var(--border);border-radius:18px;
  background:var(--surface);box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.mm-pg-card + .mm-pg-card{margin-top:12px}
.mm-pg-label{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mm-pg-dot{width:9px;height:9px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--color-primary),transparent 84%)}
.mm-pg-dot.ok{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.mm-pg-math{font-size:max(1.04rem,16px);line-height:1.8;color:var(--fg)}
.mm-pg-math p:last-child{margin-bottom:0}
.mm-pg-problem .mm-vault-translation-tools{padding-top:12px;margin-top:14px;border-top:1px dashed var(--border)}
.mm-pg-translate{border-radius:11px;font-weight:750}

/* show-solution area */
.mm-pg-reveal-box{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border:1.5px dashed color-mix(in oklab,var(--color-primary),var(--border) 55%);
  border-radius:18px;background:color-mix(in oklab,var(--surface),var(--color-primary) 4%);
}
.mm-pg-reveal-copy{display:flex;flex-direction:column;gap:3px;min-width:200px;flex:1 1 220px}
.mm-pg-reveal-copy strong{font-size:.98rem}
.mm-pg-reveal-copy span{font-size:.82rem;color:var(--muted);line-height:1.45}
.mm-pg-showbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border:0;border-radius:14px;
  background:var(--color-primary);color:#fff;font:inherit;font-size:.95rem;font-weight:850;cursor:pointer;
  box-shadow:0 8px 20px color-mix(in oklab,var(--color-primary),transparent 68%);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.mm-pg-showbtn:hover{background:color-mix(in oklab,var(--color-primary),black 12%);transform:translateY(-1px);box-shadow:0 12px 26px color-mix(in oklab,var(--color-primary),transparent 58%)}
.mm-pg-showbtn:active{transform:scale(.96)}
.mm-pg-showbtn:focus-visible{outline:3px solid color-mix(in oklab,var(--color-primary),transparent 55%);outline-offset:3px}
.mm-pg-showbtn.open{background:var(--surface);color:var(--fg);border:1px solid var(--border);box-shadow:none}
.mm-pg-showbtn.open:hover{background:color-mix(in oklab,var(--color-primary),var(--surface) 91%);color:var(--color-primary)}
.mm-pg-showic{display:inline-flex}
.mm-pg-solution{margin-top:14px;scroll-margin-top:70px}
.mm-pg-solution[hidden]{display:none}
.mm-pg-solution.mm-pg-in{animation:mmPgReveal .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes mmPgReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mm-pg-nosol{padding:14px 16px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);font-size:.86rem;text-align:center}

/* final answer + solutions */
.mm-pg-final{
  margin-bottom:12px;padding:16px 20px;border-radius:18px;
  border:1.5px solid rgba(22,163,74,.4);
  background:linear-gradient(135deg,rgba(22,163,74,.11),rgba(22,163,74,.04));
}
.mm-pg-final-label{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:#16a34a;color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.mm-pg-final .mm-vault-math{font-size:max(1.12rem,17px);font-weight:600}
.mm-pg-sol{border:1px solid var(--border);border-radius:14px;background:color-mix(in oklab,var(--bg),var(--muted) 6%);margin:10px 0 0;overflow:hidden}
.mm-pg-sol > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;cursor:pointer;font-weight:800;font-size:.9rem;list-style:none}
.mm-pg-sol > summary::-webkit-details-marker{display:none}
.mm-pg-sol > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;margin-right:3px}
.mm-pg-sol[open] > summary::after{transform:rotate(-135deg)}
.mm-pg-sol > .mm-vault-math{padding:2px 16px 14px;border-top:1px solid var(--border)}
.mm-pg-ideas{margin:0;padding-left:20px;line-height:1.7}

/* topics */
.mm-pg-topics .mm-vault-tags{margin:0;padding:0;gap:7px}
.mm-pg-topics .mm-vault-tags span{padding:5px 11px;font-size:.76rem;font-weight:750;border:1px solid var(--border);background:var(--surface);color:var(--muted)}

/* sticky bottom action bar (same buttons as the vault cards) */
.mm-pg-dock{position:sticky;bottom:0;z-index:5;padding:8px 14px 12px;background:linear-gradient(to top,var(--bg) 62%,transparent)}
.mm-pg-dock .mm-vault-bar{margin:0 auto;max-width:520px;box-shadow:0 8px 26px rgba(0,0,0,.14)}
.mm-pg-dock .mm-vact.saved{color:var(--color-primary);background:color-mix(in oklab,var(--color-primary),var(--surface) 90%)}
.mm-pg-dock .mm-vact.saved .mm-vact-ic svg path{fill:currentColor}

@media(max-width:650px){
  #mmVaultProblemModal{padding:0}
  #mmVaultProblemModal .mm-vault-problem-dialog{width:100%;height:100dvh;max-height:none;border-radius:0;border:0}
  .mm-pg-body{padding-top:16px;gap:14px}
  .mm-pg-reveal-box{flex-direction:column;align-items:stretch}
  .mm-pg-showbtn{width:100%}
  .mm-pg-dock{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  #mmVaultProblemModal:not(.hidden) .mm-vault-problem-dialog,.mm-pg-solution.mm-pg-in{animation:none}
  .mm-pg-showbtn,.mm-pg-iconbtn{transition:none}
}
html[data-a11y-motion="reduce"] #mmVaultProblemModal .mm-vault-problem-dialog,html[data-a11y-motion="reduce"] .mm-pg-solution{animation:none!important}

/* ===== problem page: answer always visible, compact solution bar ===== */
.mm-pg-answer{display:flex;flex-direction:column;gap:12px}
.mm-pg-answer .mm-pg-final{margin-bottom:0}
.mm-pg-answer .mm-pg-card + .mm-pg-card{margin-top:0}
@media(max-width:650px){
  .mm-pg-reveal-box{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px;padding:10px 12px;border-radius:14px}
  .mm-pg-reveal-copy{min-width:0;flex:1 1 auto}
  .mm-pg-reveal-copy strong{font-size:.86rem}
  .mm-pg-reveal-copy span{display:none}
  .mm-pg-showbtn{width:auto;flex:0 0 auto;min-height:40px;padding:0 15px;gap:7px;font-size:.84rem;border-radius:11px}
  .mm-pg-showic svg{width:17px;height:17px}
  .mm-pg-final{padding:13px 15px;border-radius:15px}
}

/* ===== Saved problems tab ===== */
.mm-vault-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mm-saved-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--color-primary,#111);color:#fff;font-size:.68rem;font-weight:800;line-height:1}
.mm-vault-tab.active .mm-saved-badge{background:#fff;color:var(--color-primary,#111)}
.mm-saved-badge[hidden]{display:none}
#mmVaultSavedPanel .mm-vault-statusbar{align-items:center}
.mm-saved-empty{gap:8px}
.mm-saved-empty-ic{font-size:2.4rem;line-height:1}
.mm-saved-empty strong{font-size:1.05rem}
.mm-saved-empty span{max-width:300px;line-height:1.5}
.mm-saved-card{cursor:pointer}
.mm-vact-unsave{color:var(--color-primary,#e11d48)}
.mm-vact-unsave:hover{background:rgba(225,29,72,.1);border-color:rgba(225,29,72,.25);color:#e11d48}
.mm-vact:disabled{opacity:.65;cursor:progress}

/* toast must sit above the vault problem page and the share sheet */
.mm-toast{z-index:100001}

/* ===== Olympiad Vault: slim header bar ===== */
#gallery-olympiad .mm-vault-shell{padding-top:12px}
#gallery-olympiad .mm-vault-hero{
  flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:8px 16px;padding:10px 16px;margin-bottom:10px;border-radius:15px;
  box-shadow:0 3px 12px rgba(0,0,0,.045);
}
#gallery-olympiad .mm-vault-hero:after{display:none}
#gallery-olympiad .mm-vault-hero > div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
#gallery-olympiad .mm-vault-hero h2{margin:0;font-size:1.2rem;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
#gallery-olympiad .mm-vault-hero p{margin:0;font-size:.76rem;line-height:1.3;color:var(--muted);opacity:1}
#gallery-olympiad .mm-vault-stats{
  min-width:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;text-align:right;
}
#gallery-olympiad .mm-vault-stats .mm-vs{
  display:inline-flex;align-items:baseline;gap:4px;padding:4px 10px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-size:.72rem;font-weight:700;color:var(--muted);opacity:1;white-space:nowrap;
}
#gallery-olympiad .mm-vault-stats .mm-vs b{font-size:.84rem;font-weight:850;color:var(--color-primary);font-variant-numeric:tabular-nums}
#gallery-olympiad .mm-vault-stats > span:not(.mm-vs){font-size:.74rem;opacity:.7}
@media(max-width:650px){
  #gallery-olympiad .mm-vault-hero{padding:9px 11px;gap:6px;border-radius:13px;flex-direction:column;align-items:stretch}
  #gallery-olympiad .mm-vault-hero h2{font-size:1.05rem}
  #gallery-olympiad .mm-vault-hero p{display:none}
  #gallery-olympiad .mm-vault-stats{justify-content:flex-start;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #gallery-olympiad .mm-vault-stats::-webkit-scrollbar{display:none}
  #gallery-olympiad .mm-vault-stats .mm-vs{padding:3px 8px;font-size:.68rem;flex:0 0 auto}
  #gallery-olympiad .mm-vault-stats .mm-vs b{font-size:.76rem}
  .mm-vault-tabs{margin-bottom:10px}
  .mm-vault-tab{min-height:40px}
}

/* ===== Olympiad Vault: search / filter bar (same look as the home page bar) ===== */
.mm-vault-fbar{width:100%;max-width:none;margin:0 0 12px}
.mm-vault-fbar .mm-fb-head .mm-sortbar{flex:0 0 auto}
.mm-vault-fbar .mm-fb-head{flex-wrap:nowrap}
.mm-vault-fbar .mm-vault-filtertoggle{flex:1 1 auto;min-width:0;justify-content:center;gap:.3rem}
.mm-vault-fbar .mm-fb-toggle-title{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.mm-vault-fbar .mm-fb-arrow{transition:transform .25s ease}
.mm-vault-fbar .mm-vault-filtertoggle[aria-expanded="true"] .mm-fb-arrow{transform:rotate(180deg)}
.mm-vault-fbar .mm-vault-filtertoggle.has-filters .mm-fb-toggle-title{color:var(--color-primary)}
.mm-vault-fbar .mm-vault-badge{margin-left:2px}
/* search row (appears when Search is tapped) */
.mm-vault-searchrow{display:flex;align-items:stretch;gap:8px}
.mm-vault-searchrow[hidden]{display:none!important}
.mm-vault-searchrow .mm-vault-searchbox{flex:1 1 auto;min-width:0}
#gallery-olympiad .mm-vault-fbar .mm-vault-searchbox input,#gallery-mdoc .mm-vault-fbar .mm-vault-searchbox input ,#gallery-events .mm-vault-fbar .mm-vault-searchbox input {min-height:42px;border-radius:12px}
.mm-vault-gobtn{flex:0 0 auto;padding:.4rem 1.1rem}
/* filter panel lives inside the bar now */
html #gallery-olympiad .mm-vault-fbar .mm-vault-filters{
  margin:0!important;padding:12px 0 0!important;border:0!important;border-top:1px solid var(--border)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
html #gallery-olympiad .mm-vault-fbar .mm-vault-filters[hidden]{display:none!important}
@media(max-width:560px){
  .mm-vault-fbar{padding:9px 10px;border-radius:15px}
  .mm-vault-fbar .mm-fb-head{gap:.3rem}
  .mm-vault-fbar .mm-fb-head .mm-sort-btn,.mm-vault-fbar .mm-fb-head .mm-search-btn{padding:.3rem .55rem;font-size:.74rem}
  .mm-vault-fbar .mm-fb-head .mm-search-label{display:none}
  .mm-vault-fbar .mm-fb-head .mm-search-btn{padding:.3rem .55rem}
  .mm-vault-fbar .mm-fb-toggle-title{font-size:.76rem}
  .mm-vault-fbar .mm-fb-arrow{width:16px;height:16px}
  .mm-vault-gobtn{padding:.4rem .8rem}
}

/* =====================================================================
   COMMENTS — chat-bubble redesign (overrides earlier comment styles)
   ===================================================================== */
#assistantModal #assistantOutput:empty{display:none}
#assistantModal .comments-section{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;max-height:none;min-height:0}
#assistantModal .comments-header{position:static;display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;background:var(--surface)}
#assistantModal .comments-header h3{margin:0;font-size:1rem;font-weight:800;letter-spacing:-.01em}
#assistantModal .comments-header span{padding:.22rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--color-primary);background:color-mix(in oklab,var(--color-primary),var(--surface) 90%);border:0}

/* scrolling thread */
#assistantModal .comments-list{display:flex;flex-direction:column;gap:14px;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px 20px 16px;scroll-behavior:smooth;scrollbar-width:thin}
#assistantModal .comments-list::-webkit-scrollbar{width:6px}
#assistantModal .comments-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}

/* one comment */
.comment-card{--ch:0;position:relative;display:flex;align-items:flex-start;gap:10px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;animation:cmIn .28s ease both}
.comment-card::before{display:none!important}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.comment-card .comment-avatar.small{flex:0 0 36px;width:36px;height:36px;font-size:.85rem;font-weight:800;color:#fff;background:linear-gradient(135deg,hsl(var(--ch) 72% 55%),hsl(calc(var(--ch) + 40) 70% 42%));box-shadow:0 2px 6px hsl(var(--ch) 70% 40% / .3)}
.comment-content{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.comment-bubble{max-width:100%;padding:9px 13px 10px;border-radius:4px 16px 16px 16px;background:color-mix(in oklab,var(--bg),var(--fg) 5%);border:1px solid color-mix(in oklab,var(--border),transparent 35%)}
.comment-head{display:flex;align-items:center;gap:7px;padding:0;margin-bottom:2px;font-size:.8rem}
.comment-head strong{font-weight:800;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-chip{padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--color-primary)}
.comment-card p{margin:2px 0 0;padding:0;font-size:.88rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-foot{display:flex;align-items:center;gap:12px;margin:4px 0 0 6px}
.comment-foot time{font-size:.68rem;color:var(--muted)}
.comment-card .reply-btn{padding:2px 6px;margin:0 -6px;border-radius:6px;font-size:.72rem;font-weight:800;color:var(--muted);opacity:1;transition:color .15s,background .15s}
.comment-card .reply-btn:hover,.comment-card .reply-btn:focus-visible{color:var(--color-primary);background:color-mix(in oklab,var(--color-primary),transparent 90%)}

/* my own comments: tinted bubble */
.comment-card.is-mine .comment-bubble{background:color-mix(in oklab,var(--color-primary),var(--surface) 91%);border-color:color-mix(in oklab,var(--color-primary),var(--surface) 76%)}

/* replies: indented with a curved connector */
.comment-card.reply-card{margin-left:26px}
.comment-card.reply-card:before{display:block!important;content:"";position:absolute;left:-17px;top:-12px;width:14px;height:30px;border-left:2px solid var(--border);border-bottom:2px solid var(--border);border-bottom-left-radius:12px;background:none}
.comment-card.reply-card .comment-avatar.small{flex-basis:30px;width:30px;height:30px;font-size:.75rem}
.reply-context{display:inline-flex;align-items:center;gap:4px;margin:0 0 3px;padding:1px 8px;border-radius:999px;font-size:.68rem;font-weight:700;color:var(--muted);background:color-mix(in oklab,var(--fg),transparent 92%);opacity:1}

/* empty state */
.comments-list .empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;border:1.5px dashed var(--border);border-radius:18px;background:transparent}
.empty-state .empty-ic{display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;border-radius:50%;color:var(--color-primary);background:color-mix(in oklab,var(--color-primary),var(--surface) 90%)}
.empty-state strong{font-size:.95rem;color:var(--fg)}
.empty-state span{font-size:.8rem;max-width:260px}

/* composer: pinned card at the bottom */
#assistantModal .comment-form{margin:0;padding:12px 16px 14px;border:0;border-top:1px solid var(--border);border-radius:0;background:var(--surface);box-shadow:0 -8px 18px -14px rgba(0,0,0,.25);display:block}
.comment-form .comment-compose{display:flex;align-items:flex-start;gap:10px}
.comment-form .comment-avatar{flex:0 0 36px;width:36px;height:36px;font-size:.85rem;font-weight:800;background:linear-gradient(135deg,var(--color-primary),color-mix(in oklab,var(--color-primary),#000 30%))}
.comment-form .comment-fields{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding:8px 10px 6px;border:1.5px solid var(--border);border-radius:16px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.comment-form .comment-fields:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary),transparent 84%)}
.comment-name-row{display:flex;align-items:center;gap:6px;margin:0;font-size:.7rem;color:var(--muted)}
.comment-name-row span{white-space:nowrap;font-weight:600}
.comment-form .comment-name-row input{flex:1;min-width:0;width:auto;padding:0;border:0;border-radius:0;background:transparent;font-size:.78rem;font-weight:800;color:var(--fg);outline:none!important;box-shadow:none}
.comment-form textarea{min-height:40px;max-height:150px;padding:0;border:0;border-radius:0;background:transparent;font-size:.9rem;line-height:1.45;resize:none;outline:none!important;box-shadow:none}
.comment-form input:focus,.comment-form textarea:focus{outline:none!important}

/* replying chip */
.comment-form .replying-to{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px;padding:6px 8px 6px 11px;border-radius:10px;border-left:3px solid var(--color-primary);background:color-mix(in oklab,var(--color-primary),var(--surface) 92%);font-size:.76rem}
.replying-to.hidden{display:none}
.replying-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.replying-label strong{color:var(--fg)}
.comment-form .replying-to button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:1rem;line-height:1;color:var(--muted)}
.comment-form .replying-to button:hover{background:color-mix(in oklab,var(--fg),transparent 88%);color:var(--fg)}

/* footer: counter + send */
.comment-form .comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 0 46px}
.comment-form .comment-limit{display:inline!important;font-size:.7rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.comment-limit.near{color:#d97706}
.comment-form .comment-submit{display:inline-flex;align-items:center;gap:7px;padding:.5rem 1.05rem;border-radius:999px;font-size:.8rem;font-weight:800;box-shadow:0 4px 12px color-mix(in oklab,var(--color-primary),transparent 70%);transition:transform .15s,box-shadow .15s}
.comment-form .comment-submit:hover{transform:translateY(-1px)}
.comment-form .comment-submit:active{transform:scale(.96)}
.comment-form .comment-submit svg{transition:transform .2s}
.comment-form .comment-submit:hover svg{transform:translate(2px,-2px)}

@media(max-width:560px){
  #assistantModal .comments-header{padding:12px 14px 8px}
  #assistantModal .comments-list{padding:4px 14px 14px;max-height:42dvh}
  #assistantModal .comment-form{padding:10px 12px 12px}
  .comment-form .comment-form-footer{margin-left:0}
  .comment-card.reply-card{margin-left:18px}
}
@media(prefers-reduced-motion:reduce){.comment-card{animation:none}.comment-form .comment-submit,.comment-form .comment-submit svg{transition:none}}

/* =====================================================================
   COMMENTS v2 — clean messenger style (no header, no name field)
   ===================================================================== */
#assistantModal .assistant-heading,
#assistantModal .assistant-status,
#assistantModal .assistant-output,
#assistantModal .comments-header{display:none!important}
#assistantModal .tool-dialog.wide{width:min(520px,100%);padding:0;border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
#assistantModal .tool-close{top:10px;right:10px;width:32px;height:32px;font-size:1.1rem;border:0;background:color-mix(in oklab,var(--fg),transparent 91%)}
#assistantModal .comments-section{display:flex!important;flex-direction:column;padding:0;max-height:min(82vh,700px);overflow:hidden}
#assistantModal .comments-list{min-height:140px;max-height:none;flex:1 1 auto;padding:52px 18px 14px}

/* bubbles: softer, bigger, name on top */
.comment-bubble{border:0;border-radius:6px 18px 18px 18px;padding:10px 14px 11px;background:color-mix(in oklab,var(--bg),var(--fg) 6%)}
.comment-card.is-mine{flex-direction:row-reverse}
.comment-card.is-mine .comment-content{align-items:flex-end}
.comment-card.is-mine .comment-bubble{border-radius:18px 6px 18px 18px;background:var(--color-primary);color:#fff;border:0}
.comment-card.is-mine .comment-head strong,.comment-card.is-mine p{color:#fff}
.comment-card.is-mine .you-chip{background:rgba(255,255,255,.25)}
.comment-card.is-mine .reply-context{background:rgba(255,255,255,.2);color:#fff}
.comment-card.is-mine .comment-foot{margin:4px 6px 0 0}

/* composer: single floating pill */
#assistantModal .comment-form{padding:10px 14px 12px;border-top:1px solid var(--border);background:var(--surface);box-shadow:none}
.comment-form .comment-compose{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 6px;border:1.5px solid var(--border);border-radius:26px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.comment-form .comment-compose:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary),transparent 84%)}
.comment-form .comment-avatar{flex:0 0 34px;width:34px;height:34px;margin-bottom:1px}
.comment-form textarea{flex:1;min-width:0;min-height:36px;max-height:130px;padding:8px 2px;border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;resize:none;font-size:.92rem;line-height:1.4}
.comment-form .comment-submit{flex:0 0 38px;width:38px;height:38px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--color-primary);color:#fff;cursor:pointer;box-shadow:0 4px 12px color-mix(in oklab,var(--color-primary),transparent 65%);transition:transform .15s,opacity .15s}
.comment-form .comment-submit:hover{transform:scale(1.07) rotate(-8deg)}
.comment-form .comment-submit:active{transform:scale(.92)}
.comment-form:not(.has-text) .comment-submit{opacity:.45}
.comment-form .comment-form-footer{display:none;margin:6px 10px 0;justify-content:flex-end}
.comment-form.has-text .comment-form-footer{display:flex}
.comment-form .replying-to{margin:0 4px 8px}
@media(max-width:560px){#assistantModal .tool-dialog.wide{border-radius:20px}#assistantModal .comments-list{padding:48px 12px 12px}#assistantModal .comment-form{padding:8px 10px 10px}}

/* =====================================================================
   Mathematician profile pictures
   ===================================================================== */
.profile-avatar.has-img,.comment-avatar.has-img{padding:0!important;overflow:hidden;background:none!important;color:transparent;font-size:0}
.profile-avatar.has-img svg,.comment-avatar.has-img svg{display:block;width:100%;height:100%}
.comment-card.is-mine .comment-avatar.has-img{box-shadow:0 0 0 2px var(--color-primary)}

.av-field{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:16px;background:color-mix(in oklab,var(--bg),var(--surface) 40%)}
.av-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:800;font-size:.82rem}
.av-field-head em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--muted);text-align:right}
.av-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.av-opt{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;background:var(--surface);outline:2px solid transparent;outline-offset:2px;transition:transform .15s,outline-color .15s,box-shadow .15s}
.av-opt svg{display:block;width:100%;height:100%}
.av-opt:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 14px rgba(0,0,0,.22)}
.av-opt:focus-visible{outline-color:var(--fg)}
.av-opt.on{outline-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary),transparent 78%)}
.av-opt.on::after{content:"✓";position:absolute;right:0;bottom:0;width:36%;height:36%;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.62rem;font-weight:900}
.av-letter{display:grid;place-items:center;border:1.5px dashed var(--border);background:var(--bg)}
.av-letter span{font-weight:900;font-size:1rem;color:var(--muted)}
@media(max-width:420px){.av-grid{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.av-opt{transition:none}}
/* ===== MDoc tab ===== */
.mm-mdoc{width:100%;padding:28px 0 48px;display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.mm-mdoc.hidden{display:none!important}
.mm-md-hero{text-align:center;max-width:46rem;margin:0 auto}
.mm-md-kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:0.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mm-md-hero h2{margin:0 0 12px;font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05}
.mm-md-acc{color:var(--color-primary)}
.mm-md-hero p{color:var(--muted);line-height:1.7;font-size:clamp(.95rem,2vw,1.08rem)}
.mm-md-wrap{width:100%;max-width:1400px;margin:0 auto}
#gallery-mdoc .mm-vault-grid,#gallery-events .mm-vault-grid{gap:16px}
#gallery-mdoc .mm-vault-problem,#gallery-events .mm-vault-problem{cursor:pointer}
#gallery-mdoc .mm-md-thumb,#gallery-events .mm-md-thumb{position:relative;margin:0 12px;height:190px;border-radius:13px;overflow:hidden;border:1px solid color-mix(in oklab,var(--border),transparent 35%);background:color-mix(in oklab,var(--bg),var(--muted) 8%);display:flex;align-items:center;justify-content:center}
#gallery-mdoc .mm-md-thumb img,#gallery-events .mm-md-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .3s}
#gallery-mdoc .mm-md-thumb img.ok,#gallery-events .mm-md-thumb img.ok{opacity:1}
#gallery-mdoc .mm-md-fallback,#gallery-events .mm-md-fallback{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#gallery-mdoc .mm-md-fallback b,#gallery-events .mm-md-fallback b{display:inline-flex;align-items:center;justify-content:center;width:52px;height:64px;border-radius:10px;background:var(--color-primary);color:#fff;font-size:.8rem;letter-spacing:.06em}
#gallery-mdoc .mm-md-thumb::after,#gallery-events .mm-md-thumb::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--surface),transparent 15%));pointer-events:none}
#gallery-mdoc .mm-md-note,#gallery-events .mm-md-note{margin:10px 16px 0;color:var(--muted);font-size:.84rem;line-height:1.5}
.mm-md-empty{text-align:center;padding:44px 20px;border:1px dashed var(--border);border-radius:22px;background:var(--surface)}
.mm-md-emptyico{font-size:2.4rem}
.mm-md-empty h3{margin:10px 0 6px;font-family:var(--mm-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:1.5rem}
.mm-md-empty p{margin:0;color:var(--muted)}

/* in-app PDF viewer */
.mm-pdfv{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:var(--bg,#fff);color:var(--fg,#111)}
.mm-pdfv[hidden]{display:none}
.mm-pdfv-bar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border);background:var(--surface,#fff)}
.mm-pdfv-title{flex:1;min-width:0;display:flex;flex-direction:column}
.mm-pdfv-title strong{font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-pdfv-title small{color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mm-pdfv-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 13px;border:1px solid var(--border);border-radius:11px;background:transparent;color:inherit;font:inherit;font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.mm-pdfv-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.mm-pdfv-btn svg{width:16px;height:16px;flex:none}
.mm-pdfv-close{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.mm-pdfv-close:hover{color:#fff;filter:brightness(1.08)}
.mm-pdfv-body{position:relative;flex:1;min-height:0;background:color-mix(in oklab,var(--bg),var(--muted) 10%)}
.mm-pdfv-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.mm-pdfv-frame{opacity:0;transition:opacity .25s}.mm-pdfv-frame.ready{opacity:1}
.mm-pdfv-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-weight:700;pointer-events:none;transition:opacity .25s}
.mm-pdfv-load.done{opacity:0}
.mm-pdfv-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--color-primary);animation:mmPdfSpin .8s linear infinite}
.mm-pdfv-hint{flex:none;padding:7px 14px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.76rem;text-align:center}
.mm-pdfv-hint a{color:var(--color-primary);font-weight:700}
@keyframes mmPdfSpin{to{transform:rotate(360deg)}}
@media (max-width:560px){.mm-pdfv-btn span:not(.mm-pdfv-ic){display:none}.mm-pdfv-btn{padding:8px 11px}.mm-pdfv-close span{display:inline}}
@media (prefers-reduced-motion:reduce){.mm-pdfv-spin{animation-duration:2s}}
#gallery-mdoc a.mm-vact,#gallery-events a.mm-vact{text-decoration:none;color:inherit}
#gallery-mdoc a.mm-vact:hover,#gallery-events a.mm-vact:hover{text-decoration:none}

/* About: link that is not live yet */
.mm-ab-soon{opacity:.8;cursor:default}
.mm-ab-soon:hover{border-color:var(--border);transform:none}
.mm-ab-soon b{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}

/* About: questions (accordion bars) */
.mm-ab-faq{display:flex;flex-direction:column;gap:10px}
.mm-faq{border:1px solid var(--border);border-radius:16px;background:var(--surface);transition:border-color .2s}
.mm-faq[open],.mm-faq:hover{border-color:var(--color-primary)}
.mm-faq-q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;font-weight:700;font-size:1.02rem;line-height:1.4;-webkit-tap-highlight-color:transparent;border-radius:16px}
.mm-faq-q::-webkit-details-marker{display:none}
.mm-faq-q:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.mm-faq-ch{flex:none;width:10px;height:10px;margin-right:4px;border-right:2.5px solid var(--color-primary);border-bottom:2.5px solid var(--color-primary);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.mm-faq[open] .mm-faq-ch{transform:rotate(-135deg) translateY(-2px)}
.mm-faq-a{padding:0 18px 18px;color:var(--muted);line-height:1.7;font-size:.96rem}
.mm-faq[open] .mm-faq-a{animation:mmFaqIn .28s ease}
.mm-faq-a p{margin:0}
.mm-faq-a ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:6px}
.mm-faq-a li::marker{color:var(--color-primary)}
@keyframes mmFaqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mm-faq[open] .mm-faq-a{animation:none}.mm-faq-ch{transition:none}}

/* About tab: no "Thank you / copyright" footer; keep the last card clear of the bottom bar */
html[data-view="about"] .site-footer{display:none!important}
html[data-view="about"] .mm-about{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* About: hide the intro paragraph when it is empty */
.mm-ab-hero p:empty{display:none}

/* MDoc: filter bar + night view */
#gallery-mdoc .mm-md-wrap .mm-vault-fbar,#gallery-events .mm-md-wrap .mm-vault-fbar{margin-bottom:16px}
#gallery-mdoc .mm-fb-foot #mmMdSummary,#gallery-events .mm-fb-foot #mmMdSummary{color:var(--muted);font-size:.84rem;font-weight:700}
html[data-night="dim"] .mm-md-thumb img,html[data-night="dim"] .mm-pdfv-frame{filter:brightness(.82) contrast(.95)}
html[data-night="invert"] .mm-md-thumb img,html[data-night="invert"] .mm-pdfv-frame{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
html[data-night="invert"] .mm-md-thumb{background:#111}
.mm-pdfv-btn[aria-pressed="true"]{background:#facc15;color:#1a1a1a;border-color:transparent}
.mm-pdfv-btn[aria-pressed="true"]:hover{color:#1a1a1a}

/* MDoc cover thumbnails (transparent cut-out tickets): show the whole ticket, no box, no fade, no night filter */
#gallery-mdoc .mm-md-thumb.mm-md-cover,#gallery-events .mm-md-thumb.mm-md-cover{height:auto;aspect-ratio:960/557;overflow:visible;border:0;background:transparent}
#gallery-mdoc .mm-md-thumb.mm-md-cover::after,#gallery-events .mm-md-thumb.mm-md-cover::after{display:none}
#gallery-mdoc .mm-md-thumb.mm-md-cover img,#gallery-events .mm-md-thumb.mm-md-cover img{inset:auto;position:static;width:100%;height:100%;object-fit:contain;object-position:center;opacity:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
html[data-night="dim"] #gallery-mdoc .mm-md-thumb.mm-md-cover img,#gallery-events .mm-md-thumb.mm-md-cover img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.28)) brightness(.9)}
html[data-night="invert"] #gallery-mdoc .mm-md-thumb.mm-md-cover,#gallery-events .mm-md-thumb.mm-md-cover{background:transparent}
html[data-night="invert"] #gallery-mdoc .mm-md-thumb.mm-md-cover img,#gallery-events .mm-md-thumb.mm-md-cover img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)) brightness(.9)}


/* =====================================================================================================
   PROBLEM VIEWER REDESIGN  (opens when you tap a Regular or Special problem)
   One clean action bar under the picture:  [ Like  Save  Comment  Share ]            [ Night  Download ]
   Everything follows the site theme (light / dark) through --surface, --fg, --border, --color-primary.
   This block comes last on purpose: it replaces the older, layered toolbar / download / night rules.
   ===================================================================================================== */
#imageModal{--mm-saved:#d97706;--mm-like:#e11d48}
html[data-theme="dark"] #imageModal{--mm-saved:#fbbf24;--mm-like:#fb7185}

/* ---- picture + close ---- */
#imageModal .image-viewer{width:min(100vw,1040px);background:var(--bg)}
#imageModal #modalImg{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 118px);max-height:calc(100dvh - 118px);margin:0 auto;object-fit:contain}
#imageModal .modal-close{width:38px;height:38px;top:12px;margin:12px 12px -50px 0;font-size:1.35rem;border:1px solid var(--border);background:color-mix(in oklab,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,.2)}
#imageModal .modal-close:hover{transform:scale(1.06);border-color:var(--color-primary)}

/* ---- the action bar ---- */
#imageModal .problem-toolbar{
  position:static;top:auto;right:auto;bottom:auto;left:auto;transform:none;order:2;
  box-sizing:border-box;width:calc(100% - 24px);max-width:none;margin:12px 12px 6px;padding:8px;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px 14px;
  border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--fg);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 30px rgba(0,0,0,.10);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#imageModal .mm-bar-main,#imageModal .mm-bar-tools{display:flex;align-items:center;gap:6px;min-width:0}
#imageModal .mm-bar-tools{gap:8px;flex:0 0 auto}

/* Like / Save / Comment / Share */
#imageModal .problem-action{
  position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
  width:auto;min-width:0;height:42px;min-height:42px;padding:0 15px;
  border:1px solid transparent;border-radius:999px;
  background:color-mix(in oklab,var(--fg) 7%,transparent);color:var(--fg);
  font:inherit;font-size:.82rem;font-weight:750;line-height:1;white-space:nowrap;letter-spacing:0;
  box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .14s ease;
}
#imageModal .problem-action:hover{background:color-mix(in oklab,var(--fg) 13%,transparent);color:var(--fg);transform:none;box-shadow:none;border-color:transparent}
#imageModal .problem-action:active{transform:scale(.95)}
#imageModal .problem-action:focus-visible,#imageModal .download-btn:focus-visible,#imageModal .mm-viewer-night:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
#imageModal .action-icon{display:inline-flex;width:20px;height:20px;font-size:0;line-height:0;flex:0 0 auto}
#imageModal .action-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
#imageModal .action-label{font-size:inherit}
#imageModal .action-count{display:inline-block;min-width:0;margin:0;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;opacity:.8}
#imageModal .problem-action.no-count .action-count{display:none}

#imageModal .problem-action.liked{background:color-mix(in oklab,var(--mm-like) 14%,transparent);color:var(--mm-like);font-weight:800}
#imageModal .problem-action.liked .action-icon svg{fill:currentColor;animation:mmHeartPop .42s cubic-bezier(.2,.8,.2,1)}
#imageModal .problem-action.saved{background:color-mix(in oklab,var(--mm-saved) 16%,transparent);color:var(--mm-saved);border-color:transparent;font-weight:800}
#imageModal .problem-action.saved .action-icon svg{fill:currentColor}
#imageModal .problem-action.saved:hover,#imageModal .problem-action.liked:hover{background:color-mix(in oklab,currentColor 20%,transparent)}
@keyframes mmHeartPop{0%{transform:scale(.7)}45%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Night view */
#imageModal .mm-viewer-night{
  position:static;top:auto;left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--fg);font:inherit;font-size:.82rem;font-weight:750;line-height:1;white-space:nowrap;
  box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .14s ease;
}
#imageModal .mm-viewer-night:hover{background:color-mix(in oklab,var(--fg) 8%,transparent)}
#imageModal .mm-viewer-night:active{transform:scale(.96)}
#imageModal .mm-night-ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#imageModal .mm-viewer-night[aria-pressed="true"]{background:#facc15;color:#1a1a1a;border-color:transparent}
#imageModal .mm-viewer-night[aria-pressed="true"] .mm-night-ic{fill:currentColor}

/* Download */
#imageModal .download-btn{
  position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:42px;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  background:var(--color-primary);color:#fff;font:inherit;font-size:.82rem;font-weight:800;line-height:1;white-space:nowrap;
  box-shadow:0 5px 14px color-mix(in oklab,var(--color-primary) 38%,transparent);transform:none;will-change:auto;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,box-shadow .18s ease,transform .14s ease;
}
#imageModal .download-btn:hover{background:color-mix(in oklab,var(--color-primary),black 12%);transform:translateY(-1px);box-shadow:0 8px 18px color-mix(in oklab,var(--color-primary) 42%,transparent)}
#imageModal .download-btn:active{transform:scale(.96)}
#imageModal .download-btn svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#imageModal .download-btn .dl-ok{display:none}
#imageModal .download-btn.done .dl-ok{display:block}
#imageModal .download-btn.done .dl-ic{display:none}

/* ---- tablets / phones: two tidy rows ---- */
@media (max-width:820px){
  #imageModal .problem-toolbar{flex-direction:column;align-items:stretch;gap:8px;width:calc(100% - 16px);margin:10px 8px 4px;padding:8px;border-radius:20px}
  #imageModal .mm-bar-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #imageModal .mm-bar-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #imageModal .problem-action{width:100%;padding:0 6px}
  #imageModal .mm-viewer-night,#imageModal .download-btn{width:100%}
  #imageModal #modalImg{max-height:calc(100vh - 178px);max-height:calc(100dvh - 178px)}
}
@media (max-width:560px){
  #imageModal #modalImg{width:100%}
  /* icon on top, label below, like count as a small badge */
  #imageModal .problem-action{flex-direction:column;gap:5px;height:58px;min-height:58px;border-radius:15px;font-size:.7rem}
  #imageModal .action-icon,#imageModal .action-icon svg{width:21px;height:21px}
  #imageModal .action-count{position:absolute;top:5px;right:6px;min-width:17px;height:17px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:var(--mm-like);color:#fff;font-size:.62rem;font-weight:900;opacity:1}
  #imageModal .modal-close{width:34px;height:34px;top:10px;margin:10px 10px -44px 0;font-size:1.2rem}
}
@media (max-width:340px){
  #imageModal .mm-night-label{font-size:.74rem}
  #imageModal .problem-action{font-size:.64rem}
}

/* =====================================================================================================
   SIMILAR / MORE PROBLEMS  (under the action bar)
   ===================================================================================================== */
#imageModal .mm-related{order:5;width:100%;box-sizing:border-box;margin-top:10px;padding:20px 14px 40px;color:var(--fg);border-top:1px solid var(--border)}
#imageModal .mm-rel-head{margin:4px 0 14px;display:flex;align-items:center;gap:10px;font-size:1.08rem;font-weight:900;letter-spacing:.005em;color:var(--fg)}
#imageModal .mm-rel-head::before{content:"";flex:0 0 4px;height:1.15em;border-radius:4px;background:var(--color-primary)}
#imageModal .mm-rel-count{margin-left:2px;padding:2px 9px;border-radius:99px;background:color-mix(in oklab,var(--fg) 8%,transparent);color:var(--muted);font-size:.72rem;font-weight:800}
#imageModal .mm-rel-grid + .mm-rel-head{margin-top:30px}
#imageModal .mm-rel-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}

#imageModal .mm-rel-item{
  box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;cursor:pointer;
  background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
#imageModal .mm-rel-item:hover,#imageModal .mm-rel-item:focus-visible{transform:translateY(-3px);background:var(--surface);border-color:color-mix(in oklab,var(--color-primary),transparent 45%);box-shadow:0 14px 28px rgba(0,0,0,.15)}
#imageModal .mm-rel-item:active{transform:scale(.98)}
#imageModal .mm-rel-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:1px solid var(--border)}
#imageModal .mm-rel-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.22),transparent 38%)}
#imageModal .mm-rel-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s ease}
#imageModal .mm-rel-item:hover .mm-rel-thumb img{transform:scale(1.045)}
#imageModal .mm-rel-kind{position:absolute;z-index:1;top:8px;left:8px;padding:3px 8px;border-radius:99px;background:rgba(15,23,42,.78);color:#fff;font-size:.6rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#imageModal .mm-rel-kind.special{background:var(--color-primary)}
#imageModal .mm-rel-info{display:flex;flex-direction:column;flex:1;gap:8px;padding:11px 13px 13px}
#imageModal .mm-rel-title{min-height:calc(1.3em * 2);font-size:.9rem;font-weight:800;line-height:1.3;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#imageModal .mm-rel-open{margin-top:auto;display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;color:var(--color-primary)}
#imageModal .mm-rel-open svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
#imageModal .mm-rel-item:hover .mm-rel-open svg{transform:translateX(3px)}

@media (max-width:560px){
  #imageModal .mm-related{padding:16px 10px 34px}
  #imageModal .mm-rel-head{font-size:1rem}
  #imageModal .mm-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #imageModal .mm-rel-item{border-radius:14px}
  #imageModal .mm-rel-info{padding:9px 10px 11px;gap:6px}
  #imageModal .mm-rel-title{font-size:.8rem}
  #imageModal .mm-rel-open{display:none}
  #imageModal .mm-rel-kind{top:6px;left:6px;font-size:.56rem;padding:2px 7px}
}
@media (prefers-reduced-motion:reduce){
  #imageModal .mm-rel-item,#imageModal .mm-rel-thumb img,#imageModal .problem-action,#imageModal .download-btn,#imageModal .mm-viewer-night{transition:none}
  #imageModal .mm-rel-item:hover,#imageModal .mm-rel-item:hover .mm-rel-thumb img{transform:none}
  #imageModal .problem-action.liked .action-icon svg{animation:none}
}

/* =====================================================================================================
   MOBILE TOP BAR in the problem viewer:  [ < Back ]  problem title  [ < ] [ > ]   (X stays at the far right)
   Shown on phones and tablets only; on desktop the X button and the keyboard arrows are enough.
   ===================================================================================================== */
#imageModal .mm-viewer-top{display:none}
@media (max-width:820px){
  #imageModal .mm-viewer-top{
    display:flex;position:sticky;top:0;z-index:8;box-sizing:border-box;flex:0 0 auto;width:100%;height:52px;
    align-items:center;gap:8px;padding:0 56px 0 10px;
    background:color-mix(in oklab,var(--bg) 92%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  }
  /* the X now sits inside the bar, vertically centred */
  #imageModal .modal-close{top:7px;margin:7px 10px -45px 0;z-index:10}
  #imageModal .mm-back-btn{
    display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;height:36px;padding:0 13px 0 6px;border:0;border-radius:999px;
    background:color-mix(in oklab,var(--fg) 9%,transparent);color:var(--fg);font:inherit;font-size:.86rem;font-weight:800;line-height:1;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .18s ease,transform .14s ease;
  }
  #imageModal .mm-back-btn:active{transform:scale(.95);background:color-mix(in oklab,var(--fg) 16%,transparent)}
  #imageModal .mm-back-btn svg,#imageModal .mm-nav-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  #imageModal .mm-top-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:800;color:var(--fg);text-align:left}
  #imageModal .mm-top-nav{display:flex;gap:4px;flex:0 0 auto}
  #imageModal .mm-nav-btn{
    display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;
    background:var(--surface);color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,transform .14s ease;
  }
  #imageModal .mm-nav-btn:active{transform:scale(.9);background:color-mix(in oklab,var(--fg) 12%,var(--surface))}
  #imageModal .mm-back-btn:focus-visible,#imageModal .mm-nav-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
  /* the picture now starts below the 52px bar */
  #imageModal #modalImg{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px)}
}
@media (max-width:560px){
  #imageModal .modal-close{top:9px;margin:9px 10px -43px 0}
}
@media (max-width:360px){
  #imageModal .mm-top-title{display:none}
  #imageModal .mm-viewer-top{justify-content:space-between}
}



/* =====================================================================
   Loading animations (Customize -> Loading animation)
   ===================================================================== */
/* --- host for the alternative loaders; the default graph is untouched --- */
.mm-alt-host{display:none;width:100%}
html[data-loader] #mmLoader .mm-graph{display:none}
html[data-loader] #mmLoader .mm-alt-host{display:block}
.mm-loader--preview .mm-alt-host{display:block}
.mm-alt-host svg.mm-ld{display:block;width:100%;height:auto;max-height:44vh;margin:0 auto;overflow:visible}

/* --- drawing styles shared by all six new loaders --- */
.mm-ld{--a:var(--mm-loader-accent,#ff0000)}
.mm-ld path,.mm-ld line,.mm-ld circle,.mm-ld rect{vector-effect:non-scaling-stroke}
.mm-ld line.g{stroke:#fff;stroke-opacity:.06;stroke-width:1}
.mm-ld line.ax{stroke:#fff;stroke-opacity:.3;stroke-width:1.5}
.mm-ld .trk{fill:none;stroke:#fff;stroke-opacity:.09;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-ld .red{fill:none;stroke:var(--a);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--a) 70%,transparent))}
.mm-ld .gry{fill:none;stroke:#DEDEDE;stroke-opacity:.7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-ld .dim{fill:none;stroke:#DEDEDE;stroke-opacity:.3;stroke-width:1.4;stroke-linecap:round}
.mm-ld .dash{fill:none;stroke:#DEDEDE;stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:4 5}
.mm-ld .dot{fill:#fff;filter:drop-shadow(0 0 8px var(--a))}
.mm-ld .pt{fill:#DEDEDE}
.mm-ld .mid{fill:#8E8E95}
.mm-ld .bar{fill:#DEDEDE;fill-opacity:.17;stroke:#DEDEDE;stroke-opacity:.35;stroke-width:1}
.mm-ld .barlead{fill:var(--a);fill-opacity:.35;stroke:var(--a);stroke-width:1.4}
.mm-ld text{font:italic 600 14px Georgia,"Times New Roman",serif;fill:#8E8E95}
@media(max-width:640px){.mm-ld text{display:none}.mm-ld .red{stroke-width:2.6}}
/* small thumbnail version */
.mm-ld.compact text{display:none}
.mm-ld.compact .red{stroke-width:2.2;filter:none}
.mm-ld.compact .dot{filter:none}
.mm-ld.compact .gry{stroke-width:1.4}
.mm-ld.compact line.g{stroke-opacity:.08}
/* the original default loader, drawn small */
.mm-graph.mm-compact{padding:0}
.mm-graph.mm-compact .yl,.mm-graph.mm-compact .xl,.mm-graph.mm-compact .ax{display:none}
.mm-compact .mm-loader__curves .tr1{stroke-width:7px;filter:none}
.mm-compact .mm-loader__curves .tr2{stroke-width:5px}
.mm-compact .mm-loader__curves .tr3{stroke-width:4px}
.mm-compact .mm-loader__curves .trk{stroke-width:5px}
.mm-compact .mm-loader__curves line{stroke-width:3px}
.mm-compact .mm-loader__curves line.axis{stroke-width:4px}
.mm-compact .mm-loader__curves .dot{filter:none}

/* --- the picker in Customize --- */
.mm-ld-wrap{max-width:980px}
.mm-ld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:14px 0 18px}
.mm-ld-card{position:relative;display:flex;flex-direction:column;gap:4px;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:10px 10px 13px;border:1px solid var(--border);border-radius:16px;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.mm-ld-card:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--border));transform:translateY(-1px)}
.mm-ld-card.on{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.mm-ld-card:focus-visible,.mm-ld-prev:focus-visible,.mm-ld-close:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 45%,transparent);outline-offset:2px}
.mm-ld-thumb{--mm-loader-accent:var(--color-primary,#e00000);display:flex;align-items:center;justify-content:center;aspect-ratio:10/4.6;margin-bottom:8px;padding:8px 10px;overflow:hidden;border-radius:11px;background:#0F0F0F;color:#DEDEDE}
.mm-ld-host{display:block;width:100%}
.mm-ld-host svg.mm-ld{display:block;width:100%;height:auto}
.mm-ld-host .mm-graph{width:100%}
.mm-ld-check{position:absolute;top:18px;right:18px;display:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.8rem;font-weight:900;line-height:1}
.mm-ld-card.on .mm-ld-check{display:flex}
.mm-ld-name{display:block;padding:0 3px;font-weight:800;font-size:.9375rem}
.mm-ld-badge{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;font-size:.6875rem;font-weight:800;vertical-align:1px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent)}
.mm-ld-desc{display:block;padding:0 3px;color:var(--muted);font-size:.8125rem;line-height:1.4}
.mm-ld-prev{font:inherit;font-size:.875rem;font-weight:800;min-height:44px;padding:0 18px;border:1px solid var(--color-primary);border-radius:11px;background:var(--color-primary);color:#fff;cursor:pointer}
.mm-ld-prev:hover{filter:brightness(1.08)}
.mm-pt-long{display:inline}
@media(max-width:600px){.mm-pt-long{display:none}}
/* --- full-screen preview --- */
.mm-loader--preview{cursor:pointer}
.mm-ld-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:2;font:700 .8125rem "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.04em;color:#DEDEDE;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.mm-ld-close:hover{background:rgba(255,255,255,.16)}
@media(prefers-reduced-motion:reduce){.mm-ld-card{transition:none}.mm-ld-card:hover{transform:none}}


/* ============================================================
   Top bar (YouTube style): logo left · theme · search · bell · profile
   ============================================================ */
.site-header{margin:-1rem -1rem 0;padding:0 1rem;border-radius:0}
.mm-hb{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.mm-hb .mm-brand{margin:0;padding:0;min-height:0;display:block;text-align:left}
.mm-hb .mm-logo{height:28px;width:auto;aspect-ratio:810/167}
@media (min-width:1100px){.mm-hb .mm-logo{height:30px;width:auto}}
.mm-hb-acts{display:flex;align-items:center;gap:4px}
.mm-hb-wrap{position:relative}
.mm-hb-btn{position:relative;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.mm-hb-btn:hover,.mm-hb-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.mm-hb-btn svg,.mm-hb-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-hb-sun{display:none}html[data-theme="dark"] .mm-hb-sun{display:grid}html[data-theme="dark"] .mm-hb-moon{display:none}
.mm-hb-badge{position:absolute;top:2px;left:21px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#f00;color:#fff;font:700 10px/14px var(--mm-font-body,system-ui);text-align:center;border:2px solid var(--bg);box-sizing:border-box}
.mm-hb-badge[hidden]{display:none}
.mm-hb-av{width:32px;height:32px;margin-left:6px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--color-primary),var(--acc-deep,#941010));color:#fff;display:grid;place-items:center;font-weight:800}
.mm-hb-av>span,.mm-hb-av.big{display:grid;place-items:center;width:100%;height:100%}
.mm-hb-av img,.mm-hb-av svg{width:100%;height:100%;object-fit:cover;display:block}
.mm-hb-av:focus-visible,.mm-hb-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.mm-hb-pop{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-height:min(70vh,520px);overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-strong);z-index:40}
.mm-hb-pop[hidden]{display:none}
.mm-hb-menu{width:260px;padding:6px}
.mm-hb-pophead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.mm-hb-pophead button{border:0;background:none;color:var(--color-primary);font-weight:700;font-size:.78rem;cursor:pointer}
.mm-hb-n{display:flex;gap:12px;padding:12px 14px;text-decoration:none;color:inherit;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.mm-hb-n:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.mm-hb-n.is-new{background:color-mix(in srgb,var(--color-primary) 8%,transparent)}
.mm-hb-nic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:#fff}
.mm-hb-nic svg{width:18px;height:18px;fill:currentColor}
.mm-hb-nt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-hb-nt b{font-size:.85rem}.mm-hb-nt em{font-style:normal;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-hb-nt small{font-size:.72rem;color:var(--muted)}
.mm-hb-empty{display:flex;flex-direction:column;gap:4px;padding:28px 16px;text-align:center}.mm-hb-empty span{color:var(--muted);font-size:.85rem}
.mm-hb-me{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.mm-hb-me .mm-hb-av{width:44px;height:44px;margin:0;flex:none;cursor:default}
.mm-hb-me strong{display:block;font-size:.92rem}.mm-hb-me em{font-style:normal;font-size:.78rem;color:var(--muted)}
.mm-hb-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none;color:inherit;font-weight:600;font-size:.9rem}
.mm-hb-item:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
@media (max-width:520px){
  .mm-hb{height:52px}.mm-hb .mm-logo{height:24px}
  .mm-hb-wrap{position:static}
  .mm-hb-pop,.mm-hb-menu{position:fixed;top:58px;left:8px;right:8px;width:auto}
  .mm-hb-btn{width:38px;height:38px}
}
@media (max-width:360px){#mmHbTheme{display:none}}


/* Bottom bar: About moved to the profile menu, so centre the remaining tabs as one group */
@media (min-width:768px){
  .mm-bnav-inner{justify-content:center}
  .mm-bnav-links{flex:none}
  .mm-bnav-left{justify-content:center}
}
@media (max-width:767.98px){
  .mm-mbar>*{white-space:nowrap}
  .mm-mbar>* span{white-space:nowrap}
}
@media (max-width:430px){.mm-mbar>*{font-size:0.5625rem;letter-spacing:.02em}}


/* Top bar: About Us sits directly in the bar */
.mm-hb-about{display:inline-flex;align-items:center;gap:7px;height:36px;margin-left:6px;padding:0 14px 0 10px;border:1px solid var(--border);border-radius:18px;color:var(--fg);text-decoration:none;font-weight:600;font-size:.84rem;white-space:nowrap;transition:background .15s,border-color .15s}
.mm-hb-about svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-hb-about:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.mm-hb-about[aria-current="page"]{border-color:var(--color-primary);color:var(--color-primary)}
@media (max-width:520px){.mm-hb-about{height:34px;padding:0 11px 0 8px;font-size:.78rem;gap:5px;margin-left:2px}.mm-hb-about svg{width:18px;height:18px}}

/* Bottom bar: "YOU" tab shows your picture, name and id */
.mm-you-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--color-primary),var(--acc-deep,#941010));color:#fff;font-weight:800;font-size:.75rem;text-transform:none}
.mm-you-av img,.mm-you-av svg{width:100%;height:100%;object-fit:cover;display:block}
.mm-you-av>span{display:grid;place-items:center;width:100%;height:100%}
@media (min-width:768px){
  .mm-bnav-cta>.mm-you{gap:9px;justify-content:flex-start;min-width:0;max-width:260px;padding:0 16px 0 8px}
  .mm-you::after{display:none}
  .mm-you-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;line-height:1.15;text-align:left}
  .mm-you-txt b{font-size:.8125rem;font-weight:700;letter-spacing:.03em}
  .mm-you-txt small{font-size:.625rem;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:767.98px){.mm-mbar .mm-you-av{width:24px;height:24px;font-size:.7rem}}


/* π in the profile id is yellow */
.mm-pi{color:#ffc400;font-weight:800}
html[data-theme="light"] .mm-pi{color:#f2b400;text-shadow:0 0 1px rgba(120,80,0,.35)}
/* comment maths */
.comment-bubble p mjx-container,.comment-math-preview mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}
.comment-bubble p mjx-container[display="true"],.comment-math-preview mjx-container[display="true"]{margin:.5em 0}
.comment-math-preview{margin:0 0 8px;padding:8px 12px;border:1px dashed var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,var(--color-primary));color:var(--fg);font-size:.92rem;line-height:1.6;overflow-wrap:anywhere;max-height:30vh;overflow:auto}
.comment-math-preview[hidden]{display:none}

/* Phones: intro text a touch smaller */
@media (max-width:767.98px){.intro{font-size:.92rem}}

@media (max-width:767.98px){.mm-mbar .mm-you-av{width:22px;height:22px;font-size:.66rem}}

/* --- extra classes used by loaders 07-14 --- */
.mm-ld .str{fill:none;stroke:#DEDEDE;stroke-opacity:.34;stroke-width:1.1}
.mm-ld .area{fill:var(--a);fill-opacity:.22;stroke:none}
.mm-ld text.t2{font:600 12px "Hanken Grotesk",system-ui,sans-serif;font-style:normal;fill:#6f6f78}
.mm-ld.compact .str{stroke-opacity:.45}

/* --- phones: two loader cards per row --- */
@media(max-width:600px){
  .mm-ld-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mm-ld-card{padding:7px 7px 10px;border-radius:14px;min-width:0}
  .mm-ld-thumb{padding:5px 6px;border-radius:9px;margin-bottom:5px}
  .mm-ld-check{top:12px;right:12px;width:20px;height:20px;font-size:.7rem}
  .mm-ld-name{font-size:.8125rem;line-height:1.25;padding:0 2px}
  .mm-ld-badge{display:table;margin:3px 0 0;padding:1px 7px;font-size:.625rem}
  .mm-ld-desc{font-size:.71875rem;line-height:1.35;padding:0 2px}
}

/* --- top bar: nudge the logo a little to the right --- */
.mm-hb .mm-brand{padding-left:12px}
@media (min-width:1100px){.mm-hb .mm-brand{padding-left:16px}}

/* =====================================================================
   Scroller (Customize -> Themes -> Scroller). Off by default; Home page only.
   ===================================================================== */
.mm-scr{display:none;position:fixed;right:0;top:66px;bottom:76px;width:16px;z-index:1500;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
html.mm-scr-on[data-view="mpotd"] .mm-scr{display:block}
.mm-scr.none,body.modal-open .mm-scr{display:none!important}
.mm-scr-rail{position:absolute;top:0;bottom:0;right:6px;width:4px;border-radius:4px;background:color-mix(in srgb,var(--fg) 9%,transparent);transition:background .15s ease}
.mm-scr-thumb{position:absolute;top:0;right:4px;width:8px;min-height:44px;border-radius:8px;background:var(--color-primary);opacity:.55;transition:opacity .2s ease,width .15s ease,right .15s ease;will-change:transform;box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 55%,transparent)}
.mm-scr.awake .mm-scr-thumb,.mm-scr:hover .mm-scr-thumb,.mm-scr.drag .mm-scr-thumb,.mm-scr-thumb:focus-visible{opacity:1}
.mm-scr:hover .mm-scr-thumb,.mm-scr.drag .mm-scr-thumb{width:10px;right:3px}
.mm-scr:hover .mm-scr-rail,.mm-scr.drag .mm-scr-rail{background:color-mix(in srgb,var(--fg) 16%,transparent)}
.mm-scr-thumb:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.mm-scr-bubble{position:absolute;right:calc(100% + 8px);top:0;transform:translateY(-50%);padding:7px 13px;border-radius:999px;background:var(--color-primary);color:#fff;font:800 .8125rem/1 "Hanken Grotesk",system-ui,sans-serif;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .12s ease}
.mm-scr.drag .mm-scr-bubble{opacity:1}
/* phones / touch: a roomier hit area, so it is easy to grab */
@media (hover:none),(pointer:coarse){
  .mm-scr{width:26px}
  .mm-scr-rail{right:8px}
  .mm-scr-thumb{right:6px;width:7px}
  .mm-scr.drag .mm-scr-thumb{width:11px;right:4px}
}
/* hide the browser's own bar on Home while the Scroller is on (the gutter stays, so nothing shifts) */
html.mm-scr-on[data-view="mpotd"] body{scrollbar-color:transparent transparent}
html.mm-scr-on[data-view="mpotd"] body::-webkit-scrollbar{width:15px;background:transparent}
html.mm-scr-on[data-view="mpotd"] body::-webkit-scrollbar-track,
html.mm-scr-on[data-view="mpotd"] body::-webkit-scrollbar-thumb{background:transparent}

/* ===== Events tab + Diwali test ===== */
html[data-view="events"] .site-footer{display:none!important}
.mm-events{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.mm-ev-card{cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.mm-ev-card:hover{transform:translateY(-3px);border-color:#ff9a1f;box-shadow:0 16px 34px rgba(255,122,0,.18)}
.mm-ev-cover{position:relative;margin:0 0 12px;aspect-ratio:960/557;overflow:hidden;background:#2a0a14}
.mm-ev-cover img{display:block;width:100%;height:100%;object-fit:cover}
.mm-ev-flame{transform-origin:80px 50px;animation:mmEvFlame 1.6s ease-in-out infinite alternate}
@keyframes mmEvFlame{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.08,1.14) rotate(2deg)}}
.mm-ev-date{position:absolute;left:12px;bottom:10px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd25a;background:rgba(0,0,0,.45);padding:4px 9px;border-radius:999px}
.mm-ev-card .mm-md-note{margin:2px 0 10px}
html.mm-ev-open,html.mm-ev-open body{overflow:hidden}
.mm-ev-test{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;color:#fff3df;background:radial-gradient(90% 60% at 50% -10%,#7a2410 0,#2a0a14 55%,#12060b 100%)}
.mm-ev-test[hidden]{display:none}
.mm-ev-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,210,90,.25);background:rgba(0,0,0,.35)}
.mm-ev-bt{flex:1;min-width:0;display:flex;flex-direction:column}
.mm-ev-bt small{color:#ffd25a;font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.mm-ev-bt strong{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-ev-prog{font-size:.78rem;color:#ffd25a;white-space:nowrap}
.mm-ev-x{border:0;border-radius:10px;width:38px;height:38px;font-size:1rem;color:#fff3df;background:rgba(255,255,255,.12);cursor:pointer}
.mm-ev-chips{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,210,90,.12)}
.mm-ev-chips::-webkit-scrollbar{display:none}
.mm-ev-chip{flex:none;min-width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,210,90,.4);background:transparent;color:#ffe9bd;font-weight:800;cursor:pointer}
.mm-ev-chip.ok{background:rgba(255,160,40,.22);border-color:#ff9a1f}
.mm-ev-chip.on{background:linear-gradient(135deg,#ffb52e,#ff6a00);color:#2a0a14;border-color:transparent}
.mm-ev-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(32px + env(safe-area-inset-bottom,0px));width:100%;max-width:860px;margin:0 auto}
.mm-ev-card2{border:1px solid rgba(255,210,90,.3);border-radius:18px;padding:18px;background:rgba(255,255,255,.05);box-shadow:0 0 40px rgba(255,140,0,.08)}
.mm-ev-tag{display:inline-block;margin-bottom:12px;font-size:.72rem;font-weight:800;letter-spacing:.07em;color:#2a0a14;background:#ffc24a;padding:4px 10px;border-radius:999px}
.mm-ev-math{line-height:1.75;font-size:1.02rem;overflow-wrap:anywhere}
.mm-ev-math p{margin:0 0 10px}.mm-ev-math ul{margin:0 0 10px;padding-left:20px}
.mm-ev-math mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;max-width:100%;margin:.7em 0!important}
.mm-ev-part{border:1.5px dashed rgba(255,210,90,.5);border-radius:12px;padding:10px 14px;margin:10px 0}
.mm-ev-part>b{color:#ffd25a}
.mm-ev-stm{margin:0 0 12px;border:1px solid rgba(255,210,90,.25);border-radius:12px;padding:8px 12px}
.mm-ev-stm summary{cursor:pointer;color:#ffd25a;font-weight:700;font-size:.85rem}
.mm-ev-hint{font-size:.82rem;opacity:.75;margin:12px 0}
.mm-ev-opts{display:flex;flex-direction:column;gap:10px}
.mm-ev-opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(255,210,90,.3);background:rgba(0,0,0,.25);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.mm-ev-opt>b{color:#ffd25a;flex:none}.mm-ev-opt>span{flex:1;min-width:0}
.mm-ev-opt.on{border-color:#ff9a1f;background:rgba(255,140,0,.2);box-shadow:0 0 0 2px rgba(255,154,31,.35) inset}
.mm-ev-int{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:.85rem}
.mm-ev-int input{font:inherit;font-size:1.4rem;font-weight:700;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(255,210,90,.5);background:rgba(0,0,0,.3);color:#fff3df;max-width:260px}
.mm-ev-gate .mm-ev-int input{max-width:none;width:100%;font-size:1.1rem;letter-spacing:.04em}
.mm-ev-err{margin:12px 0 0;color:#ff9a8a;font-weight:700;font-size:.85rem}
.mm-ev-err[hidden]{display:none}
.mm-ev-intro h2{margin:0 0 6px;font-size:1.5rem;color:#fff3df}
.mm-ev-rules{margin:12px 0 16px;padding-left:20px;line-height:1.7;font-size:.95rem}
.mm-ev-rules li{margin-bottom:6px}.mm-ev-rules b{color:#ffd25a}
.mm-ev-agree{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(255,210,90,.4);background:rgba(0,0,0,.25);cursor:pointer;line-height:1.5}
.mm-ev-agree input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:#ff9a1f}
.mm-ev-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.mm-ev-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.mm-ev-bar,.mm-ev-chips,.mm-ev-body{position:relative;z-index:1}
.mm-ev-res{padding-bottom:22px}
.mm-ev-hero{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.mm-ev-ring{--p:0;flex:none;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ffb52e calc(var(--p)*1%),rgba(255,255,255,.1) 0)}
.mm-ev-ring>div{width:104px;height:104px;border-radius:50%;background:#1a0b10;display:grid;place-content:center;text-align:center}
.mm-ev-ring b{font-size:2.1rem;line-height:1;color:#ffd25a}.mm-ev-ring small{font-size:.72rem;opacity:.75}
.mm-ev-hero h2{margin:8px 0 0;font-size:1.7rem;color:#fff3df}
.mm-ev-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:6px 0 4px}
.mm-ev-stats div{border-radius:14px;padding:12px 8px;text-align:center;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
.mm-ev-stats b{display:block;font-size:1.6rem;line-height:1.1}.mm-ev-stats span{font-size:.75rem;opacity:.8;font-weight:700;letter-spacing:.04em}
.mm-ev-stats .g b{color:#7dffa6}.mm-ev-stats .p b{color:#ffd25a}.mm-ev-stats .r b{color:#ff8f7e}.mm-ev-stats .s b{color:#b9b0c9}
.mm-ev-h3{margin:22px 0 8px;font-size:1.05rem;color:#ffd25a;letter-spacing:.03em}
.mm-ev-tips{margin:0;padding-left:20px;line-height:1.65;font-size:.93rem}.mm-ev-tips li{margin-bottom:5px}.mm-ev-tips b{color:#ffd25a}
.mm-ev-bars{margin:12px 0 0;display:grid;gap:9px}
.mm-ev-bar2{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;font-size:.85rem}
.mm-ev-bar2>div{height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.mm-ev-bar2>div i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffb52e,#ff6a00)}
.mm-ev-bar2>div.x{display:flex;gap:12px;background:none;overflow:visible;height:auto}.mm-ev-bar2 .x b.g{color:#7dffa6}.mm-ev-bar2 .x b.r{color:#ff8f7e}
.mm-ev-tw{overflow-x:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.mm-ev-tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.mm-ev-tbl th,.mm-ev-tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.mm-ev-tbl th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;background:rgba(0,0,0,.25)}
.mm-ev-tbl td.k{color:#7dffa6;font-weight:700}.mm-ev-tbl td.m.neg{color:#ff8f7e}
.mm-ev-chip2{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:800;white-space:nowrap}
.mm-ev-chip2.g{background:rgba(125,255,166,.16);color:#7dffa6}.mm-ev-chip2.p{background:rgba(255,210,90,.16);color:#ffd25a}
.mm-ev-chip2.r{background:rgba(255,143,126,.16);color:#ff8f7e}.mm-ev-chip2.s{background:rgba(185,176,201,.16);color:#c9c1d8}
.mm-ev-sol{margin:8px 0;border-radius:14px;border:1px solid rgba(255,210,90,.22);background:rgba(0,0,0,.22);overflow:hidden}
.mm-ev-sol>summary{display:flex;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.mm-ev-sol>summary::-webkit-details-marker{display:none}.mm-ev-sol>summary span:nth-child(2){flex:1;font-size:.9rem;opacity:.9}.mm-ev-sol>summary em{color:#7dffa6;font-style:normal;font-weight:800}
.mm-ev-sol[open]>summary{border-bottom:1px solid rgba(255,210,90,.18)}.mm-ev-sol>.mm-ev-math,.mm-ev-sol>.mm-ev-opx{padding:12px 14px}
.mm-ev-opx{list-style:none;margin:0;display:grid;gap:10px}.mm-ev-opx li{padding:10px 12px;border-radius:12px;border-left:4px solid}
.mm-ev-opx li.t{border-color:#7dffa6;background:rgba(125,255,166,.07)}.mm-ev-opx li.f{border-color:#ff8f7e;background:rgba(255,143,126,.07)}
.mm-ev-opx li.t>b{color:#7dffa6}.mm-ev-opx li.f>b{color:#ff8f7e}.mm-ev-opx .you{margin-left:10px;font-size:.7rem;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.14);font-weight:700}
.mm-ev-opx .mm-ev-math{margin-top:6px;font-size:.92rem;line-height:1.6}
@media(max-width:560px){.mm-ev-stats{grid-template-columns:repeat(2,1fr)}.mm-ev-bar2{grid-template-columns:1fr auto}.mm-ev-bar2>span{grid-column:1/-1}.mm-ev-ring{width:112px;height:112px}.mm-ev-ring>div{width:88px;height:88px}}
.mm-ev-note{margin:0 0 16px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,143,126,.5);background:rgba(255,143,126,.12);color:#ffc2b8;font-weight:700;font-size:.9rem}
.mm-ev-opt:disabled{cursor:default}
.mm-ev-foot{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:16px}
.mm-ev-btn{padding:11px 18px;border-radius:12px;border:1.5px solid rgba(255,210,90,.45);background:transparent;color:#ffe9bd;font:inherit;font-weight:700;cursor:pointer}
.mm-ev-btn.ghost{opacity:.8}.mm-ev-btn.pri{margin-left:auto;border-color:transparent;color:#2a0a14;background:linear-gradient(135deg,#ffb52e,#ff6a00)}
.mm-ev-res h2{margin:0 0 6px;font-size:2rem;color:#ffd25a}
.mm-ev-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.mm-ev-list li{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.25)}
.mm-ev-list li>span{flex:1}.mm-ev-list em{font-style:normal;font-size:.8rem}.mm-ev-list .g{color:#7be39a}.mm-ev-list .r{color:#ff9a8a}
@media (prefers-reduced-motion:reduce){.mm-ev-flame{animation:none}}
.mm-ev-math .katex-display,.mm-ev-math mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;max-width:100%}
.mm-ev-opt .katex-display{margin:.5em 0}

.mm-ev-math{max-width:100%;min-width:0}
.mm-ev-card2,.mm-ev-opt,.mm-ev-stm{min-width:0;max-width:100%;box-sizing:border-box}
.mm-ev-opt>span{overflow-x:auto;overflow-y:hidden}
@media (max-width:600px){
  .mm-ev-bar{padding:10px 12px;gap:8px}.mm-ev-chips{padding:8px 12px}
  .mm-ev-body{padding:10px 10px calc(28px + env(safe-area-inset-bottom,0px))}
  .mm-ev-card2{padding:14px 12px;border-radius:14px}
  .mm-ev-math{font-size:.95rem;line-height:1.7}
  .mm-ev-opt{padding:10px;gap:8px;border-radius:12px}
  .mm-ev-part{padding:6px 10px}
  .mm-ev-stm{padding:6px 10px}
  .mm-ev-btn{padding:10px 14px}
  .mm-ev-foot{gap:8px}
}

/* ===== About: Donate us card (donate.js) ===== */
.mm-ab-donate[hidden]{display:none}
.mm-don{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,40px);align-items:center;padding:clamp(20px,4vw,34px);border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%,var(--surface)),var(--surface))}
.mm-don-heart{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 14%,transparent);color:var(--color-primary)}
.mm-don-heart svg{width:22px;height:22px}
.mm-don h4{margin:12px 0 6px;font-size:clamp(1.15rem,3vw,1.5rem);line-height:1.25;color:var(--fg)}
.mm-don p{margin:0;color:var(--muted);line-height:1.65;font-size:.95rem}
.mm-don-amts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mm-don-amt,.mm-don-custom{height:40px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-weight:800;font-size:.9rem}
.mm-don-amt{padding:0 16px;cursor:pointer;transition:background .18s,border-color .18s,transform .14s}
.mm-don-amt:hover{border-color:var(--color-primary)}
.mm-don-amt:active{transform:scale(.95)}
.mm-don-amt[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.mm-don-custom{display:inline-flex;align-items:center;gap:4px;padding:0 14px;width:112px}
.mm-don-custom input{all:unset;width:100%;min-width:0;font-weight:800;font-size:.9rem;color:var(--fg)}
.mm-don-custom input::placeholder{color:var(--muted);font-weight:600}
.mm-don-custom:focus-within,.mm-don-amt:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.mm-don-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mm-don-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--fg);font-weight:800;font-size:.9rem;cursor:pointer;transition:transform .14s,border-color .18s}
.mm-don-btn svg{width:18px;height:18px;flex:none}
.mm-don-btn:hover{border-color:var(--color-primary)}
.mm-don-btn:active{transform:scale(.96)}
.mm-don-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.mm-don-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.mm-don-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:14px;font-size:.85rem}
.mm-don-id small{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
.mm-don-id code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--fg);word-break:break-all;user-select:all}
.mm-don-fine{margin-top:12px!important;font-size:.8rem!important}
.mm-don-qrwrap{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.mm-don-qr{width:clamp(170px,26vw,220px);aspect-ratio:1;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.14);overflow:hidden}
.mm-don-qr svg,.mm-don-qr img{display:block;width:100%;height:100%;object-fit:contain}
.mm-don-soon{grid-template-columns:1fr;text-align:center;justify-items:center}
@media (max-width:640px){.mm-don{grid-template-columns:1fr;justify-items:center;text-align:center}.mm-don-amts,.mm-don-actions,.mm-don-id{justify-content:center}.mm-don-qrwrap{order:-1}}
html[data-night="invert"] .mm-don-qr,html[data-night="dim"] .mm-don-qr{filter:none}

/* Donate card before a UPI ID is added: everything visible but switched off */
.mm-don-off .mm-don-amt:disabled,.mm-don-off .mm-don-btn:disabled,.mm-don-off .mm-don-custom{opacity:.45;cursor:not-allowed;pointer-events:none}
.mm-don-off .mm-don-amt:disabled:hover,.mm-don-off .mm-don-btn:disabled:hover{border-color:var(--border)}
.mm-don-qr-off{display:flex;align-items:center;justify-content:center;text-align:center;background:color-mix(in srgb,var(--muted) 12%,var(--surface));border-style:dashed;box-shadow:none}
.mm-don-qr-off span{color:var(--muted);font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}