/* MathSheets: inherits your theme's font; tokens can be overridden in Elementor/custom CSS */
.ms-player, .ms-browse {
  --ms-ink: #16324f; --ms-line: #d6e4f2; --ms-accent: #2456c9;
  --ms-ok: #17794f; --ms-bad: #b83232; --ms-paper: #fff;
  color: var(--ms-ink); margin: 1.5em 0;
}
.ms-sheet {
  background-color: var(--ms-paper);
  background-image: linear-gradient(var(--ms-line) 1px, transparent 1px), linear-gradient(90deg, var(--ms-line) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--ms-line); border-radius: 6px; padding: 20px;
}
.ms-sheet-title { margin: 0 0 14px; }
.ms-q {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--ms-paper); border: 1px solid var(--ms-line); border-left: 4px solid var(--ms-line);
  padding: 12px 14px; margin-bottom: 10px;
}
.ms-q.ms-ok { border-left-color: var(--ms-ok); }
.ms-q.ms-bad { border-left-color: var(--ms-bad); }
.ms-num { font-weight: 700; min-width: 1.6em; color: var(--ms-accent); }
.ms-body { flex: 1; min-width: 0; }
.ms-text { margin: 0 0 8px; font-size: 1.1em; }
.ms-input { width: 100%; max-width: 260px; padding: 8px 10px; border: 1px solid #9fb6cf; border-radius: 4px; font: inherit; }
.ms-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-opt { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid #9fb6cf; border-radius: 4px; cursor: pointer; }
.ms-fb { margin: 6px 0 0; font-size: .95em; min-height: 1em; }
.ms-ok .ms-fb { color: var(--ms-ok); }
.ms-bad .ms-fb { color: var(--ms-bad); }
.ms-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ms-btn { padding: 9px 16px; border: 1px solid var(--ms-accent); background: var(--ms-paper); color: var(--ms-accent); border-radius: 4px; font: inherit; cursor: pointer; }
.ms-btn.ms-primary { background: var(--ms-accent); color: #fff; }
.ms-btn:disabled { opacity: .45; cursor: default; }
.ms-btn:focus-visible, .ms-input:focus-visible, .ms-filters select:focus-visible, .ms-filters input:focus-visible, .ms-card:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.ms-score { margin: 0; font-weight: 700; }
.ms-error, .ms-empty { padding: 12px; border: 1px dashed #9fb6cf; }

.ms-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ms-filters select, .ms-filters input { padding: 8px 10px; border: 1px solid #9fb6cf; border-radius: 4px; font: inherit; background: #fff; color: var(--ms-ink); }
.ms-filters input { flex: 1 1 200px; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ms-card { display: block; padding: 14px; border: 1px solid var(--ms-line); border-top: 4px solid var(--ms-accent); border-radius: 4px; background: #fff; color: inherit; text-decoration: none; }
.ms-card:hover { border-color: var(--ms-accent); }
.ms-card img { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.ms-card h3 { margin: 0 0 8px; font-size: 1.05em; }
.ms-tags { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.ms-tag { font-size: .82em; padding: 2px 8px; background: #eaf1fb; border-radius: 10px; }
.ms-meta { margin: 0; font-size: .85em; opacity: .75; }
.ms-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 18px; }
@media (max-width: 520px) { .ms-sheet { padding: 12px; } .ms-q { padding: 10px; } }