.ml-app{--wl:#e8e3db;--ok-ink:#2c774b;--ok-fill:#4f9a66;--no-ink:#c51111;--warn:#a8721a;--ai:#b39ce3;--ai-ink:#6f4ab8}

.ml-app .rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 18px;background:#fff;border-bottom:1px solid var(--wb);container-type:inline-size}
.ml-app .rv-student,.ml-app .rv-progress,.ml-app .rv-grade{display:flex;align-items:center;gap:10px;flex:none}
.ml-app .rv-av{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#7e6ad1;color:#fff;font-size:13px;font-weight:600}
.ml-app .rv-meta{display:flex;flex-direction:column;line-height:1.25}
.ml-app .rv-name{font-size:13.5px;font-weight:600;white-space:nowrap}
.ml-app .rv-sub{font-size:11px;color:var(--wm);white-space:nowrap}
.ml-app .rv-div{width:1px;height:34px;background:var(--wb)}
.ml-app .rv-ring{width:38px;height:38px}
.ml-app .rv-ring circle{fill:none;stroke:var(--wb);stroke-width:3}
.ml-app .rv-ring .ring-done{stroke:var(--ok-ink)}
.ml-app .rv-ring path{fill:none;stroke:var(--ok-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ml-app .rv-title{font-size:13px;font-weight:600;white-space:nowrap}
.ml-app .rv-dots{display:flex;gap:10px;margin-top:3px;font-size:11px}
.ml-app .rv-dot{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ml-app .rv-dot i{width:7px;height:7px;border-radius:50%}
.ml-app .rv-dot.ok{color:var(--ok-ink)}
.ml-app .rv-dot.ok i{background:var(--ok-fill)}
.ml-app .rv-dot.no{color:var(--no-ink)}
.ml-app .rv-dot.no i{background:var(--no-ink)}
.ml-app .rv-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px;margin-left:auto}
.ml-app .stars{display:flex;gap:4px;color:var(--wm)}
.ml-app .stars svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ml-app .stars .on{color:var(--wp);fill:currentColor}
.ml-app .rv-publish{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;background:var(--ok-ink);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.ml-app .rv-publish svg{width:14px;height:14px}

@container (width<400px){
  .ml-app .rv-div{display:none}
}

.ml-app .ai-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);border-radius:7px;background:color-mix(in srgb,var(--ai) 8%,#fff);color:var(--ai-ink);font-size:11.5px;font-weight:600;white-space:nowrap}
.ml-app .ai-chip svg{width:13px;height:13px}
.ml-app .ai-sug{max-width:80px;color:var(--wm);font-size:10px;font-weight:500;line-height:1.25;text-align:right}
.ml-app .ai-strip{display:flex;align-items:center;gap:8px;padding:8px 18px;border-bottom:1px solid color-mix(in srgb,var(--ai) 45%,transparent);background:color-mix(in srgb,var(--ai) 8%,#fff);color:var(--ai-ink);font-size:12px;font-weight:600}
.ml-app .ai-strip svg{width:13px;height:13px}

.ml-app .rv-main{padding:18px}

.ml-app .wr{position:relative}
.ml-app .wr-marks{position:absolute;top:-11px;right:8px;display:flex;align-items:center;gap:4px}
.ml-app .flag{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--warn) 12%,#fff);color:color-mix(in srgb,var(--warn) 50%,var(--wt))}
.ml-app .flag svg{width:11px;height:11px}
.ml-app .wr-box{padding:12px;border:2px solid var(--ok);border-radius:8px;background:rgba(22,163,74,.05)}

.ml-app .rc-why{display:flex;gap:8px;align-items:flex-start;padding:8px 11px;border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);border-radius:7px;background:color-mix(in srgb,var(--ai) 8%,#fff);font-size:12px;line-height:1.5}
.ml-app .rc-why-icon{margin-top:2px;color:var(--ai-ink)}
.ml-app .rc-why-icon svg{width:12px;height:12px}
.ml-app .rc-why-title{font-weight:700;color:color-mix(in srgb,var(--ai) 50%,var(--wt))}
.ml-app .rc-why-chip{margin-left:6px;padding:0 5px;border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--ai) 16%,#fff);color:color-mix(in srgb,var(--ai) 50%,var(--wt));font-size:10px;font-weight:600;white-space:nowrap}
.ml-app .rc-why-body{display:block;margin-top:3px}

.ml-app .rc-comment{padding:9px 12px;border:1px solid var(--wl);border-radius:7px;background:#fff;font-size:12.5px;line-height:1.55}
.ml-app .rc-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:5px}
.ml-app .rc-icon{color:#6f685b}
.ml-app .rc-icon svg{width:12px;height:12px}
.ml-app .rc-title{color:#6f685b;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ml-app .rc-chip{padding:0 6px;border:1px solid color-mix(in srgb,var(--ok-fill) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--ok-fill) 8%,#fff);color:color-mix(in srgb,var(--ok-fill) 50%,var(--wt));font-size:10px;font-weight:600;white-space:nowrap}
.ml-app .rc-space{flex:1}
.ml-app .rc-ai{display:inline-flex;align-items:center;gap:3px;color:#7a7366;font-size:10px;white-space:nowrap}
.ml-app .rc-ai svg{width:9px;height:9px;color:var(--ai-ink)}
.ml-app .rc-foot{margin-top:7px;color:#7a7366;font-size:10.5px;text-align:right}

@media (max-width:520px){
  .ml-app .rv-head{padding:10px 12px}
  .ml-app .rv-main{padding:12px}
}