/* ==========================================================================
   LogicGigs ecosystem components — shared by the portal (academy app shell), the admin panel and careers pages.
   Accent follows the area: violet in the portal (--ac), blue in admin.
   ========================================================================== */
:root { --px: var(--ac, var(--blue)); --px-l: color-mix(in srgb, var(--px) 10%, #fff); --px-line: #E8EAF3; }

/* ---------- Building blocks ---------- */
.box { background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 0 0 1px var(--px-line), 0 1px 2px rgba(20, 20, 60, .04); min-width: 0; }
.box + .box { margin-top: 18px; }
.box.flush { padding: 0; overflow: hidden; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.box-head h2, .box-head h3 { font: 800 17px/1.2 var(--f-display); letter-spacing: -.01em; margin: 0; }
.box-head a, .box-head .link { font-weight: 700; font-size: 13.5px; color: var(--px); }
.box-head small { color: var(--muted); font-weight: 600; }
.stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.stack > .box + .box, .grid-2 > .box + .box, .grid-3 > .box + .box, .grid-main > .box + .box, .grid-main > .stack + .box { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1150px) { .grid-main { grid-template-columns: minmax(0, 1fr); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 18px; }
.empty-note { color: var(--muted); font-size: 14px; padding: 6px 0; margin: 0; }
.empty-note .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.page-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-bar h1 { font: 800 clamp(22px, 2.2vw, 27px)/1.15 var(--f-display); letter-spacing: -.025em; margin: 0; }
.page-bar p { color: var(--muted); margin: 6px 0 0; max-width: 680px; }
.page-bar .crumb { display: inline-block; font-weight: 700; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Chips ---------- */
.role-chip { --rc: #5B6478; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--rc); background: color-mix(in srgb, var(--rc) 11%, #fff); white-space: nowrap; }
.role-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.st-chip { --sc: #5B6478; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, #fff); white-space: nowrap; }
.demo-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8A5A00; background: #FFF3D1; box-shadow: inset 0 0 0 1px #F4D68A; white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--bg-2); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; }

/* ---------- Metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { --m: var(--px); background: #fff; border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 0 0 1px var(--px-line); display: grid; gap: 4px; min-width: 0; }
.metric small { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.metric small .ic { width: 15px; height: 15px; color: var(--m); }
.metric b { font: 800 26px/1.1 var(--f-display); letter-spacing: -.02em; }
.metric b em { font-style: normal; font-size: 15px; color: var(--muted); font-weight: 700; }
.metric span { color: var(--muted); font-size: 13px; }
.metric .bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--m) 14%, #fff); overflow: hidden; margin-top: 4px; }
.metric .bar i { display: block; height: 100%; border-radius: inherit; background: var(--m); }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bar-line { height: 7px; border-radius: 999px; background: #EEF0F6; overflow: hidden; min-width: 60px; }
.bar-line i { display: block; height: 100%; border-radius: inherit; background: var(--px); }
.bar-line.good i { background: var(--green); }
.bar-line.warn i { background: var(--amber); }
.bar-line.bad i { background: var(--red); }

/* Readiness gauge */
.gauge { --p: 0; --g: var(--px); position: relative; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--g) calc(var(--p) * 1%), #ECEEF5 0); display: grid; place-items: center; flex: none; }
.gauge::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.gauge b, .gauge small { position: relative; }
.gauge b { font: 800 24px/1 var(--f-display); }
.gauge small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.gauge > span { position: relative; display: grid; justify-items: center; }
.gauge.sm { width: 56px; height: 56px; }
.gauge.sm::before { inset: 6px; }
.gauge.sm b { font-size: 15px; }
.readiness { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.readiness h3 { font: 800 18px var(--f-display); margin: 0 0 4px; }
.readiness p { margin: 0; color: var(--muted); font-size: 13.5px; }
.parts { display: grid; gap: 7px; margin-top: 14px; }
.part { display: grid; grid-template-columns: minmax(150px, 190px) 1fr 38px; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.part em { font-style: normal; color: var(--muted); text-align: right; }

/* ---------- Tables ---------- */
.dt-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--px-line); white-space: nowrap; background: #FBFBFE; }
.dt td { padding: 10px 12px; border-bottom: 1px solid #F0F1F7; vertical-align: middle; }
.dt tr:last-child td { border-bottom: 0; }
.dt tbody tr:hover { background: #FBFBFE; }
.dt td small { display: block; color: var(--muted); font-size: 12.5px; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt a.name { font-weight: 700; }
.dt a.name:hover { color: var(--px); }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--px), color-mix(in srgb, var(--px) 55%, #fff)); color: #fff; font-weight: 800; font-size: 12.5px; }
.person .av img { width: 100%; height: 100%; object-fit: cover; }
.person b { display: block; font-size: 14px; line-height: 1.25; }
.person small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---------- Key facts ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; margin: 0; }
.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 3px 0 0; font-weight: 600; font-size: 14.5px; word-break: break-word; }
.facts dd a { color: var(--px); }
.facts dd small { color: var(--muted); font-weight: 500; }

/* ---------- Profile header ---------- */
.pf-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px; border-radius: 20px; margin-bottom: 18px; background: linear-gradient(115deg, #151036, color-mix(in srgb, var(--px) 75%, #151036)); color: #fff; position: relative; overflow: hidden; }
.pf-head::after { content: ""; position: absolute; right: -60px; top: -90px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); pointer-events: none; }
.pf-av { width: 84px; height: 84px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font: 800 28px var(--f-display); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.pf-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-id h1, .pf-id h2 { font: 800 clamp(21px, 2vw, 26px)/1.15 var(--f-display); letter-spacing: -.02em; margin: 0 0 4px; color: #fff; }
.pf-id p { margin: 0 0 10px; color: #CFC9F2; font-size: 14px; }
.pf-id .role-chip { background: rgba(255, 255, 255, .92); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-side { display: grid; gap: 8px; justify-items: end; position: relative; z-index: 1; }
.pf-side .gauge { --g: var(--lime); background: conic-gradient(var(--g) calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0); }
.pf-side .gauge::before { background: #2A1F66; }
.pf-side .gauge small { color: #CFC9F2; }
.pf-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pf-links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; color: #fff; }
.pf-links a:hover { background: rgba(255, 255, 255, .22); }
.pf-links .ic { width: 14px; height: 14px; }
@media (max-width: 760px) { .pf-head { grid-template-columns: auto 1fr; } .pf-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } .pf-av { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; } }

/* ---------- Tabs ---------- */
.tabbar { display: flex; gap: 4px; overflow-x: auto; padding: 4px; margin-bottom: 18px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--px-line); scrollbar-width: none; position: sticky; top: 72px; z-index: 12; }
.admin .tabbar { top: 66px; }
.tabbar a, .tabbar button { flex: none; padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--muted); border: 0; background: none; cursor: pointer; }
.tabbar a:hover, .tabbar button:hover { color: var(--ink); background: var(--bg-2); }
.tabbar a.on, .tabbar button.on { background: var(--px); color: #fff; }
.tabbar em { font-style: normal; margin-left: 5px; font-size: 11.5px; opacity: .8; }
[data-tabs] > [data-tab]:not(.on) { display: none; }
.no-js [data-tabs] > [data-tab] { display: block; }

/* ---------- Timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: #ECEEF5; }
.tl li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 0 0 18px; }
.tl li:last-child { padding-bottom: 0; }
.tl-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px #ECEEF5; color: var(--muted); position: relative; z-index: 1; }
.tl-dot .ic { width: 16px; height: 16px; }
.tl li.t-promotion .tl-dot, .tl li.t-hire .tl-dot { background: var(--px); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--px) 18%, #fff); }
.tl li.t-certificate .tl-dot, .tl li.t-achievement .tl-dot { background: #FFF3D1; color: #A06A00; box-shadow: 0 0 0 2px #F4D68A; }
.tl li.t-role_ended .tl-dot { color: var(--red); }
.tl-body b { display: block; font-size: 14.5px; line-height: 1.35; }
.tl-body small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tl-body p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); white-space: pre-line; }
.tl-body .note { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #FFF8E6; font-size: 13px; color: #6B4E00; }
.tl-when { color: var(--muted); font-weight: 600; font-size: 12px; }

/* ---------- Lists ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F0F1F7; min-width: 0; }
.rows > li:first-child { border-top: 0; padding-top: 0; }
.rows > li:last-child { padding-bottom: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .grow b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.rows .grow small { display: block; color: var(--muted); font-size: 12.5px; }
.rows .ic-tile { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--t, var(--px)) 13%, #fff); color: var(--t, var(--px)); }
.rows .ic-tile .ic { width: 18px; height: 18px; }
.rows a.grow:hover b { color: var(--px); }

/* ---------- Notifications ---------- */
.ntf-list { display: grid; gap: 10px; }
.ntf { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--px-line); }
.ntf.unread { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--px) 45%, #fff); background: linear-gradient(110deg, color-mix(in srgb, var(--px) 5%, #fff), #fff 60%); }
.ntf-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.ntf h3 { font: 700 15px/1.35 var(--f-body); margin: 0 0 3px; }
.ntf p { margin: 0 0 6px; color: var(--ink-3); font-size: 14px; white-space: pre-line; }
.ntf small { color: var(--muted); font-size: 12.5px; }
.ntf .dot-new { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); display: inline-block; }
.ntf form { display: inline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--px); font-weight: 700; font-size: 13px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.pill-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill-filter a { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1.5px var(--px-line); color: var(--ink-3); }
.pill-filter a.on { background: var(--px); color: #fff; box-shadow: none; }
.pager-lite { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pager-lite a { min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--px-line); font-weight: 700; font-size: 14px; }
.pager-lite a.on { background: var(--ink); color: #fff; }

/* ---------- Sidebar sections (portal) ---------- */
.app-nav .nav-sec { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9A92C4; padding: 14px 12px 4px; }
.app-nav .nav-sec:first-child { padding-top: 2px; }
.app-nav .nav-group { display: grid; gap: 2px; }
.app-nav .nav-group:first-child .nav-sec { padding-top: 2px; }
.app-nav .nav-group a { padding-top: 9px; padding-bottom: 9px; }
.app-nav a:focus-visible { outline: 3px solid var(--lime); outline-offset: 1px; }
.is-busy { opacity: .65; cursor: progress; pointer-events: none; }
.app-nav a { padding: 9px 12px; font-size: 14.5px; }
.app-bell em { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font: 800 10.5px/18px var(--f-body); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
.app-bells { display: flex; gap: 8px; }

/* ---------- Welcome strip extras ---------- */
.hello-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.hello-chips .role-chip { background: rgba(255, 255, 255, .92); }

/* ---------- Batch / staff cards ---------- */
.batch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bcard { --a: var(--px); display: grid; gap: 12px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 0 0 1px var(--px-line); border-top: 4px solid var(--a); }
.bcard h3 { font: 800 17px/1.2 var(--f-display); margin: 0; }
.bcard h3 small { display: block; font: 600 13px var(--f-body); color: var(--muted); margin-top: 3px; }
.bcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bcard-stats div { background: var(--bg-2); border-radius: 12px; padding: 9px 10px; }
.bcard-stats b { display: block; font: 800 19px var(--f-display); }
.bcard-stats small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.bcard .btn-row .btn { flex: 1; justify-content: center; }
.people-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.people-strip .person { background: var(--bg-2); padding: 6px 12px 6px 6px; border-radius: 999px; }
.people-strip .person .av { width: 30px; height: 30px; font-size: 11.5px; }

/* ---------- Forms (shared) ---------- */
.fgrid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.fgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 700px) { .fgrid-2, .fgrid-3 { grid-template-columns: minmax(0, 1fr); } }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; margin: 0 0 10px; cursor: pointer; }
.check-line input { margin-top: 3px; accent-color: var(--px); width: 16px; height: 16px; flex: none; }
.check-line small { display: block; font-weight: 500; color: var(--muted); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; max-height: 260px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); }
.check-grid .check-line { margin: 0; font-weight: 500; }
.rows li.perm-row { display: block; padding-top: 0; border-top: 0; }
.perm-edit summary { cursor: pointer; color: var(--ink-3); }
.perm-edit[open] summary { margin-bottom: 8px; }
.perm-edit .check-grid { max-height: none; }
.scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.scores label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
@media (max-width: 700px) { .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form .input, .inline-form .select { width: auto; flex: 1; min-width: 140px; }
.copy-box { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; background: #EAFBF2; box-shadow: inset 0 0 0 1px #BDEBD2; }
.copy-box input { flex: 1; font-family: var(--f-mono); font-size: 13px; background: #fff; }

/* ---------- Attendance ---------- */
.att-table td.att { white-space: nowrap; }
.att-opts { display: inline-flex; gap: 4px; }
.att-opts label { cursor: pointer; position: relative; }
.att-opts input { position: absolute; opacity: 0; pointer-events: none; }
.att-opts span { display: inline-grid; place-items: center; min-width: 74px; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.att-opts input:checked + span.p { background: #EAFBF2; color: #0E7A48; box-shadow: inset 0 0 0 1.5px #7DD9A8; }
.att-opts input:checked + span.l { background: #FFF6DE; color: #8A5A00; box-shadow: inset 0 0 0 1.5px #F4D68A; }
.att-opts input:checked + span.a { background: #FFF0F0; color: #9E1C22; box-shadow: inset 0 0 0 1.5px #F2A3A6; }
.att-opts input:checked + span.e { background: #EEF4FF; color: #1D3E91; box-shadow: inset 0 0 0 1.5px #C9DAFF; }
.att-opts input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--px) 40%, transparent); }
.date-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.date-pills a { padding: 5px 10px; border-radius: 9px; background: var(--bg-2); font-size: 12.5px; font-weight: 700; }
.date-pills a.on { background: var(--px); color: #fff; }

/* ---------- Messaging ---------- */
.chat-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 68px - 2 * clamp(18px, 3vw, 36px)); min-height: 520px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--px-line); overflow: hidden; }
.chat-list { border-right: 1px solid var(--px-line); display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { padding: 16px; border-bottom: 1px solid var(--px-line); display: grid; gap: 10px; }
.chat-list-head h2 { font: 800 18px var(--f-display); margin: 0; }
.chat-threads { overflow-y: auto; flex: 1; padding: 6px; }
.chat-thread { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; }
.chat-thread:hover { background: var(--bg-2); }
.chat-thread.on { background: color-mix(in srgb, var(--px) 10%, #fff); }
.chat-thread .av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--a, var(--px)); overflow: hidden; }
.chat-thread .av img { width: 100%; height: 100%; object-fit: cover; }
.chat-thread .av.round { border-radius: 50%; background: linear-gradient(135deg, #5B6478, #8A93A8); }
.chat-thread b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread > div { min-width: 0; }
.chat-thread em { font-style: normal; }
.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.chat-new { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 5; box-shadow: var(--shadow); }
.chat-back { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--px-line); }
.chat-head h2 { font: 800 16.5px/1.2 var(--f-display); margin: 0; }
.chat-head small { color: var(--muted); font-size: 12.5px; }
.chat-head .grow { flex: 1; min-width: 0; }
.chat-head details { position: relative; }
.chat-head summary { list-style: none; cursor: pointer; }
.chat-head summary::-webkit-details-marker { display: none; }
.chat-pop { position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, 80vw); background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); padding: 12px; z-index: 20; display: grid; gap: 10px; }
.chat-pinned { padding: 10px 18px; border-bottom: 1px solid var(--px-line); background: #FFFBF0; display: grid; gap: 6px; max-height: 150px; overflow-y: auto; }
.chat-pinned b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8A5A00; }
.chat-pinned a { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.chat-pinned a strong { color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: #FAFAFD; overscroll-behavior: contain; }
.chat-more { align-self: center; margin-bottom: 8px; }
.chat-day { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff; padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 1px var(--px-line); margin: 10px 0 6px; }
.cmsg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 12px; position: relative; max-width: 780px; }
.cmsg:hover { background: #fff; box-shadow: 0 0 0 1px var(--px-line); }
.cmsg.cont { padding-top: 0; }
.cmsg.cont .cav { visibility: hidden; height: 0; }
.cmsg.cont .cmeta { display: none; }
.cav { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: linear-gradient(135deg, #6C4DFF, #A58BFF); }
.cmsg.mine .cav { background: linear-gradient(135deg, #0E9F6E, #5FD3A4); }
.cmeta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cmeta b { font-size: 13.5px; }
.cmeta time { font-size: 11.5px; color: var(--muted); }
.cmeta .staff { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--px); background: color-mix(in srgb, var(--px) 12%, #fff); padding: 1px 6px; border-radius: 5px; }
.cbody { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; color: var(--ink-2); }
.cbody a { color: var(--px); text-decoration: underline; }
.cbody.gone { color: var(--muted-2); font-style: italic; }
.cbody .edited { font-size: 11px; color: var(--muted); margin-left: 4px; }
.cmsg.ann { background: #FFF8E6; box-shadow: 0 0 0 1px #F4D68A; margin: 6px 0; }
.cmsg.ann .cbody { color: #4A3600; }
.cmsg.pinned::after { content: "📌"; position: absolute; right: 10px; top: 6px; font-size: 12px; }
.cacts { position: absolute; right: 8px; top: -12px; display: none; gap: 2px; background: #fff; border-radius: 9px; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); padding: 2px; }
.cmsg:hover .cacts, .cmsg:focus-within .cacts { display: flex; }
.cacts button { border: 0; background: none; padding: 5px 7px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.cacts button:hover { background: var(--bg-2); color: var(--ink); }
.cacts button.danger:hover { color: var(--red); }
.chat-compose { border-top: 1px solid var(--px-line); padding: 12px 14px; display: grid; gap: 8px; background: #fff; }
.chat-compose-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; border-radius: 12px; padding: 11px 14px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; line-height: 1.45; background: #fff; }
.chat-compose textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--px); }
.chat-compose .btn { min-height: 44px; }
.chat-compose small { color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chat-compose .err { color: var(--red); font-weight: 600; }
.chat-empty { display: grid; place-items: center; text-align: center; padding: 40px; color: var(--muted); height: 100%; }
.chat-empty .ic { width: 42px; height: 42px; color: var(--px); margin: 0 auto 10px; }
.chat-readonly { padding: 14px 18px; border-top: 1px solid var(--px-line); color: var(--muted); font-size: 14px; background: #fff; }
@media (max-width: 900px) {
  .chat-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .chat-shell.has-thread .chat-list { display: none; }
  .chat-main { height: calc(100vh - 68px - 40px); min-height: 460px; }
  .chat-shell:not(.has-thread) .chat-main { display: none; }
  .chat-back { display: inline-flex; }
}

/* ---------- Careers ---------- */
.careers-hero { background: var(--ink); color: #fff; padding-bottom: clamp(40px, 5vw, 64px); }
.careers-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 12% 30%, rgba(108, 77, 255, .35), transparent 70%), radial-gradient(35% 45% at 92% 80%, rgba(198, 244, 50, .16), transparent 70%); pointer-events: none; }
.careers-hero .wrap { position: relative; }
.careers-hero .ph-title { color: #fff; }
.track-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.track-tabs a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-weight: 700; color: #fff; }
.track-tabs a span { font-size: 12.5px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.track-tabs a.on { background: #fff; color: var(--ink); }
.track-tabs a.on span { background: var(--bg-2); }
.job-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.job-filters .select, .job-filters .input { width: auto; min-width: 150px; min-height: 44px; }
.job-filters .input { flex: 1; min-width: 200px; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.job-card { --a: var(--blue); position: relative; display: grid; gap: 12px; align-content: start; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 15, 31, .04); transition: box-shadow .25s, transform .25s; }
.job-card.academy { --a: var(--violet); }
.job-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--a), var(--shadow); }
.job-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.job-track { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a); }
.job-track .ic { width: 15px; height: 15px; }
.job-card h3 { font: 800 19px/1.25 var(--f-display); letter-spacing: -.01em; margin: 0; }
.job-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.job-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.job-meta span { display: inline-flex; align-items: center; gap: 5px; }
.job-meta .ic { width: 15px; height: 15px; color: var(--muted); }
.job-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); font-weight: 600; }
.job-foot b { color: var(--a); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.job-foot b .ic { width: 16px; height: 16px; }
.job-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.job-main .box + .box { margin-top: 18px; }
.job-main h2 { font: 800 19px var(--f-display); margin: 0 0 12px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 15px; }
.check-list li .ic { color: var(--green); width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.5; }
.apply-card { position: sticky; top: 100px; }
.apply-card h2 { font: 800 20px var(--f-display); margin: 0 0 4px; }
.apply-card .field { margin-bottom: 14px; }
.demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #FFF8E6; box-shadow: inset 0 0 0 1px #F4D68A; color: #6B4E00; font-size: 13.5px; margin-bottom: 16px; }
.demo-note .ic { flex: none; margin-top: 1px; }
.sent-box { text-align: center; padding: 10px 0; }
.sent-box .ic-big { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: #EAFBF2; color: var(--green); }
@media (max-width: 1000px) { .job-page { grid-template-columns: minmax(0, 1fr); } .apply-card { position: static; } }

/* Application tracker */
.app-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0 4px; }
.app-track span { position: relative; display: grid; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted-2); text-align: center; }
.app-track span::before { content: ""; height: 6px; border-radius: 999px; background: #ECEEF5; }
.app-track span.done { color: var(--ink-3); }
.app-track span.done::before { background: var(--green); }
.app-track span.now { color: var(--ink); }
.app-track span.now::before { background: var(--px); }
.app-track.stopped span.now::before { background: var(--red); }
.app-card { display: grid; gap: 6px; }
.app-card h3 { font: 800 17px var(--f-display); margin: 0; }

/* ---------- Admin: kanban board ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(175px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.board-col { background: #EEF1F7; border-radius: 16px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.board-col h3 { display: flex; align-items: center; gap: 8px; font: 800 13px var(--f-body); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; margin: 0; }
.board-col h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
.board-col h3 span { margin-left: auto; background: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--muted); }
.board-card { display: grid; gap: 4px; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 2px rgba(10, 15, 31, .06); border-left: 3px solid var(--sc); font-size: 13.5px; }
.board-card:hover { box-shadow: var(--shadow); }
.board-card b { font-size: 14px; }
.board-card small { color: var(--muted); font-size: 12px; }
.board-card .stars-mini { color: #F4B740; font-size: 12px; letter-spacing: 1px; }

/* ---------- Admin: promotion wizard ---------- */
.stepper { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; }
.stepper button { flex: 1; min-width: 150px; white-space: nowrap; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: left; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.stepper button i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-style: normal; font-size: 12.5px; flex: none; }
.stepper button.on { color: var(--ink); box-shadow: 0 0 0 2px var(--px); }
.stepper button.on i { background: var(--px); color: #fff; }
.stepper button.done i { background: var(--green); color: #fff; }
[data-wizard] [data-step]:not(.on) { display: none; }
.no-js [data-wizard] [data-step] { display: block; }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pos-group h3 { font: 800 13px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 0 10px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pos-card { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; background: #fff; }
.pos-card input { position: absolute; opacity: 0; }
.pos-card b { font-size: 14.5px; }
.pos-card small { color: var(--muted); font-size: 12.5px; }
.pos-card:hover { box-shadow: inset 0 0 0 1.5px var(--px); }
.pos-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--px); background: color-mix(in srgb, var(--px) 6%, #fff); }
.pos-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--px) 40%, transparent); }
.summary-list { display: grid; gap: 8px; margin: 0; }
.summary-list div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.summary-list div:first-child { border-top: 0; }
.summary-list dt { color: var(--muted); font-weight: 700; }
.summary-list dd { margin: 0; font-weight: 600; }
.from-to { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 800 18px var(--f-display); }
.from-to .ic { color: var(--px); }
.from-to span:first-child { color: var(--muted); }
.scope-when { display: none; }
.scope-when.on { display: block; }

/* ---------- Import ---------- */
.map-table select { min-width: 190px; }
.map-table td.sample { color: var(--muted); font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-create { color: #0E7A48; font-weight: 800; }
.act-update { color: var(--blue-d); font-weight: 800; }
.act-skip { color: var(--red); font-weight: 800; }
.msgs { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); }
.steps-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.steps-line span { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--muted); }
.steps-line span.on { background: var(--ink); color: #fff; box-shadow: none; }
.steps-line span.done { color: #0E7A48; }

/* ---------- Portfolio ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.proj { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 16px; box-shadow: 0 0 0 1px var(--px-line); background: #fff; }
.proj h3 { font: 800 16px var(--f-display); margin: 0; }
.proj p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.proj .links { display: flex; gap: 12px; font-size: 13px; font-weight: 700; }
.proj .links a { color: var(--px); display: inline-flex; gap: 5px; align-items: center; }
.proj .links .ic { width: 14px; height: 14px; }
.ach { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.ach-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF3D1; color: #A06A00; }

/* ---------- Activation page ---------- */
.activate-card { max-width: 440px; margin: 0 auto; }

/* File drop on public careers pages (the academy has its own .drop) */
.site .drop { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; border: 2px dashed #CFD8EA; background: var(--bg-2); cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; }
.site .drop:hover, .site .drop.drag { border-color: var(--blue); background: #EEF4FF; }
.site .drop input { position: absolute; opacity: 0; width: 1px; }
.site .drop .ic { color: var(--blue); flex: none; }
.site .job-card .tag, .site .box .tag { background: var(--bg-2); }
.page-careers .box { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 15, 31, .04); }
@media (max-width: 900px) { .page-careers .grid-3 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .page-careers .grid-3 { grid-template-columns: 1fr !important; } }

/* ---------- Fees (admin fee desk + student "My fees") ---------- */
.fee-metrics .metric b { font-size: clamp(18px, 1.7vw, 23px); overflow-wrap: anywhere; }
.fee-metrics .metric b .ic { width: 22px; height: 22px; color: var(--green); }
.fee-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.fee-tbl td.num small { text-align: right; }
.fee-acc { margin-bottom: 18px; scroll-margin-top: 80px; }
.fee-acc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fee-acc-head small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.fee-forms { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.fee-box { background: #FAFBFD; border-radius: 14px; padding: 16px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.fee-box h3, .fee-h { font: 800 15px var(--f-body); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.fee-box h3 .ic { width: 17px; height: 17px; color: var(--px); }
.fee-box .field { margin-bottom: 12px; }
.fee-h { margin: 16px 0 10px; }
.fee-box .empty .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--green); }
.link-btn { border: 0; background: none; padding: 0; color: var(--px); font-weight: 700; font-size: inherit; cursor: pointer; text-decoration: underline; }
.fee-pending-row td { background: #FFF9EC; }
.fee-done { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #EAFBF2; box-shadow: inset 0 0 0 1px #BDEBD2; margin-bottom: 18px; flex-wrap: wrap; }
.fee-done > div { flex: 1; min-width: 220px; }
.fee-done p { margin: 2px 0 0; color: #0B6B3D; font-size: 14px; }
.fee-done-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--green); color: #fff; }
.fee-filters { margin-bottom: 18px; }
.fee-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.fee-filter-grid .label { display: grid; gap: 6px; font-size: 13px; }
.fee-filter-grid .input, .fee-filter-grid .select { min-height: 42px; font-size: 14px; }
.fee-filter-btns { display: flex; gap: 8px; }
.fee-quick { margin: 12px 0 0; }
.fee-quick a { color: var(--px); font-weight: 700; }
.ad-stats-fees b { font-size: clamp(17px, 1.5vw, 21px); }
.fee-history { list-style: none; margin: 0; padding: 0; display: grid; }
.fee-history > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F0F1F7; }
.fee-history > li:first-child { border-top: 0; }
.fee-history .grow { flex: 1; min-width: 0; }
.fee-history b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.fee-history small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.fee-no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--green) 14%, #fff); color: #0E7A48; font-weight: 800; font-size: 13px; }
.fee-history li.pending .fee-no { background: #FFF3D1; color: #8A5A00; }
.fee-mini .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fee-forms { grid-template-columns: minmax(0, 1fr); } .fee-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fee-filter-grid { grid-template-columns: minmax(0, 1fr); } .fee-history > li { flex-wrap: wrap; } .fee-history .grow { flex-basis: calc(100% - 44px); } .fee-history .btn { margin-left: 44px; } }

/* ==========================================================================
   LMS phase 2: filters, learning tools, assessments, grades, dashboard
   ========================================================================== */
.btn-xs { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn-ghost.danger { color: var(--red); }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.fbar .select { min-height: 40px; width: auto; max-width: 240px; }
.fsearch { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 0 12px; min-height: 40px; box-shadow: 0 0 0 1px var(--px-line); }
.fsearch:focus-within { box-shadow: 0 0 0 2px var(--px); }
.fsearch .ic { width: 17px; height: 17px; color: var(--muted); }
.fsearch input { border: 0; outline: 0; background: none; flex: 1; font: inherit; min-width: 0; }
.nowrap { white-space: nowrap; }
.topic-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.topic-bars li { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 44px; gap: 10px; align-items: center; font-size: 14px; }
.topic-bars li span small { display: block; color: var(--muted); font-size: 12px; }
.topic-bars li b { text-align: right; font-variant-numeric: tabular-nums; }
.qtimer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.qtimer.low { background: #FFF0F0; color: #9E1C22; box-shadow: 0 0 0 1px #F8C9CB; }
.quiz-bar { flex-wrap: wrap; gap: 10px 14px; }
.lesson-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lesson-actions .is-on { color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ac); }
.lesson-box { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #ECE9F6; }
.lesson-box h3, .cd-box h3 { display: flex; align-items: center; gap: 8px; font: 800 16px var(--f-display); margin: 0 0 12px; }
.lesson-box h3 .ic, .cd-box h3 .ic { width: 18px; height: 18px; color: var(--ac); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.res-list a, .res-list .locked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }
.res-list a:hover { background: #ECE9F6; }
.res-list .ic { width: 18px; height: 18px; flex: none; color: var(--ac); }
.res-list b { display: block; font-size: 14.5px; }
.res-list small { color: var(--muted); font-size: 12.5px; }
.res-list .locked { color: var(--muted); }
.lesson-ann { padding: 10px 0; border-top: 1px solid #F0F1F7; }
.lesson-ann:first-of-type { border-top: 0; padding-top: 0; }
.lesson-ann small { color: var(--muted); margin-left: 8px; font-size: 12.5px; }
.lesson-ann p { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.cd-box { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--bg-2); }
.lpath { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.lpath a, .lpath b { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; }
.lpath b { background: var(--ac); color: #fff; box-shadow: none; }
.lpath span { color: var(--muted); }
.prereq-list li { display: flex; gap: 10px; align-items: flex-start; }
.prereq-list li small { color: var(--muted); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cat-chips a { padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: 700; font-size: 13.5px; }
.cat-chips a.on { background: var(--ink); color: #fff; box-shadow: none; }
.note-card .box-head { align-items: flex-start; }
.note-card h2 a:hover { color: var(--px); }
.rub-row .row .input { min-height: 40px; }
.trend { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 0 22px; border-bottom: 1px solid var(--px-line); }
.trend span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 14px; }
.trend i { width: 100%; max-width: 34px; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--px), color-mix(in srgb, var(--px) 55%, #fff)); }
.trend small { position: absolute; bottom: -20px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.quick-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--px-line); font-weight: 700; font-size: 14px; }
.quick-actions a:hover { box-shadow: 0 0 0 1.5px var(--ac); }
.quick-actions .ic { width: 17px; height: 17px; color: var(--ac); }
.quick-actions em { font-style: normal; font-size: 12px; font-weight: 800; background: var(--lime); color: var(--ink); padding: 1px 8px; border-radius: 999px; }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.milestones li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; color: var(--muted); }
.milestones li.done { color: var(--ink); }
.milestones li .ic { width: 18px; height: 18px; flex: none; }
.milestones li.done .ic { color: var(--green); }
.milestones small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .topic-bars li { grid-template-columns: 1fr 44px; }
  .topic-bars li .pbar { grid-column: 1 / -1; grid-row: 2; }
  .fbar .select { max-width: none; flex: 1 1 140px; }
}

/* ==========================================================================
   LMS phase 3: analytics, attendance, calendar & planner, goals, certificates, timetable
   ========================================================================== */
.page-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty-note { color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 14.5px; }
.empty-note .ic { width: 18px; height: 18px; flex: none; color: var(--px); }
.empty-state { text-align: center; padding: 30px 10px; }
.empty-state > .ic { width: 40px; height: 40px; color: var(--px); margin: 0 auto 10px; }
.empty-state p { color: var(--muted); max-width: 460px; margin: 6px auto 16px; }
.ok { color: var(--green); font-weight: 700; } .bad { color: var(--red); font-weight: 700; }
.explain { margin: -6px 0 18px; font-size: 14px; }
.explain summary { cursor: pointer; color: var(--muted); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.explain dl { margin: 10px 0 0; display: grid; gap: 10px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 0 0 1px var(--px-line); }
.explain dt { font-weight: 800; } .explain dd { margin: 2px 0 0; color: var(--ink-3, #2A3147); }
.an-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-course .an-course-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.an-course .an-course-top h3 { font: 800 18px var(--f-display); margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.an-course .ac-ring { background: conic-gradient(var(--px) calc(var(--p) * 1%), var(--px-l) 0); }
.an-course .grow { flex: 1; min-width: 220px; }
.pace { margin-top: 8px; max-width: 520px; }
.pace .pbar, .att-bar { position: relative; overflow: visible; }
.pace .pbar s, .att-bar s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; text-decoration: none; }
.pace small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.pace.behind small { color: #9E1C22; font-weight: 600; }
.an-course-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 18px; margin-top: 16px; align-items: start; }
.an-course-foot .cert-check { min-width: 0; }
.an-remaining summary { cursor: pointer; font-weight: 700; color: var(--px); }
.an-remaining ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.an-remaining li small { display: block; color: var(--muted); font-size: 12.5px; }
.stat-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 14px; background: var(--px-l); }
.stat-bar i { display: block; min-width: 4px; }
.kv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.kv-list li { display: flex; align-items: center; gap: 8px; }
.kv-list li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.dot { --d: var(--px); display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--d); flex: none; }
.wk-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 6px 0 24px; border-bottom: 1px solid var(--px-line); }
.wk { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.wk-col { width: 100%; max-width: 34px; height: max(var(--h), 2px); display: flex; flex-direction: column-reverse; border-radius: 7px 7px 3px 3px; overflow: hidden; background: var(--px-l); }
.wk-col i, .legend i { display: block; }
.wk-col i.lessons, .legend i.lessons { background: #0E9F6E; }
.wk-col i.submissions, .legend i.submissions { background: #1F6BFF; }
.wk-col i.quizzes, .legend i.quizzes { background: #B7791F; }
.wk small { position: absolute; bottom: -22px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.badge-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #B7791F 12%, #fff); color: #6B4700; font-weight: 700; font-size: 13px; }
.badge-pill .ic { width: 15px; height: 15px; }
/* Attendance */
.att-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.att-courses .box + .box { margin-top: 0; }
.att-course.short { box-shadow: 0 0 0 1.5px #F8C9CB; }
.att-course .box-head h3 { font: 800 16px var(--f-display); margin: 0; }
.att-pct b { font: 800 30px var(--f-display); } .att-pct small { display: block; color: var(--muted); }
.att-bar { margin: 10px 0 12px; }
.att-bar i { background: var(--px); }
.att-course.short .att-bar i { background: var(--red); }
.att-counts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; font-weight: 700; font-size: 13.5px; }
.att-warn { color: #9E1C22; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.print-only { display: none; }
@media print {
  .app-side, .app-top, .no-print, .flash, .explain summary { display: none !important; }
  .print-only { display: block; }
  .app-shell { display: block; } .box { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}
/* Calendar */
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; background: #fff; border-radius: 12px; padding: 3px; box-shadow: 0 0 0 1px var(--px-line); }
.seg a { padding: 6px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg a.on { background: var(--px); color: #fff; }
.cal-nav { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 0; flex-wrap: wrap; }
.cal-nav h2 { font: 800 19px var(--f-display); margin: 0 0 0 8px; }
.cal-nav .ic { width: 16px; height: 16px; }
.cal-filter { position: relative; }
.cal-filter summary { list-style: none; cursor: pointer; }
.cal-filter summary::-webkit-details-marker { display: none; }
.cal-filter:not([open]) form { display: none; }
.cal-filter form { position: absolute; max-width: calc(100vw - 32px); right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 0 0 1px var(--px-line), 0 12px 32px rgba(20, 20, 60, .12); display: grid; gap: 8px; min-width: 220px; }
.cal-month { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--px-line); overflow: hidden; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { padding: 8px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--px-line); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid #F0F1F7; border-bottom: 1px solid #F0F1F7; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-week .cal-day:last-child { border-right: 0; }
.cal-day.out { background: #FAFAFD; } .cal-day.out .cal-num { color: #B4B9C8; }
.cal-num { align-self: flex-start; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.cal-num:hover { background: var(--px-l); }
.cal-day.today .cal-num { background: var(--px); color: #fff; }
.cal-item { --c: var(--px); display: flex; gap: 4px; align-items: baseline; font-size: 12px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); border-left: 3px solid var(--c); min-width: 0; }
.cal-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-item time { font-weight: 800; flex: none; font-size: 11px; }
.cal-item.is-cancelled span, .cal-row.is-cancelled b { text-decoration: line-through; opacity: .7; }
.cal-item.is-done { opacity: .6; }
.cal-more { font-size: 12px; font-weight: 700; color: var(--px); padding-left: 6px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.cal-agenda { margin-top: 18px; display: none; }
.cal-agenda-day { font: 800 13px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.cal-agenda-day.today { color: var(--px); }
.cal-weekview { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.cal-col { background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 1px var(--px-line); min-width: 0; min-height: 160px; }
.cal-col.today { box-shadow: 0 0 0 2px var(--px); }
.cal-col h3 { font: 700 13px var(--f-body); color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.cal-col h3 b { color: var(--ink); font-size: 17px; margin-left: 4px; }
.cal-col .rows li { padding: 8px 0; gap: 8px; }
.cal-col .ic-tile { display: none; }
.cal-row .grow { min-width: 0; }
.cal-row small { display: block; overflow-wrap: anywhere; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; gap: 6px; align-items: center; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
@media (max-width: 1100px) { .cal-weekview { grid-template-columns: minmax(0, 1fr); } .cal-col { min-height: 0; } .cal-col .ic-tile { display: grid; } }
@media (max-width: 760px) {
  .cal-day { min-height: 54px; padding: 3px; align-items: center; }
  .cal-day .cal-item, .cal-day .cal-more { display: none; }
  .cal-dots { display: flex; }
  .cal-num { width: 26px; height: 26px; align-self: center; }
  .cal-head span { padding: 6px 2px; text-align: center; letter-spacing: 0; }
  .cal-agenda { display: block; }
  .cal-nav h2 { font-size: 16px; flex-basis: 100%; margin: 4px 0 0; }
  .cal-bar { gap: 8px; }
  .cal-filter form { right: auto; left: 0; }
}
/* Tasks */
.task-form { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--px-line); }
.task-list li { align-items: flex-start; }
.task-list li.overdue b { color: #9E1C22; }
.task-list .grow { min-width: 0; } .task-list small { display: block; overflow-wrap: anywhere; }
.task-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--px-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: transparent; flex: none; }
.task-check:hover, .task-check:focus-visible { border-color: var(--green); color: var(--green); }
.task-check .ic { width: 15px; height: 15px; }
.copy-row { display: flex; gap: 8px; margin-top: 8px; }
.copy-row .input { flex: 1; min-width: 0; font-size: 13px; }
/* Goals & badges */
.weekly-goal { padding: 12px 14px; border-radius: 14px; background: var(--px-l); margin-bottom: 14px; display: grid; gap: 6px; }
.weekly-goal small { color: var(--muted); }
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.goal { padding: 12px 14px; border-radius: 14px; box-shadow: 0 0 0 1px var(--px-line); display: grid; gap: 8px; }
.goal-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.goal small { color: var(--muted); }
.goal-actions .btn { min-height: 28px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; box-shadow: 0 0 0 1px var(--px-line); margin-bottom: 8px; cursor: pointer; }
.radio-card:has(input:checked) { box-shadow: 0 0 0 2px var(--px); background: var(--px-l); }
.radio-card input { margin-top: 3px; accent-color: var(--px); }
.radio-card small { display: block; color: var(--muted); font-size: 12.5px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; }
fieldset.field legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.badge-card { padding: 14px; border-radius: 16px; box-shadow: 0 0 0 1px var(--px-line); display: grid; gap: 4px; justify-items: start; }
.badge-card.earned { background: linear-gradient(160deg, #FFF8E6, #fff); box-shadow: 0 0 0 1px #F2DFA8; }
.badge-card.locked { opacity: .72; }
.badge-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F2EFFA; color: var(--muted); }
.badge-card.earned .badge-ic { background: #B7791F; color: #fff; }
.badge-ic .ic { width: 20px; height: 20px; }
.badge-card small { color: var(--muted); font-size: 12.5px; }
.badge-card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.badge-card.earned em { color: #6B4700; }
.skill-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chips li { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--px) 18%, #fff) calc(var(--p) * 1%), #fff 0); box-shadow: 0 0 0 1px var(--px-line); font-size: 13.5px; font-weight: 600; }
.skill-chips li.done { background: #EAFBF2; box-shadow: 0 0 0 1px #BDEBD2; }
.skill-chips b { font-size: 12px; color: var(--muted); }
/* Certificates & events */
.share-box .qr-wrap { display: grid; justify-items: center; gap: 6px; margin-bottom: 14px; }
.qr-wrap .qr { width: 168px; height: 168px; border-radius: 10px; box-shadow: 0 0 0 1px var(--px-line); }
.qr-wrap small { color: var(--muted); font-weight: 600; }
.ev-detail .kv { gap: 16px; }
/* Timetable */
.repeat-box { padding: 12px 14px; border-radius: 14px; background: var(--px-l); display: grid; gap: 8px; }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-picks label { cursor: pointer; position: relative; }
.day-picks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-picks span { display: inline-block; padding: 6px 11px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--px-line); font-weight: 700; font-size: 13px; }
.day-picks input:checked + span { background: var(--px); color: #fff; box-shadow: none; }
.day-picks input:focus-visible + span { outline: 2px solid var(--px); outline-offset: 2px; }
.sched-list li { flex-wrap: wrap; }
.sched-list li .grow { flex: 1 1 200px; min-width: 0; }
.sched-list li > .btn-row { flex: 1 1 100%; justify-content: flex-end; }
.sched-list li.is-cancelled b { text-decoration: line-through; opacity: .7; }
.select-xs { min-height: 30px; padding: 0 28px 0 8px; font-size: 12.5px; width: auto; }
@media (max-width: 1100px) { .an-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .an-course-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .an-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-course .ac-ring.big { width: 84px; height: 84px; } .an-course .ac-ring.big b { font-size: 20px; }
  .wk-chart { gap: 3px; } .wk small { font-size: 9.5px; transform: rotate(-45deg); transform-origin: top center; bottom: -20px; }
  .mod-bar { grid-template-columns: 1fr 44px; gap: 6px 10px; } .mod-bar .pbar { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   LMS phase 4: community, messaging, announcements, settings, documents, fees, help desk
   ========================================================================== */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cav-sm { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--px) 14%, #fff); color: var(--px); font: 800 12.5px var(--f-body); }
/* Community */
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.space-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--px-line); min-width: 0; }
.space-card:hover { box-shadow: 0 0 0 1.5px var(--px); }
.space-card b { display: block; font-size: 15px; overflow-wrap: anywhere; } .space-card small { color: var(--muted); font-size: 12.5px; }
.space-card.add { box-shadow: inset 0 0 0 1.5px dashed var(--px-line); background: transparent; border: 1.5px dashed var(--px-line); }
.space-card .ic-tile { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--t, var(--px)) 13%, #fff); color: var(--t, var(--px)); }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #F0F1F7; }
.topic-row:first-child { border-top: 0; }
.topic-row .ic-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.topic-row .grow { min-width: 0; flex: 1; }
.topic-title { font-weight: 800; font-size: 15.5px; display: block; overflow-wrap: anywhere; }
.topic-row small { color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; }
.topic-row.is-hidden, .topic-row.is-locked { opacity: .8; }
.topic-count { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-weight: 700; font-size: 13px; flex: none; }
.topic-main .post-meta { margin-bottom: 10px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.post-meta small { color: var(--muted); font-size: 12.5px; }
.post-body { overflow-wrap: anywhere; line-height: 1.65; }
.post-body p { margin: 0 0 .7em; } .post-body p:last-child { margin-bottom: 0; }
.post-body code { background: var(--bg-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.post-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 8px; font-size: 13px; }
.post-actions form { margin: 0; }
.post-actions .link-btn { font-size: 13px; text-decoration: none; }
.post-actions .link-btn.danger { color: var(--red); }
.report-box, .edit-box { position: relative; }
.report-box summary, .edit-box summary { list-style: none; cursor: pointer; }
.report-box summary::-webkit-details-marker, .edit-box summary::-webkit-details-marker { display: none; }
.report-box[open] form, .edit-box[open] form { display: grid; gap: 6px; margin-top: 8px; min-width: min(320px, 80vw); }
.post-thread { display: grid; gap: 4px; }
.post { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #F0F1F7; }
.post:first-child { border-top: 0; }
.post.nested { margin-left: 46px; padding-top: 10px; border-top: 0; }
.post.accepted { background: #F2FBF6; border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px #BDEBD2; }
.post.is-hidden { opacity: .65; }
.post .grow { min-width: 0; flex: 1; }
.seg-radio { display: inline-flex; flex-wrap: wrap; margin-bottom: 14px; }
.seg-radio label { cursor: pointer; position: relative; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-radio span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg-radio span .ic { width: 15px; height: 15px; }
.seg-radio input:checked + span { background: var(--px); color: #fff; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--px); outline-offset: 2px; }
.member-list li { gap: 10px; }
.member-list form { margin: 0; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.group-grid .box + .box { margin-top: 0; }
.group-card .box-head h3 { font: 800 16px var(--f-display); margin: 0; overflow-wrap: anywhere; }
.mod-item + .mod-item { margin-top: 14px; }
.mod-quote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg-2); border-radius: 0 10px 10px 0; font-size: 14px; }
/* Messaging */
.chat-search { padding: 8px 12px 0; }
.chat-search .fsearch { min-height: 36px; }
.chat-filter { display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; }
.chat-filter a { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.chat-filter a.on { background: var(--px); color: #fff; }
.chat-results { padding: 20px; overflow-y: auto; }
.chat-results h2 { font: 800 17px var(--f-display); margin: 0 0 12px; }
.chat-attach { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; color: var(--muted); flex: none; }
.chat-attach:hover, .chat-attach:focus-within { color: var(--px); background: var(--bg-2); }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat-attach .ic { width: 18px; height: 18px; }
.chat-file { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 10px; background: var(--bg-2); border-radius: 10px; margin-bottom: 6px; min-width: 0; }
.chat-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-file .ic { width: 15px; height: 15px; flex: none; }
.cfile { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--px-line); max-width: 100%; }
.cfile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.cfile small { color: var(--muted); font-size: 12px; flex: none; }
.cfile .ic { width: 16px; height: 16px; flex: none; }
/* Announcements */
.ann-rows { display: grid; gap: 12px; }
.ann-rows .box + .box { margin-top: 0; }
.ann-row h2 { font: 800 18px var(--f-display); margin: 8px 0 4px; overflow-wrap: anywhere; }
.ann-row.unread { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--px) 55%, #fff); }
.ann-row.past { opacity: .75; }
.ann-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ann-row-meta small { color: var(--muted); font-size: 12.5px; }
.ann-mini li.unread b { color: var(--px); }
/* Settings */
.pref-table td { vertical-align: middle; }
.pref-name { display: flex; gap: 10px; align-items: center; }
.pref-name small { display: block; color: var(--muted); font-size: 12.5px; }
.ic-dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--t) 13%, #fff); color: var(--t); }
.ic-dot .ic { width: 15px; height: 15px; }
.tgl { position: relative; display: inline-block; width: 42px; height: 24px; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.tgl span { position: absolute; inset: 0; border-radius: 999px; background: #D5DBE8; transition: background .15s; }
.tgl span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.tgl input:checked + span { background: var(--px); }
.tgl input:checked + span::after { transform: translateX(18px); }
.tgl input:focus-visible + span { outline: 2px solid var(--px); outline-offset: 2px; }
.tgl input:disabled + span { opacity: .6; }
.pref-check { margin-bottom: 10px; }
/* Fees & documents */
.coupon-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 6px; font-size: 14px; }
.coupon-form label { font-weight: 700; }
.coupon-form .input { width: 160px; min-height: 36px; }
.fee-links { margin: 6px 0 4px; }
.fee-history li.void { opacity: .6; }
/* Help & tickets */
.help-public { padding: 36px 0 60px; }
.faq-list { display: grid; gap: 8px; }
.faq { border-radius: 12px; box-shadow: 0 0 0 1px var(--px-line); padding: 12px 14px; }
.faq summary { cursor: pointer; font-weight: 800; }
.faq[open] summary { margin-bottom: 10px; }
.faq .prose { font-size: 15px; }
.ticket-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticket-thread li { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); max-width: 92%; }
.ticket-thread li.staff { background: color-mix(in srgb, var(--px) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--px) 25%, #fff); justify-self: start; }
.ticket-thread li.mine { justify-self: end; }
.ticket-thread li.internal { background: #FFF8E6; box-shadow: inset 0 0 0 1px #F2DFA8; justify-self: stretch; max-width: none; }
.tm-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tm-meta small { color: var(--muted); font-size: 12px; }
/* Accessibility preferences (Settings & security) */
body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.a11y-text .app-content { zoom: 1.12; }
body.a11y-contrast { --muted: #3A4152; --px-line: #B9C0D2; --line: #B9C0D2; }
body.a11y-contrast .box, body.a11y-contrast .metric { box-shadow: 0 0 0 1.5px #9AA3B8; }
body.a11y-links .app-content a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
  .post.nested { margin-left: 22px; }
  .ticket-thread li { max-width: 100%; }
  .chat-attach { width: 36px; height: 36px; }
}
.grid-main > * { min-width: 0; }
.box .select, .box .input { max-width: 100%; }
/* Career center (Phase 5) */
a.metric { color: inherit; text-decoration: none; transition: box-shadow .15s; }
a.metric:hover, a.metric:focus-visible { box-shadow: 0 0 0 2px var(--m); }
.mt-s { margin-top: 10px; }
.break { overflow-wrap: anywhere; }
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.status-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--px-line); }
.status-list li:last-child { border-bottom: 0; }
.file-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); margin-bottom: 14px; min-width: 0; }
.file-line .grow { min-width: 0; overflow-wrap: anywhere; }
.file-line small, .shot-list small { display: block; color: var(--muted); font-size: 12.5px; }
.skill-bars { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.skill-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 42px; gap: 10px; align-items: center; }
.skill-bars span { min-width: 0; }
.skill-bars span b { display: block; font-size: 14px; }
.skill-bars span small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-bars em { font-style: normal; font-weight: 800; font-size: 13px; text-align: right; }
.career-ready { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.career-ready small { display: block; color: var(--muted); font-size: 13px; }
.proj-shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.shot-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.shot-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shot-list img { width: 84px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; background: var(--bg-2); }
.shot-list .grow { min-width: 0; overflow-wrap: anywhere; }
.input-prefix { display: flex; align-items: stretch; min-width: 0; }
.input-prefix span { display: flex; align-items: center; padding: 0 10px; border-radius: 10px 0 0 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--px-line); font-size: 13px; color: var(--muted); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.input-prefix .input { border-radius: 0 10px 10px 0; min-width: 0; flex: 1; }
.check-line small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
/* Public portfolio */
.ppf-head { padding-bottom: 40px; }
.ppf-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; font-weight: 700; font-size: 14px; }
.ppf-meta span, .ppf-meta a { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3, #3A4256); }
.ppf-meta a { color: var(--ac, #6C4DFF); }
.ppf-meta .ic { width: 16px; height: 16px; }
.ppf-body { padding: 10px 0 60px; display: grid; gap: 34px; }
.ppf-sec h2 { font: 800 22px var(--f-display); margin: 0 0 14px; }
.ppf-bio { max-width: 760px; font-size: 16px; line-height: 1.65; margin: 0; }
.tag.tag-strong { background: var(--ac-l, #EEE9FF); color: var(--ac, #6C4DFF); font-weight: 800; }
.ppf-projects { display: grid; gap: 22px; }
.ppf-proj { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--px-line, #E4E7EF); }
.ppf-proj:not(:has(.ppf-shots)) { grid-template-columns: minmax(0, 1fr); }
.ppf-proj h3 { font: 800 20px var(--f-display); margin: 10px 0 8px; }
.ppf-proj p { margin: 0 0 12px; color: var(--ink-3, #3A4256); }
.ppf-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; align-content: start; }
.ppf-shots figure { margin: 0; }
.ppf-shots figure:first-child { grid-column: 1 / -1; }
.ppf-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; background: var(--bg-2, #F4F5F9); }
.ppf-shots figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ppf-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ppf-certs, .ppf-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ppf-certs li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--px-line, #E4E7EF); }
.ppf-certs small { display: block; color: var(--muted); font-size: 12.5px; }
.ppf-certs .grow { min-width: 0; overflow-wrap: anywhere; }
.ppf-awards { margin-top: 14px; }
.ppf-awards li { display: flex; gap: 8px; align-items: center; }
.ppf-awards small { color: var(--muted); }
.badge-grid.compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 760px) {
  .ppf-proj { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .skill-bars li { grid-template-columns: minmax(0, 1fr) 38px; }
  .skill-bars .pbar { grid-column: 1 / -1; grid-row: 2; }
}
/* Points & leaderboard */
.lb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lb-filters .select { width: auto; min-width: 150px; }
.lb-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lb-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); min-width: 0; }
.lb-list li.me { background: color-mix(in srgb, var(--px) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--px) 35%, #fff); }
.lb-list b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lb-list b small { color: var(--muted); font-weight: 600; }
.lb-list em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 800; font-size: 13px; flex: none; box-shadow: 0 0 0 1px var(--px-line); }
.lb-list li:nth-child(-n+3) .lb-rank { background: var(--px); color: #fff; box-shadow: none; }
.xp-plus { font-style: normal; font-weight: 800; color: #0E9F6E; white-space: nowrap; }
.lvl-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.lvl-list li.on { font-weight: 800; color: var(--px); }
.lvl-list small { color: var(--muted); }
/* Study assistant */
.ai-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 10px; }
.ai-kinds .radio-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ai-answer { padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--px) 5%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--px) 22%, #fff); margin-bottom: 18px; min-width: 0; }
.ai-answer .prose { font-size: 15px; overflow-wrap: anywhere; }
.ai-answer .prose pre { max-width: 100%; overflow-x: auto; }
.ai-sources { margin-top: 12px; }
.ai-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ai-search .input { flex: 1 1 180px; min-width: 0; }
.ai-search .select { flex: 0 1 180px; width: auto; }
.rows small.snip { white-space: normal; margin-top: 3px; color: var(--ink-3); }
/* Offline & sync */
.sync-pill { position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: calc(100vw - 32px); padding: 9px 14px; border-radius: 999px; background: #0A0F1F; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px -12px rgba(10,15,31,.6); }
.sync-pill[data-state="done"] { background: #0E9F6E; }
.sync-pill[data-state="conflict"] { background: #B7791F; border-radius: 14px; }
.sync-pill[data-state="auth"], .sync-pill[data-state="retry"] { background: #C2410C; }
.offline-body { background: var(--bg-2, #F4F5F9); }
.offline-page { padding: 32px 16px 60px; }
.offline-card { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 0 0 1px var(--px-line, #E4E7EF); min-width: 0; overflow-wrap: anywhere; }
.offline-card h1 { font: 800 clamp(24px, 4vw, 32px)/1.15 var(--f-display); margin: 14px 0 10px; }
.offline-card h2 { font: 800 18px var(--f-display); margin: 22px 0 10px; }
.offline-brand { display: inline-block; }
.offline-lesson .prose { margin: 18px 0; font-size: 16px; }
.offline-lesson .prose pre { max-width: 100%; overflow-x: auto; }
.offline-note { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--px-line, #E4E7EF); }
.app-side-foot button.app-link { background: none; border: 0; cursor: pointer; font: inherit; width: 100%; text-align: left; }
@media (max-width: 560px) { .offline-card { padding: 18px; border-radius: 14px; } }

/* Profile photo picker (profile page) */
.pf-av-light { background: var(--bg-2); color: var(--ink-3); box-shadow: 0 0 0 1px var(--line); }
.pf-av-wrap { flex: none; display: block; }
.profile-id .grow { min-width: 0; flex: 1; }
.profile-id .break { display: block; overflow-wrap: anywhere; }
.pf-photo-btn { position: relative; cursor: pointer; }
.pf-photo-btn:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-photo-status].is-error { color: var(--red); }
@media (max-width: 420px) { .profile-id { align-items: flex-start; gap: 14px; } }

/* Marketing: announcement editor, previews, card maker, calendar (portal + admin review) */
.mk-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mk-sub .hint { text-transform: none; letter-spacing: 0; }
.mk-gen { margin: 4px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--px-l); display: grid; gap: 8px; }
.mk-gen b { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.mk-gen p { margin: 0; }
[data-mk-note].is-error { color: var(--red); }
.mk-person { position: relative; }
.mk-person-chosen { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.mk-person-results { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.mk-person-results button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--px-line); font: inherit; cursor: pointer; }
.mk-person-results button:hover, .mk-person-results button:focus-visible { box-shadow: inset 0 0 0 1.5px var(--px); }
.mk-person-results small { display: block; color: var(--muted); }
.mk-pick { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.mk-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.mk-pick-item { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-2, #F3F5FA); box-shadow: inset 0 0 0 1px var(--px-line); cursor: pointer; font-size: 12.5px; color: var(--muted); text-align: center; padding: 0; }
.mk-pick-item img { width: 100%; height: 100%; object-fit: cover; }
.mk-pick-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-pick-item:has(input:checked) { box-shadow: 0 0 0 3px var(--px); }
.mk-pick-item:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.mk-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mk-card canvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--px-line); background: #0A0F1F; }
@media (max-width: 700px) { .mk-card { grid-template-columns: minmax(0, 1fr); } }
.mk-preview { display: grid; gap: 12px; }
.mk-preview > img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; }
.mk-preview small { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.mk-preview h3 { margin: 4px 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.mk-preview-body { color: var(--ink-3); overflow-wrap: anywhere; }
.mk-preview-body p { margin: 0 0 10px; }
.mk-caption { white-space: normal; overflow-wrap: anywhere; margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2, #F3F5FA); font-size: 14px; }
.mk-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-issues li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 9px 11px; border-radius: 10px; background: #FFF8E6; color: #7A5200; overflow-wrap: anywhere; }
.mk-issues li.block { background: #FFF0F0; color: #9E1C22; }
.mk-issues .ic { flex: none; margin-top: 2px; }
.mk-cal-day { align-items: flex-start; }
.mk-cal-day.today .mk-cal-date b { color: var(--px); }
.mk-cal-date { flex: none; width: 74px; display: grid; }
.mk-cal-date b { font-size: 24px; line-height: 1; }
.mk-cal-date small { color: var(--muted); font-size: 12px; }
.mk-cal-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; }
.mk-cal-item small { grid-column: 1; color: var(--muted); }
.mk-cal-item .st-chip { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.mk-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mk-lib figure { margin: 0; display: grid; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.mk-lib img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--px-line); }
.mk-lib small { display: block; color: var(--muted); }
.mk-ok { display: flex; gap: 6px; align-items: flex-start; margin: 0; } .mk-ok .ic { flex: none; color: var(--green, #18B26B); margin-top: 2px; }
.card-head h2:has(> .ic), .box-head h2:has(> .ic) { display: inline-flex; align-items: center; gap: 8px; }

/* Course catalogue, course page and enrol page shown inside the portal (signed-in users) */
.app.in-portal .ac-page-head { border-radius: 22px; overflow: hidden; }
/* The enrol card deliberately reaches below the course hero: round the hero without clipping it. */
.app.in-portal .cd-hero { border-radius: 22px; overflow: visible; }
.app.in-portal .cd-hero-bg { border-radius: 22px; overflow: hidden; }
.app.in-portal .ac-page-head { padding: 28px 0 22px; margin-bottom: 4px; }
.app.in-portal .ac-page-head .wrap, .app.in-portal .cd-hero .wrap { max-width: none; padding-inline: clamp(16px, 3vw, 32px); }
.app.in-portal .ac-sec { padding: 22px 0; }
.app.in-portal .ac-sec > .wrap { max-width: none; padding-inline: 0; }
.app.in-portal .cd-hero { padding: 36px 0 44px; }
.ccard-mine { background: #fff; color: #0B6B3D; box-shadow: 0 0 0 1px #BDEBD2; }
.ccard-mine.is-pending { color: #7A5200; box-shadow: 0 0 0 1px #F5DCA0; }
.ccard-mine.is-completed { color: #1D3E91; box-shadow: 0 0 0 1px #C9DAFF; }

/* Dashboard fee card (only while something is outstanding or awaiting verification) */
.dash-fees { margin-bottom: 18px; }
.dash-fees .panel-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.dash-fee-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin: 0; }
.dash-fee-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.dash-fee-facts dd { margin: 2px 0 0; font-weight: 800; font-size: 17px; }
.dash-fee-facts dd.out { color: var(--red); }
.app.in-portal .ac-filter { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 160px)) auto; }
@media (max-width: 1100px) { .app.in-portal .ac-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .app.in-portal .ac-search, .app.in-portal .ac-filter .btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .app.in-portal .ac-filter { grid-template-columns: minmax(0, 1fr); } }

/* Lessons taught in class (teacher marks) vs completed (student marks) */
.batch-taught .bt-mod { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.batch-taught .bt-mod legend { font-weight: 800; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.batch-taught .bt-mod legend span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--px-l); font-size: 12px; }
.batch-taught div.check-line { display: flex; gap: 8px; align-items: flex-start; }
.lesson-status { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 6px 10px; border-radius: 999px; background: var(--bg-2, #F3F5FA); }
.lesson-status .ic { width: 15px; height: 15px; }
.lc-taught { color: var(--muted); font-weight: 600; }
.mc-taught { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.fee-ask { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #F2EEFF; box-shadow: inset 0 0 0 1px #DCD3FF; }
.fee-ask b { display: inline-flex; gap: 6px; align-items: center; }
.fee-reply { display: block; margin-top: 6px; overflow-wrap: anywhere; }

/* Payment plan (student fees page and admin fee page) */
.fee-plan { margin: 14px 0 6px; padding: 14px; border-radius: 16px; background: var(--bg-2, #F6F7FB); box-shadow: inset 0 0 0 1px var(--px-line); }
.fee-plan-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-bottom: 10px; }
.fee-plan-top small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.fee-plan-top b { display: block; font-size: 18px; margin: 2px 0; }
.fee-plan-top span { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 700px) { .fee-plan-top { grid-template-columns: minmax(0, 1fr); } }
.fee-plan .alert { margin: 8px 0; }
.fee-plan-ok { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; font-size: 14px; }
.fee-plan-ok .ic { flex: none; color: var(--green, #18B26B); margin-top: 2px; }
.fee-plan-tbl small { display: block; color: var(--muted); font-size: 12px; }
.fee-plan-tbl .st-chip .ic { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.fee-approvals { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.fee-approvals li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #F2EEFF; }
.fee-approvals li > .ic { flex: none; color: #6C4DFF; margin-top: 2px; }
.fee-approvals small { display: block; color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.fee-rules ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.fee-plan-admin { margin-top: 14px; }
.fee-plan-admin h4 { margin: 0 0 10px; font-size: 15px; }
.fee-date-row label { font-size: 13px; }
.fee-exc-list { margin-top: 10px; }