/* 舞萌DX 成绩库 —— 跟随 Material 主题变量,零外部依赖 */
#mai {
  --mai-line: var(--md-default-fg-color--lightest);
  --mai-dim: var(--md-default-fg-color--light);
  --mai-card: var(--md-code-bg-color);
  --mai-accent: var(--md-primary-fg-color);
}

/* ---- Rating 曲线 ---- */
#mai .mai-chart { margin: 0 0 1.1rem; }
#mai .mai-chart svg { width: 100%; height: auto; display: block; }
#mai .mai-grid { stroke: var(--mai-line); stroke-width: 1; }
#mai .mai-axis { fill: var(--mai-dim); font-size: 9px; }
#mai .mai-line { fill: none; stroke: var(--mai-accent); stroke-width: 2.2;
                 stroke-linejoin: round; stroke-linecap: round; }
#mai .mai-dot { fill: var(--md-default-bg-color); stroke: var(--mai-accent); stroke-width: 2; }
#mai .mai-dot-last { fill: var(--mai-accent); }
#mai .mai-chart figcaption { font-size: .72rem; color: var(--mai-dim); text-align: center; margin-top: .3rem; }

/* ---- 统计 + 筛选 ---- */
#mai .mai-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
#mai .mai-stat { flex: 1 1 7rem; padding: .55rem .75rem;
                 border: 1px solid var(--mai-line); border-radius: .55rem; }
#mai .mai-stat span { display: block; font-size: .7rem; color: var(--mai-dim); }
#mai .mai-stat b { display: flex; align-items: center; gap: .35rem; font-size: 1.25rem; line-height: 1.4; }

#mai .mai-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
                    margin: 0 0 1rem; }
#mai .mai-filt-label { font-size: .7rem; color: var(--mai-dim); margin-left: .4rem; }
#mai .mai-filt-label:first-child { margin-left: 0; }
#mai .mai-filters button { font: inherit; font-size: .72rem; padding: .12rem .55rem;
                           border: 1px solid var(--mai-line); border-radius: 1rem;
                           background: transparent; color: var(--mai-dim); cursor: pointer; }
#mai .mai-filters button.on { background: var(--mai-accent); border-color: var(--mai-accent);
                              color: var(--md-primary-bg-color); }

/* ---- 成绩卡片 ---- */
#mai .mai-cards { display: flex; flex-direction: column; gap: .45rem; }
#mai .mai-card { display: flex; gap: .7rem; padding: .5rem;
                 background: var(--mai-card); border: 1px solid var(--mai-line); border-radius: .6rem; }
#mai .mai-shot { flex: 0 0 5.2rem; height: 3.4rem; border-radius: .35rem; overflow: hidden;
                 display: block; background: var(--mai-line); }
#mai .mai-shot img { width: 100%; height: 100%; object-fit: cover; }
#mai .mai-meta { min-width: 0; flex: 1; }
#mai .mai-title { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
#mai .mai-sub { font-size: .72rem; color: var(--mai-dim); margin-top: .12rem; }
#mai .mai-when { display: flex; flex-wrap: wrap; gap: .5rem; }
#mai .mai-j { opacity: .85; }
#mai .mai-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .3rem; }
#mai .mai-ach { font-size: .95rem; font-weight: 600; }

#mai .mai-rank { font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: .3rem;
                 color: #fff; background: #8a8f98; }
#mai .mai-r-S { background: #4a90e2; }
#mai .mai-r-SS, #mai .mai-r-SSS { background: #9a5fd0; }
#mai .mai-r-A { background: #3fb54b; }
#mai .mai-r-B { background: #b0763f; }

#mai .mai-dx, #mai .mai-sr { font-size: .7rem; color: var(--mai-dim);
                             border: 1px solid var(--mai-line); border-radius: .3rem; padding: .05rem .35rem; }
#mai .mai-icon { height: 1.5rem; width: auto; border-radius: .25rem; }
#mai .mai-tier { font-size: .68rem; font-weight: 700; color: #fff; border-radius: .3rem;
                 padding: .05rem .4rem; }
#mai .mai-note { color: var(--mai-dim); padding: .6rem 0; }