/* HSK 1–9 learning evidence matrix: progress, not official proficiency. */
.mm-root{--mm-ink:#233e50;--mm-muted:#60788a;--mm-line:#cfe1e7;--mm-soft:#edf7f9;--mm-card:#fff;--mm-accent:#187c8c;background:linear-gradient(130deg,#edf9fa,#f9faf6);border:1px solid var(--mm-line);border-radius:21px;padding:21px;margin:22px 0;color:var(--mm-ink)}
.mm-hero{display:flex;justify-content:space-between;align-items:center;gap:16px}.mm-hero>div:first-child{min-width:0;flex:1}
.mm-kicker{font-size:10px;letter-spacing:.13em;font-weight:850;color:var(--mm-accent)}
.mm-hero h2{font-size:clamp(21px,3vw,29px);margin:8px 0;color:var(--mm-ink)}
.mm-hero p,.mm-note{font-size:11px;line-height:1.85;color:var(--mm-muted)}
.mm-overall{min-width:160px;border-radius:14px;background:#d5eef1;border:1px solid #add9df;padding:16px;display:grid;text-align:center;gap:5px}
.mm-overall strong{font-size:26px;color:#167786}.mm-overall span{font-size:10px;color:#477a83;line-height:1.6}
.mm-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:17px 0}
.mm-summary>div{display:grid;gap:6px;text-align:center;background:var(--mm-card);border:1px solid var(--mm-line);padding:12px 8px;border-radius:11px}
.mm-summary b{font-size:23px;font-variant-numeric:tabular-nums;color:var(--mm-ink)}
.mm-summary span{font-size:10px;color:var(--mm-muted);line-height:1.6}
.mm-filters{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:18px 0}
.mm-filters label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:750}
#mm-level{padding:9px 12px;border:1px solid var(--mm-line);border-radius:9px;background:var(--mm-card);color:var(--mm-ink)}
.mm-filter-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.mm-filter-buttons button{cursor:pointer;border:1px solid var(--mm-line);background:var(--mm-card);color:var(--mm-ink);border-radius:9px;font:700 11px/1.4 inherit;padding:10px 11px}
.mm-filter-buttons button.active{background:#167988;border-color:#167988;color:white}
.mm-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.mm-card{border:1px solid var(--mm-line);border-radius:15px;background:var(--mm-card);padding:16px;min-width:0}
.mm-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}
.mm-level-label{font-size:12px;font-weight:900;letter-spacing:.07em;color:var(--mm-accent)}
.mm-card-head h3{font-size:12px;margin:5px 0;color:var(--mm-ink);font-weight:750}
.mm-card-stat{display:grid;gap:4px;text-align:center;border-radius:10px;padding:8px 11px;background:var(--mm-soft);min-width:55px}
.mm-card-stat strong{font-size:20px;color:var(--mm-ink)}.mm-card-stat span{font-size:9px;color:var(--mm-muted)}
.mm-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mm-skill{background:var(--mm-soft);border-radius:10px;padding:10px;min-width:0;display:grid;align-content:start;gap:7px}
.mm-skill-top,.mm-skill-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.mm-skill-top strong{font-size:11px;color:var(--mm-ink)}
.mm-skill-top span,.mm-skill-bottom span{font-size:9px;color:var(--mm-muted);line-height:1.6}
.mm-skill-bottom .mm-due{color:#b55c38;font-weight:800}
.mm-meter{height:7px;overflow:hidden;border-radius:8px;background:#c9dce2}
.mm-meter>span{height:100%;background:linear-gradient(90deg,#1a8493,#73bbba);display:block;border-radius:8px}
.mm-skill button{background:none;border:0;color:var(--mm-accent);font-weight:850;font-size:10px;text-align:left;padding:2px 0;cursor:pointer;justify-self:start}
.mm-skill button:hover{text-decoration:underline}
.mm-action{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--mm-line);margin-top:13px;padding-top:13px}
.mm-action>div{display:grid;gap:4px;min-width:0;flex:1}
.mm-action strong{font-size:11px;color:var(--mm-ink)}
.mm-action span{font-size:10px;color:var(--mm-muted);line-height:1.6}
.mm-action button{font-size:11px;white-space:nowrap}
.mm-empty{background:var(--mm-card);border:1px solid var(--mm-line);border-radius:12px;padding:18px}
.mm-empty strong{font-size:13px;color:var(--mm-ink)}.mm-empty p{font-size:11px;color:var(--mm-muted)}
.mm-note{margin:16px 0 0}
.mm-root :is(button,select):focus-visible{outline:3px solid #63a5b0;outline-offset:3px}
body.dark .mm-root{--mm-ink:#e5f4fa;--mm-muted:#bdced8;--mm-line:#4f717a;--mm-soft:#304e56;--mm-card:#253d47;--mm-accent:#96e0e6;background:linear-gradient(135deg,#29454d,#273d47)}
body.dark .mm-overall{background:#325963;border-color:#5b8d98}body.dark .mm-overall strong,body.dark .mm-overall span{color:#c1f5f6}
body.dark .mm-meter{background:#496972}body.dark .mm-skill-bottom .mm-due{color:#f2b38f}
body.dark .mm-filter-buttons button.active{background:#2d7781;color:white}
@media(max-width:950px){.mm-levels{grid-template-columns:1fr}}
@media(max-width:630px){.mm-root{padding:14px}.mm-hero{flex-direction:column;align-items:stretch}.mm-overall{min-width:0}.mm-summary{gap:6px}.mm-summary>div{padding:11px 5px}.mm-summary b{font-size:19px}.mm-skill-grid{grid-template-columns:1fr}.mm-action{flex-wrap:wrap}.mm-action button{width:100%}.mm-filters label{width:100%}}