/* =====================================================================
   SEOULOGY ACADEMY: ADMIN CONSOLE
   A self-contained console skin (dark and light), plus the learner-side
   announcement banner, message strip and inbox at the end.
   ===================================================================== */

/* -------------------------------------------------------------- tokens */
.ac, .ac-dw, .ac-modal-wrap, .ac-k-wrap {
  --ac-bg: #0b0d10; --ac-bg2: #101317; --ac-panel: #14181d; --ac-panel2: #191e24; --ac-hover: #1e242b;
  --ac-line: #232a32; --ac-line2: #2d3540;
  --ac-text: #e8ecf0; --ac-dim: #8a96a3; --ac-faint: #5c6773;
  --ac-accent: #c9a961; --ac-accent-hi: #e3c98a; --ac-accent-ink: #1a1408;
  --ac-ok: #3fc48b; --ac-warn: #e3a945; --ac-bad: #ef6464; --ac-info: #5aa6f0; --ac-now: #b18cff;
  --ac-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.6);
  --ac-r: 12px; --ac-r-s: 8px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; color: var(--ac-text);
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
}
[data-theme="light"].ac, [data-theme="light"].ac-dw, [data-theme="light"].ac-modal-wrap, [data-theme="light"].ac-k-wrap {
  --ac-bg: #f4f5f7; --ac-bg2: #eceef1; --ac-panel: #ffffff; --ac-panel2: #f8f9fa; --ac-hover: #f1f3f5;
  --ac-line: #e3e6ea; --ac-line2: #d4d9df;
  --ac-text: #14181d; --ac-dim: #5f6b78; --ac-faint: #98a2ad;
  --ac-accent: #9c7a2c; --ac-accent-hi: #b68f38; --ac-accent-ink: #ffffff;
  --ac-ok: #16955d; --ac-warn: #b97810; --ac-bad: #d23f3f; --ac-info: #2f7fd0; --ac-now: #7b4fe0;
  --ac-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px -10px rgba(16,24,40,.18);
}

/* the console takes the whole screen: hide the portal's own header/footer */
body.ac-on { background: #0b0d10; }
body.ac-on #app > .nav, body.ac-on #app > .foot { display: none !important; }
body.ac-on #main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

.ac { min-height: 100vh; background: var(--ac-bg); display: block; }
.ac *, .ac-dw *, .ac-modal-wrap *, .ac-k-wrap * { box-sizing: border-box; }
.ac a, .ac-dw a { color: inherit; text-decoration: none; }
.ac button, .ac-dw button, .ac-modal-wrap button, .ac-k-wrap button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ac-ico { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; display: inline-block; }
.ac-dim { color: var(--ac-dim); }
.ok-t { color: var(--ac-ok); font-weight: 600; } .warn-t { color: var(--ac-warn); } .danger-t { color: var(--ac-bad) !important; } .now-t { color: var(--ac-now); font-weight: 600; }
.ac-grow { flex: 1 1 auto; min-width: 0; }
.mt { margin-top: 18px; } .mt8 { margin-top: 8px; } .mb { margin-bottom: 18px; }

/* ------------------------------------------------------------- sidebar */
.ac-side { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 40; display: flex; flex-direction: column; background: var(--ac-bg2); border-right: 1px solid var(--ac-line); padding: 18px 12px 14px; overflow-y: auto; }
.ac-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 10px; }
.ac-brand b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.ac-brand small { display: block; color: var(--ac-dim); font-size: 12px; margin-top: 1px; }
.ac-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--ac-accent-ink); background: linear-gradient(135deg, var(--ac-accent-hi), var(--ac-accent)); box-shadow: 0 6px 16px -6px var(--ac-accent); }
.ac-nav-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-faint); padding: 14px 12px 6px; }
.ac-nav { display: flex; flex-direction: column; gap: 2px; }
.ac-nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--ac-r-s); color: var(--ac-dim); font-weight: 500; transition: background .15s, color .15s; }
.ac-nav a:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-nav a.on { background: var(--ac-panel2); color: var(--ac-text); box-shadow: inset 0 0 0 1px var(--ac-line); }
.ac-nav a.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac-accent); }
.ac-nav a.on .ac-ico { color: var(--ac-accent); }
.ac-nav a span { flex: 1; }
.ac-count { font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: none; place-items: center; background: var(--ac-ok); color: #04150d; }
.ac-count.on { display: grid; } .ac-count.warn { background: var(--ac-warn); color: #231703; }
.ac-side-ft { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--ac-line); }
.ac-side-btn { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--ac-r-s); color: var(--ac-dim) !important; text-align: left; width: 100%; }
.ac-side-btn:hover { background: var(--ac-hover) !important; color: var(--ac-text) !important; }
.ac-me { display: flex; align-items: center; gap: 10px; padding: 12px 10px 2px; min-width: 0; }
.ac-me b { display: block; font-size: 12.5px; } .ac-me small { display: block; color: var(--ac-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.ac-scrim-nav { display: none; }

/* ------------------------------------------------------------- top bar */
.ac-main { margin-left: 248px; min-width: 0; }
.ac-top { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: color-mix(in srgb, var(--ac-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--ac-line); }
.ac-burger { display: none; padding: 6px; border-radius: 8px; }
.ac-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ac-dim); min-width: 0; white-space: nowrap; overflow: hidden; }
.ac-crumb a:hover { color: var(--ac-text); } .ac-crumb b { color: var(--ac-text); font-weight: 600; } .ac-crumb span { color: var(--ac-faint); }
.ac-search { margin-left: auto; display: flex; align-items: center; gap: 10px; width: 340px; max-width: 40vw; height: 36px; padding: 0 8px 0 12px; border-radius: 9px; background: var(--ac-panel) !important; border: 1px solid var(--ac-line) !important; color: var(--ac-dim) !important; transition: border-color .15s; }
.ac-search:hover { border-color: var(--ac-line2) !important; }
.ac-search span { flex: 1; text-align: left; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac kbd, .ac-k-wrap kbd { font-family: inherit; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--ac-line2); background: var(--ac-panel2); color: var(--ac-dim); }
.ac-live-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; color: var(--ac-dim) !important; border: 1px solid var(--ac-line); white-space: nowrap; }
.ac-live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-faint); }
.ac-live-pill.on { color: var(--ac-ok) !important; border-color: color-mix(in srgb, var(--ac-ok) 40%, transparent); background: color-mix(in srgb, var(--ac-ok) 10%, transparent); }
.ac-live-pill.on i { background: var(--ac-ok); animation: acPulse 1.8s infinite; }

/* ---------------------------------------------------------------- page */
.ac-page { padding: 28px 28px 110px; max-width: 1480px; }
.ac-page.in { animation: acIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes acIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ac-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.ac-ph h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; font-family: inherit; color: var(--ac-text); }
.ac-ph p { margin: 6px 0 0; color: var(--ac-dim); max-width: 80ch; line-height: 1.55; }
.ac-ph-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- buttons */
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: var(--ac-panel) !important; border: 1px solid var(--ac-line2) !important; color: var(--ac-text) !important; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; text-decoration: none !important; }
.ac-btn:hover { background: var(--ac-hover) !important; border-color: var(--ac-faint) !important; }
.ac-btn:active { transform: translateY(1px); }
.ac-btn .ac-ico { width: 16px; height: 16px; }
.ac-btn.primary { background: linear-gradient(180deg, var(--ac-accent-hi), var(--ac-accent)) !important; border-color: transparent !important; color: var(--ac-accent-ink) !important; box-shadow: 0 6px 16px -8px var(--ac-accent); }
.ac-btn.primary:hover { filter: brightness(1.06); }
.ac-btn.danger { background: var(--ac-bad) !important; border-color: transparent !important; color: #fff !important; }
.ac-btn.ghost { background: transparent !important; border-color: transparent !important; color: var(--ac-dim) !important; }
.ac-btn.ghost:hover { background: var(--ac-hover) !important; color: var(--ac-text) !important; }
.ac-btn.ghost.danger-t { color: var(--ac-bad) !important; }
.ac-btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.ac-btn:disabled { opacity: .55; cursor: progress; }
.ac-btn.busy { position: relative; color: transparent !important; }
.ac-btn.busy::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ac-dim); border-top-color: transparent; animation: acSpin .7s linear infinite; }
.ac-link { color: var(--ac-accent) !important; font-size: 13px; font-weight: 600; }
.ac-link:hover { text-decoration: underline !important; }
.ac-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.ac-actions.wrap { flex-wrap: wrap; } .ac-actions.spread { justify-content: space-between; }

/* --------------------------------------------------------------- cards */
.ac-card { background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: var(--ac-r); padding: 18px 20px; box-shadow: var(--ac-shadow); min-width: 0; }
.ac-card.flush { padding: 0; overflow: hidden; }
.ac-card.err { border-color: color-mix(in srgb, var(--ac-bad) 50%, transparent); color: var(--ac-bad); }
.ac-card.flat { box-shadow: none; background: var(--ac-panel2); margin-bottom: 12px; padding: 16px; }
.ac-card.flat.danger { border-color: color-mix(in srgb, var(--ac-bad) 35%, transparent); }
.ac-card h4, .ac-h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ac-text); font-family: inherit; }
.ac-h4 { margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--ac-dim); }
.ac-card p { margin: 0 0 8px; line-height: 1.55; }
.ac-card-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ac-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 650; flex: 1; font-family: inherit; color: var(--ac-text); }
.ac-card-hd.pad { padding: 16px 20px 0; margin-bottom: 12px; }
.ac-card-hd.mt { margin-top: 22px; }
.pad-x { padding: 0 20px 10px; margin: 0; font-size: 13px; }
.ac-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ac-grid2.wide { grid-template-columns: 1.5fr 1fr; }
.ac-grid2.top { margin-top: 0; align-items: start; }
.ac-foot { margin-top: 18px; font-size: 12.5px; }

/* ----------------------------------------------------------------- kpis */
.ac-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ac-kpi { position: relative; background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: var(--ac-r); padding: 16px 18px; box-shadow: var(--ac-shadow); overflow: hidden; display: block; transition: border-color .15s, transform .15s; }
a.ac-kpi:hover { border-color: var(--ac-line2); transform: translateY(-1px); }
.ac-kpi span { display: block; font-size: 12.5px; color: var(--ac-dim); font-weight: 500; }
.ac-kpi b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.03em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.ac-kpi small { display: block; font-size: 12px; color: var(--ac-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.ac-kpi.live::after { background: var(--ac-ok); } .ac-kpi.live b { color: var(--ac-ok); }
.ac-kpi.warn::after { background: var(--ac-warn); } .ac-kpi.warn b { color: var(--ac-warn); }
.ac-kpi.ok::after { background: var(--ac-accent); }

/* -------------------------------------------------------- small pieces */
.ac-av { --h: 200; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: hsl(var(--h) 70% 88%); background: linear-gradient(135deg, hsl(var(--h) 45% 38%), hsl(calc(var(--h) + 40) 45% 26%)); position: relative; }
[data-theme="light"] .ac-av { color: #fff; background: linear-gradient(135deg, hsl(var(--h) 50% 52%), hsl(calc(var(--h) + 40) 50% 40%)); }
.ac-av.sm { width: 28px; height: 28px; font-size: 11px; } .ac-av.xs { width: 24px; height: 24px; font-size: 10px; } .ac-av.md { width: 40px; height: 40px; } .ac-av.lg { width: 54px; height: 54px; font-size: 18px; }
.ac-av.live::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ac-ok); box-shadow: 0 0 0 2px var(--ac-panel); }
.ac-stack { display: inline-flex; } .ac-stack .ac-av + .ac-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--ac-panel); }
.ac-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--ac-hover); color: var(--ac-dim); border: 1px solid var(--ac-line); }
.ac-chip.ok { color: var(--ac-ok); background: color-mix(in srgb, var(--ac-ok) 12%, transparent); border-color: color-mix(in srgb, var(--ac-ok) 28%, transparent); }
.ac-chip.warn { color: var(--ac-warn); background: color-mix(in srgb, var(--ac-warn) 12%, transparent); border-color: color-mix(in srgb, var(--ac-warn) 28%, transparent); }
.ac-chip.bad { color: var(--ac-bad); background: color-mix(in srgb, var(--ac-bad) 12%, transparent); border-color: color-mix(in srgb, var(--ac-bad) 28%, transparent); }
.ac-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ac-tag { --c: var(--ac-dim); display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ac-dot { --c: var(--ac-dim); display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 9px; flex: 0 0 auto; vertical-align: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.ac-bar { --c: var(--ac-accent); display: inline-block; width: 100%; max-width: 140px; min-width: 50px; height: 6px; border-radius: 3px; background: var(--ac-line); overflow: hidden; vertical-align: middle; }
.ac-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width .5s cubic-bezier(.2,.8,.2,1); }
td.pb { white-space: nowrap; } td.pb .ac-bar { width: 110px; margin-right: 10px; }
.ac-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-faint); flex: 0 0 auto; display: inline-block; }
.ac-pulse.on { background: var(--ac-ok); animation: acPulse 1.8s infinite; }
@keyframes acPulse { 0% { box-shadow: 0 0 0 0 rgba(63,196,139,.6); } 70% { box-shadow: 0 0 0 8px rgba(63,196,139,0); } 100% { box-shadow: 0 0 0 0 rgba(63,196,139,0); } }
@keyframes acSpin { to { transform: rotate(360deg); } }
.ac-ring { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.ac-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ac-ring circle { fill: none; stroke-width: 4; } .ac-ring .t { stroke: var(--ac-line); } .ac-ring .f { stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.ac-ring b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; }
.ac-kind { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-dim); margin-right: 8px; }
.ac-q { font-weight: 500; }
.ac-mod-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--ac-hover); font-size: 12px; font-weight: 700; color: var(--ac-dim); margin-right: 10px; flex: 0 0 auto; }
.ac-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 20px; color: var(--ac-dim); }
.ac-empty b { color: var(--ac-text); font-size: 14.5px; } .ac-empty.sm { padding: 22px 12px; }
.ac-empty span { max-width: 48ch; line-height: 1.5; }
.ac-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ac-line2); border-top-color: var(--ac-accent); animation: acSpin .8s linear infinite; margin-bottom: 8px; }
.ac-radar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px; border: 1px solid var(--ac-line2); background: radial-gradient(circle, var(--ac-ok) 0 4px, transparent 5px), conic-gradient(from 0deg, rgba(63,196,139,.35), transparent 30%); animation: acSpin 3s linear infinite; }
.ac-alert { padding: 12px 14px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; margin: 6px 0 4px; border: 1px solid; }
.ac-alert.ok { color: var(--ac-ok); border-color: color-mix(in srgb, var(--ac-ok) 30%, transparent); background: color-mix(in srgb, var(--ac-ok) 9%, transparent); }
.ac-alert.warn { color: var(--ac-warn); border-color: color-mix(in srgb, var(--ac-warn) 30%, transparent); background: color-mix(in srgb, var(--ac-warn) 9%, transparent); }
.ac-alert.bad { color: var(--ac-bad); border-color: color-mix(in srgb, var(--ac-bad) 30%, transparent); background: color-mix(in srgb, var(--ac-bad) 9%, transparent); }
.ac-alert b { color: var(--ac-text); }

/* ------------------------------------------------------- attention list */
.ac-att-list { display: flex; flex-direction: column; gap: 2px; margin: -6px -10px; }
.ac-att { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 9px; text-align: left; width: 100%; transition: background .15s; }
.ac-att:hover { background: var(--ac-hover); }
.ac-att > span:nth-child(2) { flex: 1; min-width: 0; }
.ac-att b { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-att small { display: block; color: var(--ac-dim); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-att-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ac-hover); color: var(--ac-dim); flex: 0 0 auto; }
.ac-att-ic.bad { color: var(--ac-bad); }
.ac-pct { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ac-ok); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- tables */
.ac-table-wrap { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ac-table th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ac-dim); padding: 10px 14px; background: var(--ac-panel2); border-bottom: 1px solid var(--ac-line); white-space: nowrap; user-select: none; }
.ac-table th.sort { cursor: pointer; } .ac-table th.sort:hover { color: var(--ac-text); }
.ac-table th.asc::after { content: " \2191"; color: var(--ac-accent); } .ac-table th.desc::after { content: " \2193"; color: var(--ac-accent); }
.ac-table td { padding: 11px 14px; border-bottom: 1px solid var(--ac-line); vertical-align: middle; }
.ac-table td small { display: block; color: var(--ac-dim); font-size: 12px; margin-top: 2px; }
.ac-table tbody tr:last-child td { border-bottom: 0; }
.ac-table.clickable tbody tr { cursor: pointer; transition: background .12s; }
.ac-table.clickable tbody tr:hover td { background: var(--ac-hover); }
.ac-table tr.sel td { background: color-mix(in srgb, var(--ac-accent) 8%, transparent) !important; }
.ac-table tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--ac-accent); }
.ac-table tr.muted td { opacity: .5; }
.ac-table tr.muted td:last-child, .ac-table tr.muted td:nth-last-child(2) { opacity: 1; }
.ac-table tr.grp td { background: var(--ac-panel2); font-size: 13px; padding: 9px 14px; }
.ac-table tr.warn-row td:first-child { box-shadow: inset 3px 0 0 var(--ac-warn); }
.ac-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table .cb { width: 40px; padding-right: 0; }
.ac-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ac-accent); cursor: pointer; vertical-align: middle; margin: 0; }
.ac-table .c-position { min-width: 240px; max-width: 360px; }
.ac-table .c-progress { min-width: 180px; }
.ac-table-ft { padding: 11px 16px; font-size: 12.5px; color: var(--ac-dim); border-top: 1px solid var(--ac-line); background: var(--ac-panel2); }
.ac-cell-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ac-cell-who b { font-weight: 600; white-space: nowrap; }
.ac-cell-pos { display: flex; align-items: flex-start; gap: 9px; } .ac-cell-pos .ac-pulse { margin-top: 6px; }
.ac-cell-pos b { font-weight: 500; font-size: 13px; }
.ac-prog-list { display: flex; flex-direction: column; gap: 4px; }
.ac-prog-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.ac-prog-row em { font-style: normal; color: var(--ac-dim); width: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-prog-row .ac-bar { width: 80px; }
.ac-prog-row i { font-style: normal; color: var(--ac-dim); font-variant-numeric: tabular-nums; width: 34px; }
.ac-row-act { text-align: right; white-space: nowrap; }
.ac-row-act .ac-btn + .ac-btn { margin-left: 6px; }

/* -------------------------------------------------------------- toolbar */
.ac-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ac-searchbox { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; background: var(--ac-panel); border: 1px solid var(--ac-line2); color: var(--ac-dim); width: 280px; max-width: 100%; transition: border-color .15s, box-shadow .15s; }
.ac-searchbox:focus-within { border-color: var(--ac-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 20%, transparent); }
.ac-searchbox input { flex: 1; background: none; border: 0; outline: 0; color: var(--ac-text); font-size: 13.5px; min-width: 0; padding: 0; }
.ac-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--ac-panel); border: 1px solid var(--ac-line2); flex-wrap: wrap; }
.ac-seg button { height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ac-dim) !important; transition: background .15s, color .15s; white-space: nowrap; }
.ac-seg button:hover { color: var(--ac-text) !important; }
.ac-seg button.on { background: var(--ac-hover) !important; color: var(--ac-text) !important; box-shadow: inset 0 0 0 1px var(--ac-line2); }
.ac-seg.sm button { height: 26px; font-size: 12px; } .ac-seg.wrap { margin-bottom: 14px; }
.ac-sel { height: 36px; padding: 0 30px 0 12px; border-radius: 9px; background: var(--ac-panel); border: 1px solid var(--ac-line2); color: var(--ac-text); font-size: 13.5px; }
.ac-sel option, .ac-in option { background: var(--ac-panel); color: var(--ac-text); }
.ac-dd { position: relative; }
.ac-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; padding: 8px; border-radius: 11px; background: var(--ac-panel); border: 1px solid var(--ac-line2); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.ac-dd-menu[hidden] { display: none; }
.ac-dd-t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ac-faint); padding: 4px 8px 6px; }
.ac-dd-menu .ac-check { padding: 6px 8px; border-radius: 7px; margin: 0; } .ac-dd-menu .ac-check:hover { background: var(--ac-hover); }

/* ----------------------------------------------------------- bulk bar */
.ac-bulk { position: fixed; z-index: 35; left: calc(50% + 124px); bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 300px); padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--ac-panel); border: 1px solid var(--ac-line2); box-shadow: 0 24px 60px -16px rgba(0,0,0,.65); animation: acUp .25s cubic-bezier(.2,.8,.2,1); }
.ac-bulk[hidden] { display: none; }
.ac-bulk > b { font-size: 13px; margin-right: 4px; white-space: nowrap; }
.ac-bulk > b i { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ac-accent); color: var(--ac-accent-ink); margin-right: 6px; font-size: 12px; }
.ac-bulk-sep { width: 1px; height: 22px; background: var(--ac-line2); margin: 0 4px; }
@keyframes acUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --------------------------------------------------------------- forms */
.ac-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ac-dim); margin: 14px 0 6px; }
.ac-in { display: block; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 14px; background: var(--ac-bg) !important; border: 1px solid var(--ac-line2) !important; color: var(--ac-text) !important; outline: 0; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.ac-in:focus { border-color: var(--ac-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 20%, transparent); }
textarea.ac-in { resize: vertical; line-height: 1.5; }
.ac-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ac-form2 small { display: block; margin-top: 5px; font-size: 12px; }
.ac-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; cursor: pointer; font-size: 13.5px; line-height: 1.45; }
.ac-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ac-accent); flex: 0 0 auto; }
.ac-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-boxc { position: relative; cursor: pointer; }
.ac-boxc input { position: absolute; opacity: 0; pointer-events: none; }
.ac-boxc span { --c: var(--ac-accent); display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--ac-line2); color: var(--ac-dim); background: var(--ac-panel); transition: all .15s; }
.ac-boxc span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-line2); transition: background .15s; }
.ac-boxc input:checked + span { color: var(--ac-text); border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ac-boxc input:checked + span::before { background: var(--c); }
.ac-boxc input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 25%, transparent); }
.ac-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; cursor: pointer; }
.ac-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ac-sw { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--ac-line2); flex: 0 0 auto; transition: background .2s; }
.ac-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.ac-switch input:checked + .ac-sw { background: var(--ac-ok); }
.ac-switch input:checked + .ac-sw::after { transform: translateX(16px); }
.ac-switch input:focus-visible + .ac-sw { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 30%, transparent); }
.ac-sw-l { font-size: 13.5px; font-weight: 600; line-height: 1.35; padding-top: 1px; }
.ac-sw-l small { display: block; font-weight: 400; color: var(--ac-dim); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.ac-switch.mini { margin: 0; display: inline-flex; }
.ac-savebar { position: sticky; bottom: 14px; z-index: 10; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 12px 18px; border-radius: var(--ac-r); background: var(--ac-panel); border: 1px solid var(--ac-line2); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }
.ac-pick { max-height: 240px; overflow-y: auto; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-bg); }
.ac-pick small { font-size: 12px; }

/* ----------------------------------------------------------------- tabs */
.ac-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ac-line); margin-bottom: 20px; overflow-x: auto; }
.ac-tabs a, .ac-tabs button { position: relative; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--ac-dim) !important; white-space: nowrap; transition: color .15s; }
.ac-tabs a:hover, .ac-tabs button:hover { color: var(--ac-text) !important; }
.ac-tabs a.on, .ac-tabs button.on { color: var(--ac-text) !important; }
.ac-tabs a.on::after, .ac-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ac-accent); }
.ac-tabs.dr { margin: 0; padding: 0 22px; flex: 0 0 auto; }

/* ---------------------------------------------------------- live board */
.ac-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ac-live { text-align: left; padding: 16px; border-radius: var(--ac-r); background: var(--ac-panel); border: 1px solid var(--ac-line); box-shadow: var(--ac-shadow); cursor: pointer; transition: border-color .15s, transform .15s; }
.ac-live:hover { border-color: color-mix(in srgb, var(--ac-ok) 40%, transparent); transform: translateY(-2px); }
.ac-live-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ac-live-hd b { display: block; } .ac-live-hd small { display: block; color: var(--ac-dim); font-size: 12px; }
.ac-pos { padding: 14px; border-radius: 10px; background: var(--ac-panel2); border: 1px solid var(--ac-line); }
.ac-pos.is-live { border-color: color-mix(in srgb, var(--ac-ok) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ac-ok) 7%, var(--ac-panel2)), var(--ac-panel2)); }
.ac-pos-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.ac-pos-top b { font-weight: 600; }
.ac-pos-t { font-weight: 600; font-size: 14px; margin-top: 10px; line-height: 1.4; }
.ac-pos-d { color: var(--ac-dim); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
.ac-pos-a { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--ac-hover); line-height: 1.45; }
.ac-pos-a span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-now); margin-bottom: 2px; }
.ac-pos-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--ac-dim); }
.ac-pos-prog .ac-bar { flex: 1; max-width: none; } .ac-pos-prog b { color: var(--ac-text); font-variant-numeric: tabular-nums; }
.ac-pos-meta { font-size: 12px; color: var(--ac-dim); margin-top: 8px; }
.ac-pos .ac-btn { margin-top: 12px; }

/* -------------------------------------------------------------- courses */
.ac-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ac-course { --c: var(--ac-accent); position: relative; display: block; padding: 18px; border-radius: var(--ac-r); background: var(--ac-panel); border: 1px solid var(--ac-line); box-shadow: var(--ac-shadow); overflow: hidden; transition: border-color .15s, transform .15s; }
.ac-course::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); opacity: .8; }
.ac-course:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-2px); }
.ac-course-hd { display: flex; align-items: center; gap: 4px; }
.ac-course-hd b { flex: 1; font-size: 14.5px; font-weight: 650; }
.ac-course-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 14px; }
.ac-course-nums b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ac-course-nums span { font-size: 11.5px; color: var(--ac-dim); }
.ac-course-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ac-dim); }
.ac-course-bar .ac-bar { flex: 1; max-width: none; } .ac-course-bar b { color: var(--ac-text); font-variant-numeric: tabular-nums; }
.ac-course-meta { margin-top: 12px; font-size: 12px; color: var(--ac-dim); }

/* ------------------------------------------------------------ analytics */
.ac-cols { display: flex; align-items: stretch; gap: 14px; height: 200px; padding-top: 6px; }
.ac-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ac-col b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ac-col > span { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 8px; background: var(--ac-panel2); overflow: hidden; }
.ac-col > span i { display: block; width: 100%; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, transparent)); border-radius: 8px 8px 0 0; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.ac-col small { font-size: 11.5px; color: var(--ac-dim); white-space: nowrap; }
.ac-funnel { display: flex; align-items: stretch; gap: 2px; height: 160px; }
.ac-funnel span { flex: 1; display: flex; align-items: flex-end; cursor: crosshair; border-radius: 3px; background: var(--ac-panel2); }
.ac-funnel span i { display: block; width: 100%; background: var(--c); border-radius: 3px 3px 0 0; opacity: .8; transition: opacity .1s; }
.ac-funnel span:hover i { opacity: 1; filter: brightness(1.2); }
.ac-funnel-tip { margin-top: 10px; font-size: 12.5px; color: var(--ac-dim); min-height: 18px; }

/* -------------------------------------------------------------- activity */
.ac-log > div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ac-line); font-size: 13.5px; line-height: 1.45; }
.ac-log > div:last-child { border-bottom: 0; }
.ac-log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--ac-dim); }
.ac-log-dot.student { background: var(--ac-info); } .ac-log-dot.settings { background: var(--ac-accent); } .ac-log-dot.messages { background: var(--ac-now); }
.ac-log-w { flex: 1; min-width: 0; } .ac-log-w small { display: block; color: var(--ac-faint); font-size: 12px; margin-top: 2px; }
.ac-log.compact > div { padding: 8px 0; font-size: 13px; }

/* -------------------------------------------------------------- messages */
.ac-sent { padding: 14px 0; border-bottom: 1px solid var(--ac-line); }
.ac-sent:first-child { padding-top: 0; } .ac-sent:last-child { border-bottom: 0; }
.ac-sent-hd { display: flex; align-items: center; gap: 10px; } .ac-sent-hd b { flex: 1; font-size: 14px; }
.ac-sent p { margin: 6px 0; color: var(--ac-dim); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.ac-sent small { color: var(--ac-faint); font-size: 12px; }
.ac-sent .ac-actions { margin-top: 10px; }
.ac-reads { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: var(--ac-panel2); font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.ac-reads[hidden] { display: none; }
.ac-reads > div { display: flex; flex-direction: column; gap: 6px; }
.ac-preview { padding: 14px; border-radius: 10px; border: 1px solid var(--ac-line2); background: var(--ac-panel2); border-left: 3px solid var(--ac-info); }
.ac-preview.tone-important { border-left-color: var(--ac-warn); } .ac-preview.tone-success { border-left-color: var(--ac-ok); }
.ac-preview p { margin: 6px 0 0; white-space: pre-line; color: var(--ac-dim); }
.ac-inv { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ac-line); }
.ac-inv:last-child { border-bottom: 0; }
.ac-inv small { display: block; font-size: 12px; color: var(--ac-dim); margin: 3px 0 6px; }

/* ---------------------------------------------------------------- drawer */
.ac-dw { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.ac-dw.on { pointer-events: auto; }
.ac-scrim { position: absolute; inset: 0; background: rgba(4,6,8,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.ac-dw.on .ac-scrim { opacity: 1; }
.ac-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--ac-bg2); border-left: 1px solid var(--ac-line2); box-shadow: -30px 0 80px -20px rgba(0,0,0,.6); transform: translateX(104%); transition: transform .34s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; color: var(--ac-text); }
.ac-dw.on .ac-drawer { transform: none; }
.ac-drawer > div { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ac-dr-hd { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 16px; flex: 0 0 auto; }
.ac-dr-hd h2 { margin: 0 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; font-family: inherit; color: var(--ac-text); }
.ac-dr-hd .ac-tags { margin-top: 10px; }
.ac-x { width: 34px; height: 34px; border-radius: 9px; font-size: 22px !important; line-height: 1; color: var(--ac-dim) !important; display: grid; place-items: center; }
.ac-x:hover { background: var(--ac-hover) !important; color: var(--ac-text) !important; }
.ac-dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ac-dr-in { padding: 20px 22px 60px; }
.ac-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ac-facts > div { padding: 12px; border-radius: 10px; background: var(--ac-panel); border: 1px solid var(--ac-line); }
.ac-facts span { display: block; font-size: 11.5px; color: var(--ac-dim); } .ac-facts b { display: block; font-size: 13.5px; margin-top: 3px; }
.ac-dr-courses { display: flex; flex-direction: column; gap: 8px; }
.ac-dr-course { display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: 11px; background: var(--ac-panel) !important; border: 1px solid var(--ac-line) !important; width: 100%; transition: border-color .15s; }
.ac-dr-course:hover { border-color: var(--ac-line2) !important; }
.ac-dr-course b { display: block; font-size: 14px; } .ac-dr-course small { display: block; color: var(--ac-dim); font-size: 12.5px; margin-top: 2px; }
.ac-go { font-size: 12.5px; font-weight: 600; color: var(--ac-accent); }
.ac-note { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ac-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ac-accent) 25%, transparent); font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.ac-note span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-accent); margin-bottom: 4px; }
.ac-dr-sum { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--ac-panel); border: 1px solid var(--ac-line); }
.ac-dr-sum b { display: block; font-size: 15px; } .ac-dr-sum small { display: block; color: var(--ac-dim); font-size: 12.5px; margin-top: 3px; }
.ac-dr-sum .ac-actions { margin-top: 12px; }
.ac-dr-assess { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--ac-panel); border: 1px solid var(--ac-line); flex-wrap: wrap; }
.ac-dr-assess b { display: block; font-size: 13.5px; } .ac-dr-assess small { display: block; color: var(--ac-dim); font-size: 12.5px; margin-top: 3px; }
.ac-dr-assess .ac-actions { margin-top: 0; }
.ac-hist { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.ac-hist span { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.ac-hist .ok { color: var(--ac-ok); background: color-mix(in srgb, var(--ac-ok) 13%, transparent); } .ac-hist .bad { color: var(--ac-bad); background: color-mix(in srgb, var(--ac-bad) 13%, transparent); }
.ac-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 10px; font-size: 12px; color: var(--ac-dim); }
.ac-legend span { display: inline-flex; align-items: center; gap: 6px; }
i.st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--ac-line2); }
i.st.ok { background: var(--ac-ok); border-color: var(--ac-ok); }
i.st.now { background: var(--ac-now); border-color: var(--ac-now); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-now) 25%, transparent); }
i.st.open { border-color: var(--ac-info); }
i.st.lock { background: var(--ac-line); border-color: var(--ac-line); }
i.st.hid { border-style: dashed; border-color: var(--ac-faint); }
.ac-mods { display: flex; flex-direction: column; gap: 6px; }
.ac-mod { border-radius: 11px; background: var(--ac-panel); border: 1px solid var(--ac-line); overflow: hidden; }
.ac-mod-hd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; }
.ac-mod-hd:hover { background: var(--ac-hover) !important; }
.ac-mod-hd b { display: block; font-size: 13.5px; } .ac-mod-hd small { display: block; color: var(--ac-dim); font-size: 12px; margin-top: 2px; }
.ac-mod-hd .ac-bar { width: 70px; }
.ac-chev { width: 8px; height: 8px; border-right: 2px solid var(--ac-dim); border-bottom: 2px solid var(--ac-dim); transform: rotate(-45deg); transition: transform .2s; margin: 0 4px; flex: 0 0 auto; }
.ac-mod.open > .ac-mod-hd .ac-chev, .ac-les.exp > .ac-les-hd .ac-chev { transform: rotate(45deg); }
.ac-lessons { border-top: 1px solid var(--ac-line); }
.ac-les { border-bottom: 1px solid var(--ac-line); } .ac-les:last-child { border-bottom: 0; }
.ac-les-hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 18px; text-align: left; }
.ac-les-hd:hover { background: var(--ac-hover) !important; }
.ac-les-hd b { display: block; font-size: 13px; font-weight: 600; } .ac-les-hd small { display: block; color: var(--ac-dim); font-size: 12px; margin-top: 2px; }
.ac-les.exp { background: var(--ac-panel2); }
.ac-les-body { padding: 4px 18px 16px; }
.ac-les-body > .ac-actions { margin: 4px 0 12px; }
.ac-act { margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--ac-panel); border: 1px solid var(--ac-line); border-left: 3px solid var(--ac-line2); }
.ac-act.ok { border-left-color: var(--ac-ok); } .ac-act.bad { border-left-color: var(--ac-bad); }
.ac-act-hd { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ac-dim); flex-wrap: wrap; }
.ac-act-q { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.ac-act-ans { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ac-act-ans > div { padding: 8px 10px; border-radius: 8px; background: var(--ac-panel2); line-height: 1.45; white-space: pre-line; }
.ac-act-ans span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-dim); margin-bottom: 2px; }
.ac-act .ac-actions { margin-top: 10px; }
.ac-gates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.ac-gate { text-align: center; padding: 12px 4px; border-radius: 10px; background: var(--ac-panel); border: 1px solid var(--ac-line); }
.ac-gate span { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 6px; border-radius: 50%; background: var(--ac-hover); font-size: 12px; font-weight: 700; color: var(--ac-dim); }
.ac-gate b { font-size: 11.5px; font-weight: 600; }
.ac-gate.ok { border-color: color-mix(in srgb, var(--ac-ok) 35%, transparent); } .ac-gate.ok span { background: var(--ac-ok); color: #04150d; }
.ac-dl { margin: 12px 0 0; font-size: 13px; }
.ac-dl dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-dim); margin-top: 10px; }
.ac-dl dd { margin: 3px 0 0; line-height: 1.5; white-space: pre-line; }
.ac-case.submitted { border-left: 3px solid var(--ac-warn); } .ac-case.approved { border-left: 3px solid var(--ac-ok); }
.ac-drawer .ac-card.flat h4 { margin-bottom: 6px; }
.ac-drawer .ac-card.flat p { color: var(--ac-text); }
.ac-drawer .ac-card.flat .ac-dim { color: var(--ac-dim); }

/* ----------------------------------------------------------------- modal */
.ac-modal-wrap { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(4,6,8,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.ac-modal-wrap.on { opacity: 1; }
.ac-modal { width: min(460px, 100%); border-radius: 14px; background: var(--ac-panel); border: 1px solid var(--ac-line2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1); color: var(--ac-text); }
.ac-modal-wrap.on .ac-modal { transform: none; }
.ac-modal-hd { padding: 20px 22px 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ac-modal-hd.danger { color: var(--ac-bad); }
.ac-modal-bd { padding: 10px 22px 6px; color: var(--ac-dim); font-size: 13.5px; line-height: 1.55; }
.ac-modal-bd p { margin: 6px 0; } .ac-modal-bd b { color: var(--ac-text); }
.ac-modal-err { color: var(--ac-bad); font-size: 12.5px; min-height: 18px; margin-top: 6px; }
.ac-modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }

/* --------------------------------------------------------- command bar */
.ac-k-wrap { position: fixed; inset: 0; z-index: 130; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(4,6,8,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s; }
.ac-k-wrap.on { opacity: 1; }
.ac-k { width: min(620px, 100%); border-radius: 14px; overflow: hidden; background: var(--ac-panel); border: 1px solid var(--ac-line2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.75); color: var(--ac-text); }
.ac-k-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--ac-line); color: var(--ac-dim); }
.ac-k-in input { flex: 1; background: none; border: 0; outline: 0; font-size: 16px; color: var(--ac-text); }
.ac-k-res { max-height: 52vh; overflow-y: auto; padding: 6px; }
.ac-k-res button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; }
.ac-k-res button.on { background: var(--ac-hover); }
.ac-k-res button > span:not(.ac-av):not(.ac-dot) { flex: 1; min-width: 0; }
.ac-k-res b { display: block; font-weight: 600; font-size: 13.5px; } .ac-k-res small { display: block; color: var(--ac-dim); font-size: 12px; }
.ac-k-res em { font-style: normal; font-size: 11px; color: var(--ac-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ac-k-res .ac-ico { color: var(--ac-dim); }
.ac-k-ft { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--ac-line); font-size: 11.5px; color: var(--ac-faint); }
.ac-k-ft kbd { margin-right: 3px; }

/* the portal's toast sits above the console layers */
body.ac-on .toast { z-index: 140; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1280px) { .ac-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ac-grid2, .ac-grid2.wide { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ac-side { transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 30px 0 60px -20px rgba(0,0,0,.6); z-index: 60; }
  .ac.nav-open .ac-side { transform: none; }
  .ac.nav-open .ac-scrim-nav { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(4,6,8,.5); }
  .ac-main { margin-left: 0; }
  .ac-burger { display: grid; }
  .ac-top { padding: 0 16px; }
  .ac-search { width: auto; flex: 1; max-width: none; } .ac-search kbd, .ac-crumb { display: none; }
  .ac-page { padding: 20px 16px 120px; }
  .ac-bulk { left: 50%; max-width: calc(100vw - 24px); }
  .ac-facts { grid-template-columns: 1fr 1fr; }
  .ac-gates { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ac-kpis { grid-template-columns: 1fr 1fr; }
  .ac-form2 { grid-template-columns: 1fr; }
  .ac-live-pill span { display: none; } .ac-live-pill { padding: 0 10px; }
  .ac-ph h1 { font-size: 21px; }
  .ac-savebar { flex-direction: column; align-items: stretch; }
  .ac-live-grid, .ac-course-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ac *, .ac-dw *, .ac-page.in { animation: none !important; transition: none !important; } }

/* =====================================================================
   LEARNER SIDE: announcement banner, message strip, inbox
   ===================================================================== */
.sa-ann, .sa-msg { position: relative; z-index: 5; font-size: 14px; line-height: 1.5; }
.sa-ann { background: linear-gradient(90deg, rgba(90,166,240,.16), rgba(90,166,240,.07)); border-bottom: 1px solid rgba(90,166,240,.3); }
.sa-ann.tone-important { background: linear-gradient(90deg, rgba(227,169,69,.2), rgba(227,169,69,.08)); border-bottom-color: rgba(227,169,69,.4); }
.sa-ann.tone-success { background: linear-gradient(90deg, rgba(63,196,139,.18), rgba(63,196,139,.07)); border-bottom-color: rgba(63,196,139,.35); }
.sa-ann-in { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.sa-ann-in > div { flex: 1; }
.sa-ann-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: inherit; font-size: 18px; line-height: 1; flex: 0 0 auto; }
.sa-ann-x:hover { background: rgba(255,255,255,.16); }
.sa-msg { background: linear-gradient(90deg, rgba(201,169,97,.2), rgba(201,169,97,.06)); border-bottom: 1px solid rgba(201,169,97,.35); }
.nav-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 700; background: var(--gold, #c9a961); color: #1a1408; vertical-align: 1px; }
.nav-n[hidden] { display: none; }
.sa-inbox { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sa-mail { padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid rgba(90,166,240,.7); }
.sa-mail.tone-important { border-left-color: rgba(227,169,69,.85); } .sa-mail.tone-success { border-left-color: rgba(63,196,139,.85); }
.sa-mail.unread { background: rgba(255,255,255,.07); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.sa-mail header { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.sa-mail header b { font-size: 16px; } .sa-mail header span { font-size: 12.5px; opacity: .65; }
.sa-mail-body { margin-top: 10px; font-size: 14.5px; line-height: 1.65; opacity: .9; }