/* Review 4: remote-only teacher, simpler home, roll call, recorded recitations, new students. */

/* ---------- Home: session card (info · time · CTA, no timeline) ---------- */
.next-card { grid-template-areas: "info count cta"; padding: 26px 28px; }
.nc-flow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 1400px) {
  .next-card { grid-template-columns: minmax(0, 1fr) auto minmax(230px, .7fr); grid-template-areas: "info count cta"; gap: 20px 24px; }
  .nc-cta { flex-direction: column; align-items: stretch; } .nc-btn { max-width: none; }
}
@media (max-width: 1200px) { .next-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info count" "cta cta"; } .nc-cta { flex-direction: row; } }

/* ---------- Home: six KPI cards in one row ---------- */
.kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi2 { padding: 16px; gap: 10px; min-height: 168px; border-radius: 22px; }
.kpi2 .k-top { gap: 8px; align-items: flex-start; }
.kpi2 .k-ico { width: 32px; height: 32px; flex: none; }
.kpi2 .k-label { font-size: 13px; line-height: 1.35; padding-top: 6px; }
.kpi2 .k-go { display: none; }
.kpi2 .k-val { gap: 6px; }
.kpi2 .k-val b { font-size: 30px; }
.kpi2 .k-val span { font-size: 11.5px; }
.kpi2 .k-legend { gap: 4px 8px; font-size: 11px; }
.kpi2 .k-mini { height: 38px; gap: 4px; }
.kpi2 .k-dots { gap: 3px; grid-template-columns: repeat(10, 1fr); }
.kpi2 .k-dots span { height: 12px; border-radius: 4px; }
.kpi2 .k-dots span:nth-child(n+11) { display: none; }
.kpi2 .k-list { font-size: 12px; gap: 4px; }
.kpi2 .k-list .avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.kpi2 .gauge { max-height: 70px; }
.kpi2 .k-striped { height: 16px; }
.kpi2 .xs { font-size: 11px; }
@media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Home: circle cards, one identical shape (only the colour changes) ---------- */
.circle-card, .circle-card.ink, .circle-card.lime { gap: 16px; padding: 22px; color: #fff; box-shadow: 0 18px 32px -22px rgba(0,0,0,.55); }
.circle-card { background: var(--accent); }
.circle-card.ink { background: #1a3640; }
.circle-card.lime { background: var(--lime); color: var(--ink); }
.circle-card::after { width: 200px; height: 200px; left: -70px; top: -90px; background: rgba(255,255,255,.09); }
.circle-card.lime::after { background: rgba(255,255,255,.35); }
.cc-top { gap: 12px; justify-content: flex-start; }
.cc-ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex: none; }
.cc-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cc-name b { font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.25; }
.cc-name span { font-size: 12.5px; opacity: .78; }
.cc-more { background: rgba(255,255,255,.16); }
.cc-time { display: flex; align-items: baseline; gap: 10px; }
.cc-time b { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; }
.cc-time span { font-size: 12.5px; opacity: .8; }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; background: rgba(255,255,255,.12); }
.cc-stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; }
.cc-stats > div + div { border-inline-start: 1px solid rgba(255,255,255,.16); }
.cc-stats b { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
.cc-stats span { font-size: 11.5px; opacity: .78; }
.cc-seg { grid-template-columns: repeat(10, 1fr); gap: 4px; }
.cc-seg span { background: rgba(255,255,255,.26); }
.cc-seg span.on { background: var(--surface); }
.cc-foot { margin-top: auto; }
.cc-foot .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
/* lime: same shape, dark ink for contrast */
.circle-card.lime .cc-ico, .circle-card.lime .cc-more, .circle-card.lime .cc-stats { background: rgba(22,25,27,.08); }
.circle-card.lime .cc-stats > div + div { border-color: rgba(22,25,27,.12); }
.circle-card.lime .cc-seg span { background: rgba(22,25,27,.15); }
.circle-card.lime .cc-seg span.on { background: #1a3640; }
.circle-card.lime .cc-foot .avatar { box-shadow: 0 0 0 2px rgba(22,25,27,.25); }

/* ---------- Home: recordings + new students ---------- */
.card-foot-cta { display: flex; justify-content: flex-start; padding-top: 14px; margin-top: auto; }
.home-rec, .home-ns { display: flex; flex-direction: column; }
.hr-row { gap: 12px; }
.hr-play { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.hr-row:hover .hr-play { background: var(--accent-ink); }
.hr-text { display: flex; flex-direction: column; min-width: 0; flex: 0 1 200px; }
.hr-wave, .sb-mini-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; min-width: 60px; }
.hr-wave span, .sb-mini-wave span, .rp-wave span { flex: 1; border-radius: 3px; background: var(--line-2); min-width: 2px; }
.hr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ns-admin { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 13px; }
.ns-admin .xs { opacity: .75; }
.ns-row { gap: 12px; }

/* 14-day ring */
.ns-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ns-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-ring circle { fill: none; stroke-width: 6; }
.ns-ring .bg { stroke: var(--surface-3); }
.ns-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.ns-ring .fg-ready, .ns-ring .fg-retry { stroke: var(--ink); }
.ns-ring .fg-passed { stroke: var(--accent); }
.ns-ring-t { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ns-ring-t b { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.ns-ring-t span { font-size: 10px; color: var(--muted); }
.ns-row .ns-ring circle { stroke-width: 5; }
.ns-row .ns-ring-t b { font-size: 14px; } .ns-row .ns-ring-t span { display: none; }

/* ---------- New students page ---------- */
.ns-card { display: flex; flex-direction: column; gap: 16px; }
.ns-card.ns-ready, .ns-card.ns-retry { box-shadow: inset 0 0 0 2px var(--ink); }
.ns-top { display: flex; align-items: center; gap: 14px; }
.ns-name { font-family: var(--f-display); font-size: 19px; font-weight: 600; margin: 6px 0 2px; }
.ns-bar { display: flex; flex-direction: column; gap: 6px; }
.ns-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.ns-days span { height: 12px; border-radius: 4px; background: var(--surface-3); }
.ns-days span.on { background: var(--accent); }
.ns-days span.today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.ns-card.ns-ready .ns-days span.on, .ns-card.ns-retry .ns-days span.on { background: var(--ink); }
.ns-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.ns-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.ns-steps li b { display: block; color: var(--ink-2); font-weight: 600; }
.ns-steps li span span { font-size: 12px; }
.ns-step-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); flex: none; color: var(--muted); }
.ns-steps li.done .ns-step-ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.ns-steps li.cur .ns-step-ico { border-color: var(--ink); color: var(--ink); }
.ns-steps li.cur b { color: var(--ink); }
.ns-foot { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.ns-opt { display: flex; align-items: center; gap: 12px; text-align: start; }
.ns-opt[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Recorded recitations page ---------- */
.sb-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.sb-list { position: sticky; top: 0; max-height: calc(100vh - 170px); display: flex; flex-direction: column; overflow: hidden; }
.sb-list .pills { flex-wrap: wrap; }
.sb-items { overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.sb-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; }
.sb-item:hover { background: var(--surface-2); }
.sb-item.on { background: var(--accent-soft); }
.sb-item .grow { min-width: 0; }
.sb-mini-wave { height: 18px; margin-top: 6px; }
.sb-item.on .sb-mini-wave span { background: var(--accent-2); }
.sb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sb-detail { display: flex; flex-direction: column; gap: 16px; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sb-pos { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.sb-pos > span { display: inline-flex; align-items: center; gap: 6px; }
.sb-pos .card-link { margin-inline-start: auto; }
.rec-player { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 22px; background: var(--ink); color: var(--on-ink); }
:root[data-theme="dark"] .rec-player { background: #0b0d0e; color: #f1f3f4; }
.rp-top { display: flex; gap: 8px; justify-content: space-between; }
.rp-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; }
.rp-tag.ghost { background: transparent; opacity: .7; }
.rp-main { display: flex; align-items: center; gap: 16px; }
.rp-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; box-shadow: 0 0 0 6px rgba(46,122,147,.25); }
.rp-play:hover { background: var(--accent-2); }
.rp-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 64px; cursor: pointer; }
.rp-wave span { background: rgba(255,255,255,.22); }
.rp-wave span.on { background: var(--accent-2); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.rp-btn { min-width: 34px; height: 30px; padding: 0 8px; border-radius: 9px; background: rgba(255,255,255,.1); color: inherit; font-size: 12.5px; font-family: var(--f-display); }
.rp-btn:hover { background: rgba(255,255,255,.2); }
.rp-btn.on { background: var(--surface); color: var(--ink); }
.rp-btn[disabled] { opacity: .35; cursor: default; }
.rp-listened { font-size: 12.5px; opacity: .8; }
.sb-text.mushaf { font-size: 26px; line-height: 2.2; }
.sb-ayah { border-radius: 10px; transition: background .3s; padding: 2px 0; }
.sb-ayah.on { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.sb-text.placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--ink-2); }
.sb-decide { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.sb-errs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sb-err { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.sb-err .rp-btn { background: var(--surface-2); color: var(--ink); }
.sb-err .rp-btn:hover { background: var(--surface-3); }
.sb-err b { min-width: 20px; text-align: center; }
.bad-t { color: var(--bad); }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.seg2 button { height: 38px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.seg2 button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.sb-ctas { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sb-return { background: var(--bad-soft); color: var(--bad); }
.sb-return:hover { background: var(--bad); color: #fff; }
.sb-note-view { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.phone.sm { width: 210px; }
@media (max-width: 1400px) { .sb-wrap { grid-template-columns: 270px minmax(0, 1fr); } .sb-decide { grid-column: 1 / -1; position: static; } }

/* ---------- Roll call: side popup right after the live starts ---------- */
.roll-scrim { position: fixed; inset: 0; background: rgba(20,23,25,.38); z-index: 60; }
.rollcall { position: fixed; z-index: 61; top: 16px; max-height: calc(100vh - 32px); inset-inline-end: 16px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-pop); overflow-y: auto; }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rc-head h2 { font-family: var(--f-display); font-size: 22px; font-weight: 600; margin-top: 8px; }
.rc-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 12.5px; font-weight: 600; }
.rc-count { font-family: var(--f-display); font-size: 20px; font-weight: 600; padding: 6px 12px; border-radius: 14px; background: var(--surface-2); }
.rc-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rc-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.rc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px 18px; border-radius: 22px; background: var(--surface-2); }
.rc-av { position: relative; margin-bottom: 6px; }
.rc-av .conn { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border: 3px solid var(--surface-2); }
.rc-card h3 { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.3; }
.rc-name { font-size: 13.5px; color: var(--muted); }
.rc-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--ink-2); margin-top: 4px; }
.rc-conn.on { background: var(--accent-soft); color: var(--accent-ink); }
.rc-note { display: flex; gap: 10px; align-items: flex-start; text-align: start; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-size: 13px; }
.rc-note b { display: block; }
.rc-note span { color: var(--muted); font-size: 12.5px; }
.rc-note.late { background: var(--ink); color: var(--on-ink); }
.rc-note.late span { color: inherit; opacity: .75; }
.rc-choices { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; }
.rc-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 92px; border-radius: 20px; font-size: 15.5px; font-weight: 600; border: 2px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .1s, background .15s; }
.rc-btn:hover { transform: translateY(-2px); }
.rc-btn:active { transform: scale(.97); }
.rc-btn .kbd { position: absolute; top: 8px; inset-inline-start: 8px; min-width: 20px; height: 20px; font-size: 10.5px; }
.rc-btn.present { background: var(--accent); border-color: var(--accent); color: #fff; }
.rc-btn.present .kbd { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.rc-btn.present:hover { background: var(--accent-ink); }
.rc-btn.late:hover, .rc-btn.late.pre { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.rc-btn.absent { color: var(--bad); }
.rc-btn.absent:hover, .rc-btn.absent.pre { border-color: var(--bad); background: var(--bad-soft); }
.rc-btn.pre::after { content: "مقترح"; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid currentColor; font-size: 10.5px; line-height: 16px; }
.rc-btn.present.pre { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.rc-timer { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 14px; border: 1px dashed var(--line-2); }
.rc-ring { width: 34px; height: 34px; flex: none; }
.rc-ring circle { fill: none; stroke-width: 4; }
.rc-ring .bg { stroke: var(--surface-3); }
.rc-ring .fg { stroke: var(--bad); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.rc-timer .grow b { color: var(--ink); }
.rc-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip { position: relative; border-radius: 50%; padding: 0; opacity: .5; transition: opacity .15s; }
.rc-chip:hover, .rc-chip.on, .rc-chip[data-s]:not([data-s=""]) { opacity: 1; }
.rc-chip.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.rc-chip::after { content: ""; position: absolute; bottom: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: transparent; }
.rc-chip[data-s="present"]::after { background: var(--accent); }
.rc-chip[data-s="late"]::after { background: var(--ink); }
.rc-chip[data-s="absent"]::after { background: var(--bad); }
.rc-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.rc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rc-sum > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 18px; background: var(--surface-2); }
.rc-sum b { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.rc-sum span { font-size: 12.5px; color: var(--muted); }
.rc-sum .p b { color: var(--accent); } .rc-sum .a b { color: var(--bad); }
.rc-names { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rc-names .row { gap: 6px; flex-wrap: wrap; }
.rc-done-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.solo-banner { margin-bottom: 0; }

/* ===================== Review 5 ===================== */
/* Session banner: compact, horizontal, full width, its own colour so the eye goes there first */
.session-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 18px 24px; border-radius: 24px; color: #fff; background: linear-gradient(115deg, #2e7a93 0%, #276a81 55%, #1f5568 100%); box-shadow: 0 20px 36px -24px rgba(46,122,147,.9); position: relative; overflow: hidden; }
.session-bar::after { content: ""; position: absolute; width: 260px; height: 260px; left: -80px; top: -150px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.session-bar > * { position: relative; }
.session-bar.live { background: linear-gradient(115deg, #1a3640 0%, #23292c 100%); box-shadow: 0 20px 36px -24px rgba(0,0,0,.8); }
.sb-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.sb-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; opacity: .85; }
.sb-title { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-meta { font-size: 13.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sb-count-label { font-size: 12px; opacity: .8; }
.sb-digits { display: flex; align-items: center; gap: 4px; direction: ltr; }
.sb-digits b { display: grid; place-items: center; width: 52px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.15); font-family: var(--f-display); font-size: 26px; font-weight: 600; }
.sb-digits b:last-of-type { background: var(--surface); color: #235d71; }
.session-bar.live .sb-digits b:last-of-type { color: var(--ink); }
.sb-digits i { font-style: normal; font-size: 22px; opacity: .5; }
.sb-cta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 240px; }
.sb-btn { height: 52px; border-radius: 16px; background: var(--surface); color: #1f5568; font-size: 15.5px; font-weight: 600; justify-content: center; }
.sb-btn:hover { background: #eef6f8; }
.session-bar.live .sb-btn { color: var(--ink); }
.sb-link { align-self: center; font-size: 12.5px; color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px; background: none; }
.sb-link:hover { opacity: 1; }
.session-bar.done { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1150px) { .session-bar { grid-template-columns: auto minmax(0, 1fr) auto; } .sb-cta { grid-column: 1 / -1; flex-direction: row; } .sb-btn { flex: 1; } }

/* Five KPI cards: one design, same size, same 7-day curve */
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kpi3 { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); min-width: 0; transition: transform .15s, box-shadow .15s; }
.kpi3:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(20,23,25,.45); }
.kpi3 .k-top { display: flex; align-items: center; gap: 10px; }
.kpi3 .k-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.kpi3 .k-label { font-size: 13.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi3 .k-val { display: flex; flex-direction: column; gap: 2px; }
.kpi3 .k-val b { font-family: var(--f-display); font-size: 32px; font-weight: 600; line-height: 1.1; }
.kpi3 .k-val span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-spark { width: 100%; height: 44px; margin-top: 4px; transform: scaleX(-1); }
.k-spark .area { fill: var(--accent-soft); }
.k-spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-spark .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.kpi3 .k-foot { font-size: 11px; color: var(--muted); }
@media (max-width: 1150px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Circles: all three in the Asr design (dark), told apart only by the icon colour */
.circle-card, .circle-card.ink, .circle-card.lime, .circle-card.brand { background: #1a3640; color: #fff; box-shadow: 0 18px 32px -22px rgba(0,0,0,.7); }
.circle-card::after, .circle-card.lime::after { background: rgba(255,255,255,.06); }
.circle-card .cc-ico, .circle-card .cc-more, .circle-card .cc-stats, .circle-card.lime .cc-ico, .circle-card.lime .cc-more, .circle-card.lime .cc-stats { background: rgba(255,255,255,.1); }
.circle-card.brand .cc-ico { background: var(--accent); }
.circle-card.lime .cc-ico { background: #5e676c; }
.circle-card .cc-stats > div + div, .circle-card.lime .cc-stats > div + div { border-color: rgba(255,255,255,.14); }
.circle-card .cc-seg span, .circle-card.lime .cc-seg span { background: rgba(255,255,255,.2); }
.circle-card .cc-seg span.on, .circle-card.lime .cc-seg span.on { background: var(--surface); }
.circle-card.brand .cc-seg span.on { background: var(--accent-2); }
.circle-card .cc-foot .avatar, .circle-card.lime .cc-foot .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.end-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.ns-entry { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.ns-entry:hover { border-color: var(--accent); box-shadow: 0 12px 24px -20px rgba(46,122,147,.8); }
.ns-entry-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.ns-entry b { display: block; font-size: 15.5px; }
.ns-entry .xs { color: var(--muted); }
.ns-entry .xs b { display: inline; font-size: inherit; color: var(--ink); }
.ns-entry-btn { background: var(--accent-soft); color: var(--accent-ink); }

/* ===================== Review 6 ===================== */
/* KPI cards in the reference style: icon, label, total, split bar, legend per circle */
.kpi4 { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); min-width: 0; transition: transform .15s, box-shadow .15s; }
.kpi4:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(20,23,25,.45); }
.k4-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; margin-bottom: 2px; }
.k4-label { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4-val { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.k4-val > span { min-width: 0; font-size: 12px !important; line-height: 1.25; }
.k4-val b { font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1; }
.k4-val span { font-size: 13px; color: var(--muted); }
.k4-bar { display: flex; gap: 5px; height: 12px; margin-top: 2px; }
.k4-bar span { border-radius: 6px; min-width: 6px; }
.k4-bar .ink, .k4-dot.ink { background: var(--ink); }
.k4-bar .brand { background: repeating-linear-gradient(135deg, var(--accent) 0 5px, #5d9cb2 5px 9px); }
.k4-dot.brand { background: var(--accent); }
.k4-bar .lime, .k4-dot.lime { background: var(--lime); }
/* all three circles on one row: ● الفجر 17   ● العصر 11   ● العشاء 10 */
.k4-legend { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.k4-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dot name" "val val"; align-items: center; column-gap: 5px; row-gap: 2px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.k4-legend li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 8px; }
.k4-legend .k4-dot { grid-area: dot; width: 8px; height: 8px; }
.k4-legend li span { grid-area: name; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4-legend li b { grid-area: val; justify-self: start; font-size: 14px; }
.k4-legend li b { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.k4-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Circle cards: Fajr black, Asr teal, Isha grey (same design) */
.circle-card.ink { background: #1a3640; color: #fff; }
.circle-card.brand { background: var(--accent); color: #fff; box-shadow: 0 18px 32px -22px rgba(46,122,147,.9); }
.circle-card.lime { background: #6b7479; color: #fff; box-shadow: 0 18px 32px -22px rgba(60,66,70,.8); }
.circle-card.brand .cc-ico, .circle-card.lime .cc-ico, .circle-card.ink .cc-ico { background: rgba(255,255,255,.16); }
.circle-card.brand .cc-seg span.on, .circle-card.lime .cc-seg span.on, .circle-card.ink .cc-seg span.on { background: var(--surface); }
.circle-card.brand .cc-stats, .circle-card.lime .cc-stats { background: rgba(255,255,255,.14); }

/* Chart filters and legends */
.card-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.chart-filter { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.chart-filter .select { height: 34px; border: 0; background-color: transparent; padding-block: 0; font-size: 13px; min-width: 120px; box-shadow: none; }
.chart-legend { justify-content: center; gap: 16px; margin-top: 10px; font-size: 12.5px; }
.chart-legend .k4-dot { margin-inline-end: 2px; }
.mini-bars { display: flex; align-items: flex-end; gap: 4px; }
.mini-bars span { flex: 1; border-radius: 4px; background: var(--surface-3); min-width: 4px; }
/* Attendance log */
.att-filters { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.af-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-label { font-size: 13px; color: var(--muted); min-width: 52px; }
.af-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.af-date .input { height: 38px; width: 160px; }
/* Attendance page: filters live in the title row; compact stat cards; profile button per row */
/* title + tools on one row; the subtitle runs on its own full-width line under both */
.att-page .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tools" "lead tools"; align-items: center; column-gap: 20px; row-gap: 6px; }
.att-page .page-head .page-actions { align-self: center; }
.att-page .page-head > div:first-child { display: contents; }
.att-page .page-head h1 { grid-area: title; }
.att-page .page-head .lead { grid-area: lead; max-width: none; margin: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-page .page-head .page-actions { grid-area: tools; margin: 0; }
.att-page.view-inner { gap: 16px; }
@media (max-width: 1250px) { .att-page .page-head { grid-template-columns: 1fr; grid-template-areas: "title" "lead" "tools"; } .att-page .page-head .lead { white-space: normal; } }
.att-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.att-head-tools .att-dd { height: 44px; min-width: 150px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.att-head-tools .att-dd svg:first-child { color: var(--accent); }
.att-head-tools .search { width: 220px; height: 44px; background: var(--surface); border-radius: 14px; }
.att-head-tools .btn { height: 44px; border-radius: 14px; }
.att-range { display: flex; gap: 12px; justify-content: flex-end; margin-top: -8px; }
.att-stats { gap: 10px; }
.att-stat2 { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: start; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.att-stat2:hover { border-color: var(--line-2); }
.att-stat2.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.as-top { display: flex; align-items: center; gap: 8px; }
.as-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2, var(--ink)); }
.att-stat2.ok .as-ic { background: var(--accent); color: #fff; }
.att-stat2.warn .as-ic { background: var(--warn-soft); color: var(--warn); }
.att-stat2.bad .as-ic, .att-stat2.crit .as-ic { background: var(--bad-soft); color: var(--bad); }
.as-l { flex: 1; font-size: 13px; color: var(--ink-2, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-top b { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.att-stat2.bad .as-top b, .att-stat2.crit .as-top b { color: var(--bad); }
.as-pill { display: block; text-align: center; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-stat2.crit { border-color: var(--bad-soft); }
.att-stat2.crit .as-pill { background: var(--bad-soft); color: var(--bad); }
.att-prof { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2, var(--ink)); cursor: pointer; transition: background .15s, color .15s; }
.att-prof:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Attendance summary: one joined strip of five equal segments */
.att-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ast-seg { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 14px; text-align: start; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; transition: background .15s; }
.ast-seg + .ast-seg { border-inline-start: 1px solid var(--line); }
.ast-seg:hover { background: var(--surface-2); }
.ast-seg.on { background: var(--surface-2); }
.ast-seg.on::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.ast-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ast-l svg { color: var(--ink-2, var(--ink)); }
.ast-v { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ast-v b { font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.ast-v small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ast-bar { display: block; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ast-seg:hover .ast-bar, .ast-seg.on .ast-bar { background: var(--surface-3); }
.ast-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.ast-seg.ok .ast-l svg { color: var(--accent); } .ast-seg.ok .ast-bar i { background: var(--accent); }
.ast-seg.warn .ast-l svg { color: var(--warm); } .ast-seg.warn .ast-bar i { background: #e8b54a; }
.ast-seg.muted .ast-bar i { background: #9aa3a8; }
.ast-seg.bad .ast-l svg { color: #c46a62; } .ast-seg.bad .ast-bar i { background: #d9928b; }
.ast-seg.crit .ast-l svg { color: var(--bad); } .ast-seg.crit .ast-bar i { background: var(--bad); }
/* Attendance table: calmer rows; "critical" is a small marker by the name, not a red row */
.att-log2 th { font-size: 12px; font-weight: 500; color: var(--muted); }
.att-log2 td { padding-block: 10px; }
.att-log2 tbody tr:hover { background: var(--surface-2); }
.al-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.al-who-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-who-t b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.al-who-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.al-who-t small .k4-dot { width: 7px; height: 7px; }
.al-crit { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: var(--bad); background: var(--bad-soft); }
.al-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, var(--ink)); }
.al-done svg { color: var(--accent); }
.al-mk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2, var(--ink)); }
.al-miss { font-size: 12.5px; color: var(--muted); }
.al-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; transition: border-color .15s; }
.al-act:hover { border-color: var(--ink); }
.al-act.strong { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.al-prof { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent); border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(46,122,147,.7); transition: filter .15s; }
.al-prof:hover { filter: brightness(1.08); }
/* ===== Attendance tabs + «المهام غير المكتملة» ===== */
.att-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.att-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13.5px; color: var(--muted); background: none; border: 0; cursor: pointer; }
.att-tabs button.on { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.att-tabs button.on svg { color: var(--brand-lime); }
.att-tabs .num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; background: var(--bad-soft); color: var(--bad); }
.att-tabs button.on .num { background: rgba(255,255,255,.15); color: #fff; }
.lt-page .att-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lt-bulk { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--ink); color: var(--on-ink); }
.lt-bulk .btn-soft { background: rgba(255,255,255,.12); color: #fff; }
.lt-bulk .btn-ghost { color: rgba(255,255,255,.75); }
.lt-bulk .btn-primary { background: var(--brand-lime); color: var(--on-lime); }
.lt-ck { width: 36px; }
.lt-ck input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2, var(--ink)); white-space: nowrap; }
.lt-chip b { font-weight: 600; color: var(--ink); }
.lt-chip .num { font-size: 11.5px; color: var(--muted); }
.lt-chip.block { background: var(--warm-soft); border-color: #f3dfb4; }
.lt-chip.block svg { color: var(--warm); }
.lt-mini { display: inline-block; width: 34px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.lt-mini i { display: block; height: 100%; background: var(--accent); }
.lt-days { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lt-st { white-space: nowrap; }
.lt-sug span { white-space: nowrap; }
.lt-tbl td { padding-block: 9px; }
.lt-tbl .al-who-t b, .lt-tbl .al-who-t small { white-space: nowrap; }
.lt-days.d1 { background: var(--warm-soft); color: var(--warm); }
.lt-days.d2 { background: #fde8e2; color: #b4533f; }
.lt-days.d3 { background: var(--bad-soft); color: var(--bad); }
.lt-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.lt-st.lock { color: var(--warm); }
.lt-st.done { color: var(--accent-ink); }
.lt-st.done svg { color: var(--accent); }
.lt-sug { display: flex; flex-direction: column; gap: 3px; }
.lt-sug span { font-size: 12px; color: var(--ink-2, var(--ink)); }
.lt-sug span::before { content: "• "; color: var(--accent); }
.lt-acts { display: flex; gap: 6px; }
.lt-tbl tr.is-done td { opacity: .65; }
.lt-tbl tr.is-done td:last-child { opacity: 1; }
/* decision side panel */
.lt-dr { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.lt-dr-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lt-dr-side { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; top: 0; }
.lt-miss { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.lt-miss-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.lt-miss-t { display: inline-flex; align-items: center; gap: 6px; }
.lt-miss-t b { font-size: 13px; }
.lt-miss-t small { font-size: 10.5px; color: var(--muted); }
.lt-miss-t svg { color: var(--accent); }
.lt-miss-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.lt-miss-bar i { display: block; height: 100%; background: var(--accent); }
.lt-opts { display: flex; flex-direction: column; gap: 8px; }
.lt-opt { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; }
.lt-opt.on { border-color: rgba(46,122,147,.45); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.lt-opt.dis { opacity: .5; }
.lt-opt-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; font: inherit; text-align: start; background: none; border: 0; color: var(--ink); cursor: pointer; }
.lt-opt-h:disabled { cursor: not-allowed; }
.lt-opt-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.lt-opt.on .lt-opt-ic { background: var(--accent); color: #fff; }
.lt-opt-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-opt-t b { font-size: 13.5px; }
.lt-opt-t small { font-size: 12px; color: var(--muted); }
.lt-opt .sa-radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2, var(--line-2)); display: grid; place-items: center; }
.lt-opt.on .sa-radio { background: var(--accent); border-color: var(--accent); color: #fff; }
.lt-opt-x { padding: 0 14px 12px 14px; padding-inline-start: 60px; }
.lt-opt-x .input { height: 38px; }
.lt-phone { transform: scale(.92); transform-origin: top center; }
.lt-ph-row { display: flex; align-items: center; gap: 6px; }
.lt-ph-row.carried { color: var(--accent-ink); font-weight: 600; }
.lt-ph-row em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); }
.lt-ph-lock { display: flex; align-items: center; gap: 6px; background: var(--warm-soft) !important; color: #8a5c08; }
.lt-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-2, var(--line-2)); display: inline-block; }
/* rules panel */
.lt-rules { display: flex; flex-direction: column; gap: 8px; }
.lt-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.lt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.lt-steps span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.lt-steps b { font-size: 12.5px; color: var(--ink); }
@media (max-width: 900px) { .lt-dr { grid-template-columns: 1fr; } }
/* ===== Appointment request (supervisor approval) ===== */
.drawer.wide:has(.ap-two) { width: min(700px, 94vw); max-width: min(700px, 94vw); }
.ap-flow { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-flow li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.ap-flow li b { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ap-flow li.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.ap-flow li.on b { background: var(--accent); color: #fff; border-color: transparent; }
.ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-two .field { margin: 0; }
.ap-two .dd { width: 100%; height: 46px; }
.ap-kinds .o-title { white-space: nowrap; }
/* new students: path at the top + sections by stage */
.nsf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.nsf li { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.nsf li + li { border-inline-start: 1px solid var(--line); }
.nsf-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.nsf-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsf-t b { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsf-t small { font-size: 11.5px; color: var(--muted); }
.nsf-n { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--muted); }
.nsf li.done .nsf-ic { background: var(--accent-soft); color: var(--accent); }
.nsf li.busy .nsf-ic { background: var(--accent); color: #fff; }
.nsf li.busy .nsf-n { color: var(--accent-ink); }
.nsf li.now { background: #1a3640; }
.nsf li.now .nsf-ic { background: var(--brand-lime); color: var(--on-lime); }
.nsf li.now .nsf-t b, .nsf li.now .nsf-n { color: #fff; }
.nsf li.now .nsf-t small { color: rgba(255,255,255,.65); }
.nsg { display: flex; flex-direction: column; gap: 12px; }
.nsg-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nsg-h b { font-size: 16px; font-weight: 700; color: var(--ink); }
.nsg-h small { font-size: 12.5px; color: var(--muted); }
.nsg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.nsg-ready .nsg-dot { background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(177,235,81,.3); }
.nsg-stage .nsg-dot { background: var(--accent); }
.nsg-passed .nsg-dot { background: #2e7a93; }
.nsg-n { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink); }
.nsg .nsx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .nsf { grid-template-columns: 1fr 1fr; } .nsg .nsx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* circle page: tabs in the title row, filters beside the search, cards hug their content */
.grp-page .page-head { align-items: center; }
.grp-page .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.grp-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 0; margin: 0; }
.grp-tabs .tab { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; border: 0; white-space: nowrap; }
.grp-tabs .tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.grp-tabs .tab::after { display: none; }
.stc-head { align-items: center; gap: 16px; flex-wrap: wrap; }
.stc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }
.stc-tools .pills { flex-wrap: nowrap; margin: 0; }
.stc-tools .search { width: 240px; }
.grp-row { align-items: start; }
.grp-students { padding-bottom: 0; }
.grp-roster { margin: 12px -20px 0; }
.grp-roster .table-wrap { border-radius: 0 0 22px 22px; border: 0; border-top: 1px solid var(--line); }
/* student card: 7 daily tasks as segments (the last = recitation with the teacher) */
.stc-tasks { display: inline-flex; gap: 3px; direction: rtl; }
.stc-tasks i { width: 12px; height: 8px; border-radius: 3px; background: var(--surface-3); }
.stc-tasks i.on { background: var(--accent); }
.stc-tasks i.last { margin-inline-start: 4px; width: 14px; }
.stc-tasks i.last:not(.on) { background: var(--surface); box-shadow: inset 0 0 0 1.5px #cfd5d8; }
.stc-tasks.behind i:not(.on) { background: #f6d2cd; }
.stc-tasks.finished i.last:not(.on) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.grp-row > .card { height: auto; }
/* pending requests card (rq) */
.rq { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 30px -28px rgba(20,23,25,.4); position: relative; overflow: hidden; }
.rq::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--accent); }
.rq-head { display: flex; align-items: center; gap: 12px; }
.rq-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.rq-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rq-head small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rq-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11.5px; background: var(--accent); color: #fff; }
.rq { gap: 12px; padding: 14px 18px; }
.rq-head { gap: 10px; }
.rq-head .rq-ic { width: 34px; height: 34px; border-radius: 11px; }
.rq-head small { display: inline; margin: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.rq-grid { display: flex; flex-direction: column; gap: 8px; }
/* each request = one full-width row */
.rq-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, 1.3fr) minmax(220px, 1fr) auto auto; align-items: center; gap: 0; padding: 10px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rq-c { padding: 0 14px; min-width: 0; }
.rq-c + .rq-c { border-inline-start: 1px solid var(--line); }
.rq-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rq-row .rq-meta { flex-wrap: wrap; }
.rq-row .rq-steps { display: grid; }
.rq-people { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rq-row .rq-x { margin: 0 10px; }
@media (max-width: 1250px) { .rq-row { grid-template-columns: 1fr 1fr; row-gap: 10px; } .rq-c + .rq-c { border: 0; } .rq-row .rq-x { justify-self: end; } }
.rq-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.rq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rq-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rq-t b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--warm-soft); color: var(--warm); white-space: nowrap; }
.rq-st i { width: 7px; height: 7px; border-radius: 50%; background: #e8a317; animation: hck-blink 1.2s steps(1) infinite; }
.rq-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-meta span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--ink-2, var(--ink)); background: var(--surface-2); }
.rq-meta svg { color: var(--accent); }
.rq-meta .rq-why { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.rq-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rq-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border-radius: 8px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); }
.rq-steps li.done { background: var(--accent); color: #fff; }
.rq-steps li.cur { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent); }
.rq-steps li.cur i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: hck-blink 1.2s steps(1) infinite; }
.rq-foot { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.rq-faces { display: inline-flex; flex-direction: row; }
.rq-faces .avatar { width: 28px; height: 28px; font-size: 10.5px; border: 2px solid #fff; margin-inline-start: -8px; }
.rq-faces .avatar:first-child { margin-inline-start: 0; }
.rq-cnt { font-size: 12px; color: var(--muted); }
.rq-x { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; color: var(--ink-2, var(--ink)); background: none; border: 1px solid var(--line); cursor: pointer; }
.rq-x:hover { border-color: var(--bad); color: var(--bad); }
/* request progress tracker: circles joined by a line, label under each */
.rq-track { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.rq-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rq-track li + li::before { content: ""; position: absolute; top: 12px; inset-inline-start: -50%; width: 100%; height: 3px; border-radius: 3px; background: var(--surface-3); z-index: 0; }
.rq-track li.done::before, .rq-track li.cur::before { background: var(--accent); }
.rq-track li.cur::before { background: linear-gradient(to left, var(--accent), var(--accent) 50%, #e3e7e9); }
.rq-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid #dfe3e5; color: var(--muted); }
.rq-dot b { font-size: 11.5px; font-weight: 700; }
.rq-track li.done .rq-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.rq-track li.cur .rq-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rq-track li.cur .rq-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: hck-blink 1.2s steps(1) infinite; }
.rq-track small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rq-track li.done small { color: var(--accent-ink); font-weight: 600; }
.rq-track li.cur small { color: var(--ink); font-weight: 700; }
.rq-row.ok .rq-track li.cur .rq-dot { border-color: #b1eb51; box-shadow: 0 0 0 4px rgba(177,235,81,.35); }
.rq-row.ok .rq-track li.cur .rq-dot i { background: #b1eb51; }
.rq-row.ok .rq-track li.cur::before { background: linear-gradient(to left, var(--accent), #b1eb51); }
/* approved request: green status + start button */
.rq-st.ok { background: #e3eff3; color: #2e7a93; }
.rq-st.ok svg { color: #2e7a93; }
.rq-row.ok { border-color: rgba(46,122,147,.35); box-shadow: 0 0 0 3px var(--accent-soft); }
.rq-acts { display: flex; align-items: center; gap: 6px; margin: 0 10px; }
.rq-go { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--on-lime); background: var(--brand-lime); border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(177,235,81,.9); }
.rq-go:hover { background: #d4f06a; }
.rq-x.icon { width: 32px; padding: 0; justify-content: center; margin: 0; }
/* appointment request: numbered sections */
.drawer.wide:has(.ap-sec) .modal-body, .drawer.wide:has(.ap-sec) .drawer-body { display: flex; flex-direction: column; gap: 14px; }
.ap-sec { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.ap-sec .field { margin: 0; }
.ap-sec-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.ap-sec-h b { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--ink); color: var(--on-ink); }
.ap-kinds .option { min-height: 58px; }
.ap-kinds .o-sub { font-size: 11.5px; }
.ap-dur { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ap-dur-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2, var(--ink)); }
.ap-dur-l svg { color: var(--accent); }
.ap-dur .hc-seg button { padding: 0 12px; }
.ap-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-when-o { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; color: var(--ink); cursor: pointer; }
.ap-when-o span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ap-when-o b { font-size: 13.5px; }
.ap-when-o small { font-size: 11.5px; color: var(--muted); }
.ap-when-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.ap-when-o.on { border-color: rgba(46,122,147,.45); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.ap-when-o.on .ap-when-ic { background: var(--accent); color: #fff; }
.ap-now-info { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; }
.ap-tpl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--accent-ink); background: var(--accent-soft); border: 0; cursor: pointer; }
/* students picker: «الكل» + a roomy checklist */
.ap-picker { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); margin-top: -4px; }
.ap-pick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.ap-pick { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.ap-pick:hover { border-color: var(--line-2); }
.ap-pick.on { border-color: rgba(46,122,147,.45); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.ap-pick.all { min-height: 48px; }
.ap-pick.all b { font-size: 14px; }
.ap-pick.all small { font-size: 12px; color: var(--muted); margin-inline-start: auto; }
.ap-ck { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-2, var(--line-2)); display: grid; place-items: center; background: var(--surface); color: #fff; }
.ap-pick.on .ap-ck { background: var(--accent); border-color: var(--accent); }
.ap-pick-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-pick-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-pick-t small { font-size: 11.5px; color: var(--muted); }
.ap-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-reason { height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.ap-reason.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ap-pend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px; background: var(--warm-soft); border: 1px solid #f3e0b6; }
.ap-pend-h { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; white-space: nowrap; }
.ap-pend-h svg { color: var(--warm); }
.ap-pend-h .num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; background: #f3dfb4; color: #8a5c08; }
.ap-pend-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-pend-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid #f0e2c2; }
.ap-pend-item > span { display: flex; flex-direction: column; line-height: 1.3; }
.ap-pend-item b { font-size: 12.5px; }
.ap-pend-item small { font-size: 11px; color: var(--muted); }
.ap-pend-x { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 0; color: var(--muted); cursor: pointer; }
/* ===== Programme milestones (pm) ===== */
.pm { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pm-prog { display: grid; grid-template-columns: auto 220px; grid-template-areas: "l bar" "s bar"; align-items: center; column-gap: 12px; }
.pm-prog-l { grid-area: l; font-size: 12.5px; color: var(--muted); }
.pm-prog-l b { font-size: 18px; color: var(--ink); margin-inline-end: 4px; }
.pm-prog-s { grid-area: s; font-size: 11.5px; color: var(--muted); }
.pm-prog-bar { grid-area: bar; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pm-prog-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(270deg, var(--accent), #5fa9c0); }
.pm-next { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; background: #1a3640; color: #fff; }
.pm-next-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--brand-lime); color: var(--on-lime); }
.pm-next-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-next-t span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.pm-next-t b { font-size: 17px; font-weight: 700; }
.pm-next-t small { font-size: 12.5px; color: rgba(255,255,255,.75); }
.pm-next-n { display: flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 14px; background: rgba(255,255,255,.08); }
.pm-next-n b { font-family: var(--f-display); font-size: 28px; line-height: 1.1; color: var(--brand-lime); }
.pm-next-n span { font-size: 11.5px; color: rgba(255,255,255,.7); }
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); text-align: start; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.pm-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -22px rgba(20,23,25,.5); }
.pm-h { display: flex; align-items: center; gap: 8px; }
.pm-h b { font-size: 14.5px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.pm-now { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--brand-lime); color: var(--on-lime); }
.pm-n { font-size: 11.5px; color: var(--muted); }
.pm-pages { display: flex; flex-direction: column; gap: 4px; }
.pm-pages small { font-size: 11.5px; color: var(--accent-ink); font-weight: 600; }
.pm-bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; background: var(--accent); }
.pm-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pm-row b { font-weight: 500; color: var(--ink-2, var(--ink)); text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row svg { color: var(--accent); }
.pm-card.done { background: var(--surface-2); }
.pm-card.done .pm-i { background: var(--accent); color: #fff; }
.pm-card.done .pm-h b { color: var(--ink-2, var(--ink)); }
.pm-card.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pm-card.now .pm-i { background: var(--accent); color: #fff; }
.pm-card.final { background: linear-gradient(160deg, #f4fbd9, #fff); border-color: #dcef9a; }
.pm-card.final .pm-i { background: var(--brand-lime); color: var(--on-lime); }
.pm-note { margin: -4px 0 0; }
@media (max-width: 900px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== Schedule: simple day agenda (ag) ===== */
.ag { padding: 20px 22px 22px; }
.ag-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ag-ms { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ag-row { display: grid; grid-template-columns: 78px 28px minmax(0, 1fr); align-items: stretch; }
.ag-time { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 18px; }
.ag-time b { font-size: 15px; font-weight: 600; color: var(--ink); }
.ag-time small { font-size: 12px; color: var(--muted); }
.ag-rail { position: relative; display: flex; justify-content: center; }
.ag-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ag-row:first-child .ag-rail::before { top: 24px; }
.ag-row:last-child .ag-rail::before { bottom: calc(100% - 24px); }
.ag-rail i { position: relative; margin-top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-2, var(--line-2)); }
.ag-row.live .ag-rail i { border-color: var(--brand-lime); background: #1a3640; box-shadow: 0 0 0 4px rgba(177,235,81,.3); }
.ag-row.closed .ag-rail i { border-color: var(--accent); background: var(--accent); }
.ag-card { display: flex; align-items: center; gap: 16px; margin: 6px 0; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--accent); transition: box-shadow .15s; }
.ag-card:hover { box-shadow: 0 12px 26px -20px rgba(20,23,25,.45); }
.ag-card.ink { border-inline-start-color: var(--ink); }
.ag-card.brand { border-inline-start-color: var(--accent); }
.ag-card.lime { border-inline-start-color: #9aa3a8; }
.ag-row.live .ag-card { background: #1a3640; color: #fff; border-color: #1a3640; border-inline-start-color: var(--brand-lime); }
.ag-row.closed .ag-card { background: var(--surface-2); }
.ag-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-card-h { display: flex; align-items: center; gap: 10px; }
.ag-card-h b { font-size: 16px; font-weight: 700; }
.ag-st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.ag-st.live { background: var(--brand-lime); color: var(--on-lime); }
.ag-st.live .live-dot { width: 7px; height: 7px; background: #e5483b; }
.ag-st.closed { background: var(--accent-soft); color: var(--accent-ink); }
.ag-st.missed { background: var(--warm-soft); color: var(--warm); }
.ag-sub { font-size: 12.5px; color: var(--muted); }
.ag-row.live .ag-sub, .ag-row.live .ag-count { color: rgba(255,255,255,.7); }
.ag-foot { display: flex; align-items: center; gap: 10px; }
.ag-count { font-size: 12.5px; color: var(--ink-2, var(--ink)); }
.ag-appts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.ag-appt { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 12px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.ag-appt .num { font-weight: 600; color: var(--accent-ink); }
.ag-row.live .ag-appt { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
.ag-card-side { display: flex; align-items: center; gap: 8px; flex: none; }
.ag-cta { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--on-ink); background: var(--ink); border: 0; cursor: pointer; white-space: nowrap; }
.ag-cta.soft { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.ag-row.live .ag-cta { background: var(--brand-lime); color: var(--on-lime); }
.ag-more { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.ag-row.live .ag-more { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: #fff; }
.ag-now { position: relative; display: flex; align-items: center; height: 26px; margin-inline-start: 92px; }
.ag-now::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; background: #e5483b; border-radius: 2px; }
.ag-now::after { content: ""; position: absolute; inset-inline-start: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #e5483b; }
.ag-now span { position: relative; z-index: 1; margin-inline-start: 14px; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; background: #e5483b; }
@media (max-width: 900px) { .ag-card { flex-direction: column; align-items: stretch; } .ag-row { grid-template-columns: 60px 20px minmax(0, 1fr); } .ag-now { margin-inline-start: 70px; } }
/* ===== Unfinished tasks as cards (ltc) ===== */
.ltc-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 16px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.ltc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ltc-legend b { color: var(--ink); font-weight: 600; }
.ltc-legend svg { color: var(--accent); }
.ltc-legend .card-link { margin-inline-start: auto; background: none; border: 0; font: inherit; font-size: 12.5px; cursor: pointer; }
.ltc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ltc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 34px -30px rgba(20,23,25,.45); transition: transform .2s, box-shadow .2s; }
.ltc:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -28px rgba(20,23,25,.5); }
.ltc-go { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.ltc-go:hover { background: var(--ink); color: var(--on-ink); }
.ltc-av .avatar { width: 56px; height: 56px; font-size: 19px; box-shadow: 0 0 0 4px var(--surface-2); }
.ltc-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ltc-name b { font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltc-name small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ltc-meta > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.ltc-meta span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ltc-meta b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ltc-risk { display: inline-flex; gap: 3px; padding-top: 3px; }
.ltc-risk i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.ltc-risk i.on.l1, .ltc-risk i.on.l2 { background: #8cc63f; }
.ltc-risk i.on.l3 { background: #f2b544; }
.ltc-risk i.on.l4 { background: #f08a4b; }
.ltc-risk i.on.l5 { background: #e5483b; }
.ltc-cap { font-size: 11px; color: var(--muted); }
.ltc-tasks { display: flex; flex-direction: column; gap: 6px; }
.ltc-task { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); }
.ltc-task.first { background: var(--warm-soft); border-color: #f3e0b6; }
.ltc-task-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltc-task-t svg { color: var(--accent); flex: none; }
.ltc-task.first .ltc-task-t svg { color: var(--warm); }
.ltc-bar { height: 5px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.ltc-bar i { display: block; height: 100%; background: var(--accent); }
.ltc-task b.num { font-size: 12px; color: var(--ink-2, var(--ink)); }
.ltc-no { grid-column: 2 / 4; justify-self: end; font-size: 11.5px; font-weight: 500; color: var(--warm); }
.ltc-sug { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-2, var(--ink)); margin-top: auto; }
.ltc-dec { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--accent-ink); margin-top: auto; }
.ltc-dec svg { color: var(--accent); flex: none; margin-top: 2px; }
.ltc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: var(--on-ink); background: var(--ink); border: 0; cursor: pointer; transition: background .15s, color .15s; }
.ltc-cta:hover { background: var(--brand-lime); color: var(--on-lime); }
.ltc-cta.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.ltc.is-done { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
@media (max-width: 1250px) { .ltc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* decision panel groups */
.lt-dr-main { display: flex; flex-direction: column; gap: 14px; }
.lt-ogrp { display: flex; flex-direction: column; gap: 8px; }
.lt-ogrp-t { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lt-sugtag { font-style: normal; font-size: 10px; font-weight: 600; margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--brand-lime); color: var(--on-lime); vertical-align: middle; }
/* rules explanation */
.lt-explain { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lt-ex { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--ink-2, var(--ink)); line-height: 1.6; }
.lt-ex.first { background: var(--warm-soft); border-color: #f3e0b6; }
.lt-ex-h { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.lt-ex.first .lt-ex-h svg { color: var(--warm); } .lt-ex.carry .lt-ex-h svg { color: var(--accent); }
.lt-ex-eg { font-size: 11.5px; color: var(--muted); padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.7); }
/* ===== Student attendance file (af) ===== */
.af-file { display: flex; flex-direction: column; gap: 16px; }
.drawer.wide:has(.af-file) { width: min(880px, 94vw); max-width: min(880px, 94vw); }
.af-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.af-id { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; border-radius: 16px; background: var(--surface-2); overflow: hidden; isolation: isolate; }
.af-id::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/star-tile.svg") 0 0 / 70px repeat; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.af-more { position: absolute; top: 14px; inset-inline-end: 14px; }
.af-id .avatar.xl { width: 72px; height: 72px; font-size: 24px; margin-bottom: 10px; box-shadow: 0 0 0 4px #fff; }
.af-code { font-size: 12px; color: var(--muted); }
.af-name { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--ink); flex-wrap: wrap; }
.af-active { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ok, #2f9e6b); }
.af-active.warn { color: var(--warm); }
.af-role { font-size: 12.5px; color: var(--muted); }
.af-facts { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 6px; }
.af-fact { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.af-fact > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.af-fact > b { font-weight: 500; color: var(--ink-2, var(--ink)); }
.af-pill { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); font-weight: 600; color: var(--ink); }
.af-late { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--warm-soft); border: 1px solid #f3e0b6; }
.af-late.done { background: var(--accent-soft); border-color: transparent; }
.af-late-h { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.af-late-h svg { color: var(--warm); } .af-late.done .af-late-h svg { color: var(--accent); }
.af-late-h small { color: var(--muted); }
.af-late-items { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.af-late-items span { font-size: 12px; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.75); }
.af-sec { display: flex; flex-direction: column; gap: 10px; }
.af-sec-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.af-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.af-sum > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.af-sum > div + div { border-inline-start: 1px solid var(--line); }
.af-sum span { font-size: 12px; color: var(--muted); }
.af-sum b { font-size: 15px; font-weight: 600; color: var(--ink); }
.af-sum small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.af-month { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-month-t { font-size: 15px; font-weight: 600; margin-inline-end: 6px; }
.af-nav { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: none; border: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.af-nav:disabled { opacity: .35; cursor: default; }
.af-table { border-radius: 16px; border: 1px solid var(--line); overflow: hidden; max-height: 360px; overflow-y: auto; }
.af-table thead th { position: sticky; top: 0; background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--muted); }
.af-table td { padding-block: 11px; }
.af-st { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.af-st.present { background: #e3eff3; color: #2e7a93; }
.af-st.late { background: var(--warm-soft); color: #c46f12; }
.af-st.absent { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 1100px) { .af-top { grid-template-columns: 1fr; } }
/* one-row filters: [circle] | [date] ........ [search] */
.af-one { flex-wrap: wrap; gap: 14px 22px; }
.af-group { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-one .af-label { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2, var(--muted)); }
.af-one .af-label svg { color: var(--accent); }
.af-one .pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); flex-wrap: nowrap; }
.af-one .pill { height: 40px; padding: 0 18px; border-radius: 11px; font-size: 14px; white-space: nowrap; }
.af-sep { width: 1px; height: 34px; background: var(--line); }
.af-one .search { max-width: 260px; height: 44px; }
.att-filters:has(.af-one) { padding: 14px 18px; }
.att-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.att-stat { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: start; }
.att-stat b { font-family: var(--f-display); font-size: 26px; font-weight: 600; }
.att-stat span { font-size: 13px; color: var(--ink-2); }
.att-stat.ok b { color: var(--accent); } .att-stat.bad b, .att-stat.crit b { color: var(--bad); }
.att-stat.crit { border-color: var(--bad-soft); }
.att-stat.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.att-log td { vertical-align: middle; }
.row-critical { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.row-critical td:first-child { box-shadow: inset -3px 0 0 var(--bad); }
/* Reports overview */
.rp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg3 { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.seg3 button { height: 34px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.seg3 button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.rp-split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.rp-metrics { display: flex; flex-direction: column; gap: 18px; padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.rp-metric { display: flex; flex-direction: column; gap: 4px; }
.rp-m-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.rp-metric b { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.rp-m-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rp-m-bar span { display: block; height: 100%; border-radius: 3px; }
.rp-legend4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.rp-legend4 > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rp-legend4 span:first-child { flex-basis: 100%; }
.rp-legend4 b { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.rp-pair { display: flex; gap: 22px; margin-bottom: 8px; }
.rp-pair > div { display: flex; flex-direction: column; }
.rp-pair b { font-family: var(--f-display); font-size: 24px; font-weight: 600; }
.rp-best { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.rp-big { font-family: var(--f-display); font-size: 54px; font-weight: 700; line-height: 1; color: var(--ink); }
.rp-best-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent-ink); }
.rp-best .btn { max-width: 240px; }
.rp-mini { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.rp-mini > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.rp-mini b { font-family: var(--f-display); font-size: 28px; font-weight: 600; }
.rp-mini-t { font-size: 12px; font-weight: 700; }
.rp-th { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.rp-bar { width: 110px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rp-bar.sm { width: 60px; }
.rp-bar span { display: block; height: 100%; border-radius: 3px; }
.rp-group-h th { text-align: center; background: var(--surface-2); border-inline-start: 1px solid var(--line); font-size: 12.5px; }
.rp-big-tbl td { border-inline-start: 1px solid var(--line); }
@media (max-width: 1300px) { .rp-split { grid-template-columns: 1fr; } .rp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; border: 0; } }
@media print { .rail, .topbar, .rp-toolbar, .tabs { display: none !important; } }

/* ===================== Review 7: trend + donut ===================== */
.lt text { font-size: 12px; fill: var(--muted); }
.lt text.b { fill: var(--ink); font-weight: 700; }
.lt .vline { stroke: var(--ink); stroke-width: 1.5; }
.lt .tt { fill: #1a3640; }
.lt .tt-t { fill: #fff !important; font-weight: 700; font-size: 14px !important; }
.lt .tt-l { fill: rgba(255,255,255,.85) !important; font-size: 12.5px !important; }
.lt .tt-v { fill: #fff !important; font-weight: 700; font-size: 13px !important; }
.lt .hv { opacity: 0; transition: opacity .12s; }
.lt .hv.on { opacity: 1; }
.lt:hover .hv.on { opacity: 0; }
.lt .hv.on:hover, .lt .hv:hover { opacity: 1; }
.lt .hit { cursor: crosshair; }
:root[data-theme="dark"] .lt .tt { fill: #2a3034; }

.trend-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seg-soft { display: inline-flex; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.seg-soft button { height: 36px; padding: 0 16px; border-radius: 12px; font-size: 13px; color: var(--ink-2); }
.seg-soft button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.date-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); font-size: 13px; color: var(--ink); }
.date-pill input { border: 0; background: transparent; font: inherit; color: inherit; width: 128px; }
.date-swap { color: var(--muted); display: inline-grid; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-inline-start: auto; }
.cmp-chip b { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--f-display); }
.cmp-chip b.down { background: var(--bad-soft); color: var(--bad); }
.trend-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.trend-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-radius: 18px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.trend-sum b { font-family: var(--f-display); font-size: 18px; color: var(--ink); }

.dn .sl { transition: transform .2s ease; cursor: pointer; }
.dn .sl.on { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 8px 10px rgba(20,23,25,.25)); }
.dn:hover .sl.on:not(:hover) { transform: none; filter: none; }
.dn .sl:hover { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 8px 10px rgba(20,23,25,.25)); }
.dn .sl text { font-size: 13px; font-weight: 700; pointer-events: none; }
.dn-c { font-family: var(--f-display); font-size: 26px; font-weight: 700; fill: var(--ink) !important; }
.dn-s { font-size: 12px; fill: var(--muted); font-weight: 600; }
.dn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 18px; }
.dn-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dn-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.dn-legend i { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.dn-legend span { flex: 1; }
.dn-legend b { font-family: var(--f-display); color: var(--ink); }
.dn-legend small { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 1300px) { .dn-wrap { grid-template-columns: 1fr; justify-items: center; } .dn-legend { width: 100%; } .trend-sum { grid-template-columns: repeat(2, 1fr); } }
.trend-sum b.small { white-space: nowrap; font-size: 14px; }

/* ===================== Review 8: brand identity (logo, charcoal / teal / lime, chevron + star shapes) ===================== */
.brand-text b { font-family: var(--f-brand); font-size: 30px; font-weight: 700; color: var(--brand-dark); line-height: 1.1; letter-spacing: 0; }
:root[data-theme="dark"] .brand-text b { color: #8cc3d6; }
.brand-mark { width: 42px; height: 42px; }
.rail-graphic { margin: 10px -12px 6px; height: 64px; overflow: hidden; border-radius: 16px 16px 0 0; }
.rail-graphic .brand-graphic { width: 100%; height: 100%; display: block; }
.app.rail-min .rail-graphic { height: 34px; }
.nav-item[aria-current="page"] { position: relative; }
.nav-item[aria-current="page"]::after { content: ""; position: absolute; inset-inline-start: -4px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--brand-lime); }
.sb-digits b:last-of-type { background: var(--brand-lime); color: var(--on-lime); }
.session-bar .sb-star { position: absolute; inset-inline-end: 22%; top: 50%; transform: translateY(-50%) rotate(12deg); opacity: .10; pointer-events: none; }
.session-bar .sb-star .brand-mark { width: 200px; height: 200px; }
.session-bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--brand-lime); }
.session-bar .sb-eyebrow .live-dot { background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(177,235,81,.3); }
.k4-ico { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.page-head h1 { color: var(--ink); font-size: calc(var(--fs-3xl) * .8); }
.sec-head .card-title::after, .page-head h1::after { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; margin-top: 8px; background: var(--brand-lime); }
.kpi4:hover { border-color: var(--brand-lime); }
/* current vs previous line chart */
.lc text { font-size: 12.5px; fill: var(--muted); }
.lc text.b { fill: var(--ink); font-weight: 700; }
.lc .axis { stroke: var(--line-2); }
.lc .cur { stroke: var(--accent); stroke-width: 2.8; }
.lc .prev { stroke: #b6d3dd; stroke-width: 2.4; }
.lc .cur-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.lc .prev-dot { fill: #b6d3dd; stroke: var(--surface); stroke-width: 2; }
:root[data-theme="dark"] .lc .prev, :root[data-theme="dark"] .lc .prev-dot { stroke: #3c5c67; fill: #3c5c67; }
.lc-legend { display: flex; gap: 28px; padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.lc-legend div { display: flex; flex-direction: column; gap: 4px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.lc-legend i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); }
.lc-legend i.prev { border-color: #b6d3dd; }
.lc-legend b { font-family: var(--f-display); font-size: 20px; }
.lc-head-tools { display: flex; align-items: center; gap: 8px; }

/* ===================== Review 9 ===================== */
/* Recitation approvals: three columns, same height */
.sb-wrap { align-items: stretch; }
.sb-list, .sb-decide { position: static; max-height: none; }
.sb-wrap > .card { height: 100%; }
.sb-items { flex: 1; }
/* Schedule calendar (week time grid) */
.cal { overflow: hidden; }
.cal-row { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); }
.cal-gut { border-inline-end: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cal-head { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-day-h { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-inline-end: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.cal-day-h b { font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-day-h.today { background: var(--surface); box-shadow: inset 0 -3px 0 var(--brand-lime); color: var(--ink); font-weight: 700; }
.cal-day-h.today b { color: var(--accent-ink); }
.cal-all { border-bottom: 1px solid var(--line); min-height: 52px; }
.cal-all-c { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-inline-end: 1px solid var(--line); }
.cal-band { position: relative; border-bottom: 1px solid var(--line); }
.cal-hours { position: relative; align-items: flex-start; }
.cal-hours span { position: absolute; inset-inline: 0; text-align: center; font-size: 11.5px; transform: translateY(6px); }
.cal-band-name { display: none; }
.cal-col { position: relative; border-inline-end: 1px solid var(--line); background-image: repeating-linear-gradient(180deg, transparent 0 71px, var(--line) 71px 72px); }
.cal-col.fri, .cal-all-c.fri { background-color: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-col.today { background-color: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.cal-gap { display: grid; place-items: center; height: 22px; font-size: 12px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); letter-spacing: 3px; }
.cal-ev { position: absolute; inset-inline: 6px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; font-size: 12px; overflow: hidden; border: 1px solid; }
.cal-ev .cal-ev-t { font-size: 11px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px dashed currentColor; opacity: .85; }
.cal-ev b { font-size: 12.5px; }
.cal-ev.ink { background: #e9ebec; border-color: #c9ced1; color: var(--ink); }
.cal-ev.brand { background: var(--accent-soft); border-color: #b6d3dd; color: var(--accent-ink); }
.cal-ev.lime { background: #f0f1f2; border-color: #d6d9db; color: #4f585d; }
.cal-ev.closed { opacity: .6; }
.cal-ev.live { box-shadow: 0 0 0 2px var(--bad); }
.cal-ev:hover { filter: brightness(.97); transform: translateY(-1px); }
.cal-now { position: absolute; inset-inline: 0; height: 2px; background: var(--accent); z-index: 2; }
.cal-now::before, .cal-now::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cal-now::before { inset-inline-start: -4px; } .cal-now::after { inset-inline-end: -4px; }
.cal-now i { position: absolute; inset-inline-start: 8px; top: -18px; font-style: normal; font-size: 10.5px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 6px; }
.ms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.ms-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chip.brand { background: var(--accent); color: #fff; }
.ms-chip.ink { background: #1a3640; color: #fff; }
.ms-chip.lime { background: var(--brand-lime); color: var(--on-lime); }
.ms-chip.soft { background: var(--surface-3); color: var(--ink-2); }
.cal-legend { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.cal-legend > span:not(.ms-chip) { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .sep { width: 1px; height: 18px; background: var(--line-2); }
.mo-cell { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: start; }
.mo-cell.fri { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.mo-dots { display: flex; gap: 4px; align-items: center; min-height: 12px; }
.mo-cell .ms-chip { font-size: 10.5px; }
/* Programme milestones line */
.plan-card .card-head { align-items: center; }
.plan-next { font-size: 13px; color: var(--on-lime); background: var(--brand-lime); padding: 6px 12px; border-radius: 999px; color: var(--on-lime); }
.plan-line { list-style: none; margin: 6px 0 10px; padding: 18px 4px 4px; display: flex; gap: 0; overflow-x: auto; }
.plan-line li { position: relative; flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; padding: 0 4px; }
.plan-line li::before { content: ""; position: absolute; top: 14px; inset-inline-start: 50%; width: 100%; height: 3px; background: var(--line-2); z-index: 0; }
.plan-line li:last-child::before { display: none; }
.plan-line li b { font-size: 12px; }
.pl-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--surface); }
.plan-line li.tathbeet .pl-dot { background: #1a3640; }
.plan-line li.seventh .pl-dot { background: var(--brand-lime); color: var(--on-lime); width: 36px; height: 36px; margin-top: -3px; }
.plan-line li.past { opacity: .45; }
.plan-line li.next .pl-dot { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--brand-lime); }

/* ===================== Review 10: brand star motif across the interface ===================== */
/* Faint star in the corner of every page (brand watermark) */
#view { background-image: url("../assets/star-faint.svg"); background-repeat: no-repeat; background-size: 560px; background-position: left -170px bottom -190px; background-attachment: local; }
:root[data-theme="dark"] #view { background-image: none; }
/* Home greeting: pattern strip of stars, fading out */
.home-head { position: relative; isolation: isolate; }
.home-head::before { content: ""; position: absolute; z-index: -1; inset-block: -18px -8px; left: 0; width: 48%; background: url("../assets/star-tile.svg") repeat; background-size: 92px; -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 95%); mask-image: linear-gradient(to right, #000 15%, transparent 95%); border-radius: 18px; }
/* Session banner: white star (already), lighter tips */
.session-bar .sb-star { opacity: .16; }
/* Circle cards: white star watermark instead of the plain circle */
.circle-card::after, .circle-card.lime::after { width: 210px; height: 210px; left: -64px; top: -70px; border-radius: 0; background: url("../assets/star-white.svg") center / contain no-repeat; opacity: .14; transform: rotate(12deg); }
/* KPI cards: small light star in the corner */
.kpi4 { position: relative; overflow: hidden; }
.kpi4::after { content: ""; position: absolute; width: 96px; height: 96px; inset-inline-end: -26px; top: -26px; background: url("../assets/star.svg") center / contain no-repeat; opacity: .12; pointer-events: none; }
/* Section titles: a tiny star before the circles title */
.sec-head .card-title { display: inline-flex; align-items: center; gap: 10px; }
.sec-head .card-title::before { content: ""; width: 22px; height: 22px; background: url("../assets/star.svg") center / contain no-repeat; flex: none; }
.sec-head .card-title::after { display: none; }
/* Empty states: star behind the icon */
.empty .e-ico { background: url("../assets/star.svg") center / 88% no-repeat; color: #fff; width: 64px; height: 64px; }
.empty .e-ico svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* Programme milestones: the seventh end uses the star */
.plan-line li.seventh .pl-dot { background: url("../assets/star.svg") center / 100% no-repeat; box-shadow: none; width: 40px; height: 40px; }
.plan-line li.seventh .pl-dot svg { display: none; }
/* Roll call + live summary: star behind the done badge */
.rc-sum { position: relative; }
.rollcall::after { content: ""; position: absolute; width: 180px; height: 180px; inset-inline-start: -50px; bottom: -50px; background: url("../assets/star.svg") center / contain no-repeat; opacity: .08; pointer-events: none; }
/* Rail: faint star tile behind the logo */
.rail-top { position: relative; }
.brand { position: relative; }

/* Fix: circle cards rows stretch full width; star watermark stays behind the content */
.circle-card { align-items: stretch; text-align: start; }
.circle-card > * { position: relative; z-index: 1; }
.circle-card::after { z-index: 0; }
.circle-card .cc-foot { justify-content: space-between; gap: 10px; }

/* ===================== Review 11: session banner (dark panel, metrics + lime bars, side module) ===================== */
.sbx { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 14px; border-radius: 28px; background: linear-gradient(135deg, #1a3640 0%, #17313a 60%, #1d2327 100%); color: #fff; box-shadow: 0 24px 44px -28px rgba(20,23,25,.9); }
.sbx-star { position: absolute; z-index: -1; left: 34%; top: 50%; transform: translateY(-50%) rotate(10deg); opacity: .06; pointer-events: none; }
.sbx-star .brand-mark { width: 260px; height: 260px; }
.sbx-main { display: grid; grid-template-columns: 1.15fr 1.1fr 1fr; padding: 20px 22px 18px; }
.sbx-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 18px; }
.sbx-col:first-child { padding-inline-start: 0; }
.sbx-col + .sbx-col { border-inline-start: 1px solid rgba(255,255,255,.09); }
.sbx-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.sbx-lab .live-dot { background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(177,235,81,.25); }
.sbx-big { font-family: var(--f-display); font-size: 34px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-big small { font-size: 18px; color: rgba(255,255,255,.5); font-weight: 500; }
.sbx-clock { direction: ltr; display: inline-flex; justify-content: flex-end; gap: 2px; letter-spacing: .5px; }
.sbx-clock i { font-style: normal; color: rgba(255,255,255,.35); padding: 0 2px; }
.sbx-clock .sec { color: var(--brand-lime); }
.sbx-sub { font-size: 12.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-bar-l { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,.55); }
.sbx-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.sbx-bar span { display: block; height: 100%; border-radius: 6px; background: var(--brand-lime); box-shadow: 0 0 12px rgba(177,235,81,.45); }
.sbx-faces { display: flex; margin-top: 10px; }
.sbx-faces .avatar { border: 2px solid #1a3640; margin-inline-start: -8px; }
.sbx-faces .avatar:first-child { margin-inline-start: 0; }
.sbx-faces .avatar.more { background: rgba(255,255,255,.14); color: #fff; }
.sbx-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.55); }
.sbx-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.sbx-side-h { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.62); }
.sbx-side-h a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.sbx-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; }
.sbx-mini { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 92px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); color: #fff; transition: transform .15s; }
.sbx-mini:hover { transform: translateY(-2px); }
.sbx-mini b { font-size: 15px; }
.sbx-mini-t { font-size: 12px; color: rgba(255,255,255,.65); }
.sbx-mini-s { font-size: 11px; color: rgba(255,255,255,.55); }
.sbx-mini.on { background: var(--brand-lime); color: var(--on-lime); box-shadow: 0 10px 22px -12px rgba(177,235,81,.8); }
.sbx-mini.on .sbx-mini-t, .sbx-mini.on .sbx-mini-s { color: rgba(26,54,64,.75); }
.sbx-mini.closed { opacity: .55; }
.sbx-mini.live { box-shadow: inset 0 0 0 2px var(--brand-lime); }
.sbx-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; }
.sbx-cta:hover { background: var(--brand-lime); }
.sbx-link { align-self: center; font-size: 12.5px; color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; background: none; }
.sbx.live { background: linear-gradient(135deg, #1f5568 0%, #1a3640 70%); }
.sbx.done { grid-template-columns: minmax(0, 1fr) 260px; }
.sbx.done .sbx-main { grid-template-columns: 1fr; }
.sbx.done .sbx-side { justify-content: center; }
/* tighter classic banner: no queue link, less vertical padding */
.sbx-main { padding: 14px 22px 12px; }
.sbx-col { gap: 4px; }
.sbx-big { font-size: 30px; }
.sbx-bar-l { margin-top: 8px; }
.sbx-faces { margin-top: 8px; }
.sbx-note { margin-top: 8px; }
.sbx-side { gap: 8px; padding: 12px; }
.sbx-mini { min-height: 76px; padding: 9px 11px; }
.sbx-cta { height: 46px; }
@media (max-width: 1350px) { .sbx { grid-template-columns: 1fr; } .sbx-main { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sbx-side { display: grid; grid-template-columns: 1fr auto; align-items: center; } .sbx-side-h { display: none; } .sbx-minis { min-height: 0; } .sbx-mini { min-height: 64px; } }

/* ===================== Review 12: schedule (cards, strip, timeline, lanes, roadmap) ===================== */
.sc-head { align-items: center; }
.sc-head .page-actions { flex-wrap: wrap; gap: 8px; }
.sc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-align: start; transition: transform .15s, box-shadow .15s; }
.sc-card:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 16px 28px -22px rgba(20,23,25,.5); }
.sc-card[disabled] { opacity: .6; cursor: default; }
.sc-card-top { display: flex; align-items: center; gap: 12px; }
.sc-card-top b { display: block; font-size: 15px; }
.sc-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.sc-ico.ink { background: #1a3640; } .sc-ico.brand { background: var(--accent); } .sc-ico.lime { background: #7d868b; }
.sc-st { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.sc-st.live { background: var(--bad-soft); color: var(--bad); } .sc-st.closed { background: var(--accent-soft); color: var(--accent-ink); }
.sc-card-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.sc-card-bar span { display: block; height: 100%; background: var(--brand-lime); border-radius: 4px; }
.sc-card-foot { display: flex; align-items: center; justify-content: space-between; }
.sc-faces { display: inline-flex; }
.sc-faces .avatar { width: 26px; height: 26px; font-size: 10px; border: 2px solid var(--surface); margin-inline-start: -7px; }
.sc-faces .avatar:first-child { margin-inline-start: 0; }
.sc-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.sc-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; font-size: 11.5px; color: var(--muted); }
.sc-day b { font-family: var(--f-display); font-size: 17px; color: var(--ink); }
.sc-day:hover { background: var(--surface-2); }
.sc-day.fri { color: var(--accent-ink); }
.sc-day.today b { color: var(--accent); }
.sc-day.on { background: #1a3640; color: rgba(255,255,255,.7); } .sc-day.on b { color: #fff; }
.sc-day-dot { position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; }
.sc-day-dot.brand { background: var(--accent); } .sc-day-dot.ink { background: #1a3640; } .sc-day-dot.lime { background: var(--brand-lime); }
.sc-day.on .sc-day-dot.ink { background: var(--surface); }
/* Day timeline */
.sc-tl { padding: 16px 18px; background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(26,54,64,.025) 14px 28px); }
.tl-axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline-start: 96px; gap: 0; border-bottom: 1px solid var(--line); }
.tl-win { position: relative; height: 46px; border-inline-start: 1px dashed var(--line-2); }
.tl-win-name { position: absolute; top: 2px; inset-inline-start: 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tl-tick { position: absolute; bottom: 4px; transform: translateX(50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.tl-lanes { position: relative; }
.tl-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 96px; border-bottom: 1px dashed var(--line); }
.tl-lane-h { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tl-track { position: relative; height: 84px; background-image: linear-gradient(to left, transparent calc(33.333% - 1px), var(--line) calc(33.333% - 1px), var(--line) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), var(--line) calc(66.666% - 1px), var(--line) 66.666%, transparent 66.666%); }
.tl-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.tl-block { position: absolute; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 8px 12px; border-radius: 16px; text-align: start; color: #fff; box-shadow: 0 12px 22px -14px rgba(20,23,25,.6); transition: transform .15s; }
.tl-block:hover { transform: translateY(-2px); }
.tl-block.ink { background: #1a3640; } .tl-block.brand { background: var(--accent); } .tl-block.lime { background: #6b7479; }
.tl-block.closed { background: var(--surface); color: var(--ink); border: 1px dashed var(--line-2); box-shadow: none; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(26,54,64,.05) 8px 16px); }
.tl-block.live { box-shadow: 0 0 0 3px var(--brand-lime), 0 12px 22px -14px rgba(20,23,25,.6); }
.tl-block-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-block-h b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.18); white-space: nowrap; }
.tl-block.closed .tl-badge { background: var(--surface-2); }
.tl-block .xs { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-prog { height: 4px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.tl-prog span { display: block; height: 100%; background: var(--brand-lime); }
.tl-block.closed .tl-prog { background: var(--surface-3); }
.tl-block .sc-faces .avatar { border-color: transparent; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.tl-now i { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.tl-now::after { content: ""; position: absolute; bottom: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tl-ms { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
/* Week lanes */
.sc-week { padding: 14px 18px; overflow: hidden; }
.wl-row { display: grid; grid-template-columns: 130px repeat(7, minmax(0, 1fr)); align-items: stretch; }
.wl-head { border-bottom: 1px solid var(--line); }
.wl-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 12px; color: var(--muted); border-radius: 12px; }
.wl-day b { font-size: 12px; color: var(--ink); }
.wl-day.today { color: var(--accent-ink); } .wl-day.today b { color: var(--accent); }
.wl-body { position: relative; background-image: linear-gradient(to left, transparent 130px, transparent 130px); }
.wl-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 10px 0; }
.wl-lab small { font-size: 11px; color: var(--muted); font-weight: 500; margin-inline-start: auto; padding-inline-end: 10px; }
.wl-cell { padding: 8px 4px; border-inline-start: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 64px; justify-content: center; }
.wl-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; text-align: start; color: #fff; font-size: 12px; transition: transform .15s; }
.wl-bar:hover { transform: translateY(-2px); }
.wl-bar.ink { background: #1a3640; } .wl-bar.brand { background: var(--accent); } .wl-bar.lime { background: #6b7479; }
.wl-bar.closed { opacity: .45; }
.wl-bar.muahada { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.0) 0 6px, rgba(255,255,255,.14) 6px 12px); }
.wl-n { font-size: 10.5px; opacity: .85; }
.wl-p { height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; } .wl-p span { display: block; height: 100%; background: var(--brand-lime); }
.wl-ms .wl-cell { min-height: 52px; }
.wl-diamond { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 10px; background: var(--surface-2); text-align: start; }
.wl-diamond i { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; flex: none; background: var(--accent); }
.wl-diamond.ink i { background: #1a3640; } .wl-diamond.lime i { background: var(--brand-lime); box-shadow: 0 0 0 1px #b1eb51; } .wl-diamond.soft i { background: var(--line-2); }
.wl-diamond span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); right: calc(130px + (100% - 130px) * (var(--ti) + .5) / 7); pointer-events: none; }
.wl-today i { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 1px 10px; border-radius: 999px; }
/* Programme roadmap */
.sc-rm { position: relative; padding: 14px 0 0; overflow: hidden; }
.rm-head { display: grid; grid-template-columns: 110px repeat(var(--months, 4), minmax(0, 1fr)); padding: 0 20px; border-bottom: 1px solid var(--line); }
.rm-month { font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 10px; border-inline-start: 1px dashed var(--line-2); }
.rm-body { position: relative; padding: 10px 20px 20px; }
.rm-grid { position: absolute; top: 0; bottom: 0; left: 20px; right: 130px; display: grid; grid-template-columns: repeat(var(--months), 1fr); pointer-events: none; }
.rm-grid span { border-inline-start: 1px dashed var(--line); }
.rm-group { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-ink); margin: 4px 0 6px; }
.rm-row { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; min-height: 52px; }
.rm-lab { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; }
.rm-lab small { font-size: 11px; color: var(--muted); font-weight: 500; }
.rm-track { position: relative; height: 44px; }
.rm-bar { position: absolute; top: 4px; bottom: 4px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px; border-radius: 12px; text-align: start; font-size: 12px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #b6d3dd; min-width: 70px; transition: transform .15s; }
.rm-bar:hover { transform: translateY(-2px); }
.rm-bar.now { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 12px 22px -12px rgba(46,122,147,.9); }
.rm-bar.done { background: #1a3640; color: #fff; border-color: transparent; }
.rm-n { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.2); }
.rm-bar.next .rm-n { background: rgba(46,122,147,.12); }
.rm-p { height: 3px; border-radius: 2px; background: rgba(46,122,147,.18); overflow: hidden; }
.rm-bar.now .rm-p { background: rgba(255,255,255,.25); }
.rm-p span { display: block; height: 100%; background: var(--brand-lime); }
.rm-p.big { height: 7px; border-radius: 4px; background: var(--surface-3); }
.rm-dia { position: absolute; top: 50%; transform: translate(50%, -50%); display: inline-flex; align-items: center; gap: 6px; background: none; }
.rm-dia i { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: #1a3640; box-shadow: 0 0 0 3px var(--surface); }
.rm-dia.seventh i { width: 18px; height: 18px; background: var(--brand-lime); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #b1eb51; }
.rm-dia span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--brand-lime); color: var(--on-lime); white-space: nowrap; }
.rm-today { position: absolute; top: -6px; bottom: 10px; width: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.rm-today i { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 10px; border-radius: 999px; }
.rm-float { position: absolute; left: 20px; bottom: 44px; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pop); border: 1px solid var(--line); z-index: 3; }
.rm-float b { font-family: var(--f-display); font-size: 18px; }
/* Detail panel */
.sc-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-dl > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.sc-dl span { font-size: 11.5px; color: var(--muted); } .sc-dl b { font-size: 16px; }
@media (max-width: 1300px) { .sc-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); } .rm-float { position: static; width: auto; margin: 0 20px 14px; } }
/* override the review-3 timeline styles that share class names */
.sc-tl .tl-block { transform: none; min-width: 0; white-space: normal; font-size: 12px; font-weight: 400; justify-content: space-between; }
.sc-tl .tl-block:hover { transform: translateY(-2px); }
.sc-tl .tl-track { height: 104px; margin-top: 0; border-radius: 0; }
.sc-tl .tl-lane { min-height: 116px; }
.sc-tl .tl-now { top: 0; bottom: 0; background: var(--accent); }
.rm-float { bottom: auto; top: 64px; }

/* ===================== Review 13: roll-call popup (dark card + lime strip, progress rings, badge summary) ===================== */
.rollcall.rc2 { width: min(440px, calc(100vw - 32px)); gap: 16px; padding: 22px; border-radius: 30px; background: var(--surface); }
.rc2-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rc2-live { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 12px; font-weight: 700; }
.rc2-head h2 { font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.rc2-step { font-size: 12.5px; color: var(--muted); }
/* dark card stacked on a lime strip */
.rc2-stack { position: relative; padding-bottom: 0; }
.rc2-card { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, #3a454c 0%, #1a3640 45%, #152c33 100%); color: #fff; box-shadow: 0 18px 30px -18px rgba(20,23,25,.9); }
.rc2-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.6); }
.rc2-top b { color: #fff; }
.rc2-timer { display: inline-flex; align-items: center; gap: 6px; }
.rc2-timer b { font-family: var(--f-display); font-size: 15px; min-width: 18px; }
.rc2-ring .bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 3; }
.rc2-ring .fg { fill: none; stroke: var(--brand-lime); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.rc2-pause { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.rc2-who { display: flex; align-items: center; gap: 14px; }
.rc2-who .avatar.lg { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px rgba(255,255,255,.18); flex: none; }
.rc2-who h3 { font-family: var(--f-display); font-size: 25px; font-weight: 600; line-height: 1.25; }
.rc2-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.rc2-conn i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.rc2-conn.on i { background: var(--brand-lime); box-shadow: 0 0 0 3px rgba(177,235,81,.25); }
.rc2-btns { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; }
.rc2-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 52px; border-radius: 15px; font-size: 14.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .1s, background .15s; }
.rc2-btn:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.rc2-btn:active { transform: scale(.97); }
.rc2-btn .kbd { position: absolute; top: 5px; inset-inline-start: 6px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 3px; background: rgba(255,255,255,.12); border: 0; color: rgba(255,255,255,.7); }
.rc2-btn.present { background: var(--brand-lime); color: var(--on-lime); border-color: transparent; box-shadow: 0 10px 20px -10px rgba(177,235,81,.8); }
.rc2-btn.present .kbd { background: rgba(26,54,64,.12); color: rgba(26,54,64,.7); }
.rc2-btn.present:hover { background: #d4f26a; }
.rc2-btn.absent { color: #ff9a92; }
.rc2-btn.absent:hover { background: rgba(239,107,96,.18); }
.rc2-btn.pre { outline: 2px solid var(--brand-lime); outline-offset: 2px; }
.rc2-btn.present.pre { outline-color: #fff; }
.rc2-strip { position: relative; z-index: 1; margin-top: -22px; padding: 32px 18px 12px; border-radius: 0 0 24px 24px; background: var(--brand-lime); color: var(--on-lime); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 14px 24px -16px rgba(177,235,81,.9); }
.rc2-strip span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc2-strip.late { background: #ffe59a; box-shadow: 0 14px 24px -16px rgba(220,170,40,.9); }
.rc2-strip.exc { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
/* progress rings */
.rc2-prog { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); }
.rc2-prog b { font-size: 14px; }
.rc2-dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; max-height: 172px; overflow-y: auto; padding: 2px; }
.rc2-dot { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; padding: 0; }
.rc2-dot-c { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 3px var(--surface-3); }
.rc2-dot-n { font-size: 10.5px; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc2-dot.present .rc2-dot-c { background: var(--brand-lime); color: var(--on-lime); box-shadow: none; }
.rc2-dot.late .rc2-dot-c { background: #1a3640; color: #fff; box-shadow: none; }
.rc2-dot.absent .rc2-dot-c { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.rc2-dot.cur .rc2-dot-c { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 3px var(--accent-soft); }
.rc2-dot.cur .rc2-dot-n { color: var(--ink); font-weight: 700; }
.rc2-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.rc2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rc2-legend i { width: 10px; height: 10px; border-radius: 50%; }
.rc2-legend i.present { background: var(--brand-lime); } .rc2-legend i.late { background: #1a3640; } .rc2-legend i.absent { background: var(--bad); }
.rc2-foot { display: flex; justify-content: space-between; gap: 8px; }
.rc2-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #1a3640; color: #fff; }
.rc2-pill.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
/* summary badge */
.rc2.done { align-items: stretch; }
.rc2-badge { position: relative; display: grid; place-items: center; height: 150px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 75%); mask-image: radial-gradient(circle, #000 45%, transparent 75%); }
.rc2-badge { -webkit-mask-image: none; mask-image: none; background-image: radial-gradient(circle, transparent 0, transparent 100%); }
.rc2-seal { position: relative; z-index: 1; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 10px var(--accent-soft), 0 0 0 12px #b6d3dd, 0 16px 30px -14px rgba(46,122,147,.7); }
.rc2-ribbon { position: absolute; top: 58px; width: 120px; height: 34px; background: var(--accent-soft); }
.rc2-ribbon.r { right: calc(50% + 40px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
.rc2-ribbon.l { left: calc(50% + 40px); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
.rc2-badge-t { text-align: center; font-size: 15px; color: var(--ink-2); }
.rc2-badge-t b { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
.rc2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.rc2-tabs button { height: 38px; border-radius: 12px; font-size: 13px; color: var(--ink-2); }
.rc2-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 2px 6px rgba(20,23,25,.08); }
.rc2-names { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.rc2-name { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; font-size: 13.5px; text-align: start; }
.rc2-name:hover { background: var(--surface-2); }
.rc2-name span { flex: 1; }
.rc2-name small { font-size: 11px; color: var(--muted); }
.rc2-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 999px; background: #1a3640; color: #fff; font-size: 15.5px; font-weight: 700; }
.rc2-start:hover { background: #152c33; }
.rc2-start .kbd { background: rgba(255,255,255,.14); color: #fff; border: 0; }
.rc2-name span.avatar { flex: none; }
.rc2-seal .brand-mark { width: 86px; height: 86px; }
/* while the roll call is open, toasts move to the other side so they never cover it */
body:has(.rollcall) .toasts { left: auto; right: 24px; transform: none; }
[dir="rtl"] body:has(.rollcall) .toasts, html[dir="rtl"] body:has(.rollcall) .toasts { right: 24px; left: auto; }
/* daily recitations: value pill on hover (today's shown by default) */
.bp-col .bp-tip { opacity: 0; transition: opacity .12s; pointer-events: none; }
.bp-col .bp-tip.on { opacity: 1; }
svg:hover .bp-col .bp-tip.on { opacity: 0; }
svg .bp-col:hover .bp-tip, svg .bp-col:hover .bp-tip.on { opacity: 1; }
.bp-col .bp-bar { transition: filter .12s; }
.bp-col:hover .bp-bar { filter: brightness(1.15); }
.bp-col .bp-none { font-size: 11px; fill: var(--muted); }
.lc.lt .hv .prev-dot { fill: #b6d3dd; stroke: var(--surface); stroke-width: 2; }
.lc.lt text { font-size: 12px; }
/* Review 14: attendance + results cards share one height; smooth dashed previous period */
.home-att, .home-dn { display: flex; flex-direction: column; }
.home-dn .dn-wrap { flex: 1; align-content: center; }
.home-att .lc-legend { padding-top: 8px; }
.home-att .lc-note { margin-top: 2px; }
.lc.lt .prev { stroke: #a9b0b5; stroke-width: 2.2; stroke-dasharray: 6 7; }
.lc.lt .cur { stroke-width: 3; }
.lc.lt .prev-dot { fill: #a9b0b5; }
.lc-legend i.prev { border-color: #a9b0b5; border-style: dashed; }

/* ===================== Review 15: circle students as cards ===================== */
.stc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.stc { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .15s, transform .15s; }
.stc:hover { box-shadow: 0 16px 28px -22px rgba(20,23,25,.5); transform: translateY(-2px); }
.stc-top { display: flex; justify-content: space-between; align-items: center; }
.stc-st { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.stc-st.ok { background: #eef8d2; color: #4f6b10; } .stc-st.bad { background: var(--bad-soft); color: var(--bad); }
.stc-st.accent, .stc-st.info { background: var(--accent-soft); color: var(--accent-ink); }
.stc-more { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.stc-more:hover { background: var(--surface-2); color: var(--ink); }
.stc-who { display: flex; align-items: center; gap: 12px; }
.stc-who .avatar.lg { width: 52px; height: 52px; font-size: 18px; flex: none; }
.stc-who b { display: block; font-size: 15px; }
.stc-who span:not(.avatar) { font-size: 12px; color: var(--accent-ink); }
.stc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stc-cols span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.stc-cols b { font-size: 12.5px; font-weight: 600; }
.stc-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.stc-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.stc-line b { font-size: 12px; min-width: 34px; text-align: end; }
.stc-bar { width: 70px; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.stc-bar span { display: block; height: 100%; background: var(--accent); }
.stc-bar span.low { background: var(--bad); }
.stc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.stc-btns .btn { justify-content: center; height: 38px; }
.stc-btns .btn-soft { background: var(--accent-soft); color: var(--accent-ink); }
.stc.preliminary { border-style: dashed; }
.stc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1250px) { .stc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 950px) { .stc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================== Review 16: «حلقاتي» tall coloured cards ===================== */
.gx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.gx { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 28px; color: #fff; box-shadow: 0 22px 40px -28px rgba(20,23,25,.8); }
.gx.ink { background: linear-gradient(160deg, #343e45 0%, #1a3640 45%, #22292e 100%); }
.gx.brand { background: linear-gradient(160deg, #3a8aa5 0%, #2e7a93 45%, #286b82 100%); }
.gx.lime { background: linear-gradient(160deg, #7b858a 0%, #6b7479 45%, #5d666b 100%); }
.gx-star { position: absolute; z-index: -1; width: 230px; height: 230px; left: -70px; top: -70px; background: url("../assets/star-white.svg") center / contain no-repeat; opacity: .12; transform: rotate(12deg); }
.gx-head { display: flex; align-items: center; gap: 12px; }
.gx-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.gx-head h2 { font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.gx-head h2 a { color: inherit; }
.gx-head span { font-size: 12px; opacity: .75; }
.gx-more { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; flex: none; }
.gx-lab { font-size: 12px; opacity: .72; }
.gx-hero { display: flex; flex-direction: column; gap: 4px; }
.gx-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gx-big b { font-family: var(--f-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.gx-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--brand-lime); color: var(--on-lime); font-size: 12px; font-weight: 700; }
.gx-mem { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.1); font-size: 13px; }
.gx-mem b { font-family: var(--f-display); font-size: 16px; }
.gx-line { height: 8px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; }
.gx-line span { display: block; height: 100%; border-radius: 6px; background: var(--brand-lime); box-shadow: 0 0 10px rgba(177,235,81,.5); }
.gx-funnel { display: flex; flex-direction: column; gap: 10px; }
.gx-seg { display: flex; gap: 5px; height: 26px; }
.gx-seg span { border-radius: 9px; min-width: 10px; }
.gx-seg .a { background: var(--surface); } .gx-seg .b { background: rgba(255,255,255,.42); } .gx-seg .c { background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 5px, rgba(255,255,255,.06) 5px 10px); border: 1px dashed rgba(255,255,255,.35); }
.gx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; opacity: .92; }
.gx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gx-legend i { width: 10px; height: 10px; border-radius: 3px; }
.gx-legend i.a { background: var(--surface); } .gx-legend i.b { background: rgba(255,255,255,.42); } .gx-legend i.c { border: 1px dashed rgba(255,255,255,.6); }
.gx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gx-tile { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); color: #fff; transition: background .15s; }
.gx-tile:hover { background: rgba(255,255,255,.17); }
.gx-tile-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; opacity: .85; }
.gx-go { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.gx-tile-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.gx-tile-b b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 700; }
.gx-tile-b small { font-size: 10.5px; opacity: .7; }
.gx-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; width: 44px; flex: none; }
.gx-bars i { flex: 1; border-radius: 2px; background: rgba(255,255,255,.28); }
.gx-bars i.on { background: var(--brand-lime); }
.gx-next { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.gx-next .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.gx-ctas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gx-cta { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.gx-cta:hover { background: var(--brand-lime); }
.gx-cta.ghost { background: rgba(255,255,255,.14); color: #fff; }
.gx-cta.ghost:hover { background: rgba(255,255,255,.22); }
.gx-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1200px) { .gx-grid { grid-template-columns: 1fr; } }
.gx-tile-b { flex-direction: column; align-items: stretch; gap: 6px; }
.gx-tile-b small { display: block; white-space: nowrap; }
.gx-bars { width: 100%; height: 26px; gap: 3px; }
/* .brand (logo) clashes with the teal card colour class: keep every row full width */
.gx, .gx.brand { align-items: stretch; text-align: start; min-width: 0; }

/* ===================== Review 17: new students (notice strip + profile cards) ===================== */
.nsn { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: #1a3640; color: #fff; box-shadow: 0 18px 30px -24px rgba(20,23,25,.9); }
.nsn-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--brand-lime); color: var(--on-lime); flex: none; }
.nsn-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsn-text > b { font-size: 15px; }
.nsn-text span { font-size: 12.5px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsn-text span b { color: var(--brand-lime); }
.nsn .avatar { box-shadow: 0 0 0 2px #1a3640; }
.nsn-cta { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 13px; flex: none; }
.nsn-cta:hover { background: var(--brand-lime); }
.nsx-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); }
.nsx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nsx-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); }
.nsx-legend i.full { background: var(--brand-lime); border-color: transparent; } .nsx-legend i.near { background: rgba(177,235,81,.5); border-color: transparent; } .nsx-legend i.plain { background: var(--surface); }
.nsx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1250px) { .nsx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nsx { position: relative; display: flex; flex-direction: column; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 18px 30px -26px rgba(20,23,25,.6); transition: transform .15s; }
.nsx:hover { transform: translateY(-3px); }
.nsx.full { background: var(--brand-lime); border-color: transparent; }
.nsx.near { background: rgba(177,235,81,.5); border-color: transparent; }
.nsx-cover { position: relative; height: 92px; margin: 6px 6px 0; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #2e7a93, #235d71); }
.nsx.full .nsx-cover, .nsx.near .nsx-cover { background: linear-gradient(135deg, #1a3640, #152c33); }
.nsx-pattern { position: absolute; inset: 0; background: url("../assets/star-white.svg") -20px -30px / 120px repeat; opacity: .14; }
.nsx-tag { position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 11.5px; font-weight: 700; }
.nsx-tag i.new { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.nsx-plus { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); }
.nsx-id { display: flex; align-items: flex-end; gap: 10px; padding: 0 16px; margin-top: -46px; position: relative; }
.nsx-av { position: relative; width: 104px; height: 104px; flex: none; display: grid; place-items: center; }
.nsx-av .avatar.xl { width: 84px; height: 84px; font-size: 28px; box-shadow: 0 0 0 4px var(--surface); }
.nsx.full .nsx-av .avatar.xl, .nsx.near .nsx-av .avatar.xl { box-shadow: 0 0 0 4px #fff; }
.nsx-ring { position: absolute; inset: 0; }
.nsx-ring circle { fill: none; stroke-width: 6; }
.nsx-ring .bg { stroke: var(--surface-3); } .nsx-ring .fg { stroke: var(--accent); stroke-linecap: round; }
.nsx.full .nsx-ring .fg, .nsx.near .nsx-ring .fg { stroke: #1a3640; }
.nsx-day { position: absolute; bottom: -2px; inset-inline-end: -2px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #1a3640; color: #fff; }
.nsx-days { flex: 1; display: flex; align-items: center; gap: 6px; padding-bottom: 10px; color: var(--muted); }
.nsx-ticks { display: flex; gap: 2px; flex: 1; }
.nsx-ticks i { flex: 1; height: 10px; border-radius: 2px; background: var(--surface-3); }
.nsx-ticks i.on { background: var(--accent); } .nsx-ticks i.today { background: var(--brand-lime); box-shadow: 0 0 0 1px #b1eb51; }
.nsx.full .nsx-ticks i.on, .nsx.near .nsx-ticks i.on { background: #1a3640; }
.nsx.full .nsx-ticks i, .nsx.near .nsx-ticks i { background: rgba(26,54,64,.15); }
.nsx-body { padding: 12px 18px 4px; }
.nsx-body h3 { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
.nsx-body p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nsx.full .nsx-body p, .nsx.near .nsx-body p { color: rgba(26,54,64,.7); }
.nsx-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 12px 0; border-radius: 18px; background: var(--surface-2); }
.nsx.full .nsx-stats, .nsx.near .nsx-stats { background: rgba(255,255,255,.55); }
.nsx-stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; }
.nsx-stats > div + div { border-inline-start: 1px solid var(--line); }
.nsx-stats b { font-family: var(--f-display); font-size: 19px; }
.nsx-stats span { font-size: 11px; color: var(--muted); }
.nsx.full .nsx-stats span, .nsx.near .nsx-stats span { color: rgba(26,54,64,.7); }
.nsx-foot { display: flex; gap: 8px; padding: 12px; margin-top: auto; }
.nsx-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 999px; background: #1a3640; color: #fff; font-size: 13px; font-weight: 700; }
.nsx-cta.ghost { background: var(--surface-2); color: var(--ink); }
.nsx.full .nsx-cta.ghost, .nsx.near .nsx-cta.ghost { background: rgba(255,255,255,.6); }
.nsx-link { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: none; }
.nsx.full .nsx-link, .nsx.near .nsx-link { background: rgba(255,255,255,.6); }
/* Review 18: finished = brand teal, last day = teal 50% (instead of lime) */
.nsx.full { background: var(--accent); color: #fff; }
.nsx.near { background: rgba(46,122,147,.5); color: #fff; }
.nsx.full .nsx-cover, .nsx.near .nsx-cover { background: linear-gradient(135deg, #1a3640, #152c33); }
.nsx.full .nsx-body p, .nsx.near .nsx-body p, .nsx.full .nsx-stats span, .nsx.near .nsx-stats span, .nsx.full .nsx-days, .nsx.near .nsx-days { color: rgba(255,255,255,.8); }
.nsx.full .nsx-stats, .nsx.near .nsx-stats { background: rgba(255,255,255,.14); }
.nsx.full .nsx-stats > div + div, .nsx.near .nsx-stats > div + div { border-color: rgba(255,255,255,.18); }
.nsx.full .nsx-ticks i, .nsx.near .nsx-ticks i { background: rgba(255,255,255,.22); }
.nsx.full .nsx-ticks i.on, .nsx.near .nsx-ticks i.on { background: var(--surface); }
.nsx.full .nsx-ring .bg, .nsx.near .nsx-ring .bg { stroke: rgba(255,255,255,.25); }
.nsx.full .nsx-ring .fg, .nsx.near .nsx-ring .fg { stroke: #fff; }
.nsx.full .nsx-cta, .nsx.near .nsx-cta { background: var(--surface); color: var(--ink); }
.nsx.full .nsx-link, .nsx.near .nsx-link { background: rgba(255,255,255,.18); color: #fff; }
.nsx-legend i.full { background: var(--accent); } .nsx-legend i.near { background: rgba(46,122,147,.5); }
/* the page title receives programmatic focus for screen readers; no visible ring */
h1[tabindex="-1"]:focus { outline: none; }
.cv-legend i { border-style: solid !important; }
.cv-legend b { font-size: 20px; }
/* new-student avatars: neutral grey inside (not the per-name colour) */
.nsx.plain .nsx-av .avatar.xl { background: #6b7479 !important; color: #fff; }
/* attendance curves: hover shows only the dots + card, no vertical line, nothing by default */
.home-att .lt .vline { display: none; }
.home-att .lt .hv { transition: opacity .1s; }

/* ===================== Review 19: one dropdown/popup design (account-menu style) everywhere ===================== */
.popover { border-radius: 22px; padding: 8px; box-shadow: 0 24px 48px -18px rgba(20,23,25,.32), 0 2px 8px rgba(20,23,25,.06); border: 1px solid var(--line); background: var(--surface); }
.popover .menu-item { height: 44px; border-radius: 12px; font-size: 14.5px; gap: 12px; color: var(--ink); }
.popover .menu-item svg { color: var(--ink-2); flex: none; }
.popover .menu-item.danger, .popover .menu-item.danger svg { color: var(--bad); }
.popover .menu-label { font-size: 12px; padding: 10px 12px 6px; }
.popover .divider { margin: 6px 4px !important; }
.dd-menu { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.dd-menu .menu-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.dd-menu .menu-item.on svg { color: var(--accent-ink); }
.dd { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 13.5px; border: 1px solid transparent; max-width: 100%; }
.dd:hover { background: var(--surface-3); }
.dd .dd-v { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd svg { color: var(--ink-2); flex: none; }
.dd.empty .dd-v { color: var(--muted); }
/* an empty dropdown also carries the global .empty (empty-state) class: keep it a normal one-line field */
.dd.empty { flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; gap: 8px; padding: 0 14px; color: var(--ink); }
.dd[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-soft); }
.dd.block { display: flex; width: 100%; height: 46px; background: var(--surface); border-color: var(--line-2); }
.dd.pill { border-radius: 999px; }

/* ===== Review 20 · recordings: correction switch + mushaf tracking ===== */
.sbm-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background: var(--surface-2,var(--surface-2));border:1px solid var(--line)}
.sbm-switch button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:10px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.sbm-switch button[aria-selected="true"]{background:var(--ink);color: var(--on-ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sbm-switch button[aria-selected="true"] svg{color:var(--brand-lime)}
.sb-mushaf{margin-top:14px;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background: var(--warm-soft);display:flex;flex-direction:column;gap:10px}
.sbm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.sbm-head>span:first-child{display:flex;align-items:center;gap:6px}
.sbm-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:4px 10px;border-radius:99px;background: var(--surface);border:1px solid var(--line)}
.sbm-live i{width:7px;height:7px;border-radius:50%;background: #b7bec2}
.sbm-live.on i{background:var(--accent);animation:sbmPulse 1.2s infinite}
@keyframes sbmPulse{50%{opacity:.3}}
.sbm-text{max-height:300px;overflow:auto;font-size:22px;line-height:2.2;text-align:justify;padding:4px 2px;scroll-behavior:smooth}
.sbm-text .basmala{text-align:center;margin-bottom:4px}
.sbw{border-radius:6px;padding:0 2px;transition:background .2s,color .2s}
.sbw.read{color: #5b8a99}
.sbw.cur{background:rgba(177,235,81,.55);color:var(--ink);box-shadow:0 0 0 2px rgba(177,235,81,.55)}
.sbw.err{background:rgba(220,60,60,.08);text-decoration:underline wavy rgba(220,60,60,.6);text-underline-offset:8px;cursor:help}
.sbw .le,.sbm-word .le{color: #d23b3b}
.ayah-no{font-size:15px;color:var(--accent)}
.sbm-auto{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background: #fbf4f4;border: 1px solid #f1dede}
.sbm-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background: var(--surface)}
.sbm-item.no{opacity:.55}
.sbm-word{font-family:var(--f-quran,inherit);font-size:18px;min-width:58px;text-align:center}

/* ===== Review 21 · remote flow: lobby → join → roll call → pick ===== */
.room-grid.remote.lobby-on{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.room-grid.remote.lobby-on>:nth-child(3){display:none}
.lobby{display:flex;flex-direction:column;gap:14px;padding:22px;overflow:auto}
.lb-head h2{font-size:22px;font-weight:800;margin:8px 0 2px}
.lb-step{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent);background:rgba(46,122,147,.1);padding:4px 10px;border-radius:99px}
.lb-invites{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-inv{display:flex;align-items:center;gap:10px;text-align:start;padding:12px;border-radius:14px;border:1px solid var(--line);background: var(--surface);font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.lb-inv:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(46,122,147,.12)}
.lb-inv b{display:block;font-size:14px}.lb-inv .xs{color:var(--muted);display:block;line-height:1.5}
.lb-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--brand-lime)}
.lb-inv.used{border-color:rgba(46,122,147,.4);background:rgba(46,122,147,.05)}
.lb-inv.used .lb-ic{background:var(--accent);color: #fff}
.lb-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background: var(--surface-2,var(--surface-2))}
.lb-link code{direction:ltr;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-notice{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--ink);color: var(--on-ink)}
.lb-notice svg{color:var(--brand-lime);flex:none}
.lb-list-h{display:flex;justify-content:space-between;align-items:center}
.lb-bar{height:6px;border-radius:99px;background: var(--surface-2,var(--bg));overflow:hidden}
.lb-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.lb-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lb-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;border:1px solid var(--line)}
.lb-row .avatar{flex:none}
.lb-st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.lb-row.in{background:rgba(177,235,81,.16);border-color:rgba(177,235,81,.35)}.lb-row.in .lb-st{color: #1a3640;font-weight:700}
.lb-row.late .lb-st{color: #a86a00}.lb-row.out .lb-st,.lb-row.fail .lb-st{color: #c53b3b}
.lb-row.wait .lb-st svg{animation:sbmPulse 1.2s infinite}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pk-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 12px;border-radius:16px;border:1px solid var(--line);background: var(--surface);font:inherit;cursor:pointer;text-align:center}
.pk-tile:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(46,122,147,.14)}
.pk-tile.sug{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pk-sug{position:absolute;top:-9px;inset-inline-start:12px;font-size:10.5px;font-weight:700;background:var(--brand-lime);color:var(--on-lime);padding:2px 8px;border-radius:99px}
.pk-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;align-items:center}
.lb-st .dot{width:6px;height:6px;border-radius:50%;background: #b7bec2}.lb-st.in .dot{background: #7fb51b}
.rc2-end{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc2-start.ghost{background: var(--surface);color:var(--ink);border:1px solid var(--line)}
.rc2-start.ghost:hover{background: var(--surface-2)}

.room-center.lobby{align-items:stretch;justify-content:flex-start;text-align:start}
.room-center.lobby>*{width:auto;max-width:none}


/* ===== Review 22 · teaching library: richer cards + reader ===== */
.lib-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;transition:box-shadow .18s,transform .18s}
.lib-card:hover{box-shadow:0 10px 28px rgba(26,54,64,.1);transform:translateY(-2px)}
.lib-card h3{font-size:17px;margin:4px 0 0}
.lib-sum{line-height:1.8;margin:0}
.lib-tags{display:flex;flex-wrap:wrap;gap:6px}
.lib-tags span{font-size:11.5px;padding:3px 9px;border-radius:99px;background: var(--surface-2,var(--surface-2));color:var(--muted)}
.lib-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.lib-foot .xs{display:inline-flex;align-items:center;gap:4px}
.lib-open{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--accent)}
.lib-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.lib-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
.lib-toc nav{display:flex;flex-direction:column;gap:2px}
.lib-toc nav a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:inherit;text-decoration:none;font-size:13.5px}
.lib-toc nav a:hover{background: var(--surface-2,var(--surface-2))}
.lib-toc nav .num,.lib-article h2 .num{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--ink);color:var(--brand-lime);font-size:12px}
.lib-article{display:flex;flex-direction:column;gap:26px;padding:28px 32px}
.lib-article section{scroll-margin-top:16px;display:flex;flex-direction:column;gap:12px}
.lib-article h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;margin:0}
.lib-article p{line-height:2;margin:0;font-size:15px}
.lib-ayah{margin:0;padding:16px 20px;border-radius:14px;background: var(--warm-soft);border: 1px solid var(--warm-line);text-align:center}
.lib-ayah blockquote{margin:0;font-family:var(--f-quran,inherit);font-size:23px;line-height:2}
.lib-ayah figcaption{font-size:12px;color:var(--accent);margin-top:4px}
.lib-list,.lib-steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;line-height:1.9;font-size:15px}
.lib-list li::marker{color:var(--accent)}
.lib-steps li::marker{font-weight:800;color:var(--accent)}
.lib-tracks{display:flex;flex-direction:column;gap:8px}
.lib-track{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background: var(--surface);font:inherit;cursor:pointer;text-align:start}
.lib-track:hover{border-color:var(--accent)}
.lt-ic{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color: var(--on-ink)}
.lib-track.on{border-color:var(--accent);background:rgba(46,122,147,.05)}.lib-track.on .lt-ic{background:var(--accent)}
.lib-note{display:flex;align-items:center;gap:6px;padding-top:12px;border-top:1px dashed var(--line)}
.lib-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lib-navc{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.lib-navc.nx{text-align:end}
.lib-navc:hover{box-shadow:0 8px 22px rgba(26,54,64,.08)}
@media (max-width:900px){.lib-layout{grid-template-columns:1fr}.lib-toc{position:static}.lib-article{padding:20px}}

.lib-list{list-style:disc}.lib-steps{list-style:arabic-indic}
.lib-list li,.lib-steps li{display:list-item}


/* ===== Review 23 · library: all surahs by seventh, surah/page filters ===== */
.lib-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start;font:inherit;cursor:pointer;border:1px solid var(--line);transition:box-shadow .18s,transform .18s}
.lib-col:hover{box-shadow:0 10px 28px rgba(26,54,64,.1);transform:translateY(-2px)}
.lib-col-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--ink);color:var(--brand-lime);margin-bottom:4px}
.lib-col-t{font-size:19px;font-weight:800}
.lib-col-n{font-size:13px;padding:6px 10px;border-radius:10px;background: var(--surface-2,var(--surface-2))}
.lib-col-done{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color: #1a3640}
.lib-col .lib-open{margin-top:auto}
.lib-h2{font-size:18px;font-weight:800;margin:10px 0 0}
.lib-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:14px 16px}
.lib-filters .field{min-width:200px;margin:0}.lib-filters .field.grow{flex:1}
.lib-filters .dd-off{opacity:.55;pointer-events:none}
.lib-reset{margin-inline-start:auto}
.lib-sev{display:flex;flex-direction:column;gap:10px}
.lib-sev-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lib-sev-h h2{font-size:18px;font-weight:800;margin:0}
.lib-surahs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lib-surah{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background: var(--surface);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.lib-surah:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(46,122,147,.12)}
.lib-surah b{display:block;font-size:15px}
.ls-n{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background: var(--surface-2,var(--surface-2));font-size:13px;font-weight:700}
.ls-n.big{width:54px;height:54px;border-radius:16px;font-size:19px;background:var(--ink);color:var(--brand-lime)}
.lib-surah.full .ls-n{background:var(--ink);color:var(--brand-lime)}
.ls-st{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;border: 1.5px dashed var(--line-2)}
.lib-surah.full .ls-st{border:0;background:var(--brand-lime);color:var(--on-lime)}
.lib-shead{display:flex;flex-direction:column;gap:12px}
.lib-shead h2{font-size:24px;font-weight:800;margin:0}
.lib-note2{margin:0;line-height:1.9;padding:12px 14px;border-radius:12px;background: var(--warm-soft);border: 1px solid var(--warm-line)}
.lib-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lib-pages.one{grid-template-columns:1fr}
.lib-pages.one .lib-page{padding:24px 28px}.lib-pages.one .lib-page p{font-size:16.5px}
.lib-page{display:flex;flex-direction:column;gap:10px}
.lib-page header{display:flex;align-items:center;gap:10px}
.lp-n{font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--ink);color: var(--on-ink)}
.lp-n b{color:var(--brand-lime)}
.lp-open{margin-inline-start:auto;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background: var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.lp-open:hover{color:var(--accent);border-color:var(--accent)}
.lib-page p{margin:0;line-height:1.95;font-size:14.5px}
.lib-key{font-weight:600}
.lib-hidaya{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(177,235,81,.18)}
.lib-hidaya svg{flex:none;margin-top:5px;color: #1a3640}
.lib-empty{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px!important}
.lib-navc{font:inherit;cursor:pointer;text-align:start;border:1px solid var(--line)}

/* ===== Review 24 · detailed surah key + per-ayah meanings ===== */
.lib-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.lib-facts>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background: var(--surface-2,var(--surface-2))}
.lib-facts b{font-size:15px}
.lib-pages.embedded{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.lib-pages.embedded .lib-page{box-shadow:none;border:1px solid var(--line)}
.lib-mpages{display:flex;flex-direction:column;gap:14px}
.lib-mpage{display:flex;flex-direction:column;gap:14px}
.lib-mpage header{display:flex;align-items:center;gap:10px}
.lib-overall{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background: var(--warm-soft);border: 1px solid var(--warm-line)}
.lib-overall p{margin:0;line-height:1.95}
.lib-ayat{display:flex;flex-direction:column}
.lib-ayah-row{position:relative;display:flex;gap:12px;padding:14px 4px;border-top:1px dashed var(--line)}
.lib-ayah-row:first-child{border-top:0}
.lib-ayah-row .grow{display:flex;flex-direction:column;gap:6px;padding-inline-end:34px}
.lib-ayah-row p{margin:0;line-height:1.95}
.la-n{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700}
.la-text{font-family:var(--f-quran,inherit);font-size:21px;line-height:2!important}
.la-text.muted-t{font-family:inherit;font-size:12.5px;color:var(--muted)}
.la-m{font-size:14.5px}
.la-open{position:absolute;inset-inline-end:2px;top:14px;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background: var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.la-open:hover{color:var(--accent);border-color:var(--accent)}
.lib-ayah-row.big{border:0;padding:6px 0}
.lib-ayah-row.big .la-n{width:44px;height:44px;font-size:16px}
.lib-ayah-row.big .la-text{font-size:26px}
.lib-ayah-row.big .la-m{font-size:16.5px}

/* Review 25 · page/ayah number circles in brand green, number only */
.lp-n{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;background:var(--accent);color: #fff;font-size:15px;font-weight:800}


/* ===== Review 26 · send a recitation to students ===== */
.lib-send-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.lib-send-row .xs{display:inline-flex;align-items:center;gap:5px}
.ls-step{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.chip-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background: var(--surface);font:inherit;font-size:12.5px;cursor:pointer}
.chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.chip-btn.ghost{border-style:dashed;color:var(--muted)}
.ls-students{display:flex;flex-direction:column;gap:12px;max-height:280px;overflow:auto;padding:2px}
.ls-g{display:flex;flex-direction:column;gap:6px}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.lsx{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background: var(--surface);font:inherit;text-align:start;cursor:pointer}
.lsx .avatar{flex:none}
.lsx:hover{border-color:var(--accent)}
.lsx.on{border-color:var(--accent);background:rgba(46,122,147,.06)}
.ls-check{width:20px;height:20px;flex:none;border-radius:6px;border: 1.5px solid var(--line-2);display:grid;place-items:center;color: #fff}
.lsx.on .ls-check{background:var(--accent);border-color:var(--accent)}

.modal .ls-students{flex:0 0 auto;height:auto;max-height:260px}
.modal-body>.options,.modal-body>.ls-step,.modal-body>.row{flex:0 0 auto}


.ls-students>.ls-g{flex:0 0 auto}.lsx{min-height:54px}


/* Re-rendered modals/drawers stay still (no replayed open animation) */
#layer .steady{animation:none!important}


/* ===== Review 27 · send-recitation popup rebuilt (sr-*) ===== */
.modal:has(.sr){width:min(940px,calc(100vw - 32px));height:min(88vh,860px);display:flex;flex-direction:column}
.modal:has(.sr) .modal-body{flex:1 1 auto;min-height:0;overflow:auto;display:block}
.sr{display:block}
.sr-sec{display:block;padding:16px 0;border-top:1px solid var(--line)}
.sr-sec:first-child{border-top:0;padding-top:4px}
.sr-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sr-h>b{font-size:15px;margin-inline-end:auto}
.sr-count{font-size:12px;color:var(--muted);padding:3px 10px;border-radius:99px;background: var(--surface-2,var(--surface-2))}
.sr-count.on{background:var(--accent);color: #fff;font-weight:700}
.sr-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background: var(--surface);font:inherit;font-size:12.5px;cursor:pointer}
.sr-chip:hover{border-color:var(--accent);color:var(--accent)}
.sr-chip.ghost{border-style:dashed;color:var(--muted)}
.sr-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sr-search{position:relative;flex:1 1 220px}
.sr-search svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sr-search .input{padding-inline-start:36px;height:42px}
.sr-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background: var(--surface-2,var(--surface-2));flex-wrap:wrap}
.sr-seg-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:9px;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.sr-seg-b[aria-checked="true"]{background: var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sr-list{display:block;height:300px;overflow:auto;padding:2px 4px 2px 2px;border:1px solid var(--line);border-radius:14px;background: var(--surface-2,#f7f8f9)}
.sr-group{display:block;padding:12px}
.sr-group+.sr-group{border-top:1px dashed var(--line)}
.sr-group-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px}
.sr-group-h span{color:var(--muted);font-size:12px}
.sr-link{margin-inline-start:auto;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent);cursor:pointer}
.sr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sr-card{display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background: var(--surface);font:inherit;text-align:start;cursor:pointer;transition:border-color .12s,background .12s;min-width:0}
.sr-card:hover{border-color:var(--accent)}
.sr-card.on{border-color:var(--accent);background:rgba(46,122,147,.07)}
.sr-card .avatar{flex:none}
.sr-card-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.sr-card-t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-card-t small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-box{width:20px;height:20px;flex:none;border-radius:6px;border: 1.5px solid var(--line-2);display:grid;place-items:center;color: #fff}
.sr-card.on .sr-box{background:var(--accent);border-color:var(--accent)}
.sr-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.sr-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sr-reason{display:flex;align-items:center;gap:10px;height:64px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background: var(--surface);font:inherit;text-align:start;cursor:pointer}
.sr-reason b{display:block;font-size:14px}.sr-reason small{display:block;font-size:11.5px;color:var(--muted)}
.sr-reason:hover{border-color:var(--accent)}
.sr-reason[aria-checked="true"]{border-color:var(--accent);background:rgba(46,122,147,.07)}
.sr-dot{width:18px;height:18px;flex:none;border-radius:50%;border: 1.5px solid var(--line-2)}
.sr-reason[aria-checked="true"] .sr-dot{border:5px solid var(--accent)}
.sr-when{display:flex;align-items:flex-end;gap:12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(46,122,147,.06);border:1px solid rgba(46,122,147,.25);animation:srIn .18s ease}
.sr-when .field{margin:0}.sr-when .input{height:40px}
.sr-when-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent);color: #fff;align-self:center}
#layer .steady .sr-when{animation:none}
@keyframes srIn{from{opacity:0;transform:translateY(-4px)}}
@media (max-width:720px){.sr-grid,.sr-reasons{grid-template-columns:1fr 1fr}}

/* ===== Official Moeen logo (quill + «مَعين»); the rest of the design is unchanged ===== */
.brand-logo { flex-direction: column; align-items: flex-start; gap: 2px; }
.bl-img { width: 78px; height: auto; flex: none; display: block; }
.bl-white { display: none; }
:root[data-theme="dark"] .bl-teal { display: none; }
:root[data-theme="dark"] .bl-white { display: block; }
.brand-logo .brand-text span:first-child { font-family: var(--f-ui); font-size: 11px; font-weight: 500; color: var(--muted); }
.app.rail-min .brand-logo .bl-img { width: 52px; }

.brand-logo { flex-direction: row; align-items: center; gap: 8px; }
.bl-img { width: 60px; }
.brand-logo .brand-text span:first-child { font-size: 11px; }
.app.rail-min .brand-logo .bl-img { width: 50px; }


/* Full logo lockup at the top of the sidebar (medium size); quill mark only when collapsed */
.brand-logo { flex: 1; min-width: 0; }
.bl-full { display: block; width: 100%; max-width: 176px; height: auto; }
.bl-full.bl-white { display: none; }
:root[data-theme="dark"] .bl-full.bl-teal { display: none; }
:root[data-theme="dark"] .bl-full.bl-white { display: block; }
.rail-top { align-items: center; gap: 8px; }
/* Switch between the full logo and the quill mark */
.brand-logo .bl-img { display: none !important; }
.app.rail-min .brand-logo .bl-full { display: none !important; }
.app.rail-min .brand-logo .bl-img.bl-teal { display: block !important; }
:root[data-theme="dark"] .app.rail-min .brand-logo .bl-img.bl-teal { display: none !important; }
:root[data-theme="dark"] .app.rail-min .brand-logo .bl-img.bl-white { display: block !important; }
@media (max-width: 860px) {
  .app .brand-logo .bl-full { display: none !important; }
  .app .brand-logo .bl-img.bl-teal { display: block !important; width: 50px; }
  :root[data-theme="dark"] .app .brand-logo .bl-img.bl-teal { display: none !important; }
  :root[data-theme="dark"] .app .brand-logo .bl-img.bl-white { display: block !important; width: 50px; }
}

/* ===== Home customisation (top-bar button + side panel of switches) ===== */
.home-cust-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.home-cust-btn:hover { border-color: var(--accent); color: var(--accent); }
.hcb-n { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: #fff; }
@media (max-width: 1100px) { .home-cust-btn span:not(.hcb-n) { display: none; } .home-cust-btn { padding: 0 12px; } }
.hc-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hc-preset { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; color: var(--ink); }
.hc-preset:hover { border-color: var(--accent); }
.hc-preset svg { flex: none; color: var(--accent); }
.hc-preset b { display: block; font-size: 13.5px; } .hc-preset small { display: block; font-size: 11.5px; color: var(--muted); }
.hc-count { margin: 14px 0 8px; font-size: 12.5px; color: var(--muted); }
/* Same system as the notification settings: white card, light stroke, outline icon beside the title, grey switch → teal when on */
.hc-list { display: flex; flex-direction: column; gap: 10px; }
.hc-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic t sw" "d d sw"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.hc-item:hover { border-color: var(--line-2); box-shadow: 0 6px 16px -12px rgba(20,23,25,.3); }
.hc-ic { grid-area: ic; display: grid; place-items: center; color: var(--accent); }
.hc-ic svg { width: 21px; height: 21px; }
.hc-t { display: contents; }
.hc-t b { grid-area: t; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hc-t small { grid-area: d; font-size: 12px; color: var(--muted); }
.hc-sw { grid-area: sw; width: 46px; height: 26px; flex: none; border-radius: 99px; background: #e6e8e9; position: relative; transition: background .2s; margin-inline-start: 8px; }
.hc-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: inset-inline-start .2s; }
.hc-item.on .hc-sw { background: var(--accent); }
.hc-item.on .hc-sw i { inset-inline-start: 23px; }
.hc-item:not(.on) .hc-ic { color: var(--muted); }
.hc-item:not(.on) .hc-t b { color: var(--ink-2, var(--ink)); }
.home-empty { padding: 40px 20px; }

/* ===== Collapsed sidebar: content fills the freed space; no scrollbar line; green selected circle ===== */
/* Content always stretches with the window (wide screens, browser zoom-out) */
.view-inner, .room, .app.rail-min .view-inner, .app.rail-min .room { max-width: none; }
.rail-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.rail-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Selected item keeps the same dark colour as in the open sidebar */
.app.rail-min .nav-item[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.app.rail-min .nav-item[aria-current="page"] .ico-wrap { background: var(--ink); color: var(--on-ink); }
/* Moderate breathing space between the collapsed sidebar and the page (top bar + content) */
.app.rail-min .main { padding-inline-start: 22px; }
.app.rail-min .nav-item[aria-current="page"]::after { display: none; }

/* Collapsed sidebar: a little air between the icon circles */
.app.rail-min .rail-scroll { gap: 8px; }


/* Recordings: show the whole mushaf page (no inner scroll), so every tracked word and error is visible */
.sbm-text { max-height: none; overflow: visible; }


/* ===== Recordings: one screen, no page scroll (listen + mushaf + grading side by side) ===== */
.rec-player.rp-compact { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.rp-compact .rp-play { width: 50px; height: 50px; box-shadow: 0 0 0 5px rgba(46,122,147,.22); }
.rp-compact .rp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-compact .rp-wave { height: 38px; }
.rp-compact .rp-foot { flex-wrap: wrap; gap: 6px 12px; justify-content: flex-start; font-size: 12px; }
.rp-compact .rp-time { min-width: 92px; }
.rp-compact .rp-btn { height: 26px; min-width: 30px; font-size: 12px; }
.rp-compact .rp-listened { opacity: .8; }
.rp-compact .rp-tag { height: 22px; font-size: 11px; margin-inline-start: auto; }
.sb-top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.sb-top .person { min-width: 0; }
.sb-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.sb-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.sbm-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1181px) and (min-height: 640px) {
  .view:has(.rec-fit) { overflow: hidden; display: flex; flex-direction: column; }
  .rec-fit { flex: 1; min-height: 0; width: 100%; gap: 12px; }
  .rec-fit .page-head { margin: 0; }
  .rec-fit .page-head h1 { font-size: 26px; }
  .rec-fit .page-head .lead, .rec-fit .page-head p { margin-top: 2px; font-size: 13px; }
  .rec-fit .sb-wrap { flex: 1; min-height: 0; grid-template-columns: 280px minmax(0, 1fr) 330px; gap: 14px; align-items: stretch; }
  .rec-fit .sb-wrap > .card { height: auto; min-height: 0; overflow: hidden; }
  .rec-fit .sb-list { display: flex; flex-direction: column; }
  .rec-fit .sb-items { flex: 1; min-height: 0; overflow-y: auto; }
  .rec-fit .sb-detail { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
  .rec-fit .sb-mushaf { flex: 1; min-height: 0; margin-top: 0; padding: 10px 14px; gap: 6px; }
  .rec-fit .sbm-text { flex: 1; min-height: 0; max-height: none; overflow: hidden; line-height: 2.05; padding: 0 2px; }
  .rec-fit .sbm-text .basmala { margin-bottom: 0; }
  /* Grading: compact; if the screen is short, only this panel scrolls and its buttons stay visible */
  .rec-fit .sb-decide { overflow-y: auto; gap: 10px; padding: 14px 16px 0; scrollbar-width: thin; }
  .rec-fit .sb-decide .card-title { font-size: 16px !important; }
  .rec-fit .sb-errs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
  .rec-fit .sb-err { gap: 4px; padding: 5px 6px 5px 8px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
  .rec-fit .sb-err .small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .rec-fit .sb-err .rp-btn { height: 24px; min-width: 24px; padding: 0 4px; }
  .rec-fit .sb-err b { min-width: 14px; font-size: 13px; }
  .rec-fit .sb-decide .seg2 button { padding-block: 8px; }
  .rec-fit .sb-decide .field { margin: 0; }
  .rec-fit #sb-note { min-height: 48px !important; height: 48px; }
  .rec-fit .tpl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rec-fit .tpl-chips::-webkit-scrollbar { display: none; }
  .rec-fit .tpl-chip { flex: none; }
  .rec-fit .sb-ctas { position: sticky; bottom: 0; margin-top: auto; grid-template-columns: 1fr 1fr; padding: 10px 0 14px; background: var(--surface); box-shadow: 0 -10px 12px -10px rgba(0,0,0,.08); }
  .rec-fit .sb-ctas .btn-lg { height: 46px; font-size: 14px; }
  .rec-fit .sb-decide > p.xs:last-child { display: none; }
}

.rec-player.rp-compact { flex-direction: row; }

.rp-compact .rp-wave { flex: none; height: 38px; }
.sb-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.sb-top .sb-chips { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
.sb-top .sb-chips > * { flex: none; }
.sb-top .avatar { width: 40px; height: 40px; }
.sb-top > .card-link { grid-row: 1; grid-column: 2; }
.rp-compact .rp-time { min-width: 0; }
.rp-compact .rp-listened { display: inline-flex; align-items: center; gap: 3px; }
.rp-compact .rp-foot { flex-wrap: nowrap; gap: 8px; }

.rp-compact .rp-time { white-space: nowrap; }

@media (min-width: 1181px) and (min-height: 640px) {
  .rec-fit .sb-decide > h2 + p { display: none; }
  .rec-fit .sbm-auto { padding: 8px; gap: 5px; }
  .rec-fit .sbm-item { padding: 4px 6px; gap: 6px; }
  .rec-fit .sbm-item .grow .xs { display: none; }
  .rec-fit .sbm-item .sbm-word { font-size: 16px; min-width: 48px; }
  .rec-fit .sbm-item .btn-icon { width: 28px; height: 28px; }
}

@media (min-width: 1181px) and (min-height: 640px) { .rec-fit .sbm-item .grow .xs { display: none !important; } }

@media (min-width: 1181px) and (min-height: 640px) {
  .rec-fit .sb-decide .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rec-fit .sb-decide .field { position: relative; display: flex; flex-direction: column; gap: 6px; }
}
.sb-err-sum { display: flex; flex-direction: column; gap: 6px; }
.sb-err-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-err-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--bad-soft); color: var(--bad); font-size: 12.5px; }
@media (min-width: 1181px) and (min-height: 640px) {
  .rec-fit .sb-decide { grid-column: auto; }
}
@media (min-width: 1181px) and (max-width: 1400px) and (min-height: 640px) {
  .rec-fit .sb-wrap { grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 12px; }
  .rec-fit .sb-detail { padding: 12px 14px; }
  .rec-fit .sb-decide { padding: 12px 12px 0; }
}
@media (min-width: 1181px) and (max-width: 1400px) and (min-height: 640px) {
  .rec-fit .sb-ctas .btn-lg { font-size: 13px; padding: 0 8px; gap: 5px; min-width: 0; }
}

/* ===== Approve popup: direct approval vs approval with review of notes ===== */
.sa-sum { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.sa-row { display: flex; flex-direction: column; gap: 6px; }
.sa-row p { margin: 0; line-height: 1.7; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sa-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; color: var(--ink); }
.sa-opt:hover:not(:disabled) { border-color: var(--accent); }
.sa-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.sa-opt:disabled { opacity: .5; cursor: not-allowed; }
.sa-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.sa-opt.on .sa-ic { background: var(--accent); color: #fff; }
.sa-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-t b { font-size: 15px; } .sa-t small { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sa-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); }
.sa-opt.on .sa-radio { border: 6px solid var(--accent); }
.sa-preview { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }

/* ===== Player: voice-message pill (dark charcoal; brand-teal glow while playing) ===== */
.rec-player.rp-pill-wrap, :root[data-theme="dark"] .rec-player.rp-pill-wrap { background: none; padding: 0; color: inherit; gap: 10px; border-radius: 0; flex-direction: column; }
.rp-pill { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 18px; height: 78px; padding-inline: 11px 26px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, #2d3337 0%, #1c2023 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4), 0 14px 28px -18px rgba(10,14,16,.75); transition: background .5s ease; }
.rp-pill::before { content: ""; position: absolute; z-index: -1; inset: -60% -20% -40%; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(55% 65% at 50% 100%, rgba(46,122,147,.95) 0%, rgba(46,122,147,.35) 45%, rgba(46,122,147,0) 72%),
              radial-gradient(35% 55% at 88% 110%, rgba(93,156,178,.55) 0%, rgba(93,156,178,0) 70%); }
.rp-pill.is-playing { background: linear-gradient(180deg, #1d2f37 0%, #121c21 100%); }
.rp-pill.is-playing::before { opacity: 1; animation: rpGlow 3.6s ease-in-out infinite; }
@keyframes rpGlow { 50% { transform: translateY(6%) scale(1.04); filter: saturate(1.15); } }
/* Raised round play button */
.rp-pill .rp-play { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #f3f5f6;
  background: radial-gradient(circle at 50% 30%, #30373b 0%, #181b1d 70%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.38), 0 0 0 4px rgba(255,255,255,.05), inset 0 1px 1px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease; }
.rp-pill .rp-play:hover { transform: scale(1.04); }
.rp-pill .rp-play:active { transform: scale(.97); }
.rp-pill .rp-play:focus-visible { outline: 2px solid #8cc3d6; outline-offset: 3px; }
.rp-pill .rp-play svg path { fill: currentColor; }
.rp-pill .rp-play svg { stroke-width: 2.6; }
/* Thin bars */
.rp-pill .rp-wave { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 2px; cursor: pointer; }
.rp-pill .rp-wave span { flex: 0 0 2.5px; min-width: 2.5px; border-radius: 3px; background: rgba(255,255,255,.88); transition: background .2s; }
.rp-pill.started .rp-wave span, .rp-pill.is-playing .rp-wave span { background: rgba(255,255,255,.26); }
.rp-pill.started .rp-wave span.on, .rp-pill.is-playing .rp-wave span.on { background: var(--surface); }
.rp-pill.is-playing .rp-wave span.on { box-shadow: 0 0 6px rgba(140,195,214,.55); }
.rp-pill .rp-time { flex: none; min-width: 50px; text-align: end; direction: ltr; font-size: 18px; font-weight: 500; letter-spacing: .3px; color: rgba(255,255,255,.92); }
/* Controls row under the pill */
.rp-pill-wrap .rp-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; font-size: 12.5px; color: var(--ink-2); }
.rp-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.rp-pill-wrap .rp-group .rp-btn { height: 28px; min-width: 44px; padding: 0 10px; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 12.5px; }
.rp-pill-wrap .rp-group .rp-btn:hover { background: var(--surface-3); }
.rp-pill-wrap .rp-group .rp-btn.on { background: var(--ink); color: var(--on-ink); }
.rp-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.rp-meta b { color: var(--ink-2); }
.rp-meta.ghost { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .rp-pill.is-playing::before { animation: none; } }
.rp-pill.is-playing { background: linear-gradient(180deg, #1f4250 0%, #12262e 100%); }
.rp-pill::before {
  background: radial-gradient(70% 85% at 50% 105%, rgba(61,150,180,1) 0%, rgba(46,122,147,.55) 38%, rgba(46,122,147,0) 70%),
              radial-gradient(40% 70% at 90% 115%, rgba(120,190,210,.55) 0%, rgba(93,156,178,0) 70%),
              radial-gradient(35% 60% at 8% 120%, rgba(46,122,147,.5) 0%, rgba(46,122,147,0) 70%); }
/* Approve popup keeps the same size whichever option is picked */
.sa-opt { min-height: 78px; }
.sa-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-preview b { white-space: nowrap; }
/* Breathing room in the middle column: header · audio · mushaf */
.sb-top { row-gap: 14px; }
.sb-top .sb-chips { gap: 8px; }
@media (min-width: 1181px) and (min-height: 640px) {
  .rec-fit .sb-detail { gap: 22px; padding: 20px 20px 16px; }
}

/* Approve popup options: language-picker style */
.sa-opts { gap: 12px; }
.sa-opt { min-height: 84px; padding: 16px 22px; gap: 16px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.sa-opt:hover:not(:disabled) { border-color: rgba(46,122,147,.45); }
.sa-opt.on { border-color: rgba(46,122,147,.5); background: #f6fafb; }
.sa-opt .sa-t b { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.sa-opt.on .sa-t b { color: var(--accent); }
.sa-opt .sa-t small { font-size: 12.5px; color: var(--muted); }
.sa-opt .sa-radio { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #e1e4e6; background: transparent; display: grid; place-items: center; color: #fff; transition: background .15s, border-color .15s; }
.sa-opt.on .sa-radio { border: 0; background: var(--accent); }
.sa-opt.on .sa-radio svg { stroke-width: 2.6; }
:root[data-theme="dark"] .sa-opt { border-color: var(--line); }
:root[data-theme="dark"] .sa-opt.on { background: var(--accent-soft); }

/* Grading buttons: one above the other */
.sb-ctas, .rec-fit .sb-ctas { grid-template-columns: 1fr !important; gap: 8px; }

/* Thicker wave bars */
.rp-pill .rp-wave { gap: 3px; }
.rp-pill .rp-wave span { flex: 0 0 4px; min-width: 4px; border-radius: 4px; }
/* Recordings list: three status tabs in one even row */
.sb-tabs-wrap { padding: 14px 14px 10px; }
.sb-tabs-wrap .pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); flex-wrap: nowrap; }
.sb-tabs-wrap .pill { justify-content: center; gap: 6px; height: 38px; padding: 0 8px; border-radius: 999px; white-space: nowrap; min-width: 0; font-size: 13px; }
.sb-tabs-wrap .pill .count { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; }
@media (min-width: 1181px) and (max-width: 1400px) and (min-height: 640px) {
  .rec-fit .sb-err { gap: 2px; padding: 4px 4px 4px 7px; }
  .rec-fit .sb-err .rp-btn { min-width: 20px; height: 22px; padding: 0 2px; }
  .rec-fit .sb-err b { min-width: 12px; }
  .rec-fit .sb-err .small { font-size: 11.5px; }
  .rec-fit .sb-decide { gap: 8px; }
}

/* ===== Daily recitations: paired bars (past grey · today green · future locked) + peak line ===== */
.pb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: -2px 0 6px; }
.pb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pb-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pb-dot.a { background: #8f979c; } .pb-dot.t { background: var(--surface-3); } .pb-dot.today { background: var(--accent); }
.pb-dash { width: 18px; height: 0; border-top: 2px dashed var(--ink); display: inline-block; }
.pb { --pb-axis: 34px; margin-top: 34px; }
.pb-plot { position: relative; height: var(--pb-h, 240px); }
.pb-gl { position: absolute; inset-inline: 0; height: 0; border-top: 1px dashed var(--line); }
.pb-gl span { position: absolute; inset-inline-start: 0; top: 0; transform: translateY(-50%); padding-inline-end: 6px; background: var(--surface); font-size: 11px; color: var(--muted); }
.pb-peak { position: absolute; inset-inline: var(--pb-axis) 0; height: 0; border-top: 2px dashed var(--ink); z-index: 1; pointer-events: none; }
.pb-peak span { position: absolute; inset-inline-start: 0; bottom: 4px; font-size: 11px; font-weight: 600; color: var(--ink); background: var(--surface); padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.pb-cols { position: absolute; inset: 0; padding-inline-start: var(--pb-axis); display: flex; align-items: flex-end; z-index: 2; }
.pb-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.pb-bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 5px; }
.pb-b { display: block; width: 14px; border-radius: 9px 9px 5px 5px; transition: filter .15s, opacity .15s; }
.pb-col.past .pb-b.t { background: #e3e6e8; } .pb-col.past .pb-b.a { background: #959da2; }
.pb-col.past.is-peak .pb-b.a { background: #6d767b; }
.pb-col.today .pb-b.t { background: rgba(46,122,147,.22); } .pb-col.today .pb-b.a { background: var(--accent); box-shadow: 0 6px 14px -6px rgba(46,122,147,.7); }
.pb-col.future .pb-b.t { background: var(--bg); width: 33px; }
.pb-lock { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pb-col:hover .pb-b, .pb-col:focus-visible .pb-b { filter: brightness(.94); }
.pb-col:focus-visible .pb-bars { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.pb-labels { display: flex; padding-inline-start: var(--pb-axis); margin-top: 10px; }
.pb-lab { flex: 1; text-align: center; font-size: 12.5px; color: var(--muted); }
.pb-lab.today { color: var(--accent); font-weight: 700; }
.pb-lab.future { color: #b3b9bd; }
.pb-tip { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; gap: 5px; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -10px rgba(20,23,25,.25); font-size: 12px; color: var(--ink-2); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.pb-tip > b { font-size: 12.5px; color: var(--ink); }
.pb-tip span { display: flex; align-items: center; gap: 6px; }
.pb-tip span b { margin-inline-start: auto; color: var(--ink); }
.pb-tip .pb-dot.a { background: #8f979c; }
.pb-col.today .pb-tip .pb-dot.a { background: var(--accent); }
.pb-col.today .pb-tip .pb-dot.t { background: rgba(46,122,147,.3); }
.pb-tip-lock { color: var(--muted); }
.pb-tip.edge-s { left: auto; right: 0; transform: none; }
.pb-tip.edge-e { left: 0; transform: none; }
.pb-col.today .pb-tip, .pb-col:hover .pb-tip, .pb-col:focus-visible .pb-tip { opacity: 1; visibility: visible; }
.pb-cols:hover .pb-col.today:not(:hover) .pb-tip { opacity: 0; visibility: hidden; }
/* Daily bars v2: long = all approved (dark grey · green today), short = «متقن» */
.pb-dot.a { background: #2d4f5a; } .pb-dot.t { background: #8f979c; }
.pb-col.past .pb-b.a { background: #2d4f5a; } .pb-col.past .pb-b.t { background: #8f979c; }
.pb-col.past.is-peak .pb-b.a { background: #1a3640; }
.pb-col.today .pb-b.a { background: var(--accent); box-shadow: 0 6px 14px -6px rgba(46,122,147,.7); }
.pb-col.today .pb-b.t { background: #8cc3d6; box-shadow: none; }
.pb-col.future .pb-b.ph { background: var(--bg); width: 33px; }
.pb-tip .pb-dot.a { background: #2d4f5a; } .pb-tip .pb-dot.t { background: #8f979c; }
.pb-col.today .pb-tip .pb-dot.a { background: var(--accent); } .pb-col.today .pb-tip .pb-dot.t { background: #8cc3d6; }
.pb-legend span svg { color: var(--muted); }

/* ===== Results card: segmented ring (reference style), compact white card ===== */
.home-res { display: flex; flex-direction: column; gap: 14px; }
.res-head { display: flex; align-items: center; gap: 12px; }
.res-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.res-t { flex: 1; min-width: 0; }
.res-t .card-title { font-size: 18px; } .res-t .card-sub { margin-top: 2px; }
.res-tools { display: flex; align-items: center; gap: 6px; }
.res-tools .dd-btn, .res-tools .dd > button { border-radius: 999px; }
.res-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.res-btn:hover { color: var(--accent); border-color: var(--accent); }
.res-body { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.dseg { position: relative; width: var(--ds); height: var(--ds); flex: none; }
.dseg svg { display: block; overflow: visible; }
.dseg-p { transition: transform .2s ease, filter .2s; transform-origin: 50% 50%; }
.dseg-p:hover { filter: brightness(1.06); transform: scale(1.025); }
.dseg-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--ink); z-index: 2; }
.dseg-call { position: absolute; z-index: 3; transform: translate(10px, -50%); padding: 6px 12px; border-radius: 10px; background: #ecf8c4; color: var(--ink); font-size: 13px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); white-space: nowrap; }
.dseg-call.l { transform: translate(calc(-100% - 10px), -50%); }
.res-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.res-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.res-legend i { width: 14px; height: 14px; flex: none; border-radius: 5px; }
.res-legend i.hatch { background: repeating-linear-gradient(45deg, #8f979c 0 3px, #e6e9eb 3px 6px); }
.res-legend span { flex: 1; min-width: 0; }
.res-legend b { font-size: 13px; color: var(--ink); }
@media (max-width: 1400px) { .res-body { grid-template-columns: 1fr; justify-items: center; } .res-legend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } }
.pb-tip span b { margin-inline-start: auto; }
.pb-rate { font-size: 11px; color: var(--muted); padding: 1px 6px; border-radius: 99px; background: var(--surface-2); }
.res-t .card-title { white-space: nowrap; }
.res-t .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) { .res-body { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; } .res-legend { display: flex; } }
@media (max-width: 1250px) { .res-body { grid-template-columns: 1fr; justify-items: center; } .res-legend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } }

/* Results ring: hover stats per slice; compact legend (number right after its label) */
.dseg-tip { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -10px rgba(20,23,25,.28); font-size: 12px; color: var(--ink-2); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; transform: translate(10px, -50%); }
.dseg-tip.l { transform: translate(calc(-100% - 10px), -50%); }
.dseg-tip > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.dseg-tip > b i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dseg-tip > b i.hatch { background: repeating-linear-gradient(45deg, #8f979c 0 2px, #e6e9eb 2px 4px); }
.dseg-tip span { display: flex; align-items: center; gap: 10px; }
.dseg-tip span b { margin-inline-start: auto; color: var(--ink); }
.dseg-tip-of { color: var(--muted); font-size: 11px; }
.dseg-p { cursor: pointer; outline: none; }
.dseg-p:focus-visible { filter: brightness(1.08); }
.dseg:has(.dseg-p[data-i="0"]:hover) .dseg-tip[data-i="0"], .dseg:has(.dseg-p[data-i="0"]:focus-visible) .dseg-tip[data-i="0"] { opacity: 1; visibility: visible; }
.dseg:has(.dseg-p[data-i="1"]:hover) .dseg-tip[data-i="1"], .dseg:has(.dseg-p[data-i="1"]:focus-visible) .dseg-tip[data-i="1"] { opacity: 1; visibility: visible; }
.dseg:has(.dseg-p[data-i="2"]:hover) .dseg-tip[data-i="2"], .dseg:has(.dseg-p[data-i="2"]:focus-visible) .dseg-tip[data-i="2"] { opacity: 1; visibility: visible; }
.dseg:has(.dseg-p[data-i="3"]:hover) .dseg-tip[data-i="3"], .dseg:has(.dseg-p[data-i="3"]:focus-visible) .dseg-tip[data-i="3"] { opacity: 1; visibility: visible; }
.dseg:has(.dseg-p[data-i="4"]:hover) .dseg-tip[data-i="4"], .dseg:has(.dseg-p[data-i="4"]:focus-visible) .dseg-tip[data-i="4"] { opacity: 1; visibility: visible; }
.dseg:has(.dseg-p[data-i="5"]:hover) .dseg-tip[data-i="5"], .dseg:has(.dseg-p[data-i="5"]:focus-visible) .dseg-tip[data-i="5"] { opacity: 1; visibility: visible; }
.home-res { gap: 10px; }
.res-body { grid-template-columns: auto auto !important; justify-content: center; justify-items: start !important; align-items: center; gap: 22px; }
.res-legend { display: flex !important; flex-direction: column; gap: 10px; width: auto !important; }
.res-legend li { gap: 8px; }
.res-legend span { flex: none; }
.res-legend b { margin-inline-start: 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.res-t { min-width: max-content; }
.res-ico { width: 40px; height: 40px; }
.res-tools { margin-inline-start: auto; }


.res-body { gap: 14px !important; }
.res-legend li { gap: 6px; font-size: 13px; }
.res-legend i { width: 13px; height: 13px; }

/* Tasks radar: fills the card; legend sits at the bottom */
.home-tasks { display: flex; flex-direction: column; }
.home-radar { flex: 1; min-height: 210px; position: relative; padding-top: 4px; }
.home-radar .chart { position: absolute; inset: 4px 0 0; width: 100%; height: calc(100% - 4px); }
/* Attendance trend: same compact type as the daily chart (12px labels, 11px axis, one weight) */
.home-att .att-plot { width: 100%; }
.home-att .att-plot .chart { width: 100%; height: auto; display: block; }
.home-att .lt text { font-size: 11px; }
.home-att .lc-legend { gap: 6px 18px; padding-top: 2px; margin-bottom: 4px; }
.home-att .lc-legend span { font-size: 12px; color: var(--muted); font-weight: 400; }
.home-att .lc-legend b, .home-att .cv-legend b { font-size: 12px; font-weight: 600; font-family: inherit; color: var(--ink); }
.home-att .cmp-chip { font-size: 12px; }
.home-att .cmp-chip b { height: 24px; padding: 0 9px; font-size: 12px; font-weight: 600; font-family: inherit; }
.home-att .lc-note { font-size: 11px; margin-top: 4px; }

/* ===== Compact next-session banner (sbn): info line + today timeline ===== */
.sbn { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 16px; border-radius: 24px; background: linear-gradient(135deg, #1a3640 0%, #17313a 60%, #1d2327 100%); color: #fff; box-shadow: 0 24px 44px -28px rgba(20,23,25,.9); }
.sbn .sbx-star { display: none; }
/* rosette pattern only in two opposite corners; the middle stays clean */
.sbn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../assets/star-white.svg") 0 0 / 70px 70px repeat; opacity: .08;
  -webkit-mask-image: radial-gradient(ellipse 34% 120% at 100% 0%, #000 0%, transparent 100%), radial-gradient(ellipse 30% 110% at 0% 100%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 120% at 100% 0%, #000 0%, transparent 100%), radial-gradient(ellipse 30% 110% at 0% 100%, #000 0%, transparent 100%); }
/* inner corner lights: soft white at top-right, a hint of lime at the opposite corner */
.sbn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 30% 90% at 100% 0%, rgba(255,255,255,.13), transparent 70%), radial-gradient(ellipse 26% 80% at 0% 100%, rgba(177,235,81,.12), transparent 70%); }
.sbn { overflow: hidden; box-shadow: inset 1px 1px 0 rgba(255,255,255,.07), 0 24px 44px -28px rgba(20,23,25,.9); border: 1px solid rgba(255,255,255,.06); }
.sbn.live { background: linear-gradient(135deg, #1f5568 0%, #1a3640 70%); }
.sbn-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
.sbn-row > * { min-width: 0; padding-inline: 20px; }
.sbn-row > :first-child { padding-inline-start: 0; }
.sbn-row > :last-child { padding-inline-end: 0; }
.sbn-row > * + * { border-inline-start: 1px solid rgba(255,255,255,.09); }
.sbn-id, .sbn-cell { display: flex; flex-direction: column; gap: 4px; }
.sbn-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.6); }
.sbn-lab .live-dot { background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(177,235,81,.25); }
.sbn-name { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbn-sub { font-size: 12px; color: rgba(255,255,255,.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbn-clock { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.2; direction: ltr; display: inline-flex; justify-content: flex-end; gap: 1px; }
.sbn-clock i { font-style: normal; color: rgba(255,255,255,.32); padding: 0 2px; }
.sbn-clock .sec { color: var(--brand-lime); }
.sbn.late .sbn-clock { color: #ffb4a8; }
.sbn-ready { display: flex; align-items: center; gap: 12px; }
.sbn-num { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.2; }
.sbn-num small { font-size: 15px; color: rgba(255,255,255,.45); font-weight: 500; }
.sbn .sbx-faces { margin-top: 0; }
.sbn .sbx-faces .avatar { width: 28px; height: 28px; font-size: 11px; }
.sbn-meter { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin: 2px 0 1px; max-width: 220px; }
.sbn-meter i { display: block; height: 100%; border-radius: 4px; background: var(--brand-lime); }
.sbn-act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.sbn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.sbn-cta:hover { background: var(--brand-lime); }
.sbn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 999px; background: none; color: rgba(255,255,255,.7); font-size: 12px; }
.sbn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
/* today timeline */
.sbn-day { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sbn-day-l, .sbn-day-more { flex: none; font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.sbn-day-more { display: inline-flex; align-items: center; gap: 4px; }
.sbn-day-more:hover { color: #fff; }
.sbn-track { position: relative; flex: 1; height: 30px; }
.sbn-track::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(to left, rgba(255,255,255,.14) 0 6px, transparent 6px 11px); }
.sbn-seg { position: absolute; top: 0; height: 30px; min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: #343e44; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.1); transition: transform .15s; }
.sbn-seg:hover { transform: translateY(-1px); }
.sbn-seg b { font-weight: 600; }
.sbn-seg span { color: rgba(255,255,255,.55); font-size: 11px; }
.sbn-seg.closed { background: #2a3135; color: rgba(255,255,255,.5); }
.sbn-seg.next { background: var(--brand-lime); color: var(--on-lime); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(177,235,81,.8); }
.sbn-seg.next span { color: rgba(26,54,64,.7); }
.sbn-seg.live { background: var(--brand-lime); color: var(--on-lime); border-color: transparent; box-shadow: 0 0 0 4px rgba(177,235,81,.22); }
.sbn-seg.live span { color: rgba(26,54,64,.7); }
.sbn-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-inline-start: -1px; background: var(--surface); border-radius: 2px; z-index: 2; pointer-events: none; }
.sbn-now i { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -2px); font-style: normal; font-size: 10.5px; color: var(--ink); background: var(--surface); padding: 0 6px; border-radius: 99px; line-height: 16px; }
.sbn.done .sbn-row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1180px) { .sbn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .sbn-row > :nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .sbn-act { flex-direction: row; } }
/* ===== Seventh journey as files (svf) ===== */
.svf-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; margin-top: 4px; }
.svf { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit; }
.svf-folder, .svf-doc { position: relative; aspect-ratio: 1 / .86; border-radius: 18px; transition: transform .2s ease; }
.svf:hover .svf-folder, .svf:hover .svf-doc { transform: translateY(-3px); }
/* folder: back panel with a tab, two sheets peeking out, front panel */
.svf-folder { background: #e4e9ec; border-radius: 6px 18px 18px 18px; margin-top: 10px; }
.svf-folder::before { content: ""; position: absolute; top: -10px; inset-inline-start: 0; width: 44%; height: 16px; border-radius: 10px 10px 0 0; background: #e4e9ec; }
.svf-sheet { position: absolute; top: 10px; width: 52%; height: 62%; padding: 9px; border-radius: 10px; background: var(--surface); box-shadow: 0 4px 12px -6px rgba(20,23,25,.18); display: flex; flex-direction: column; gap: 6px; transition: transform .25s ease; }
.svf-sheet.s1 { inset-inline-start: 12%; transform: rotate(4deg); z-index: 1; }
.svf-sheet.s2 { inset-inline-start: 34%; transform: rotate(-5deg); }
.svf:hover .svf-sheet.s1 { transform: rotate(7deg) translateY(-6px); }
.svf:hover .svf-sheet.s2 { transform: rotate(-8deg) translateY(-4px); }
.svf-dot { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.svf-dot.b { background: #f0f6dc; color: #6b8a12; }
.svf-line { display: block; height: 5px; width: 80%; border-radius: 4px; background: #eef1f3; }
.svf-line.short { width: 52%; }
.svf-front { position: absolute; inset: 40% 0 0; z-index: 2; border-radius: 14px 14px 18px 18px; background: linear-gradient(180deg, #fbfcfc, #f4f6f7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 -6px 16px -10px rgba(20,23,25,.22), inset 0 1px 0 #fff; display: flex; align-items: flex-end; padding: 10px; }
/* the seventh students are in: a dark brand card (title, chip, progress, value box, footer) */
.svf.on { align-self: stretch; }
.svf-doc { position: relative; overflow: hidden; isolation: isolate; height: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 6px; padding: 13px 13px 11px; margin-top: 0; border-radius: 18px; background: linear-gradient(160deg, #2f3a40 0%, #17313a 70%); color: #fff; box-shadow: 0 18px 32px -20px rgba(20,23,25,.75); }
.svf-doc::after { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; inset-inline-start: -40px; bottom: -46px; background: url("../assets/star-white.svg") center / contain no-repeat; opacity: .05; }
.svf-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.svf-doc-t { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svf-chip { flex: none; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(52,140,166,.28); color: #9fd3e3; direction: ltr; }
.svf-doc-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svf-doc-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 11.5px; color: rgba(255,255,255,.85); }
.svf-plus { color: rgba(255,255,255,.7); display: inline-flex; }
.svf-doc-bar { display: block; height: 5px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.svf-doc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(270deg, #7cc6dc, var(--accent)); }
.svf-doc-of { font-size: 10.5px; color: rgba(255,255,255,.6); direction: ltr; }
.svf-doc-box { margin-top: 4px; }
.svf-doc-box { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 7px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.svf-doc-box b { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1; }
.svf-doc-box small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.6); }
.svf-go { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; font-style: normal; }
.svf:hover .svf-go { background: var(--brand-lime); color: var(--on-lime); }
.svf-doc-foot { display: flex; justify-content: space-between; margin-top: auto; font-size: 10.5px; color: rgba(255,255,255,.5); }
.svf-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.svf.on .svf-n { background: var(--accent); color: #fff; box-shadow: none; }
.svf-cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-inline: 2px; }
.svf-cap b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svf-cap small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.svf-cap small b { font-size: 11.5px; }
@media (max-width: 1280px) { .svf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k4-of { font-size: .82em; font-weight: 500; color: var(--muted); margin-inline-start: 1px; }
/* ===== Header clock (hck): soft digit tiles + countdown bar ===== */
.home-head { align-items: center; }
.hck { display: flex; align-items: center; gap: 0; height: 76px; padding: 0 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.hck > * { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; }
.hck > * + * { border-inline-start: 1px solid var(--line); }
.hck-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.hck.night .hck-when .hck-ic { background: #1a3640; color: #fff; }
.hck-when .hck-ic { background: var(--warm-soft); color: #d99a0b; }
.hck-place > span:last-child, .hck-when > span:last-child { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.hck b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hck small { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: start; }
.hck-place small { align-self: flex-start; }
.hck-time { gap: 4px; direction: ltr; }
.hck-tile { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 5px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 -2px 0 rgba(20,23,25,.05); font-family: var(--f-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.hck-tile.sec { background: var(--accent-soft); color: var(--accent-ink); }
.hck-colon { font-style: normal; font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--muted); animation: hck-blink 1s steps(1) infinite; }
@keyframes hck-blink { 50% { opacity: .25; } }
.hck-cs { align-self: flex-end; width: 26px; margin-inline-start: 2px; padding-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.k4-legend b { direction: ltr; unicode-bidi: isolate; }
/* ===== Banner v3: glass panels, digit tiles, readiness ring, lime CTA, lit day track ===== */
.sbn.v3 { padding: 13px 16px 10px; gap: 10px; }
.sbn.v3 .sbn-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.05fr) auto; gap: 12px; }
.sbn.v3 .sbn-row > * { padding: 0; border: 0; }
.sbn.v3 .sbn-lab { font-size: 11.5px; gap: 5px; color: rgba(255,255,255,.58); }
/* identity */
.sbn.v3 .sbn-id { flex-direction: row; align-items: center; gap: 14px; padding-inline-start: 4px; }
.sbn-badge { position: relative; width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--ink); background: linear-gradient(145deg, #d9f27a, var(--brand-lime)); box-shadow: 0 10px 22px -10px rgba(177,235,81,.75), inset 0 1px 0 rgba(255,255,255,.6); }
.sbn-badge-dot { position: absolute; top: -3px; inset-inline-end: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff6b5a; border: 2px solid #1a3640; }
.sbn-id-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sbn.v3 .sbn-name { font-size: 25px; }
.sbn-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sbn-chips span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.sbn-chips svg { opacity: .7; }
/* glass panels */
.sbn-panel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px !important; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(6px); min-height: 88px; }
.sbn-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sbn-hint { font-size: 10.5px; color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sbn-digits { display: flex; align-items: flex-start; justify-content: center; gap: 6px; direction: ltr; }
.sbn-digits > i { font-style: normal; font-family: var(--f-display); font-size: 20px; color: rgba(255,255,255,.3); line-height: 40px; animation: hck-blink 1s steps(1) infinite; }
.sbn-dg { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sbn-dg b { min-width: 48px; height: 40px; display: grid; place-items: center; padding: 0 6px; border-radius: 11px; font-family: var(--f-display); font-size: 24px; font-weight: 600; color: #fff; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.sbn-dg small { font-size: 9.5px; color: rgba(255,255,255,.42); }
.sbn-dg.sec b { color: var(--on-lime); background: var(--brand-lime); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(177,235,81,.8); }
.sbn.late .sbn-dg b { color: #ffb4a8; }
.sbn.late .sbn-dg.sec b { color: var(--ink); background: #ffb4a8; box-shadow: none; }
/* readiness ring */
.sbn-readyp { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 12px !important; }
.sbn-ring { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.sbn-ring circle { fill: none; stroke-width: 5; }
.sbn-ring .bg { stroke: rgba(255,255,255,.1); }
.sbn-ring .fg { stroke: var(--brand-lime); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(177,235,81,.5)); }
.sbn-ringbox { position: relative; width: 58px; height: 58px; flex: none; }
.sbn-ring-v { position: absolute; inset: 0; display: grid; place-items: center; grid-auto-flow: column; justify-content: center; align-items: center; font-family: var(--f-display); font-size: 17px; font-weight: 600; direction: ltr; }
.sbn-ring-v small { font-size: 10px; color: rgba(255,255,255,.45); font-weight: 500; }
.sbn-ready-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sbn.v3 .sbx-faces .avatar { width: 26px; height: 26px; font-size: 10.5px; border-color: #2a3237; }
.sbn.v3 .sbn-sub { font-size: 11px; }
/* actions */
.sbn.v3 .sbn-act { gap: 8px; padding-inline-end: 2px; }
.sbn.v3 .sbn-cta { height: 48px; padding: 0 8px 0 20px; gap: 10px; background: var(--brand-lime); color: var(--on-lime); font-size: 14.5px; box-shadow: 0 12px 26px -12px rgba(177,235,81,.9), inset 0 1px 0 rgba(255,255,255,.5); }
[dir="rtl"] .sbn.v3 .sbn-cta { padding: 0 8px 0 20px; }
.sbn.v3 .sbn-cta:hover { background: var(--surface); }
.sbn-cta-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1a3640; color: var(--brand-lime); order: -1; }
.sbn.v3 .sbn-ghost { border: 1px solid rgba(255,255,255,.12); height: 32px; }
/* day track: rail lit up to "now", stops as pins */
.sbn.v3 .sbn-day { padding-top: 10px; border-top-color: rgba(255,255,255,.07); }
.sbn.v3 .sbn-day-l { display: inline-flex; align-items: center; gap: 6px; }
.sbn.v3 .sbn-track { height: 30px; }
.sbn.v3 .sbn-track::before { display: none; }
.sbn-rail, .sbn-rail-fill { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; inset-inline-start: 0; }
.sbn-rail { inset-inline-end: 0; background: rgba(255,255,255,.1); }
.sbn-rail-fill { background: linear-gradient(270deg, rgba(177,235,81,.25), var(--brand-lime)); box-shadow: 0 0 10px rgba(177,235,81,.45); }
.sbn-stop { position: absolute; top: 50%; transform: translate(7px, -50%); display: flex; align-items: center; gap: 7px; z-index: 1; color: #fff; }
.sbn-pin { width: 14px; height: 14px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #1a3640; border: 2px solid rgba(255,255,255,.45); color: var(--ink); }
.sbn-stop-t { display: flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(26,54,64,.92); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.sbn-stop-t b { font-size: 11.5px; font-weight: 600; }
.sbn-stop-t small { font-size: 10.5px; color: rgba(255,255,255,.5); }
.sbn-stop.closed .sbn-pin { background: rgba(255,255,255,.7); border-color: transparent; }
.sbn-stop.closed .sbn-stop-t { opacity: .6; }
.sbn-stop.next .sbn-pin, .sbn-stop.live .sbn-pin { width: 16px; height: 16px; background: var(--brand-lime); border-color: #1a3640; box-shadow: 0 0 0 4px rgba(177,235,81,.25); animation: sbn-pulse 1.8s ease-out infinite; }
.sbn-stop.next .sbn-stop-t, .sbn-stop.live .sbn-stop-t { background: var(--brand-lime); color: var(--on-lime); border-color: transparent; }
.sbn-stop.next .sbn-stop-t small, .sbn-stop.live .sbn-stop-t small { color: rgba(26,54,64,.7); }
@keyframes sbn-pulse { 0% { box-shadow: 0 0 0 0 rgba(177,235,81,.55); } 100% { box-shadow: 0 0 0 10px rgba(177,235,81,0); } }
.sbn.v3 .sbn-now { top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.85); }
.sbn.v3 .sbn-now i { transform: translate(-50%, -4px); }
@media (max-width: 1180px) { .sbn.v3 .sbn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== Notification center (ntf) ===== */
.ntf-card { width: 100%; padding: 20px 22px 8px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 8px rgba(46,122,147,.05), 0 20px 40px -30px rgba(20,23,25,.35); }
.ntf-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ntf-card-h h2 { font-size: 18px; font-weight: 600; color: var(--ink); }
.ntf-card-h p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ntf-card-h p b { color: var(--accent); }
.ntf-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); margin-bottom: 4px; }
.ntf-tabs button { height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--muted); transition: background .15s, color .15s; }
.ntf-tabs button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20,23,25,.1); }
.ntf-tabs .num { font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; background: rgba(20,23,25,.06); color: var(--muted); }
.ntf-tabs button.on .num { background: var(--accent-soft); color: var(--accent-ink); }
.ntf-list { display: flex; flex-direction: column; }
.ntf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; width: 100%; padding: 16px 4px; text-align: start; font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 0; transition: background .15s; }
.ntf:last-child { border-bottom: 0; }
.ntf:hover { background: linear-gradient(90deg, transparent, var(--surface-2) 20%, var(--surface-2) 80%, transparent); }
.ntf-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2, var(--ink)); box-shadow: 0 2px 6px -3px rgba(20,23,25,.15); }
.ntf.unread .ntf-ic { color: var(--accent); border-color: rgba(46,122,147,.25); }
.ntf-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.ntf-t { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ntf.unread .ntf-t { font-weight: 600; }
.ntf-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ntf-d { font-size: 13px; line-height: 1.6; color: var(--muted); }
.ntf-d b { color: var(--ink); font-weight: 600; }
.ntf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding-top: 3px; white-space: nowrap; }
.ntf-time { font-size: 12px; color: var(--muted); }
.ntf-lvl { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.ntf-lvl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ntf-lvl.urgent { background: var(--bad-soft); color: var(--bad); }
.ntf-lvl.high { background: var(--warn-soft); color: var(--warn); }
.ntf-lvl.normal { background: var(--accent-soft); color: var(--accent-ink); }
.ntf-lvl.info { background: var(--surface-2); color: var(--muted); }
.ntf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 0; color: var(--muted); font-size: 13px; }
.ntf-panel .ntf-tabs { margin-bottom: 2px; }
.ntf-panel .ntf { padding: 14px 2px; gap: 12px; }
/* ===== Recordings page v2 (rv): mushaf-first stage, explicit correction switch, recorder-style audio ===== */
.rv .rv-wrap { grid-template-columns: 272px minmax(0, 1fr) 316px; gap: 14px; }
/* list tabs: three equal, roomy segments; the count sits beside the label, never on top of it */
.rv .sb-tabs-wrap { padding: 14px 12px 10px; }
.rv .sb-tabs-wrap .pills { gap: 3px; padding: 3px; border-radius: 14px; }
.rv .sb-tabs-wrap .pill { height: 36px; padding: 0 6px; gap: 5px; border-radius: 11px; font-size: 12.5px; overflow: hidden; }
.rv .sb-tabs-wrap .pill .count { flex: none; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; }
.rv .sb-item { padding: 12px 14px; gap: 10px; }
.rv .sb-list, .rv .rv-decide { border-radius: 22px; }
/* stage */
.rv .rv-stage { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 14px !important; border-radius: 22px; }
.rv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who sw"; align-items: center; gap: 8px 14px; }
.rv-who-t b .rv-tag { height: 20px; padding: 0 8px; font-size: 10.5px; font-weight: 600; margin-inline-start: 4px; vertical-align: middle; }
.rv .sbm-head b { color: var(--ink); }
.rv-who { grid-area: who; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-who .avatar { width: 40px; height: 40px; }
.rv-who-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-who-t b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-who-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-who-t a { color: var(--accent); }
.rv-tags { grid-area: tags; display: flex; gap: 6px; flex-wrap: wrap; }
.rv-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--ink-2, var(--ink)); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.rv-tag.strong { font-weight: 600; color: var(--ink); background: var(--surface); }
.rv-tag.strong svg { color: var(--accent); }
.rv-tag.st-new { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.rv-tag.st-approved { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.rv-tag.st-returned { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
/* correction switch with a sliding thumb */
.rv-switch { grid-area: sw; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 330px; }
.rv-thumb { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--ink); box-shadow: 0 6px 14px -8px rgba(20,23,25,.6); transition: inset-inline-start .25s ease; }
.rv-switch[data-on="auto"] .rv-thumb { inset-inline-start: 50%; }
.rv-switch button { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: none; border: 0; font: inherit; color: var(--muted); text-align: start; cursor: pointer; transition: color .2s; }
.rv-switch button span { display: flex; flex-direction: column; line-height: 1.25; }
.rv-switch button b { font-size: 13px; font-weight: 600; }
.rv-switch button small { font-size: 10.5px; opacity: .8; }
.rv-switch button[aria-selected="true"] { color: #fff; }
.rv-switch button[aria-selected="true"] svg { color: var(--brand-lime); }
/* recorder-style audio card */
.rv-audio { padding: 12px 16px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -22px rgba(20,23,25,.4); }
.rv-audio-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rv-audio-t { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .02em; color: var(--muted); }
.rv-rec { width: 7px; height: 7px; border-radius: 50%; background: #e5483b; animation: hck-blink 1s steps(1) infinite; }
.rv-audio-c { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rv-audio-c i { font-style: normal; margin: 0 4px; opacity: .6; }
.rv-audio-row { display: flex; align-items: center; gap: 14px; }
.rv-play { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); border: 0; cursor: pointer; transition: transform .15s, background .15s; }
.rv-play:hover { transform: scale(1.05); }
.rv-audio.is-playing .rv-play { background: #e5483b; }
.rv .rv-wave { position: relative; flex: 1; min-width: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 0; cursor: pointer; }
.rv .rv-wave span { flex: 0 0 3px; min-width: 3px; border-radius: 2px; background: #d6dbde; transition: background .15s; }
.rv .rv-wave span.on { background: #1a3640; }
.rv-headline { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-inline-start: -1px; background: #e5483b; border-radius: 2px; pointer-events: none; transition: inset-inline-start .25s linear; }
.rv-headline::before { content: ""; position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #e5483b; transform: translateX(-50%); }
.rv-ctrl { display: flex; gap: 6px; flex: none; }
.rv-mini { height: 32px; min-width: 40px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rv-mini:hover { border-color: var(--accent); }
/* mushaf takes the rest of the stage */
.rv .sb-mushaf { flex: 1; min-height: 0; margin-top: 0; border-radius: 20px; background: var(--warm-soft); border-color: #eee6d2; padding: 12px 18px; }
/* decision panel */
.rv .rv-decide { gap: 10px; }
.rv-decide-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rv-decide-h .card-title { font-size: 16px !important; margin: 0; }
.rv-step { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: var(--brand-lime); }
.rv .rv-decide > h2 + p, .rv .rv-decide > p.xs:first-of-type { display: none; }
@media (min-width: 1181px) and (min-height: 640px) {
  .rec-fit.rv .rv-wrap { grid-template-columns: 272px minmax(0, 1fr) 316px; }
  .rec-fit.rv .rv-stage { gap: 10px; }
}
@media (min-width: 1181px) and (max-width: 1400px) { .rec-fit.rv .rv-wrap { grid-template-columns: 260px minmax(0, 1fr) 300px; } }
@media (max-width: 1700px) { .rv-switch { min-width: 0; } .rv-switch button small { display: none; } .rv-switch button { padding: 8px 12px; } }
@media (max-width: 1180px) { .rv-head { grid-template-columns: 1fr; grid-template-areas: "who" "tags" "sw"; } }
/* drawer: banner style switch */
.hc-style { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin: 10px 0 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.hc-style > span { display: inline-flex; align-items: center; gap: 10px; }
.hc-style > span svg { color: var(--accent); width: 21px; height: 21px; }
.hc-preset { border-radius: 18px; border-color: var(--line); background: var(--surface); }
.hc-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.hc-seg button { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; color: var(--muted); }
.hc-seg button.on { background: var(--ink); color: var(--on-ink); }
.home-tasks .chart-legend { margin-top: auto; padding-top: 10px; justify-content: center; }
/* ===== New students: old white card, days as a bar under the name, cover = status ===== */
.ns-row { margin-top: 14px; }
.nsx.plain.is-ok .nsx-cover { background: var(--brand); }
.nsx.plain.is-wait .nsx-cover { background: linear-gradient(135deg, #365864, #33393d); }
.nsx.plain.is-ok .nsx-ring .fg { stroke: var(--brand); }
.nsx.plain.is-wait .nsx-ring .fg { stroke: #365864; }
.nsx.plain.is-ok .nsx-av .avatar.xl { background: #164f61 !important; color: #fff; }
.nsx-bar { padding: 10px 18px 0; }
.nsx-bar-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.nsx-bar-h b { font-size: 13px; color: var(--ink); }
.nsx-bar-t { display: block; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.nsx-bar-t i { display: block; height: 100%; border-radius: inherit; background: #365864; }
.nsx.is-ok .nsx-bar-t i { background: var(--brand); }
/* Circle header: a light switch on one side, a divider, then the actions (secondary outlined, primary dark) */
.grp-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.grp-sw { height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.grp-sw[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,23,25,.08), 0 4px 10px -6px rgba(20,23,25,.25); }
.grp-sep { width: 1px; height: 30px; background: var(--line); margin: 0 6px; }
.grp-acts { display: flex; align-items: center; gap: 8px; }
.grp-act { height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.grp-act svg { color: var(--accent); }
.grp-act:hover { border-color: var(--accent); }
.grp-act-n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
.grp-main { height: 42px; border-radius: 999px; }
/* Preparation: numbered queue */
.pq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; flex-wrap: wrap; }
.pq-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pq-c { width: 56px; }
.pq-num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--surface-3); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 800; color: #fff; transition: background .15s, border-color .15s; }
.pq-num:hover { border-color: var(--accent); }
.pq-num.on { background: var(--brand); border-color: var(--brand); }
.pq-row:not(.on) td:not(.pq-c) { opacity: .55; }
.pq-row.on { cursor: grab; }
.pq-row.dragging { opacity: .4; }
.pq-row.over td { box-shadow: inset 0 2px 0 var(--brand); }
.pq-grip { width: 36px; color: var(--muted); }
.nsf li .nsf-n { color: var(--ink); }
/* Day agenda: circles whose time has not come are faded and locked */
.ag-row.locked .ag-card { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.ag-row.locked .ag-card-main, .ag-row.locked .ag-time { opacity: .55; }
.ag-row.locked .ag-card::before { opacity: .35; }
.ag-st.locked { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-3); color: var(--ink-2); }
.ag-cta.lock { background: var(--surface-3); color: var(--muted); cursor: default; font-weight: 600; }

/* ===== Note templates: one compact bar (new template + category + filter), three cards per row ===== */
.tpl-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tpl-bar .field { margin: 0; }
.tpl-new { flex: 1 1 260px; max-width: 460px; }
.tpl-cat { width: 160px; }
.tpl-div { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.tpl-filter { flex: 1 1 auto; }
.tpl-filter .pills { margin: 0; flex-wrap: wrap; }
.tpl-grid { gap: 14px; }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Assessments: search + circle + grade/state on one row; correction drawer uses the decision cards ===== */
.asm-tools { gap: 10px; }
.asm-tools .search { flex: 1 1 280px; max-width: 520px; }
.cor-now-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cor-now-row .grow { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-sugtag.cor-cur { background: var(--surface-3); color: var(--ink-2); }

/* ===== Library: tabs in the header, books on shelves ===== */
.lb-page .page-head { align-items: center; }
.lb-page .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lb-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.lb-tabs button { height: 34px; padding: 0 13px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.lb-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,23,25,.08), 0 4px 10px -6px rgba(20,23,25,.25); }
.lb-shelf { padding: 22px 26px 0; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; }
.lb-shelf-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.lb-shelf-h h2 { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
.lb-shelf .lb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: end; padding: 0 8px; }
.lb-shelf .lb-row.kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-board { height: 14px; margin: 0 -26px; border-radius: 0 0 26px 26px; background: linear-gradient(#eef0f1, #e3e6e8); box-shadow: inset 0 3px 0 #dfe3e5; }
.lb-book { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 22px 20px 18px 30px; padding-inline-start: 34px; border: 0; border-radius: 6px 16px 16px 6px; color: #fff; text-align: start; font: inherit; cursor: pointer; overflow: hidden; box-shadow: 0 18px 26px -18px rgba(20,23,25,.55), inset -6px 0 0 rgba(255,255,255,.08); transition: transform .18s ease, box-shadow .18s ease; }
[dir="rtl"] .lb-book, .lb-book { border-radius: 16px 6px 6px 16px; }
.lb-book:hover { transform: translateY(-6px); box-shadow: 0 26px 30px -20px rgba(20,23,25,.6); }
.lb-book.b1 { background: #165b62; } .lb-book.b2 { background: var(--brand); } .lb-book.b3 { background: #1a3640; } .lb-book.b4 { background: #3d6f7f; }
.lb-spine { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 14px; background: rgba(0,0,0,.18); box-shadow: inset -2px 0 0 rgba(255,255,255,.12); }
.lb-pattern { position: absolute; inset: 0; background: url("../assets/star-white.svg") -20px -30px / 110px repeat; opacity: .09; pointer-events: none; }
.lb-ic { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--brand-lime); }
.lb-t { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.lb-t b { font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.3; }
.lb-t small { font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.5; }
.lb-meta { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.lb-meta span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.lb-kit { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: stretch; padding: 12px; margin-bottom: 0; border-radius: 18px; background: var(--surface-2); color: inherit; text-decoration: none; transition: transform .18s; }
.lb-kit:hover { transform: translateY(-4px); }
.lb-kit-c { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 140px; padding: 14px; border-radius: 6px 12px 12px 6px; background: #fbf8f1; border: 1px solid #ece4d2; box-shadow: inset 8px 0 0 #e9dfc8; color: #6b5a33; }
.lb-kit-c b { font-size: 13.5px; line-height: 1.5; color: #3d3320; }
.lb-kit-b { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
@media (max-width: 1100px) { .lb-shelf .lb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-shelf .lb-row.kits { grid-template-columns: 1fr; } }

/* Library hub v2 (Docs-style, light): cards then the sevenths as folders */
.lh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lh-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -24px rgba(20,23,25,.5); transition: border-color .15s, box-shadow .15s, transform .15s; }
.lh-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 18px 30px -26px rgba(20,23,25,.55); transform: translateY(-2px); }
.lh-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); margin-bottom: 4px; }
.lh-card h3 { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.lh-card p { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 41px; }
.lh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.lh-cta { height: 30px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.lh-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.lh-short { margin-top: 18px; padding: 18px 20px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.lh-short-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.lh-short-h h2 { font-size: 16px; font-weight: 700; }
.lh-folders { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.lh-folder { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 0; border-radius: 14px; background: none; font: inherit; text-align: center; cursor: pointer; color: var(--ink); }
.lh-folder b { font-size: 13px; font-weight: 600; margin-top: 6px; }
.lh-folder small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.lh-fold { position: relative; width: 92px; height: 70px; margin-top: 8px; }
.lh-fold::before { content: ""; position: absolute; top: -8px; inset-inline-start: 0; width: 40px; height: 14px; border-radius: 6px 6px 0 0; background: #cfdbe0; }
.lh-fold::after { content: ""; position: absolute; inset: 0; border-radius: 4px 10px 10px 10px; background: #cfdbe0; }
.lh-fold i { position: absolute; inset: 9px 0 0; z-index: 1; border-radius: 9px; background: linear-gradient(180deg, #eef3f5, #dfe8ec); box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 8px 14px -12px rgba(20,23,25,.45); transition: transform .18s; transform-origin: bottom; }
.lh-folder:hover .lh-fold i { transform: perspective(200px) rotateX(-14deg); background: linear-gradient(180deg, #e3eff3, #cfe2e9); }
.lh-folder:hover b { color: var(--brand); }
@media (max-width: 1100px) { .lh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lh-folders { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lh-svf { padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.lh-svf:hover .svf-cap > b { color: var(--brand); }

/* Mushaf reader: open spread on white, page strip under it */
.mp { display: flex; flex-direction: column; gap: 14px; }
.mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-bar-s, .mp-bar-n { display: flex; align-items: center; gap: 10px; }
.mp-bar-n b { min-width: 120px; text-align: center; font-size: 14px; }
.mp-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 40px -36px rgba(20,23,25,.5); }
.mp-page { display: flex; flex-direction: column; gap: 12px; min-height: 560px; padding: 6px 28px; }
.mp-page + .mp-page { border-inline-start: 1px solid var(--line); }
.mp-page header, .mp-page footer { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.mp-page header { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.mp-page footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.mp-page footer .num { font-weight: 700; color: var(--ink); }
.mp-title { margin: 4px auto 0; padding: 6px 40px; border-radius: 999px; border: 1px solid #e6dcc4; background: #fbf8f1; font-family: var(--f-quran); font-size: 20px; color: #5b4a24; }
.mp-basmala { text-align: center; font-family: var(--f-quran); font-size: 22px; color: var(--ink); }
.mp-text { font-family: var(--f-quran); font-size: 22px; line-height: 2.25; text-align: justify; color: var(--ink); }
.mp-n { font-style: normal; color: var(--brand); font-size: .85em; }
.mp-skel { display: inline; }
.mp-skel i { display: inline-block; width: 38%; height: 10px; margin: 0 4px; border-radius: 99px; background: #eceff1; vertical-align: middle; }
.mp-skel i + i { width: 22%; }
.mp-skel.line { display: block; margin: 14px 0; } .mp-skel.line i { width: 100%; }
.mp-skel em { font-style: normal; }
.mp-send { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mp-send:hover { border-color: var(--brand); color: var(--brand); }
.mp-strip { display: flex; gap: 10px; padding: 14px; border-radius: 20px; background: var(--surface-2); overflow-x: auto; }
.mp-thumb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.mp-thumb-p { width: 58px; height: 78px; padding: 9px 7px; display: flex; flex-direction: column; gap: 5px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 10px -10px rgba(20,23,25,.6); transition: transform .15s; }
.mp-thumb-p i { height: 3px; border-radius: 2px; background: var(--surface-3); }
.mp-thumb b { font-size: 11.5px; color: var(--muted); }
.mp-thumb:hover .mp-thumb-p { transform: translateY(-3px); }
.mp-thumb.on .mp-thumb-p { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); transform: translateY(-4px); }
.mp-thumb.on b { color: var(--brand); }
@media (max-width: 1000px) { .mp-spread { grid-template-columns: 1fr; } .mp-page + .mp-page { border-inline-start: 0; border-top: 1px solid var(--line); } }

/* ===== Round 6: live session ===== */
/* Running session as a pill in the top bar (replaces the dark live bar) */
.tb-live { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 6px; padding-inline-start: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.tb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5483b; box-shadow: 0 0 0 4px rgba(229,72,59,.15); animation: hck-blink 1.4s steps(1) infinite; }
.tb-live-t { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); text-decoration: none; }
a.tb-live-t:hover { color: var(--brand); }
.tb-live-sep { width: 1px; height: 16px; background: var(--line); }
.tb-live .num { font-variant-numeric: tabular-nums; }
.tb-live-end { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-inline-start: 4px; }
.tb-live-end:hover { background: #e5483b; }
/* Lobby: two invite buttons, list right under them, three students per row, clear marks */
.lb-invites.two { grid-template-columns: 1fr 1fr; }
.lobby .lb-list-h { gap: 10px; flex-wrap: wrap; }
.lb-counts { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; font-size: 12px; }
.lb-counts > span { display: inline-flex; align-items: center; gap: 4px; }
.lb-counts .in { color: #2e7a93; } .lb-counts .late { color: var(--warm); } .lb-counts .out { color: #d23c32; }
.lb-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lb-list.three .lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.lb-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-row-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row-t .lb-st { font-size: 11px; }
.lb-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.lb-list.three .lb-row.in { background: var(--green-soft); border-color: var(--green-line); }
.lb-list.three .lb-row.in .lb-mark { background: #2e7a93; color: #fff; }
.lb-list.three .lb-row.in .lb-st { color: #2e7a93; font-weight: 600; }
.lb-list.three .lb-row.late { background: var(--warm-soft); border-color: #f2d6a6; }
.lb-list.three .lb-row.late .lb-mark { background: #e59a1a; color: #fff; }
.lb-list.three .lb-row.late .lb-st { color: #a86a00; font-weight: 600; }
.lb-list.three .lb-row.out { background: #fdf1f0; border-color: #f2c4c0; }
.lb-list.three .lb-row.out .lb-mark { background: #d23c32; color: #fff; }
.lb-list.three .lb-row.out .lb-st { color: #c53b3b; font-weight: 600; }
/* Call on its own (roll done, nobody reciting): full width, CTA above, students across the width */
.room-grid.remote.solo-call { grid-template-columns: 1fr; }
.call-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.call-cta b { display: block; font-size: 14.5px; }
.call-cta small { display: block; font-size: 12px; color: var(--muted); }
.call-cta .btn .kbd { margin-inline-start: 6px; }
.call-strip { scrollbar-width: none; }
.call-strip::-webkit-scrollbar { display: none; }
.solo-call .call-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); overflow: visible; }
.solo-call .call-strip .ptile { width: auto; }
/* Roll call popup: no lime; white answer buttons, soft grey hint */
.rc2-btn { background: rgba(255,255,255,.08); }
.rc2-btn.present { background: var(--surface); color: var(--ink); box-shadow: none; }
.rc2-btn.present .kbd { background: var(--surface-2); color: var(--muted); }
.rc2-btn.present:hover { background: var(--surface-2); }
.rc2-btn.pre { outline: 2px solid rgba(255,255,255,.75); }
.rc2-btn.present.pre { outline-color: var(--brand); }
.rc2-strip { background: var(--surface-2); color: var(--ink-2); box-shadow: none; border: 1px solid var(--line); border-top: 0; font-weight: 500; }
.rc2-strip svg { color: var(--brand); }
.rc2-strip.late { background: var(--warm-soft); color: #8a5a00; }
.rc2-strip.late svg { color: var(--warm); }

/* ===== Round 7: roll popup full height, assessment panel ===== */
/* Roll popup runs from top to bottom; the call progress shows everyone; actions sit at the very bottom */
.rollcall.rc2 { top: 16px; bottom: 16px; max-height: none; }
.rollcall.rc2:not(.done) .rc2-prog { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rollcall.rc2 .rc2-dots { max-height: none; overflow: visible; }
.rollcall.rc2 .rc2-foot { margin-top: auto; }
.rc2-dot.present .rc2-dot-c { background: #e3eff3; color: #2e7a93; }
.rc2-legend i.present { background: #2e7a93 !important; }
/* No scrollbar tracks inside the room and the roll popup (content still scrolls) */
.room, .room *, .rollcall, .rollcall * { scrollbar-width: none; }
.room ::-webkit-scrollbar, .rollcall::-webkit-scrollbar, .rollcall ::-webkit-scrollbar { display: none; }
/* Note templates under «ملاحظة للطالب»: three, two per row, the third next to «+ القوالب» */
.tpl-chips.three { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tpl-chips.three .tpl-chip { width: 100%; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The submit CTA: full width, 44px tall, clearly visible */
.room-assess .rec-submit-cta { width: 100%; min-height: 48px; height: 48px; font-size: 15px; border-radius: 999px; }
.room-assess .rec-submit-cta:disabled { background: var(--ink); color: var(--on-ink); opacity: .45; }
/* Recitation timer in the room header */
.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.room-timer { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 6px; padding-inline-start: 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.room-timer-l { font-size: 12px; color: var(--muted); }
.room-timer .timer { font-size: 26px; font-weight: 800; line-height: 1; margin: 0; }
.room-timer .btn { border-radius: 999px; }

/* In-person circle board */
.cb { display: flex; flex-direction: column; gap: 14px; }
.cb-head h2 { font-family: var(--f-display); font-size: 24px; font-weight: 600; margin: 4px 0 2px; }
.cb-kicker { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.cb-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.cb-step { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 14px; background: none; font: inherit; text-align: start; cursor: pointer; color: var(--ink-2); min-width: 0; }
.cb-step:hover { background: var(--surface-2); }
.cb-step-i { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cb-step-t { display: flex; flex-direction: column; min-width: 0; }
.cb-step-t b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-step-t small { font-size: 11px; color: var(--muted); }
.cb-step.done .cb-step-i { background: #2e7a93; color: #fff; }
.cb-step.on { background: var(--ink); color: var(--on-ink); }
.cb-step.on .cb-step-i { background: var(--brand-lime); color: var(--on-lime); }
.cb-step.on small { color: rgba(255,255,255,.7); }
.cb-stage { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.cb-stage-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.cb-stage .grow { display: flex; flex-direction: column; gap: 1px; }
.cb-stage b { font-size: 17px; }
.cb-stage small { font-size: 12.5px; color: var(--muted); }
.cb-stage-n { font-size: 13px; color: var(--muted); margin-inline-end: 6px; }
.cb-stage-n b { font-size: 22px; color: var(--ink); }
.cb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cb-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.cb-card.done { background: var(--green-soft); border-color: var(--green-line); }
.cb-card.locked { opacity: .6; }
.cb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-who small { font-size: 11.5px; color: var(--muted); }
.cb-who em { font-style: normal; color: var(--warm); font-weight: 600; }
.cb-dots { display: flex; gap: 3px; margin-top: 3px; }
.cb-dots i { width: 14px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.cb-dots i.on { background: #2e7a93; }
.cb-dots i.cur { box-shadow: 0 0 0 1.5px var(--ink); }
.cb-check { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; border: 1.5px solid var(--line-2, var(--line-2)); background: var(--surface); color: transparent; cursor: pointer; transition: all .15s; }
.cb-check:hover { border-color: #2e7a93; color: #8fd0e4; }
.cb-check.on { background: #2e7a93; border-color: #2e7a93; color: #fff; }
.cb-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2e7a93; white-space: nowrap; }
.cb-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cb-back { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sbx-links { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1200px) { .cb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Profile menu: «نوع المعلم» demo switch */
.mode-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 2px 0; border-radius: 12px; background: var(--surface-2); }
.mode-sw-l { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mode-sw-l small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.mode-sw-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.mode-sw-seg button { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mode-sw-seg button.on { background: var(--ink); color: var(--on-ink); }
/* In-person room: the seven tasks the teacher ticks in the circle */
.cls-tasks { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.cls-tasks-h { display: flex; align-items: baseline; gap: 10px; }
.cls-tasks-h b { font-size: 13.5px; }
.cls-n { margin-inline-start: auto; font-weight: 700; font-size: 13px; }
.cls-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cls-task { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; padding-inline-start: 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cls-task .cls-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 11px; color: var(--muted); }
.cls-task.on { border-color: var(--green-line); background: var(--green-soft); color: #2e7a93; }
.cls-task.on .cls-i { background: #2e7a93; color: #fff; }
.cls-task.locked { opacity: .5; cursor: not-allowed; }

/* Daily task locked until the teacher approves the recitation */
.list-row.task-locked { opacity: .6; }
.list-row.task-locked .nico { background: var(--surface-2); color: var(--muted); }

/* ===== Round 10: «أثري» ===== */
.mi-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 28px; border-radius: 26px; background: linear-gradient(135deg, #2e7a93, #1f5a6d); color: #fff; overflow: hidden; margin-top: 14px; }
.mi-hero .lb-pattern { opacity: .08; }
.mi-hero-main { position: relative; display: flex; flex-direction: column; gap: 12px; }
.mi-kicker { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 28px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 12.5px; font-weight: 600; }
.mi-kicker svg { color: var(--brand-lime); }
.mi-hero h2 { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.4; }
.mi-hero h2 span { color: var(--brand-lime); }
.mi-hero-nums { display: flex; gap: 10px; flex-wrap: wrap; }
.mi-hero-nums > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 16px; background: rgba(255,255,255,.1); min-width: 120px; }
.mi-hero-nums b { font-size: 24px; font-weight: 700; line-height: 1.1; }
.mi-hero-nums span { font-size: 12px; color: rgba(255,255,255,.75); }
.mi-quote { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 30px -20px rgba(0,0,0,.5); }
.mi-quote-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); }
.mi-quote blockquote { margin: 0; font-size: 15px; line-height: 1.8; font-weight: 500; }
.mi-quote figcaption { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.mi-quote figcaption span { color: var(--muted); font-size: 11.5px; }
.mi-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mi-tile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.mi-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); }
.mi-tile > div { display: flex; flex-direction: column; min-width: 0; }
.mi-tile span { font-size: 12px; color: var(--muted); }
.mi-tile b { font-size: 22px; font-weight: 700; line-height: 1.2; }
.mi-tile small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; margin-top: 14px; align-items: stretch; }
.mi-grid > .card { display: flex; flex-direction: column; min-width: 0; }
.mi-rate-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; flex: 1; }
.mi-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 20px; background: var(--surface-2); text-align: center; }
.mi-score > b { font-size: 44px; font-weight: 800; line-height: 1; color: var(--brand); }
.mi-score > span { font-size: 12px; color: var(--muted); }
.mi-stars { display: inline-flex; gap: 2px; margin-top: 4px; }
.mi-stars i { color: var(--surface-3); display: inline-flex; }
.mi-stars i.on { color: #e5a11a; }
.mi-stars i.on svg { fill: #e5a11a; }
.mi-score small { font-size: 11.5px; color: var(--muted); }
.mi-meters { display: flex; flex-direction: column; gap: 14px; }
.mi-meter { display: grid; grid-template-columns: 130px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; }
.mi-meter-l { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mi-meter-l svg { color: var(--brand); }
.mi-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.mi-pips i { height: 10px; border-radius: 3px; background: var(--surface-3); }
.mi-pips i.on { background: var(--brand); }
.mi-meter b { text-align: end; font-weight: 700; }
.mi-pill { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.mi-cols { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 170px; align-items: end; }
.mi-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; cursor: default; }
.mi-col-bar { flex: 1; width: 100%; max-width: 30px; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.mi-col-bar i { display: block; width: 100%; }
.mi-col-bar i.m { background: var(--brand); }
.mi-col-bar i.o { background: #9fbfca; }
.mi-col:hover .mi-col-bar { box-shadow: 0 0 0 2px var(--brand); }
.mi-col small { font-size: 10.5px; color: var(--muted); }
.mi-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mi-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.mi-facts span { font-size: 11.5px; color: var(--muted); }
.mi-facts b { font-size: 13.5px; }
@media (max-width: 1100px) { .mi-hero, .mi-grid { grid-template-columns: 1fr; } .mi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Round 9 ===== */
/* Assessment panel: the actions stay pinned at the bottom in a white frame; the content scrolls above them */
.room-assess .assess-foot { position: sticky; bottom: -18px; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: auto -18px -18px; padding: 12px 18px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -14px 20px -16px rgba(20,23,25,.25); border-radius: 0 0 22px 22px; }
.room-assess .assess-foot .check { margin: 0; }
/* Student report charts */
.sr-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sr-grid > .card { grid-column: auto !important; }
@media (max-width: 1000px) { .sr-grid { grid-template-columns: 1fr; } }
.sr-grid > .card { display: flex; flex-direction: column; min-width: 0; }
.sr-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.sr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sr-legend i, .sr-row-l i { width: 10px; height: 10px; border-radius: 3px; }
.sr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.sr-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.sr-kpis span { font-size: 12px; color: var(--muted); }
.sr-kpis b { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sr-kpis small { font-size: 11.5px; color: var(--muted); }
.sr-kpis small.up { color: #2e7a93; } .sr-kpis small.down { color: var(--bad); }
.sr-chart { display: block; width: 100%; height: auto; }
.sr-chart .sr-val { font-size: 13px; font-weight: 700; fill: var(--ink); }
.sr-chart .sr-in { font-size: 12px; font-weight: 600; fill: #fff; }
.sr-chart .sr-zero { font-size: 11.5px; fill: var(--muted); }
.rp-toolbar.one .pills { margin: 0; flex-wrap: nowrap; }
.sr-chart .sr-now { font-weight: 700; fill: var(--ink); }
.sr-chart g.tip-bar:hover rect:not([fill="transparent"]) { opacity: .85; }
.sr-stack { display: flex; gap: 3px; height: 16px; border-radius: 99px; overflow: hidden; margin: 2px 0 16px; }
.sr-stack i { display: block; height: 100%; }
.sr-rows { display: flex; flex-direction: column; gap: 12px; }
.sr-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 30px 40px; align-items: center; gap: 10px; font-size: 13px; }
.sr-row-l { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.sr-row-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sr-row-bar i { display: block; height: 100%; border-radius: inherit; }
.sr-row b { text-align: end; }
.sr-row .muted { font-size: 12px; text-align: end; }
.sr-last { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sr-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-dots i { width: 22px; height: 22px; border-radius: 7px; cursor: default; }

/* ===== Round 8 ===== */
/* Recitation view: no title, taller columns (the live bar is gone too) */
.room-head.slim { justify-content: flex-end; margin-bottom: -4px; }
.room.reciting .room-grid { height: calc(100vh - 128px); }
.room.reciting.has-timer .room-grid { height: calc(100vh - 186px); }
/* Roll call done: the two actions sit at the very bottom */
.rollcall.rc2.done .rc2-end { margin-top: auto; }
/* Lobby before any invite */
.lb-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px; border-radius: 18px; border: 1.5px dashed var(--line-2, #d6dbde); color: var(--muted); text-align: center; }
.lb-wait b { color: var(--ink); font-size: 14px; }
/* Invite a student to the queue: search + circle switch */
.qa-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qa-tools .search { flex: 1; }
.qa-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.qa-seg button { height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.qa-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20,23,25,.12); }
/* Home banner: today's three circles — done ✓, current in its colour, later ones locked */
.sbx-mini.done { opacity: .75; }
.sbx-mini.locked { opacity: .5; cursor: default; }
.sbx-mini-s { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Round 5 ===== */
/* Templates: wide new-template row, then a full-width category bar */
.tpl-bar { flex-wrap: nowrap; }
.tpl-bar .tpl-new { flex: 1 1 300px; max-width: none; min-width: 220px; }
.tpl-bar .tpl-filter { flex: 0 1 auto; }
.tpl-seg { display: grid; grid-template-columns: repeat(5, auto); gap: 3px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.tpl-seg button { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tpl-seg button .num { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--surface-2); font-size: 11.5px; color: var(--muted); }
.tpl-seg button:hover { background: var(--surface); }
.tpl-seg button .num { background: var(--surface); }
.tpl-seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.tpl-seg button[aria-pressed="true"] .num { background: rgba(255,255,255,.18); color: #fff; }
/* Chart hover card */
.chart-tip { position: fixed; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-size: 12px; line-height: 1.5; box-shadow: 0 14px 30px -14px rgba(20,23,25,.6); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; direction: rtl; }
.chart-tip.show { opacity: 1; transform: none; }
.chart-tip b { font-size: 12.5px; margin-bottom: 2px; }
.chart-tip span { color: rgba(255,255,255,.7); }
.chart-tip span.on { color: var(--brand-lime); font-weight: 700; }
.tip-bar, .tip-arc { cursor: pointer; transition: opacity .12s; }
.chart:hover .tip-bar:not(:hover) { opacity: .55; }
.tip-cell { cursor: default; border-radius: 10px; }
.tip-cell:hover { background: var(--surface-2); }
/* Reports: tabs, period, circle, print and export on one line */
.rp-toolbar.one { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.rp-toolbar.one .tabs { margin: 0; flex: none; }
.rp-toolbar.one .tabs .tab { padding: 0 14px; }
.rp-toolbar.one .btn { flex: none; }
.rp-sep { width: 1px; height: 28px; background: var(--line); flex: none; }
@media (max-width: 1300px) { .rp-toolbar.one { flex-wrap: wrap; } }
/* Reports: weekly card = KPI strip on top, chart under it */
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.rp-kpis .rp-metric { padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 0; margin: 0; }
.rp-chart-w { display: flex; flex-direction: column; gap: 8px; }
.rp-legend-top { justify-content: flex-start; margin: 0; gap: 16px; }
.rp-legend-top .xs { margin-inline-start: auto; }
/* Supervisor: type filter right, sections left, two cards per row */
.sup-page .page-head { align-items: center; flex-wrap: nowrap; gap: 14px; }
.sup-page .page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.sup-page .page-actions .pills { margin: 0; flex-wrap: nowrap; gap: 3px; }
.sup-page .page-actions .pill { height: 36px; padding: 0 9px; gap: 5px; }
.sup-page .sup-tabs a { padding: 0 12px; }
.sup-page .page-actions .btn { flex: none; white-space: nowrap; }
.sup-page .page-head > div:first-child { min-width: 0; }
.sup-page .page-head .lead { white-space: nowrap; }
.sup-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sup-bar .pills { margin: 0; }
.sup-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sup-tabs a { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.sup-tabs a[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.sup-n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; }
.sup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.sup-grid .dir-card { display: flex; flex-direction: column; margin: 0; }
.sup-grid .dir-card > .row.wrap { margin-top: auto !important; padding-top: 14px; }
@media (max-width: 1000px) { .sup-grid { grid-template-columns: 1fr; } }
/* Meanings: send sits in the hidaya banner; surah list runs to the bottom */
.mr-hid { display: flex; align-items: center; gap: 8px; }
.mr-hid .mr-acts { margin: 0; margin-inline-start: auto; flex: none; }
.mr-acts-row { display: flex; justify-content: flex-end; }
.mr-side { height: calc(100vh - 120px); }
.mr-list-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mr-side .mr-list { flex: 1; max-height: none; min-height: 0; scrollbar-width: none; }
.mr-side .mr-list::-webkit-scrollbar { display: none; }

/* Mushaf reader v2: like the book reference — one sheet with a header line, two text columns, page strip below */
.mp2 { display: flex; flex-direction: column; gap: 14px; }
.mp2-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp2-back { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; background: #e6e8ea; color: #fff; cursor: pointer; }
.mp2-back svg { color: #fff; }
.mp2-back:hover { background: var(--muted); }
.mp2-sheet { padding: 22px 34px 30px; border-radius: 22px; background: var(--surface); }
.mp2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.mp2-head b { font-weight: 600; color: var(--ink); }
.mp2-head i { font-style: normal; margin: 0 10px; color: var(--muted); }
.mp2-head .num { font-size: 14px; font-weight: 600; color: var(--ink); }
.mp2-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; }
.mp2-col { font-family: var(--f-quran); font-size: 21px; line-height: 2.15; text-align: justify; color: var(--ink); min-height: 520px; }
.mp2-ay { }
.mp2-sura { display: block; margin: 10px auto 2px; padding: 4px 0; width: 70%; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 19px; color: var(--ink); }
.mp2-basm { display: block; text-align: center; font-size: 20px; margin-bottom: 4px; }
.mp2-load { font-family: var(--f-display, inherit); font-size: 13px; color: var(--muted); }
.mp2-strip { display: flex; gap: 14px; align-items: flex-end; padding: 18px 18px 14px; border-radius: 22px; background: #eceeef; overflow-x: auto; overflow-y: visible; }
.mp2-thumb { position: relative; flex: none; width: 66px; height: 88px; padding: 10px 8px; border-radius: 6px; border: 0; background: #c9cdd0; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s, background .15s; }
.mp2-lines { display: flex; flex-direction: column; gap: 4px; }
.mp2-lines i { height: 2px; border-radius: 2px; background: rgba(255,255,255,.55); }
.mp2-thumb b { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); min-width: 36px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.9); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.mp2-thumb:hover { background: #bcc1c4; }
.mp2-thumb.on { width: 74px; height: 102px; background: var(--surface); box-shadow: 0 14px 24px -14px rgba(20,23,25,.55); transform: translateY(-10px); }
.mp2-thumb.on .mp2-lines i { background: var(--surface-3); }
@media (max-width: 1000px) { .mp2-cols { grid-template-columns: 1fr; gap: 20px; } .mp2-sheet { padding: 18px; } }

/* Meanings reader: surah list on the side, ayah + meaning rows */
.mr { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.mr-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.mr-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 150px; padding: 18px; border-radius: 22px; background: var(--brand); color: #fff; overflow: hidden; }
.mr-cover b { position: relative; font-family: var(--f-display); font-size: 24px; font-weight: 600; }
.mr-cover small { position: relative; font-size: 12px; color: rgba(255,255,255,.8); }
.mr-list-card { padding: 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.mr-list-card .search { width: 100%; margin-bottom: 8px; }
.mr-list { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; }
.mr-item { display: grid; grid-template-columns: 30px 1fr auto 8px; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: start; cursor: pointer; color: var(--ink); }
.mr-item .num { font-size: 12px; color: var(--muted); }
.mr-item b { font-size: 13.5px; font-weight: 600; }
.mr-item small { font-size: 11px; color: var(--muted); }
.mr-item:hover { background: var(--surface-2); }
.mr-item.on { background: var(--accent-soft); color: var(--accent-ink); }
.mr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-lime); }
.mr-main { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.mr-head h2 { font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.mr-basmala { padding: 18px; text-align: center; font-family: var(--f-quran); font-size: 26px; border-bottom: 1px solid var(--line); }
.mr-ayah { position: relative; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.mr-ayah:hover { background: #fcfdfd; }
.mr-text { font-family: var(--f-quran); font-size: 25px; line-height: 2.1; color: var(--ink); margin: 0 0 10px; }
.mr-tafsir { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.mr-tafsir p { margin: 0; }
.mr-tafsir .lib-hidaya { margin-top: 6px; }
.mr-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mr-ref { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.mr-act { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.mr-act:hover { border-color: var(--brand); color: var(--brand); }
.mr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; color: var(--muted); text-align: center; }
.mr-empty b { color: var(--ink); }
@media (max-width: 1000px) { .mr { grid-template-columns: 1fr; } .mr-side { position: static; } }

/* Send-to-student popup: content type + where */
.sr-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sr-where { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sr-where .field { margin: 0; }

/* ===== Teacher notes board ===== */
.nb-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nb-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); min-height: 320px; transition: background .15s, border-color .15s; }
.nb-col.over { background: var(--accent-soft); border-color: var(--brand); }
.nb-col > header { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.nb-col > header b { font-size: 15px; }
.nb-n { font-size: 13px; color: var(--muted); font-weight: 600; }
.nb-ring { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.nb-ring.dash { border: 2px dashed var(--muted); }
.nb-ring.half { border: 2px solid #8b6cd9; }
.nb-ring.full { background: var(--brand); color: #fff; }
.nb-add { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.nb-add:hover { background: var(--surface); color: var(--ink); }
.nb-list { display: flex; flex-direction: column; gap: 10px; }
.nb-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--tint, var(--surface)); border: 1px solid rgba(20,23,25,.07); box-shadow: 0 8px 18px -16px rgba(20,23,25,.5); cursor: grab; transition: transform .15s, box-shadow .15s; }
.nb-card:hover { transform: translateY(-2px); box-shadow: 0 16px 24px -18px rgba(20,23,25,.55); }
.nb-card.dragging { opacity: .45; }
.nb-card-btn { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.nb-card h3 { font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.nb-card .nb-rich { font-size: 13px; color: var(--ink-2); max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.nb-card footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.nb-tag { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 99px; background: rgba(20,23,25,.06); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.nb-sent { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.nb-empty { height: 90px; border: 1.5px dashed var(--surface-3); border-radius: 16px; background: none; color: var(--muted); font: inherit; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.nb-empty:hover { border-color: var(--brand); color: var(--brand); }
.nb-rich h3 { font-size: 17px; font-weight: 700; margin: 4px 0; }
.nb-rich p { margin: 0 0 6px; line-height: 1.7; }
.nb-rich ul, .nb-rich ol { margin: 0 0 6px; padding-inline-start: 20px; line-height: 1.7; }
@media (max-width: 1100px) { .nb-board { grid-template-columns: 1fr; } }
/* editor */
.nb-edit { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
.nb-main { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--tint, var(--surface)); border: 1px solid var(--line); }
.nb-title { border: 0; background: none; font: inherit; font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--ink); outline: none; padding: 4px 2px; }
.nb-toolbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 5px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid var(--line); }
.nb-tool { min-width: 32px; height: 30px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.nb-tool:hover { background: var(--surface-2); }
.nb-ink { min-width: 22px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--line); margin: 0 2px; }
.nb-ink:hover { background: var(--c); transform: scale(1.12); }
.nb-hl { padding: 0 4px; border-radius: 4px; background: #fff1a8; }
.nb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.nb-editor { min-height: 260px; padding: 8px 4px; outline: none; font-size: 14.5px; color: var(--ink); }
.nb-editor:empty::before { content: attr(data-placeholder); color: var(--muted); }
.nb-side { display: flex; flex-direction: column; gap: 14px; }
.nb-side .field { margin: 0; }
.nb-tints { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-tint { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--c); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.nb-tint.on { box-shadow: 0 0 0 2px var(--brand); }
.nb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.nb-seg button { height: 32px; border-radius: 9px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.nb-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20,23,25,.12); }
.nb-to { display: flex; flex-direction: column; gap: 6px; }
.nb-to-b { padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.nb-to-b .lt-opt-ic { width: 30px; height: 30px; }
.nb-to-b .sa-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2, var(--line-2)); display: grid; place-items: center; }
.nb-to-b.on { border-color: rgba(46,122,147,.45); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.nb-to-b.on .lt-opt-ic { background: var(--accent); color: #fff; }
.nb-to-b.on .sa-radio { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 900px) { .nb-edit { grid-template-columns: 1fr; } }
/* ===== Home header + session banner (from the «Teacher Design» screen) ===== */
.home-head.hh2 { align-items: center; }
.home-head.hh2 h1 { font-size: 30px; }
.prog-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.prog-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(177,235,81,.25); }
.sbx-mode { margin-inline-start: 8px; padding: 2px 10px; border-radius: 999px; background: var(--brand-lime); color: var(--on-lime); font-size: 11.5px; font-weight: 700; }
.sbx-bar-l .mid { color: rgba(255,255,255,.7); }
.sbx-faces-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; }
.sbx-faces-row .sbx-faces { margin-top: 0; }
.sbx-faces-n { font-size: 11.5px; color: rgba(255,255,255,.55); }
.sbx-actions { display: flex; align-items: center; gap: 8px; }
.sbx-actions .sbx-cta { flex: 1; }
.sbx-ibtn { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s; }
.sbx-ibtn:hover { background: rgba(255,255,255,.16); }
.sbx-ibtn.on { background: var(--brand-lime); color: var(--on-lime); border-color: transparent; }
/* Frosted-glass tiles for the other circles, so they read clearly over the star pattern */
.sbx-mini.locked, .sbx-mini.done { background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -12px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: 1; }
.sbx-mini.locked .sbx-mini-s { display: inline-flex; align-items: center; gap: 4px; }

/* Page scroll stays, its scrollbar line is hidden */
.view, html, body { scrollbar-width: none; -ms-overflow-style: none; }
.view::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ===== Home: quick actions, circles view switch, messages bubble ===== */
.qa-sec { display: flex; flex-direction: column; gap: 12px; }
.qa-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qa-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.qa-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 10px 24px -16px rgba(20,23,25,.35); transform: translateY(-2px); }
.qa-card:disabled { opacity: .5; cursor: default; }
.qa-card b { font-size: 15px; margin-top: 4px; } .qa-card small { font-size: 12.5px; color: var(--muted); }
.qa-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.qa-ic.accent { background: var(--accent-soft); color: var(--accent); } .qa-ic.bad { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 1100px) { .qa-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.circles .sec-head .seg-soft button { display: inline-flex; align-items: center; gap: 6px; }
.cir-table { margin: 0; }
.late-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 12.5px; }
.late-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.hc-views { display: flex; align-items: center; gap: 6px; margin: -2px 52px 4px 0; font-size: 12px; color: var(--muted); }
.hc-views button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); }
.hc-views button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.qa-abs { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.mb-wrap { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; }
.mb-wrap > * { pointer-events: auto; }
.mb-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(20,23,25,.6); transition: transform .15s; }
.mb-fab:hover { transform: translateY(-2px); }
.mb-fab.open { background: var(--accent); }
.mb-n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.mb-pop { width: min(380px, calc(100vw - 48px)); max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
.mb-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mb-top b { font-size: 16px; margin-inline-end: auto; }
.mb-top .seg-soft button { height: 30px; padding: 0 10px; font-size: 12px; }
.mb-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.mb-body { overflow: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.mb-sec { display: flex; flex-direction: column; gap: 8px; }
.mb-h { display: flex; align-items: baseline; justify-content: space-between; }
.mb-h b { font-size: 14px; }
.mb-dir { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.mb-dir.praise { background: var(--accent-soft); border-color: transparent; }
.mb-dir.new { border-color: rgba(46,122,147,.45); }
.mb-k { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mb-dir.praise .mb-k { color: var(--accent); }
.mb-dir p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.8; }
.mb-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mb-stu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; color: inherit; text-decoration: none; }
.mb-stu:hover { background: var(--surface-2); }
.mb-stu .avatar { flex: none; }
.mb-txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.mb-stu.new b { color: var(--accent); }
.mb-dot { min-width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }

/* ===== Wide layout: the page uses the full width; the session banner stays one wide horizontal row ===== */
.view-inner, .room { max-width: none; }
.sbx { grid-template-columns: minmax(0, 1fr) clamp(380px, 27vw, 520px); }
@media (max-width: 1350px) and (min-width: 1001px) {
  .sbx { grid-template-columns: minmax(0, 1fr) 380px; }
  .sbx-main { grid-template-columns: 1.1fr 1.1fr 1fr; }
  .sbx-side { display: flex; flex-direction: column; }
  .sbx-side-h { display: flex; }
  .sbx-minis { min-height: 0; } .sbx-mini { min-height: 84px; }
}
/* "+6" overflow bubble on avatar stacks stays on one line */
.avatar.more { white-space: nowrap; letter-spacing: -.3px; font-size: 11px; }

/* Quick actions: dashed pills across the full width (icon + label + round go-button) */
.qa-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qa-pill { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 10px 0 22px; padding-inline-start: 22px; padding-inline-end: 8px; border-radius: 999px; border: 2px dashed var(--line-2); background: rgba(255,255,255,.35); font: inherit; color: var(--ink); cursor: pointer; text-align: start; transition: border-color .15s, background .15s, transform .15s; }
.qa-pill b { flex: 1; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-ic { flex: none; color: var(--ink-2); display: grid; place-items: center; }
.qp-go { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(20,23,25,.25); transition: background .15s, color .15s; }
.qa-pill:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
.qa-pill:hover:not(:disabled) .qp-go { background: var(--ink); color: var(--on-ink); }
.qa-pill.accent .qp-ic { color: var(--accent); } .qa-pill.bad .qp-ic { color: var(--bad); }
.qa-pill:disabled { opacity: .5; cursor: default; }
@media (max-width: 1200px) { .qa-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sbx-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.6; }
.sbx-faces-row { flex-wrap: wrap; }


/* Session banner: the bottom block of each column (bar labels or faces + bar) sits on one shared baseline */
.sbx-main { align-items: stretch; }
.sbx-col { display: flex; flex-direction: column; }
.sbx-col > .sbx-bar-l, .sbx-col > .sbx-faces-row { margin-top: auto; padding-top: 14px; }
.sbx-col > .sbx-faces-row { margin-bottom: 8px; }
.sbx-col > .sbx-bar { flex: none; }

.sbx-col > .sbx-lab { height: 26px; }
.sbx-mode { line-height: 20px; }


/* Home greeting: smaller and slimmer, to give the page more room */
.home-head.hh2 { margin-bottom: -6px; gap: 12px; }
.home-head.hh2 h1 { font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; }
.home-head.hh2 h1::after { display: none; }
.home-head.hh2 .lead { font-size: 12.5px; margin-top: 2px; }
.home-head.hh2::before { display: none; }
.home-head.hh2 .prog-chip { height: 34px; padding: 0 14px; font-size: 12.5px; }

.kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Quick actions: five pills + popups */
.qa-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .qa-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .qa-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa-pill b { font-size: 14.5px; }
.qp-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.qa-days { margin-bottom: 4px; }
.sr-chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.sr-chip .num { opacity: .8; }
.qa-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; }
.qa-preview { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.8; }
.qa-attach { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qa-file { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; border: 1px dashed var(--line-2); font-size: 12px; color: var(--ink-2); }
.modal .sr-reasons + .sr-chip { display: inline-flex; }

/* ===== Quick-action popups (v2): shared frame + equal cards ===== */
.modal.qa-modal { width: min(860px, calc(100vw - 32px)); height: auto; max-height: min(90vh, 900px); display: flex; flex-direction: column; }
.qa-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: block; }
.qa-head { align-items: center; gap: 14px; }
.qa-head h2 { font-size: 21px; margin: 0; } .qa-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.qa-hic { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.qa-hic.accent { background: var(--accent-soft); color: var(--accent); } .qa-hic.bad { background: var(--bad-soft); color: var(--bad); }
.qa-badge { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.qa-modal .sr-sec { padding: 18px 0; }
.qa-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qa-filter .qa-circles { margin-inline-start: auto; }
.qa-range { display: flex; align-items: center; gap: 8px; }
.qa-range label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.qa-range .input { height: 38px; width: 150px; }
/* Student cards: always equal width, two per row */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; }
.qa-grid .sr-card { width: 100%; min-width: 0; }
.qa-switch { flex: none; }
.qa-hint { margin: 6px 0 0; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.qa-chip:hover { border-color: var(--accent); }
.qa-chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 700; }
.qa-circles-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qa-cc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; color: var(--ink); min-width: 0; }
.qa-cc b { font-size: 15px; } .qa-cc small { font-size: 12.5px; color: var(--muted); }
.qa-cc:hover { border-color: var(--accent); }
.qa-cc.on { border: 2px solid var(--accent); background: var(--accent-soft); padding: 15px 17px; }
.qa-dt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qa-dt .field { margin: 0; display: flex; flex-direction: column; gap: 6px; } .qa-dt .field > span { font-size: 13px; font-weight: 700; }
.qa-modal label.field > span { font-weight: 700; font-size: 13.5px; display: block; margin-bottom: 6px; }
.qa-each { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.qa-each-row { display: grid; grid-template-columns: auto 110px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); }
.qa-each-n b { display: block; font-size: 13.5px; } .qa-each-n small { font-size: 11.5px; color: var(--muted); }
.qa-each-row .textarea { min-height: 60px; }
.qa-faces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.qa-hist { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 4px; border-radius: 14px; background: var(--surface-2); }
.qa-hrow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.qa-st { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.qa-st.wait { background: rgba(177,235,81,.35); color: #4b5b13; } .qa-st.ok { background: var(--accent-soft); color: var(--accent); } .qa-st.alt { background: var(--bad-soft); color: var(--bad); }
.qa-reply { margin: 0 0 4px; padding-inline-start: 8px; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.qa-sup { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); margin-top: 6px; }
.qa-sup b { display: block; font-size: 15px; } .qa-sup small { font-size: 12.5px; color: var(--muted); }
.qa-att { display: flex; flex-direction: column; gap: 8px; }
.qa-att-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.qa-att-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.qa-att-row b { display: block; font-size: 14px; } .qa-att-row small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 720px) { .qa-grid, .qa-dt { grid-template-columns: 1fr; } .qa-circles-cards { grid-template-columns: 1fr; } .qa-filter .qa-circles { margin-inline-start: 0; } }

@media (max-width: 1700px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Quick-action popups: one-line filter with compact range dates; makeup session fields; dropdown aside */
.qa-filter { flex-wrap: nowrap; gap: 8px; }
.qa-filter .sr-seg-b { height: 34px; padding: 0 10px; font-size: 12.5px; }
.qa-range { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); }
.qa-range .input { height: 36px; width: 128px; padding: 0 8px; font-size: 12.5px; }
.qa-filter .qa-circles { margin-inline-start: auto; flex: none; }
@media (max-width: 860px) { .qa-filter { flex-wrap: wrap; } }
.qa-dt3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.qa-dt3 .field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.qa-dt3 .field > span { font-size: 13px; font-weight: 700; }
.qa-dt3 .input { height: 42px; }
.qa-durs .sr-seg-b { height: 36px; }
.qa-sum { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
@media (max-width: 720px) { .qa-dt3 { grid-template-columns: 1fr; } }
.menu-aside { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-item.on .menu-aside { color: inherit; }

/* Absent message: insert-name/circle chips + per-student preview */
.qa-ins { display: inline-flex; align-items: center; gap: 6px; }
.qa-ins .sr-chip { display: inline-flex; align-items: center; gap: 5px; }
.qa-pv { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); }
.qa-pv-h { display: flex; align-items: center; gap: 8px; }
.qa-pv-h b { font-size: 13px; } .qa-pv-h small { font-size: 12px; color: var(--muted); margin-inline-start: auto; }
.qa-pv p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.85; }

/* Absent message: one personalised preview per selected student */
.qa-pvs { margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.qa-pvs-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--surface-2); }
.qa-pvs-h b { font-size: 13.5px; }
.qa-pvs-list { max-height: 260px; overflow: auto; }
.qa-pvs .qa-pv { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 0; background: none; border-top: 1px solid var(--line); }
.qa-pvs .qa-pv:first-child { border-top: 0; }
.qa-pvs .qa-pv .avatar { flex: none; }
.qa-pvs .qa-pv-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qa-pvs .qa-pv-h small { margin: 0; }
.qa-pvs .qa-pv p { margin: 4px 0 0; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--accent-soft); font-size: 13px; line-height: 1.8; }

/* No visible scrollbars anywhere (pages, popups, panels, lists); scrolling still works */
*, *::before, *::after { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }

/* Makeup mode/slot + move-online room card */
.qa-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1700px) { .qa-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .qa-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa-dt3.two { grid-template-columns: minmax(0, 1fr) auto; }
.qa-slot { margin-bottom: 12px; }
.qa-mode-tag { display: inline-flex; align-items: center; gap: 6px; }
.qa-nexts { display: grid; gap: 8px; margin-top: 12px; }
.qa-next { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.qa-next > svg { color: var(--accent); flex: none; }
.qa-next b { display: block; font-size: 13.5px; }
.qa-next small { color: var(--muted); font-size: 12px; }
.qa-room { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.qa-room-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.qa-room small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.qa-room .grow b { font-size: 14px; color: var(--accent-ink); word-break: break-all; }
.qa-code b { display: flex; gap: 5px; }
.qa-code i { font-style: normal; width: 30px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 800 17px/1 ui-monospace, monospace; color: var(--ink); }
@media (max-width: 720px) { .qa-room { flex-wrap: wrap; } .qa-dt3.two { grid-template-columns: 1fr; } }

/* Remote teacher: five quick actions in one row on wide screens */
@media (min-width: 1500px) { .qa-pills.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Option cards with a round check (attachments, student pickers): one look across popups */
.qa-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; transition: border-color .12s, background .12s; }
.qa-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.qa-opt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.qa-opt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.qa-opt.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.qa-opt.on b { color: var(--accent); }
.qa-check, .sr-box { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid #dcdfe2; background: var(--surface); display: grid; place-items: center; color: #fff; transition: background .12s, border-color .12s; }
.qa-opt.on .qa-check, .sr-card.on .sr-box { background: var(--accent); border-color: var(--accent); }
.qa-check svg, .sr-box svg { stroke-width: 2.6; }
.sr-box svg { width: 14px; height: 14px; }
.sr-card { border-radius: 16px; }
.sr-card.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.sr-card.on .sr-card-t b { color: var(--accent); }
.qa-att { gap: 10px; }

/* ===== Sidebar v2 (reference screenshot): roomier rows, round icon chips, wide active pill ===== */
:root { --rail-w: 314px; }
.rail { padding: 18px 18px 18px 22px; gap: 10px; }
.rail-top { padding: 2px 4px 14px; }
.rail-toggle { width: 44px; height: 44px; }
.rail-scroll { gap: 4px; }
.rail-group { font-size: 12px; padding: 18px 16px 8px; }
.nav-item { height: 54px; gap: 14px; padding: 0 8px 0 16px; font-size: 15.5px; font-weight: 500; color: var(--ink-2); }
.nav-item .ico-wrap { width: 38px; height: 38px; }
.nav-item .ico-wrap svg { width: 20px; height: 20px; }
.nav-item[aria-current="page"] { font-weight: 700; }
.nav-item[aria-current="page"]::after { display: none; }
.nav-count { min-width: 24px; height: 24px; font-size: 12.5px; }
/* Logo: quill + wordmark at a calm size, as in the reference */
.app .brand-logo .bl-full { display: none !important; }
.app .brand-logo .bl-img.bl-teal { display: block !important; width: 64px; }
:root[data-theme="dark"] .app .brand-logo .bl-img.bl-teal { display: none !important; }
:root[data-theme="dark"] .app .brand-logo .bl-img.bl-white { display: block !important; width: 64px; }
/* Collapsed rail keeps its own compact layout */
.app.rail-min .rail { padding: 18px 14px; }
.app.rail-min .nav-item { height: 56px; padding: 0; }
.app.rail-min .brand-logo .bl-img.bl-teal, :root[data-theme="dark"] .app.rail-min .brand-logo .bl-img.bl-white { width: 50px; }
.rail-scroll > * { flex: none; }

/* Mushaf while following a recitation (light): brand tint frame instead of beige, current word on the brand teal */
.sb-mushaf, .rv .sb-mushaf { background: var(--accent-soft); border-color: #cfe2e9; }
.sbw.cur { background: #2e7a93; color: #fff; box-shadow: 0 0 0 2px #2e7a93; }

/* Draggable playhead: bigger knob, no lag while dragging */
.rv .rv-wave { touch-action: none; }
.rv .rv-wave.dragging { cursor: grabbing; }
.rv .rv-wave.dragging .rv-headline, .rv .rv-wave.dragging span { transition: none; }
.rv-headline::before { width: 12px; height: 12px; top: -5px; box-shadow: 0 0 0 3px rgba(229, 72, 59, .2); }
.rv .rv-wave:hover .rv-headline::before { box-shadow: 0 0 0 5px rgba(229, 72, 59, .22); }

/* Result: three grades in one row; «يحتاج إعادة» opens how the student redoes it, right under it */
.seg2.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg2 button.redo[aria-checked="true"] { color: var(--bad); }
.redo-block { display: flex; flex-direction: column; gap: 8px; margin-top: -4px; }
.redo-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.redo-opts button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.redo-opts button:hover { border-color: var(--accent); }
.redo-opts button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.redo-sum { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.redo-sum > svg { flex: none; color: var(--accent); }
.redo-sum.solo b { display: block; font-size: 13px; color: var(--ink); }
.redo-sum.solo small { display: block; font-size: 12px; color: var(--muted); }
.sb-cta-hint { margin: 0; text-align: center; }
/* The decision buttons stay pinned at the bottom of the panel; everything else scrolls under them */
.rv .rv-decide { overflow-y: auto; scrollbar-width: none; }
.rv .rv-decide .sb-ctas { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 10px 0 12px; background: var(--surface); box-shadow: 0 -12px 14px -12px rgba(0, 0, 0, .12); }

/* ===== Teacher correction on the words: red = serious, orange = medium ===== */
:root { --sev-high: #d23c32; --sev-high-soft: rgba(210, 60, 50, .1); --sev-mid: #e08a1e; --sev-mid-soft: rgba(224, 138, 30, .13); }
.sbw.pickable { cursor: pointer; }
.sbw.pickable:hover { background: var(--accent-soft); }
.sbw.mk.sev-high, .sbw.err.sev-high { background: var(--sev-high-soft); text-decoration: underline wavy var(--sev-high); text-underline-offset: 8px; }
.sbw.mk.sev-mid, .sbw.err.sev-mid { background: var(--sev-mid-soft); text-decoration: underline wavy var(--sev-mid); text-underline-offset: 8px; }
.sbw.err.sev-mid .le { color: var(--sev-mid); }
.sbw.mk.sev-high { color: var(--sev-high); }
.sbw.mk.sev-mid { color: #b9690d; }
.sbw-pop-scrim { position: fixed; inset: 0; z-index: 80; }
.sbw-pop { position: fixed; z-index: 81; width: 260px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 6px; font-family: var(--f-ui); }
.sbw-pop.up { transform: translateY(-100%); }
@keyframes pkIn { from { opacity: 0; } to { opacity: 1; } }
.pk-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.pk-word { font-family: var(--f-quran); font-size: 24px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.pk-grp { display: flex; flex-direction: column; gap: 2px; }
.pk-sev { font-size: 11px; font-weight: 700; padding: 4px 6px 2px; }
.pk-sev.sev-high { color: var(--sev-high); } .pk-sev.sev-mid { color: var(--sev-mid); }
.pk-row { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 10px; border-radius: 10px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); text-align: start; cursor: pointer; }
.pk-row:hover { background: var(--surface-2); }
.pk-row.on.sev-high { background: var(--sev-high-soft); color: var(--sev-high); font-weight: 600; }
.pk-row.on.sev-mid { background: var(--sev-mid-soft); color: #b9690d; font-weight: 600; }
.pk-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.sev-high .pk-dot, .pk-row.sev-high .pk-dot { background: var(--sev-high); }
.sev-mid .pk-dot, .pk-row.sev-mid .pk-dot { background: var(--sev-mid); }
.pk-clear { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 2px; border-radius: 10px; border: 1px dashed var(--line-2); background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.pk-clear:hover { color: var(--ink); }
.sb-err-chip.sev-high, .sb-err-chip.sev-mid { display: inline-flex; align-items: center; gap: 6px; }
.sb-err-chip.sev-high { background: var(--sev-high-soft); color: var(--sev-high); }
.sb-err-chip.sev-mid { background: var(--sev-mid-soft); color: #b9690d; }

/* ===== «يحتاج إعادة»: options stacked, full width ===== */
.redo-block { gap: 8px; margin-top: 0; }
.redo-opts { display: flex; flex-direction: column; gap: 6px; }
.redo-opts button { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 54px; padding: 8px 12px; border-radius: 14px; justify-content: flex-start; text-align: start; white-space: normal; }
.redo-opts button b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.redo-opts button small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.redo-opts .ro-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.redo-opts .ro-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; }
.redo-opts button[aria-checked="true"] .ro-ic { background: var(--accent); color: #fff; }
.redo-opts button[aria-checked="true"] .ro-radio { background: var(--accent); border-color: var(--accent); }
.redo-opts button[aria-checked="true"] b { color: var(--accent-ink); }
/* The individual-session card: icon + title on one line, «تعديل» in the corner, details full width */
.solo-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.solo-top { display: flex; align-items: center; gap: 8px; }
.solo-top b { font-size: 14px; color: var(--ink); }
.solo-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.solo-edit { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; flex: none; }
.solo-edit:hover { border-color: var(--accent); color: var(--accent-ink); }
.solo-desc { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.solo-note { display: flex; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.solo-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--warm); }
.solo-place { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.solo-place .field-l { font-size: 13px; font-weight: 700; }

/* ===== Decided recitation: result · note · next task, then a clear edit button ===== */
.sb-done .dn-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.sb-done .dn-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sb-done .dn-label svg { color: var(--accent); }
.sb-done .dn-row { display: flex; align-items: center; gap: 12px; }
.sb-done .dn-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.sb-done .dn-result.ok .dn-ic { background: var(--accent); }
.sb-done .dn-result.redo .dn-ic { background: var(--bad); }
.sb-done .dn-row b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.sb-done .dn-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sb-done .dn-result.ok { background: var(--accent-soft); border-color: transparent; }
.sb-done .dn-result.redo { background: var(--bad-soft); border-color: transparent; }
.sb-done .dn-errs { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-done .dn-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.sb-done .dn-text.muted { color: var(--muted); font-size: 13px; }
.sb-done .dn-next .dn-text { font-weight: 600; }
.sb-done .dn-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; }
.sb-done .dn-st.wait { color: var(--warm); } .sb-done .dn-st.ok { color: var(--accent); }
.sb-done .dn-edit { width: 100%; justify-content: center; gap: 8px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); font-weight: 600; }
.sb-done .dn-edit:hover { background: var(--ink); color: var(--on-ink); }
.sb-done .dn-sim { margin: 0; text-align: center; }

/* Word error menu v2: every error is a clear button; a chosen one can be cancelled */
.sbw-pop { width: 280px; padding: 12px; gap: 8px; }
.pk-head { flex-direction: row; align-items: flex-start; gap: 8px; }
.pk-head .grow { display: flex; flex-direction: column; gap: 2px; }
.pk-x { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.pk-grp { gap: 5px; }
.pk-row { height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; transition: border-color .12s, background .12s; }
.pk-row:hover { background: var(--surface); }
.pk-row.sev-high:hover { border-color: var(--sev-high); }
.pk-row.sev-mid:hover { border-color: var(--sev-mid); }
.pk-go { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.pk-row.sev-high:hover .pk-go { background: var(--sev-high); color: #fff; }
.pk-row.sev-mid:hover .pk-go { background: var(--sev-mid); color: #fff; }
.pk-row.on.sev-high { border-color: var(--sev-high); }
.pk-row.on.sev-mid { border-color: var(--sev-mid); }
.pk-undo { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--surface); border: 1px solid currentColor; font-size: 11.5px; font-weight: 600; }
.pk-clear { border: 1px solid var(--line-2); border-style: solid; color: var(--ink-2); font-weight: 600; height: 38px; }
.pk-clear:hover { border-color: var(--ink); color: var(--ink); }
/* Marked words in the panel */
.mk-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; scrollbar-width: none; }
.mk-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.mk-word { flex: none; min-width: 64px; padding: 0 8px; border-radius: 9px; border: 0; font-family: var(--f-quran); font-size: 19px; line-height: 1.7; cursor: pointer; }
.mk-word.sev-high { background: var(--sev-high-soft); color: var(--sev-high); }
.mk-word.sev-mid { background: var(--sev-mid-soft); color: #b9690d; }
.mk-types { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.mk-type { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px 0 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.mk-type button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.mk-type button:hover { background: var(--bad); color: #fff; }
.mk-clear-all { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; text-decoration: underline; }
.mk-clear-all:hover { color: var(--bad); }
.mk-hint { margin: 6px 0 0; }

/* Individual-session popup: same size whatever the mode (place row always present, summary always shown) */
.qa-modal:has(.solo-place) .modal-body { min-height: 610px; }
.solo-place { min-height: 84px; }
.solo-place .input { margin-top: 2px; }
.solo-room { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.solo-room svg { color: var(--accent); flex: none; }
.qa-sum.empty { background: var(--surface-2); color: var(--muted); }
.solo-attach { margin-top: 10px; min-height: 60px; }

/* System note inside the word menu: the teacher confirms, dismisses or changes it */
.pk-sys { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.pk-sys.sev-high { border-color: color-mix(in srgb, var(--sev-high) 35%, transparent); background: var(--sev-high-soft); }
.pk-sys.sev-mid { border-color: color-mix(in srgb, var(--sev-mid) 40%, transparent); background: var(--sev-mid-soft); }
.pk-sys.no { opacity: .75; }
.pk-sys-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.pk-sys b { font-size: 13.5px; color: var(--ink); } .pk-sys b small { font-weight: 500; color: var(--muted); }
.pk-sys-m { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pk-sys-a { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pk-sys-a button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pk-sys-a button.ok { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pk-sys-a button:hover { border-color: var(--ink); }
.pk-sys-s { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pk-sys-h { font-size: 11px; color: var(--muted); }
/* Zoom the mushaf page */
.sbm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sbm-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); margin-inline-start: auto; order: 3; }
.sbm-zoom button { width: 30px; height: 28px; border-radius: 8px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sbm-zoom button:hover:not(:disabled) { background: var(--surface-2); }
.sbm-zoom button:disabled { opacity: .35; cursor: default; }
.sbm-zoom b { min-width: 40px; text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sbm-tip { margin-inline-start: 6px; }
.rec-fit .sbm-text.zoomed { overflow-y: auto !important; scrollbar-width: none; }
/* Decided cards: all three identical (grey frame, small label, one line of text) */
.sb-done .dn-text b { font-weight: 600; }
.sb-done .dn-next .dn-text { font-weight: 400; }
.sb-done .dn-meta { color: var(--muted); font-size: 13px; }
.sb-done .dn-card.redo .dn-label svg { color: var(--bad); }
.sb-done .dn-text, .sb-done .dn-next .dn-text, .sb-done .dn-text b { font-size: 14px; font-weight: 600; } .sb-done .dn-text.muted { font-weight: 400; }
/* Breathing room between the ayat and both sides of the page frame */ .sb-mushaf .sbm-text, .rec-fit .sb-mushaf .sbm-text { padding: 12px 24px !important; }
.sbw-pop { overflow-y: auto; scrollbar-width: none; } .sbw-pop.up { transform: none; }

/* ===== Circle page v2 ===== */
/* Hover tooltip for any element with data-tip */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; white-space: nowrap; padding: 6px 10px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; line-height: 1.4; pointer-events: none; box-shadow: var(--shadow-pop); }
/* Section switch: count badge */
.grp-sw-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
/* Stat cards (reference: icon + label, big value, pill sub-line) */
.gs-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1400px) { .gs-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gs-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
a.gs-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.gs-top { display: flex; align-items: center; gap: 9px; }
.gs-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.gs-l { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.gs-v { font-family: var(--f-display); font-size: 26px; font-weight: 700; line-height: 1; }
.gs-sub { display: block; padding: 8px 10px; border-radius: 99px; background: var(--surface-2); font-size: 12px; color: var(--muted); text-align: center; }
.gs-card.ink .gs-ic { background: var(--ink); color: var(--on-ink); }
.gs-card.ok .gs-ic, .gs-card.accent .gs-ic { background: var(--accent); }
.gs-card.lime .gs-ic { background: var(--brand-lime); color: var(--on-lime); }
.gs-card.bad .gs-ic { background: var(--bad); } .gs-card.bad .gs-v { color: var(--bad); }
.gs-card.warm .gs-ic { background: var(--warm); } .gs-card.warm .gs-v { color: var(--warm); }
.gs-card.ok .gs-v, .gs-card.accent .gs-v { color: var(--accent); }
/* Students table on the circle page: everything centred except the student */
.grp-roster .tbl th, .grp-roster .tbl td { text-align: center; vertical-align: middle; }
.grp-roster .tbl th:nth-child(2), .grp-roster .tbl td:nth-child(2) { text-align: start; }
.grp-roster .tbl td .row, .grp-roster .att-dots { justify-content: center; margin-inline: auto; }
.grp-roster .tbl th .sort-head, .grp-roster .tbl th button { margin-inline: auto; }
.btn-file { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-file svg { color: var(--accent); }
.btn-file:hover { border-color: var(--accent); }
/* Tables in a card with a header */
.gt-card { overflow: hidden; }
.gt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 20px 12px; }
.gt-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 20px 12px; font-size: 12px; color: var(--muted); }
.gt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gt-legend .tk { width: 22px; height: 22px; border-radius: 7px; }
/* «المهام السبع» */
.gt-tbl th, .gt-tbl td { text-align: center; vertical-align: middle; }
.gt-tbl th:first-child, .gt-tbl td:first-child { text-align: start; }
.gt-th b { display: block; font-size: 14px; color: var(--ink); }
.gt-th span { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tk { width: 34px; height: 34px; margin-inline: auto; border-radius: 10px; display: grid; place-items: center; font-size: 13px; cursor: default; }
.tk.done { background: var(--accent-soft); color: var(--accent); }
.tk.part { background: color-mix(in srgb, var(--brand-lime) 45%, var(--surface)); color: var(--on-lime); }
.tk.todo { background: var(--surface); border: 1px solid var(--line-2); }
.tk.todo i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.tk.debt { background: var(--bad-soft); color: var(--bad); }
.tk.na, .tk.lock { background: var(--surface-2); color: var(--muted); }
.gt-tbl tr.is-complete td { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.gt-p { display: inline-flex; align-items: center; gap: 8px; }
.gt-bar { width: 56px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.gt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.gt-acts { display: inline-flex; gap: 6px; }
.gt-act { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 99px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gt-act.alt { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.gt-act:hover:not(:disabled) { opacity: .88; }
.gt-act:disabled { background: var(--surface-2); color: var(--muted); border: 1px solid transparent; cursor: not-allowed; opacity: .7; }
.p-sub.bad-t { color: var(--bad); }
/* «المهام غير المكتملة» table */
.lt-tbl th, .lt-tbl td { text-align: center; vertical-align: middle; }
.lt-tbl th:first-child, .lt-tbl td:first-child { text-align: start; }
.lt-tbl tr.is-done td { opacity: .7; }
.lt-grp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.lt-days { font-size: 13px; background: none; } .lt-days.lt-d2 { color: var(--warm); } .lt-days.lt-d3 { color: var(--bad); }
.l7-row { display: inline-flex; gap: 4px; direction: rtl; }
.l7 { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); opacity: .65; cursor: default; }
.l7.miss { opacity: 1; background: var(--brand-lime); color: var(--on-lime); }
.l7.miss.first { box-shadow: inset 0 0 0 2px var(--on-lime); }
.lt-cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lt-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); }
.lt-edit { width: 28px; height: 28px; margin-inline-start: 6px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.lt-page .lt-tblwrap { background: var(--surface); border-radius: 20px; border: 1px solid var(--line); }
/* Sidebar: no group headings (more room, the whole menu fits); a small gap still separates the groups */ .rail .rail-group { height: 6px; padding: 0; overflow: hidden; font-size: 0; color: transparent; }
/* Rows adapt to the screen height so the whole menu fits without scrolling (54px on tall screens) */
.app:not(.rail-min) .rail-scroll .nav-item { --nav-h: clamp(36px, calc((100vh - 240px) / 12 - 5px), 54px); height: var(--nav-h); }
.app:not(.rail-min) .rail-scroll .nav-item .ico-wrap { width: clamp(30px, calc(var(--nav-h) - 12px), 38px); height: clamp(30px, calc(var(--nav-h) - 12px), 38px); }
/* Stat cards v2: exactly the reference — brand-coloured icon square, ink value, grey pill; no links */
.gs-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gs-card { gap: 12px; padding: 16px 18px; border-radius: 22px; cursor: default; }
.gs-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--accent) !important; color: #fff !important; }
.gs-l { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gs-v { font-size: 24px; color: var(--ink) !important; }
.gs-sub { padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
/* Missing-task numbers: colour by how many are missing; «متأخر منذ» stays in ink */
.l7.miss { background: var(--accent); color: #fff; box-shadow: none; }
.l7.miss.mid { background: #e08a1e; }
.l7.miss.hi { background: var(--bad); }
.lt-days, .lt-days.lt-d2, .lt-days.lt-d3 { color: var(--ink); }
/* Incomplete tasks: numbers always in the brand colour; severity is shown by the risk dots only */
.l7.miss, .l7.miss.mid, .l7.miss.hi { background: var(--accent); color: #fff; }
.lt-risk i.on { background: var(--accent); }
.lt-risk.mid i.on { background: #e08a1e; }
.lt-risk.hi i.on { background: var(--bad); }

/* Attendance log: move between sessions; coming sessions are locked */
.att-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.att-nav { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.att-nav-b { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.att-nav-b:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); }
.att-nav-b:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.att-nav-r { display: flex; flex-direction: column; align-items: center; min-width: 150px; line-height: 1.3; }
.att-nav-r b { font-size: 13px; color: var(--ink); }
.att-nav-r small { font-size: 11px; color: var(--muted); }
.att-nav-today { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }
.att-matrix th.is-future { color: var(--muted); }
.att-matrix th.is-today { color: var(--accent); }
.att-cell.att-lock { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line-2); display: inline-grid; place-items: center; }
.att-cell.att-none { background: none; color: var(--muted); display: inline-grid; place-items: center; }
/* Search boxes: a light grey outline so they read as a field on white cards */ .search .input { border: 1px solid var(--line-2) !important; } .search .input:focus { border-color: var(--accent) !important; }

/* ===== Circle stat cards v3: light card, soft glow of one brand colour + two faint sparkles ===== */
.gs-card.g2 { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); --tone: #2e7a93; --tone2: #8fc3d6; }
.gs-card.g2.lime { --tone: #b6dd3a; --tone2: #e3f5a8; }
.gs-card.g2.ink { --tone: #1a3640; --tone2: #8a959b; }
.gs-card.g2.grey { --tone: #8a9398; --tone2: #d5dadd; }
.gs-card.g2 .gs-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 75% at 4% 0%, color-mix(in srgb, var(--tone) 30%, transparent) 0%, transparent 70%),
    radial-gradient(45% 60% at 30% -10%, color-mix(in srgb, var(--tone2) 55%, transparent) 0%, transparent 70%); }
.gs-card.g2 .gs-glow::before, .gs-card.g2 .gs-glow::after { content: ""; position: absolute; width: 16px; height: 16px; opacity: .9;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 0c.6 6 5.4 11.4 12 12-6.6.6-11.4 6-12 12-.6-6-5.4-11.4-12-12C6.6 11.4 11.4 6 12 0z'/%3E%3C/svg%3E"); }
.gs-card.g2 .gs-glow::before { left: 22%; top: 18px; }
.gs-card.g2 .gs-glow::after { left: 12%; top: 46px; width: 10px; height: 10px; opacity: .75; }
.gs-card.g2 .gs-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--surface) !important; color: var(--tone) !important; border: 1px solid var(--line); box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .12); display: grid; place-items: center; }
.gs-card.g2.lime .gs-ic { color: #6f8f12 !important; }
.gs-card.g2 .gs-body { display: flex; flex-direction: column; gap: 2px; }
.gs-card.g2 .gs-v { font-family: var(--f-display); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink) !important; }
.gs-card.g2 .gs-l { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gs-card.g2 .gs-sub { display: block; padding: 0; margin-top: 2px; background: none; border-radius: 0; text-align: start; font-size: 12.5px; color: var(--muted); }
:root[data-theme="dark"] .gs-card.g2 .gs-glow { opacity: .55; }
:root[data-theme="dark"] .gs-card.g2.ink { --tone: #8a959b; --tone2: #355762; }
:root[data-theme="dark"] .gs-card.g2 .gs-glow::before, :root[data-theme="dark"] .gs-card.g2 .gs-glow::after { opacity: .35; }
:root[data-theme="dark"] .gs-card.g2 .gs-ic { background: var(--surface-2) !important; }
:root[data-theme="dark"] .gs-card.g2.ink .gs-ic { color: var(--ink) !important; }
:root[data-theme="dark"] .gs-card.g2.lime .gs-ic { color: var(--brand-lime) !important; }

/* ===== «حلقاتي» circle cards v2: light card + soft glow of the circle colour (reference sheet) ===== */
.gx { --tone: #1a3640; --tone2: #8a959b; background: var(--surface) !important; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 36px -30px rgba(20, 23, 25, .35); }
.gx.brand { --tone: #2e7a93; --tone2: #8fc3d6; }
.gx.lime { --tone: #6a7578; --tone2: #b1eb51; }
.gx::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 40% at 0% 0%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 72%),
              radial-gradient(40% 30% at 28% -6%, color-mix(in srgb, var(--tone2) 45%, transparent), transparent 72%); }
.gx::after { content: ""; position: absolute; z-index: -1; left: 18%; top: 22px; width: 16px; height: 16px; opacity: .9; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 0c.6 6 5.4 11.4 12 12-6.6.6-11.4 6-12 12-.6-6-5.4-11.4-12-12C6.6 11.4 11.4 6 12 0z'/%3E%3C/svg%3E"); }
.gx .gx-star { display: none; }
.gx .gx-ico { background: var(--surface); color: var(--tone); border: 1px solid var(--line); box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .12); }
.gx .gx-head span, .gx .gx-lab { opacity: 1; color: var(--muted); }
.gx .gx-more { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.gx .gx-big b { color: var(--ink); }
.gx .gx-mem { background: var(--surface-2); }
.gx .gx-line { background: var(--surface-3); }
.gx .gx-line span { background: var(--tone); box-shadow: none; }
.gx .gx-seg .a, .gx .gx-legend i.a { background: var(--tone); }
.gx .gx-seg .b, .gx .gx-legend i.b { background: color-mix(in srgb, var(--tone) 35%, var(--surface)); }
.gx .gx-seg .c { background: repeating-linear-gradient(135deg, var(--line-2) 0 5px, transparent 5px 10px); border: 1px solid var(--line-2); }
.gx .gx-legend { opacity: 1; color: var(--ink-2); }
.gx .gx-legend i.c { border: 1px dashed var(--line-2); background: none; }
.gx .gx-tile { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.gx .gx-tile:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); }
.gx .gx-tile-h { opacity: 1; color: var(--muted); }
.gx .gx-go { background: var(--surface-2); color: var(--ink-2); }
.gx .gx-tile-b small { opacity: 1; color: var(--muted); }
.gx .gx-bars i { background: var(--surface-3); }
.gx .gx-bars i.on { background: var(--tone); }
.gx .gx-next .avatar { box-shadow: 0 0 0 2px var(--surface); }
.gx .gx-cta { background: var(--tone); color: #fff; }
.gx .gx-cta:hover { background: color-mix(in srgb, var(--tone) 85%, #000); }
.gx .gx-cta.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.gx .gx-cta.ghost:hover { background: var(--surface-3); }
:root[data-theme="dark"] .gx { box-shadow: none; }
:root[data-theme="dark"] .gx::before { opacity: .6; }
:root[data-theme="dark"] .gx::after { opacity: .35; }
:root[data-theme="dark"] .gx.ink { --tone: #aeb6bb; --tone2: #355762; }
:root[data-theme="dark"] .gx.lime { --tone: #9aa4a8; }
:root[data-theme="dark"] .gx .gx-cta { background: var(--tone); color: #fff; }
:root[data-theme="dark"] .gx.ink .gx-cta { color: #13282f; }
:root[data-theme="dark"] .gx .gx-cta svg { color: inherit; }
:root[data-theme="dark"] .gx .gx-cta.ghost { background: var(--surface-2); color: var(--ink); }
/* No sparkles on any card (product owner) */ .gx::after, .gs-card.g2 .gs-glow::before, .gs-card.g2 .gs-glow::after { display: none !important; }

/* ===================== Schedule v3 (week by prayer times) ===================== */
.sc3 .sc-head .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.sc-seg button { height: 38px; padding: 0 20px; border-radius: 99px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sc-seg button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.sc-range { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.sc-range b { min-width: 190px; text-align: center; font-size: 14px; }
.sc-range button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sc-range button:hover { background: var(--surface-2); }
.sc-req { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 99px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sc-req small { font-size: 11.5px; opacity: .65; font-weight: 500; }
.sc3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 1300px) { .sc3-grid { grid-template-columns: 1fr; } }
.wk-card { padding: 16px; border-radius: 26px; }
.wk-grid { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); gap: 8px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; border: 0; background: var(--surface-2); font: inherit; color: var(--ink); cursor: pointer; position: relative; }
.wk-day b { font-size: 15px; } .wk-day span { font-size: 12.5px; color: var(--muted); } .wk-day small { font-size: 11px; color: var(--muted); }
.wk-day.today { background: var(--ink); color: var(--on-ink); } .wk-day.today span, .wk-day.today small { color: color-mix(in srgb, var(--on-ink) 75%, transparent); }
.wk-ms { position: absolute; top: 8px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.wk-ms.lime { background: var(--brand-lime); } .wk-ms.ink { background: var(--ink-2); }
.wk-p { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); text-align: start; }
.wk-p b { font-size: 15px; } .wk-p small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.wk-cell { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 6px; border-radius: 16px; background: var(--surface-2); }
.wk-cell.today { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Events */
.wk-ev { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border-radius: 13px; border: 0; font: inherit; text-align: start; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.wk-ev:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .45); }
.wk-ev-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; opacity: .85; }
.wk-ev b { font-size: 13px; line-height: 1.35; }
.wk-ev small { font-size: 11px; opacity: .75; }
.wk-ev.ink, .dv-ev.ink { background: #1a3640; color: #fff; }
.wk-ev.brand, .dv-ev.brand { background: #2e7a93; color: #fff; }
.wk-ev.lime, .dv-ev.lime { background: #6a7578; color: #fff; }
.wk-ev.mk, .dv-ev.mk { background: #e8eef1; color: var(--ink); box-shadow: inset 3px 0 0 #2e7a93; }
.wk-ev.wait, .dv-ev.wait { background: var(--surface); color: var(--ink); border: 1.5px dashed #e0a24a; }
.wk-tag { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.wk-tag.now { background: var(--brand-lime); color: var(--on-lime); }
.wk-tag.ok { background: rgba(46, 122, 147, .14); color: #235d71; }
.wk-tag.wait { background: rgba(224, 162, 74, .18); color: #a3650f; }
.wk-tag.mu { background: rgba(255, 255, 255, .2); color: inherit; }
/* Day view */
.dv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dv-tab { height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.dv-tab.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.dv-rows { display: flex; flex-direction: column; gap: 8px; }
.dv-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.dv-list { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 72px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.dv-empty { font-size: 12.5px; color: var(--muted); }
.dv-ev { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 72px; padding: 12px 18px; border-radius: 18px; border: 0; font: inherit; text-align: start; cursor: pointer; }
.dv-t b { display: block; font-size: 20px; } .dv-t small { font-size: 12px; opacity: .75; }
.dv-m { flex: 1; } .dv-m b { display: block; font-size: 16px; } .dv-m small { font-size: 12.5px; opacity: .8; }
/* Side panel */
.sc3-side { display: flex; flex-direction: column; gap: 16px; }
.sp-card { padding: 18px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; }
.sp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sp-h b { font-size: 16px; } .sp-h small { font-size: 12px; color: var(--muted); }
.sp-list { display: flex; flex-direction: column; gap: 8px; }
.sp-ev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: start; cursor: pointer; }
.sp-ev:hover { border-color: var(--accent); }
.sp-bar { width: 5px; align-self: stretch; border-radius: 4px; flex: none; }
.sp-bar.ink { background: #1a3640; } .sp-bar.brand { background: #2e7a93; } .sp-bar.lime { background: #6a7578; } .sp-bar.mk { background: #9fc6d4; } .sp-bar.wait { background: #e0a24a; }
.sp-t b { display: block; font-size: 16px; } .sp-t small { font-size: 11.5px; color: var(--muted); }
.sp-m { flex: 1; min-width: 0; } .sp-m b { display: block; font-size: 14px; } .sp-m small { font-size: 12px; color: var(--muted); }
.sp-pray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sp-pr { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: var(--surface-2); }
.sp-pr small { font-size: 12px; color: var(--muted); } .sp-pr b { font-size: 14px; }
.sp-pr.next { background: var(--ink); color: var(--on-ink); } .sp-pr.next small { color: inherit; opacity: .75; }
.sp-slots { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.sp-slots > small { font-size: 11.5px; color: var(--muted); text-align: center; }
.sp-slots > small.sp-sl { text-align: start; }
.sp-slot { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.sp-slot.on { background: var(--accent); border-color: var(--accent); }
.sp-slot:hover { border-color: var(--accent); }
/* Detail card */
.pd-scrim { position: fixed; inset: 0; z-index: 80; }
.pd { position: fixed; z-index: 81; width: 300px; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
.pd-top { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #1a3640; color: #fff; }
.pd.brand .pd-top { background: #2e7a93; } .pd.lime .pd-top { background: #6a7578; }
.pd.mk .pd-top { background: #e8eef1; color: var(--ink); box-shadow: inset 0 -3px 0 #2e7a93; }
.pd.wait .pd-top { background: #fff4e3; color: #6b4a12; }
.pd-top small { font-size: 12px; opacity: .8; } .pd-top b { font-size: 19px; } .pd-top span { font-size: 17px; font-weight: 700; }
.pd-x { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: inherit; display: grid; place-items: center; cursor: pointer; }
.pd.mk .pd-x, .pd.wait .pd-x { background: rgba(0, 0, 0, .06); }
.pd-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.pd-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .pd-row span { color: var(--muted); } .pd-row b { text-align: end; }
.pd-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pd-main { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 99px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.pd-main.soft { background: var(--surface-2); color: var(--ink); }
.pd-btn { height: 44px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.pd-btn small { font-size: 11.5px; color: var(--muted); }
.pd-btn:hover { border-color: var(--ink); }
/* Dark mode */
:root[data-theme="dark"] .wk-ev.ink, :root[data-theme="dark"] .dv-ev.ink, :root[data-theme="dark"] .pd.ink .pd-top { background: #3d474d; }
:root[data-theme="dark"] .wk-ev.mk, :root[data-theme="dark"] .dv-ev.mk, :root[data-theme="dark"] .pd.mk .pd-top { background: #33454d; color: var(--ink); }
:root[data-theme="dark"] .pd.wait .pd-top { background: #4a3b22; color: #f3d9a8; }
:root[data-theme="dark"] .wk-tag.ok { background: rgba(159, 211, 229, .16); color: var(--accent-ink); }
:root[data-theme="dark"] .wk-tag.wait { color: #f2b45c; }
:root[data-theme="dark"] .sp-bar.ink { background: #aeb6bb; }
/* Schedule detail card, shown in the side column in place of «اليوم» */
.sdc { display: block; padding: 0; overflow: hidden; border-radius: 24px; }
.sdc-top { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 20px 20px; background: #1a3640; color: #fff; }
.sdc.brand .sdc-top { background: #2e7a93; } .sdc.lime .sdc-top { background: #6a7578; }
.sdc.mk .sdc-top { background: #e8eef1; color: var(--ink); box-shadow: inset 0 -3px 0 #2e7a93; }
.sdc.wait .sdc-top { background: #fff4e3; color: #6b4a12; }
.sdc-top small { font-size: 12.5px; opacity: .8; }
.sdc-top b { font-size: 22px; line-height: 1.3; }
.sdc-top span { font-size: 20px; font-weight: 700; }
.sdc-x { position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: inherit; display: grid; place-items: center; cursor: pointer; }
.sdc.mk .sdc-x, .sdc.wait .sdc-x { background: rgba(0, 0, 0, .06); }
.sdc-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.sdc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.sdc-row span { color: var(--muted); flex: none; }
.sdc-row b { text-align: end; }
.sdc-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sdc-main { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 99px; border: 0; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.sdc-main.soft { background: var(--surface-2); color: var(--ink); }
.sdc-btn { height: 48px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.sdc-btn small { font-size: 12px; color: var(--muted); }
.sdc-btn:hover { border-color: var(--ink); }
:root[data-theme="dark"] .sdc.ink .sdc-top { background: #3d474d; }
:root[data-theme="dark"] .sdc.mk .sdc-top { background: #33454d; color: var(--ink); }
:root[data-theme="dark"] .sdc.wait .sdc-top { background: #4a3b22; color: #f3d9a8; }
/* the selected event is outlined in the grid */
.wk-ev.sel, .dv-ev.sel, .sp-ev.sel { outline: 2px solid var(--brand-lime); outline-offset: 2px; }
/* Makeup-or-cancel popup: same size whichever tab is on */
.qa-modal.qa-fixed { height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; }
.qa-modal.qa-fixed .modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.qa-op-top { margin-bottom: 14px; }
.qa-op-top .qa-switch { width: 100%; display: flex; }
.qa-op-top .qa-switch > * { flex: 1; justify-content: center; }
/* Mushaf pages strip: pages outside the chosen surah are dimmed */
.mp2-thumb.out { opacity: .45; }
.mp2-thumb.out:hover { opacity: .8; }
/* Dark: glass strip instead of the bright light-gray band */
:root[data-theme="dark"] .mp2-strip { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .mp2-thumb { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .mp2-thumb:hover { background: rgba(255, 255, 255, .15); }
:root[data-theme="dark"] .mp2-thumb .mp2-lines i { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .mp2-thumb b { background: rgba(255, 255, 255, .12); color: #d5dde1; }
:root[data-theme="dark"] .mp2-thumb.on { background: #e8eef1; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .mp2-thumb.on .mp2-lines i { background: #b9c4ca; }
/* ===== التثبيت والإجازات: skeleton template ===== */
.sk-page { --sk-s: rgba(26, 54, 64, .78); --sk-f: rgba(26, 54, 64, .11); --sk-line: rgba(26, 54, 64, .07); }
.sk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sk-head .page-head { margin: 0; flex: 1; }
.sk-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.sk-tabs button { height: 38px; padding: 0 18px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sk-tabs button.on { background: var(--ink); color: var(--on-ink, #fff); }
.sk { display: block; height: 11px; border-radius: 99px; background: var(--sk-s); flex: none; }
.sk.f { background: var(--sk-f); }
.sk-pair { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.sk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.sk-stat { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.sk-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--sk-f); flex: none; }
.sk-pill { width: 56px; height: 24px; border-radius: 99px; background: var(--sk-f); flex: none; }
.sk-num { align-items: flex-end; gap: 10px; }
.sk-big { width: 34px; height: 30px; border-radius: 8px; }
.sk-big.sm { width: 52px; height: 24px; }
.sk-stat.dark { background: #1a3640; border-color: #1a3640; --sk-s: rgba(255, 255, 255, .86); --sk-f: rgba(255, 255, 255, .16); }
.sk-stat.dark .sk-ic { background: #b1eb51; }
.sk-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; margin-top: 22px; align-items: start; }
.sk-list { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.sk-search { width: 300px; max-width: 40%; height: 46px; border-radius: 99px; background: var(--surface-2); flex: none; }
.sk-filters { display: flex; gap: 8px; }
.sk-fchip { width: 96px; height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.sk-fchip.on { width: 72px; background: var(--ink); border-color: var(--ink); }
.sk-items { display: flex; flex-direction: column; gap: 10px; }
.sk-item { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(110px, 1fr) minmax(0, 1.6fr) 100px; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 18px; background: var(--surface-2); border: 1.5px solid transparent; }
.sk-item.sel { border-color: #2e7a93; background: color-mix(in srgb, #2e7a93 6%, var(--surface)); }
.sk-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sk-av { width: 50px; height: 50px; border-radius: 50%; background: var(--sk-s); opacity: .85; flex: none; }
.sk-av.lg { width: 58px; height: 58px; background: transparent; border: 2px solid var(--sk-f); opacity: 1; }
.sk-chips { display: flex; gap: 8px; justify-content: center; }
.sk-chip { width: 112px; height: 32px; border-radius: 99px; background: var(--sk-f); }
.sk-chip.dash { background: none; border: 1.5px dashed #e3a63a; }
.sk-chip.ghost { background: none; border: 1.5px solid var(--sk-f); }
.sk-pill.wide { width: 92px; height: 30px; justify-self: start; }
.sk-pill.lime { background: rgba(177, 235, 81, .55); }
.sk-pill.warm { background: rgba(242, 184, 75, .3); }
.sk-pill.none { background: none; border: 1.5px solid var(--sk-f); }
.sk-side { overflow: hidden; }
.sk-side-top { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #1a3640; --sk-s: rgba(255, 255, 255, .86); --sk-f: rgba(255, 255, 255, .16); }
.sk-side-top .sk-row { margin-bottom: 14px; }
.sk-side-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
.sk-cond { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.sk-dot { width: 30px; height: 30px; border-radius: 50%; background: rgba(46, 122, 147, .35); flex: none; }
.sk-score { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); }
.sk-prog { display: block; height: 8px; border-radius: 99px; background: var(--sk-f); overflow: hidden; }
.sk-prog b { display: block; width: 88%; height: 100%; margin-inline-start: auto; border-radius: inherit; background: rgba(46, 122, 147, .55); }
.sk-note { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
:root[data-theme="dark"] .sk-page { --sk-s: rgba(255, 255, 255, .72); --sk-f: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .sk-stat.dark, :root[data-theme="dark"] .sk-side-top { background: #3a444a; border-color: #3a444a; }
:root[data-theme="dark"] .sk-fchip.on { background: #e8eef1; border-color: #e8eef1; }
@media (max-width: 1200px) { .sk-stats { grid-template-columns: repeat(2, 1fr); } .sk-main { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sk-stats { grid-template-columns: 1fr; } .sk-item { grid-template-columns: 1fr auto; } .sk-what, .sk-chips { display: none; } .sk-search { display: none; } .sk-tabs { overflow-x: auto; max-width: 100%; } }
.sk-stat .sk-row > .sk-pair { flex: 1; } .sk-stat .sk-row > .sk-pair + .grow { display: none; }
:root[data-theme="dark"] .sk-fchip:not(.on) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
/* Template v2: real labels, numbers as a dot, student data as bars */
.sk-n { display: inline-grid; place-items: center; min-width: 22px; font-size: 26px; line-height: 1; color: var(--ink); opacity: .55; }
.sk-ic { display: grid; place-items: center; color: #2e7a93; background: rgba(46, 122, 147, .1); }
.sk-stat.dark .sk-ic { background: #b1eb51; color: #1a3640; }
.sk-t { font-size: 19px; font-weight: 800; color: var(--ink); }
.sk-tag { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(46, 122, 147, .1); color: #2e7a93; }
.sk-sub { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); }
.sk-stat .sk-num { gap: 8px; font-size: 13px; color: var(--muted); }
.sk-stat .sk-num .sk-n { font-size: 34px; opacity: .7; }
.sk-foot { margin: 0; font-size: 12px; color: var(--muted); }
.sk-foot .sk-n { font-size: 16px; min-width: 0; }
.sk-stat.dark .sk-t, .sk-stat.dark .sk-n { color: #fff; }
.sk-stat.dark .sk-sub, .sk-stat.dark .sk-num, .sk-stat.dark .sk-foot { color: rgba(255, 255, 255, .7); }
.sk-stat.dark .sk-tag { background: rgba(255, 255, 255, .12); color: #fff; }
.sk-h { display: flex; flex-direction: column; gap: 6px; }
.sk-h b { font-size: 19px; font-weight: 800; }
.sk-h small { font-size: 12.5px; color: var(--muted); }
.sk-search { display: flex; align-items: center; gap: 8px; padding: 0 18px; line-height: 46px; font-size: 13.5px; color: var(--muted); }
.sk-fchip { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sk-fchip .sk-n { font-size: 16px; min-width: 0; }
.sk-fchip.on { width: auto; color: var(--on-ink, #fff); }
.sk-fchip.on .sk-n { color: inherit; }
.sk-chip { width: auto; height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12px; color: var(--ink-2); white-space: nowrap; background: rgba(46, 122, 147, .08); }
.sk-chip i { width: 7px; height: 7px; border-radius: 50%; background: #2e7a93; }
.sk-chip.part { background: rgba(227, 166, 58, .14); color: #a86a12; }
.sk-chip.part i, .sk-chip.wait i { background: #e3a63a; }
.sk-chip.wait { background: none; border: 1.5px dashed #e3a63a; color: #a86a12; }
.sk-chip.no { background: none; color: var(--muted); }
.sk-chip.no i { background: var(--line-2, #cfd5d8); }
.sk-status { justify-self: start; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sk-status.lime { background: rgba(177, 235, 81, .55); color: #1a3640; }
.sk-status.warm { background: rgba(242, 184, 75, .25); color: #8a5a10; }
.sk-status.none { color: var(--ink-2); }
.sk-item { grid-template-columns: minmax(170px, 1.2fr) minmax(100px, .8fr) minmax(0, 2fr) auto; }
.sk-k { font-size: 12px; color: rgba(255, 255, 255, .65); }
.sk-k2 { font-size: 14px; font-weight: 700; }
.sk-dot { display: grid; place-items: center; background: #2e7a93; color: #fff; }
.sk-cond .sk-pair b { font-size: 14px; }
.sk-score > .sk-row b { font-size: 14px; }
.sk-of { display: inline-flex; align-items: baseline; gap: 4px; color: #2e7a93; }
.sk-of .sk-n { color: #2e7a93; opacity: 1; font-size: 28px; }
.sk-of small { font-size: 12px; color: var(--muted); }
.sk-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.sk-line svg { flex: none; color: var(--muted); }
:root[data-theme="dark"] .sk-chip { background: rgba(92, 172, 199, .12); color: #d5dde1; }
:root[data-theme="dark"] .sk-chip i { background: #5cacc7; }
:root[data-theme="dark"] .sk-chip.no { background: none; color: var(--muted); }
:root[data-theme="dark"] .sk-chip.no i { background: rgba(255, 255, 255, .2); }
:root[data-theme="dark"] .sk-chip.wait, :root[data-theme="dark"] .sk-chip.part { color: #f2c47a; }
:root[data-theme="dark"] .sk-tag { background: rgba(92, 172, 199, .14); color: #8fd0e4; }
:root[data-theme="dark"] .sk-ic { color: #8fd0e4; background: rgba(92, 172, 199, .14); }
:root[data-theme="dark"] .sk-stat.dark .sk-ic { background: #b1eb51; color: #1a3640; }
:root[data-theme="dark"] .sk-status.lime { background: rgba(177, 235, 81, .2); color: #b1eb51; }
:root[data-theme="dark"] .sk-status.warm { background: rgba(242, 184, 75, .18); color: #f2c47a; }
:root[data-theme="dark"] .sk-fchip.on { color: #13282f; }
.sk-t, .sk-tag { white-space: nowrap; }
.sk-stat > .sk-row:first-child { gap: 10px; }
.sk-chips { flex-wrap: wrap; min-width: 0; row-gap: 6px; }
.sk-item { grid-template-columns: minmax(150px, 1fr) minmax(90px, .7fr) minmax(0, 2.2fr) 118px; gap: 14px; }
.sk-status { justify-self: center; }
.sk-who .sk-pair, .sk-what .sk-pair { overflow: hidden; }
/* Template v3: four switchable views */
button.sk-stat { display: flex; text-align: start; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: transform .15s, box-shadow .15s; }
button.sk-stat:hover { transform: translateY(-2px); }
button.sk-stat.dark { box-shadow: 0 0 0 3px rgba(46, 122, 147, .28), 0 18px 30px -22px rgba(20, 23, 25, .6); }
.sk-sub, .sk-foot { display: block; }
.sk-main.log { grid-template-columns: minmax(0, 1fr) 360px; }
.sk-side-body small.muted { font-size: 12px; line-height: 1.6; }
.sk-big-t { font-size: 26px; font-weight: 800; color: #fff; }
.sk-w { font-size: 14px; font-weight: 700; color: var(--ink); }
.sk-cond .sk-pair small { font-size: 12px; color: var(--muted); }
.sk-dot.open { background: var(--surface); border: 1.5px solid var(--line-2, #cfd5d8); }
.sk-dot.open i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }
.sk-lines { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sk-line { align-items: flex-start; }
.sk-line > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sk-line small.muted { flex-basis: 100%; }
.sk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-acts.one { grid-template-columns: 1fr; }
.sk-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; border-radius: 16px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.sk-btn b { font-size: 15px; }
.sk-btn small { font-size: 11.5px; color: var(--muted); }
.sk-btn.dark { background: #1a3640; border-color: #1a3640; color: #fff; }
.sk-btn.dark small, .sk-btn.dark .sk-n { color: rgba(255, 255, 255, .7); }
.sk-btn .sk-n { font-size: 13px; min-width: 0; }
.sk-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 0; font: inherit; cursor: pointer; transition: transform .12s; }
.sk-tile:hover { transform: translateY(-1px); }
.sk-tile small { font-size: 11px; }
.sk-tile.g { background: rgba(46, 122, 147, .12); --sk-s: rgba(26, 54, 64, .7); color: #1a3640; }
.sk-tile.b { background: rgba(46, 122, 147, .12); --sk-s: rgba(37, 98, 120, .7); color: #256278; }
.sk-tile.r { background: rgba(210, 60, 50, .12); --sk-s: rgba(170, 45, 38, .7); color: #aa2d26; }
.sk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-two button { height: 50px; border-radius: 14px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sk-two button.on { border-color: #2e7a93; background: rgba(46, 122, 147, .08); color: #2e7a93; box-shadow: 0 0 0 1px #2e7a93; }
.sk-note-in { min-height: 96px; }
.sk-table { display: flex; flex-direction: column; gap: 8px; }
.sk-tr { display: grid; grid-template-columns: 1.4fr 1.3fr .8fr .8fr .8fr 120px; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--surface-2); }
.sk-th { background: none; padding-block: 4px; font-size: 13px; color: var(--muted); }
.sk-dec { display: flex; align-items: center; gap: 8px; }
.sk-dec b { font-size: 14px; }
.sk-by { font-size: 13.5px; color: var(--ink-2); }
.sk-res { display: inline-block; padding: 4px 12px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 700; }
.sk-res.ok { background: rgba(46, 122, 147, .14); color: #1a3640; }
.sk-res.warm { background: rgba(242, 184, 75, .25); color: #8a5a10; }
.sk-res.blue { background: rgba(46, 122, 147, .14); color: #256278; }
.sk-act { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.sk-act b { font-size: 13px; }
.sk-act small { font-size: 10.5px; color: var(--muted); }
.sk-act.dark { background: #1a3640; border-color: #1a3640; color: #fff; }
.sk-act.dark small { color: rgba(255, 255, 255, .7); }
.sk-who-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.sk-who-card .sk-k2 { font-size: 17px; margin-bottom: 4px; }
.sk-whorow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; }
.sk-whorow b { white-space: nowrap; }
.sk-whorow b.brand { color: #2e7a93; }
.sk-whorow b.gold { color: #9a6410; }
:root[data-theme="dark"] button.sk-stat.dark { box-shadow: 0 0 0 3px rgba(92, 172, 199, .35); }
:root[data-theme="dark"] .sk-big-t { color: #fff; }
:root[data-theme="dark"] .sk-btn.dark, :root[data-theme="dark"] .sk-act.dark { background: #e8eef1; border-color: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .sk-btn.dark small, :root[data-theme="dark"] .sk-act.dark small, :root[data-theme="dark"] .sk-btn.dark .sk-n { color: rgba(30, 36, 41, .65); }
:root[data-theme="dark"] .sk-tile.g { background: rgba(143, 208, 228, .14); --sk-s: rgba(143, 208, 228, .8); color: #8fd0e4; }
:root[data-theme="dark"] .sk-tile.b { background: rgba(92, 172, 199, .14); --sk-s: rgba(143, 208, 228, .8); color: #8fd0e4; }
:root[data-theme="dark"] .sk-tile.r { background: rgba(236, 110, 100, .14); --sk-s: rgba(245, 160, 150, .8); color: #f5a096; }
:root[data-theme="dark"] .sk-two button.on { color: #8fd0e4; border-color: #5cacc7; box-shadow: 0 0 0 1px #5cacc7; background: rgba(92, 172, 199, .1); }
:root[data-theme="dark"] .sk-res.ok { background: rgba(143, 208, 228, .16); color: #8fd0e4; }
:root[data-theme="dark"] .sk-res.warm { background: rgba(242, 184, 75, .18); color: #f2c47a; }
:root[data-theme="dark"] .sk-res.blue { background: rgba(92, 172, 199, .16); color: #8fd0e4; }
:root[data-theme="dark"] .sk-whorow b.brand { color: #8fd0e4; }
:root[data-theme="dark"] .sk-whorow b.gold { color: #f2c47a; }
@media (max-width: 1200px) { .sk-main.log { grid-template-columns: 1fr; } .sk-tr { grid-template-columns: 1.3fr 1.2fr .8fr .8fr .9fr 120px; } }
@media (max-width: 760px) { .sk-tr { grid-template-columns: 1fr auto; } .sk-tr > span:nth-child(n+3):not(:last-child) { display: none; } .sk-th { display: none; } }
/* سجل التقييمات: custom period (من – إلى) next to the filters */
.asm-range { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.asm-range label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.asm-range .input { height: 36px; width: 150px; border-radius: 99px; padding: 0 12px; }
:root[data-theme="dark"] .asm-range { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .asm-range .input { color-scheme: dark; }
/* ===== حلقاتي: circle cards (cover + notched body) ===== */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.cx { position: relative; display: flex; flex-direction: column; border-radius: 28px; background: var(--surface); box-shadow: 0 1px 0 rgba(20, 23, 25, .04), 0 18px 34px -26px rgba(20, 23, 25, .45); overflow: hidden; isolation: isolate; transition: transform .18s, box-shadow .18s; }
.cx:hover { transform: translateY(-3px); box-shadow: 0 26px 40px -26px rgba(20, 23, 25, .5); }
/* Cover: a painted sky per prayer */
.cx-cover { position: relative; display: block; height: 150px; overflow: hidden; }
.cx-art, .cx-art i { position: absolute; inset: 0; display: block; }
.cx-time { position: absolute; top: 14px; right: 16px; padding: 4px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cx.dawn .cx-art { background: linear-gradient(180deg, #17303e 0%, #23566b 38%, #4f8ea0 62%, #e9b39b 88%, #ffd8b5 100%); }
.cx.dawn .cx-art i:nth-child(1) { background: radial-gradient(1.4px 1.4px at 18% 18%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 42% 10%, rgba(255,255,255,.8) 50%, transparent), radial-gradient(1px 1px at 66% 24%, rgba(255,255,255,.7) 50%, transparent), radial-gradient(1.3px 1.3px at 84% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 32%, rgba(255,255,255,.6) 50%, transparent); }
.cx.dawn .cx-art i:nth-child(2) { background: radial-gradient(60% 40% at 50% 112%, rgba(255, 214, 170, .95), transparent 70%); }
.cx.dawn .cx-art i:nth-child(3) { top: auto; height: 34%; background: linear-gradient(180deg, transparent, rgba(23, 48, 62, .35)); clip-path: polygon(0 70%, 12% 55%, 26% 66%, 40% 48%, 55% 62%, 70% 50%, 84% 64%, 100% 52%, 100% 100%, 0 100%); }
.cx.noon .cx-art { background: linear-gradient(180deg, #a9d7e6 0%, #cfe7ee 45%, #eef3d6 78%, #f7e7ad 100%); }
.cx.noon .cx-art i:nth-child(1) { background: radial-gradient(circle at 22% 70%, #fff7d1 0 26px, rgba(255, 240, 180, .55) 27px 44px, transparent 80px); }
.cx.noon .cx-art i:nth-child(2) { background: radial-gradient(38% 16% at 66% 34%, rgba(255,255,255,.85), transparent 70%), radial-gradient(26% 12% at 80% 42%, rgba(255,255,255,.7), transparent 70%), radial-gradient(30% 12% at 40% 22%, rgba(255,255,255,.6), transparent 70%); }
.cx.noon .cx-art i:nth-child(3) { top: auto; height: 30%; background: linear-gradient(180deg, rgba(177, 235, 81, .35), rgba(46, 122, 147, .35)); clip-path: polygon(0 60%, 18% 40%, 34% 58%, 52% 36%, 68% 54%, 86% 38%, 100% 50%, 100% 100%, 0 100%); }
.cx.noon .cx-time { color: #1a3640; background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
.cx.night .cx-art { background: linear-gradient(180deg, #0f1418 0%, #1c252b 50%, #2b3a44 100%); }
.cx.night .cx-art i:nth-child(1) { background: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 26% 46%, rgba(255,255,255,.7) 50%, transparent), radial-gradient(1.3px 1.3px at 38% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 52% 34%, rgba(255,255,255,.6) 50%, transparent), radial-gradient(1.6px 1.6px at 64% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.7) 50%, transparent), radial-gradient(1.2px 1.2px at 92% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 8% 58%, rgba(255,255,255,.5) 50%, transparent); }
.cx.night .cx-art i:nth-child(2) { inset: auto; top: 30px; left: 34px; width: 34px; height: 34px; border-radius: 50%; box-shadow: 9px 5px 0 0 #f3efcf; filter: drop-shadow(0 0 10px rgba(243, 239, 207, .45)); transform: rotate(-20deg); }
.cx.night .cx-art i:nth-child(3) { top: auto; height: 36%; background: radial-gradient(70% 90% at 50% 120%, rgba(177, 235, 81, .22), transparent 70%); }
/* ⋮ menu sits in the notch, over the cover */
.cx-menu { position: absolute; top: 112px; left: 14px; z-index: 3; }
.cx-menu summary { list-style: none; width: 48px; height: 32px; display: grid; place-items: center; border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(20, 23, 25, .5); }
.cx-menu summary::-webkit-details-marker { display: none; }
.cx-pop { position: absolute; top: 40px; left: 0; min-width: 180px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 34px -16px rgba(20, 23, 25, .45); display: flex; flex-direction: column; }
.cx-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.cx-pop a:hover { background: var(--surface-2); }
/* Notched body: a raised tab on the right, a rounded step on the left for the menu */
.cx-body { position: relative; margin-top: -44px; z-index: 2; display: flex; flex-direction: column; }
.cx-tab { position: relative; display: block; height: 44px; margin-left: 76px; background: var(--surface); border-radius: 26px 26px 0 0; }
.cx-tab::after { content: ""; position: absolute; left: -24px; bottom: 0; width: 24px; height: 24px; background: radial-gradient(circle at 0 0, transparent 23.5px, var(--surface) 24px); }
.cx-panel { display: flex; flex-direction: column; gap: 6px; padding: 0 22px 20px; background: var(--surface); border-top-left-radius: 24px; }
.cx-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cx-meta > i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2, #cfd5d8); }
.cx-live { font-style: normal; font-weight: 700; color: #2e7a93; }
.cx h2 { margin: 2px 0 0; font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.cx h2 a { color: var(--ink); text-decoration: none; }
.cx-sub { font-size: 12.5px; color: var(--muted); }
.cx hr { border: 0; height: 1px; margin: 12px 0 10px; background: var(--line); }
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-people .avatar { box-shadow: 0 0 0 2px var(--surface); }
.cx-apps { display: flex; }
.cx-apps a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; box-shadow: 0 0 0 2.5px var(--surface); transition: transform .15s; }
.cx-apps a + a { margin-right: -8px; }
.cx-apps a:hover { transform: translateY(-2px); z-index: 1; }
.cx-apps .ink { background: #1a3640; }
.cx-apps .brand { background: #2e7a93; }
.cx-apps .lime { background: #b1eb51; color: #1a3640; }
:root[data-theme="dark"] .cx { background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 36px -26px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .cx-apps .ink { background: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .cx-live { color: #8fd0e4; }
.cx { overflow: visible; }
.cx-cover { border-radius: 28px 28px 0 0; }
.cx-panel { border-radius: 24px 0 28px 28px; }
.cx:has(.cx-menu[open]) { z-index: 6; }
.cx-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } @media (min-width: 1100px) { .cx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* التقارير: «أبرز ما في التقرير» in the third card, sized like its neighbours */
.rp-hl { display: flex; flex-direction: column; gap: 12px; }
.rp-hl .card-head { margin: 0; }
.rp-hl-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(177, 235, 81, .35); color: #1a3640; flex: none; }
.rp-hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: space-between; }
.rp-hl-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.6; color: var(--ink); }
.rp-hl-list li > i { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #2e7a93; box-shadow: 0 0 0 3px rgba(46, 122, 147, .15); }
.rp-hl-list li.warn > i { background: #d99a1e; box-shadow: 0 0 0 3px rgba(217, 154, 30, .18); }
.rp-hl-list li.bad > i { background: #d23c32; box-shadow: 0 0 0 3px rgba(210, 60, 50, .16); }
/* «مقارنة الحلقات»: full width, one roomy row per circle */
.rp-cmp { margin-top: 0; }
.rp-cmp-t { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; overflow-x: auto; }
.rp-cmp-r { display: grid; grid-template-columns: minmax(130px, 1.2fr) .55fr .6fr .6fr minmax(170px, 1.6fr) .7fr minmax(200px, 1.7fr) .6fr .6fr; align-items: center; gap: 16px; min-width: 980px; padding: 16px 20px; border-radius: 16px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 14.5px; transition: background .15s, box-shadow .15s; }
a.rp-cmp-r:hover { box-shadow: inset 0 0 0 1.5px #2e7a93; }
.rp-cmp-r.head { background: none; padding-block: 0; font-size: 13px; color: var(--muted); }
.rp-cmp-g { display: flex; align-items: center; gap: 10px; }
.rp-cmp-g b { font-size: 15px; }
.rp-good { color: #2e7a93; font-weight: 700; }
.rp-warn { color: #a86a12; font-weight: 800; }
.rp-cmp-p { display: flex; flex-direction: column; gap: 6px; }
.rp-cmp-p small { font-size: 12.5px; color: var(--muted); }
.rp-cmp-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rp-cmp-bar i { display: block; height: 100%; border-radius: inherit; background: #2e7a93; margin-inline-start: auto; }
.rp-cmp-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-cmp-top > span { display: flex; flex-direction: column; min-width: 0; }
.rp-cmp-top b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cmp-top small { font-size: 11.5px; color: var(--muted); }
:root[data-theme="dark"] .rp-hl-ic { background: rgba(177, 235, 81, .16); color: #b1eb51; }
:root[data-theme="dark"] .rp-good { color: #8fd0e4; }
:root[data-theme="dark"] .rp-warn { color: #f2c47a; }
:root[data-theme="dark"] .rp-cmp-bar i { background: #5cacc7; }
:root[data-theme="dark"] a.rp-cmp-r:hover { box-shadow: inset 0 0 0 1.5px #5cacc7; }
/* حلقاتي cards v2: softer shadow, full avatar row, progress bar, two wide CTAs */
.cx { box-shadow: 0 1px 2px rgba(20, 23, 25, .05), 0 8px 18px -14px rgba(20, 23, 25, .22); }
.cx:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 23, 25, .06), 0 12px 22px -16px rgba(20, 23, 25, .28); }
.cx-menu summary { box-shadow: 0 2px 6px -3px rgba(20, 23, 25, .3); }
.cx-people-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-people { display: flex; }
.cx-people .avatar { width: 34px; height: 34px; font-size: 12px; }
.cx-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cx-prog { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.cx-prog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.cx-prog-h b { font-size: 16px; color: var(--ink); }
.cx-prog-bar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cx-prog-bar i { display: block; height: 100%; border-radius: inherit; background: #2e7a93; }
.cx.dawn .cx-prog-bar i { background: #1a3640; }
.cx.night .cx-prog-bar i { background: linear-gradient(90deg, #2e7a93, #b1eb51); }
.cx-prog small { font-size: 11.5px; color: var(--muted); }
.cx-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cx-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 99px; background: #1a3640; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: filter .15s; }
.cx-cta:hover { filter: brightness(1.12); }
.cx-cta.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2, var(--line)); }
.cx-cta.ghost:hover { filter: none; background: var(--surface-2); }
.cx-pop button { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); text-align: start; cursor: pointer; }
.cx-pop button:hover:not(:disabled) { background: var(--surface-2); }
.cx-pop button:disabled { opacity: .5; cursor: not-allowed; }
.cx-pop button small { flex-basis: 100%; margin-inline-start: 25px; margin-top: -6px; font-size: 11px; color: var(--muted); }
.cx-pop { min-width: 220px; }
:root[data-theme="dark"] .cx { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 20px -16px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .cx:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 22px -16px rgba(0, 0, 0, .75); }
:root[data-theme="dark"] .cx-cta { background: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .cx-cta.ghost { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .cx-prog-bar i, :root[data-theme="dark"] .cx.dawn .cx-prog-bar i { background: #5cacc7; }
:root[data-theme="dark"] .cx.night .cx-prog-bar i { background: linear-gradient(90deg, #5cacc7, #b1eb51); }
.rp-cmp-bar i { margin-inline-start: 0; } .rp-cmp-p { padding-inline-end: 36px; } .rp-cmp-r > span:nth-child(6) { padding-inline-start: 8px; }
/* Circle card v3: time + glass figures on the cover, today's tasks and people in the body */
.cx-cover { height: 214px; }
.cx-when { position: absolute; top: 18px; right: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 70%; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.cx-when b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.cx-when em { font-style: normal; font-size: 22px; font-weight: 700; }
.cx-when small { flex-basis: 100%; font-size: 12.5px; opacity: .85; }
.cx-glass { position: absolute; top: 92px; right: 16px; left: 16px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 18px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; }
.cx-glass > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; }
.cx-glass > span + span { border-right: 1px solid rgba(255, 255, 255, .22); }
.cx-glass b { font-size: 19px; font-weight: 800; }
.cx-glass small { font-size: 11.5px; opacity: .85; }
.cx-time { display: none; }
/* the afternoon sky is light: dark text, whiter glass */
.cx.noon .cx-when, .cx.noon .cx-glass { color: #22313a; text-shadow: none; }
.cx.noon .cx-glass { background: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .75); }
.cx.noon .cx-glass > span + span { border-right-color: rgba(34, 49, 58, .12); }
.cx-menu { top: 176px; }
.cx-meta { gap: 8px; }
.cx h2 { font-size: 23px; }
.cx-tasks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cx-seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cx-seg i { height: 7px; border-radius: 99px; background: var(--line); }
.cx-seg i.on { background: #2e7a93; }
.cx.dawn .cx-seg i.on { background: #1a3640; }
.cx.night .cx-seg i.on { background: #8fbf2f; }
.cx-next { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cx-next.live { color: #2e7a93; font-weight: 700; }
.cx-grid.home { margin-top: 4px; }
:root[data-theme="dark"] .cx-seg i { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .cx-seg i.on, :root[data-theme="dark"] .cx.dawn .cx-seg i.on { background: #5cacc7; }
:root[data-theme="dark"] .cx.night .cx-seg i.on { background: #b1eb51; }
:root[data-theme="dark"] .cx-next.live { color: #8fd0e4; }
.cx-seg { grid-template-columns: repeat(7, 1fr); }
/* تقرير الحلقة: compact figures strip */
.rp-kstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rp-kstrip > * { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rp-kstrip span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rp-kstrip span svg { color: #2e7a93; }
.rp-kstrip b { font-size: 24px; font-weight: 800; }
.rp-kstrip b small { font-size: 12px; font-weight: 500; color: var(--muted); }
a.rp-kstrip > *:hover, .rp-kstrip a:hover { border-color: #2e7a93; }
.rp-gview { align-self: flex-start; }
/* «نسبة إنجاز كل مهمة» */
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin-top: 16px; }
.tk-row { display: grid; grid-template-columns: 26px 130px 1fr 48px 40px; align-items: center; gap: 12px; }
.tk-n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 700; }
.tk-l { font-size: 14px; }
.tk-bar { display: block; height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tk-bar i { display: block; height: 100%; border-radius: inherit; }
.tk-bar i.brand { background: #2e7a93; }
.tk-bar i.ink { background: #1a3640; }
.tk-bar i.soft { background: #b1eb51; }
.tk-row > b { font-size: 15px; }
.tk-d { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: #2e7a93; }
.tk-d.down { color: #b13a32; }
/* «تفاصيل الطلاب» heat table */
.tk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px 6px; }
.tk-head .card-title { display: inline; margin-left: 10px; }
.tk-head .search { width: 260px; }
.tk-wrap { border-radius: 0; max-height: 620px; overflow: auto; }
.tk-tbl th { white-space: nowrap; font-size: 12.5px; }
.tk-tbl td { padding-block: 8px; }
.tk-cell { display: block; min-width: 64px; padding: 7px 6px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; }
.tk-cell.hi { background: #dbe7ec; color: #2f6d85; }
.tk-cell.mid { background: #f4ecdc; color: #8a6a1a; }
.tk-cell.lo { background: #f4e1e0; color: #b13a32; }
.tk-avg.hi { color: #2f6d85; } .tk-avg.mid { color: #8a6a1a; } .tk-avg.lo { color: #b13a32; }
.tk-debt { color: #b13a32; }
/* «المراسلة والمجدولة» button in the tabs + popup */
.rp-hub-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-2, #cfd5d8) !important; color: var(--ink); background: none; cursor: pointer; font: inherit; }
.hub { display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
.hub-tabs { align-self: flex-start; }
.hub-tbl { display: flex; flex-direction: column; gap: 8px; }
.hub-tr { display: grid; grid-template-columns: 1.8fr .5fr 1fr 1.1fr 1fr; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; }
.hub-tr.head { background: none; padding-block: 0; font-size: 12.5px; color: var(--muted); }
.hub-st { display: inline-block; padding: 4px 10px; border-radius: 99px; font-style: normal; font-size: 12px; font-weight: 700; }
.hub-st.ok { background: rgba(46, 122, 147, .14); color: #1a3640; }
.hub-st.info { background: rgba(46, 122, 147, .14); color: #256278; }
.hub-st.warn { background: rgba(242, 184, 75, .25); color: #8a5a10; }
.hub-sched { display: flex; flex-direction: column; gap: 10px; }
.hub-sc { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); }
.hub-sc > div { display: flex; flex-direction: column; gap: 3px; }
.hub-sc b { font-size: 15px; } .hub-sc small { font-size: 12.5px; color: var(--muted); }
.hub-sw { width: 54px; height: 30px; padding: 3px; border-radius: 99px; border: 0; background: var(--line-2, #cfd5d8); cursor: pointer; display: flex; }
.hub-sw i { width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.hub-sw.on { background: #2e7a93; }
.hub-sw.on i { transform: translateX(-24px); }
.hub-lock { padding: 5px 12px; border-radius: 99px; background: var(--surface); font-size: 12px; font-weight: 700; }
.hub-sup { display: flex; flex-direction: column; gap: 8px; }
.hub-cap { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hub-msg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.hub-msg > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hub-msg b { font-size: 13.5px; } .hub-msg small { font-size: 12px; color: var(--muted); }
.hub-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(46, 122, 147, .12); color: #2e7a93; flex: none; }
.hub-ic.out { background: rgba(177, 235, 81, .3); color: #1a3640; }
.hub-new { font-style: normal; padding: 3px 9px; border-radius: 99px; background: #2e7a93; color: #fff; font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .rp-kstrip span svg { color: #8fd0e4; }
:root[data-theme="dark"] .tk-bar i.brand { background: #5cacc7; }
:root[data-theme="dark"] .tk-bar i.ink { background: #e8eef1; }
:root[data-theme="dark"] .tk-d { color: #8fd0e4; } :root[data-theme="dark"] .tk-d.down { color: #f5a096; }
:root[data-theme="dark"] .tk-cell.hi { background: rgba(92, 172, 199, .16); color: #8fd0e4; }
:root[data-theme="dark"] .tk-cell.mid { background: rgba(242, 196, 122, .14); color: #f2c47a; }
:root[data-theme="dark"] .tk-cell.lo { background: rgba(236, 110, 100, .15); color: #f5a096; }
:root[data-theme="dark"] .tk-avg.hi { color: #8fd0e4; } :root[data-theme="dark"] .tk-avg.mid { color: #f2c47a; } :root[data-theme="dark"] .tk-avg.lo, :root[data-theme="dark"] .tk-debt { color: #f5a096; }
:root[data-theme="dark"] .hub-st.ok { background: rgba(143, 208, 228, .16); color: #8fd0e4; }
:root[data-theme="dark"] .hub-st.info { background: rgba(92, 172, 199, .16); color: #8fd0e4; }
:root[data-theme="dark"] .hub-st.warn { background: rgba(242, 184, 75, .18); color: #f2c47a; }
:root[data-theme="dark"] .hub-sw.on { background: #5cacc7; }
:root[data-theme="dark"] .hub-ic { background: rgba(92, 172, 199, .14); color: #8fd0e4; }
:root[data-theme="dark"] .hub-ic.out { background: rgba(177, 235, 81, .16); color: #b1eb51; }
@media (max-width: 1100px) { .rp-kstrip { grid-template-columns: 1fr 1fr; } .tk-grid { grid-template-columns: 1fr; } }
.hub { height: min(470px, calc(100vh - 260px)); min-height: 0; } .hub-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.modal:has(.hub) { height: min(680px, calc(100vh - 48px)); display: flex; flex-direction: column; } .modal:has(.hub) .modal-body { flex: 1; min-height: 0; overflow: hidden; } .modal:has(.hub) .hub { height: 100%; }
.tk-card .card-head { align-items: flex-start; gap: 12px; } .tk-days { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
.rp-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rp-gview { align-self: center; } .asm-range { padding: 0; border: 0 !important; background: none !important; } :root[data-theme="dark"] .asm-range { background: none; border: 0; }
/* ===== التواصل v2: list · chat · profile ===== */
.cm-page { gap: 10px; }
.cm-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; height: calc(100vh - 150px); min-height: 600px; }
.cm-wrap.with-info { grid-template-columns: 340px minmax(0, 1fr) 360px; }
.cm-list, .cm-chat, .cm-info { min-height: 0; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
/* list */
.cm-list { padding: 18px 14px 12px; gap: 12px; }
.cm-list-h { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.cm-list-h h1 { font-family: var(--f-display); font-size: 26px; font-weight: 800; margin: 0; }
.cm-list-h small { font-size: 12.5px; color: var(--muted); }
.cm-new { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #1a3640; color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.cm-new:hover { transform: rotate(90deg); }
.cm-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.cm-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.cm-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cm-chips::-webkit-scrollbar { display: none; }
.cm-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.cm-chips button[aria-selected="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.cm-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #b1eb51; color: #1a3640; font-style: normal; font-size: 11px; font-weight: 800; }
.cm-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.cm-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: background .12s; }
.cm-row:hover { background: var(--surface-2); }
.cm-row.on { background: rgba(46, 122, 147, .08); }
.cm-av { position: relative; flex: none; }
.cm-av .avatar { width: 50px; height: 50px; font-size: 16px; }
.cm-on { position: absolute; bottom: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: #2e7a93; border: 2.5px solid var(--surface); }
.cm-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-row-h { display: flex; align-items: center; gap: 6px; }
.cm-row-h b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row-h small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cm-row-p { display: flex; align-items: center; gap: 6px; }
.cm-prev { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pin { color: var(--muted); display: inline-flex; font-size: 12px; }
.cm-tag { flex: none; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.cm-tag.stu { background: rgba(177, 235, 81, .4); color: #1a3640; }
.cm-tag.gd { background: rgba(46, 122, 147, .12); color: #256278; }
.cm-tag.grp { background: rgba(107, 79, 200, .12); color: #5a3fb3; }
.cm-tag.sup, .cm-tag.adm { background: rgba(26, 54, 64, .08); color: #1a3640; }
.cm-av-grp { background: #6b4fc8 !important; color: #fff !important; display: grid !important; place-items: center; }
.cm-av-adm { background: #2e7a93 !important; color: #fff !important; display: grid !important; place-items: center; }
.cm-lock { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 6px 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.cm-empty { margin: auto; padding: 20px; text-align: center; font-size: 13px; color: var(--muted); }
.cm-empty.sm { margin: 0; padding: 8px 0; text-align: start; }
/* chat */
.cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cm-head .cm-av .avatar { width: 46px; height: 46px; }
.cm-head-t { display: flex; align-items: center; gap: 8px; }
.cm-head-t b { font-size: 16px; }
.cm-head small { font-size: 12px; color: var(--muted); }
.cm-ibtn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.cm-ibtn:hover, .cm-ibtn.on { background: var(--surface-2); }
.cm-find { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 0 14px; height: 42px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.cm-find input { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.cm-find small { font-size: 12px; } .cm-find button { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; }
.cm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.cm-day { align-self: center; margin: 8px 0; } .cm-day span { display: inline-block; padding: 5px 14px; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 23, 25, .08); font-size: 12px; font-weight: 600; }
.cm-msg { position: relative; display: flex; max-width: 72%; }
.cm-msg.them { align-self: flex-start; }
.cm-msg.me { align-self: flex-end; }
.cm-bub { position: relative; padding: 10px 14px 8px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 23, 25, .08); color: var(--ink); }
.cm-msg.them .cm-bub { border-start-start-radius: 6px; }
.cm-msg.me .cm-bub { background: var(--mine, #1a3640); color: var(--mine-ink, #fff); border-start-end-radius: 6px; }
.cm-bub p { margin: 0; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.cm-bub.del { font-size: 12.5px; font-style: italic; opacity: .7; display: flex; align-items: center; gap: 6px; }
.cm-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 10.5px; opacity: .7; }
.cm-tick { font-size: 11px; letter-spacing: -3px; } .cm-tick.read { color: #8fbf2f; opacity: 1; }
.cm-msg.me .cm-tick.read { color: #b1eb51; }
.cm-quote { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; padding: 6px 10px; border-radius: 10px; border-inline-start: 3px solid #2e7a93; background: rgba(0, 0, 0, .05); font-size: 12px; }
.cm-msg.me .cm-quote { background: rgba(255, 255, 255, .14); border-color: currentColor; }
.cm-quote span { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.cm-file { display: flex; align-items: center; gap: 12px; min-width: 260px; margin-bottom: 6px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.cm-msg.me .cm-file { background: rgba(255, 255, 255, .12); }
.cm-ext { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #2e7a93; color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.cm-ext.pdf { background: #d23c32; }
.cm-file-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cm-file-b b { font-size: 13.5px; } .cm-file-b small { font-size: 11.5px; opacity: .7; }
.cm-dl { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.cm-img { display: block; max-width: 280px; max-height: 260px; border-radius: 14px; margin-bottom: 6px; object-fit: cover; }
.cm-img.ph { width: 240px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0, 0, 0, .05); font-size: 11px; opacity: .8; text-align: center; }
.cm-voice { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.cm-play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #2e7a93; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.cm-msg.me .cm-play { background: rgba(255, 255, 255, .2); color: inherit; }
.cm-wave { flex: 1; display: flex; align-items: center; gap: 2px; } .cm-wave i { width: 3px; border-radius: 99px; background: currentColor; opacity: .45; }
.cm-cap { display: block; margin-top: 4px; font-size: 11.5px; opacity: .7; }
.cm-reacts { position: absolute; bottom: -12px; inset-inline-start: 10px; display: flex; gap: 2px; padding: 1px 6px; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 4px rgba(20, 23, 25, .18); font-size: 12px; }
.cm-reacts i { font-style: normal; color: var(--ink); }
.cm-msg:has(.cm-reacts) { margin-bottom: 12px; }
.cm-acts { position: absolute; top: -18px; display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: var(--surface); box-shadow: 0 6px 16px -6px rgba(20, 23, 25, .35); z-index: 2; }
.cm-msg.them .cm-acts { inset-inline-end: -10px; transform: translateX(-100%); }
.cm-msg.me .cm-acts { inset-inline-start: -10px; transform: translateX(100%); }
.cm-msg.them .cm-acts { inset-inline-end: auto; inset-inline-start: calc(100% + 6px); transform: none; }
.cm-msg.me .cm-acts { inset-inline-start: auto; inset-inline-end: calc(100% + 6px); transform: none; }
.cm-msg:hover .cm-acts, .cm-msg:focus-within .cm-acts { display: flex; }
.cm-acts button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; font-size: 15px; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cm-acts button:hover { background: var(--surface-2); }
.cm-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.cm-msg.hit .cm-bub { box-shadow: 0 0 0 2px #b1eb51; }
.cm-bub mark { background: #b1eb51; color: #22313a; border-radius: 3px; padding: 0 2px; }
/* sizes + backgrounds */
.fs-sm .cm-bub { font-size: 13px; } .fs-md .cm-bub { font-size: 14.5px; } .fs-lg .cm-bub { font-size: 16.5px; }
.bg-plain { background: var(--surface-2); }
.bg-dots { background: var(--surface-2) radial-gradient(circle, rgba(26, 54, 64, .13) 1.2px, transparent 1.6px) 0 0 / 18px 18px; }
.bg-grid { background: var(--surface-2) linear-gradient(rgba(26, 54, 64, .06) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(26, 54, 64, .06) 1px, transparent 1px) 0 0 / 26px 26px; }
.bg-gradient { background: radial-gradient(70% 60% at 85% 10%, rgba(177, 235, 81, .28), transparent 70%), radial-gradient(60% 60% at 10% 90%, rgba(46, 122, 147, .2), transparent 70%), var(--surface-2); }
.bg-lines { background: var(--surface-2) repeating-linear-gradient(135deg, rgba(26, 54, 64, .05) 0 1px, transparent 1px 14px); }
.bg-night { background: #1c2328 radial-gradient(circle, rgba(255, 255, 255, .18) 1px, transparent 1.4px) 0 0 / 34px 34px; }
.bg-night .cm-msg.them .cm-bub { background: #2c363d; color: #e8eef1; }
.bg-night .cm-day span { background: #2c363d; color: #e8eef1; }
/* composer */
.cm-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cm-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cm-quick button { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.cm-quick button:hover { border-color: #2e7a93; color: #2e7a93; }
.cm-compose { display: flex; align-items: flex-end; gap: 8px; }
.cm-compose textarea { flex: 1; min-height: 50px; max-height: 140px; padding: 14px 18px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14.5px; color: var(--ink); resize: none; outline: none; line-height: 1.5; }
.cm-compose textarea:focus { border-color: #2e7a93; background: var(--surface); }
.cm-send { width: 50px; height: 50px; border-radius: 50%; border: 0; background: #1a3640; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .12s; }
.cm-send:hover { transform: scale(1.05); }
.cm-attach-w { position: relative; }
.cm-attach-w > .cm-ibtn { width: 50px; height: 50px; background: var(--surface-2); }
.cm-attach { position: absolute; bottom: 58px; inset-inline-start: 0; width: 280px; padding: 6px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(20, 23, 25, .4); display: flex; flex-direction: column; z-index: 5; }
.cm-attach button { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 9px 10px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.cm-attach button:hover { background: var(--surface-2); }
.cm-attach button > span { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(46, 122, 147, .1); color: #2e7a93; }
.cm-attach b { font-size: 13.5px; } .cm-attach small { font-size: 11.5px; color: var(--muted); }
.cm-replying { display: flex; align-items: center; gap: 8px; } .cm-replying .cm-quote { flex: 1; margin: 0; }
.cm-replying button { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; }
.cm-rec { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 6px 0 4px; border-radius: 28px; background: var(--surface-2); }
.cm-rec-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: #d23c32; display: grid; place-items: center; cursor: pointer; }
.cm-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d23c32; animation: cmBlink 1s infinite; }
.cm-rec-l { font-size: 13px; color: var(--muted); }
@keyframes cmBlink { 50% { opacity: .2; } }
.cm-blocked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.cm-blocked span { flex: 1; }
.cm-none { align-items: center; justify-content: center; }
.cm-none-b { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); }
.cm-none-b b { font-size: 17px; color: var(--ink); }
/* profile */
.cm-info { position: relative; padding: 18px 16px; gap: 14px; }
.cm-x { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.cm-who { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 4px; }
.cm-who .avatar.cm-big { width: 92px; height: 92px; font-size: 28px; box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line); }
.cm-who b { font-family: var(--f-display); font-size: 20px; }
.cm-who small { font-size: 12.5px; color: var(--muted); }
.cm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 99px; background: var(--surface-2); }
.cm-tabs button { height: 40px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cm-tabs button[aria-selected="true"] { background: #1a3640; color: #fff; }
.cm-info-b { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin: 0 -4px; padding: 0 4px 4px; }
.cm-sec { display: flex; flex-direction: column; gap: 8px; }
.cm-sec-h { display: flex; align-items: baseline; justify-content: space-between; } .cm-sec-h b { font-size: 14.5px; } .cm-sec-h small, .cm-sec-h a { font-size: 12px; color: var(--muted); }
.cm-lbl { font-size: 14px; }
.cm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 99px; background: var(--surface-2); }
.cm-seg button { height: 36px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cm-seg button[aria-pressed="true"] { background: #1a3640; color: #fff; }
.cm-media { display: flex; flex-direction: column; gap: 6px; }
.cm-mi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); color: #2e7a93; }
.cm-mi > span { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--ink); }
.cm-mi b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-mi small { font-size: 11.5px; color: var(--muted); }
.cm-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-links > * { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 0; background: var(--surface-2); font: inherit; font-size: 12px; color: var(--ink); text-decoration: none; cursor: pointer; }
.cm-links svg { color: #2e7a93; }
.cm-pos { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.cm-members { display: flex; flex-wrap: wrap; gap: 6px; } .cm-members button { border: 0; background: none; padding: 0; cursor: pointer; }
.cm-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; }
.cm-preview .cm-msg { max-width: 85%; }
.cm-colors { display: flex; gap: 8px; }
.cm-colors button { flex: 1; height: 44px; border-radius: 14px; border: 2px solid transparent; background: var(--c); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cm-colors button.on { border-color: var(--surface); box-shadow: 0 0 0 2px #b1eb51; }
.cm-bgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-bgs button { height: 74px; border-radius: 14px; border: 1.5px solid var(--line); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; cursor: pointer; font: inherit; }
.cm-bgs button span { padding: 2px 10px; border-radius: 99px; background: var(--surface); font-size: 11.5px; color: var(--ink); }
.cm-bgs button.on { border-color: #b1eb51; box-shadow: 0 0 0 2px #b1eb51; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-pills button { height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.cm-pills button[aria-pressed="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.cm-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-sw-row > div { display: flex; flex-direction: column; } .cm-sw-row b { font-size: 13.5px; } .cm-sw-row small { font-size: 11.5px; color: var(--muted); }
.cm-sw { width: 50px; height: 28px; padding: 3px; border-radius: 99px; border: 0; background: var(--line-2, #cfd5d8); display: flex; cursor: pointer; flex: none; }
.cm-sw i { width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cm-sw.on { background: #2e7a93; } .cm-sw.on i { transform: translateX(-22px); }
.cm-shield { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); color: #2e7a93; }
.cm-shield > div { display: flex; flex-direction: column; gap: 4px; color: var(--ink); } .cm-shield b { font-size: 13.5px; } .cm-shield span { font-size: 12px; color: var(--muted); line-height: 1.7; }
.cm-actions { display: flex; flex-direction: column; }
.cm-actions button { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: start; }
.cm-actions button:hover { background: var(--surface-2); }
.cm-actions button.danger { color: #d23c32; }
.cm-note { font-size: 11.5px; color: var(--muted); }
/* new-conversation picker */
.cm-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; margin-top: 10px; }
.cm-pick { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.cm-pick:hover { background: var(--surface-2); }
.cm-pick > span { display: flex; flex-direction: column; } .cm-pick b { font-size: 14px; } .cm-pick small { font-size: 12px; color: var(--muted); }
.cm-cap2 { display: block; margin: 8px 10px 2px; font-size: 12px; color: var(--muted); }
/* dark */
:root[data-theme="dark"] .cm-new, :root[data-theme="dark"] .cm-send, :root[data-theme="dark"] .cm-chips button[aria-selected="true"], :root[data-theme="dark"] .cm-tabs button[aria-selected="true"], :root[data-theme="dark"] .cm-seg button[aria-pressed="true"], :root[data-theme="dark"] .cm-pills button[aria-pressed="true"] { background: #e8eef1; border-color: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .cm-row.on { background: rgba(92, 172, 199, .12); }
:root[data-theme="dark"] .cm-tag.stu { background: rgba(177, 235, 81, .18); color: #b1eb51; }
:root[data-theme="dark"] .cm-tag.gd { background: rgba(92, 172, 199, .16); color: #8fd0e4; }
:root[data-theme="dark"] .cm-tag.grp { background: rgba(166, 140, 236, .18); color: #c7b6f5; }
:root[data-theme="dark"] .cm-tag.sup, :root[data-theme="dark"] .cm-tag.adm { background: rgba(255, 255, 255, .08); color: #e8eef1; }
:root[data-theme="dark"] .bg-plain, :root[data-theme="dark"] .bg-dots, :root[data-theme="dark"] .bg-grid, :root[data-theme="dark"] .bg-lines { background-color: #18323b; }
:root[data-theme="dark"] .bg-gradient { background: radial-gradient(70% 60% at 85% 10%, rgba(177, 235, 81, .1), transparent 70%), radial-gradient(60% 60% at 10% 90%, rgba(92, 172, 199, .12), transparent 70%), #18323b; }
:root[data-theme="dark"] .cm-bub { box-shadow: none; }
:root[data-theme="dark"] .cm-msg.them .cm-bub { background: #2f383e; }
:root[data-theme="dark"] .cm-file, :root[data-theme="dark"] .cm-quote { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .cm-sw.on { background: #5cacc7; }
:root[data-theme="dark"] .cm-attach button > span, :root[data-theme="dark"] .cm-links svg, :root[data-theme="dark"] .cm-mi, :root[data-theme="dark"] .cm-shield { color: #8fd0e4; }
/* narrow screens: one pane at a time */
@media (max-width: 1280px) { .cm-wrap.with-info { grid-template-columns: 300px minmax(0, 1fr) 320px; } }
@media (max-width: 1100px) { .cm-wrap.with-info { grid-template-columns: 300px minmax(0, 1fr); } .cm-wrap.with-info .cm-info { position: fixed; inset: 80px 16px 16px auto; width: min(360px, calc(100vw - 32px)); z-index: 30; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); } }
@media (max-width: 760px) { .cm-wrap, .cm-wrap.with-info { grid-template-columns: 1fr; } .cm-wrap.has-chat .cm-list { display: none; } .cm-wrap:not(.has-chat) .cm-chat { display: none; } .cm-msg { max-width: 88%; } }
.cm-acts { top: 50%; transform: translateY(-50%) !important; } .cm-msg.them .cm-acts { inset-inline-start: calc(100% + 2px); inset-inline-end: auto; } .cm-msg.me .cm-acts { inset-inline-end: calc(100% + 2px); inset-inline-start: auto; } .cm-msg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12px; } .cm-msg.them::after { inset-inline-start: 100%; } .cm-msg.me::after { inset-inline-end: 100%; }
/* Layout follows the space the page actually has (not the window): the profile floats over the chat when it is tight. */
.cm-page { container-type: inline-size; container-name: cm; }
.cm-wrap { position: relative; }
@container cm (max-width: 1240px) {
  .cm-wrap.with-info { grid-template-columns: 300px minmax(0, 1fr); }
  .cm-wrap.with-info .cm-info { position: absolute; top: 0; bottom: 0; left: 0; width: min(350px, 46%); z-index: 6; box-shadow: 0 30px 60px -24px rgba(20, 23, 25, .45); }
}
@container cm (max-width: 720px) {
  .cm-wrap, .cm-wrap.with-info { grid-template-columns: 1fr; }
  .cm-wrap.has-chat .cm-list { display: none; } .cm-wrap:not(.has-chat) .cm-chat { display: none; }
  .cm-wrap.with-info .cm-info { width: 100%; }
}
.cm-wrap.with-info .cm-info { right: auto; }
:root[data-theme="dark"] [data-color="ink"] .cm-msg.me .cm-bub, .bg-night[data-color="ink"] .cm-msg.me .cm-bub { background: #e8eef1; color: #13282f; } :root[data-theme="dark"] [data-color="ink"] .cm-msg.me .cm-tick.read, .bg-night[data-color="ink"] .cm-msg.me .cm-tick.read { color: #2e7a93; } :root[data-theme="dark"] .cm-colors button[style*="#1a3640"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* Emoji button beside each message + the six reactions */
.cm-msg { align-items: center; gap: 6px; }
.cm-msg.me { flex-direction: row-reverse; }
.cm-emo-w { position: relative; flex: none; align-self: center; order: 2; }
.cm-msg.me .cm-emo-w { order: 2; }
.cm-emo { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55; box-shadow: 0 1px 3px rgba(20, 23, 25, .12); transition: opacity .15s, transform .15s, color .15s; }
.cm-msg:hover .cm-emo, .cm-emo[aria-expanded="true"], .cm-emo:focus-visible { opacity: 1; color: #2e7a93; }
.cm-emo:hover { transform: scale(1.08); }
.cm-emo-pop { position: absolute; bottom: calc(100% + 8px); display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: var(--surface); box-shadow: 0 14px 30px -10px rgba(20, 23, 25, .4); z-index: 8; animation: cmPop .14s ease-out; }
.cm-msg.them .cm-emo-pop { inset-inline-start: -6px; }
.cm-msg.me .cm-emo-pop { inset-inline-end: -6px; }
.cm-emo-pop button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.cm-emo-pop button:hover { transform: scale(1.25) translateY(-2px); }
.cm-emo-pop button.on { background: rgba(177, 235, 81, .45); }
@keyframes cmPop { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
.cm-reacts { font-size: 14px; padding: 2px 7px; }
.cm-acts { top: auto; bottom: calc(100% - 4px); transform: none !important; }
.cm-msg.them .cm-acts { inset-inline-start: auto; inset-inline-end: 0; }
.cm-msg.me .cm-acts { inset-inline-end: auto; inset-inline-start: 0; }
.cm-msg::after { display: none; }
/* circles in التواصل: brand green instead of purple */
.cm-av-grp { background: #2e7a93 !important; }
.cm-av-adm { background: #1a3640 !important; }
.cm-tag.grp { background: rgba(46, 122, 147, .12); color: #256278; }
:root[data-theme="dark"] .cm-tag.grp { background: rgba(92, 172, 199, .16); color: #8fd0e4; }
:root[data-theme="dark"] .cm-av-adm { background: #e8eef1 !important; color: #13282f !important; }
:root[data-theme="dark"] .cm-emo, :root[data-theme="dark"] .cm-emo-pop { background: #2f383e; }
/* ===== ملاحظاتي v3: list · paper · «التنسيق» ===== */
.nt-page { container-type: inline-size; container-name: nt; }
.nt-wrap { position: relative; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 16px; height: calc(100vh - 150px); min-height: 620px; }
.nt-wrap.with-fmt { grid-template-columns: 350px minmax(0, 1fr) 320px; }
.nt-list, .nt-ed, .nt-fmt { min-height: 0; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
/* scrolling panes without visible scrollbars */
.nt-rows, .nt-scroll, .nt-fmt, .cm-rows, .cm-body, .cm-info-b { scrollbar-width: none; }
.nt-rows::-webkit-scrollbar, .nt-scroll::-webkit-scrollbar, .nt-fmt::-webkit-scrollbar, .cm-rows::-webkit-scrollbar, .cm-body::-webkit-scrollbar, .cm-info-b::-webkit-scrollbar { display: none; }
/* list */
.nt-list { padding: 18px 14px 14px; gap: 12px; overflow: visible; }
.nt-list-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 6px; }
.nt-list-h h1 { margin: 0; font-family: var(--f-display); font-size: 26px; font-weight: 800; }
.nt-list-h small { font-size: 12px; color: var(--muted); }
.nt-new-w { position: relative; }
.nt-new { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: #1a3640; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nt-tpls { position: absolute; top: 52px; inset-inline-end: 0; width: 290px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -18px rgba(20, 23, 25, .4); z-index: 20; display: flex; flex-direction: column; animation: cmPop .14s ease-out; }
.nt-tpls > small { padding: 4px 10px 6px; font-size: 11.5px; color: var(--muted); }
.nt-tpls button { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.nt-tpls button:hover { background: var(--surface-2); }
.nt-tpls button > span:last-child { display: flex; flex-direction: column; } .nt-tpls b { font-size: 13.5px; } .nt-tpls small { font-size: 11.5px; color: var(--muted); }
.nt-tpl-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--paper); color: #2e7a93; box-shadow: inset 0 0 0 1px rgba(20, 23, 25, .08); }
.nt-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.nt-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.nt-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.nt-card { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid rgba(20, 23, 25, .07); background: var(--paper); font: inherit; color: #22313a; text-align: start; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.nt-card:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(20, 23, 25, .5); }
.nt-card.on { border-color: #2e7a93; box-shadow: 0 0 0 3px rgba(46, 122, 147, .12); }
.nt-card-h { display: flex; align-items: center; gap: 6px; } .nt-card-h b { flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-ic { display: inline-flex; color: #5d6b73; font-style: normal; }
.nt-prev { font-size: 12.5px; line-height: 1.65; color: #5d6b73; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 5px; } .nt-chips i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 99px; background: rgba(20, 23, 25, .06); font-size: 11px; color: #3a474e; }
.nt-chips i.ck { background: rgba(46, 122, 147, .12); color: #256278; }
.nt-card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nt-when { font-size: 11px; color: #7a868c; }
.nt-rem { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #3a474e; }
.nt-sent { font-size: 11.5px; font-weight: 700; color: #2e7a93; }
.nt-empty { margin: auto; color: var(--muted); font-size: 13px; }
/* editor */
.nt-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nt-tb { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nt-tb:hover:not(:disabled), .nt-tb.on { background: var(--surface-2); }
.nt-tb.lime { background: #b1eb51; color: #1a3640; }
.nt-tb:disabled { opacity: .35; cursor: not-allowed; }
.nt-vsep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.nt-fmt-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.nt-fmt-btn.on { border-color: #2e7a93; box-shadow: 0 0 0 1px #2e7a93; }
.nt-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.nt-send { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 99px; border: 0; background: #1a3640; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.nt-pop-w { position: relative; }
.nt-pop { position: absolute; top: 48px; inset-inline-start: 0; min-width: 210px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(20, 23, 25, .4); z-index: 20; display: flex; flex-direction: column; animation: cmPop .14s ease-out; }
.nt-pop.end { inset-inline-start: auto; inset-inline-end: 0; }
.nt-pop button { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); text-align: start; cursor: pointer; }
.nt-pop button:hover { background: var(--surface-2); } .nt-pop button.on { color: #2e7a93; font-weight: 700; } .nt-pop button.danger { color: #d23c32; }
.nt-pop button small { flex-basis: 100%; margin: -6px 0 0 0; padding-inline-start: 23px; font-size: 11px; color: var(--muted); }
.nt-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 40px; background: var(--surface-2); }
.nt-paper { position: relative; max-width: 860px; min-height: 100%; margin: 0 auto; padding: 40px 44px 48px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 23, 25, .06), 0 20px 40px -32px rgba(20, 23, 25, .35); overflow: hidden; isolation: isolate; }
.nt-paper[data-paper="night"] { --ink: #eef2f4 !important; }
.nt-paper[data-paper="night"] .nt-meta, .nt-paper[data-paper="night"] .nt-check small { color: rgba(238, 242, 244, .6); }
.nt-wm { position: absolute; top: 50%; left: 50%; width: 46%; max-width: 360px; transform: translate(-50%, -50%) rotate(-12deg); opacity: .07; pointer-events: none; z-index: -1; filter: grayscale(.2); }
.nt-logo { position: absolute; width: 46px; height: 46px; object-fit: contain; opacity: .9; pointer-events: none; }
.nt-logo.tr { top: 16px; right: 16px; } .nt-logo.tl { top: 16px; left: 16px; } .nt-logo.br { bottom: 16px; right: 16px; } .nt-logo.bl { bottom: 16px; left: 16px; }
.nt-lockbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(20, 23, 25, .06); font-size: 13px; }
.nt-lockbar span { flex: 1; } .nt-lockbar button { border: 0; background: #1a3640; color: #fff; padding: 6px 14px; border-radius: 99px; font: inherit; font-size: 12.5px; cursor: pointer; }
.nt-title { width: 100%; border: 0; background: none; font-family: var(--f-display); font-size: 30px; font-weight: 800; color: var(--ink); outline: none; padding: 0; }
.nt-title::placeholder { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.nt-meta { margin: 6px 0 12px; font-size: 12.5px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.nt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: rgba(20, 23, 25, .07); font-size: 12.5px; color: var(--ink); }
.nt-tag button { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; display: grid; padding: 0; }
.nt-tag.add { background: none; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.nt-tag.add input { width: 90px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink); outline: none; }
.nt-paper hr { border: 0; height: 1px; margin: 18px 0; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nt-body { min-height: 180px; outline: none; font-family: var(--font); font-size: var(--size); line-height: var(--line); text-align: var(--align); color: var(--ink); }
.nt-body:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--ink) 40%, transparent); }
.nt-body p { margin: 0; } .nt-body ul, .nt-body ol { margin: 0; padding-inline-start: 22px; }
.nt-check { margin-top: 26px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.nt-check-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .nt-check-h small { font-size: 12px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.nt-ck { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-family: var(--font); font-size: calc(var(--size) + 1px); }
.nt-ck span { flex: 1; } .nt-ck.done span { text-decoration: line-through; opacity: .5; }
.nt-box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1.8px solid color-mix(in srgb, var(--ink) 55%, transparent); background: none; color: #fff; cursor: pointer; padding: 0; }
[aria-checked="true"].nt-box, .nt-ck.done .nt-box, .nt-dest.on .nt-box { background: #2e7a93; border-color: #2e7a93; }
.nt-ck-x { border: 0; background: none; color: inherit; opacity: 0; cursor: pointer; display: grid; } .nt-ck:hover .nt-ck-x { opacity: .5; }
.nt-ck-add { display: flex; gap: 8px; margin-top: 6px; } .nt-ck-add input { flex: 1; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); background: none; font: inherit; color: var(--ink); outline: none; padding: 6px 0; }
.nt-ck-add button { border: 0; padding: 6px 16px; border-radius: 99px; background: rgba(46, 122, 147, .14); color: #256278; font: inherit; font-size: 12.5px; cursor: pointer; }
.nt-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nt-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(20, 23, 25, .05); }
.nt-file i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #2e7a93; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; } .nt-file i.pdf { background: #d23c32; }
.nt-file > span { display: flex; flex-direction: column; } .nt-file b { font-size: 12.5px; } .nt-file small { font-size: 11px; opacity: .65; }
.nt-file a, .nt-file button { border: 0; background: none; color: inherit; display: grid; cursor: pointer; opacity: .7; }
.nt-remchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 99px; background: rgba(177, 235, 81, .45); font-size: 13px; color: #2b3a0a; }
.nt-remchip button { border: 0; background: none; color: inherit; display: grid; cursor: pointer; }
.nt-none { align-items: center; justify-content: center; } .nt-none > div { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); } .nt-none b { color: var(--ink); font-size: 16px; }
/* «التنسيق» panel */
.nt-fmt { overflow-y: auto; padding: 18px 16px; gap: 16px; }
.nt-fmt-h { display: flex; align-items: center; justify-content: space-between; } .nt-fmt-h b { font-size: 17px; }
.nt-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.nt-sec { display: flex; flex-direction: column; gap: 8px; } .nt-sec > b { font-size: 13px; color: var(--ink-2); }
.nt-h3 { margin: 6px 0 -4px; font-size: 16px; font-weight: 800; }
.nt-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--muted); }
.nt-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nt-fonts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.nt-fonts button span { font-size: 20px; line-height: 1.3; } .nt-fonts button small { font-family: var(--f-body, inherit); font-size: 11px; color: var(--muted); }
.nt-fonts button.on { border-color: #2e7a93; box-shadow: 0 0 0 1px #2e7a93; }
.nt-sizes { display: flex; gap: 6px; } .nt-sizes button { flex: 1; height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.nt-sizes button[aria-pressed="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.nt-swatch { display: flex; gap: 6px; } .nt-swatch button { flex: 1; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 800; background: var(--surface); }
.nt-swatch button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #b1eb51; }
.nt-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.nt-seg button { height: 38px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.nt-seg button[aria-pressed="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.nt-seg.big button { height: 46px; font-size: 14px; }
.nt-chips2 { display: flex; flex-wrap: wrap; gap: 6px; } .nt-chips2 button { height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.nt-chips2 button[aria-pressed="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.nt-dt { height: 44px; border-radius: 14px; }
.nt-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nt-sw-row > div { display: flex; flex-direction: column; } .nt-sw-row b { font-size: 13.5px; } .nt-sw-row small { font-size: 11.5px; color: var(--muted); }
.nt-sw { width: 50px; height: 28px; padding: 3px; flex: none; border-radius: 99px; border: 0; background: var(--line-2, #cfd5d8); display: flex; cursor: pointer; }
.nt-sw i { width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; } .nt-sw.on { background: #2e7a93; } .nt-sw.on i { transform: translateX(-22px); }
.nt-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 120px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.nt-corners button { height: 34px; border-radius: 8px; border: 0; background: var(--surface); cursor: pointer; position: relative; }
.nt-corners button i { position: absolute; width: 10px; height: 10px; border-radius: 3px; background: var(--line-2, #cfd5d8); }
.nt-corners .c-tr i { top: 5px; right: 5px; } .nt-corners .c-tl i { top: 5px; left: 5px; } .nt-corners .c-br i { bottom: 5px; right: 5px; } .nt-corners .c-bl i { bottom: 5px; left: 5px; }
.nt-corners button.on i { background: #2e7a93; }
.nt-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nt-logos button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.nt-logos img { width: 38px; height: 38px; object-fit: contain; } .nt-logos small { font-size: 11.5px; color: var(--ink); } .nt-logos button.on { border-color: #2e7a93; box-shadow: 0 0 0 1px #2e7a93; }
/* send popup */
.nt-dests { display: flex; flex-direction: column; gap: 10px; }
.nt-dest { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.nt-dest > span:last-child { display: flex; flex-direction: column; } .nt-dest b { font-size: 15px; } .nt-dest small { font-size: 12px; color: var(--muted); }
.nt-dest.on { border-color: #2e7a93; background: rgba(46, 122, 147, .05); }
.nt-dest .nt-box { border-color: var(--line-2, #cfd5d8); }
.nt-lbl { display: block; margin: 16px 0 8px; font-size: 14px; }
.nt-send-sum { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
/* dark */
:root[data-theme="dark"] .nt-new, :root[data-theme="dark"] .nt-send, :root[data-theme="dark"] .nt-sizes button[aria-pressed="true"], :root[data-theme="dark"] .nt-seg button[aria-pressed="true"], :root[data-theme="dark"] .nt-chips2 button[aria-pressed="true"] { background: #e8eef1; border-color: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .nt-scroll { background: #18323b; }
:root[data-theme="dark"] .nt-card:not([data-paper="night"]) { filter: brightness(.94); }
:root[data-theme="dark"] .nt-sw.on { background: #5cacc7; }
:root[data-theme="dark"] .nt-tpl-ic { color: #2e7a93; }
/* PDF: print the open note alone */
@media print {
  body.nt-printing * { visibility: hidden !important; }
  body.nt-printing .nt-paper, body.nt-printing .nt-paper * { visibility: visible !important; }
  body.nt-printing .nt-paper { position: fixed; inset: 0; max-width: none; margin: 0; border-radius: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.nt-printing .nt-tag button, body.nt-printing .nt-tag.add, body.nt-printing .nt-ck-add, body.nt-printing .nt-ck-x, body.nt-printing .nt-remchip button, body.nt-printing .nt-file button, body.nt-printing .nt-lockbar { display: none !important; }
}
/* tight space: «التنسيق» floats over the paper */
@container nt (max-width: 1240px) {
  .nt-wrap.with-fmt { grid-template-columns: 320px minmax(0, 1fr); }
  .nt-wrap.with-fmt .nt-fmt { position: absolute; top: 0; bottom: 0; left: 0; width: min(330px, 44%); z-index: 15; box-shadow: 0 30px 60px -24px rgba(20, 23, 25, .45); }
}
@container nt (max-width: 760px) {
  .nt-wrap, .nt-wrap.with-fmt { grid-template-columns: 1fr; height: auto; }
  .nt-list { max-height: 420px; } .nt-ed { min-height: 640px; }
  .nt-wrap.with-fmt .nt-fmt { width: 100%; }
}
@container nt (max-width: 1240px) { .nt-wrap.with-fmt .nt-fmt { top: 76px; bottom: 8px; left: 8px; border-radius: 22px; } }
/* Circle cards, dark: the body is light-grey frosted glass so it stands out from the page and from the sky */
:root[data-theme="dark"] .cx { --cx-body: rgba(92, 106, 116, .55); background: #1a2126; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .cx-tab, :root[data-theme="dark"] .cx-panel { background: var(--cx-body); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); }
:root[data-theme="dark"] .cx-tab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .cx-tab::after { background: radial-gradient(circle at 0 0, transparent 23.5px, var(--cx-body) 24px); }
:root[data-theme="dark"] .cx-panel { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .cx-meta, :root[data-theme="dark"] .cx-next, :root[data-theme="dark"] .cx-prog-h span { color: rgba(238, 242, 244, .72); }
:root[data-theme="dark"] .cx h2 a { color: #f4f7f8; }
:root[data-theme="dark"] .cx-seg i { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .cx hr { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .cx-people .avatar { box-shadow: 0 0 0 2px #4b5860; }
:root[data-theme="dark"] .cx-menu summary { background: rgba(240, 244, 246, .92); color: #13282f; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .cx-cta.ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .cx { --cx-body: rgba(78, 91, 100, .93); background: #4e5b64; } :root[data-theme="dark"] .cx-panel { background: linear-gradient(180deg, var(--cx-body), rgba(70, 82, 90, .96)); }
:root[data-theme="dark"] .cx { --cx-body: #3a5c68; background: #3a5c68; } :root[data-theme="dark"] .cx-tab, :root[data-theme="dark"] .cx-panel { background: #3a5c68; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } :root[data-theme="dark"] .cx-tab { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } :root[data-theme="dark"] .cx-tab::after { background: radial-gradient(circle at 0 0, transparent 23.5px, #3a5c68 24px); }
/* ===== الإعدادات v2: fixed menu · scrolling middle ===== */
.st-wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.st-nav { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 14px; padding: 24px 16px 18px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.st-nav::-webkit-scrollbar { display: none; }
.st-nav h1 { margin: 0 8px; font-family: var(--f-display); font-size: 30px; font-weight: 800; position: relative; padding-bottom: 10px; }
.st-nav h1::after { content: ""; position: absolute; bottom: 0; right: 0; width: 44px; height: 4px; border-radius: 99px; background: #b1eb51; }
.st-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.st-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.st-nav nav { display: flex; flex-direction: column; gap: 4px; }
.st-nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 18px; background: none; font: inherit; color: var(--ink); text-align: start; cursor: pointer; transition: background .12s; }
.st-nav-i:hover { background: var(--surface-2); }
.st-nav-i > span:last-child { display: flex; flex-direction: column; min-width: 0; } .st-nav-i b { font-size: 14.5px; } .st-nav-i small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: #2e7a93; }
.st-nav-i.on { background: #1a3640; color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #2e7a93; }
.st-nav-i.on small { color: rgba(255, 255, 255, .65); } .st-nav-i.on .st-nav-ic { background: rgba(255, 255, 255, .1); color: #b1eb51; }
.st-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 6px 4px 2px; }
.st-head h2 { margin: 0; font-family: var(--f-display); font-size: 28px; font-weight: 800; } .st-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.st-saved { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.st-saved svg { color: #2e7a93; } .st-saved.flash { border-color: #2e7a93; color: #1a3640; }
.st-card { padding: 24px 24px 8px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); }
.st-card > header { padding-bottom: 14px; border-bottom: 1px solid var(--line); } .st-card > header h2 { margin: 0; font-size: 18px; font-weight: 800; } .st-card > header p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.st-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .st-row-t b { font-size: 14.5px; } .st-row-t small { font-size: 12px; color: var(--muted); }
.st-row-c { flex: none; display: flex; align-items: center; gap: 8px; }
.st-input { width: 380px; max-width: 46vw; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.st-input:focus { border-color: #2e7a93; background: var(--surface); }
.st-area { width: 100%; max-width: none; height: auto; min-height: 76px; padding: 12px 16px; resize: vertical; line-height: 1.7; }
.st-count { align-self: flex-end; margin-top: -4px; font-size: 11px; color: var(--muted); }
.st-select { position: relative; display: inline-flex; align-items: center; }
.st-select select { appearance: none; -webkit-appearance: none; min-width: 210px; height: 46px; padding: 0 16px 0 40px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.st-select svg { position: absolute; left: 14px; pointer-events: none; color: var(--muted); }
.st-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.st-seg button { height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.st-seg button[aria-pressed="true"] { background: #1a3640; border-color: #1a3640; color: #fff; }
.st-sw { width: 52px; height: 30px; padding: 3px; flex: none; border-radius: 99px; border: 0; background: var(--line-2, #cfd5d8); display: flex; cursor: pointer; }
.st-sw i { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.st-sw.on { background: #2e7a93; } .st-sw.on i { transform: translateX(-22px); }
.st-sw:disabled { opacity: .5; cursor: not-allowed; }
.st-must { font-size: 12px; color: var(--muted); }
.st-btn { height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.st-btn:hover { background: var(--surface-2); }
.st-btn.danger { color: #c0392b; border-color: rgba(192, 57, 43, .45); } .st-btn.dark { background: #1a3640; border-color: #1a3640; color: #fff; }
.st-lock { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; } .st-lock b { font-size: 14px; } .st-lock small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.st-times { display: flex; align-items: center; gap: 8px; } .st-times small { font-size: 12px; color: var(--muted); }
.st-time { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.st-time input { border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.st-note { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 12.5px; color: var(--muted); }
.st-link { border: 0; background: none; padding: 0; font: inherit; color: #2e7a93; font-weight: 700; cursor: pointer; text-decoration: underline; }
.st-foot { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 20px; }
/* profile hero */
.st-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 16px 0 6px; padding: 22px 26px; border-radius: 24px; background: linear-gradient(110deg, #2e7a93 0%, #2b4e5c 55%, #1a3640 100%); color: #fff; }
.st-hero-who { display: flex; align-items: center; gap: 16px; } .st-hero-who > div { display: flex; flex-direction: column; gap: 3px; }
.st-hero-who b { font-family: var(--f-display); font-size: 24px; } .st-hero-who span { font-size: 13px; opacity: .85; } .st-hero-who small { font-size: 12px; opacity: .65; }
.st-hero-av { position: relative; } .st-hero-av .avatar { width: 78px; height: 78px; font-size: 26px; background: #b1eb51 !important; color: #1a3640 !important; }
.st-cam { position: absolute; bottom: -2px; left: -2px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2b4e5c; background: #fff; color: #1a3640; display: grid; place-items: center; cursor: pointer; }
.st-hero-stats { display: flex; gap: 10px; } .st-hero-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 104px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); }
.st-hero-stats b { font-size: 22px; color: #b1eb51; } .st-hero-stats small { font-size: 11.5px; opacity: .8; text-align: center; }
/* devices */
.st-devices { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.st-device { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); }
.st-device > div { flex: 1; display: flex; flex-direction: column; } .st-device b { font-size: 14px; } .st-device small { font-size: 12px; color: var(--muted); }
.st-dev-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: #2e7a93; }
.st-me { font-style: normal; padding: 4px 12px; border-radius: 99px; background: rgba(177, 235, 81, .5); color: #1a3640; font-size: 12px; font-weight: 700; }
/* notifications matrix */
.st-matrix { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.st-mx-h, .st-mx-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 96px); align-items: center; }
.st-mx-h { padding: 0 16px 4px; font-size: 12.5px; color: var(--muted); } .st-mx-h span:not(:first-child) { text-align: center; }
.st-mx-r { padding: 12px 16px; border-radius: 16px; background: var(--surface-2); }
.st-mx-r > div { display: flex; flex-direction: column; } .st-mx-r b { font-size: 14px; } .st-mx-r small { font-size: 11.5px; color: var(--muted); }
.st-mx-r > span { display: grid; place-items: center; }
.st-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1.5px solid var(--line-2, #cfd5d8); background: var(--surface); color: #fff; cursor: pointer; }
.st-check.on { background: #2e7a93; border-color: #2e7a93; } .st-check.must { opacity: .5; } .st-check:disabled { cursor: not-allowed; } .st-check:disabled:not(.on) { opacity: .45; }
/* integrations */
.st-count2 { margin: 12px 0 2px; font-size: 12.5px; color: var(--muted); }
.st-integ { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 12px 0 18px; }
.st-int { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.st-int:hover { border-color: rgba(46, 122, 147, .4); box-shadow: 0 12px 24px -20px rgba(20, 23, 25, .5); }
.st-int.on { border-color: rgba(46, 122, 147, .45); }
.st-int header { display: flex; align-items: center; gap: 12px; } .st-int header > div { flex: 1; display: flex; flex-direction: column; } .st-int header b { font-size: 15px; } .st-int header small { font-size: 11.5px; color: var(--muted); }
.st-logo { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 23, 25, .08), 0 4px 10px -6px rgba(20, 23, 25, .3); }
.st-logo svg { width: 34px; height: 34px; }
.st-logo .st-logo2 { position: absolute; bottom: -6px; left: -6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 23, 25, .1); }
.st-logo .st-logo2 svg { width: 20px; height: 20px; }
.st-linked { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2e7a93; } .st-linked::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e7a93; }
.st-int p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); flex: 1; }
.st-int-eq { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.st-int-src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.st-int-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.st-int-acts { display: flex; gap: 8px; } .st-int-acts .st-btn { flex: 1; height: 44px; }
/* storage + search hits */
.st-bar { display: flex; gap: 3px; height: 14px; margin: 18px 0 10px; padding: 0; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .st-bar i { display: block; height: 100%; border-radius: 99px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 12px; font-size: 12.5px; color: var(--ink-2); } .st-legend span { display: inline-flex; align-items: center; gap: 6px; } .st-legend i { width: 9px; height: 9px; border-radius: 50%; }
.st-hit { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface-2); font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.st-hit > div { flex: 1; display: flex; flex-direction: column; } .st-hit b { font-size: 14px; } .st-hit small { font-size: 12px; color: var(--muted); }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
/* dark */
:root[data-theme="dark"] .st-nav-i.on { background: #e8eef1; color: #13282f; } :root[data-theme="dark"] .st-nav-i.on small { color: rgba(30, 36, 41, .6); } :root[data-theme="dark"] .st-nav-i.on .st-nav-ic { background: rgba(30, 36, 41, .08); color: #2e7a93; }
:root[data-theme="dark"] .st-nav-ic, :root[data-theme="dark"] .st-dev-ic { color: #8fd0e4; }
:root[data-theme="dark"] .st-seg button[aria-pressed="true"], :root[data-theme="dark"] .st-btn.dark { background: #e8eef1; border-color: #e8eef1; color: #13282f; }
:root[data-theme="dark"] .st-sw.on, :root[data-theme="dark"] .st-check.on { background: #5cacc7; border-color: #5cacc7; }
:root[data-theme="dark"] .st-me { background: rgba(177, 235, 81, .18); color: #b1eb51; }
:root[data-theme="dark"] .st-int { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .st-btn.danger { color: #f5a096; border-color: rgba(245, 160, 150, .4); }
:root[data-theme="dark"] .st-saved svg { color: #8fd0e4; }
@media (max-width: 980px) { .st-wrap { grid-template-columns: 1fr; } .st-nav { position: static; max-height: none; } .st-row { flex-wrap: wrap; } .st-input { width: 100%; max-width: none; } .st-mx-h, .st-mx-r { grid-template-columns: minmax(0, 1fr) repeat(4, 56px); } }
/* Integration logos as images + the connect popup */
.st-logo-img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; display: block; }
.st-logo:has(.st-logo-img) { background: none; box-shadow: 0 4px 10px -6px rgba(20, 23, 25, .35); }
.st-int-src b { font-weight: 700; color: var(--ink-2); }
.st-cn-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .st-cn-h > div { display: flex; flex-direction: column; } .st-cn-h b { font-size: 16px; } .st-cn-h small { font-size: 12px; color: var(--muted); }
.st-cn-mail { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); color: #2e7a93; }
.st-cn-mail > div { display: flex; flex-direction: column; } .st-cn-mail small { font-size: 12px; color: var(--muted); } .st-cn-mail b { font-size: 15px; color: var(--ink); }
.st-cn-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.st-cn-err { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: #c0392b; }
.st-otp { display: flex; justify-content: center; gap: 12px; margin: 6px 0 4px; }
.st-otp input { width: 58px; height: 64px; border-radius: 16px; border: 1.5px solid var(--line-2, var(--line)); background: var(--surface-2); text-align: center; font: inherit; font-size: 26px; font-weight: 800; color: var(--ink); outline: none; }
.st-otp input:focus { border-color: #2e7a93; background: var(--surface); box-shadow: 0 0 0 3px rgba(46, 122, 147, .15); }
:root[data-theme="dark"] .st-cn-mail { color: #8fd0e4; } :root[data-theme="dark"] .st-cn-err { color: #f5a096; }

/* Live room word menu reuses the recordings menu (.sbw-pop) inside the generic popover */
.popover:has(.sbw-pop.in-pop) { padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
.sbw-pop.in-pop { position: static; width: 280px; max-height: min(440px, calc(100vh - 24px)); }
/* Live room: result after approval as plain cards (replaces the phone mock-up) */
.rs-cards { display: flex; flex-direction: column; gap: 8px; }
.rs-card { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.rs-l { font-size: 12px; color: var(--muted); }
.rs-card b { font-size: 15px; color: var(--ink); }
.rs-res { flex-direction: row; align-items: center; gap: 10px; }
.rs-res .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-grade { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rs-grade svg { color: currentColor; }
.rs-grade.mutqin { background: var(--accent); color: #fff; }
.rs-grade.yasira { background: var(--accent-soft); color: var(--accent-ink); }
.rs-grade.iaada { background: var(--bad-soft); color: var(--bad); }
.rs-h { display: flex; align-items: center; justify-content: space-between; }
.rs-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rs-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-errs li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.rs-errs li:first-child { border-top: 0; padding-top: 2px; }
.rs-errs li > i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warm); }
.rs-errs li.sev-high > i { background: var(--bad); }
.rs-w { font-family: var(--f-quran); font-size: 19px; line-height: 1.4; color: var(--ink); flex: none; min-width: 54px; }
.rs-errs .grow { flex: 1; min-width: 0; }
.rs-empty { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent); }
.rs-note { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rs-next { background: var(--ink); border-color: var(--ink); }
.rs-next .rs-l { color: rgba(255,255,255,.65); }
.rs-next b { color: #fff; }
:root[data-theme="dark"] .rs-card { background: var(--surface-2); }
:root[data-theme="dark"] .rs-next { background: var(--surface-3); border-color: var(--line-2); }
:root[data-theme="dark"] .rs-next .rs-l { color: var(--muted); }
:root[data-theme="dark"] .rs-next b { color: var(--ink); }
:root[data-theme="dark"] .rs-grade.iaada { background: color-mix(in srgb, var(--bad) 20%, var(--surface)); color: #ff9a91; }.room-assess > .btn, .rs-cards, .rs-card { flex-shrink: 0; }

/* The two actions after approval stay pinned at the bottom of the column, in a floating card */
.rs-foot { position: sticky; bottom: 0; margin-top: auto; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); box-shadow: 0 -10px 28px -14px rgba(26, 54, 64, .28);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.rs-foot .btn { flex-shrink: 0; }
:root[data-theme="dark"] .rs-foot { background: color-mix(in srgb, var(--surface-2) 85%, transparent); border-color: var(--line-2); box-shadow: 0 -10px 28px -14px rgba(0, 0, 0, .6); }
/* Dashboard: the six stat cards always sit on one row (compact content); 3 per row only on tablets, 2 on phones */
.kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi-row .kpi4 { padding: 14px 14px 12px; gap: 8px; border-radius: 20px; }
.kpi-row .k4-ico { width: 40px; height: 40px; }
.kpi-row .k4-ico svg { width: 18px; height: 18px; }
.kpi-row .k4-label { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-row .k4-val { flex-wrap: wrap; row-gap: 0; }
.kpi-row .k4-val b { font-size: clamp(24px, 2.1vw, 34px); }
.kpi-row .k4-val span { font-size: 11.5px; }
.kpi-row .k4-legend { gap: 0; }
.kpi-row .k4-legend li { padding-inline: 6px; min-width: 0; font-size: 11.5px; }
.kpi-row .k4-legend li b { font-size: 13px; }
@media (max-width: 1500px) { .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1700px) { .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dashboard quick actions: all six on one row like the stat cards; 3 per row on tablets, 2 on phones */
.qa-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.qa-pills .qa-pill { height: 56px; gap: 8px; padding-inline-start: 14px; padding-inline-end: 6px; }
.qa-pills .qa-pill b { font-size: 13.5px; }
.qa-pills .qa-pill .qp-go { width: 42px; height: 42px; flex: none; }
@media (max-width: 1700px) { .qa-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1500px) { .qa-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .qa-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qa-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (min-width: 1101px) { .qa-pills { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.qa-pills .qa-pill b { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qa-pills .qa-pill .qp-go { width: 38px; height: 38px; }
/* Teacher's daily check-in popup */
.modal:has(.tc) { width: min(600px, calc(100vw - 32px)); }
.tc { display: flex; flex-direction: column; gap: 16px; }
.tc-intro { display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--accent-soft); color: var(--ink); }
.tc-intro-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.tc-intro-ic svg { color: #fff; }
.tc-intro b { font-size: 15.5px; }
.tc-intro p { margin: 4px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.tc-sec { display: flex; flex-direction: column; gap: 8px; }
.tc-l { font-size: 13px; font-weight: 700; color: var(--ink); }
.tc-circles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tc-circles li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.tc-circles li b { font-size: 13.5px; }
.tc-circles li .num, .tc-circles li small { grid-column: 2; color: var(--muted); font-size: 12px; }
.tc-circles li.muted { display: block; }
.tc-dot { grid-row: span 3; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.tc-dot.live { background: var(--brand-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-lime) 35%, transparent); }
.tc-dot.closed { background: var(--brand); }
.tc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tc-opt { font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-align: start; transition: border-color .15s, background .15s; }
.tc-opt:hover { border-color: var(--line-2); }
.tc-opt b { font-size: 15px; }
.tc-opt small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.tc-opt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); margin-bottom: 4px; }
.tc-opt-ic svg { color: currentColor; }
.tc-opt.present.on { border-color: var(--brand); background: var(--accent-soft); }
.tc-opt.present.on .tc-opt-ic { background: var(--brand); color: #fff; }
.tc-opt.late.on { border-color: var(--brand-lime); background: color-mix(in srgb, var(--brand-lime) 18%, var(--surface)); }
.tc-opt.late.on .tc-opt-ic { background: var(--brand-lime); color: var(--on-lime); }
.tc-opt.absent.on { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad-soft); }
.tc-opt.absent.on .tc-opt-ic { background: var(--bad); color: #fff; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-chip { font: inherit; cursor: pointer; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; }
.tc-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tc-note { min-height: 64px; }
.tc-hint, .tc-sim { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
:root[data-theme="dark"] .tc-intro { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
:root[data-theme="dark"] .tc-opt { background: var(--surface-2); }
:root[data-theme="dark"] .tc-opt.absent.on { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
:root[data-theme="dark"] .tc-opt.late.on { background: color-mix(in srgb, var(--brand-lime) 12%, var(--surface)); }
:root[data-theme="dark"] .tc-chip.on { background: #f3f5f6; border-color: #f3f5f6; color: var(--bg); }
@media (max-width: 560px) { .tc-opts, .tc-circles { grid-template-columns: 1fr; } }/* Check-in popup keeps one size whatever the status: the details area has a fixed height */
.modal:has(.tc) { height: min(780px, calc(100vh - 32px)); display: flex; flex-direction: column; }
.modal:has(.tc) .modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.tc-detail { height: 196px; flex: none; }
.tc-detail .tc-sec { height: 100%; }
.tc-detail .tc-note { min-height: 0; height: 64px; resize: none; }
.tc-empty { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; border: 1.5px dashed var(--line-2); color: var(--muted); font-size: 13px; text-align: center; padding: 0 20px; }
.tc-empty.ok { border-style: solid; border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: var(--accent-soft); color: var(--accent-ink); }
.tc-empty svg { color: currentColor; flex: none; }
/* Check-in is mandatory: no close button; a click outside / Escape shakes it gently */
.modal:has(.tc) .close-btn { display: none; }
.modal:has(.tc) .modal-foot .tc-send { width: 100%; height: 48px; justify-content: center; }
.modal.tc-nudge { animation: tc-nudge .35s ease; }
@keyframes tc-nudge { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }