/* ============================================================
   v12.79.0 — the dashboard map (dm-*) and the course timeline (ct-*)
   From the approved mock-ups "Course page for children" (A and B).
   ============================================================ */

/* ---------- shared ---------- */
.cm-star { width: 16px; height: 16px; fill: #DAD7EA; stroke: none; vertical-align: -3px; }
.cm-star.is-on { fill: #F2B21B; stroke: #B7800A; stroke-width: 1; }
.cm-stars { display: inline-flex; gap: 1px; }

/* ---------- A · dashboard map ---------- */
.dm-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.dm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dm-kicker { display: block; font-size: 13px; font-weight: 700; color: #5B5F7A; }
.dm-title h3 { margin: 0; font-size: 21px; }
.dm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dm-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E6E3F6; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 14px; }
.dm-hero { display: flex; align-items: center; gap: 14px; background: #FFF8EA; border: 1px solid #F3DFA2; border-radius: 18px; padding: 14px 18px; }
.dm-flag { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: #FFE9BF; display: flex; align-items: center; justify-content: center; }
.dm-flag svg { width: 24px; height: 24px; fill: none; stroke: #B45309; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-hero-text b { font-size: 18px; color: #3A2400; }
.dm-hero-text span { font-size: 15px; color: #5A4300; }
.dm-go { border: 0; border-radius: 999px; background: #4F46B8; color: #fff; font: inherit; font-weight: 800; font-size: 15px; padding: 11px 22px; cursor: pointer; white-space: nowrap; min-height: 44px; }
.dm-go:hover { background: #3F27BD; }

.dm-mapwrap { position: relative; display: flex; align-items: stretch; gap: 6px; }
.dm-arrow { flex: 0 0 34px; border: 1px solid #D3EBDC; background: #fff; border-radius: 12px; font-size: 22px; font-weight: 800; color: #24543A; cursor: pointer; }
.dm-map { flex: 1; min-width: 0; overflow-x: auto; background: #EAF6EE; border: 1px solid #D3EBDC; border-radius: 20px; scrollbar-width: thin; }
.dm-track { position: relative; height: 212px; }
.dm-path { position: absolute; left: 0; top: 0; }
.dm-path path { fill: none; stroke-linecap: round; }
.dm-path-all { stroke: #C6DECE; stroke-width: 14; }
.dm-path-done { stroke: #7BC59A; stroke-width: 14; }
.dm-path-dash { stroke: #fff; stroke-width: 3; stroke-dasharray: 2 13; }
.dm-stop { position: absolute; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: #1F2340; }
.dm-dot { width: 56px; height: 56px; border-radius: 50%; box-sizing: border-box; border: 4px solid #fff; background: #fff; display: flex; align-items: center; justify-content: center;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 21px; box-shadow: 0 3px 8px rgba(30, 80, 50, .18); transition: transform .12s; }
.dm-stop:hover .dm-dot, .dm-stop:focus-visible .dm-dot { transform: scale(1.08); }
.dm-stop.is-done .dm-dot { background: #2E9E6B; color: #fff; }
.dm-stop.is-part .dm-dot, .dm-stop.is-open .dm-dot { background: #fff; color: #24543A; border-color: #7BC59A; }
.dm-stop.is-todo .dm-dot { background: #fff; color: #8A4B00; border: 5px solid #E0901B; box-shadow: 0 0 0 5px rgba(224, 144, 27, .22); }
.dm-stop.is-now .dm-dot { width: 64px; height: 64px; background: #4F46B8; color: #fff; box-shadow: 0 0 0 7px rgba(79, 70, 184, .22); margin-top: -4px; }
.dm-stop.is-lock .dm-dot { background: #F1F0F7; color: #7D80A0; }
.dm-stop.is-lock .dm-dot svg { width: 20px; height: 20px; fill: none; stroke: #7D80A0; stroke-width: 2; }
.dm-stop.is-sel .dm-dot { outline: 3px solid #1F2340; outline-offset: 3px; }
.dm-date { font-size: 13px; font-weight: 800; color: #24543A; }
.dm-tag { position: absolute; top: -20px; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.dm-tag.is-now { background: #4F46B8; color: #fff; }
.dm-tag.is-todo { background: #E0901B; color: #fff; }
.dm-mock { font-size: 11px; font-weight: 800; color: #fff; background: #7C3AED; border-radius: 999px; padding: 0 8px; }
.dm-noclass { position: absolute; background: #fff; border: 1px dashed #B9C9BE; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; color: #4A5A50; white-space: nowrap; }
.dm-fog { position: absolute; width: 150px; background: rgba(255, 255, 255, .85); border-radius: 14px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: #4A5A50; line-height: 1.3; }

.dm-mission { background: #fff; border: 1px solid #E6E3F6; border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.dm-mhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dm-mkick { display: block; font-size: 13px; font-weight: 800; color: #8A4B00; text-transform: uppercase; letter-spacing: .06em; }
.dm-mhead h4 { margin: 2px 0 0; font-size: 20px; }
.dm-crit { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; font-weight: 700; color: #6B6F8A; }
.dm-crit .is-on { color: #1F2340; }
.dm-wait { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 15px; color: #4A4E6A; }
.dm-wait svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: #7D80A0; stroke-width: 2; }
.dm-mgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.dm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dm-step { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.dm-num { width: 26px; height: 26px; border-radius: 50%; background: #4F46B8; color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.dm-step b { margin-left: 4px; }
.dm-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dm-subj { border-radius: 14px; padding: 12px 12px 8px; background: #F4F3FA; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-subj.is-maths { background: #EEF3FD; } .dm-subj.is-maths .dm-sname { color: #1E3A8A; }
.dm-subj.is-english { background: #FDF0EA; } .dm-subj.is-english .dm-sname { color: #9A3412; }
.dm-subj.is-vr { background: #F3EEFE; } .dm-subj.is-vr .dm-sname { color: #5B21B6; }
.dm-subj.is-nvr { background: #E8F6F5; } .dm-subj.is-nvr .dm-sname { color: #115E59; }
.dm-sname { font-weight: 800; font-size: 15px; margin-bottom: 4px; color: #2A2E50; }
.dm-sname span { font-weight: 700; color: #6B6F8A; font-size: 13px; margin-left: 4px; }
.dm-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); grid-template-areas: "tick verb ttl" ". meta meta"; column-gap: 8px; align-items: center;
  padding: 6px 6px; border-radius: 10px; text-decoration: none; color: #1F2340; }
a.dm-row:hover { background: rgba(255, 255, 255, .8); }
.dm-row.is-locked { color: #7D80A0; }
.dm-tick { grid-area: tick; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #B9B6D6; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #fff; }
.dm-tick.is-done { background: #2E9E6B; border-color: #2E9E6B; color: #fff; }
.dm-tick.is-part { border-color: #E0901B; color: #B45309; }
.dm-verb { grid-area: verb; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6B6F8A; white-space: nowrap; }
.dm-ttl { grid-area: ttl; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-meta { grid-area: meta; font-size: 12px; color: #6B6F8A; }
.dm-meta:empty { display: none; }
.dm-due { color: #9A3412; font-weight: 800; }
.dm-due.is-late { color: #B91C1C; }
.dm-score { color: #17643F; font-weight: 800; }
.dm-none { margin: 0; color: #6B6F8A; font-size: 14px; }
.dm-quiz { border-radius: 18px; background: #2A1F7A; color: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.dm-quiz.is-done { background: #E9F7EF; color: #17402B; }
.dm-qkick { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.dm-quiz b { font-size: 18px; }
.dm-qmeta { font-size: 14px; opacity: .9; }
.dm-qacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.dm-qbtn { display: inline-block; background: #fff; color: #2A1F7A; border-radius: 999px; padding: 10px 20px; font-weight: 800; text-decoration: none; min-height: 20px; }
.dm-qbtn:hover { filter: brightness(.96); }
.dm-qbtn.is-ghost { background: transparent; border: 1.5px solid currentColor; padding: 8px 16px; color: inherit; }
.dm-quiz.is-done .dm-qbtn.is-ghost { color: #17643F; }
.dm-qstate { font-weight: 800; font-size: 14px; }
.dm-qstate.is-done { color: #17643F; }
.dm-mockcard { border-radius: 16px; border: 1.5px solid #D9CCFB; background: #FAF7FF; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: #3B1D7A; }
.dm-mockcard .dm-qbtn { align-self: flex-start; color: #5B21B6; }
.dm-paper { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; background: #FFF6DA; border: 1px solid #F3DFA2; padding: 12px 14px; color: #6B4A00; }
.dm-paper svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: #8A5A00; stroke-width: 2; stroke-linecap: round; }
.dm-paper b { display: block; }
.dm-paper span { font-size: 14px; }
/* the answer-sheet buttons come with " · " separators for the week line; not wanted here */
.dm-omr { font-size: 0; }
.dm-omr button { font-size: 14px; margin: 0 8px 6px 0; }
.dm-bonus { display: block; border-radius: 14px; border: 1.5px dashed #CFC9F5; padding: 10px 14px; font-weight: 800; text-decoration: none; color: #3F27BD; font-size: 14px; }
.dm-bonus.is-locked { color: #7D80A0; border-color: #E1DFEE; }

@media (max-width: 860px) {
  .dm-mgrid { grid-template-columns: minmax(0, 1fr); }
  .dm-hero { flex-wrap: wrap; }
  .dm-go { width: 100%; }
}
@media (max-width: 560px) {
  .dm-card { padding: 14px; }
  .dm-subjects { grid-template-columns: minmax(0, 1fr); }
  .dm-arrow { display: none; }
  .dm-tools .btn { flex: 1 1 auto; }
}

/* ---------- B · course timeline ---------- */
.ct-herobtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ct { margin-top: 14px; }
.ct-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ct-stat { background: #fff; border: 1px solid #E6E3F6; border-radius: 14px; padding: 10px 14px; min-width: 0; }
.ct-stat b { display: block; font-size: 18px; color: #26295a; }
.ct-stat span { font-size: 13px; font-weight: 700; color: #6B6F8A; }
.ct-stat.is-warn { background: #FFF6E3; border-color: #F3DFA2; }
.ct-stat.is-warn b, .ct-stat.is-warn span { color: #8A4B00; }
.ct-tabs { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #E6E3F6; margin-bottom: 12px; }
.ct-tab { border: 0; background: none; padding: 8px 2px; margin-right: 18px; font: inherit; font-weight: 800; font-size: 15px; color: #6B6F8A; cursor: pointer; border-bottom: 3px solid transparent; min-height: 40px; }
.ct-tab.is-on { color: #3F27BD; border-bottom-color: #4F46B8; }
.ct-jump { margin-left: auto; border: 0; background: none; color: #4F46B8; font: inherit; font-weight: 800; cursor: pointer; min-height: 40px; }
.ct-more { display: block; width: 100%; border: 1.5px dashed #CFC9F5; background: #FBFAFF; color: #3F27BD; border-radius: 12px; padding: 9px; font: inherit; font-weight: 800; cursor: pointer; margin: 8px 0; }
.ct-tl { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 10px; }
.ct-tl:before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 3px; background: #E1DEF7; border-radius: 3px; }
.ct-month { margin-left: -40px; font-weight: 800; font-size: 16px; color: #26295a; padding-top: 8px; }
.ct-row { position: relative; background: #fff; border: 1px solid #E6E3F6; border-radius: 14px; }
.ct-row.is-cur { border: 2px solid #4F46B8; box-shadow: 0 0 0 4px rgba(79, 70, 184, .1); }
.ct-row.is-todo:not(.is-cur) { border-color: #EBC27A; }
.ct-row.is-lock { background: #FBFBFE; border-style: dashed; }
.ct-row.ct-break { background: none; border: 0; padding: 0 12px; font-size: 14px; font-weight: 700; font-style: italic; color: #6B6F8A; }
.ct-dot { position: absolute; left: -33px; top: 17px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2.5px solid #8b84e0; }
.ct-dot.is-done { background: #2E9E6B; border-color: #2E9E6B; }
.ct-dot.is-part, .ct-dot.is-open { border-color: #7BC59A; }
.ct-dot.is-todo { border: 3px solid #E0901B; }
.ct-dot.is-lock { border-color: #C9C6E6; }
.ct-dot.is-now { width: 22px; height: 22px; left: -37px; top: 13px; border: 5px solid #4F46B8; }
.ct-dot.is-break { width: 9px; height: 9px; left: -31px; top: 6px; background: #D3D0EA; border: 0; }
.ct-head { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 14px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.ct-head:hover { background: #FAF9FF; }
.ct-head.is-static { cursor: default; }
.ct-head.is-static:hover { background: none; }
.ct-when { display: flex; flex-direction: column; width: 140px; white-space: nowrap; }
.ct-when b { font-size: 15px; }
.ct-when span { font-size: 13px; font-weight: 700; color: #6B6F8A; }
.ct-row.is-cur .ct-when span { color: #3F27BD; }
.ct-tag { border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; }
.ct-tag.is-now { background: #4F46B8; color: #fff; }
.ct-tag.is-todo { background: #FFF1D6; color: #8A4B00; }
.ct-tag.is-mock { background: #EFE7FE; color: #5B21B6; }
.ct-tag.is-paper { background: #FFF6DA; color: #6B4A00; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.ct-chip { border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 800; background: #EFEEF8; color: #3D4060; }
.ct-chip.is-maths { background: #E1EBFC; color: #1E3A8A; }
.ct-chip.is-english { background: #FBE3D8; color: #9A3412; }
.ct-chip.is-vr { background: #EBE2FD; color: #5B21B6; }
.ct-chip.is-nvr { background: #D7F0EE; color: #115E59; }
.ct-chip.is-done { box-shadow: inset 0 0 0 1.5px #2E9E6B; }
.ct-pill { border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ct-pill.is-done { background: #E3F6EC; color: #17643F; }
.ct-pill.is-todo { background: #FFE9BF; color: #7A4100; }
.ct-note { flex: 1; font-size: 14px; font-weight: 700; color: #6B6F8A; }
.ct-open { margin-left: auto; font-size: 13px; font-weight: 800; color: #4F46B8; white-space: nowrap; }
.ct-body { padding: 4px 14px 14px; border-top: 1px solid #EFEDF9; }
.ct-body .wk-detail-bare { margin-top: 10px; }
.ct-staff { margin: 10px 0 0; }
.ct-empty { color: #6B6F8A; font-size: 15px; }
@media (max-width: 760px) {
  .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-when { width: auto; }
  .ct-tl { padding-left: 32px; }
  .ct-dot { left: -27px; } .ct-dot.is-now { left: -31px; } .ct-dot.is-break { left: -25px; }
  .ct-month { margin-left: -32px; }
  .ct-jump { margin-left: 0; }
  .ct-body { padding: 4px 8px 10px; }
}

/* v12.79.1: "Quizzes only" (the Weekly quizzes page, folded into the timeline) */
.ct-qonly { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; border: 1.5px solid #E2DEF8; background: #fff; border-radius: 999px;
  padding: 6px 14px 6px 8px; font: inherit; font-weight: 800; font-size: 14px; color: #3D4060; cursor: pointer; min-height: 36px; }
.ct-qonly + .ct-jump { margin-left: 14px; }
.ct-switch { width: 30px; height: 18px; border-radius: 999px; background: #D9D6EE; position: relative; transition: background .15s; }
.ct-switch:after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.ct-qonly.is-on { border-color: #4F46B8; color: #3F27BD; }
.ct-qonly.is-on .ct-switch { background: #4F46B8; }
.ct-qonly.is-on .ct-switch:after { left: 14px; }
.ct-qlist { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ct-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-qttl { flex: 1; min-width: 160px; font-weight: 700; }
.ct-qttl small { font-weight: 700; color: #6B6F8A; margin-left: 4px; }
.ct-qbtn { display: inline-block; border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 13px; text-decoration: none; background: #4F46B8; color: #fff; }
.ct-qbtn.is-ghost { background: #fff; color: #3F27BD; border: 1.5px solid #E2DEF8; }
.ct-pill:not(.is-done):not(.is-todo) { background: #EFEEF8; color: #4A4E6A; }
.ct-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-qonly { margin-left: 0; }
}

/* v12.79.2: a gap pill sits on the path, centred between the two weeks */
.dm-noclass { transform: translate(-50%, -50%); z-index: 1; }

/* v12.79.2: a little tighter, on the dashboard and the course page */
.dm-card { padding: 16px 18px; gap: 12px; }
.dm-hero { padding: 10px 14px; gap: 12px; }
.dm-flag { width: 40px; height: 40px; flex-basis: 40px; }
.dm-hero-text b { font-size: 17px; }
.dm-track { height: 196px; }
.dm-mission { padding: 14px 16px; gap: 12px; }
.dm-mgrid { gap: 14px; }
.dm-col { gap: 10px; }
.dm-subjects { gap: 8px; }
.dm-subj { padding: 10px 10px 6px; }
.dm-row { padding: 4px 6px; }
.dm-quiz { padding: 13px 15px; gap: 4px; }
.ct { margin-top: 10px; }
.ct-stats { gap: 8px; margin-bottom: 8px; }
.ct-stat { padding: 8px 12px; }
.ct-stat b { font-size: 17px; }
.ct-tabs { margin-bottom: 8px; }
.ct-tl { gap: 7px; }
.ct-head { padding: 8px 12px; }
.ct-dot { top: 14px; } .ct-dot.is-now { top: 10px; }
.ct .ct-body { padding: 2px 10px 10px; }
.ct .ct-body .wk-detail-bare { margin-top: 6px; }
.ct .ct-body .wk-detail-line { margin: 0 0 6px !important; }
.ct .ct-body .wk-classline { margin: 0 0 4px; }
.ct .ct-body .wk-sessions { gap: 8px; }
.ct .ct-body .wk-classline + .wk-sessions { margin-bottom: 8px; }
.ct .ct-body .wk-session { padding: 8px 10px; }
.ct .ct-body .wk-row { padding: 3px 6px; }
.ct .ct-body .wk-paper { margin: 4px 0 8px; }

/* ---------- v12.80.0 · first-time help tours ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 9000; }
.tour-shield { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(22, 18, 54, .58); outline: 3px solid #FFD166; outline-offset: 2px;
  pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; }
.tour-card { position: fixed; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; background: #fff; border-radius: 18px; padding: 16px 18px 14px;
  box-shadow: 0 18px 50px rgba(20, 16, 60, .35); font-family: inherit; color: #1F2340; transition: left .25s, top .25s; }
.tour-card.is-docked { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.tour-count { margin: 0; font-size: 12px; font-weight: 800; color: #6B6F8A; text-transform: uppercase; letter-spacing: .06em; }
.tour-card h3 { margin: 2px 0 6px; font-size: 19px; }
.tour-text { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #34385A; }
.tour-again { display: block; margin-top: 8px; font-size: 13px; color: #6B6F8A; }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-gap { flex: 1; }
.tour-btns button { font: inherit; font-weight: 800; border-radius: 999px; cursor: pointer; min-height: 40px; padding: 8px 16px; }
.tour-skip { border: 0; background: none; color: #6B6F8A; padding-left: 4px !important; }
.tour-back { border: 1.5px solid #E2DEF8; background: #fff; color: #3F27BD; }
.tour-next { border: 0; background: #4F46B8; color: #fff; }
.tour-next:hover { background: #3F27BD; }
.tour-start { border: 0; background: none; font: inherit; font-weight: 800; color: #4F46B8; cursor: pointer; padding: 4px 6px; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* ---------- v12.80.1 · the Course guide card and its preview ---------- */
.cg-teasers { display: grid; gap: 8px; }
.cg-teaser { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #1F2340; background: linear-gradient(90deg, #F1EEFF, #FBEFFA);
  border: 1.5px solid #D9D2FA; border-radius: 16px; padding: 10px 14px; margin-top: 8px; }
.cg-teaser:hover, .cg-teaser:focus-visible { border-color: #4F46B8; box-shadow: 0 4px 14px rgba(79, 70, 184, .15); }
.cg-teaser-ico { font-size: 26px; line-height: 1; }
.cg-teaser-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cg-teaser-text b { font-size: 15px; color: #2A1F7A; }
.cg-teaser-text > span { font-size: 13px; color: #4A4E6A; }
.cg-teaser-for { font-weight: 700; color: #6B6F8A; }
.cg-teaser-new { background: #D22CB2; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; animation: cg-pulse 2s ease-in-out infinite; }
.cg-teaser-go { font-weight: 800; color: #3F27BD; white-space: nowrap; }
@keyframes cg-pulse { 50% { box-shadow: 0 0 0 6px rgba(210, 44, 178, .18); } }
@media (prefers-reduced-motion: reduce) { .cg-teaser-new { animation: none; } }
.dm-card .cg-teaser { margin-top: 0; }
.course-hero .cg-teaser { max-width: 640px; }
.cg-preview { position: fixed; z-index: 8500; width: 460px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 16, 60, .3);
  border: 1px solid #E2DEF8; overflow: hidden; pointer-events: none; }
.cg-preview-head { padding: 8px 14px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6B6F8A; border-bottom: 1px solid #EFEDF9; }
.cg-preview-frame { height: 300px; overflow: hidden; position: relative; }
.cg-preview-frame:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, #fff); }
.cg-preview-inner { width: 1100px; transform: scale(.418); transform-origin: 0 0; padding: 12px; box-sizing: border-box; }
.cg-preview-foot { padding: 8px 14px; font-size: 13px; font-weight: 800; color: #3F27BD; border-top: 1px solid #EFEDF9; }
@media (max-width: 560px) { .cg-teaser-go { display: none; } .cg-teaser { padding: 10px; } }
.course-hero.is-slim { align-items: flex-start; }   /* v12.80.1: the course mark stays top-left beside the guide card */

/* ---------- v12.81.0 · "This week" in the email composer ---------- */
.rm-week { border-bottom: 1px solid var(--line, #E6E3F6); background: #FBFAFF; padding: 10px; }
.rm-week-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; }
.rm-week-pick select { margin-left: 6px; max-width: 280px; }
.rm-week-own { font-weight: 600; }
.rm-week-prev { margin-top: 8px; max-height: 380px; overflow: auto; border: 1px dashed #D9D2FA; border-radius: 10px; padding: 8px; background: #fff; }
.rm-week-acts { margin: 8px 0 0; display: flex; gap: 8px; }
.rm-week-note { margin: 0; padding: 4px 10px; font-size: .78rem; color: #3F27BD; background: #F4F1FF; }

/* v12.81.0: the course hero is one band: the name (with Show me around under
   it) on the left, the Course guide card beside it */
.course-hero.is-slim { align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.course-hero.is-slim .ct-herotitle { flex: 0 1 auto !important; min-width: 240px; }
.course-hero.is-slim .ct-herotitle h1 { margin: 0 0 4px !important; }
.course-hero.is-slim .ct-herotitle .small { margin: 2px 0 0; }
.course-hero.is-slim .ct-herobtns { margin: 4px 0 0; }
.ct-heroguide { flex: 1 1 380px; min-width: 0; }
.ct-heroguide .cg-teaser { margin: 0; max-width: none; }
.rm-week-own { display: flex !important; align-items: center; gap: 6px; flex-direction: row !important; }
.rm-week-own input { width: auto !important; margin: 0; }
.rm-week-pick label { display: flex; align-items: center; gap: 4px; }

/* ---------- v12.81.1 · a lesson in full screen: the bottom stays on screen ----------
   The sheet is a column: the header, then the body, which the deck's frame
   fills, with the Previous / Next bar under it. Before, the frame's height was
   the screen minus a guess (104px), and the "Mark as complete" card above it
   and the bar below it pushed the deck's own buttons off the bottom. */
.wk-viewer.is-full:has(.code-frame.is-fill) { display: flex; flex-direction: column; height: calc(100dvh - 24px); }
.wk-viewer.is-full:has(.code-frame.is-fill) .wk-viewer-head { flex: 0 0 auto; }
.wk-viewer.is-full:has(.code-frame.is-fill) .wk-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.wk-viewer.is-full:has(.code-frame.is-fill) .course-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wk-viewer.is-full:has(.code-frame.is-fill) .lesson-block:has(.code-frame.is-fill) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wk-viewer.is-full:has(.code-frame.is-fill) .tp-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wk-viewer.is-full:has(.code-frame.is-fill) .code-frame.is-fill { flex: 1 1 auto; height: auto !important; min-height: 320px; }
.wk-viewer.is-full:has(.code-frame.is-fill) .course-navbar { flex: 0 0 auto; margin: 0; padding: 6px 0 0; }
.wk-viewer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-viewer-tools #btn-complete-lesson { white-space: nowrap; }

/* ---------- v12.82.0 · marks over a guide picture (option B) ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gm-wrap { position: relative; }
.gm-wrap > img { display: block; width: 100%; }
/* v12.89.0: much lighter (was .16): the owner found the slides too grey; the pins and notes carry the attention */
.gm-dim { position: absolute; inset: 0; border-radius: 12px; background: rgba(18, 14, 50, .04); opacity: 0; pointer-events: none; }
.gm-pin { position: absolute; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.gm-dot { width: 32px; height: 32px; border-radius: 50%; background: #D22CB2; color: #fff; font-family: Poppins, sans-serif; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, .25); }
.gm-note { position: absolute; left: 42px; top: 50%; transform: translateY(-50%) rotate(-2deg); white-space: nowrap; background: #FFF4A8; color: #3A2C00;
  font-family: Caveat, cursive; font-size: 22px; font-weight: 700; line-height: 1.1; padding: 3px 10px 5px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.gm-left .gm-note { left: auto; right: 42px; transform: translateY(-50%) rotate(2deg); }
.gm-below .gm-note { top: 46px; left: -10px; transform: rotate(-2deg); }
.gm-free { opacity: 0; pointer-events: none; transform: rotate(-2deg); left: 0; top: 0; }
.gm-pen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* the dash is longer than any circle on screen (with a non-scaling stroke a browser may measure it in pixels), so it draws in full */
.gm-pen ellipse { fill: none; stroke: #D22CB2; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.guide-slide.on .gm-dim, .gm-play .gm-dim { animation: gm-fade .5s ease .3s forwards; }
.guide-slide.on .gm-pin, .gm-play .gm-pin { animation: gm-pop .5s cubic-bezier(.3, 1.6, .5, 1) var(--d) forwards; }
.guide-slide.on .gm-free, .gm-play .gm-free { animation: gm-fade .4s ease calc(var(--d) + .9s) forwards; }
.guide-slide.on .gm-pen ellipse, .gm-play .gm-pen ellipse { animation: gm-draw 1.6s ease-in-out var(--d) forwards; }
@keyframes gm-pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes gm-fade { to { opacity: 1; } }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gm-pin, .guide-slide.on .gm-pin { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .gm-pen ellipse, .guide-slide.on .gm-pen ellipse { animation: none; stroke-dashoffset: 0; }
  .gm-free, .gm-dim { animation: none !important; opacity: 1; }
}
@media (max-width: 640px) { .gm-dot { width: 24px; height: 24px; font-size: 13px; } .gm-note { font-size: 17px; left: 30px; } .gm-left .gm-note { right: 30px; } }

/* the editor: marks on a slide */
.gm-edit { margin: 6px 0 10px; padding: 12px; border: 1.5px dashed #D9D2FA; border-radius: 12px; background: #FBFAFF; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.gm-edit-pic { position: relative; cursor: crosshair; user-select: none; border-radius: 10px; overflow: hidden; border: 1px solid #E6E3F6; }
.gm-edit-pic img { display: block; width: 100%; pointer-events: none; }
.gm-edit-pic .gm-pin, .gm-edit-pic .gm-free { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gm-edit-pic .gm-free { transform: rotate(-2deg); }
.gm-edit-pic .gm-pen ellipse { stroke-dashoffset: 0; }
.gm-edit-pic.gm-play .gm-pin, .gm-edit-pic.gm-play .gm-free { opacity: 0; transform: translate(-50%, -50%) scale(0); }
.gm-edit-pic.gm-play .gm-pen ellipse { stroke-dashoffset: 3000; }
.gm-draft { position: absolute; border: 2px dashed #D22CB2; border-radius: 50%; pointer-events: none; }
.gm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gm-tools .is-on { border-color: #4F46B8 !important; background: #EFEDFF !important; color: #2A1F7A !important; }
.gm-list { display: flex; flex-direction: column; gap: 6px; }
.gm-row { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #E6E3F6; border-radius: 10px; padding: 6px 8px; }
.gm-row b { width: 22px; height: 22px; border-radius: 50%; background: #D22CB2; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
.gm-row b.is-circle { background: #fff; border: 2px solid #D22CB2; color: #D22CB2; }
.gm-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #E2DEF8; border-radius: 8px; }
.gm-row button { border: 0; background: none; cursor: pointer; font-size: 14px; color: #6B6F8A; width: 28px; height: 28px; }
.gd-markbtn { white-space: nowrap; }
@media (max-width: 900px) { .gm-edit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v12.82.1 · guide pictures fit the screen, and a full-screen view ----------
   --gh is the height left for a picture (set by guideFit in app.js); the
   wrapper round a marked picture shrinks to it, so the marks stay aligned */
.guide-slide { text-align: center; }
.guide-slide > img, .guide-slide .gm-wrap > img { width: auto; max-width: 100%; max-height: var(--gh, calc(100vh - 300px)); margin: 0 auto; cursor: zoom-in; }
.guide-slide .gm-wrap { display: inline-block; max-width: 100%; vertical-align: top; }
.guide-slide .gm-wrap > img { border: 1px solid var(--line, #E6E3F6); border-radius: 12px;
  filter: brightness(1.07) contrast(1.03); }   /* v12.89.0: lifts screenshots taken with the site's own dark backdrop showing */
.guide-slide .guide-embed, .guide-slide .guide-video { max-width: min(100%, calc(var(--gh, 60vh) * 16 / 9)); margin: 0 auto; }
.guide-slide figcaption { text-align: left; max-width: 900px; margin: 8px auto 0; font-weight: 600; }
.guide-controls { flex-wrap: wrap; }
.guide-count { min-width: 52px; text-align: center; }
.guide-fs-head, .guide-fs-close { display: none !important; }

.guide-show.is-fs { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; background: rgba(14, 11, 40, .94);
  display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; box-sizing: border-box; --gh: calc(100dvh - 150px) !important; overflow: hidden; }
.guide-show.is-fs .guide-fs-head { display: block !important; color: #fff; font-family: Poppins, sans-serif; font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 8px; }
.guide-show.is-fs .guide-slide img { cursor: default; border-color: transparent; }
.guide-show.is-fs figcaption { color: #fff; font-size: 1.1rem; text-align: center; }
.guide-show.is-fs .guide-controls .btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }
.guide-show.is-fs .guide-count { color: #D9D6EE; }
.guide-show.is-fs .guide-fs-btn { display: none; }
.guide-show.is-fs .guide-fs-close { display: inline-flex !important; background: #fff !important; color: #2A1F7A !important; }
.guide-show.is-fs .gm-note { font-size: 26px; }
body.guide-fs-open { overflow: hidden; }
@media (max-width: 640px) { .guide-show.is-fs { padding: 8px; --gh: calc(100dvh - 170px) !important; } }
/* v12.82.1: a callout near the top right corner puts its label below and to the left, not off the picture */
.gm-left.gm-below .gm-note { left: auto; right: -10px; transform: rotate(2deg); }

/* v12.83.1: a child's answer-sheet QR code, shown on screen */
.womr-qr { width: 220px; max-width: 70vw; margin: 8px auto 10px; padding: 8px; background: #fff; border: 1px solid #E6E3F6; border-radius: 12px; }
.womr-qr svg { display: block; width: 100%; height: auto; }

/* ---------- v12.84.0 · the Replies inbox ---------- */
.ib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ib-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ib-tabs { display: inline-flex; gap: 4px; }
.ib-status { margin: 4px 0 10px; }
.ib-warn { color: #B42318; }
.ib-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ib-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 230px); overflow: auto; padding-right: 2px; }
.ib-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; font: inherit; background: #fff; border: 1px solid var(--line, #E6E3F6);
  border-radius: 12px; padding: 9px 11px; cursor: pointer; color: inherit; }
.ib-item:hover { border-color: #C9C2F2; }
.ib-item.is-on { border-color: #4F46B8; box-shadow: 0 0 0 2px rgba(79, 70, 184, .15); }
.ib-item.is-unread .ib-from, .ib-item.is-unread .ib-subj { font-weight: 800; }
.ib-item.is-unread { border-left: 4px solid #4F46B8; }
.ib-item.is-done { opacity: .75; }
.ib-from { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-kid { font-size: 12px; color: #6B6F8A; font-weight: 600; }
.ib-when { font-size: 12px; color: #6B6F8A; white-space: nowrap; }
.ib-subj { grid-column: 1 / -1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-prev { grid-column: 1 / -1; font-size: 12.5px; color: #6B6F8A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-detail { background: #fff; border: 1px solid var(--line, #E6E3F6); border-radius: 14px; padding: 14px 16px; min-height: 240px; }
.ib-mhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #E6E3F6); padding-bottom: 8px; margin-bottom: 10px; }
.ib-mhead h3 { margin: 0 0 2px; font-size: 18px; }
.ib-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.ib-body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: 15px; }
.ib-quoted, .ib-orig, .ib-thread { margin: 10px 0; }
.ib-quoted .ib-body, .ib-orig .ib-body { background: #F7F6FC; border-radius: 10px; padding: 8px 10px; margin-top: 6px; color: #4A4E6A; max-height: 320px; overflow: auto; }
.ib-tmsg { border-left: 3px solid #E0DDF3; padding: 4px 10px; margin: 8px 0; }
.ib-tmsg.is-us { border-left-color: #4F46B8; background: #F7F6FC; border-radius: 0 8px 8px 0; }
.ib-atts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ib-answer { margin-top: 14px; border-top: 1px solid var(--line, #E6E3F6); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ib-answer textarea { width: 100%; }
.ib-send { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ib-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #D22CB2; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
@media (max-width: 900px) { .ib-grid { grid-template-columns: 1fr; } .ib-list { max-height: 46vh; } }
.ib-set { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: -4px 0 10px; color: #4A4E6A; }
.ib-set select { font: inherit; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line, #E6E3F6); }

/* v12.86.0: the answer format choice for a sheet */
.womr-style { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 2px; }
.womr-sopt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 10px; border: 1.5px solid var(--line, #E6E3F6); border-radius: 999px; cursor: pointer; background: #fff; }
.womr-sopt.is-on { border-color: #4F46B8; background: #EFEDFF; color: #2A1F7A; font-weight: 700; }
.om-style select { margin-left: 4px; font: inherit; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line, #E6E3F6); }

/* v12.92.0: dashboard boxes (Settings, Dashboard messages) and Courses you can join */
.announce .start-list { margin: 6px 0 0; padding-left: 20px; }
.announce .start-list li { margin: 3px 0; }
.announce.dash-box .dash-box-frame { margin-top: 2px; }
.explore-table td:nth-child(2) { white-space: nowrap; color: var(--ink-2, #5b5f7a); }
@media (max-width: 640px) { .explore-table td:nth-child(2) { white-space: normal; } }

/* v12.98.0: Replies inbox search and filters; AI-suggested answers */
.ib-search { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.ib-search input[type="search"] { flex: 1 1 320px; min-width: 220px; }
.ib-search input[type="date"] { width: auto; }
.ib-search .check { margin: 0; }
.ib-count { margin: 0 0 8px; color: var(--muted, #667085); }
.ib-list mark { background: #FFE58F; color: inherit; border-radius: 3px; padding: 0 1px; }
.ib-ai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.ib-ai .small { color: var(--muted, #667085); }
.em-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.em-search input[type="search"] { flex: 1 1 280px; }

/* v12.99.0: Notify parents (a week, instructor view) */
.wn-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.wn-kind { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line, #E6E3F6); border-radius: 14px; padding: 12px; background: #fff; }
.wn-kind.is-off { opacity: .6; }
.wn-kind .btn { margin-top: auto; align-self: flex-start; }
.wn-ico { font-size: 1.6rem; line-height: 1; }
.wn-warn { background: #FFF6E6; border: 1px solid #F3D9A6; color: #7A5200; border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; }
.wn-prev { width: 100%; height: 340px; border: 1px solid var(--line, #E6E3F6); border-radius: 10px; background: #fff; }
/* v13.4.1: a quiz or mock listed before it is uploaded */
.wk-soon{ display:block; width:fit-content; max-width:100%; margin-top:4px; line-height:1.35; font-size:.8rem; font-weight:600; color:#5B3CC4; background:#F1ECFC; border-radius:10px; padding:2px 10px; white-space:normal; }
.ct-pill.is-soon{ background:#F1ECFC; color:#5B3CC4; white-space:normal; }
/* v13.4.2: a quiz's comprehension passage beside each question */
.q-psg-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.q-psg-side .passage-panel.inline{ margin:0; max-height:72vh; overflow:auto; position:sticky; top:12px; }
.q-psg-main .q-split{ grid-template-columns:1fr; }
@media (max-width:900px){
  .q-psg-wrap{ grid-template-columns:1fr; }
  .q-psg-side .passage-panel.inline{ max-height:42vh; position:static; }
}

/* v13.6.3: the Weekly Vocab Booster card on the student dashboard */
.vbd .vbd-track{ padding:10px 0; border-top:1px solid var(--line, #ECEAF4); }
.vbd .vbd-track:first-of-type{ border-top:0; padding-top:0; }
.vbd-title{ margin:0 0 6px; }
.vbd-meter{ height:10px; border-radius:999px; background:#EEEAFB; overflow:hidden; max-width:520px; }
.vbd-meter i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#3F27BD,#D22CB2); }
.vbd-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.vbd-chip{ display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:999px; border:1.5px solid #DCD6F5; background:#fff;
  font-size:.86rem; font-weight:700; color:#3F27BD; text-decoration:none; }
.vbd-chip:hover{ border-color:#3F27BD; }
.vbd-chip.is-done{ background:#EAF6EC; border-color:#9ED3A8; color:#1F6B2E; }
.vbd-chip.is-soon{ color:#9A9AB0; border-style:dashed; }
.vbd-next{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:8px; }
.vbd-weeks{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.vbd-wks{ display:inline-flex; gap:5px; flex-wrap:wrap; }
.vbd-wk{ width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; font-size:.78rem; font-weight:800; text-decoration:none;
  border:1.5px solid #DCD6F5; color:#6A7090; background:#fff; }
.vbd-wk.is-part{ background:#FFF4DE; border-color:#F2C46B; color:#8A5A00; }
.vbd-wk.is-done{ background:#2E7D32; border-color:#2E7D32; color:#fff; }
.vbd-wk.is-cur{ box-shadow:0 0 0 3px rgba(63,39,189,.25); }

/* v13.10.0: Learn with us (Sparky and Ray with Parent's Little Helpers): badge, lesson card, editor tick */
.lw-tag{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;padding:1px 9px 1px 2px;border-radius:999px;background:#F0EAFF;border:1.5px solid #D6CCF7;color:#5B21B6;font-weight:800;font-size:.74rem;line-height:1.5;white-space:nowrap}
.lw-duo{display:inline-flex;flex:0 0 auto}
.lw-duo img{width:18px;height:18px;border-radius:50%;border:1.5px solid #fff;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);display:block}
.lw-duo img+img{margin-left:-6px}
.lw-duo.lw-big img{width:58px;height:58px;border-width:3px}
.lw-duo.lw-big img+img{margin-left:-16px}
.lesson-thumb.lw-thumb{background:linear-gradient(135deg,#F3EDFF,#FFF1E6)}
.lf-learn{display:flex;gap:12px;align-items:flex-start;margin:6px 0 12px;padding:10px 12px;border:2px solid #D6CCF7;border-radius:12px;background:#F7F3FF}
/* v13.13.0: Edit lesson, the Classroom box (Team Ray against Team Sparky) */
.lf-learn .lf-class{margin:10px 0 0;padding:8px 10px;border:2px solid #FDBA8C;border-radius:10px;background:#fff}
.lf-learn .lf-class summary{cursor:pointer}
.lf-learn .lf-class .field{display:block;margin:6px 0}
.lf-learn .lf-class input,.lf-learn .lf-class textarea{width:100%}
.lf-learn:not(.has){background:#fafafa;border-color:var(--line,#e5e7eb)}
.lf-learn-duo{display:inline-flex;flex:0 0 auto}
.lf-learn-duo img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.lf-learn-duo img+img{margin-left:-10px}
.lf-learn .check{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.lbe-learn{margin-left:8px;display:inline-block;padding:1px 9px;border-radius:999px;background:#F0EAFF;color:#5B21B6;font-weight:800;font-size:.75rem}

/* v13.23.0: papers on paper in the week's mission */
.dm-row.is-paper { background: #FFFBEB; box-shadow: inset 3px 0 0 #FBBF24; border-radius: 8px; }
.dm-row .wk-paper-tag { grid-column: 2 / -1; justify-self: start; margin: 2px 0 0; }
.dm-paperrow { margin: 4px 0; }
.dm-paperrow .wk-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid #FCD34D; text-decoration: none; color: inherit; }
.dm-paperrow .wk-title { flex: 1 1 140px; font-weight: 700; }
.dm-paperrow .wk-tick { width: 20px; text-align: center; }
/* v13.24.0: Full course view beside the week's stars */
.dm-mside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.dm-mside .dm-fullview { white-space: nowrap; }

/* v13.28.0: Notify parents: pictures and attachments, and WhatsApp */
.wn .rm-bar [data-rm="week"] { display: none; }
.wn .rm-edit { min-height: 110px; max-height: 260px; overflow: auto; }
.wn-via { display: inline-flex; gap: 4px; margin: 10px 0 8px; padding: 3px; border-radius: 999px; background: #F0EAFF; border: 2px solid #D6CCF7; }
.wn-via button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #5B21B6; font-weight: 800; font-size: 14px; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.wn-via button[aria-selected="true"] { background: #5B21B6; color: #fff; }
.wn-via .wn-wa { width: 16px; height: 16px; color: #25D366; }
.wn-via button[aria-selected="true"] .wn-wa { color: #fff; }
.wn-n { font-size: 12px; background: rgba(0,0,0,.08); border-radius: 99px; padding: 0 7px; }
.wn-note { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.wn-wa-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.wn-wa-grid h4 { margin: 0 0 6px; font-size: 15px; }
.wn-wa-text { width: 100%; font: 14px/1.45 Nunito, system-ui, sans-serif; border: 1px solid var(--line, #E6E3F6); border-radius: 10px; padding: 8px 10px; background: #F7FFF9; resize: vertical; }
.wn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.wn-pics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.wn-pics a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; text-decoration: none; font-size: 12px; font-weight: 800; color: #5B21B6; }
.wn-pics img { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #E6E3F6); }
.wn-wa-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.wn-wa-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line, #E6E3F6); }
.wn-wa-list li.is-done { opacity: .7; }
@media (max-width: 760px) { .wn-wa-grid { grid-template-columns: 1fr; } }
.wn .rm-edit img { max-height: 150px; width: auto !important; max-width: 100%; }
/* v13.28.1: copy or save each picture */
.wn-pics figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 136px; }
.wn-pics figure img { width: 136px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #E6E3F6); }
.wn-pics figure > span { display: flex; gap: 4px; }
.wn-pic-btn { border: 1px solid #D6CCF7; background: #fff; color: #5B21B6; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 2px 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.wn-pic-btn:hover { border-color: #7C3AED; }