.learning-monitor{max-width:1200px;margin:auto}.learning-monitor-head{justify-content:space-between;align-items:center;gap:24px;display:flex}.learning-monitor-head h2{font:600 clamp(25px,3vw,36px)/1.15 var(--font-serif);letter-spacing:-.03em;margin:12px 0}.learning-monitor-head p,.learning-footnote{color:var(--color-muted);max-width:70ch;font-size:13px;line-height:1.8}.learning-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0;display:grid}.learning-summary>div{border:1px solid var(--color-line);background:var(--color-surface);border-radius:18px;grid-template-columns:1fr auto;gap:8px;padding:22px;display:grid}.learning-summary svg{color:var(--color-accent-ink)}.learning-summary strong{font:600 32px var(--font-serif);grid-area:1/2/3}.learning-summary small{color:var(--color-muted);font-size:14px}.learning-summary span{color:var(--color-muted);font-size:12px}.learning-filters{grid-template-columns:1fr 1fr 1.3fr;gap:12px;display:grid}.learning-filters label{flex-direction:column;gap:8px;min-width:0;font-size:11px;font-weight:700;display:flex}.learning-filters select,.learning-search>span{border:1px solid var(--color-line);background:var(--color-surface);width:100%;min-height:44px;color:var(--color-ink);border-radius:11px;padding:10px 12px;font-size:13px}.learning-search>span{align-items:center;gap:8px;display:flex}.learning-search input{background:0 0;outline:none;width:100%;min-width:0}.learning-sync{min-height:24px;color:var(--color-muted);margin:15px 0;font-size:11px}.learning-people{gap:18px;display:grid}.learning-person{border:1px solid var(--color-line);background:var(--color-surface);border-radius:18px;overflow:hidden}.learning-person>header{align-items:center;gap:13px;padding:20px;display:flex}.learning-avatar{background:var(--color-surface-2);width:42px;height:42px;color:var(--color-accent-ink);border-radius:14px;flex-shrink:0;place-items:center;font-size:13px;font-weight:800;display:grid}.learning-person h3{overflow-wrap:anywhere;font-size:15px;font-weight:800}.learning-person header p{color:var(--color-muted);margin-top:4px;font-size:11px}.learning-status{border:1px solid var(--color-line);white-space:nowrap;color:var(--color-muted);border-radius:999px;margin-inline-start:auto;padding:7px 10px;font-size:10px}.learning-status.is-live{color:var(--color-accent-ink);background:color-mix(in srgb,var(--color-accent) 15%,transparent)}.learning-activity{border-top:1px solid var(--color-line)}.learning-activity summary{cursor:pointer;align-items:center;gap:13px;min-height:72px;padding:16px 20px;list-style:none;display:flex}.learning-activity summary::-webkit-details-marker{display:none}.learning-activity summary>svg{color:var(--color-accent-ink);flex-shrink:0}.learning-activity-title{flex:1;min-width:0}.learning-activity-title strong{overflow-wrap:anywhere;font-size:13px;display:block}.learning-activity-title small{color:var(--color-muted);overflow-wrap:anywhere;margin-top:5px;font-size:11px;display:block}.learning-meter{text-align:right;flex-shrink:0;width:125px;font-size:11px}.learning-meter progress{width:100%;height:5px;accent-color:var(--color-accent-ink);border:0;border-radius:6px;margin-top:8px;display:block;overflow:hidden}.learning-detail{color:var(--color-muted);padding:0 20px 20px 51px;font-size:12px;line-height:1.8}.learning-answer{border-top:1px solid var(--color-line);margin-top:12px;padding-top:12px}.learning-answer p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-ink);font-size:13px}.learning-no-activity{color:var(--color-muted);padding:0 20px 20px;font-size:12px}.learning-footnote{margin-top:24px}@media (width<=700px){.learning-monitor-head{flex-direction:column;align-items:flex-start;gap:14px}.learning-summary{gap:8px}.learning-summary>div{flex-direction:column;padding:14px;display:flex}.learning-summary strong{font-size:28px}.learning-summary span{font-size:10px}.learning-filters{grid-template-columns:1fr 1fr}.learning-search{grid-column:1/-1}.learning-filters select,.learning-search input{font-size:16px}.learning-person>header{flex-wrap:wrap;padding:16px}.learning-status{margin-left:55px}.learning-activity summary{flex-wrap:wrap;gap:9px;padding:16px}.learning-activity-title{flex-basis:calc(100% - 40px)}.learning-meter{text-align:start;width:calc(100% - 54px);margin-inline-start:28px}.learning-detail{padding:0 16px 18px 44px}.learning-meter progress{height:7px}}.kelas-keadaan{border:1px solid var(--color-line);background:var(--color-surface);border-radius:18px;margin-bottom:22px;padding:22px}.kelas-keadaan h3{font:600 19px/1.3 var(--font-serif)}.kelas-keadaan>header p{color:var(--color-muted);max-width:66ch;margin-top:6px;font-size:12px;line-height:1.7}.kelas-keadaan-angka{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0;display:grid}.kelas-keadaan-angka>div{border:1px solid var(--color-line);background:var(--color-bg);border-radius:13px;padding:13px 15px}.kelas-keadaan-angka strong{font:600 26px var(--font-serif);line-height:1.1;display:block}.kelas-keadaan-angka span{color:var(--color-muted);margin-top:5px;font-size:11px;display:block}.kelas-keadaan-angka>div[data-tanda=belum_mulai] strong{color:#be123c}.kelas-keadaan-angka>div[data-tanda=tertinggal] strong{color:#b45309}.kelas-keadaan-angka>div[data-tanda=belum_setor] strong{color:#a16207}.kelas-keadaan-angka>div[data-tanda=perlu_dinilai] strong{color:var(--color-accent-ink)}.kelas-keadaan-daftar{gap:9px;display:grid}.kelas-keadaan-daftar li{border:1px solid var(--color-line);background:var(--color-bg);border-radius:13px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:7px 14px;padding:13px 15px;display:grid}.kelas-keadaan-nama strong{overflow-wrap:anywhere;font-size:13px;font-weight:800}.kelas-keadaan-nama small{color:var(--color-muted);margin-top:3px;font-size:11px;display:block}.kelas-keadaan-tanda{flex-wrap:wrap;place-content:start flex-end;gap:6px;display:flex}.kelas-keadaan-tanda em{white-space:nowrap;border:1px solid var(--color-line);color:var(--color-muted);border-radius:999px;padding:4px 9px;font-size:10px;font-style:normal;font-weight:700}.kelas-keadaan-tanda em[data-tanda=belum_mulai]{color:#be123c;background:#be123c17;border-color:#be123c4d}.kelas-keadaan-tanda em[data-tanda=tertinggal]{color:#b45309;background:#b4530917;border-color:#b453094d}.kelas-keadaan-tanda em[data-tanda=belum_setor]{color:#a16207;background:#a1620717;border-color:#a162074d}.kelas-keadaan-tanda em[data-tanda=perlu_dinilai]{color:var(--color-accent-ink);border-color:color-mix(in srgb,var(--color-accent) 35%,transparent);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}.kelas-keadaan-rinci{color:var(--color-muted);flex-wrap:wrap;grid-column:1/-1;gap:6px 14px;font-size:11px;display:flex}.kelas-keadaan-sedang{overflow-wrap:anywhere}.kelas-keadaan-aman,.kelas-keadaan-sisa{color:var(--color-muted);font-size:12px;line-height:1.7}.kelas-keadaan-sisa{margin-top:11px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .kelas-keadaan-angka>div[data-tanda=belum_mulai] strong,:root:not([data-theme=light]) .kelas-keadaan-tanda em[data-tanda=belum_mulai]{color:#fda4af}:root:not([data-theme=light]) .kelas-keadaan-angka>div[data-tanda=tertinggal] strong,:root:not([data-theme=light]) .kelas-keadaan-tanda em[data-tanda=tertinggal]{color:#fcd34d}:root:not([data-theme=light]) .kelas-keadaan-angka>div[data-tanda=belum_setor] strong,:root:not([data-theme=light]) .kelas-keadaan-tanda em[data-tanda=belum_setor]{color:#fde047}}:root[data-theme=dark] .kelas-keadaan-angka>div[data-tanda=belum_mulai] strong,:root[data-theme=dark] .kelas-keadaan-tanda em[data-tanda=belum_mulai]{color:#fda4af}:root[data-theme=dark] .kelas-keadaan-angka>div[data-tanda=tertinggal] strong,:root[data-theme=dark] .kelas-keadaan-tanda em[data-tanda=tertinggal]{color:#fcd34d}:root[data-theme=dark] .kelas-keadaan-angka>div[data-tanda=belum_setor] strong,:root[data-theme=dark] .kelas-keadaan-tanda em[data-tanda=belum_setor]{color:#fde047}@media (width<=700px){.kelas-keadaan{padding:16px}.kelas-keadaan-angka{grid-template-columns:1fr 1fr;gap:8px}.kelas-keadaan-angka strong{font-size:22px}.kelas-keadaan-daftar li{grid-template-columns:1fr}.kelas-keadaan-tanda{justify-content:flex-start}}.kelas-keadaan-hubungi{border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent);background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-accent-ink);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:10px;font-weight:700;display:inline-flex}.kelas-keadaan-hubungi:hover{background:color-mix(in srgb,var(--color-accent) 18%,transparent)}@keyframes kelas-naik{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.kelas-keadaan-daftar li{animation:.3s cubic-bezier(.2,.7,.3,1) backwards kelas-naik}.kelas-keadaan-daftar li:nth-child(2){animation-delay:45ms}.kelas-keadaan-daftar li:nth-child(3){animation-delay:90ms}.kelas-keadaan-daftar li:nth-child(4){animation-delay:.135s}.kelas-keadaan-daftar li:nth-child(n+5){animation-delay:.18s}.kelas-keadaan-angka>div{transition:transform .2s cubic-bezier(.2,.7,.3,1)}.kelas-keadaan-angka>div:hover{transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.kelas-keadaan-daftar li{animation:none}.kelas-keadaan-angka>div{transition:none}}