/* ==========================================================================
   TCP+plus — design tokens
   Idiom: a drawing sheet in black and white. Yellow is used only where something needs attention
   (today, hand-in dates, warnings, the active tab).
   ========================================================================== */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --paper-2: #e8e8e8;
  --surface: #ffffff;
  --ink: #000000;
  --ink-2: #555555;
  --ink-3: #707070;
  --line: #d1d1d1;
  --line-soft: #e2e2e2;

  --brand: #0d0d0d;
  --brand-dark: #000;
  --brand-wash: #fff6cc;
  --accent: #f5c400;
  --gold-1: #f5c400; --gold-2: #222222; --gold-3: #222222; --gold-4: #222222; --charcoal: #343434;
  --navy-2: #2a2a2a;

  --green: #111;
  --green-wash: #ececec;
  --amber: #222222;
  --amber-fill: #f5c400;
  --amber-wash: #fff6cc;
  --red: #0d0d0d;
  --red-wash: #fff6cc;

  --lv1: #0d0d0d;
  --lv2: #444;
  --lv3: #777;
  --lv4: #aaa;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  --font-head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--ink-3); background: #fff6cc; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover { background: #363636; border-color: #363636; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(29,29,29,.06); border-color: transparent; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-wash); border-color: #d2d2d2; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-icon { width: 34px; min-height: 34px; padding: 0; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > label, .label { font-weight: 600; font-size: 14px; }
.hint { color: var(--ink-2); font-size: 13px; }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(34,34,34,.18); }
.select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.select-inline { width: auto; min-height: 36px; padding-top: 5px; padding-bottom: 5px; font-weight: 600; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--red); }
.field-error { color: var(--red); font-size: 13px; font-weight: 600; }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.search .input { padding-left: 40px; }

/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; min-height: 24px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-2);
}
.chip svg { width: 14px; height: 14px; }
.chip-ok { background: var(--green-wash); color: #444444; }
.chip-draft { background: var(--amber-wash); color: #222222; }
.chip-pending { background: var(--red-wash); color: #555555; }
.chip-none { background: var(--paper-2); color: var(--ink-2); }
.chip-teal { background: var(--brand-wash); color: var(--brand-dark); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.lv-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lv-tag::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--lv, var(--ink-3)); }
.lv-1 { --lv: var(--lv1); } .lv-2 { --lv: var(--lv2); } .lv-3 { --lv: var(--lv3); } .lv-4 { --lv: var(--lv4); }

.codebox { width: 46px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand-dark);
  font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .02em; flex: none; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 19px; }
.panel-body { padding: 20px; }
.panel-flush { padding: 0; }

/* ---------- top bar (public + lecturer) ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px var(--gutter); background: var(--ink); color: #ebebeb; }
.topbar .btn-ghost { color: #e3e3e3; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.1); }
.brand { display: block; text-decoration: none; flex: none; }
.brand img, .logo-full { display: block; height: auto; }
.topbar .brand img { width: auto; height: 52px; }
.mark { display: block; width: 100%; height: auto; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.who { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; font-weight: 600; font-size: 14px; }
.who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.who { max-width: 100%; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .02em; }

.page { max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter) 72px; }

/* ---------- landing ---------- */
.landing { position: relative; min-height: 100vh; isolation: isolate; }
.landing-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 72px);
  max-width: 1180px; margin: 0 auto; padding: clamp(20px, 5vw, 56px) var(--gutter) 72px; align-items: start; }
.landing h1 { max-width: 20ch; }
.landing .lede { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 52ch; }
.picker-tools { display: flex; gap: 12px; margin: 28px 0 14px; flex-wrap: wrap; align-items: center; }
.picker-tools .search { flex: 1 1 260px; max-width: 420px; }
.lecturer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.lecturer-btn { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; min-height: 58px; text-align: left;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s; }
.lecturer-btn:hover { border-color: var(--brand); box-shadow: 0 2px 0 var(--brand); }
.lecturer-btn:active { transform: translateY(1px); box-shadow: none; }
.lecturer-btn .code { flex: none; min-width: 42px; height: 38px; padding: 0 8px; border-radius: 6px; display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-dark); font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.lecturer-btn .nm { font-weight: 600; line-height: 1.25; }
.titleblock { background: rgba(255,255,255,.94); border: 1px solid var(--ink); border-radius: 2px; }
.titleblock-row { padding: 16px 18px; border-bottom: 1px solid var(--ink); }
.titleblock-row:last-child { border-bottom: 0; }
.titleblock h3 { font-size: 18px; margin-bottom: 8px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; counter-increment: s; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 14px; }
.steps b { display: block; }
.landing-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stages { display: grid; gap: 8px; margin-top: 4px; }
.stage { display: flex; align-items: baseline; gap: 10px; }
.stage i { width: 10px; height: 10px; border-radius: 2px; background: var(--lv); flex: none; transform: translateY(1px); }

/* ---------- lecturer portal ---------- */
.hello { padding: 18px 0 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hello h1 { font-size: clamp(30px, 4vw, 40px); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 22px; overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; padding: 11px 16px; font-weight: 600; font-size: 15px; color: var(--ink-2); background: none; border: 0;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px 6px 0 0; }
.tab:hover { color: var(--ink); background: rgba(29,29,29,.04); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--ink); border-radius: 2px 2px 0 0; }
.tab .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); }
.tab .tick svg { width: 11px; height: 11px; }
.tab .tick.done { background: var(--green); color: #fff; }

.module-list { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.module-row { display: grid; grid-template-columns: 96px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.module-row:last-child { border-bottom: 0; }
.module-row .mcode { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: .01em; }
.module-row .mtitle { font-weight: 600; line-height: 1.3; }
.module-row .act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.module-row .col-label { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; display: block; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--paper); border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink-2); position: sticky; top: 0; z-index: 1; }

.empty { text-align: center; padding: 48px 20px; display: grid; gap: 12px; justify-items: center; }
.empty svg { width: 54px; height: 54px; color: var(--brand); }
.empty h3 { font-size: 22px; }
.empty p { max-width: 46ch; color: var(--ink-2); }

/* ---------- editor ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; padding: 14px 0 6px; }
.sheet-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: end; padding: 10px 0 4px; }
.sheet-code { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 6vw, 64px); line-height: .95; letter-spacing: .005em; }
.sheet-title h1 { font-size: clamp(24px, 3.2vw, 34px); }
.sheet-meta { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.editor-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.editor-panel { padding: clamp(18px, 3vw, 30px); }
.editor-panel h2 { font-size: 24px; margin-bottom: 4px; }
.editor-panel > .hint { margin-bottom: 18px; max-width: 62ch; }
.field-stack { display: grid; gap: 22px; max-width: 760px; }
.stickybar { position: sticky; bottom: 0; z-index: 5; margin-top: 22px; background: rgba(245,245,242,.94);
  border-top: 1px solid var(--line); padding: 12px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stickybar .status { display: flex; align-items: center; gap: 8px; }

.drop { border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 30px 20px; text-align: center;
  display: grid; gap: 10px; justify-items: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-wash); }
.drop svg.big { width: 40px; height: 40px; color: var(--brand); }
.drop b { font-size: 16px; }
.filecard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.filecard .ficon { width: 44px; height: 52px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .04em; flex: none; background: var(--red); }
.filecard .ficon.docx, .filecard .ficon.doc { background: #555555; }
.filecard .fname { font-weight: 600; word-break: break-all; }
.filecard .grow { flex: 1; min-width: 0; }
.filecard .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo { position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.photo button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(29,29,29,.82); color: #fff; display: grid; place-items: center; }
.photo button:hover { background: var(--red); }
.photo button svg { width: 15px; height: 15px; }
.photo.add { border: 2px dashed var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); font-weight: 600; text-align: center; }
.photo.add:hover { border-color: var(--brand); color: var(--brand-dark); }
.photo .badge-new { position: absolute; left: 6px; bottom: 6px; }

.points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 12px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line-soft); line-height: 1.45; }
.points li svg { width: 18px; height: 18px; margin-top: 2px; }
.points.pos li { border-left: 3px solid var(--green); } .points.pos li svg { color: var(--green); }
.points.neg li { border-left: 3px solid var(--red); } .points.neg li svg { color: var(--red); }
.points .src { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--brand-wash); color: var(--ink); align-items: flex-start; }
.callout svg { width: 20px; height: 20px; color: var(--brand-dark); flex: none; margin-top: 1px; }
.callout.warn { background: var(--amber-wash); } .callout.warn svg { color: var(--amber); }
.callout.err { background: var(--red-wash); } .callout.err svg { color: var(--red); }
.action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.action-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.action-list li::before { content: ""; width: 16px; height: 16px; margin: 3px 0 0 1px; border: 2px solid var(--brand); border-radius: 4px; }

/* ---------- modal / drawer / toast / lightbox ---------- */
.scrim { position: fixed; inset: 0; background: rgba(29,29,29,.5); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s ease-out; }
.dialog { background: var(--surface); border-radius: var(--r-lg); width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(29,29,29,.35); animation: rise .18s ease-out; }
.dialog.narrow { width: min(460px, 100%); }
.dialog-head { padding: 18px 22px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line-soft); }
.dialog-body { padding: 16px 22px; overflow: auto; flex: 1; }
.dialog-foot { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 10px; align-items: center; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } }
.toasts { position: fixed; right: 16px; top: 16px; z-index: 80; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: #fff; font-weight: 500; box-shadow: 0 10px 30px rgba(29,29,29,.3);
  display: flex; gap: 10px; align-items: flex-start; animation: rise .18s ease-out; }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.toast.ok svg { color: #b5b5b5; } .toast.bad { background: #4a4a4a; } .toast.bad svg { color: #dedede; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(13,13,13,.92); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.picker-group { margin-bottom: 18px; }
.picker-group h4 { font-size: 15px; color: var(--ink-2); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.pick { display: grid; grid-template-columns: 22px 78px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.pick:hover { background: var(--paper); }
.pick input { width: 18px; height: 18px; accent-color: var(--brand); }
.pick .mcode { font-family: var(--font-head); font-weight: 700; font-size: 16px; }

/* ==========================================================================
   HoD area
   ========================================================================== */
.hod { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--ink); color: #e3e3e3; padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { padding: 0; margin: 0 -4px; }
.side .brand img { width: 100%; }
.side nav { display: grid; gap: 2px; }
.side a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: #c4c4c4; text-decoration: none; font-weight: 600; position: relative; }
.side a.nav svg { width: 19px; height: 19px; flex: none; }
.side a.nav:hover { background: rgba(255,255,255,.07); color: #fff; }
.side a.nav[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.side a.nav[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 5px; background: var(--accent); border-radius: 0 3px 3px 0; }
.side .spacer { flex: 1; }
.side .foot { display: grid; gap: 4px; }
.side .foot .btn { justify-content: flex-start; color: #c4c4c4; }
.side .foot .btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.side .secure { display: flex; gap: 8px; align-items: center; padding: 8px 12px; font-size: 12.5px; color: #9c9c9c; }
.side .secure svg { width: 15px; height: 15px; }
.hod-main { padding: 22px var(--gutter) 80px; min-width: 0; max-width: 1480px; }
.hod-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hod-top h1 { font-size: clamp(30px, 3.6vw, 42px); }
.hod-top .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.year-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stack { display: grid; gap: 18px; }
.overview-top { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(250px, 1fr); gap: 18px; align-items: stretch; }

/* parcel map */
.parcel-map { padding: 18px 20px 20px; display: grid; gap: 10px; }
.pm-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.pm-label { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.1; color: var(--ink-2); padding-left: 10px; border-left: 4px solid var(--lv, var(--ink-3)); }
.pm-label small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
.pm-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.parcel { position: relative; width: 52px; height: 44px; border-radius: 3px; border: 1.5px solid var(--ink-3); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0; text-decoration: none; color: var(--ink); background: var(--surface);
  cursor: pointer; transition: transform .1s, box-shadow .1s; overflow: hidden; }
.parcel:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); z-index: 2; }
.parcel.complete { background: var(--green); border-color: #464646; color: #fff; }
.parcel.partial { background: linear-gradient(90deg, var(--green) var(--p, 50%), var(--green-wash) var(--p, 50%)); border-color: #464646; }
.parcel.partial span { background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 2px; }
.parcel.draft { background: var(--amber-fill); border-color: #222222; }
.parcel.pending { background: var(--red-wash); border-color: var(--red); color: #555555; }
.parcel.unassigned { background: transparent; border: 1.5px dashed var(--line); color: var(--ink-3); }
.parcel .flag { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 13px 13px 0; border-color: transparent var(--ink) transparent transparent; }
.parcel .flag.open { border-color: transparent var(--line) transparent transparent; }
.parcel.complete .flag { border-color: transparent #fff transparent transparent; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--ink-2); padding-top: 6px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 16px; height: 12px; border-radius: 2px; border: 1.5px solid var(--ink-3); display: inline-block; }
.legend i.c { background: var(--green); border-color: #464646; } .legend i.p { background: linear-gradient(90deg, var(--green) 50%, var(--green-wash) 50%); border-color: #464646; }
.legend i.d { background: var(--amber-fill); border-color: #222222; } .legend i.n { background: var(--red-wash); border-color: var(--red); }
.legend i.u { border: 1.5px dashed var(--line); } .legend i.f { width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--ink) transparent transparent; border-radius: 0; }

.kpis { display: grid; gap: 0; }
.kpi { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 8px; }
.kpi:last-child { border-bottom: 0; }
.kpi .big { font-family: var(--font-head); font-weight: 700; font-size: 38px; line-height: 1; }
.kpi .big small { font-size: 18px; font-weight: 600; color: var(--ink-3); }
.kpi .cap { color: var(--ink-2); font-size: 13.5px; }
.bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; display: flex; }
.bar > i { display: block; height: 100%; }
.bar .g { background: var(--green); } .bar .a { background: var(--amber-fill); } .bar .r { background: #c3c3c3; }

.rating-badge { display: inline-flex; align-items: center; gap: 12px; }
.ring { --v: 0; --c: var(--brand); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--paper-2) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 9px; background: var(--surface); border-radius: 50%; }
.ring b { position: relative; font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1; }
.ring.sm { width: 46px; height: 46px; } .ring.sm::before { inset: 5px; } .ring.sm b { font-size: 15px; }
.band-excellent { --c: var(--green); } .band-good { --c: #555555; } .band-mixed { --c: var(--amber-fill); } .band-attention { --c: var(--red); } .band-none { --c: var(--line); }
.stars { display: inline-flex; gap: 2px; color: var(--amber-fill); }
.stars svg { width: 16px; height: 16px; } .stars .off { color: var(--line); }
.band-text { font-weight: 700; }
.band-text.excellent { color: #444444; } .band-text.good { color: #525252; } .band-text.mixed { color: #222222; } .band-text.attention { color: #555555; } .band-text.none { color: var(--ink-3); }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }

.say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.say .panel-head { border-bottom: 0; padding-bottom: 6px; }
.say h3 { display: flex; align-items: center; gap: 10px; }
.say h3 i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.say .pos h3 i { background: var(--green); } .say .neg h3 i { background: var(--red); }
.point-by { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.theme-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); margin-right: 6px; }

/* tables */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; white-space: nowrap; }
table.t td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: #fff6cc; }
table.t td.code { font-family: var(--font-head); font-weight: 700; font-size: 16px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { display: inline-flex; padding: 3px; background: var(--paper-2); border-radius: 10px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(29,29,29,.15); }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters .search { flex: 1 1 220px; max-width: 340px; }

/* lecturers master-detail */
.md { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.md-list { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.md-list .scroll { overflow: auto; flex: 1; }
.lec-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); }
.lec-item:hover { background: var(--paper); }
.lec-item[aria-current="page"] { background: var(--brand-wash); box-shadow: inset 4px 0 0 var(--accent); }
.lec-item .nm { font-weight: 600; line-height: 1.25; }
.lec-item .sub { font-size: 12.5px; color: var(--ink-2); }
.rec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.rec + .rec { margin-top: 14px; }
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; cursor: pointer; width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; }
.rec-head .l { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.rec-head .mcode { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.rec-body { padding: 18px; display: grid; gap: 20px; }
.rec-body h4 { font-size: 15.5px; margin-bottom: 8px; color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prose { white-space: pre-wrap; line-height: 1.6; max-width: 72ch; }
.attach { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mini-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-photos img { width: 92px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.hero-line { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero-line .name h2 { font-size: clamp(28px, 3.4vw, 38px); }
.stat { display: grid; gap: 2px; padding-right: 22px; margin-right: 6px; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat span { font-size: 13px; color: var(--ink-2); }
.assign-row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 2fr); gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.assign-row:last-child { border-bottom: 0; }
.tagx { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-dark); font-weight: 600; font-size: 13px; }
.tagx button { border: 0; background: transparent; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: inherit; }
.tagx button:hover { background: rgba(34,34,34,.2); }
.tagx button svg { width: 12px; height: 12px; }
.tagx.locked { padding-right: 10px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; isolation: isolate; }
.login { width: min(420px, 100%); padding: 28px; display: grid; gap: 18px; }
.skeleton { background: linear-gradient(90deg, var(--paper-2), #fff6cc, var(--paper-2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 6px; min-height: 18px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .overview-top { grid-template-columns: 1fr; }
  .md { grid-template-columns: 1fr; }
  .md-list { position: static; max-height: 360px; }
}
@media (max-width: 960px) {
  .landing-grid { grid-template-columns: 1fr; }
  .hod { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; gap: 8px; overflow-x: auto; }
  .side .brand span { display: none; }
  .side nav { display: flex; gap: 2px; }
  .side a.nav { padding: 8px 10px; white-space: nowrap; }
  .side a.nav[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 4px; border-radius: 3px 3px 0 0; }
  .side .spacer, .side .secure { display: none; }
  .side .foot { display: flex; }
  .grid-2, .grid-3, .say, .two-col { grid-template-columns: 1fr; }
  .module-row { grid-template-columns: 80px 1fr; }
  .module-row > :nth-child(n+3) { grid-column: 1 / -1; }
  .assign-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .topbar .brand span { display: none; }
  .topbar-actions { flex-wrap: nowrap; min-width: 0; }
  .who { max-width: calc(100vw - 120px); }
  .filecard { flex-wrap: wrap; }
  .filecard .grow { flex-basis: calc(100% - 70px); }
  .filecard .row-actions { width: 100%; }
  .filecard .fname { overflow-wrap: anywhere; }
  .stickybar { align-items: stretch; }
  .stickybar .chips { width: 100%; }
  .stickybar .chips .btn { flex: 1; }
  .sheet-head { grid-template-columns: 1fr; }
  .pm-row { grid-template-columns: 1fr; gap: 6px; }
  .parcel { width: calc((100% - 15px) / 4); min-width: 56px; }
  .stat { border-right: 0; }
  .hero-line .ring { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- AI analysis ---- */
.ai-box { border: 1px solid #f5c400; background: linear-gradient(180deg, var(--brand-wash), #fff 70%); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; }
.ai-head { display: flex; align-items: center; gap: 8px; }
.ai-head svg { width: 18px; height: 18px; color: var(--brand-dark); }
.ai-head .chip { margin-left: auto; }
.mention-chip { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.ai-note { display: flex; gap: 8px; align-items: flex-start; }
.ai-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-dark); }
.toggle-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line, #d1d1d1); border-radius: var(--r); background: #fff; }
.toggle-row input { margin-top: 2px; flex: none; }
.ok-text { color: #444444; font-weight: 600; } .bad-text { color: var(--red); font-weight: 600; }
.rule { border: 0; border-top: 1px solid var(--line, #d1d1d1); margin: 4px 0; width: 100%; }
.ai-progress { display: grid; gap: 6px; margin-top: 4px; }
.ai-progress .bar { height: 8px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.ai-progress .bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }


/* ==========================================================================
   TCP+plus shell additions
   ========================================================================== */
.side a.nav { line-height: 1.25; }
.side a.nav span { min-width: 0; }
.side .subnav { display: grid; gap: 1px; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.side a.nav.sub { padding: 7px 10px; font-size: 14px; font-weight: 500; }
.side a.nav.sub svg { width: 16px; height: 16px; }
.side a.nav.sub[aria-current="page"]::before { left: -11px; top: 6px; bottom: 6px; width: 3px; }
.side a.nav.settings { color: #c4c4c4; }
.who-side { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); margin-bottom: 4px; }
.who-text { display: grid; line-height: 1.2; min-width: 0; }
.who-text b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text span { color: #9c9c9c; font-size: 12px; }

/* landing hero */
.hero { position: relative; background: var(--ink); color: #fff; padding: clamp(22px, 4vw, 44px) var(--gutter) clamp(26px, 4vw, 48px); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(rgba(245,196,0,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(245,196,0,.10) 1px, transparent 1px);
  background-size: 70px 70px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 90%); mask-image: linear-gradient(100deg, transparent 20%, #000 90%); }
.hero-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; }
.hero-logo { width: min(620px, 100%); height: auto; margin-left: -4px; }
.hero-line-text { font-size: clamp(16px, 2vw, 20px); color: #d1d1d1; max-width: 52ch; }
.hero-hod { position: absolute; top: 18px; right: var(--gutter); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; }
.hero-hod:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.titleblock-row.inside { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 18px; }
.titleblock-row.inside svg { width: 22px; height: 22px; color: var(--brand); margin-top: 1px; }
.titleblock-row.inside b { display: block; line-height: 1.25; }
.login-logo { background: var(--ink); border-radius: var(--r); padding: 6px 8px; margin: -6px -6px 18px; }
.login-logo img { width: 100%; height: auto; }

@media (max-width: 960px) {
  .side { padding: 8px 10px; gap: 10px; }
  .side .brand { width: 148px; margin: 0; flex: none; }
  .side .brand img { width: 148px; }
  .side .subnav { display: flex; margin: 0; padding: 0 0 0 6px; border-left: 1px solid rgba(255,255,255,.18); }
  .side a.nav.sub { white-space: nowrap; }
  .side a.nav.sub[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 3px; }
  .who-side { display: none; }
  .side .foot .btn { padding: 0 10px; }
  .hero-hod { position: static; justify-self: start; margin-top: 4px; }
  .hero { display: grid; }
}

.module-row .act .chip { white-space: normal; max-width: 100%; line-height: 1.25; padding-top: 3px; padding-bottom: 3px; }

/* ==========================================================================
   Shared bits for the department tabs
   ========================================================================== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 2px; border-left: 4px solid var(--line); }
.stat-tile b { font-family: var(--font-head); font-size: 30px; line-height: 1.05; font-weight: 700; }
.stat-tile span { font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.stat-tile.warn { border-left-color: var(--amber-fill); } .stat-tile.bad { border-left-color: var(--red); } .stat-tile.bad b { color: var(--red); } .stat-tile.good { border-left-color: var(--green); }
.stat-row .stat-tile:not(.warn):not(.bad):not(.good) { border-left-color: var(--gold-2); }
.flags { display: inline-flex; gap: 4px; margin-left: auto; }
.flag-ic svg { width: 16px; height: 16px; }
.flag-ic.clash, .flag-ic.heavy_week { color: var(--red); } .flag-ic.late_status, .flag-ic.marking_late { color: #222222; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
table.t tr.clickable { cursor: pointer; }
.panel-sum { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.panel-sum::-webkit-details-marker { display: none; }
.panel-sum svg { width: 20px; height: 20px; color: var(--brand); }
.sem-h { display: block; margin-top: 6px; }
.info-panel { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-left: 4px solid var(--gold-2); }
.info-panel > svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 220px; overflow: auto; }
.check-grid.c4 { grid-template-columns: repeat(4, 1fr); } .check-grid.c6 { grid-template-columns: repeat(6, 1fr); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.check.off { opacity: .45; } .check.wide { padding: 2px 0; }
.legend i.ld, .ld { display: inline-block; }
.ld.f { background: var(--brand); } .ld.s { background: var(--gold-1); } .ld.m { background: var(--lv2); }
.legend .ld { width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.loadbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.loadbars li { display: grid; grid-template-columns: 130px 1fr 28px; gap: 10px; align-items: center; font-size: 14px; }
.loadbars li.me .lb-name { font-weight: 700; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar { display: flex; height: 20px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.lb-bar i { display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; min-width: 0; }
.lb-bar .ld.s { color: var(--ink); } .lb-total { text-align: right; }
.lb-bar.two { height: 22px; } .lb-bar.two i { height: 100%; }
.bdg { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.bdg.inline { margin-left: 6px; }
.room-chip { padding-right: 4px; }
.room-chip button { border: 0; background: transparent; cursor: pointer; padding: 2px; border-radius: 50%; display: grid; color: inherit; }
.room-chip button:hover { background: rgba(0,0,0,.08); } .room-chip svg { width: 14px; height: 14px; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.agenda li:first-child { border-top: 0; } .agenda li:hover { background: #fff6cc; }
.agenda li.past { opacity: .6; }
.agenda .ag-date { display: grid; justify-items: center; line-height: 1.1; }
.agenda .ag-date b { font-family: var(--font-head); font-size: 24px; } .agenda .ag-date small { color: var(--ink-2); font-size: 12px; }
.agenda .ag-main { display: grid; min-width: 0; }
.agenda.in-dialog li { grid-template-columns: 1fr auto; padding: 10px 6px; }

/* ---------- assignment tracking ---------- */
.alert-panel summary { display: flex; gap: 10px; align-items: center; padding: 12px 18px; cursor: pointer; flex-wrap: wrap; list-style: none; }
.alert-panel summary::-webkit-details-marker { display: none; }
.alert-panel summary svg { width: 20px; height: 20px; color: var(--red); }
.alert-list { list-style: none; margin: 0; padding: 4px 18px 14px; display: grid; gap: 8px; }
.alert-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; }
.alert-list svg { width: 18px; height: 18px; color: var(--red); margin-top: 2px; } .alert-list li:has(svg) svg { flex: none; }
.cw-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.cw-col { background: var(--paper-2); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 10px; border-top: 4px solid var(--line); min-height: 160px; align-content: start; transition: background .12s; }
.cw-col.over { background: var(--brand-wash); outline: 2px dashed var(--brand); outline-offset: -2px; }
.cw-col header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; font-family: var(--font-head); font-size: 17px; }
.cw-col .count { background: var(--surface); border-radius: 99px; min-width: 24px; text-align: center; font-size: 13px; font-weight: 700; padding: 1px 8px; }
.cw-col.st-planned { border-top-color: var(--ink-3); } .cw-col.st-issued { border-top-color: var(--lv1); } .cw-col.st-collected { border-top-color: var(--amber-fill); }
.cw-col.st-marking { border-top-color: var(--lv3); } .cw-col.st-released { border-top-color: var(--green); }
.col-body { display: grid; gap: 10px; } .col-empty { padding: 14px 4px; text-align: center; }
.cw-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lv, var(--ink-3)); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; cursor: pointer; box-shadow: 0 1px 0 rgba(29,29,29,.04); }
.cw-card:hover { border-color: var(--ink-3); border-left-color: var(--lv, var(--ink-3)); box-shadow: 0 2px 8px rgba(29,29,29,.10); }
.cw-card[draggable="true"] { cursor: grab; } .cw-card.dragging { opacity: .4; }
.cw-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcode { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.cw-title { font-size: 15px; line-height: 1.3; }
.cw-meta { font-size: 13px; } .due.late { color: var(--red); font-weight: 600; } .due small { color: var(--ink-2); font-weight: 400; }
.cw-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cw-foot .owner { margin-left: auto; } .cw-foot .adv { margin-left: auto; }
.cw-foot .owner + .adv { margin-left: 0; }
.st-chip.st-planned { background: var(--paper-2); } .st-chip.st-issued { background: #ebebeb; color: #555555; } .st-chip.st-collected { background: var(--amber-wash); color: #222222; }
.st-chip.st-marking { background: #ececec; color: #555555; } .st-chip.st-released { background: var(--green-wash); color: #444444; }
.wl-wrap { overflow-x: auto; }
.wl { display: grid; gap: 3px; min-width: 900px; }
.wl-row, .wl-months { display: grid; grid-template-columns: 56px repeat(53, minmax(12px, 1fr)); gap: 3px; align-items: center; }
.wl-months::before { content: ""; }
.wl-label { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .wl-label::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--lv); }
.wl-cell { height: 20px; border-radius: 3px; border: 0; padding: 0; background: var(--paper-2); }
.wl-cell.lab { background: none; height: auto; font-size: 11px; color: var(--ink-2); overflow: visible; white-space: nowrap; }
.wl-cell.n1 { background: #f5c400; } .wl-cell.n2 { background: #222222; } .wl-cell.n3 { background: var(--red); }
button.wl-cell:not(:disabled) { cursor: pointer; } button.wl-cell:not(:disabled):hover { outline: 2px solid var(--ink); }
.wl-cell.now { box-shadow: 0 0 0 2px var(--ink); }
.wl-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.wl-key.n1 { background: #f5c400; } .wl-key.n2 { background: #222222; } .wl-key.n3 { background: var(--red); }

/* ---------- calendar ---------- */
:root { --k-semester: #222222; --k-teaching: #555555; --k-exam: #555555; --k-holiday: #555555; --k-deadline: #808080; --k-meeting: #555555; --k-event: #707070; }
.k-semester { --k: var(--k-semester); } .k-teaching { --k: var(--k-teaching); } .k-exam { --k: var(--k-exam); } .k-holiday { --k: var(--k-holiday); }
.k-deadline { --k: var(--k-deadline); } .k-meeting { --k: var(--k-meeting); } .k-event { --k: var(--k-event); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; cursor: pointer; }
.kind-chip i { width: 12px; height: 12px; border-radius: 3px; background: var(--k); }
.kind-chip small { color: var(--ink-2); font-weight: 600; }
.kind-chip[aria-pressed="false"] { opacity: .5; background: var(--paper); } .kind-chip[aria-pressed="false"] i { background: transparent; border: 2px solid var(--k); }
.cal-next { list-style: none; margin: 0; padding: 0; }
.cal-next li { display: grid; grid-template-columns: 96px 1fr auto 10px; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.cal-next li:hover { background: #fff6cc; } .cal-next .when { font-weight: 700; color: var(--brand-dark); font-size: 13px; }
.cal-next .kdot, .pin { width: 10px; height: 10px; border-radius: 50%; background: var(--k); display: block; }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.mini-month { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px 12px; }
.mm-title { display: flex; align-items: baseline; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; padding: 2px 0 8px; font-family: var(--font-head); font-size: 19px; text-align: left; }
.mm-title svg { width: 16px; height: 16px; margin-left: auto; align-self: center; color: var(--ink-3); } .mm-title:hover b { text-decoration: underline; }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mgrid .wd { text-align: center; font-size: 11px; color: var(--ink-3); font-weight: 700; padding-bottom: 2px; }
.cd { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; font-size: 12px; padding: 0; cursor: pointer; color: var(--ink); }
.cd.blank { cursor: default; } .cd:not(.blank):hover { outline: 2px solid var(--ink-3); }
.cd.wkend { color: var(--ink-3); }
.cd.b-semester { background: #f5c400; } .cd.b-teaching { background: #e1e1e1; } .cd.b-exam { background: #e2e2e2; } .cd.b-holiday { background: #e2e2e2; }
.cd.today { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; }
.cd .pin { position: absolute; bottom: 2px; right: 2px; width: 6px; height: 6px; }
.month-nav { display: flex; gap: 6px; }
.mgrid.big { gap: 4px; } .mgrid.big .wd { padding: 4px; font-size: 12px; text-align: left; }
.cd.big { aspect-ratio: auto; min-height: 104px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; padding: 4px 5px; border: 1px solid var(--line-soft); border-radius: 6px; gap: 3px; background: var(--surface); }
.cd.big.b-semester { background: #fff6cc; } .cd.big.b-teaching { background: #f0f0f0; } .cd.big.b-exam { background: #f0f0f0; } .cd.big.b-holiday { background: #f0f0f0; }
.cd.big.wkend { background: var(--paper); }
.cd.big .dn { font-weight: 700; font-size: 13px; } .cd.big.today .dn { background: var(--ink); color: #fff; border-radius: 99px; padding: 0 7px; width: fit-content; }
.pills { display: grid; gap: 2px; min-width: 0; }
.pill { display: block; font-size: 11.5px; line-height: 1.3; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--k) 16%, #fff); border-left: 3px solid var(--k); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.more { font-size: 11px; color: var(--ink-2); }
.agenda li { border-left: 4px solid transparent; } .agenda li[class*="k-"] { border-left-color: var(--k); }
.kchip { background: color-mix(in srgb, var(--k) 14%, #fff); color: var(--ink); }

/* ---------- examiners ---------- */
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ex-layout > .panel:last-child { position: sticky; top: 16px; }
.ex-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(150px, 1fr)) minmax(150px, .9fr); gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-soft); align-items: start; }
.ex-row:first-child { border-top: 0; } .ex-row.mine { background: var(--brand-wash); } .ex-row.warned { box-shadow: inset 4px 0 0 var(--amber-fill); }
.ex-mod { display: grid; gap: 1px; min-width: 0; } .ex-mod b { line-height: 1.25; }
.ex-cell { display: grid; gap: 6px; min-width: 0; align-content: start; } .ex-cell .select, .ex-cell .input { width: 100%; }
.ex-lab { display: none; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.ex-ext { min-height: 34px; font-size: 13px; padding: 5px 10px; } .ex-date { min-height: 36px; padding: 5px 10px; }
.ex-end .chip { width: fit-content; } .st-toggle { border: 0; cursor: pointer; }
.me-name { font-weight: 700; } .ex-end .flags { margin-left: 0; }
.ex-sel { width: 100%; }
@media (max-width: 1280px) { .ex-layout { grid-template-columns: 1fr; } .ex-layout > .panel:last-child { position: static; } }
@media (max-width: 900px) { .ex-row { grid-template-columns: 1fr 1fr; } .ex-mod { grid-column: 1 / -1; } .ex-lab { display: block; } }
@media (max-width: 560px) { .ex-row { grid-template-columns: 1fr; } }

/* ---------- attendance ---------- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.att-card { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lv); border-radius: var(--r-lg); padding: 14px 16px; text-decoration: none; color: inherit; }
.att-card:hover { border-color: var(--ink-3); border-left-color: var(--lv); box-shadow: 0 2px 10px rgba(29,29,29,.12); }
.att-meter { display: block; height: 8px; background: var(--paper-2); border-radius: 99px; overflow: hidden; } .att-meter i { display: block; height: 100%; background: var(--green); border-radius: 99px; } .att-meter i.low { background: var(--red); }
.att-meter.sm { height: 6px; width: 90px; display: inline-block; } .att-meter i { background: var(--gold-2); }
.att-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.mark-head { flex-wrap: wrap; gap: 10px; } .sess-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mark-body { display: grid; gap: 12px; } .tally { display: flex; gap: 6px; flex-wrap: wrap; }
.mark-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mark-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.mark-row:first-child { border-top: 0; } .mark-row .mk-who { display: grid; min-width: 0; line-height: 1.25; }
.mk-group { display: inline-flex; gap: 4px; }
.mk { width: 46px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer; color: var(--ink-2); }
.mk:hover { border-color: var(--ink-3); }
.mk-P[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; } .mk-L[aria-pressed="true"] { background: var(--amber-fill); border-color: var(--amber-fill); color: var(--ink); }
.mk-A[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; } .mk-E[aria-pressed="true"] { background: var(--lv1); border-color: var(--lv1); color: #fff; }
.chip.mk-P { background: var(--green-wash); color: #444444; } .chip.mk-L { background: var(--amber-wash); color: #222222; } .chip.mk-A { background: var(--red-wash); color: #555555; } .chip.mk-E { background: #ebebeb; color: #555555; }
.mark-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sess-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; overflow-x: auto; padding-top: 22px; }
.sc-col { position: relative; flex: 1 0 34px; max-width: 70px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sc-col i { display: block; width: 100%; background: var(--gold-2); border-radius: 4px 4px 0 0; min-height: 2px; } .sc-col i.low { background: var(--red); }
.sc-val { font-size: 11px; font-weight: 700; } .sc-lab { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.pct-cell { display: flex; align-items: center; gap: 10px; } .row-low td { background: #f8f8f8; }
table.reg th.rc, table.reg td.rc { text-align: center; padding: 8px 6px; min-width: 44px; font-size: 12px; }
.mk-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.legend .mk-dot { width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.mk-dot.mk-P { background: var(--green); } .mk-dot.mk-L { background: var(--amber-fill); color: var(--ink); } .mk-dot.mk-A { background: var(--red); } .mk-dot.mk-E { background: var(--lv1); }
.thr-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .thr-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pick-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.pick-list li { border-top: 1px solid var(--line-soft); } .pick-list li:first-child { border-top: 0; }
.pick-list label { display: flex; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; } .pick-list label:hover { background: var(--paper); }
.pick-list input { width: 17px; height: 17px; accent-color: var(--brand); }
@media (max-width: 560px) { .mark-row { grid-template-columns: 1fr auto; } .mark-row .mk-group { grid-column: 1 / -1; } .mk { flex: 1; width: auto; } .sc-metrics { grid-template-columns: repeat(3, 1fr); } .check-grid.c6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- print ---------- */
@media print {
  .side, .hod-top .tools, .filters, .btn, .stat-row, .tabs { display: none !important; }
  .hod { display: block !important; } .hod-main { padding: 0 !important; max-width: none !important; }
  body { background: #fff; } .panel { box-shadow: none; border-color: #999; }
 
}
.col-body { max-height: 72vh; overflow-y: auto; padding-right: 2px; }

.ok-text svg, .bad-text svg, p.muted > svg { width: 16px; height: 16px; vertical-align: -3px; flex: none; }
details.load-details > summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; list-style: none; }
details.load-details > summary::-webkit-details-marker { display: none; }
details.load-details > summary h3 { font-size: 18px; }
details.load-details[open] > summary { border-bottom: 1px solid var(--line-soft); }
.hod-main, .hod-main > * { min-width: 0; }

/* ---------- blurred photo / video backgrounds (ready to use, not applied to any page yet) ---------- */

/* ==========================================================================
   Site header, tab bar, pop-overs (all pages)
   ========================================================================== */
.site { min-height: 100vh; }
.site-head { position: relative; z-index: 40; isolation: isolate; color: #f0f0f0; background: var(--ink); padding: 14px var(--gutter) 14px; }
.site-head > * { max-width: 1480px; margin-left: auto; margin-right: auto; }
.hd-row { display: flex; align-items: center; gap: 22px; position: relative; z-index: 5; }
.hd-row .brand img, .logo-t { height: clamp(46px, 5.4vw, 64px); width: auto; display: block; }
.hd-tag { flex: 1; min-width: 0; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: clamp(10px, .86vw, 12.5px); letter-spacing: .16em; text-transform: uppercase; color: #f5c400; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hd-tools { display: flex; align-items: center; gap: 10px; }

.hs { position: relative; display: flex; align-items: center; gap: 8px; width: clamp(220px, 25vw, 350px); height: 44px; padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #d7d7d7; }
.hs:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,196,0,.2); background: rgba(255,255,255,.14); }
.hs > svg { width: 18px; height: 18px; flex: none; }
.hs-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-size: 14px; }
.hs-input::placeholder { color: #b9b9b9; }
.hs-input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 260px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,15,15,.4); overflow: hidden; animation: rise .14s ease-out; }
.hs-results { left: 0; right: 0; min-width: 320px; margin: 0; padding: 6px; list-style: none; }
.hs-results button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; text-align: left; cursor: pointer; color: var(--ink); }
.hs-results button:hover, .hs-results button:focus-visible { background: var(--brand-wash); }
.hs-results svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.hs-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hs-sub { font-size: 12px; color: var(--ink-3); flex: none; }
.hs-all { color: var(--brand-dark) !important; font-weight: 600; font-size: 13.5px; }

.pop-wrap { position: relative; }
.hd-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background .15s, transform .15s; }
.hd-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.hd-btn svg { width: 20px; height: 20px; }
.hd-btn .dot { position: absolute; top: 9px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #f5c400; border: 2px solid #2a2a2a; }
.hd-profile { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 5px; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); max-width: 260px; }
.hd-profile:hover { background: rgba(255,255,255,.18); }
.hd-profile > svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.hd-profile .avatar { width: 34px; height: 34px; font-size: 12px; }
.hd-profile .avatar svg { width: 18px; height: 18px; }
.hp-text { display: grid; line-height: 1.15; text-align: left; min-width: 0; }
.hp-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-text small { font-size: 11.5px; color: #c4c4c4; }
.pop-head { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 1px; }
.pop-head small { color: var(--ink-3); font-size: 12px; }
.pop-list { padding: 6px; display: grid; }
.pop-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; font-weight: 500; font-size: 14px; }
.pop-item:hover { background: var(--brand-wash); }
.pop-item svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.bell-pop { width: min(380px, calc(100vw - 32px)); }
.rem-list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow: auto; }
.rem { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; line-height: 1.35; }
.rem:hover { background: var(--brand-wash); }
.rem svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-3); }
.rem.warn svg { color: var(--amber); } .rem.bad svg { color: var(--red); } .rem.info svg { color: var(--lv2); }

/* ---------- the tab bar ---------- */
.tabbar { margin-top: 14px; }
.tabbar-in { display: flex; gap: 4px; padding: 6px; border-radius: 18px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.tabbar-in::-webkit-scrollbar { display: none; }
.tb { --tc: var(--accent); position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 9px 10px 7px; border-radius: 13px;
  color: #dbdbdb; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .18s, color .18s, transform .18s; }
.tb { --tc: #fff; }
.tb[aria-current="page"] { --tc: #f5c400; }
.tb-ic { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 38%, transparent); transition: all .18s; }
.tb-ic svg { width: 16px; height: 16px; }
.tb:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
.tb:hover .tb-ic { background: color-mix(in srgb, var(--tc) 28%, transparent); }
.tb[aria-current="page"] { color: #fff; background: linear-gradient(180deg, rgba(245,196,0,.28), rgba(245,196,0,.1)); box-shadow: inset 0 0 0 1px rgba(245,196,0,.5), 0 0 24px rgba(245,196,0,.2); }
.tb[aria-current="page"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 3px; border-radius: 3px; background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.tb[aria-current="page"] .tb-ic { background: var(--tc); color: var(--ink); border-color: transparent; box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 70%, transparent); }
.subpills { margin-top: 10px; }
.subpills-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sp { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; text-decoration: none; color: #dbdbdb; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.sp svg { width: 16px; height: 16px; }
.sp:hover { background: rgba(255,255,255,.14); color: #fff; }
.sp[aria-current="page"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.site > .hod-main { margin: 0 auto; padding-top: 26px; }

/* ==========================================================================
   First page (Feedback Voice home)
   ========================================================================== */
.home { position: relative; isolation: isolate; background: var(--ink); color: #f0f0f0; min-height: 100vh; }
.home .muted { color: #b5b5b5; }
.glass { background: #0b0b0b; border: 1px solid #2c2c2c; border-radius: 14px; }
.home-main { max-width: 1480px; margin: 0 auto; padding: 4px var(--gutter) 64px; display: grid; gap: 16px; }

.selbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; overflow: hidden; }
.sb-pick { display: flex; align-items: center; gap: 4px; padding: 12px 18px; }
.sb-field { display: grid; gap: 2px; padding: 4px 8px; }
.sb-field > span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sb-select { appearance: none; min-width: 150px; height: 40px; padding: 0 38px 0 14px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
  background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c063' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  border: 1px solid rgba(255,255,255,.22); }
.sb-select:hover { border-color: var(--accent); } .sb-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-select option { color: var(--ink); background: #fff; }
.sb-sep { width: 1px; align-self: stretch; margin: 6px 10px; background: rgba(255,255,255,.2); }
.sb-strip { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 76px; overflow: hidden; }
.sb-strip p { position: relative; z-index: 2; margin: 0 24px; text-align: right; max-width: 34ch; font-family: var(--font-head); font-weight: 600; font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .2em; text-transform: uppercase; color: #f5c400; line-height: 1.35; }
.selbar-note:empty { display: none; }
.sn-q { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(245,196,0,.16); border: 1px solid rgba(245,196,0,.45); color: #f5c400; font-size: 14px; }
.sn-q svg { width: 16px; height: 16px; }
.sn-clear { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; }

.home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.gpanel { padding: 18px 18px 20px; }
.gp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.gp-head h2 { font-size: 26px; color: #fff; }
.gp-sub { color: #bebebe; font-size: 13.5px; margin-top: 3px; }
.gp-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-count { font-size: 14px; color: #d6d6d6; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.gp-count b { color: var(--accent); font-size: 17px; font-family: var(--font-head); margin-right: 2px; }
.gp-hint { font-size: 13px; color: #b9b9b9; margin: 4px 0 12px; }
.gp-empty { grid-column: 1 / -1; color: #b9b9b9; padding: 14px 4px; }
.year-pick.on-dark { color: #d6d6d6; font-size: 13px; }
.year-pick.on-dark .select { background-color: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); min-height: 34px; height: 34px; font-size: 13.5px; }
.year-pick.on-dark .select option { color: var(--ink); }

.lec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.lec { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; min-height: 52px; border-radius: 12px; cursor: pointer; text-align: left; color: #f0f0f0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .15s, border-color .15s, transform .15s; }
.lec:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.lec-ic { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .03em;
  color: var(--accent); background: rgba(245,196,0,.12); border: 1.5px solid rgba(245,196,0,.7); }
.lec-nm { font-size: 13.5px; font-weight: 600; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.lec.on { background: linear-gradient(180deg, rgba(245,196,0,.3), rgba(245,196,0,.14)); border-color: var(--accent); box-shadow: 0 0 22px rgba(245,196,0,.25); }
.lec.on .lec-ic { background: var(--accent); color: var(--ink); }
.lec-tick { position: absolute; top: 5px; right: 6px; width: 16px; height: 16px; color: var(--accent); }
.lec-tick svg { width: 16px; height: 16px; }

.mod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.mrow { --lc: var(--lv1); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 8px 12px 8px 8px; border-radius: 14px; position: relative;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: background .15s, border-color .15s; }
.mrow.lv-2 { --lc: var(--lv2); } .mrow.lv-3 { --lc: #b5b5b5; } .mrow.lv-4 { --lc: #989898; }
.mrow:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.mrow.mine { border-color: rgba(245,196,0,.55); }
.mrow-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; cursor: pointer; border-radius: 10px; }
.mthumb { width: 86px; height: 62px; border-radius: 9px; object-fit: cover; flex: none; border: 1px solid rgba(255,255,255,.18); background: var(--navy-2); }
.mtext { display: grid; gap: 3px; min-width: 0; }
.mcode-line { display: flex; gap: 8px; align-items: center; }
.mcode-t { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: #fff; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--lc) 55%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 80%, #fff 10%); }
.msem { font-size: 11.5px; color: #b9b9b9; }
.mtitle { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mchip { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.1); color: #dbdbdb; border: 1px solid rgba(255,255,255,.14); }
.mchip svg { width: 11px; height: 11px; }
.mchip.teach { background: rgba(245,196,0,.2); color: #f5c400; border-color: rgba(245,196,0,.5); }
.mchip.lock, .mchip.ok { background: rgba(147,147,147,.18); color: #d8d8d8; border-color: rgba(147,147,147,.5); }
.mchip.draft { background: rgba(245,196,0,.16); color: #f5c400; border-color: rgba(245,196,0,.4); }
.go { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--accent); background: rgba(245,196,0,.1); border: 1.5px solid rgba(245,196,0,.75); transition: all .15s; }
.go svg { width: 19px; height: 19px; }
.go:hover, .mrow:hover .go { background: var(--accent); color: var(--ink); box-shadow: 0 0 18px rgba(245,196,0,.5); }
.nudge { animation: nudge 1.1s ease-out 1; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(245,196,0,.9); } 100% { box-shadow: 0 0 0 26px rgba(245,196,0,0); } }

/* the pop-up that offers the two kinds of feedback */
.dlg-opts { width: min(640px, 100%); }
.opts { display: grid; gap: 12px; }
.opt { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 14px; align-items: center; text-align: left; padding: 16px 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; width: 100%; }
.opt:hover { border-color: var(--brand); box-shadow: 0 6px 22px rgba(29,29,29,.12); transform: translateY(-1px); }
.opt-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
.opt-ic svg { width: 24px; height: 24px; }
.opt.is-locked .opt-ic { background: var(--green-wash); color: var(--green); }
.opt-tx { display: grid; gap: 4px; min-width: 0; }
.opt-tx b { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.opt-tx > span:nth-child(2) { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.opt-go { color: var(--ink-3); } .opt-go svg { width: 22px; height: 22px; }
.opt-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.opt-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.opt-st.submitted { color: var(--green); } .opt-st.submitted::before { background: var(--green); }
.opt-st.draft { color: var(--amber); } .opt-st.draft::before { background: var(--amber-fill); }
.opts .team { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); }
.team-h { font-weight: 600; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; }
.team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team li { display: flex; align-items: center; gap: 10px; }
.team-nm { flex: 1; min-width: 0; font-size: 14px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }

/* login on the blurred background */
.login-wrap { background: var(--ink); }
.login-logo { background: var(--ink); border-radius: 10px; padding: 8px 10px; margin: -6px -6px 18px; }
.login-logo img { width: 100%; height: auto; }
.login.panel { background: rgba(255,255,255,.94); }

/* locked module form */
.lock-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: var(--green-wash); border: 1px solid #c9c9c9; margin-bottom: 18px; }
.lock-banner > svg { width: 26px; height: 26px; color: var(--green); flex: none; margin-top: 2px; }
.lock-banner b { font-family: var(--font-head); font-size: 19px; }
.lock-banner p { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.ro-block { display: grid; gap: 6px; margin-bottom: 18px; }
.ro-block h3 { font-size: 18px; }
.ro-text { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; line-height: 1.55; }
.flow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; font-size: 13px; color: var(--ink-2); }
.flow span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: var(--brand-wash); font-weight: 600; }
.flow svg { width: 14px; height: 14px; color: var(--ink-3); }

/* ---------- small screens ---------- */
@media (max-width: 1180px) { .home-grid { grid-template-columns: 1fr; } .hd-tag { display: none; } .hd-row { justify-content: space-between; } }
@media (max-width: 900px) {
  .hd-row { flex-wrap: wrap; gap: 10px 10px; }
  .hd-tools { display: contents; }
  .hs { order: 3; flex-basis: 100%; width: 100%; }
  .pop-wrap:has(.hd-btn) { margin-left: auto; }
  .hp-text, .hd-profile > svg { display: none; }
  .hd-profile { padding: 0 5px; }
  .selbar { grid-template-columns: 1fr; }
  .sb-strip { min-height: 64px; }
  .sb-strip p { text-align: left; margin: 0 16px; font-size: 11.5px; letter-spacing: .14em; }
  .tb { padding: 8px 12px 10px 8px; font-size: 14px; }
}
@media (max-width: 560px) {
  .sb-pick { flex-wrap: wrap; padding: 10px 12px; } .sb-field { flex: 1; } .sb-select { width: 100%; min-width: 0; } .sb-sep { display: none; }
  .mod-list { grid-template-columns: 1fr; } .lec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mthumb { width: 70px; height: 54px; }
  .opt { grid-template-columns: 44px minmax(0, 1fr); } .opt-go { display: none; } .opt-ic { width: 44px; height: 44px; }
  .gpanel { padding: 14px 12px 16px; } .gp-head h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } .tb, .lec, .hd-btn { transition: none; } }
@media print { .site-head { display: none; } }

.tab-cap { display: none; }
@media (max-width: 640px) {
  .tabbar-in { gap: 2px; padding: 5px; }
  .tb { flex: 1 1 0; min-width: 0; padding: 7px 4px 9px; justify-content: center; }
  .tb-tx { display: none; }
  .tb[aria-current="page"]::after { left: 26%; right: 26%; }
  .tab-cap { display: block; margin-top: 8px; text-align: center; font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: #f5c400; }
}

/* ---------- monochrome: black, white and yellow only ---------- */
.mthumb, .pop-thumb { filter: grayscale(1); }
.band-good { --c: #555; } .band-mixed { --c: #a6a6a6; } .band-attention { --c: #f5c400; }

/* ---------- Assignment tracking: week grid ---------- */
.at-stack { gap: 22px; }
.at-panel { overflow: hidden; }
.at-head { align-items: flex-start; }
.at-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.at-view { overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--line); }
.at-sizer { position: relative; }
.at-stage { position: absolute; left: 0; top: 0; width: max-content; transform-origin: 0 0; }
.zoom-bar { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.zoom-bar .zoom-val { min-width: 74px; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.view-only { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid #000; border-left: 6px solid #f5c400; border-radius: var(--r); background: #fff; font-size: 14px; }
.view-only svg { width: 18px; height: 18px; flex: none; }
.view-only span { flex: 1 1 240px; }
.at-grid .at-date.can, .at-grid td.at-c.can { cursor: pointer; }
.at-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; background: #fff; }
.at-grid th, .at-grid td { border-right: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; padding: 0; text-align: center; background: #fff; }
.at-grid thead th { background: #fff; border-top: 1px solid #000; }
.at-grid thead tr:nth-child(1) th { height: 28px; font-family: var(--font-head); font-weight: 700; font-size: 13px; border-bottom: 2px solid #000; }
.at-grid thead tr:nth-child(3) th { height: 22px; font-weight: 600; font-size: 11px; background: #f1f1f1; }
.at-grid .at-week { border-left: 2px solid #000; }
.at-grid .at-date { width: 24px; min-width: 24px; height: 80px; padding: 4px 0; vertical-align: bottom; }
.at-grid .at-date span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; font-size: 11px; margin: 0 auto; }
.at-grid td.brk { background: repeating-linear-gradient(135deg, #cfcfcf 0 3px, #f4f4f4 3px 7px); }
.at-grid th.brk { background: #000; color: #fff; }
.at-grid th.at-week.can, .at-grid th.at-date.can { cursor: pointer; }
.at-grid th.at-week.can:hover, .at-grid th.at-date.can:hover { outline: 2px solid #f5c400; outline-offset: -2px; }
.at-grid th.at-week.brk:hover, .at-grid th.at-date.brk:hover { background: #222; }
.at-grid .today { box-shadow: inset 2px 0 0 #f5c400, inset -2px 0 0 #f5c400; }
.at-grid .at-date.today, .at-grid .at-dow.today { background: #f5c400; color: #000; }
.at-grid .at-mod, .at-grid .at-no, .at-grid .at-type { text-align: left; }
.at-grid thead .at-mod, .at-grid thead .at-no, .at-grid thead .at-type { border-bottom: 2px solid #000; text-align: center; vertical-align: middle; left: auto; z-index: 5; }
.at-grid tbody th.at-mod { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 220px; padding: 6px 10px; font-weight: 700; font-size: 12.5px; vertical-align: middle; background: #fff; border-right: 2px solid #000; }
.at-grid .at-mt { display: block; line-height: 1.25; } .at-grid .at-mod small { font-weight: 500; font-size: 10.5px; }
.at-grid td.at-no { width: 74px; min-width: 74px; font-weight: 700; text-align: center; vertical-align: middle; }
.at-grid .at-type { width: 64px; min-width: 64px; padding: 0 6px; font-weight: 600; font-size: 11px; white-space: nowrap; border-right: 2px solid #000; }
.at-grid tr.first th.at-type, .at-grid tr.first td { border-bottom-color: #e3e3e3; }
.at-grid tr.second th.at-type, .at-grid tr.second td { border-bottom: 1px solid #000; }
.at-grid td.at-c { width: 24px; min-width: 24px; height: 22px; font-weight: 700; font-size: 11px; }
.at-grid td.at-c.can:hover { outline: 2px solid #000; outline-offset: -2px; }
.at-grid td.mk-hand_in { background: #f5c400; color: #000; }
.at-grid td.mk-deadline { background: #000; color: #fff; }
.at-grid td.at-c.today:not([class*="mk-"]) { background: #fff6cc; }
.at-grid td.at-c:focus-visible { outline: 2px solid #000; outline-offset: -2px; position: relative; z-index: 1; }
.at-note { padding: 10px 16px 0; color: var(--ink-2); }
.at-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 12px 16px 16px; font-size: 13px; }
.at-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chip-warn { background: var(--brand-wash); border-color: var(--accent); color: var(--ink); }
.sw { display: inline-block; width: 22px; height: 16px; border: 1px solid #000; }
.sw-hand { background: #f5c400; } .sw-final { background: #000; } .sw-hol { background: repeating-linear-gradient(135deg, #cfcfcf 0 3px, #f4f4f4 3px 7px); border: 2px solid #000; } .sw-today { background: #fff; border: 2px solid #f5c400; }
.at-blk { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr auto; gap: 8px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.chip-x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 0 0 6px; color: var(--ink-2); }
@media (max-width: 640px) { .at-blk { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .at-grid tbody th.at-mod { min-width: 130px; } }
@media print {
  @page { size: landscape; margin: 8mm; }
  .at-stack.has-printing .at-panel:not(.printing) { display: none !important; }
  .at-stack:not(.has-printing) .at-panel { break-after: page; page-break-after: always; }
  .at-panel.printing, .at-stack:not(.has-printing) .at-panel { border: 0; box-shadow: none; break-inside: avoid; }
  .at-panel .at-tools, .view-only, .zoom-bar { display: none !important; }
  .at-view { overflow: visible; border: 0; }
  .at-grid { font-size: 9px; }
  .at-grid, .at-grid *, .at-legend, .at-legend * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .at-grid tbody th.at-mod { position: static; }
}

/* ---------- Lecture progress table ---------- */
.lp-panel { overflow: hidden; }
.lp-title { flex: 1 1 280px; min-width: 0; }
.lp-tin { width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin-left: -6px; font: 700 20px/1.2 var(--font-head); background: transparent; }
.lp-tin:hover, .lp-tin:focus { border-color: var(--line); background: #fff; }
.lp-scroll { overflow: auto; border-top: 1px solid var(--line); }
.lp-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.lp-table th, .lp-table td { border: 1px solid #000; padding: 0; background: #fff; }
.lp-h { vertical-align: bottom; font-weight: 700; background: #fff; min-width: 108px; }
.lp-h.lp-modh { min-width: 330px; }
.lp-hin { position: relative; }
.lp-hta { width: 100%; border: 0; background: transparent; resize: none; text-align: center; font: 700 13px/1.25 var(--font-body); padding: 10px 24px 6px 8px; display: block; overflow: hidden; }
.lp-hta:focus { outline: 2px solid #000; outline-offset: -2px; background: #fff6cc; }
.lp-gear { position: absolute; top: 3px; right: 3px; border: 0; background: none; cursor: pointer; width: 22px; height: 22px; padding: 2px; border-radius: 5px; color: #555; }
.lp-gear:hover { background: #f5c400; color: #000; } .lp-gear svg { width: 16px; height: 16px; }
.lp-group { background: #f5c400; font-weight: 700; text-align: center; }
.lp-gin { width: 100%; border: 0; background: transparent; text-align: center; font: 700 14px var(--font-body); padding: 7px 8px; }
.lp-gin:focus { outline: 2px solid #000; outline-offset: -2px; background: #fff; }
.lp-add-h { width: 1%; white-space: nowrap; border: 0 !important; background: transparent !important; vertical-align: bottom; padding: 0 0 4px 8px !important; }
.lp-c { height: 44px; position: relative; }
.lp-in { width: 100%; height: 100%; min-height: 42px; border: 0; padding: 6px 10px; background: transparent; font: inherit; }
.lp-c.n .lp-in { text-align: center; font-weight: 600; }
.lp-in:focus { outline: 2px solid #000; outline-offset: -2px; background: #fff6cc; }
.lp-mod .lp-in { font-weight: 700; }
.lp-c.calc { text-align: center; font-weight: 700; background: #f7f7f7; }
.lp-c.calc.pct { background: linear-gradient(90deg, #f5c400 var(--p, 0%), #fff var(--p, 0%)); }
.lp-c.calc.neg { background: #000; color: #fff; } .lp-c.calc.pos { background: #fff6cc; }
.lp-del { width: 1%; border: 0 !important; background: transparent !important; padding-left: 4px !important; }
.lp-del .btn { opacity: .45; } .lp-row:hover .lp-del .btn, .lp-del .btn:focus-visible { opacity: 1; }
.lp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.lp-tools .grow { flex: 1 1 auto; }
.lp-state.dirty { background: #f5c400; color: #000; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.lp-help { padding: 0 16px 14px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
@media print {
  .lp-panel:not(.printing) { display: none !important; }
  .lp-gear, .lp-del, .lp-add-h, .lp-tools, .lp-help, .lp-panel .at-tools { display: none !important; }
  .lp-in, .lp-hta { font-size: 11px; } .lp-table * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Year calendar (year plan) ---------- */
.yp-card { padding: 18px 20px 20px; }
.yp-sheet-head { text-align: center; margin-bottom: 16px; }
.yp-sheet-head h2 { font-style: italic; text-decoration: underline; text-underline-offset: 5px; font-size: 28px; }
.yp-sheet-head p { font-style: italic; font-weight: 700; margin-top: 8px; }
.yp-tl-wrap { overflow-x: auto; padding-bottom: 6px; }
.yp-tl { min-width: 980px; position: relative; }
.yp-axis, .yp-row { display: grid; grid-template-columns: 150px 1fr; }
.yp-lab { padding: 4px 10px 4px 0; display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 1.2; }
.yp-lab b { font-family: var(--font-head); font-size: 15px; }
.yp-track { position: relative; height: 34px; }
.yp-axis .yp-track { height: 38px; border-bottom: 2px solid #000; }
.yp-month { position: absolute; top: 0; bottom: 0; border-left: 1px solid #c4c4c4; padding: 2px 5px; font-size: 12px; font-weight: 700; }
.yp-month small { display: block; font-weight: 500; color: var(--ink-2); font-size: 10.5px; }
.yp-body { position: relative; }
.yp-row { border-bottom: 1px solid #e0e0e0; align-items: center; }
.yp-row .yp-track { height: 36px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 16 - 1px), #f0f0f0 calc(100% / 16 - 1px) calc(100% / 16)); }
.yp-seg { position: absolute; top: 6px; bottom: 6px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; overflow: hidden; border: 1px solid #000; }
.yp-seg span { white-space: nowrap; padding: 0 3px; }
.yp-seg.k-lectures, .yp-seg-sw.k-lectures { background: #000; color: #fff; }
.yp-seg.k-exam, .yp-seg-sw.k-exam { background: #f5c400; color: #000; }
.yp-seg.k-study, .yp-seg-sw.k-study { background: #6b6b6b; }
.yp-seg.k-orientation, .yp-seg-sw.k-orientation { background: #bdbdbd; color: #000; border-color: #666; }
.yp-seg.k-vacation, .yp-seg-sw.k-vacation, .yp-seg.k-break, .yp-seg-sw.k-break { background: repeating-linear-gradient(135deg, #fff 0 3px, #e2e2e2 3px 6px); border-color: #999; }
.yp-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 3px solid #f5c400; pointer-events: none; z-index: 2; }
.yp-today span { position: absolute; top: -20px; left: -22px; background: #f5c400; color: #000; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.yp-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; }
.yp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.yp-seg-sw { display: inline-block; width: 22px; height: 14px; border: 1px solid #000; border-radius: 3px; }
.yp-today-sw { display: inline-block; width: 3px; height: 16px; background: #f5c400; }
.yp-lvh { font-family: var(--font-head); font-size: 22px; text-align: center; margin-bottom: 14px; }
.yp-sems { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 26px 40px; }
.yp-sem h4 { text-decoration: underline; text-underline-offset: 4px; margin-bottom: 10px; font-size: 17px; }
.yp-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.yp-table th { text-align: left; font-weight: 500; padding: 7px 8px 7px 0; width: 36%; }
.yp-table td { padding: 7px 4px; white-space: nowrap; } .yp-table td.dash { text-align: center; width: 18px; } .yp-table td.wk { text-align: right; font-weight: 600; }
.yp-table tr { border-bottom: 1px solid #ececec; }
.yp-table tr.now { background: #fff6cc; box-shadow: inset 4px 0 0 #f5c400; } .yp-table tr.now th { font-weight: 700; padding-left: 8px; }
.yp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: #000; vertical-align: 0; border: 1px solid #000; }
.yp-table tr.k-exam .yp-dot { background: #f5c400; } .yp-table tr.k-vacation .yp-dot, .yp-table tr.k-break .yp-dot { background: #fff; } .yp-table tr.k-study .yp-dot { background: #6b6b6b; } .yp-table tr.k-orientation .yp-dot { background: #bdbdbd; }
.yp-note { font-style: italic; margin-top: 8px; font-size: 13.5px; }
.yp-res { margin-top: 10px; font-weight: 600; font-size: 14px; }
.yp-sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 24px 6px 0; font-size: 14.5px; }
@media (max-width: 640px) { .yp-sems { grid-template-columns: 1fr; } .yp-table th { width: 40%; } .yp-table td { white-space: normal; } }
@media print { .yp-tl { min-width: 0; } .yp-card { break-inside: avoid; } .yp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Timetable: level tabs and the published grids ---------- */
.lv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 2px solid #000; border-radius: 12px; background: #fff; color: #000; text-decoration: none; text-align: center; }
.lv-tab b { font-family: var(--font-head); font-size: 20px; } .lv-tab small { color: var(--ink-2); font-size: 12px; }
.lv-tab:hover { background: #f1f1f1; }
.lv-tab[aria-selected="true"] { background: #000; color: #fff; box-shadow: inset 0 -5px 0 #f5c400; } .lv-tab[aria-selected="true"] small { color: #ddd; }
.ttp-pillbar { padding: 12px 16px 0; overflow-x: auto; }
.ttp-pills { display: flex; gap: 8px; }
.ttp-pill { flex: none; border: 1px solid #000; background: #fff; border-radius: 10px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; text-align: left; }
.ttp-pill small { display: block; font-weight: 500; color: var(--ink-2); font-size: 11.5px; }
.ttp-pill[aria-pressed="true"] { background: #f5c400; }
.ttp-card .panel-body { padding: 0; }
.ttp-scroll { overflow: auto; padding: 14px 16px 18px; }
.ttp-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 12.5px; }
.ttp-table th, .ttp-table td { border: 1px solid #000; padding: 5px 6px; text-align: center; vertical-align: middle; background: #fff; line-height: 1.3; }
.ttp-table th { background: #f1f1f1; font-weight: 700; white-space: nowrap; }
.ttp-head th { background: #000; color: #fff; }
.ttp-table td.ev { background: #fff6cc; font-weight: 600; }
.ttp-table td.brk { background: repeating-linear-gradient(135deg, #e4e4e4 0 3px, #f6f6f6 3px 6px); font-weight: 600; letter-spacing: .03em; }
.ttp-table td.empty { background: #fff; }
.ttp-img { padding: 14px 16px 18px; overflow: auto; } .ttp-img img { max-width: none; width: 100%; min-width: 760px; border: 1px solid #000; }
@media (max-width: 640px) { .lv-tab b { font-size: 16px; } .lv-tab small { display: none; } }
@media print { .lv-tabs, .ttp-pillbar { display: none; } .ttp-table * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Head of Department: module list, statistics, module summary ---------- */
.hm-stats { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid #000; border-radius: 14px; background: #fff; color: #000; text-decoration: none; }
.hm-stats:hover { background: #fff6cc; } .hm-stats b { font-family: var(--font-head); font-size: 19px; } .hm-stats p { color: var(--ink-2); font-size: 13.5px; }
.hm-stats > div { flex: 1; } .hm-stats-ic { width: 42px; height: 42px; border-radius: 11px; background: #000; color: #f5c400; display: grid; place-items: center; } .hm-stats-ic svg { width: 22px; height: 22px; }
.hm-key { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; } .hm-key span { display: inline-flex; align-items: center; gap: 7px; }
.hm-sem h3 { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 12px; } .hm-sem h3 small { font: 500 13px var(--font-body); color: var(--ink-2); }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.hm-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1.5px solid #bdbdbd; border-radius: 14px; background: #fff; color: #000; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.14); border-color: #000; }
.hm-card.has { border: 2px solid #000; background: #fff6cc; box-shadow: inset 6px 0 0 #f5c400; }
.hm-card .mthumb { border-color: #000; }
.hm-main { flex: 1; min-width: 0; display: grid; gap: 4px; } .hm-main b { font-family: var(--font-head); font-size: 17px; line-height: 1.2; }
.hm-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.hm-flag { display: inline-flex; align-items: center; gap: 4px; background: #000; color: #f5c400; padding: 1px 8px 1px 5px; border-radius: 999px; font-size: 11px; } .hm-flag svg { width: 12px; height: 12px; }
.rk-table td, .rk-table th { padding: 10px 14px; } .rk-table .n { text-align: right; } .rk { width: 56px; font-family: var(--font-head); font-size: 20px; }
.rk-row { cursor: pointer; } .rk-row:hover { background: #fff6cc; }
.rk-name { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; }
.rk-score { display: flex; align-items: center; gap: 10px; } .pos-n { font-weight: 700; } .neg-n { font-weight: 700; }
.points.full li { padding: 8px 0; border-bottom: 1px solid #ececec; line-height: 1.5; } .points.full .point-by { display: block; margin-top: 2px; }
.act-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .act-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.hm-stats > svg, .hm-card > svg { width: 20px; height: 20px; flex: none; }
.hm-stats-ic svg { width: 22px; height: 22px; }
.yp, .yp > *, .at-stack > *, .lv-tabs, .ttp-card { min-width: 0; }
.yp-card { overflow: hidden; }

/* view-only versions of the editable sheets */
.lp-hview { padding: 8px 10px; font-weight: 700; font-size: 12.5px; line-height: 1.25; text-align: center; white-space: pre-line; }
.lp-view { display: block; padding: 6px 10px; font-size: 13px; }
.lp-c.n .lp-view { text-align: right; font-variant-numeric: tabular-nums; }
.lp-tview { font: 700 20px/1.2 var(--font-head); margin: 0; }

/* module page sections and the per-module performance page */
.rec-sec { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rec-sec:last-of-type { border-bottom: 0; }
.rec-sec > h4 { font-size: 16px; }
.sub-h { font-size: 14px; }
.perf-table td { vertical-align: middle; }
.perf-name { font-weight: 700; color: inherit; text-decoration: none; }
.perf-name:hover { text-decoration: underline; }
.perf-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perf-counts { display: inline-flex; gap: 10px; font-weight: 700; font-size: 13px; }
.perf-counts .pc { display: inline-flex; align-items: center; gap: 4px; } .perf-counts svg { width: 16px; height: 16px; }
.perf-years { display: flex; gap: 10px; flex-wrap: wrap; }
.perf-year { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 12px; font-size: 12.5px; background: #fff; }
.perf-year.none { background: #f4f4f4; }
.perf-band { display: grid; gap: 2px; }

/* ===== Accounts, admin console, examiner / moderator lists, student leave ===== */
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.chk input { width: 18px; height: 18px; accent-color: #000; flex: none; }
.warn-text { color: #000; font-weight: 600; }
.check-list { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 8px; align-items: flex-start; }
.check-list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.check-list li.warn-text svg { color: #000; background: var(--accent); border-radius: 50%; padding: 2px; }
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #000; font-size: 12px; font-weight: 700; }
a.tab { text-decoration: none; }

/* examiner / moderator list */
.em-sub { margin-bottom: 4px; }
.em-bar { flex-wrap: wrap; gap: 12px; }
.em-table td, .em-table th { vertical-align: top; }
.em-code { white-space: nowrap; width: 84px; }
.em-title { min-width: 170px; font-weight: 600; }
.em-off { opacity: .55; }
.em-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.em-person { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.em-pmain { display: grid; gap: 3px; min-width: 0; }
.em-det { display: grid; gap: 1px; font-size: 13px; }
.em-by { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); }
.em-by svg { width: 13px; height: 13px; }
.em-pact { display: flex; flex: none; }
.ap-pages { display: grid; gap: 18px; padding: 18px; justify-items: center; background: var(--paper-2); }
.ap-page { margin: 0; max-width: min(1100px, 100%); user-select: none; -webkit-user-select: none; }
.ap-page img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #000; cursor: zoom-in; -webkit-user-drag: none; }
.ap-page figcaption { text-align: center; padding-top: 4px; }

/* focused public pages (moderator link, student leave form): logo and content only */
.lk { min-height: 100vh; background: var(--paper-2); }
.lk-head { background: #000; color: #fff; display: flex; align-items: center; gap: 18px; padding: 14px 20px; flex-wrap: wrap; }
.lk-head h1 { color: var(--accent); font-size: 26px; line-height: 1.1; }
.lk-head .muted { color: #d8d8d8; }
.lk-head .brand { display: block; }
.lk-main { max-width: 860px; margin: 0 auto; padding: 22px 16px 60px; display: grid; gap: 16px; }
.lv-policy h2 { font-size: 22px; }
.lv-policy ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.lv-form { padding: 20px; display: grid; gap: 18px; position: relative; }
.lv-modrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.lv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lv-files li { display: flex; align-items: center; gap: 6px; }
.lv-confirm { align-items: flex-start; font-weight: 600; }
.lv-done { padding: 36px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.lv-done > svg { width: 44px; height: 44px; background: var(--accent); border-radius: 50%; padding: 8px; }
@media (max-width: 640px) { .lv-modrow { grid-template-columns: 1fr; } }

/* leave tab */
.lv-linkrow { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(220px, 2fr) auto auto; gap: 12px; align-items: center; }
.lv-linkrow > svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .lv-linkrow { grid-template-columns: 1fr; } }
.lv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lv-card { border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--r-lg); background: #fff; padding: 12px 16px; }
.lv-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.lv-who { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; }
.lv-who b { font-size: 17px; }
.lv-per { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.lv-per svg { width: 15px; height: 15px; }
.lv-side { display: flex; gap: 8px; align-items: center; }
.lv-act { width: auto; height: 40px; padding: 0 14px; gap: 6px; border: 2px solid #000; border-radius: 999px; background: #fff; font-weight: 600; white-space: nowrap; }
.lv-act.lv-yes:not(:disabled):hover { background: var(--accent); }
.lv-act.lv-no:not(:disabled):hover { background: #000; color: #fff; }
.lv-act:disabled { opacity: .35; cursor: not-allowed; }
.lv-more { margin-top: 8px; }
.lv-more summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.lv-body { display: grid; gap: 10px; padding-top: 10px; }
.lv-body h4 { font-size: 15px; margin-top: 6px; }
.lv-dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0; }
.lv-dl dt { font-weight: 700; } .lv-dl dd { margin: 0; } .lv-reason { white-space: pre-wrap; }
.lv-ev { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lv-mods td, .lv-mods th { padding: 6px 10px; text-align: left; }

/* ===== Stand-alone public pages (moderator link, student leave form) ===== */
.field { align-content: start; }
.grid-2, .grid-3 { align-items: start; }
.lk { min-height: 100vh; background: var(--paper, #f1f1f1); }
.lk-head { background: #000; color: #fff; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 4px solid var(--accent); }
.lk-head h1 { margin: 0; font-size: 22px; color: var(--accent); } .lk-head p { margin: 2px 0 0; color: #ddd; font-size: 14px; }
.lk-head .brand img, .lk-head .logo-t { height: 52px; width: auto; max-width: 100%; display: block; }
.lk-main { width: min(860px, 100%); margin: 0 auto; padding: 22px 16px 48px; display: grid; gap: 16px; align-content: start; }
.lk-main { grid-template-columns: minmax(0, 1fr); } .lk-main > * { min-width: 0; }
.login-wrap { grid-template-columns: minmax(0, 1fr); } .login { min-width: 0; } .login .seg { flex-wrap: wrap; }
@media (max-width: 520px) { .lv-form { padding: 14px; } .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ===== Student leave: status check ===== */
.lv-statusbox summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; align-items: center; gap: 8px; } .lv-statusbox summary::-webkit-details-marker { display: none; }
.lv-statusbox summary svg { width: 18px; height: 18px; }
.lv-statusform { display: grid; gap: 10px; }
.lv-status { border: 1px solid var(--line); border-left: 6px solid var(--ink-3); border-radius: var(--r-lg); background: #fff; padding: 14px 16px; display: grid; gap: 6px; }
.lv-status h3 { margin: 0; font-size: 20px; } .lv-status p { margin: 0; }
.lv-st-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.lv-st-ok { border-left-color: #000; } .lv-st-warn { border-left-color: var(--accent); background: var(--brand-wash); } .lv-st-bad { border-left-color: #666; } .lv-st-wait { border-left-color: var(--ink-3); }
.lv-st-note { padding: 8px 10px; border: 1px dashed var(--ink-3); border-radius: var(--r); background: #fff; }
.lv-code { display: grid; gap: 2px; justify-items: center; padding: 12px 22px; border: 2px solid #000; border-radius: var(--r-lg); background: var(--brand-wash); }
.lv-code b { font-family: var(--font-head); font-size: 34px; letter-spacing: .12em; }
.lv-ask { }
#st-code::placeholder { text-transform: none; }

.lv-side { flex-wrap: wrap; justify-content: flex-end; }
.lv-act.lv-ask:not(:disabled):hover { background: var(--brand-wash); border-color: var(--accent); }

/* ===== accounts (October 2026) ===== */
.seg-wrap { flex-wrap: wrap; }
.seg-wrap button { white-space: nowrap; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 700; }

/* ===== Student leave portal (October 2026): policy on the left, application on the right ===== */
.lk-main.lv-formwrap { width: min(1180px, 100%); }
.lv-titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.lv-titlebar h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; }
.lv-titlebar p { margin: 4px 0 0; }
.lv-checkbtn { border: 2px solid #000; background: var(--accent); color: #000; font-weight: 700; }
.lv-checkbtn:hover { background: #000; color: var(--accent); }
.lv-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.lv-cols > * { min-width: 0; }
.lv-policy { background: #000; color: #fff; border-radius: var(--r-lg); border-top: 6px solid var(--accent); padding: 20px 20px 22px; display: grid; gap: 14px; position: sticky; top: 12px; }
.lv-policy h2 { color: var(--accent); font-size: 22px; line-height: 1.15; margin: 0; }
.lv-policy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lv-policy li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--accent); }
.lv-policy li b { color: var(--accent); font-size: 14px; letter-spacing: .02em; }
.lv-policy li span { color: #f1f1f1; font-size: 15px; line-height: 1.45; }
.lv-apply { min-width: 0; }
.lv-apply .lv-form { padding: 0; }
.lv-apply .panel-body { display: grid; }
.lv-dateadd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lv-dateadd .input { max-width: 220px; }
.lv-dates { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lv-dates li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid #000; border-left: 6px solid var(--accent); border-radius: var(--r); background: #fff; font-weight: 600; }
.lv-dates li span { flex: 1; }
@media (max-width: 860px) { .lv-cols { grid-template-columns: minmax(0, 1fr); } .lv-policy { position: static; } }

/* phone fixes: form fields and the examiner tabs never push the page wider than the screen */
.lv-form .field, .lv-form .input, .lv-form .select, .lv-form .textarea { min-width: 0; max-width: 100%; }
.lv-st-note { margin: 6px 0 0; padding: 8px 10px; background: #fff; border-left: 4px solid #000; border-radius: 4px; }
.em-sub { flex-wrap: wrap; max-width: 100%; }
.tabs { max-width: 100%; overflow-x: auto; }
.view-only { max-width: 100%; box-sizing: border-box; }
.view-only span { min-width: 0; }
.stack > *, .panel-body > * { min-width: 0; }
input[type=file] { max-width: 100%; box-sizing: border-box; }

/* leave form: small icons in the day and file lists, coordinator / HoD cards */
.lv-dates li svg, .lv-files li svg { width: 18px; height: 18px; flex: none; }
.lv-dates .btn-icon svg { width: 16px; height: 16px; }
.lv-files li { flex-wrap: wrap; }
.lv-side { flex-wrap: wrap; }
.lv-ev { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .lv-ev svg { width: 16px; height: 16px; }

/* lecture progress: the rows a lecturer may fill in */
.lp-mine td:first-child { box-shadow: inset 5px 0 0 var(--accent); }
.lp-mine .lp-in { background: #fffbe8; border: 1px solid #000; }

/* ===== Year calendar studio: the chart on the left, the calendar assistant on the right ===== */
.sc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.sc > * { min-width: 0; }
.sc-main { display: grid; gap: 14px; }
.sc-controls { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; }
.sc-left, .sc-right { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.sc-right { gap: 10px; }
.sc-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; font-weight: 700; margin-right: 4px; }
.sc-chip, .sc-btn { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid #3a3a3a; background: #111; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.sc-chip:hover, .sc-btn:hover { border-color: #8a8a8a; }
.sc-chip[aria-pressed="true"], .sc-primary { background: var(--accent); border-color: var(--accent); color: #000; }
.sc-btn:disabled { opacity: .4; cursor: default; }
.sc-btn svg { width: 16px; height: 16px; flex: none; }
.sc-chip:focus-visible, .sc-btn:focus-visible, .sc-send:focus-visible, .sc-link:focus-visible, .sc-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sc-chart { background: #fff; border-radius: 10px; padding: 10px 8px; overflow-x: auto; }
.sc-svg svg { display: block; width: 100%; height: auto; }
.sc-svg .sc-bar:hover rect { stroke-width: 2.2; }
.sc-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: #333; padding: 28px; }
.sc-empty svg { width: 34px; height: 34px; } .sc-empty h3, .sc-empty p { margin: 0; } .sc-empty p { max-width: 460px; color: #555; }
.sc-caption { color: #a8a8a8; font-size: 13px; margin: 0; }
.sc-chat { background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; color: #1a1a1a; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; height: calc(100vh - 24px); min-height: 520px; position: sticky; top: 12px; overflow: hidden; }
.sc-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e3e3e3; }
.sc-chat-head h3 { margin: 0; font-size: 18px; color: #1a1a1a; }
.sc-link { background: none; border: 0; color: #4a4a4a; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; } .sc-link:hover { color: #000; }
.sc-msgs { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #b3b3b3 #f2f2f2; background: #fff; }
.sc-msgs::-webkit-scrollbar { width: 10px; } .sc-msgs::-webkit-scrollbar-track { background: #f2f2f2; } .sc-msgs::-webkit-scrollbar-thumb { background: #b3b3b3; border-radius: 6px; border: 2px solid #f2f2f2; } .sc-msgs::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
.sc-msg { display: flex; } .sc-msg.me { justify-content: flex-end; }
.sc-bub { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-msg.me .sc-bub { background: var(--accent); color: #111; border-bottom-right-radius: 3px; }
.sc-msg.ai .sc-bub { background: #f2f2f2; border: 1px solid #e6e6e6; color: #1a1a1a; border-bottom-left-radius: 3px; }
.sc-typing { display: flex; gap: 4px; padding: 12px 14px; } .sc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a8a8a; animation: sc-dot 1s infinite ease-in-out; } .sc-typing i:nth-child(2) { animation-delay: .15s; } .sc-typing i:nth-child(3) { animation-delay: .3s; }
.sc-hint { margin: 0; color: #4a4a4a; font-size: 13.5px; line-height: 1.5; }
.sc-note { margin: 0 14px 8px; padding: 9px 12px; border-radius: 8px; background: #fff8dc; border: 1px solid #e3c84a; color: #5a4700; font-size: 13px; }
.sc-compose { padding: 12px 14px 14px; border-top: 1px solid #e3e3e3; display: grid; gap: 6px; }
.sc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.sc-attach { display: flex; align-self: end; }
.sc-input { resize: none; min-height: 44px; box-sizing: border-box; overflow-y: hidden; padding: 11px 12px; border-radius: 8px; border: 1px solid #bdbdbd; background: #fff; color: #111; font: inherit; font-size: 14px; line-height: 20px; }
.sc-input::placeholder { color: #666; }
.sc-send { box-sizing: border-box; height: 44px; align-self: end; border: 0; border-radius: 8px; background: var(--accent); color: #000; font: inherit; font-weight: 700; font-size: 14px; padding: 0 16px; cursor: pointer; flex: none; } .sc-send:disabled { opacity: .5; cursor: default; }
.sc-row-sub { display: flex; justify-content: space-between; gap: 8px; min-height: 18px; font-size: 12px; color: #555; }
.sc-file { display: inline-flex; align-items: center; gap: 6px; background: #f2f2f2; border: 1px solid #cfcfcf; border-radius: 99px; padding: 2px 4px 2px 10px; color: #111; max-width: 100%; overflow-wrap: anywhere; } .sc-file svg { width: 14px; height: 14px; flex: none; }
.sc-x { background: none; border: 0; color: #555; cursor: pointer; padding: 3px; display: inline-flex; } .sc-x:hover { color: #000; } .sc-x svg { width: 13px; height: 13px; }
.sc-viewer { padding: 18px; display: grid; gap: 14px; align-content: start; color: #333; font-size: 14px; line-height: 1.5; } .sc-viewer p { margin: 0; }
@media (max-width: 1100px) { .sc { grid-template-columns: minmax(0, 1fr); } .sc-chat { position: static; width: 100%; height: 80vh; min-height: 420px; } }
.sc-limit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid #e3e3e3; font-size: 12.5px; color: #444; }
.sc-lim { width: 76px; margin-left: 6px; padding: 4px 6px; border-radius: 6px; border: 1px solid #bdbdbd; background: #fff; color: #111; font: inherit; }
@media (max-width: 640px) { .sc-controls, .sc-left, .sc-right { gap: 8px 12px; } .sc-chip, .sc-btn { padding: 0 12px; min-height: 40px; } .sc-row { grid-template-columns: minmax(0, 1fr) auto; } .sc-attach { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .sc-typing i { animation: none; } }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-svg svg { min-width: 900px; }
@keyframes sc-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ===== Administrator > Data ===== */
.dd { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.dd-main { min-width: 0; }
.dd-side { display: grid; gap: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.dd-group { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.dd-group h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.dd-kind { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.dd-kind:hover { background: var(--paper); }
.dd-kind[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dd-kind b { font-size: 12px; opacity: .8; }
.dd-filters { align-items: center; }
.dd-bar { align-items: center; }
.dd-table td, .dd-table th { white-space: nowrap; vertical-align: top; }
.dd-table td.dd-long { white-space: normal; min-width: 200px; max-width: 320px; overflow-wrap: anywhere; }
.dd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.dd-form .field { margin: 0; }
.dd-wide { grid-column: 1 / -1; }
.dd-json { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.dd-lines { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 1000px) { .dd { grid-template-columns: minmax(0, 1fr); } .dd-side { position: static; max-height: none; } .dd-form { grid-template-columns: minmax(0, 1fr); } }

.sc-chat .sc-btn, .sc-chat .sc-chip { background: #fff; border-color: #bdbdbd; color: #111; }
.sc-chat .sc-btn:hover, .sc-chat .sc-chip:hover { border-color: #111; }
.sc-chat .sc-attach .sc-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; flex: none; }
.sc-chat .sc-attach .sc-btn svg { width: 18px; height: 18px; }
.sc-chat .sc-primary { background: var(--accent); border-color: var(--accent); }
.sc-chat :focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.dialog.dd-xl { width: min(1180px, 100%); }
.dd-edit input.input, .dd-edit select.select { min-width: 0; width: 100%; min-height: 36px; padding: 0 8px; font-size: 13.5px; }
.dd-edit td, .dd-edit th { vertical-align: middle; white-space: nowrap; padding: 4px; }
.dd-edit td:nth-child(3) { min-width: 220px; }
.dd-weeks { white-space: nowrap; color: var(--ink-2); }
.dd-edit td:nth-child(1) { min-width: 104px; } .dd-edit td:nth-child(2) { min-width: 132px; } .dd-edit td:nth-child(4) { min-width: 132px; } .dd-edit td input[type=date] { min-width: 150px; }