/* FIEZEL — class-hub.css · Kelas (Guru ↔ Murid ↔ Braincore). Dua konteks, satu bahasa visual.
   Murid memakai token aplikasi (--panel/--line/--accent…), guru memakai token Ruang Guru (--tg-*). */
.ch{--ch-bg:var(--panel,#fff);--ch-soft:var(--panel-soft,#FFF3DC);--ch-line:var(--line,#F0E4CF);--ch-text:var(--text,#241A11);--ch-muted:var(--muted,#6E5E47);--ch-accent:var(--accent,#C2402C);--ch-ok:var(--good,#1F6B4E);--ch-ok-soft:var(--good-soft,#E9F7F0);--ch-bad:var(--bad,#AC3E2A);--ch-bad-soft:var(--bad-soft,#FDE3DE);--ch-info:var(--info,#7A5F1B);--ch-info-soft:var(--info-soft,#FFF3C4);--ch-ink:var(--ink,#241A11);--ch-r:var(--radius-md,16px);--ch-r-lg:var(--radius-lg,24px);color:var(--ch-text);display:flex;flex-direction:column;gap:14px}
.ch-teacher{--ch-bg:var(--tg-paper-2);--ch-soft:var(--tg-sage-soft);--ch-line:var(--tg-line);--ch-text:var(--tg-text);--ch-muted:var(--tg-muted);--ch-accent:var(--tg-sage);--ch-ok:var(--tg-sage);--ch-ok-soft:var(--tg-sage-soft);--ch-bad:var(--tg-brick);--ch-bad-soft:var(--tg-brick-soft);--ch-info:var(--tg-amber);--ch-info-soft:var(--tg-amber-soft);--ch-ink:var(--tg-ink);--ch-r:var(--tg-r);--ch-r-lg:var(--tg-r-lg)}
.ch-student{padding:18px 16px calc(96px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto;animation:chIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes chIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ch-head h1{font-family:var(--fz-heading,inherit);font-size:1.6rem;line-height:1.1;margin:2px 0 6px;letter-spacing:-.02em}
.ch-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--ch-muted);margin:0 0 4px}
.ch-sub,.ch-muted{color:var(--ch-muted);font-size:.9rem;margin:0}.ch-small{font-size:.8rem}.ch-mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.ch-h2{font-size:1.02rem;margin:8px 0 10px;display:flex;align-items:baseline;gap:8px}.ch-h2 small{color:var(--ch-muted);font-weight:600;font-size:.8rem}
.ch-principle{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ch-muted);margin:0}
.ch-principle i,.ch-principle svg{width:16px;height:16px;color:var(--ch-accent)}
.ch-tabs{display:flex;gap:6px;padding:4px;background:var(--ch-soft);border-radius:999px;overflow:auto;scrollbar-width:none}.ch-tabs::-webkit-scrollbar{display:none}
.ch-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--ch-muted);font:inherit;font-weight:700;font-size:.86rem;padding:10px 14px;border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s,transform .2s;white-space:nowrap}
.ch-tab:hover{transform:translateY(-1px)}.ch-tab.is-active{background:var(--ch-bg);color:var(--ch-text);box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
.ch-tab i,.ch-tab svg{width:16px;height:16px}.ch-badge{background:var(--ch-accent);color:#fff;border-radius:999px;font-size:.68rem;padding:1px 7px;margin-left:2px}
.ch-body{display:flex;flex-direction:column;gap:14px;animation:chIn .35s ease both}
.ch-card{background:var(--ch-bg);border:1px solid var(--ch-line);border-radius:var(--ch-r);padding:16px;text-align:left;color:inherit;font:inherit;transition:transform .2s,box-shadow .2s}
.ch-card h3{margin:2px 0 4px;font-size:1.05rem;line-height:1.25}.ch-card h2{margin:2px 0 6px;font-size:1.25rem;line-height:1.2}
.ch-card.ch-empty{text-align:center;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}.ch-empty i,.ch-empty svg{width:30px;height:30px;color:var(--ch-muted)}
.ch-empty p{margin:0;color:var(--ch-muted);max-width:44ch}
.ch-card-ink{background:var(--ch-ink);color:#F5F1E8;border-color:transparent}.ch-card-ink .ch-kicker,.ch-card-ink .ch-muted{color:#C8D6D1}
.ch-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.ch-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.ch-from{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ch-muted)}.ch-from i,.ch-from svg{width:14px;height:14px}
.ch-assign.is-exam{border-left:4px solid var(--ch-info)}
.ch-status{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ch-soft);color:var(--ch-muted);white-space:nowrap}
.ch-status.is-selesai{background:var(--ch-ok-soft);color:var(--ch-ok)}.ch-status.is-sedang{background:var(--ch-info-soft);color:var(--ch-info)}.ch-status.is-terlambat{background:var(--ch-bad-soft);color:var(--ch-bad)}.ch-status.is-late-done{outline:1px dashed var(--ch-bad)}
.ch-status-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ch-deadline{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ch-muted)}.ch-deadline.is-late{color:var(--ch-bad);font-weight:700}.ch-deadline i,.ch-deadline svg{width:14px;height:14px}
.ch-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:transform .15s,background-color .2s,box-shadow .2s;background:var(--ch-soft);color:var(--ch-text)}
.ch-btn:hover{transform:translateY(-1px)}.ch-btn:active{transform:scale(.98)}.ch-btn.is-primary{background:var(--ch-accent);color:#fff;box-shadow:0 8px 20px -12px var(--ch-accent)}.ch-btn.is-ghost{background:transparent;border-color:var(--ch-line)}.ch-btn.is-small{padding:7px 12px;font-size:.8rem}
.ch-btn i,.ch-btn svg{width:16px;height:16px}.ch-btn[disabled]{opacity:.5;cursor:not-allowed}
.ch-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ch-sticky{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--ch-bg);padding:10px;border-radius:var(--ch-r);box-shadow:0 -6px 24px -18px rgba(0,0,0,.4);z-index:2}
.ch-teacher .ch-sticky{bottom:12px}
.ch-form{display:flex;gap:8px;margin-top:12px}.ch-form input{flex:1;font:inherit;padding:11px 14px;border:1px solid var(--ch-line);border-radius:999px;background:var(--ch-bg);color:var(--ch-text);text-transform:uppercase;letter-spacing:.06em}
.ch-grid2{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:560px){.ch-grid2{grid-template-columns:1fr 1fr}}
.ch-link-card{display:flex;align-items:center;gap:12px;cursor:pointer}.ch-link-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(0,0,0,.4)}.ch-link-card>div{flex:1}.ch-link-card small{display:block;color:var(--ch-muted);font-size:.8rem;margin-top:2px}.ch-link-card>i,.ch-link-card>svg{width:18px;height:18px;color:var(--ch-muted)}
.ch-link-icon{width:40px;height:40px;border-radius:12px;background:var(--ch-soft);display:grid;place-items:center;color:var(--ch-accent);flex:none}.ch-link-icon i,.ch-link-icon svg{width:20px;height:20px}
.ch-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ch-teacher .ch-kpis{grid-template-columns:repeat(4,1fr);margin-top:12px}
.ch-kpi{background:var(--ch-soft);border-radius:var(--ch-r);padding:12px;display:flex;flex-direction:column;gap:2px}.ch-kpi b{font-size:1.35rem;line-height:1;font-family:var(--fz-heading,var(--tg-display,inherit))}.ch-kpi b small{font-size:.8rem;color:var(--ch-muted)}.ch-kpi span{font-size:.72rem;color:var(--ch-muted);font-weight:600}
.ch-skill-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.ch-skill-list li{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;gap:8px;align-items:center;font-size:.86rem}.ch-skill-list li small{grid-column:1/-1;color:var(--ch-muted);font-size:.72rem;margin-top:-4px}
.ch-bar{display:block;height:8px;border-radius:999px;background:var(--ch-soft);overflow:hidden;min-width:60px}.ch-bar i{display:block;height:100%;background:var(--ch-accent);border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}.ch-bar.is-thin{height:5px;margin:4px 0 12px}
.ch-runner-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ch-timer{font-family:ui-monospace,Menlo,monospace;font-weight:700;background:var(--ch-info-soft);color:var(--ch-info);padding:4px 10px;border-radius:999px}
.ch-progress-text{margin:6px 0 0;font-size:.8rem;font-weight:700;color:var(--ch-muted)}
.ch-question h2{font-size:1.25rem;line-height:1.3;margin:6px 0 14px}.ch-context{background:var(--ch-soft);padding:12px 14px;border-radius:12px;font-size:.92rem;line-height:1.5;margin:0 0 10px}
.ch-options{display:flex;flex-direction:column;gap:8px}
.ch-option{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--ch-line);background:var(--ch-bg);color:var(--ch-text);border-radius:14px;padding:12px 14px;font:inherit;font-size:.98rem;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.ch-option:hover:not([disabled]){border-color:var(--ch-accent);transform:translateX(2px)}.ch-option.is-chosen{border-color:var(--ch-accent)}.ch-option.is-correct{border-color:var(--ch-ok);background:var(--ch-ok-soft)}.ch-option.is-wrong{border-color:var(--ch-bad);background:var(--ch-bad-soft)}.ch-option[disabled]{cursor:default}
.ch-opt-key{width:26px;height:26px;border-radius:8px;background:var(--ch-soft);display:grid;place-items:center;font-size:.78rem;font-weight:800;flex:none}
.ch-feedback{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.92rem;line-height:1.45;animation:chIn .3s ease}.ch-feedback.is-ok{background:var(--ch-ok-soft);color:var(--ch-ok)}.ch-feedback.is-no{background:var(--ch-bad-soft);color:var(--ch-bad)}
.ch-result{text-align:center}.ch-score{font-family:var(--fz-heading,var(--tg-display,inherit));font-size:3rem;line-height:1;margin:8px 0;letter-spacing:-.03em}.ch-score small{font-size:1.2rem;color:var(--ch-muted)}
.ch-review-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.ch-review-list li.is-ok{border-left:4px solid var(--ch-ok)}.ch-review-list li.is-no{border-left:4px solid var(--ch-bad)}.ch-ok{color:var(--ch-ok);font-weight:700}.ch-no{color:var(--ch-bad);font-weight:700}
.ch-students{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.ch-student{display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:12px}.ch-student:hover{transform:translateY(-2px);box-shadow:0 12px 26px -20px rgba(0,0,0,.5)}.ch-student small{color:var(--ch-muted);font-size:.74rem}.ch-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ch-between{justify-content:space-between}.ch-grow{flex:1}
.ch-mini-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.ch-mini-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--ch-soft);font-size:.86rem}.ch-mini-list li small{color:var(--ch-muted);font-size:.74rem}.ch-mini-list .ch-bar{max-width:90px}
.ch-expand{margin-top:14px;border-top:1px dashed var(--ch-line);padding-top:10px;animation:chIn .3s ease}.ch-expand h4{margin:12px 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ch-muted)}
.ch-item-list{margin:6px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}.ch-item-list>li{padding:10px 12px;border:1px solid var(--ch-line);border-radius:12px;background:var(--ch-bg)}
.ch-opts-inline{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 0}.ch-opts-inline li{padding:3px 10px;border-radius:999px;background:var(--ch-soft);font-size:.8rem}.ch-opts-inline li.is-key{background:var(--ch-ok-soft);color:var(--ch-ok);font-weight:700}
.ch-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0}.ch-steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--ch-muted);padding:8px 10px;border-radius:10px;background:var(--ch-soft)}.ch-steps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ch-bg);font-size:.72rem}.ch-steps li.is-current{color:var(--ch-text);background:var(--ch-bg);border:1px solid var(--ch-line)}.ch-steps li.is-current span{background:var(--ch-accent);color:#fff}.ch-steps li.is-done span{background:var(--ch-ok);color:#fff}
.ch-form-grid{display:flex;flex-direction:column;gap:12px}.ch-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:520px){.ch-form-row{grid-template-columns:1fr}}
.ch-seg{display:flex;gap:6px;background:var(--ch-soft);padding:4px;border-radius:12px}.ch-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;font:inherit;font-weight:700;font-size:.84rem;padding:10px;border-radius:9px;cursor:pointer;color:var(--ch-muted);transition:background-color .2s,color .2s}.ch-seg button.is-on{background:var(--ch-bg);color:var(--ch-text);box-shadow:0 4px 14px -10px rgba(0,0,0,.4)}.ch-seg i,.ch-seg svg{width:15px;height:15px}
.ch-fieldset{border:1px dashed var(--ch-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.ch-fieldset legend{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ch-muted);font-weight:700;padding:0 6px}
.ch .tg-label textarea,.ch .tg-label input:not([type=radio]):not([type=checkbox]),.ch .tg-label select{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--ch-line);border-radius:10px;background:var(--ch-bg);color:var(--ch-text);margin-top:4px}
.ch-review-summary{border-left:4px solid var(--ch-accent)}
.ch-review-card{position:relative}.ch-review-card.is-approved{border-color:var(--ch-ok);box-shadow:inset 0 0 0 1px var(--ch-ok)}
.ch-approve{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.84rem;cursor:pointer;background:var(--ch-ok-soft);color:var(--ch-ok);padding:6px 12px;border-radius:999px}
.ch-pipeline{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}@media(min-width:900px){.ch-pipeline{grid-template-columns:repeat(2,1fr)}}
.ch-pipeline section{background:var(--ch-soft);border-radius:12px;padding:12px;font-size:.9rem;position:relative}.ch-pipeline h5{margin:0 0 8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ch-muted)}
.ch-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.ch-tag{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ch-bg);border:1px solid var(--ch-line)}.ch-tag.is-ok{background:var(--ch-ok-soft);color:var(--ch-ok);border-color:transparent}.ch-tag.is-warn{background:var(--ch-info-soft);color:var(--ch-info);border-color:transparent}.ch-tag.is-err{background:var(--ch-bad-soft);color:var(--ch-bad);border-color:transparent}
.ch-issues,.ch-changes,.ch-distractors{margin:6px 0;padding-left:18px;font-size:.84rem;line-height:1.45}.ch-issues li.is-error{color:var(--ch-bad)}.ch-issues li.is-warn{color:var(--ch-info)}.ch-distractors li{margin-bottom:3px}
.ch-final-form{display:flex;flex-direction:column;gap:8px}.ch-opt-edit{display:flex;align-items:center;gap:8px}.ch-opt-edit input[type=radio]{flex:none;accent-color:var(--ch-ok)}
.ch .tg-link{background:none;border:0;color:var(--ch-muted);text-decoration:underline;font:inherit;font-size:.78rem;cursor:pointer;padding:6px 0;margin-top:6px}
.ch-mis{margin:8px 0 0;padding-left:18px;font-size:.9rem;line-height:1.5}.ch-mis li{margin-bottom:6px}.ch-mis small{display:block;opacity:.8;font-size:.78rem}
.ch-write .ch-item-list{margin-bottom:10px}

.tg.is-repaint .ch-body,.tg.is-repaint .ch-feedback,.tg.is-repaint .ch-expand,
.ch-student.is-repaint,.ch-student.is-repaint .ch-body,.ch-student.is-repaint .ch-feedback,.ch-student.is-repaint .ch-expand,
.ch.is-repaint,.ch.is-repaint .ch-body{animation:none !important}
body.reduce-motion .ch-student,body.reduce-motion .ch-body,body.reduce-motion .ch-feedback,body.reduce-motion .ch-expand{animation:none !important}

/* Gambar soal di runner kelas. Sepadan dengan .lf-picture di learner-flow: soal bergambar
   memakai bank dan markup yang sama, jadi ukurannya pun harus terbaca sama oleh murid. */
.ch-picture{display:grid;place-items:center;width:150px;height:150px;margin:6px auto 14px;border-radius:16px;background:var(--yellow-soft,#FDF3D3);color:var(--ink,#3A2E22)}
.ch-picture svg{width:96px;height:96px}

/* Pendeteksi keluar layar (mode ujian). Nada warnanya sengaja NETRAL saat bersih dan
   hanya menghangat saat ada kepergian: pita ini menemani murid selama ujian, dan pita
   merah yang menyala sepanjang sesi mengajari rasa takut, bukan kejujuran. */
.ch-proctor{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:var(--ch-soft);color:var(--ch-muted);font-size:.82rem;font-weight:600;line-height:1.4}
.ch-proctor i,.ch-proctor svg{width:15px;height:15px;flex:none}
.ch-proctor.is-warn{background:var(--ch-bad-soft);color:var(--ch-bad);border:1px solid rgba(239,68,68,.25)}
.ch-proctor-face{border:1px solid rgba(239,68,68,.3);animation:ch-face-pulse 2s infinite ease-in-out}
@keyframes ch-face-pulse{0%,100%{box-shadow:0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 10px rgba(239,68,68,.25)}}
.ch-proctor-slots{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%}
.ch-proctor-slot{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.04)}
.ch-proctor-slot.is-clean{background:rgba(0,0,0,.04);color:var(--ch-muted)}
.ch-proctor-slot.is-warn{background:rgba(239,68,68,.12);color:#B91C1C;font-weight:700;border:1px solid rgba(239,68,68,.22)}
.ch-proctor-slot.is-alert{background:#EF4444;color:#fff;font-weight:800;animation:ch-face-pulse 1.5s infinite ease-in-out}
.ch-camera-pill{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(31,122,99,.15);color:#1F7A63;margin-left:auto;white-space:nowrap}
.ch-camera-dot{color:#10B981;font-size:.85rem;line-height:1}
.ch-camera-pip-video{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid #1F7A63;vertical-align:middle;background:#111;display:inline-block}
.ch-btn-exit-exam{color:#DC2626 !important;font-weight:700 !important}
.ch-btn-exit-exam:hover{background:rgba(220,38,38,.1) !important}
.ch-exit-exam-backdrop{position:fixed;inset:0;z-index:10001;background:rgba(15,23,42,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:chFadeIn .2s ease both}
.ch-exit-exam-card{max-width:380px;width:100%;background:var(--ch-card,#fff);border-radius:20px;padding:24px 20px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.ch-exit-icon-wrap{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:rgba(239,68,68,.12);color:#EF4444;display:flex;align-items:center;justify-content:center}
.ch-exit-icon-wrap svg,.ch-exit-icon-wrap i{width:28px;height:28px}
.ch-btn.is-danger{background:#DC2626;color:#fff;border:none}
.ch-btn.is-danger:hover{background:#B91C1C}
.ch-btn-archive{font-weight:600}
.ch-focus{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ch-info-soft);color:var(--ch-info)}
.ch-focus i,.ch-focus svg{width:13px;height:13px}
.ch-focus.is-berat{background:var(--ch-bad-soft);color:var(--ch-bad)}

/* ---- Friendly Face Proctoring Non-Blocking Floating Notification ---- */
.ch-face-modal-backdrop {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: chSlideDown .25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes chSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.ch-face-modal-card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.ch-face-modal-icon-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.ch-face-modal-pulsar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.25);
  animation: chFacePulsar 1.8s infinite ease-out;
}

@keyframes chFacePulsar {
  0% { transform: scale(0.85); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 0.3; }
  100% { transform: scale(1.4); opacity: 0; }
}

.ch-face-modal-icon {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

.ch-face-modal-icon svg,
.ch-face-modal-icon i {
  width: 20px;
  height: 20px;
}

.ch-face-modal-content {
  flex: 1;
  min-width: 0;
}

.ch-face-modal-title {
  margin: 0 0 2px;
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: .92rem;
  font-weight: 800;
  color: #92400E;
  line-height: 1.25;
}

.ch-face-modal-desc {
  margin: 0;
  font-size: .78rem;
  line-height: 1.35;
  color: #B45309;
  font-weight: 500;
}

.ch-face-modal-status {
  display: none;
}

.ch-face-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  font-size: .76rem;
  font-weight: 700;
}

.ch-face-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: chLiveDot 1.4s infinite;
}

@keyframes chLiveDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ch-face-modal-actions {
  flex-shrink: 0;
  display: flex;
}

.ch-face-recheck-btn {
  font-size: .78rem !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  white-space: nowrap;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(31, 122, 99, 0.25);
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}

.ch-face-recheck-btn:active {
  transform: scale(0.98);
}

/* Preflight Calm Progress Track */
.ch-face-progress-track {
  width: 100%;
  max-width: 240px;
  height: 6px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  margin: 12px auto 16px;
  overflow: hidden;
}

.ch-face-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0284C7, #10B981);
  border-radius: 999px;
  transition: width 0.15s ease-out;
}

/* ==========================================================================
   KelasKu Wordmark — Class Hub Context Integrations
   ========================================================================== */

.kelasku-wordmark {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1F7A63 !important;
  display: inline-block;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ch-head h1 .kelasku-wordmark,
.ch-h2 .kelasku-wordmark,
.ch-card h2 .kelasku-wordmark,
.ch-card h3 .kelasku-wordmark {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: -0.02em;
  color: #1F7A63 !important;
  display: inline;
  vertical-align: baseline;
}

.ch-kicker .kelasku-wordmark {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800;
  font-size: 1.06em;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #1F7A63 !important;
  display: inline-block;
  vertical-align: baseline;
}

.ch-sub .kelasku-wordmark,
.ch-muted .kelasku-wordmark,
.ch-from .kelasku-wordmark {
  font-size: inherit;
  line-height: inherit;
  font-weight: 800;
  color: #1F7A63 !important;
  display: inline;
  white-space: nowrap;
}

.ch-btn .kelasku-wordmark,
.ch .kelasku-wordmark {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1F7A63 !important;
}

.ch-empty .ch-btn {
  background: var(--good-soft, #E9F7F0);
  border: 1.5px solid #1F7A63;
  color: #1F7A63;
  box-shadow: 0 4px 14px rgba(31, 122, 99, 0.12);
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
}
.ch-empty .ch-btn:hover {
  background: #DCF0E8;
  border-color: #166052;
}

.ch-card-ink .kelasku-wordmark,
.ch-card-ink h1 .kelasku-wordmark,
.ch-card-ink h2 .kelasku-wordmark,
.ch-card-ink h3 .kelasku-wordmark,
.ch-card-ink p .kelasku-wordmark {
  color: #FFFFFF !important;
}

/* ---- Panel Misi Kurikulum Murid ---- */
.ch-curriculum-panel {
  background: linear-gradient(135deg, rgba(31, 122, 99, 0.08) 0%, rgba(240, 228, 207, 0.5) 100%), var(--ch-bg);
  border: 1.5px solid rgba(31, 122, 99, 0.28);
  border-radius: var(--ch-r-lg, 20px);
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px -10px rgba(31, 122, 99, 0.18);
  text-decoration: none;
}
.ch-curriculum-panel .ch-kicker {
  color: #1F7A63;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
.ch-curriculum-panel .ch-kicker i,
.ch-curriculum-panel .ch-kicker svg {
  width: 14px;
  height: 14px;
}
.ch-curriculum-panel h3 {
  font-size: 1.15rem;
  margin: 4px 0 6px;
  color: var(--ch-ink, #241A11);
  letter-spacing: -0.01em;
}
.ch-curriculum-panel .ch-actions a {
  text-decoration: none;
}

/* ---- Kartu Sapaan / Pengumuman Wali Kelas (KelasKu.dc.html) ---- */
.ch-greeting-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 24px;
  background: #E5DDF3;
  color: #523E86;
  margin-bottom: 6px;
  animation: chIn .35s ease both;
}
.ch-greeting-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #523E86;
  font-family: var(--fz-heading, 'Quicksand', 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.ch-greeting-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.ch-greeting-author {
  font-size: 13.5px;
  font-weight: 700;
  color: #523E86;
}
.ch-greeting-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #523E86;
  line-height: 1.45;
}

/* ---- Papan Kelas / Leaderboard (KelasKu.dc.html) ---- */
.ch-papan-body {
  gap: 16px;
}
.ch-papan-card {
  border-radius: 28px;
  padding: 18px 16px;
  background: var(--ch-bg);
  box-shadow: 0 14px 32px rgba(46, 39, 36, .07), 0 2px 6px rgba(46, 39, 36, .04);
}
.ch-papan-period {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ch-accent, #9B3A4A);
}
.ch-papan-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
}
.ch-papan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 18px;
  transition: background-color .15s;
}
.ch-papan-row.is-me {
  background: #F6E9EB;
}
.ch-papan-rank {
  width: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ch-muted, #786D64);
  text-align: center;
  flex: none;
}
.ch-papan-row.is-me .ch-papan-rank {
  color: #9B3A4A;
}
.ch-papan-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--fz-heading, 'Quicksand', 'Nunito', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  flex: none;
}
.ch-papan-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ch-text, #2E2724);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-papan-row.is-me .ch-papan-name {
  font-weight: 700;
  color: #9B3A4A;
}
.ch-papan-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #9B3A4A;
  margin-left: 4px;
}
.ch-papan-score {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ch-text, #2E2724);
  flex: none;
}
.ch-papan-row.is-me .ch-papan-score {
  color: #9B3A4A;
}

/* ---- In-App Misi Belajar & Paspor Belajar ---- */
.ch-curriculum-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: chIn .35s ease both;
}
.ch-curriculum-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ch-curriculum-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-curriculum-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ch-soft);
  border-radius: 999px;
}
.ch-curriculum-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ch-muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ch-curriculum-switch button.is-active {
  background: var(--ch-bg);
  color: var(--ch-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.ch-curriculum-switch button i,
.ch-curriculum-switch button svg {
  width: 14px;
  height: 14px;
}
.ch-missions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ch-mission-card {
  background: var(--ch-bg);
  border: 1px solid var(--ch-line);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.ch-mission-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}
.ch-mission-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ch-mission-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--ch-text);
}
.ch-mission-desc {
  font-size: .86rem;
  color: var(--ch-muted);
  margin: 0;
  line-height: 1.4;
}
.ch-subchapters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.ch-subchapters-list li {
  font-size: .76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ch-soft);
  color: var(--ch-text);
}
.ch-mission-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ch-line);
  flex-wrap: wrap;
}
.ch-passport-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width: 580px) {
  .ch-passport-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ch-passport-card {
  background: var(--ch-bg);
  border: 1px solid var(--ch-line);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.ch-passport-card.is-mastered {
  border-color: rgba(31, 122, 99, .35);
  background: linear-gradient(135deg, rgba(233, 247, 240, 0.45) 0%, var(--ch-bg) 100%);
}
.ch-passport-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  width: fit-content;
}
.ch-passport-stamp.is-mastered {
  background: #D5EBE5;
  color: #1D5C52;
}
.ch-passport-stamp.is-practice {
  background: #F7EACB;
  color: #7A5512;
}
.ch-passport-stamp.is-unstarted {
  background: var(--ch-soft);
  color: var(--ch-muted);
}

/* ==========================================================================
   Panel Mata Pelajaran KelasKu (17 Mapel / Subject Panels)
   ========================================================================== */
.ch-subject-panels-wrap {
  margin: 6px 0 14px;
}
.ch-subject-panels-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ch-subject-panels-head .ch-h3 {
  font-size: 1.05rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ch-subject-card {
  background: var(--ch-bg);
  border: 1.5px solid var(--ch-line);
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.ch-subject-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--mapel-color, var(--ch-accent));
}
.ch-subject-card:hover {
  transform: translateY(-2px);
  border-color: var(--mapel-color, var(--ch-accent));
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.25);
}
.ch-subject-card.is-active {
  border-color: var(--mapel-color, var(--ch-accent));
  background: linear-gradient(180deg, rgba(255, 243, 220, 0.45) 0%, var(--ch-bg) 100%);
  box-shadow: 0 0 0 1px var(--mapel-color, var(--ch-accent)), 0 8px 20px -10px rgba(0, 0, 0, 0.2);
}
.ch-subject-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ch-subject-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ch-soft);
  display: grid;
  place-items: center;
  color: var(--mapel-color, var(--ch-accent));
  flex: none;
}
.ch-subject-icon i, .ch-subject-icon svg {
  width: 18px;
  height: 18px;
}
.ch-badge.is-warn {
  background: #C2410C;
  color: #fff;
}
.ch-badge.is-ok {
  background: var(--ch-ok-soft);
  color: var(--ch-ok);
  font-weight: 700;
}
/* Keadaan "belum ada apa-apa" tidak boleh memakai warna aksen. Badge dasar berwarna
   aksen putih-di-atas-warna, dan itu membaca sebagai SOROTAN — persis kebalikan dari yang
   dimaksud. Varian ini diam, supaya mapel tanpa tugas terlihat sebagai mapel tanpa tugas
   dan bukan sebagai kabar baik. (m025-349, temuan K8.) */
.ch-badge.is-mute,
.ch-subject-top .ch-badge:not(.is-warn):not(.is-ok) {
  background: var(--ch-line, rgba(0,0,0,.08));
  color: var(--ch-muted);
  font-weight: 600;
}
/* Kartu "Target Minggu Ini" (m025-349, fitur F6). Ia menyebut SATU langkah berikutnya,
   jadi ia berhak berdiri paling atas dan berhak terlihat berbeda dari katalog di bawahnya. */
.ch-target-card {
  background: linear-gradient(150deg, var(--ch-soft), var(--ch-bg));
  border-color: var(--ch-accent);
}
.ch-target-card h3 { margin: 4px 0 2px; }

/* Paspor per sub-bab (fitur F3). Baris-baris ini yang mengubah paspor dari rapor menjadi
   alat: murid melihat BAGIAN MANA yang goyah, bukan satu angka untuk satu bab. */
.ch-passport-subs { list-style: none; margin: 8px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-passport-subs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: .78rem; padding: 3px 7px; border-radius: 7px; background: var(--ch-line);
}
.ch-passport-subs li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-passport-subs li b { flex: none; font-variant-numeric: tabular-nums; }
.ch-passport-subs li.is-ok { background: var(--ch-ok-soft); color: var(--ch-ok); }
.ch-passport-subs li.is-weak { background: var(--ch-bad-soft); color: var(--ch-bad); }
.ch-passport-subs li.is-untested { opacity: .62; }
.ch-passport-actions { display: flex; flex-direction: column; gap: 6px; }

/* Stempel yang memudar: bukan hijau (masih bisa), bukan merah (gagal). */
.ch-passport-stamp.is-due { background: var(--ch-info-soft); color: var(--ch-info); }

/* Tugas dari Kurikulum (m025-349, temuan X4). Kartunya MENINGGALKAN halaman ini menuju
   misi.html, jadi ia memakai aksen kiri yang sama dengan pintu adaptif di bawah — bukan
   supaya menonjol, melainkan supaya murid tahu ketukan ini berpindah layar. Bentuknya
   tetap kartu tugas biasa: ia memang tugas, dan tempatnya memang di sini. */
.ch-curriculum-inbox { display: flex; flex-direction: column; gap: 10px; }
.ch-curriculum-inbox > .ch-h2 { margin-bottom: 0; }
.ch-curriculum-inbox > .ch-small { margin: -4px 0 4px; }
.ch-curriculum-task {
  display: block;
  text-decoration: none;
  border-left: 3px solid var(--ch-accent);
}
.ch-curriculum-task:hover,
.ch-curriculum-task:focus-visible { transform: translateY(-1px); }

/* Pintu ke misi adaptif (misi.html). Ia MENINGGALKAN halaman ini, jadi ia tidak boleh
   menyamar sebagai tab: diberi aksen kiri supaya terbaca sebagai jalan keluar, bukan
   sebagai salah satu kartu misi di bawahnya. (m025-349, temuan X3.) */
.ch-adaptive-door {
  border-left: 3px solid var(--ch-accent);
  margin-bottom: 14px;
}

/* Ruang lingkup kartu kurikulum: ikon sebaris dengan teksnya, tanpa menaikkan tinggi baris. */
.ch-curriculum-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.ch-curriculum-scope i,
.ch-curriculum-scope svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.ch-subject-name {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ch-text);
}
.ch-subject-teacher {
  margin: 0;
  font-size: .78rem;
  color: var(--ch-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ch-subject-teacher i, .ch-subject-teacher svg {
  width: 14px;
  height: 14px;
  color: var(--ch-ok);
}
.ch-no-teacher {
  color: var(--ch-muted);
  font-style: italic;
}

/* Compact list di tab Kelas */
.ch-subjects-compact-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.ch-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ch-soft);
  border: 1px solid var(--ch-line);
}
.ch-subject-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
}
.ch-subject-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.ch-teacher-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ch-ok);
  background: var(--ch-ok-soft);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ch-empty-pill {
  font-size: .72rem;
  color: var(--ch-muted);
  font-style: italic;
}
.ch-subject-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--ch-soft);
  color: var(--ch-text);
  margin-right: 4px;
}

/* K12/A5 (m025-351): panel tab adalah pembungkus transparan — id/role dibawa untuk
   aria-controls, tetapi tata letak tetap milik isinya (apa pun display induknya). */
.ch-tabpanel { display: contents; }



/* Tab Kurikulum & Kompetensi di hub guru (m025-357). Isinya dirender teacher shell dan
   memakai kelas .tg-*, jadi yang perlu di sini hanya WADAHNYA: jarak antar bagian yang
   sama dengan tab lain, dan pembatalan animasi masuk .ch-body — panel ini bisa mengecat
   ulang berkali-kali saat tiga permintaan latarnya mendarat satu per satu, dan animasi
   yang diulang di setiap cat ulang terbaca sebagai layar berkedip. */
.ch-kurikulum{gap:18px;animation:none}

/* ==========================================================================
   AUDIT 2026-09-22: Chip Strip Filter (mengganti grid 17 kartu mapel)
   ========================================================================== */
.ch-chip-strip {
  display: flex;
  gap: 6px;
  padding: 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.ch-chip-strip::-webkit-scrollbar { display: none; }

.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--ch-line);
  background: var(--ch-bg);
  color: var(--ch-text);
  font: inherit;
  font-weight: 700;
  font-size: .76rem;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.ch-chip:hover { transform: translateY(-1px); border-color: var(--chip-color, var(--ch-accent)); }
.ch-chip.is-active {
  background: var(--chip-color, var(--ch-accent));
  color: #fff;
  border-color: var(--chip-color, var(--ch-accent));
  box-shadow: 0 4px 12px -6px var(--chip-color, var(--ch-accent));
}
.ch-chip.is-clear {
  background: var(--ch-bad-soft);
  color: var(--ch-bad);
  border-color: transparent;
  font-weight: 800;
}
.ch-chip i, .ch-chip svg { width: 14px; height: 14px; }
.ch-chip-badge {
  background: var(--ch-accent);
  color: #fff;
  border-radius: 999px;
  font-size: .62rem;
  padding: 1px 6px;
  margin-left: 2px;
  font-weight: 800;
}
.ch-chip.is-active .ch-chip-badge {
  background: rgba(255,255,255,.3);
  color: #fff;
}

/* ==========================================================================
   AUDIT 2026-09-22: Section Dividers & Headings
   ========================================================================== */
.ch-divider {
  border: none;
  border-top: 1px dashed var(--ch-line);
  margin: 8px 0;
}
.ch-section-tugas,
.ch-section-done,
.ch-section-kurikulum {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ch-section-tugas .ch-h2 i,
.ch-section-tugas .ch-h2 svg,
.ch-section-done .ch-h2 i,
.ch-section-done .ch-h2 svg,
.ch-section-kurikulum .ch-h2 i,
.ch-section-kurikulum .ch-h2 svg {
  width: 18px;
  height: 18px;
  color: var(--ch-accent);
}

/* ==========================================================================
   AUDIT 2026-09-22: Combined Kurikulum Card (compact)
   ========================================================================== */
.ch-curriculum-compact {
  padding: 14px;
}
.ch-curriculum-compact .ch-actions {
  margin-top: 10px;
}

/* ==========================================================================
   AUDIT 2026-09-22: Enhanced Progres Tab
   ========================================================================== */
.ch-streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, var(--ch-ok-soft), var(--ch-bg));
  border: 1.5px solid rgba(31, 107, 78, 0.2);
}
.ch-streak-emoji {
  font-size: 2rem;
  line-height: 1;
  flex: none;
}
.ch-streak-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ch-streak-info b {
  font-size: 1.2rem;
  font-family: var(--fz-heading, inherit);
}
.ch-streak-info span {
  font-size: .78rem;
  color: var(--ch-muted);
  font-weight: 600;
}
.ch-top-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
}
.ch-top-skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--ch-soft);
}
.ch-top-skill-row .ch-bar { flex: 1; min-width: 40px; }
.ch-top-skill-row b { flex: none; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ch-top-skill-row span { flex: none; min-width: 80px; font-weight: 600; }
.ch-top-skill-row.is-strong { border-left: 3px solid var(--ch-ok); }
.ch-top-skill-row.is-weak { border-left: 3px solid var(--ch-bad); }

/* ==========================================================================
   AUDIT 2026-09-22: Auto-label for Generated Announcements
   ========================================================================== */
.ch-greeting-auto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(82, 62, 134, .55);
  margin-top: 4px;
}
.ch-greeting-auto i, .ch-greeting-auto svg {
  width: 11px;
  height: 11px;
}

/* ==========================================================================
   AUDIT 2026-09-22: Leaderboard Sample Data Indicator
   ========================================================================== */
.ch-papan-sample-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--ch-muted);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ch-soft);
  margin-top: 8px;
}
.ch-papan-sample-notice i, .ch-papan-sample-notice svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ==========================================================================
   m025-364 · SIKLUS HIDUP TUGAS MURID (audit KelasKu K1/K3)
   Segmen status, baris tugas ringkas (judul, satu keterangan, kaki: tenggat + satu tombol),
   grup waktu, dan Arsip. Warna lewat token --ch-* supaya mode gelap ikut dengan sendirinya.
   Kontrol .ch-plain dikecualikan dari tombol-angkat global (style.css) dan diberi awalan .ch
   supaya menang atas `body.fz-lux button` (0,1,2).
   ========================================================================== */
.ch-segbar{display:flex;gap:4px;padding:4px;background:var(--ch-soft);border-radius:14px}
.ch .ch-segbar-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;box-shadow:none;color:var(--ch-muted);font:inherit;font-weight:700;font-size:.84rem;padding:9px 6px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}
.ch .ch-segbar-btn.is-active{background:var(--ch-bg);color:var(--ch-text);box-shadow:0 4px 14px -10px rgba(0,0,0,.45)}
.ch-segbar-n{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--ch-line);color:var(--ch-text);font-size:.7rem;font-weight:800;text-align:center}
.ch-segbar-btn.has-late .ch-segbar-n{background:var(--ch-bad-soft);color:var(--ch-bad)}
.ch .ch-plain:focus-visible{outline:2px solid var(--ch-accent);outline-offset:2px}
.ch-list{display:flex;flex-direction:column;gap:8px}
.ch-group{margin:8px 2px 0;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ch-muted);display:flex;gap:6px;align-items:baseline}
.ch-group small{font-size:.72rem;letter-spacing:0;font-weight:700}
.ch-trow{display:flex;align-items:flex-start;gap:12px;padding:12px}
.ch-trow.is-exam{box-shadow:inset 3px 0 0 var(--ch-info)}
.ch-trow-lead{flex:none;width:44px;height:44px;border-radius:12px;background:var(--ch-soft);color:var(--ch-text);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ch-trow-lead small{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ch-muted)}
.ch-trow-lead b{font-size:1.02rem;font-weight:800;margin-top:2px}
.ch-trow-lead.is-late{background:var(--ch-bad-soft);color:var(--ch-bad)}.ch-trow-lead.is-late small{color:var(--ch-bad)}
.ch-trow-lead.is-none{color:var(--ch-muted)}.ch-trow-lead i,.ch-trow-lead svg{width:18px;height:18px}
.ch-trow-lead.is-score b{font-size:.84rem;margin:0}
.ch-trow-lead.is-hi{background:var(--ch-ok-soft);color:var(--ch-ok)}.ch-trow-lead.is-mid{background:var(--ch-info-soft);color:var(--ch-info)}
.ch-trow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-trow-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ch-info)}
.ch-trow-tag i,.ch-trow-tag svg{width:12px;height:12px}
.ch-card .ch-trow-title{margin:0;font-size:.96rem;line-height:1.25;font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ch-trow-meta{margin:0;font-size:.76rem;color:var(--ch-muted);display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;row-gap:1px;min-width:0}
.ch-sep{opacity:.6}
.ch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chip-color,var(--ch-muted));flex:none;margin-right:1px;vertical-align:middle}
.ch-chip .ch-dot{margin-right:0}.ch-chip.is-active .ch-dot{background:#fff}
.ch-trow-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.ch-trow-when{font-size:.78rem;font-weight:700;color:var(--ch-muted)}.ch-trow-when.is-urgent{color:var(--ch-bad)}
.ch-trow-act{display:flex;align-items:center;gap:6px;margin-left:auto}
.ch-trow.is-done .ch-trow-title,.ch-trow.is-missed .ch-trow-title{font-weight:600}
.ch .ch-icon-btn{flex:none;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;border:1px solid var(--ch-line);background:transparent;box-shadow:none;color:var(--ch-muted);cursor:pointer;transition:background-color .2s,color .2s}
.ch .ch-icon-btn:hover{background:var(--ch-soft);color:var(--ch-text)}.ch-icon-btn i,.ch-icon-btn svg{width:17px;height:17px}
.ch-note{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--ch-muted);padding:2px}
.ch-note i,.ch-note svg{width:15px;height:15px;flex:none;margin-top:2px}
.ch .ch-fold{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px;border:1px dashed var(--ch-line);border-radius:12px;background:transparent;box-shadow:none;color:var(--ch-text);font:inherit;font-weight:700;font-size:.84rem;cursor:pointer}
.ch-fold i,.ch-fold svg{width:16px;height:16px}
.ch .ch-archive-link{display:flex;align-items:center;gap:12px;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--ch-line);border-radius:var(--ch-r);background:var(--ch-soft);box-shadow:none;color:var(--ch-text);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.ch-archive-link>span{flex:1;display:flex;flex-direction:column}.ch-archive-link small{color:var(--ch-muted);font-size:.78rem;font-weight:600}
.ch-archive-link i,.ch-archive-link svg{width:18px;height:18px;flex:none}
.ch-search{display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--ch-line);border-radius:999px;background:var(--ch-bg);color:var(--ch-muted)}
.ch-search i,.ch-search svg{width:16px;height:16px;flex:none}
.ch-search input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;font:inherit;color:var(--ch-text);padding:11px 0;outline:none}
.ch-search:focus-within{border-color:var(--ch-accent)}
.ch-mandiri{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:14px;border-top:1px dashed var(--ch-line)}
.ch-mandiri .ch-h2{margin:0}
@media (max-width:380px){.ch-trow{gap:10px;padding:11px 10px}.ch-trow-lead{width:40px;height:40px}.ch .ch-segbar-btn{font-size:.8rem}}

/* Soal menyimak di runner tugas: tombol Dengarkan, naskah sesudah menjawab (temuan role play murid). */
.ch-listen{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.ch-listen .ch-btn{align-self:flex-start}
.ch-transcript summary{cursor:pointer;font-weight:600}

/* ---- Preflight Face Verification (m025-548) ---- */
.ch-preflight-body{max-width:480px;margin:0 auto;padding:16px 12px 32px}
.ch-face-preflight-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;border-radius:var(--ch-r);background:var(--ch-card,#fff);box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid var(--ch-line)}
.ch-preflight-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:999px;background:var(--ch-info-soft,rgba(56,189,248,0.12));color:var(--ch-info,#0284c7);margin-bottom:12px}
.ch-preflight-badge svg,.ch-preflight-badge i{width:15px;height:15px}
.ch-preflight-title{margin:0 0 8px;font-size:1.22rem;font-weight:800;line-height:1.3;color:var(--ch-text)}
.ch-preflight-desc{margin:0 0 20px;font-size:.88rem;line-height:1.5;color:var(--ch-muted);max-width:380px}
.ch-face-verify-box{position:relative;width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--ch-soft,#f8fafc);border:3px dashed var(--ch-line);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 8px rgba(0,0,0,0.05);transition:border-color .3s ease,box-shadow .3s ease}
.ch-face-verify-box.is-scanning{border-color:var(--ch-accent,#10b981);border-style:solid;animation:chFacePulse 2s infinite ease-in-out}
.ch-face-verify-box.is-challenge{border-color:var(--ch-info,#0284c7);border-style:solid;animation:chFacePulseBlue 1.8s infinite ease-in-out}
.ch-face-verify-box.is-verified{border-color:var(--ch-ok,#10b981);border-style:solid;border-width:4px;box-shadow:0 0 0 6px var(--ch-ok-soft,rgba(16,185,129,0.18)),0 4px 16px rgba(16,185,129,0.25)}
.ch-face-verify-box.is-error{border-color:var(--ch-bad,#ef4444);border-style:solid;box-shadow:0 0 0 4px var(--ch-bad-soft,rgba(239,68,68,0.15))}
.ch-face-preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.ch-face-oval-guide{position:absolute;top:10%;left:15%;width:70%;height:80%;border-radius:50%;border:2px dashed rgba(255,255,255,0.65);pointer-events:none;box-sizing:border-box}
.ch-face-verify-box.is-verified .ch-face-oval-guide{border-color:rgba(16,185,129,0.8);border-style:solid}
.ch-face-placeholder{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--ch-muted)}
.ch-face-placeholder svg,.ch-face-placeholder i{width:48px;height:48px;opacity:.6}
.ch-face-verified-stamp{position:absolute;bottom:8px;right:8px;width:38px;height:38px;border-radius:50%;background:var(--ch-ok,#10b981);color:#fff;display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,0.2);animation:chStampPop .35s cubic-bezier(0.175,0.885,0.32,1.275)}
.ch-face-verified-stamp svg,.ch-face-verified-stamp i{width:22px;height:22px;stroke-width:3}
.ch-preflight-status-row{width:100%;border-radius:12px;padding:10px 14px;margin-bottom:20px;display:flex;flex-direction:column;gap:4px;align-items:center}
.ch-preflight-status-row p{margin:0;display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600}
.ch-preflight-status-row.is-ok{background:var(--ch-ok-soft,rgba(16,185,129,0.12));color:var(--ch-ok,#059669)}
.ch-preflight-status-row.is-warn{background:var(--ch-warn-soft,rgba(245,158,11,0.12));color:var(--ch-warn,#d97706)}
.ch-preflight-status-row.is-err{background:var(--ch-bad-soft,rgba(239,68,68,0.12));color:var(--ch-bad,#dc2626)}
.ch-preflight-status-row.is-idle{background:var(--ch-soft,#f1f5f9);color:var(--ch-muted,#64748b)}
.ch-preflight-status-badge{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;padding:6px 14px;border-radius:999px}
.ch-preflight-status-badge.is-scanning{background:rgba(16,185,129,0.12);color:var(--ch-accent,#059669)}
.ch-preflight-status-badge.is-challenge{background:rgba(2,132,199,0.12);color:var(--ch-info,#0284c7);border:1px solid rgba(2,132,199,0.25)}
.ch-preflight-status-badge.is-verified{background:rgba(16,185,129,0.12);color:var(--ch-ok,#059669)}
.ch-preflight-actions{width:100%;display:flex;flex-direction:column;gap:10px}
.ch-preflight-actions .ch-btn{width:100%;justify-content:center;font-size:1rem;padding:14px 20px;font-weight:700;border-radius:12px}
.ch-btn-verified{background:var(--ch-ok,#10b981)!important;box-shadow:0 4px 14px rgba(16,185,129,0.35)!important}
.ch-col-actions{display:flex;flex-direction:column;gap:8px;width:100%}
@keyframes chFacePulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)}50%{box-shadow:0 0 0 10px rgba(16,185,129,0)}}
@keyframes chFacePulseBlue{0%,100%{box-shadow:0 0 0 0 rgba(2,132,199,0.45)}50%{box-shadow:0 0 0 10px rgba(2,132,199,0)}}
@keyframes chStampPop{0%{transform:scale(0.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}