:root {
    color-scheme: light;
    --ink: #30203b;
    --muted: #7d7185;
    --line: #eee5f3;
    --paper: #ffffff;
    --canvas: #faf7fc;
    --forest: #4b0876;
    --forest-light: #641099;
    --mint: #c8a6e0;
    --coral: #d76b8a;
    --yellow: #d7a83b;
    --blue: #6f9eb4;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 25px 16px 15px; color: #edf5f0; background: var(--forest); }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 7px 20px; }
.brand-logo { width: 100%; max-width: 190px; height: 90px; object-fit: contain; object-position: left center; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: #e5c2ff; color: var(--forest); font-size: 21px; font-weight: 700; }
.brand-copy, .sidebar-footer > span:last-child { display: grid; gap: 3px; }
.brand-copy strong { font-size: 17px; }
.brand-copy small, .sidebar-footer small { color: #a8c1b6; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0; }
.workspace-label { display: flex; align-items: center; gap: 8px; padding: 10px 9px; border-top: 1px solid #ffffff1b; border-bottom: 1px solid #ffffff1b; color: #dfc7ed; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #e5c2ff; box-shadow: 0 0 0 3px #e5c2ff20; }
.side-nav { flex: 1; padding-top: 7px; }
.nav-group { margin-top: 4px; }
.nav-heading { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #d8bce8; font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-align: left; text-transform: uppercase; cursor: pointer; transition: background .18s ease, color .18s ease; }
.nav-heading:hover { background: #ffffff12; color: #ffffff; }
.nav-caret { width: 8px; height: 8px; flex: 0 0 auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .18s ease; }
.nav-heading[aria-expanded="true"] .nav-caret { transform: rotate(225deg); }
.nav-items { padding-bottom: 3px; }
.nav-link { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 6px 13px; border-radius: 5px; color: #e2ede7; font-size: 15px; transition: background .18s ease, color .18s ease; }
.nav-link:hover { background: #ffffff12; }
.nav-link.is-active { background: #ffffff18; color: #ffffff; }
.nav-link.is-active::before { content: ''; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 3px; background: #e5c2ff; }
.nav-link small { color: #cfb5df; font-size: 12px; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 14px 8px 3px; border-top: 1px solid #ffffff1b; }
.sidebar-footer strong { font-size: 13px; font-weight: 500; }
.footer-mark { display: grid; place-items: center; width: 35px; height: 25px; border: 1px solid #ffffff3b; border-radius: 4px; color: #e5c2ff; font-family: 'IBM Plex Mono', monospace; font-size: 9px; }
.main-panel { min-width: 0; }
.topbar { height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid var(--line); background: #ffffffc9; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #8b9791; font-size: 13px; }
.breadcrumb b { color: #c1cbc5; font-weight: 400; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.topbar-meta { display: flex; align-items: center; gap: 12px; }
.topbar-user { max-width: 180px; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-meta form { margin: 0; }
.logout-button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--forest); font: inherit; font-size: 12px; cursor: pointer; }
.logout-button:hover { background: #f7effb; }
.topbar-date { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.user-chip { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #e4eee8; color: var(--forest); font-size: 12px; font-weight: 700; }
.page-content { width: 100%; margin: 0; padding: 26px 34px 34px; }
.institution-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; padding: 17px 38px 22px; border-top: 1px solid var(--line); background: #fff; }
.institution-copy { display: grid; gap: 4px; margin-right: auto; }
.institution-copy strong { color: var(--ink); font-size: 13px; }
.institution-copy span, .institution-footer > a { color: var(--muted); font-size: 12px; line-height: 1.35; }
.institution-footer > a:hover { color: var(--forest); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; animation: rise-in .4s ease both; }
.eyebrow { margin: 0 0 6px; color: #77867e; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
h1, h2, p { letter-spacing: 0; }
.page-heading h1 { margin: 0; color: var(--ink); font-size: 36px; font-weight: 600; line-height: 1.12; }
.page-lede { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 5px; font-size: 16px; font-weight: 600; white-space: nowrap; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--forest); color: white; }
.button-primary:hover { background: var(--forest-light); }
.button-primary > span { color: #e5c2ff; font-size: 17px; font-weight: 400; }
.button-secondary { border-color: var(--line); background: var(--paper); color: var(--ink); }
.welcome-band { position: relative; min-height: 158px; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; padding: 21px 25px; border-radius: 6px; background-color: #f0e4f7; background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, #6d288d12 28px), repeating-linear-gradient(90deg, transparent, transparent 27px, #6d288d12 28px); animation: rise-in .45s .04s ease both; }
.welcome-band::after { content: ''; position: absolute; right: 28%; top: -105px; width: 245px; height: 245px; border: 1px solid #6d288d28; border-radius: 50%; box-shadow: 0 0 0 25px #6d288d0b, 0 0 0 50px #6d288d08; pointer-events: none; }
.welcome-copy { position: relative; z-index: 1; max-width: 590px; }
.band-kicker { color: #704486; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.welcome-copy h2 { margin: 6px 0 5px; color: #4b0876; font-size: 33px; font-weight: 600; line-height: 1.12; }
.welcome-copy p { max-width: 560px; margin: 0; color: #6c5878; font-size: 16px; line-height: 1.35; }
.band-note { position: relative; z-index: 1; width: 210px; min-width: 190px; display: grid; grid-template-columns: 29px 1fr; align-items: center; gap: 4px 10px; padding: 11px; border: 1px solid #ffffff9c; border-radius: 5px; background: #ffffff96; }
.note-number { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e5c2ff; color: var(--forest); font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.band-note > span:nth-child(2) { color: #718279; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.band-note i { grid-column: 2; width: 100%; height: 1px; background: #d5ded7; }
.band-note strong { grid-column: 2; color: var(--ink); font-size: 13px; font-weight: 600; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.metric-card { min-width: 0; display: grid; gap: 4px; padding: 12px 14px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); animation: rise-in .42s ease both; }
.metric-card:nth-child(2) { animation-delay: .04s; }.metric-card:nth-child(3) { animation-delay: .08s; }.metric-card:nth-child(4) { animation-delay: .12s; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.metric-dot { width: 8px; height: 8px; border-radius: 2px; }
.dot-mint { background: #71b896; }.dot-coral { background: var(--coral); }.dot-yellow { background: var(--yellow); }.dot-blue { background: var(--blue); }
.metric-period { overflow: hidden; color: #9aa59f; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric-value { margin-top: 2px; color: #aab5af; font-family: 'IBM Plex Mono', monospace; font-size: 27px; font-weight: 400; line-height: 1; }
.metric-label { color: var(--ink); font-size: 16px; font-weight: 600; }
.metric-caption { color: var(--muted); font-size: 14px; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(265px, .9fr); align-items: start; gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: 5px; background: var(--paper); animation: rise-in .5s .1s ease both; }
.work-panel, .setup-panel { padding: 15px 16px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 600; }
.panel-count { color: #8a9890; font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.responsibility-list { border-top: 1px solid var(--line); }
.responsibility-row { min-height: 51px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 15px; align-items: center; gap: 9px; border-bottom: 1px solid #edf0ed; transition: background .15s ease; }
.responsibility-row:hover { background: #f8faf7; }
.row-index { color: #9ba8a0; font-family: 'IBM Plex Mono', monospace; font-size: 9px; }
.row-copy { min-width: 0; display: grid; gap: 3px; }
.row-copy strong { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-copy small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.owner-tag { max-width: 180px; overflow: hidden; padding: 4px 7px; border-radius: 3px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.owner-teal { background: #e5f3ec; color: #397457; }.owner-coral { background: #fbebe7; color: #a75543; }.owner-yellow { background: #fbf3dd; color: #846826; }.owner-blue { background: #e9f1f4; color: #4d7485; }.owner-ink { background: #edf0ed; color: #53625b; }
.row-arrow { color: #9aa89f; font-size: 12px; }
.panel-footnote { margin: 8px 0 0; color: #8a9790; font-size: 12px; line-height: 1.3; }
.setup-badge { padding: 4px 7px; border-radius: 3px; background: #f5f6ef; color: #77816b; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.setup-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.setup-list li { min-height: 51px; display: grid; grid-template-columns: 27px minmax(0, 1fr) 18px; align-items: center; gap: 9px; border-top: 1px solid #edf0ed; }
.step-number { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #e3e9e2; border-radius: 50%; color: #7a8980; font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.setup-list li > span:nth-child(2) { display: grid; gap: 3px; }
.setup-list strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.setup-list small { color: var(--muted); font-size: 12px; }
.setup-list a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; color: #74857a; font-size: 12px; }
.setup-list a:hover { background: #edf4ee; color: var(--forest); }
.setup-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 4px; background: #f2f7ee; color: #627460; font-size: 11px; }
.status-dot-light { width: 6px; height: 6px; background: #8aac63; box-shadow: none; }
.module-empty { position: relative; min-height: 285px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 35px; }
.module-empty::after { content: ''; position: absolute; right: -55px; bottom: -110px; width: 280px; height: 280px; border: 1px solid #dce8dc; border-radius: 50%; box-shadow: 0 0 0 25px #f7faf6, 0 0 0 50px #edf4ed; pointer-events: none; }
.empty-mark { position: absolute; top: 24px; right: 28px; color: #d7e4da; font-family: 'IBM Plex Mono', monospace; font-size: 38px; }
.module-empty .eyebrow, .module-empty h2, .module-empty p, .module-empty .button { position: relative; z-index: 1; }
.module-empty h2 { margin: 0; font-size: 23px; font-weight: 600; }
.module-empty p:not(.eyebrow) { max-width: 450px; margin: 9px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 36px; background: var(--canvas); }
.auth-layout { width: min(100%, 1040px); min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 24px 70px #38124c12; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(28px, 6vw, 76px); }
.auth-brand { display: grid; justify-items: start; gap: 9px; margin-bottom: 52px; color: #795f86; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.auth-brand img { width: 176px; height: 88px; padding: 9px; border-radius: 4px; background: var(--forest); object-fit: contain; object-position: left center; }
.auth-heading { margin-bottom: 25px; }
.auth-heading h1 { margin: 0; color: var(--ink); font-size: 36px; font-weight: 600; }
.auth-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.auth-form { display: grid; gap: 17px; }
.auth-form .lecturer-field { gap: 7px; }
.auth-form .lecturer-field input { min-height: 48px; }
.auth-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--forest); }
.auth-form > .button { width: 100%; margin-top: 4px; }
.auth-back-link { justify-self: center; color: #76538b; font-size: 13px; }
.auth-back-link:hover { color: var(--forest); text-decoration: underline; }
.auth-aside { display: flex; flex-direction: column; justify-content: flex-end; gap: 11px; padding: 42px; background-color: var(--forest); background-image: repeating-linear-gradient(0deg, transparent, transparent 31px, #ffffff0c 32px), repeating-linear-gradient(90deg, transparent, transparent 31px, #ffffff0c 32px); color: #fff; }
.auth-aside-kicker { max-width: 360px; color: #dfc7ed; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.7; }
.auth-aside p { max-width: 360px; margin: 0; font-size: 29px; font-weight: 600; line-height: 1.2; }
.auth-aside > span:last-child { color: #eadcf1; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.lecturer-flash { margin-bottom: 14px; padding: 12px 15px; border: 1px solid #cbe7d6; border-radius: 5px; background: #eff8f2; color: #276343; font-size: 14px; }
.lecturer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.lecturer-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 68px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.lecturer-stats span { color: var(--muted); font-size: 14px; }
.lecturer-stats strong { color: var(--forest); font-family: 'IBM Plex Mono', monospace; font-size: 23px; font-weight: 500; }
.lecturer-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.lecturer-panel { overflow: hidden; }
.lecturer-filters { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.lecturer-search { flex: 1 1 280px; min-width: 180px; }
.lecturer-search input, .lecturer-status-filter input, .lecturer-status-filter select, .lecturer-field input, .lecturer-field select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #dcd2e4; border-radius: 4px; outline: none; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.lecturer-search input:focus, .lecturer-status-filter input:focus, .lecturer-status-filter select:focus, .lecturer-field input:focus, .lecturer-field select:focus { border-color: #8e53aa; box-shadow: 0 0 0 3px #8e53aa1c; }
.lecturer-search input::placeholder { color: #9b91a1; }
.lecturer-status-filter { flex: 0 1 205px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lecturer-review-filter { flex: 0 1 190px; }
.lecturer-filters .button { min-height: 43px; }
.filter-reset { padding: 8px 5px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.filter-reset:hover, .lecturer-actions a:hover, .lecturer-actions button:hover { color: var(--forest-light); }
.lecturer-table-wrap { width: 100%; overflow-x: auto; }
.lecturer-table { width: 100%; min-width: 1030px; border-collapse: collapse; text-align: left; }
.lecturer-table th { padding: 13px 15px; border-bottom: 1px solid var(--line); background: #fcfaff; color: #766880; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; white-space: nowrap; }
.lecturer-table td { padding: 14px 15px; border-bottom: 1px solid #f0ebf3; color: var(--ink); font-size: 14px; vertical-align: middle; }
.lecturer-table tbody tr:last-child td { border-bottom: 0; }
.lecturer-code { color: #694581; font-family: 'IBM Plex Mono', monospace; font-size: 13px; white-space: nowrap; }
.lecturer-name, .lecturer-title { display: block; }
.lecturer-name { font-size: 15px; font-weight: 600; }
.lecturer-title { margin-top: 3px; color: var(--muted); font-size: 12px; }
.lecturer-contact { min-width: 180px; }
.lecturer-contact a { display: block; width: fit-content; max-width: 235px; overflow: hidden; color: #684783; text-overflow: ellipsis; white-space: nowrap; }
.lecturer-contact a + a { margin-top: 4px; color: var(--muted); }
.lecturer-status { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 9px; border-radius: 3px; font-size: 12px; white-space: nowrap; }
.lecturer-status.is-active { background: #eaf5ee; color: #34724c; }
.lecturer-status.is-inactive { background: #f0edf2; color: #766b7b; }
.lecturer-status.profile-submitted { background: #fff4dc; color: #83600d; }
.lecturer-status.profile-needs_revision { background: #fff0e9; color: #a45135; }
.lecturer-status.profile-approved { background: #eaf5ee; color: #34724c; }
.lecturer-actions { display: flex; align-items: center; gap: 12px; }
.lecturer-actions a, .lecturer-actions button { padding: 4px 0; border: 0; background: transparent; color: #684783; font: inherit; font-size: 13px; cursor: pointer; }
.lecturer-actions form { margin: 0; }
.lecturer-actions button { color: #a64b61; }
.lecturer-empty { height: 145px; text-align: center !important; }
.lecturer-empty strong, .lecturer-empty span { display: block; }
.lecturer-empty strong { margin-bottom: 5px; font-size: 15px; }
.lecturer-empty span { color: var(--muted); font-size: 13px; }
.lecturer-pagination { padding: 13px 17px; border-top: 1px solid var(--line); }
.lecturer-pagination nav { display: flex; justify-content: flex-end; }
.lecturer-form-panel { width: min(100%, 980px); padding: 24px; }
.lecturer-form-section { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.lecturer-form-section h2 { margin: 0 0 15px; color: var(--forest); font-size: 19px; font-weight: 600; }
.lecturer-account-section { padding: 17px; border: 1px solid #e9dcef; border-radius: 5px; background: #fcf9fd; }
.lecturer-account-hint { margin: -7px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lecturer-final-section { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.lecturer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.lecturer-field { display: grid; align-content: start; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.lecturer-field b { color: #a64b61; }
.lecturer-field input, .lecturer-field select { min-height: 46px; font-weight: 400; }
.lecturer-field input::placeholder { color: #9b91a1; }
.sensitive-hidden { display: block; padding: 13px 12px; border: 1px dashed #d7c7e1; border-radius: 4px; background: #fcfaff; color: #766880; font-size: 13px; font-weight: 400; }
.field-error { color: #a13e53; font-size: 12px; font-weight: 400; }
.lecturer-declaration { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #e6d7ef; border-radius: 4px; background: #fbf7fd; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.45; }
.lecturer-declaration input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--forest); }
.lecturer-declaration b { color: #a64b61; }
.lecturer-document-list { display: grid; gap: 7px; margin: 14px 0 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 4px; background: #fcfaff; color: var(--ink); font-size: 13px; list-style: none; }
.lecturer-document-list small { color: var(--muted); font-size: 12px; }
.lecturer-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 19px; border-top: 1px solid var(--line); }
.lecturer-review-panel, .lecturer-history-panel { margin-top: 15px; padding: 19px 21px; }
.lecturer-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.lecturer-section-heading .eyebrow { margin-bottom: 3px; }
.lecturer-section-heading h2 { margin: 0; color: var(--ink); font-size: 19px; }
.lecturer-review-note { margin: 0 0 15px; padding: 11px 13px; background: #fff8e8; color: #755718; font-size: 14px; line-height: 1.5; }
.lecturer-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lecturer-approve-form, .lecturer-revision-form { display: grid; align-content: start; gap: 12px; }
.lecturer-revision-form { padding-left: 20px; border-left: 1px solid var(--line); }
.lecturer-approve-form > label:not(.lecturer-review-comment) { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 13px; line-height: 1.4; }
.lecturer-approve-form input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--forest); }
.lecturer-review-comment { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.lecturer-review-comment textarea { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid #dcd2e4; border-radius: 4px; color: var(--ink); font: inherit; font-size: 13px; resize: vertical; }
.lecturer-approve-form .button, .lecturer-revision-form .button { justify-self: start; }
.lecturer-verified-summary, .lecturer-history-empty { margin: 0; color: var(--muted); font-size: 13px; }
.lecturer-history-list { display: grid; gap: 0; margin: 0; padding: 0 0 0 18px; border-left: 1px solid #dccde7; list-style: none; }
.lecturer-history-list li { position: relative; padding: 0 0 18px 15px; }
.lecturer-history-list li:last-child { padding-bottom: 0; }
.lecturer-history-list li::before { position: absolute; top: 4px; left: -23px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #8e53aa; content: ''; }
.lecturer-history-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px; }
.lecturer-history-meta strong { color: var(--ink); font-size: 14px; }
.lecturer-history-meta time { color: var(--muted); font-size: 12px; }
.lecturer-history-list p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.lecturer-change-tags { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: #76538b; font-size: 12px; }
.lecturer-read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lecturer-read-panel { min-width: 0; padding: 16px 18px; }
.lecturer-read-panel .panel-heading { margin-bottom: 8px; }
.lecturer-read-panel .panel-heading h2 { font-size: 17px; }
.lecturer-detail-list { display: grid; gap: 0; margin: 0; }
.lecturer-detail-list > div { display: grid; grid-template-columns: minmax(115px, .75fr) minmax(0, 1.25fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0ebf3; }
.lecturer-detail-list > div:last-child { border-bottom: 0; }
.lecturer-detail-list dt { color: var(--muted); font-size: 13px; }
.lecturer-detail-list dd { min-width: 0; margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.lecturer-private-document { display: block; width: fit-content; padding: 8px 0; color: #684783; font-size: 13px; }
.lecturer-private-document:hover { text-decoration: underline; }
.config-departments-panel, .config-academic-panel { padding: 18px; }
.config-departments-panel { margin-bottom: 15px; }
.account-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(190px, .75fr) auto auto 1fr; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.account-filters .lecturer-field { gap: 6px; font-size: 12px; }
.account-filters .lecturer-field input, .account-filters .lecturer-field select, .account-filters .button { min-height: 40px; }
.account-clear-filter { min-height: 40px; display: inline-flex; align-items: center; color: #684783; font-size: 13px; }
.account-clear-filter:hover { text-decoration: underline; }
.account-total { justify-self: end; padding-bottom: 10px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.account-group { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.account-group summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #faf7fc; cursor: pointer; list-style: none; }
.account-group summary::-webkit-details-marker { display: none; }
.account-group summary:focus-visible { outline: 2px solid #8e53aa; outline-offset: -2px; }
.account-group-name { color: var(--ink); font-size: 14px; font-weight: 600; }
.account-group-count { min-width: 25px; padding: 3px 7px; border: 1px solid #e9dcef; border-radius: 3px; background: #fff; color: #684783; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-align: center; }
.account-group-caret { width: 8px; height: 8px; margin-left: auto; border: solid #766880; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .18s ease; }
.account-group[open] .account-group-caret { transform: rotate(225deg); }
.account-user-list { display: grid; }
.account-user-row { display: grid; grid-template-columns: minmax(220px, 1.15fr) minmax(180px, 1fr) auto; align-items: center; gap: 18px; padding: 14px 16px; border-top: 1px solid #f0ebf3; }
.account-person { min-width: 0; display: flex; align-items: center; gap: 11px; }
.account-avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #e8dced; border-radius: 50%; background: #f4edf7; color: #684783; font-size: 13px; font-weight: 700; }
.account-person-copy { min-width: 0; display: grid; gap: 3px; }
.account-person-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-person-copy small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-scope { display: grid; gap: 3px; color: var(--ink); font-size: 12px; }
.account-scope small, .account-scope-empty { color: var(--muted); font-size: 11px; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.account-actions form { margin: 0; }
.account-edit-button, .account-delete-button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.account-dialog { width: min(700px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow-y: auto; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 24px 70px #24132935; }
.account-dialog::backdrop { background: #23162c88; backdrop-filter: blur(2px); }
.account-dialog-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.account-dialog-heading .eyebrow { margin-bottom: 4px; }
.account-dialog-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.account-dialog-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.account-dialog-close:hover { background: #f8f3fa; }
.account-dialog-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 15px; padding: 21px 22px 22px; }
.account-dialog-form .lecturer-field { gap: 6px; font-size: 13px; }
.account-dialog-form .lecturer-field input, .account-dialog-form .lecturer-field select { min-height: 42px; font-size: 13px; }
.account-sensitive-toggle { display: flex; align-items: center; gap: 9px; min-height: 43px; color: var(--ink); font-size: 13px; }
.account-sensitive-toggle input { width: 16px; height: 16px; accent-color: var(--forest); }
.account-dialog-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.button-danger { border-color: #f1c9cd; background: #fff4f4; color: #963a48; cursor: pointer; }
.button-danger:hover { background: #ffe8eb; }
.account-empty-state { padding: 28px; border: 1px dashed #d9cfe0; border-radius: 5px; background: #fff; color: var(--muted); text-align: center; }
.config-add-form { display: grid; align-items: end; gap: 11px; padding: 0 0 15px; border-bottom: 1px solid var(--line); }
.config-department-form { grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.4fr) auto; }
.config-add-form .lecturer-field { gap: 6px; font-size: 13px; }
.config-add-form .lecturer-field input { min-height: 41px; }
.config-add-form .button { min-height: 41px; font-size: 13px; }
.course-add-form { grid-template-columns: minmax(115px, .7fr) minmax(190px, 1.3fr) minmax(95px, .5fr) minmax(180px, 1fr) auto; }
.course-description-field { grid-column: 1 / 5; }
.course-filters { display: flex; align-items: end; gap: 10px; padding: 15px 0; }
.course-filters .lecturer-search { flex: 1; }
.course-filters .lecturer-status-filter { width: min(210px, 30%); }
.course-filters .button { min-height: 43px; }
.course-table { min-width: 790px; }
.learner-table { min-width: 1080px; }
.course-description { display: block; max-width: 370px; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.course-pagination { padding-top: 12px; }
.course-edit-description { grid-column: 1 / -1; }
.course-edit-description textarea { width: 100%; padding: 11px 12px; border: 1px solid #dcd2e4; border-radius: 4px; color: var(--ink); font: inherit; resize: vertical; }
.course-edit-description textarea:focus { border-color: #8e53aa; outline: none; box-shadow: 0 0 0 3px #8e53aa1c; }
.course-pagination nav { display: flex; justify-content: flex-end; }
.section-add-form { grid-template-columns: minmax(205px, 1.5fr) minmax(120px, .8fr) minmax(120px, .75fr) minmax(155px, .95fr) minmax(180px, 1.25fr) minmax(105px, .65fr) auto; }
.section-schedule-group { grid-column: 1 / -1; min-width: 0; padding: 13px 0 3px; border-top: 1px solid var(--line); }
.section-schedule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.section-schedule-grid .lecturer-field { gap: 6px; font-size: 13px; }
.section-schedule-grid input, .section-schedule-grid select { min-height: 41px; }
.section-filters .lecturer-status-filter { flex: 0 1 190px; width: auto; }
.section-table { min-width: 990px; }
.course-empty-note { margin: 8px 0 15px; color: var(--muted); font-size: 14px; }
.config-table-wrap { overflow-x: auto; }
.config-table { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; }
.config-table th { padding: 12px 10px; border-bottom: 1px solid var(--line); color: #766880; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; }
.config-table td { padding: 12px 10px; border-bottom: 1px solid #f0ebf3; color: var(--ink); font-size: 13px; }
.config-table tbody tr:last-child td { border-bottom: 0; }
.config-table form, .config-option-list form { margin: 0; }
.config-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.course-actions { gap: 7px; }
.course-actions form { display: inline-flex; }
.icon-action { display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid #e7deeb; border-radius: 5px; background: #fff; color: #684783; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-action:hover, .icon-action:focus-visible { border-color: #8e53aa; background: #f7f1fa; outline: none; }
.icon-action.is-on { color: #287451; }
.icon-action.is-on svg circle { fill: currentColor; stroke: currentColor; }
.icon-action.is-danger { color: #a64b61; }
.icon-action.is-danger:hover, .icon-action.is-danger:focus-visible { border-color: #d98e9a; background: #fff4f4; }
.config-toggle { padding: 5px 0; border: 0; background: transparent; color: #684783; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.config-toggle:hover { color: var(--forest-light); text-decoration: underline; }
.config-delete { color: #a64b61; }
.learner-import-panel { margin-bottom: 15px; padding: 18px; }
.learner-import-form { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 12px; }
.learner-import-form .lecturer-field input { min-height: 43px; padding: 8px 10px; }
.learner-list-heading { margin: 16px 0 0; color: var(--ink); font-size: 18px; font-weight: 600; }
.learner-warning { display: inline-block; color: #9a5b13; font-size: 12px; font-weight: 600; }
.learner-data-ok { color: #34724c; font-size: 12px; }
.learner-import-errors { margin-bottom: 14px; padding: 10px 14px; border: 1px solid #edc5c5; border-radius: 5px; background: #fff6f5; color: #963b44; }
.learner-import-errors p { margin: 3px 0; font-size: 13px; }
.roster-table { min-width: 720px; }
.roster-checkbox { width: 17px; height: 17px; accent-color: var(--forest); }
.roster-remove { min-height: 32px; padding: 0 10px; font-size: 12px; }
.roster-search { padding: 10px 0; }
.roster-effective-date { width: min(260px, 100%); margin: 0 0 12px; }
.roster-end-date { width: 140px; min-height: 32px; margin-right: 5px; padding: 3px 6px; border: 1px solid #dcd2e4; border-radius: 4px; color: var(--ink); font: inherit; font-size: 12px; }
.roster-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.roster-footer .course-pagination { padding-top: 0; }
.session-schedule-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.session-schedule-summary > div { display: grid; gap: 4px; padding: 9px 11px; border-left: 2px solid var(--mint); background: #fbf9fc; }
.session-schedule-summary dt { color: var(--muted); font-size: 12px; }
.session-schedule-summary dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.session-create-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.session-create-form .lecturer-field { width: min(250px, 100%); }
.session-table { min-width: 760px; }
.session-open-link { min-height: 34px; padding: 0 10px; font-size: 12px; }
.attendance-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.attendance-toolbar form { margin: 0; }
.attendance-table { min-width: 900px; }
.attendance-table select { min-width: 145px; min-height: 36px; padding: 0 8px; border: 1px solid #dcd2e4; border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
.attendance-history { min-width: 150px; }
.attendance-history summary { color: #684783; font-size: 12px; cursor: pointer; }
.attendance-history small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.attendance-save-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 12px; padding-top: 14px; }
.attendance-save-row .lecturer-field { width: min(370px, 100%); margin-right: auto; }
.assessment-create-form { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(145px, .8fr) repeat(3, minmax(120px, .75fr)) auto; align-items: end; gap: 12px; }
.assessment-table, .assessment-results-table { min-width: 820px; }
.assessment-open-link { min-height: 34px; padding: 0 10px; font-size: 12px; }
.assessment-result-fields { display: flex; align-items: center; gap: 8px; }
.assessment-result-fields select, .assessment-result-fields input { min-height: 36px; padding: 0 8px; border: 1px solid #dcd2e4; border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
.assessment-result-fields select { min-width: 145px; }
.assessment-result-fields input { width: 100px; }
.assessment-save-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 12px; padding-top: 14px; }
.assessment-save-row .lecturer-field { width: min(370px, 100%); margin-right: auto; }
.today-attendance-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 15px; }
.today-attendance-summary span { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 12px; }
.today-attendance-summary strong { color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; }
.config-locked { color: var(--muted); font-size: 11px; white-space: nowrap; }
.config-academic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.config-option-form { grid-template-columns: minmax(0, 1fr) auto; }
.config-option-list { display: grid; margin: 0; padding: 0; list-style: none; }
.config-option-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 51px; border-bottom: 1px solid #f0ebf3; }
.config-option-list li:last-child { border-bottom: 0; }
.config-option-list li > span:first-child { display: grid; gap: 3px; color: var(--ink); font-size: 13px; }
.config-option-list small { color: var(--muted); font-size: 11px; }
.config-error { border-color: #f1c9cd; background: #fff4f4; color: #963a48; }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 36px; background: var(--canvas); }
.auth-layout { width: min(100%, 1040px); min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 24px 70px #38124c12; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(28px, 6vw, 76px); }
.auth-brand { display: grid; justify-items: start; gap: 9px; margin-bottom: 52px; color: #795f86; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.auth-brand img { width: 176px; height: 88px; object-fit: contain; object-position: left center; }
.auth-heading { margin-bottom: 25px; }
.auth-heading h1 { margin: 0; color: var(--ink); font-size: 36px; font-weight: 600; }
.auth-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.auth-form { display: grid; gap: 17px; }
.auth-form .lecturer-field { gap: 7px; }
.auth-form .lecturer-field input { min-height: 48px; }
.auth-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--forest); }
.auth-form > .button { width: 100%; margin-top: 4px; }
.auth-aside { display: flex; flex-direction: column; justify-content: flex-end; gap: 11px; padding: 42px; background-color: var(--forest); background-image: repeating-linear-gradient(0deg, transparent, transparent 31px, #ffffff0c 32px), repeating-linear-gradient(90deg, transparent, transparent 31px, #ffffff0c 32px); color: #fff; }
.auth-aside-kicker { max-width: 360px; color: #dfc7ed; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.7; }
.auth-aside p { max-width: 360px; margin: 0; font-size: 29px; font-weight: 600; line-height: 1.2; }
.auth-aside > span:last-child { color: #eadcf1; font-size: 14px; }
.menu-toggle, .sidebar-scrim { display: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
    .app-shell { grid-template-columns: 230px minmax(0, 1fr); }
    .page-content { padding-right: 25px; padding-left: 25px; }
    .topbar { padding-right: 25px; padding-left: 25px; }
    .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
    .setup-panel { display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 20px; }
    .setup-panel .panel-heading { align-self: start; }
    .setup-list { grid-row: span 2; grid-column: 2; }
    .setup-footer { align-self: end; }
}
@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; z-index: 12; left: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 12px 0 30px #14251e20; }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-scrim { position: fixed; z-index: 11; inset: 0; display: block; visibility: hidden; border: 0; background: #14251e70; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
    .sidebar-scrim.is-visible { visibility: visible; opacity: 1; }
    .menu-open { overflow: hidden; }
    .topbar { height: 55px; gap: 12px; padding: 0 17px; }
    .menu-toggle { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font-size: 12px; }
    .breadcrumb { flex: 1; gap: 6px; overflow: hidden; white-space: nowrap; }
    .breadcrumb span, .breadcrumb b { display: none; }
    .topbar-meta { gap: 7px; }
    .topbar-date { font-size: 11px; }
    .user-chip { width: 26px; height: 26px; }
    .topbar-user { max-width: 110px; font-size: 11px; }
    .logout-button { padding: 5px 7px; font-size: 10px; }
    .page-content { padding: 19px 16px 27px; }
    .institution-footer { align-items: flex-start; flex-direction: column; gap: 9px; padding: 17px 16px 22px; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
    .page-heading h1 { font-size: 27px; }
    .welcome-band { align-items: flex-start; flex-direction: column; padding: 21px; }
    .welcome-band::after { right: -70px; top: -85px; }
    .welcome-copy h2 { font-size: 24px; }
    .band-note { width: min(100%, 270px); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .metric-card { padding: 12px; }
    .metric-period { font-size: 11px; }
    .work-panel, .setup-panel { padding: 14px 12px; }
    .responsibility-row { grid-template-columns: 22px minmax(0, 1fr) auto 12px; gap: 6px; }
    .owner-tag { max-width: 100px; padding: 4px 5px; font-size: 11px; }
    .row-copy small { font-size: 12px; }
    .setup-panel { display: block; }
    .setup-list { display: grid; }
    .setup-footer { margin-top: 9px; }
    .module-empty { min-height: 250px; padding: 24px; }
    .lecturer-stats { gap: 7px; }
    .lecturer-stats > div { align-items: flex-start; flex-direction: column-reverse; justify-content: center; gap: 4px; min-height: 72px; padding: 9px; }
    .lecturer-stats span { font-size: 11px; }
    .lecturer-stats strong { font-size: 20px; }
    .lecturer-filters { align-items: stretch; flex-wrap: wrap; padding: 12px; }
    .lecturer-search, .lecturer-status-filter { flex: 1 1 100%; }
    .lecturer-filters .button { flex: 1; }
    .lecturer-form-panel { padding: 17px 14px; }
    .lecturer-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lecturer-form-actions { margin-top: 20px; }
    .lecturer-read-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .lecturer-read-panel { padding: 14px 12px; }
    .lecturer-detail-list > div { grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr); }
    .lecturer-page-actions { width: 100%; }
    .lecturer-page-actions .button { flex: 1; }
    .lecturer-review-panel, .lecturer-history-panel { padding: 15px 13px; }
    .lecturer-review-actions { grid-template-columns: minmax(0, 1fr); gap: 17px; }
    .lecturer-revision-form { padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
    .auth-page { padding: 14px; }
    .auth-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .auth-panel { padding: 27px 22px 30px; }
    .auth-brand { margin-bottom: 32px; }
    .auth-brand img { width: 150px; height: 72px; }
    .auth-heading h1 { font-size: 30px; }
    .auth-aside { min-height: 180px; padding: 24px; }
    .auth-aside p { font-size: 23px; }
    .config-department-form { grid-template-columns: minmax(0, 1fr); }
    .account-filters { grid-template-columns: minmax(0, 1fr); }
    .account-total { justify-self: start; padding: 0; }
    .account-user-row { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .account-actions { justify-content: flex-start; }
    .account-dialog-form { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 17px; }
    .account-dialog-actions { grid-column: auto; }
    .learner-import-form { grid-template-columns: minmax(0, 1fr); }
    .course-add-form { grid-template-columns: minmax(0, 1fr); }
    .section-add-form { grid-template-columns: minmax(0, 1fr); }
    .section-schedule-grid { grid-template-columns: minmax(0, 1fr); }
    .course-description-field { grid-column: auto; }
    .course-filters { align-items: stretch; flex-direction: column; }
    .course-filters .lecturer-status-filter { width: 100%; }
    .session-schedule-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-save-row { align-items: stretch; flex-direction: column; }
    .attendance-save-row .lecturer-field { width: 100%; }
    .assessment-create-form { grid-template-columns: minmax(0, 1fr); }
    .assessment-save-row { align-items: stretch; flex-direction: column; }
    .assessment-save-row .lecturer-field { width: 100%; }
    .config-academic-grid { grid-template-columns: minmax(0, 1fr); }
    .config-departments-panel, .config-academic-panel { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}