/* In-person session flow (حصة حضورية): attendance → home tasks & pairs → recitation by pairs → approvals */
.ip { --ip-lime: var(--brand-lime); --ip-teal: var(--brand); display: flex; flex-direction: column; gap: 16px; padding: 4px 0 40px; width: 100%; max-width: none; margin-inline: 0; min-width: 0; }
.ip .num { font-variant-numeric: tabular-nums; }

/* Header */
.ip-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.ip-head::after { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 260px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ip-lime) 34%, transparent), transparent); pointer-events: none; }
.ip-home { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ip-teal); color: #fff; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.ip-home svg { color: #fff; }
.ip-title { flex: 1; min-width: 0; }
.ip-title h1 { font: 700 22px/1.3 var(--f-display); margin: 0; color: var(--ink); }
.ip-title p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: var(--fs-sm); }
.ip-title p > span + span::before { content: "·"; margin-inline-end: 14px; color: var(--line-2); }
.ip-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 600; }
.ip-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ip-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-lime) 35%, transparent); animation: ip-pulse 1.6s ease-in-out infinite; }
@keyframes ip-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ip-lime) 0%, transparent); } }
.ip-counts { display: flex; gap: 8px; position: relative; z-index: 1; }
.ip-count { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); min-width: 92px; }
.ip-count > span { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ip-count b { font: 700 19px/1 var(--f-display); color: var(--ink); }
.ip-count b small { font-size: 12px; color: var(--muted); font-weight: 500; }
.ip-count > small { font-size: 11.5px; color: var(--muted); }
.ip-count.warm > span { background: var(--warm-soft); color: var(--warm); }
.ip-end { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.ip-end:hover { background: var(--surface-2); }

/* Stage cards */
.ip-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: ipst; }
.ip-stage { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s, transform .15s; }
.ip-stage:hover:not(.locked) { border-color: var(--accent-2); }
.ip-stage-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font: 700 15px var(--f-display); background: var(--surface-3); color: var(--ink-2); }
.ip-stage-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-stage-t b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-stage-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-stage-ic { color: var(--line-2); flex: none; }
.ip-stage.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ip-stage.on .ip-stage-n { background: var(--ip-lime); color: var(--on-lime); }
.ip-stage.on .ip-stage-t small { color: rgba(255,255,255,.7); }
.ip-stage.on .ip-stage-ic { color: var(--ip-lime); }
.ip-stage.on::after { content: ""; position: absolute; bottom: -7px; inset-inline-start: 50%; width: 12px; height: 12px; background: var(--ink); transform: translateX(50%) rotate(45deg); border-radius: 2px; }
.ip-stage.done .ip-stage-n { background: var(--accent); color: #fff; }
.ip-stage.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ip-stage.locked { cursor: not-allowed; background: var(--surface-2); border-style: dashed; color: var(--muted); }
.ip-stage.locked .ip-stage-n { background: transparent; border: 1.5px dashed var(--line-2); color: var(--muted); }

/* Cards */
.ip-body { display: flex; flex-direction: column; gap: 14px; animation: ip-in .25s ease; }
@keyframes ip-in { from { opacity: 0; transform: translateY(6px); } }
.ip-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px 20px; }
.ip-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ip-card-head > div:first-child { flex: 1; min-width: 200px; }
.ip-card-head h2 { margin: 0; font: 700 18px/1.35 var(--f-display); color: var(--ink); }
.ip-card-head p { margin: 3px 0 0; }
.ip-kicker { font-size: 12px; color: var(--accent); font-weight: 700; }
.ip-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-sm); margin: 6px 0; }

.ip-ghost, .ip-btn, .ip-mini { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); white-space: nowrap; }
.ip-ghost { padding: 8px 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.ip-ghost:hover:not(:disabled) { background: var(--surface-2); }
.ip-btn { padding: 9px 16px; border: 0; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.ip-btn svg { color: currentColor; }
.ip-btn.ghost { background: var(--accent-soft); color: var(--accent-ink); }
.ip-btn:disabled, .ip-ghost:disabled { opacity: .45; cursor: not-allowed; }
.ip-mini { padding: 5px 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.ip-mini:hover { border-color: var(--accent-2); color: var(--accent-ink); }
.ip-cta { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); border: 0; background: var(--ip-lime); color: var(--on-lime); font-weight: 700; font-size: 15px; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ip-lime) 90%, #000); }
.ip-cta svg { color: var(--on-lime); }
.ip-cta:hover { filter: brightness(.97); }

.ip-next-wrap { display: flex; justify-content: flex-end; }
.ip-next { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); border: 0; background: var(--ip-lime); color: var(--on-lime); font-weight: 700; font-size: 16px; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ip-lime) 90%, #000); }
.ip-next svg { color: var(--on-lime); }
.ip-next:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Legend */
.ip-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.ip-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ip-legend i { font-style: normal; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.ip-legend i.present, .ip-cell.present { background: var(--accent); color: #fff; }
.ip-legend i.absent, .ip-cell.absent { background: var(--bad-soft); color: var(--bad); }
.ip-legend i.late, .ip-cell.late { background: color-mix(in srgb, var(--ip-lime) 55%, var(--surface)); color: var(--on-lime); }

/* Stage 1 */
.ip-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px 30px; }
.ip-empty h2 { margin: 6px 0 0; font: 700 24px var(--f-display); color: var(--ink); }
.ip-empty p { margin: 0; max-width: 460px; color: var(--ink-2); line-height: 1.8; }
.ip-empty-art { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.ip-empty-art .r1, .ip-empty-art .r2 { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.ip-empty-art .r2 { inset: 14px; border-style: solid; background: var(--accent-soft); border-color: transparent; }
.ip-empty-ic { position: relative; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: #fff; transform: rotate(-6deg); }
.ip-empty-ic svg { color: #fff; }
.ip-empty-facts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 6px 0 8px; }
.ip-empty-facts span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ip-empty-facts b { color: var(--ink); }

.ip-late-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.ip-late-note.on { background: var(--warm-soft); color: var(--ink-2); border: 1px solid var(--warm-line); }
.ip-late-note span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ip-late-note button { font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--warm-line); background: var(--surface); color: var(--ink); }
.ip-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ip-att { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); position: relative; }
.ip-att::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--accent); }
.ip-att.late::before { background: var(--ip-lime); }
.ip-att.absent::before { background: var(--bad); }
.ip-att.absent { background: var(--surface-2); }
.ip-att-who { display: flex; align-items: center; gap: 10px; }
.ip-att-who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-att-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-att-who small { font-size: 11.5px; color: var(--muted); }
.ip-att-today { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); border: 0; font-size: 12.5px; font-weight: 700; }
.ip-att-today.present { background: var(--accent-soft); color: var(--accent-ink); }
.ip-att-today.late { background: color-mix(in srgb, var(--ip-lime) 40%, var(--surface)); color: var(--on-lime); }
.ip-att-today.absent { background: var(--bad-soft); color: var(--bad); }
.ip-att-today.expected { background: var(--surface-3); color: var(--ink-2); }
.ip-att-today svg { color: currentColor; }
.ip-att-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ip-cell { height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ip-cell.none { background: var(--surface-2); color: var(--line-2); }

/* Stage 2 */
.ip-two { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ip-pairs { position: sticky; top: 12px; }
.ip-pair-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; scrollbar-width: none; }
.ip-pair { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ip-pair-n { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; flex: none; }
.ip-pair-av { display: flex; }
.ip-pair-av .avatar { border: 2px solid var(--surface-2); }
.ip-pair-av .avatar + .avatar { margin-inline-start: -10px; }
.ip-pair-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-pair-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-pair-t small { font-size: 11.5px; color: var(--muted); }
.ip-x { font: inherit; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.ip-x:hover { background: var(--bad-soft); color: var(--bad); }
.ip-pair-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ip-left { font-size: 12.5px; color: var(--warm); margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; }
.ip-left.ok { color: var(--accent); }

.ip-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ip-filters button { font: inherit; cursor: pointer; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.ip-filters button .num { color: var(--muted); font-weight: 500; margin-inline-start: 2px; }
.ip-filters button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ip-filters button[aria-selected="true"] .num { color: var(--ip-lime); }
.ip-task-list { display: flex; flex-direction: column; }
.ip-task { display: grid; grid-template-columns: 30px 32px minmax(140px, 1.3fr) 128px minmax(120px, 1.4fr) 76px; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.ip-task:last-child { border-bottom: 0; }
.ip-task.picked { background: var(--accent-soft); border-radius: 12px; }
.ip-check { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; }
.ip-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ip-check svg { color: inherit; }
.ip-pair-tag { width: 26px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: var(--ip-lime); font-size: 11px; font-weight: 700; }
.ip-task-who { display: flex; flex-direction: column; min-width: 0; }
.ip-task-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-task-who small { font-size: 11.5px; color: var(--muted); }
.ip-task-who em { font-style: normal; color: var(--warm); }
.ip-task-bar { display: inline-flex; align-items: center; gap: 8px; }
.ip-task-bar b { font-size: 12.5px; color: var(--ink-2); }
.ip-segs { display: inline-grid; grid-template-columns: repeat(4, 16px); gap: 3px; }
.ip-segs i { height: 8px; border-radius: 3px; background: var(--surface-3); }
.ip-segs i.on { background: var(--accent); }
.ip-task-bar.full .ip-segs i.on { background: var(--ip-lime); }
.ip-task-bar.low .ip-segs i.on { background: var(--warm); }
.ip-task-miss { font-size: 12px; color: var(--muted); }
.ip-task-miss .ok { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }

/* Stage 3 */
.ip-rec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.ip-plist { padding: 16px; position: sticky; top: 12px; }
.ip-plist .ip-card-head { margin-bottom: 10px; }
.ip-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); margin-bottom: 10px; }
.ip-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; min-width: 0; }
.ip-plist-items { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; scrollbar-width: none; }
.ip-pitem { font: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid transparent; background: transparent; text-align: start; color: var(--ink); }
.ip-pitem:hover { background: var(--surface-2); }
.ip-pitem.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ip-pitem .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-pitem b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-pitem small { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.ip-pitem small i, .ip-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.ip-pitem.ready small i, .ip-state.ready i { background: var(--accent); }
.ip-pitem.mid small i, .ip-state.mid i { background: var(--warm); }
.ip-pitem.done small i, .ip-state.done i { background: var(--ip-lime); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ip-lime) 35%, transparent); }
.ip-pitem.gone { opacity: .55; }
.ip-pitem.gone .ip-pair-n { background: var(--accent); }
.ip-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ip-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 14px; flex-wrap: wrap; }
.ip-banner .grow { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.ip-banner small { color: var(--ink-2); font-size: 12.5px; }
.ip-stus { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ip-stu { border: 1.5px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.ip-stu.rec { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ip-stu.rec.iaada { border-color: color-mix(in srgb, var(--warm) 50%, var(--line)); }
.ip-stu.gone { background: var(--surface-2); }
.ip-stu-top { display: flex; align-items: center; gap: 12px; }
.ip-stu-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ip-stu-top b { font-size: 16px; }
.ip-stu-top small { font-size: 12.5px; color: var(--muted); }
.ip-stu-home { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.ip-recite { font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 14px; border: 0; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; }
.ip-recite svg { color: var(--ip-lime); }
.ip-recite:hover:not(:disabled) { background: var(--accent); }
.ip-recite:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.ip-recite:disabled svg { color: var(--muted); }
.ip-stu-res { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ip-stu-res .ip-mini { margin-inline-start: auto; }
.ip-grade { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ip-grade.mutqin { background: var(--accent); color: #fff; }
.ip-grade.yasira { background: var(--accent-soft); color: var(--accent-ink); }
.ip-grade.iaada { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line); }
.ip-grade svg { color: currentColor; }
.ip-gone { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent-ink); }
.ip-gone.redo { color: var(--warm); }
.ip-go { margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: #fff; flex-wrap: wrap; }
.ip-go > svg { color: var(--ip-lime); }
.ip-go .grow { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.ip-go small { color: rgba(255,255,255,.72); font-size: 12.5px; }

/* Marking modal */
.modal:has(.ipm) { width: min(640px, calc(100vw - 32px)); }
.ipm { display: flex; flex-direction: column; gap: 18px; }
.ipm-l { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; color: var(--ink); }
.ipm-l small { font-weight: 500; }
.ipm-ayat { display: flex; flex-wrap: wrap; gap: 6px; }
.ipm-ayat button { font: inherit; cursor: pointer; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; }
.ipm-ayat button.on { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); font-weight: 700; }
.ipm-errs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ipm-err { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 6px; padding-inline-start: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.ipm-err span { flex: 1; font-size: 13.5px; }
.ipm-err b { min-width: 18px; text-align: center; font-size: 15px; }
.ipm-err button { font: inherit; cursor: pointer; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); padding: 0; }
.ipm-err button:disabled { opacity: .35; cursor: default; }
.ipm-err.on { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.ipm-err.on b { color: var(--bad); }
.ipm-sug { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.ipm-sug .grow { flex: 1; display: flex; flex-direction: column; }
.ipm-sug small { font-size: 11.5px; color: var(--muted); }
.ipm-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ipm-g { font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 13px; text-align: center; }
.ipm-g svg { color: currentColor; flex: none; }
.ipm-g.mutqin { background: var(--accent); border-color: var(--accent); color: #fff; }
.ipm-g.yasira { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-ink); }
.ipm-g.iaada { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm); }
.ipm-g.sug { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-lime) 70%, transparent); }

/* Stage 4 */
.ip-success { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; background: var(--ink); color: #fff; }
.ip-success > svg { color: var(--ip-lime); }
.ip-success .grow { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.ip-success small { color: rgba(255,255,255,.72); font-size: 12.5px; }
.ip-success .ip-btn { background: var(--ip-lime); color: var(--on-lime); }
.ip-success .ip-btn.ghost { background: rgba(255,255,255,.1); color: #fff; }
.ip-tbl-wrap { overflow-x: auto; scrollbar-width: thin; }
.ip-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 900px; }
.ip-tbl th { text-align: start; font-weight: 600; font-size: 12px; color: var(--muted); padding: 10px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ip-tbl th:first-child { border-start-start-radius: 12px; }
.ip-tbl th:last-child { border-start-end-radius: 12px; }
.ip-tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ip-tbl tr.none td { background: var(--surface-2); }
.ip-tw { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ip-to { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.ip-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.ip-seg button { font: inherit; cursor: pointer; padding: 5px 10px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ip-seg button.on.mutqin { background: var(--accent); color: #fff; }
.ip-seg button.on.yasira { background: var(--accent-soft); color: var(--accent-ink); }
.ip-seg button.on.iaada { background: var(--warm-soft); color: var(--warm); }
.ip-seg button:disabled { cursor: default; }
.ip-abs { margin: 10px 0 0; }
.ip-sent { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; font-size: 11px; color: var(--accent); font-weight: 600; }

/* Responsive */
@media (max-width: 1180px) {
  .ip-head { flex-wrap: wrap; }
  .ip-counts { order: 3; width: 100%; }
  .ip-count { flex: 1; }
  .ip-two, .ip-rec { grid-template-columns: 1fr; }
  .ip-pairs, .ip-plist { position: static; }
  .ip-task { grid-template-columns: 30px 32px minmax(120px, 1fr) 120px 70px; }
  .ip-task-miss { grid-column: 3 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .ip-stages { grid-template-columns: repeat(2, 1fr); }
  .ip-stage-ic { display: none; }
  .ip-counts { flex-wrap: wrap; }
  .ip-count { min-width: calc(50% - 4px); }
  .ip-task { grid-template-columns: 30px 32px 1fr; }
  .ip-task-bar, .ip-task-miss { grid-column: 3; }
  .ipm-errs, .ipm-acts { grid-template-columns: 1fr; }
}

/* Dark */
:root[data-theme="dark"] .ip-stage.on, :root[data-theme="dark"] .ip-go, :root[data-theme="dark"] .ip-success { background: #f3f5f6; border-color: #f3f5f6; color: var(--bg); }
:root[data-theme="dark"] .ip-stage.on::after { background: #f3f5f6; }
:root[data-theme="dark"] .ip-stage.on .ip-stage-t small, :root[data-theme="dark"] .ip-go small, :root[data-theme="dark"] .ip-success small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
:root[data-theme="dark"] .ip-stage.on .ip-stage-ic, :root[data-theme="dark"] .ip-go > svg, :root[data-theme="dark"] .ip-success > svg { color: var(--brand); }
:root[data-theme="dark"] .ip-success .ip-btn.ghost { background: rgba(0,0,0,.08); color: var(--bg); }
:root[data-theme="dark"] :is(.ip-pair-n, .ip-pair-tag) { background: #f3f5f6; color: var(--bg); }
:root[data-theme="dark"] .ip-filters button[aria-selected="true"] { background: #f3f5f6; border-color: #f3f5f6; color: var(--bg); }
:root[data-theme="dark"] .ip-filters button[aria-selected="true"] .num { color: var(--brand); }
:root[data-theme="dark"] .ip-recite { background: #f3f5f6; color: var(--bg); }
:root[data-theme="dark"] .ip-recite svg { color: var(--brand); }
:root[data-theme="dark"] .ip-recite:disabled { background: var(--surface-3); color: var(--muted); }
:root[data-theme="dark"] .ip-head::after { opacity: .35; }
:root[data-theme="dark"] .ip-late-note.on { background: color-mix(in srgb, var(--warm) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warm) 30%, transparent); }
:root[data-theme="dark"] .ip-grade.iaada, :root[data-theme="dark"] .ipm-g.iaada, :root[data-theme="dark"] .ip-seg button.on.iaada { background: color-mix(in srgb, var(--warm) 16%, var(--surface)); border-color: color-mix(in srgb, var(--warm) 35%, transparent); }
:root[data-theme="dark"] :is(.ip-legend i.absent, .ip-cell.absent, .ip-att-today.absent) { background: color-mix(in srgb, var(--bad) 20%, var(--surface)); color: #ff9a91; }
:root[data-theme="dark"] .ipm-err.on, :root[data-theme="dark"] .ipm-ayat button.on { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
:root[data-theme="dark"] .ip-pair-av .avatar { border-color: var(--surface-2); }

/* ---------- v2 (review): dark header, live roll log, pairs bar, task rows, gray instead of gold ---------- */
.ip-head { background: #1a3640; border-color: #1a3640; color: #fff; padding: 18px 20px; }
.ip-head::after { display: none; }
.ip-home { width: 52px; height: 52px; border-radius: 50%; background: var(--ip-lime); box-shadow: none; }
.ip-home svg { color: var(--on-lime); }
.ip-title h1 { color: #fff; }
.ip-title p { display: block; color: rgba(255,255,255,.62); }
.ip-live { color: rgba(255,255,255,.85); font-weight: 600; }
.ip-count { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); }
.ip-count > span { background: rgba(255,255,255,.1); color: var(--ip-lime); }
.ip-count b { color: #fff; }
.ip-count b small, .ip-count > small { color: rgba(255,255,255,.6); }
.ip-count.warm > span { background: rgba(255,255,255,.1); color: var(--ip-lime); }
.ip-end { border-color: rgba(255,255,255,.22); color: #fff; }
.ip-end svg { color: #fff; }
.ip-end:hover { background: rgba(255,255,255,.08); }

/* Roll call running: the log fills in behind the drawer */
.ip-att.calling { border-color: var(--ip-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-lime) 45%, transparent); }
.ip-att.expected::before { background: var(--line-2); }
.ip-att-today:disabled { cursor: default; }
.ip-calling-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ip-lime) 35%, var(--surface)); color: var(--on-lime); font-size: 12.5px; font-weight: 600; }
.ip-calling-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: ip-pulse 1.4s ease-in-out infinite; }

/* Pairs bar: title, subtitle and the pairs only */
.ip-pairs { position: static; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ip-pb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ip-pb-head h2 { margin: 0; font: 700 18px var(--f-display); color: var(--ink); }
.ip-pb-head p { margin: 0; font-size: 13px; color: var(--muted); }
.ip-pb-head p.on { color: var(--accent); font-weight: 600; }
.ip-pair-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-pair { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px; padding-inline-end: 6px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.ip-pair .ip-pair-n { width: 26px; height: 26px; border-radius: 50%; }
.ip-pair b { font-size: 13.5px; font-weight: 600; }
.ip-join { font: inherit; cursor: pointer; padding: 3px 10px; border-radius: var(--r-pill); border: 0; background: var(--ip-lime); color: var(--on-lime); font-size: 12px; font-weight: 700; }
.ip-x { width: 24px; height: 24px; background: var(--surface); }

/* Task rows */
.ip-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; }
.ip-filters button b { font-weight: 700; }
.ip-task-list { gap: 8px; }
.ip-task { grid-template-columns: minmax(0, 1fr) auto 220px; gap: 14px; padding: 8px 12px; border: 1.5px solid transparent; border-bottom: 1.5px solid transparent; border-radius: 16px; background: var(--surface-2); }
.ip-task:last-child { border-bottom-color: transparent; }
.ip-task-main { font: inherit; color: inherit; text-align: start; background: none; border: 0; padding: 4px 0; cursor: pointer; display: grid; grid-template-columns: 30px 44px minmax(140px, 260px) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
div.ip-task-main { cursor: default; }
.ip-task .avatar { width: 44px; height: 44px; }
.ip-task-who b { font-size: 15px; }
.ip-task-who small { font-size: 12px; }
.ip-check { width: 26px; height: 26px; border-radius: 8px; background: var(--surface); }
.ip-pair-tag { width: 26px; height: 26px; background: var(--muted); color: #fff; font-size: 12px; }
.ip-task.paired { opacity: .62; }
.ip-task.paired .ip-segs i.on { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.ip-task:hover:not(.paired) { border-color: var(--line-2); }
.ip-task.picked { background: color-mix(in srgb, var(--ip-lime) 22%, var(--surface)); border-color: var(--ip-lime); border-radius: 16px; }
.ip-task-miss { color: var(--muted); font-size: 12.5px; }
.ip-remind { font: inherit; cursor: pointer; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; }
.ip-remind:hover { border-color: var(--accent-2); color: var(--accent-ink); }
.ip-task-bar { justify-content: flex-end; }
.ip-segs { grid-template-columns: repeat(4, 1fr); width: 160px; gap: 4px; }
.ip-segs i { height: 10px; border-radius: 5px; }
.ip-task-bar.full .ip-segs i.on { background: var(--accent); }
.ip-task-bar b { font-size: 15px; font-weight: 700; color: var(--muted); min-width: 30px; }
.ip-task-bar.full b { color: var(--accent); }
.ip-stu-home .ip-segs, .ip-tbl .ip-segs { width: 72px; }
.ip-stu-home .ip-segs i, .ip-tbl .ip-segs i { height: 7px; }
.ip-tbl .ip-task-bar b { font-size: 12.5px; }
.ip-next-wrap { align-items: center; gap: 12px; }
@media (max-width: 1180px) {
  .ip-task { grid-template-columns: minmax(0, 1fr) auto; }
  .ip-task-bar { grid-column: 1 / -1; justify-content: flex-start; padding-inline-start: 98px; }
  .ip-task-main { grid-template-columns: 30px 44px minmax(0, 1fr); }
  .ip-task-miss { grid-column: 3; grid-row: 2; }
}
@media (max-width: 760px) {
  .ip-task-bar { padding-inline-start: 0; }
  .ip-segs { width: 120px; }
}

/* Gray instead of gold */
.ip-task-who em, .ip-left, .ip-pitem.mid small i, .ip-state.mid i { color: var(--muted); }
.ip-pitem.mid small i, .ip-state.mid i { background: var(--muted); }
.ip-grade.iaada, .ipm-g.iaada, .ip-seg button.on.iaada { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-2); }
.ip-stu.rec.iaada { border-color: var(--line-2); }
.ip-gone.redo { color: var(--ink-2); }
.ip-late-note.on { background: var(--surface-2); border-color: var(--line); }

/* Dark */
:root[data-theme="dark"] .ip-head { background: #0e1f25; border-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .ip-grade.iaada, :root[data-theme="dark"] .ipm-g.iaada, :root[data-theme="dark"] .ip-seg button.on.iaada { background: var(--surface-3); border-color: var(--line-2); color: var(--ink-2); }
:root[data-theme="dark"] .ip-late-note.on { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .ip-task.picked { background: color-mix(in srgb, var(--ip-lime) 12%, var(--surface)); }
:root[data-theme="dark"] .ip-pair-tag { background: var(--line-2); color: var(--ink); }
:root[data-theme="dark"] .ip-calling-tag { background: color-mix(in srgb, var(--ip-lime) 20%, var(--surface)); color: var(--ink); }
/* ---------- v3: simple attendance cards, dark gray «next» buttons ---------- */
.ip-att { padding: 14px 16px; gap: 0; }
.ip-att-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ip-att-grid .ip-att { animation: ip-in .22s ease; }
.ip-att-empty { justify-content: center; padding: 28px 0; border: 1.5px dashed var(--line); border-radius: 16px; margin: 0; }
.ip-next { background: #1a3640; color: #fff; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.ip-next svg { color: #fff; }
.ip-next:hover:not(:disabled) { background: #2e7a93; }
:root[data-theme="dark"] .ip-next { background: #3a5c68; color: #fff; }
:root[data-theme="dark"] .ip-next svg { color: #fff; }
:root[data-theme="dark"] .ip-next:hover:not(:disabled) { background: #586771; }
/* v4: active stage card in brand teal (the charcoal is reserved for the header) */
.ip-stage.on, :root[data-theme="dark"] .ip-stage.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ip-stage.on::after, :root[data-theme="dark"] .ip-stage.on::after { background: var(--brand); }
.ip-stage.on .ip-stage-t small, :root[data-theme="dark"] .ip-stage.on .ip-stage-t small { color: rgba(255,255,255,.78); }
.ip-stage.on .ip-stage-ic, :root[data-theme="dark"] .ip-stage.on .ip-stage-ic { color: var(--ip-lime); }
/* v5: no replayed animation on ordinary clicks; the pairs bar keeps its height */
.ip-body { animation: none; }
.ip-body.anim { animation: ip-in .25s ease; }
.ip-att-grid .ip-att { animation: none; }
.ip-pair-chips { min-height: 40px; align-items: center; }
.ip-pair-none { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.ip-pb-head p { min-height: 20px; }.ip-pair-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ip-pair-chips::-webkit-scrollbar { display: none; }
.ip-pair { flex: none; }
/* v6: completed stage cards keep a plain white card, no colored outline */
.ip-stage.done, :root[data-theme="dark"] .ip-stage.done { border-color: transparent; }
.ip-stage { border-color: transparent; }.ip-stage.locked { border-color: var(--line-2); }