/* ==========================================================
   SETEC Student Records styles. Tokens follow the design system
   ("Classroom style in SETEC greens", design canvas RG_DesignSystem):
   SETEC green is the only accent; amber only for warnings and
   destructive actions. Tags 6px, inputs 8px, cards 12px, dialogs 16px,
   buttons are pills. Noto Sans + Noto Sans Khmer.
   Colors are only ever used through the variables below.
   ========================================================== */
:root {
    --bg:           #ffffff;   /* page */
    --surface:      #ffffff;   /* cards */
    --surface-2:    #f1f7f3;   /* hover, quiet fills, read-only inputs */
    --border:       #dee7e2;
    --border-strong:#c9d6cf;
    --text:         #1c2a23;
    --text-muted:   #53655c;
    --text-faint:   #95a39c;

    --primary:      #0b6e4c;   /* buttons, active states */
    --primary-hover:#0a4d37;
    --on-primary:   #ffffff;
    --tint:         #e3f2ea;   /* mint: active nav, selected, badges */
    --tint-line:    #b9dcc9;
    --tint-text:    #0b6e4c;
    --hero:         #0b6e4c;   /* section banners */
    --on-hero:      #ffffff;

    --danger:       #9a4507;   /* amber: destructive and problems */
    --danger-text:  #9a4507;
    --danger-tint:  #fcebd3;
    --warning-text: #9a4507;
    --warning-tint: #fcebd3;
    --fresh: #e6f4ec;
    --error: #c5221f;
    --error-text: #b3261e;
    --dark-chip:    #24332c;   /* "Permission" status, Admin tag */
    --focus:        0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
    --shadow-card:  0 2px 6px rgba(20, 60, 40, .12), 0 8px 24px -8px rgba(20, 60, 40, .18);
    --shadow-pop:   0 2px 6px rgba(20, 60, 40, .12), 0 16px 40px -12px rgba(20, 60, 40, .3);

    --radius:       12px;      /* cards */
    --radius-sm:    8px;       /* inputs */
    --radius-lg:    16px;      /* dialogs */

    --font: "Noto Sans", "Noto Sans Khmer", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    --topbar: 64px;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg:           #141c18;
    --surface:      #141c18;
    --surface-2:    #1d2823;
    --border:       #2a3832;
    --border-strong:#3a4a43;
    --text:         #e2ebe6;
    --text-muted:   #9db1a7;
    --text-faint:   #6b7d74;

    --primary:      #5fc79a;
    --primary-hover:#7fd6b0;
    --on-primary:   #0d2219;
    --tint:         #183a2c;
    --tint-line:    #2b5a45;
    --tint-text:    #5fc79a;
    --hero:         #0b6e4c;
    --on-hero:      #ffffff;

    --danger:       #f2a65e;
    --danger-text:  #f2a65e;
    --danger-tint:  #3a2716;
    --warning-text: #f2a65e;
    --warning-tint: #3a2716;
    --fresh: #17332a;
    --error: #f28b82;
    --error-text: #f2b8b5;
    --dark-chip:    #e2ebe6;
    --shadow-card:  0 2px 6px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .5);
    --shadow-pop:   0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p  { margin: 0; }
a  { color: var(--tint-text); text-decoration: none; }
a:hover { text-decoration: underline; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--tint-line); }
.muted { color: var(--text-muted); }
.hint { font-size: 13px; color: var(--text-muted); }
.eyebrow { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.align-end { text-align: right; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.num { font-variant-numeric: tabular-nums; }
kbd {
    font: 600 11px/1 var(--font); padding: 3px 5px; border-radius: 4px;
    border: 1px solid var(--border); color: var(--text-muted); background: var(--surface);
}
/* Phone-only elements: hidden on wider screens; on phones they keep their own display. */
@media (min-width: 861px) { .mobile-only { display: none !important; } }

/* Icons that swap with the theme (sun/moon). */
[data-theme="dark"] .icon-when-light,
[data-theme="light"] .icon-when-dark { display: none; }

/* ---------- App shell: top bar, side menu, page ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--topbar); flex: none;
    display: flex; align-items: center; gap: 8px; padding: 0 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.top-btn {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: transparent; color: var(--text-muted);
    font-size: 22px; cursor: pointer;
}
.top-btn:hover { background: var(--surface-2); text-decoration: none; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--text); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo img { width: 30px; height: 34px; object-fit: contain; }
.logo b { font-weight: 700; }
.logo span { color: var(--text-muted); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--text-muted); min-width: 0; white-space: nowrap; }
.crumb a { color: var(--text-muted); }
.crumb b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumb i { font-size: 16px; }
.admin-tag {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 4px;
    border-radius: 6px; background: var(--dark-chip); color: var(--surface); font-size: 12px; font-weight: 700;
}
.top-space { flex: 1; }
.top-tabs { display: flex; align-self: stretch; }
.top-tabs a {
    display: flex; align-items: center; padding: 0 22px;
    font-weight: 600; color: var(--text-muted);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.top-tabs a:hover { background: var(--surface-2); text-decoration: none; }
.top-tabs a.is-active { color: var(--tint-text); border-bottom-color: var(--primary); }
.avatar {
    display: grid; place-items: center; flex: none; overflow: hidden;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 72px; height: 72px; font-size: 24px; }
.top-avatar { padding: 0; margin-left: 6px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.top-avatar .avatar { width: 36px; height: 36px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 13px; }

/* Account menu (design: Admin · Switch Teaching / Admin) */
.account { position: relative; }
.account > summary { list-style: none; }
.account > summary::-webkit-details-marker { display: none; }
.account[open] .top-avatar .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.menu {
    position: absolute; z-index: 35; min-width: 260px;
    padding: 8px 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop);
    border: 1px solid var(--border);
}
.account .menu { right: 0; top: calc(100% + 6px); width: 320px; }
.menu-who { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; }
.menu-who .avatar { width: 40px; height: 40px; background: var(--primary); color: var(--on-primary); font-weight: 700; }
.menu-who b { display: block; font-size: 15px; }
.menu-who span { display: block; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.menu-head { font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 8px 16px 4px; }
.menu-item {
    display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 16px;
    border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item i { font-size: 20px; color: var(--text-muted); }
.menu-item.is-active { background: var(--tint); color: var(--tint-text); font-weight: 700; }
.menu-item.is-active i { color: var(--tint-text); }
.menu-item .menu-check { margin-left: auto; }
.menu-item.is-danger, .menu-item.is-danger i { color: var(--danger-text); }
.menu-sep { height: 1px; background: var(--border); margin: 8px 0; }

.app-body { flex: 1; display: flex; min-height: 0; }
.sidebar {
    position: sticky; top: var(--topbar); align-self: flex-start;
    width: 288px; flex: none; height: calc(100vh - var(--topbar));
    display: flex; flex-direction: column; overflow-y: auto;
    padding: 8px 12px 8px 0; border-right: 1px solid var(--border);
}
.nav { display: flex; flex-direction: column; }
.nav-item {
    display: flex; align-items: center; gap: 18px; min-height: 48px; padding: 4px 24px;
    border-radius: 0 24px 24px 0; color: var(--text); font-weight: 500;
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; }
.nav-item > i { font-size: 22px; color: var(--text-muted); flex: none; }
.nav-item.is-active { background: var(--tint); color: var(--tint-text); font-weight: 700; }
.nav-item.is-active > i { color: var(--tint-text); }
.nav-item small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.2; }
.nav-item .nav-text { min-width: 0; }
.nav-item .nav-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-time { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.nav-heading { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 14px 24px 6px; margin: 0; }
.nav-heading .num { font-weight: 500; margin-left: 6px; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 0; }
.nav-empty { padding: 2px 24px 6px; font-size: 13.5px; color: var(--text-muted); }
.nav-add { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 24px; color: var(--tint-text); font-weight: 600; font-size: 13.5px; }
.nav-add i { font-size: 18px; }
/* Round initials of a section (its banner colour) or a lecturer. */
.dot {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: -4px;
    border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
}
.dot-gray { background: #5b6a63; }
.sidebar-foot { margin-top: auto; padding-top: 8px; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-col > .flash { margin: 16px 28px 0; }
.main { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px 28px 40px; }
.main-narrow { max-width: 1080px; width: 100%; margin: 0 auto; }

/* Collapsed side menu (the ≡ button). On phones the menu opens over the page instead. */
.sidebar-collapsed .sidebar { display: none; }   /* set before paint by the head script */
.sidebar-backdrop { display: none; }

/* Section banner colours (Settings → Banner colour; design: six SETEC greens). */
.ban-0 { background-color: #0b6e4c !important; }
.ban-1 { background-color: #11744f !important; }
.ban-2 { background-color: #2e7457 !important; }
.ban-3 { background-color: #2f7d5b !important; }
.ban-4 { background-color: #155e49 !important; }
.ban-5 { background-color: #0a4d37 !important; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head h1 { display: flex; align-items: baseline; gap: 10px; }
.page-head h1 .title-count, .title-count { font-size: 18px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Buttons (pills: primary, secondary, quiet) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 20px; border-radius: 20px;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--tint-text);
    white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn i { font-size: 17px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:disabled:hover { background: var(--primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn-danger:hover { background: var(--danger); filter: brightness(.92); }
.btn-quiet { border-color: transparent; }
.btn-danger-text { color: var(--danger-text); }
.btn-primary-text { color: var(--tint-text); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 17px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; flex: none; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.icon-btn {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
    font-size: 18px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); text-decoration: none; }
.icon-btn-plain { border-color: transparent; background: transparent; color: var(--text-muted); width: 36px; height: 36px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.label { font-size: 13px; font-weight: 600; color: var(--text); }
.input {
    width: 100%; min-height: 42px; padding: 8px 12px;
    font: inherit; font-size: 15px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.input[readonly], .input:disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.input.is-invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.input.is-invalid:focus { box-shadow: inset 0 0 0 1px var(--error), 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); }
.input-mono { font-family: var(--font-mono); font-weight: 600; }
select.input { appearance: auto; }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 44px; }
.input-action {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; font-size: 18px;
}
.input-with-button { display: flex; gap: 8px; }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; color: var(--error-text); }
.field-error::before { content: "\ea05"; font-family: "tabler-icons"; font-weight: 400; font-size: 16px; line-height: 1.15; }
.form-errors { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.checkbox input, .chip-check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }

.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); font-size: 14px; cursor: pointer;
}
.chip-check:has(input:checked) { background: var(--tint); border-color: transparent; color: var(--tint-text); font-weight: 600; }

.segmented {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
    padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.segmented button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; border: 0; border-radius: 6px; background: transparent;
    font: inherit; font-size: 14px; color: var(--text-muted); cursor: pointer;
}
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--tint-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline .field-prefix { width: 96px; }
.form-inline .field-grow { flex: 1 1 260px; }
.form-inline-actions { display: flex; gap: 8px; }
.form-inline .form-errors { flex-basis: 100%; margin-top: 0; }
.form-inline-hint { flex-basis: 100%; }
.form-inline .field-prefix { width: 130px; }

/* ---------- Alerts, flash, badges ---------- */
.alert, .flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px;
}
.alert i, .flash i { font-size: 18px; line-height: 1.2; }
/* Feedback toasts (design "Feedback messages"): always the dark surface, also in dark mode. */
.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-width: 360px; max-width: 560px; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: 12px; background: #1f2933; color: #f3f5f6; font-size: 14.5px; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .12); pointer-events: auto; animation: toast-in .2s ease-out; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast-icon { font-size: 20px; flex: none; }
.toast[data-type="success"] .toast-icon { color: #4ade80; }
.toast[data-type="info"] .toast-icon { color: #93c5fd; }
.toast[data-type="warning"] .toast-icon { color: #fbbf24; }
.toast[data-type="error"] .toast-icon { color: #f87171; }
.toast-text { flex: 1; min-width: 0; }
.toast form { display: contents; }
.toast-action { border: 0; background: transparent; color: #86efac; font: inherit; font-weight: 700; font-size: 14px; height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.toast-action:hover, .toast-close:hover { background: rgba(255, 255, 255, .08); }
.toast-close { border: 0; background: transparent; color: #b6bcc2; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; font-size: 18px; }
.toast-text small { display: block; font-size: 12.5px; color: #b6bcc2; }
.toast-text small[hidden] { display: none; }
.toast[data-type="progress"] .toast-icon { color: #f3f5f6; animation: spin 1s linear infinite; }
.toast-bar.is-progress { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: toast-busy 1.2s linear infinite; }
@keyframes toast-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* A clicked button waits for the next page: a small spinner, and no second click. */
.btn.is-busy, button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > *, button.is-busy > * { visibility: hidden; }
.btn.is-busy::after, button.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--busy, #fff) transparent var(--busy, #fff) var(--busy, #fff); animation: spin .8s linear infinite; visibility: visible; }
.btn:not(.btn-primary):not(.btn-danger).is-busy { --busy: var(--primary); }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after, button.is-busy::after, .toast[data-type="progress"] .toast-icon, .toast-bar.is-progress { animation-duration: 3s; } }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .35); }
.toast :focus-visible { outline: 2px solid #f3f5f6; outline-offset: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .toasts { bottom: 84px; } .toast { min-width: 0; width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
/* What a saved action changed: a light tint and an accent bar on the left for a few seconds. */
.is-fresh { background: var(--fresh) !important; box-shadow: inset 4px 0 0 var(--primary); transition: background .3s; }
/* Something that blocks the page (offline): a slim amber banner inside the page, until fixed. */
.page-banner { display: flex; align-items: center; gap: 12px; margin: 16px 28px 0; padding: 10px 14px; border-radius: 10px; background: var(--warning-tint); color: var(--warning-text); font-size: 14px; }
.page-banner[hidden] { display: none; }
.alert-error, .flash-error { background: var(--danger-tint); color: var(--danger-text); }
.alert-info { background: var(--surface-2); color: var(--text-muted); }
.flash-success { background: var(--tint); color: var(--tint-text); }

.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-solid { background: var(--primary); color: var(--on-primary); }
.badge-green { background: var(--tint); color: var(--tint-text); }
.badge-gray  { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge-amber { background: var(--warning-tint); color: var(--warning-text); }
.badge-red   { background: var(--danger-tint); color: var(--danger-text); }

/* ---------- Cards, stats, tables ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.card-flush { padding: 4px 0; overflow-x: auto; }
.card-title { margin-bottom: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-meta { font-size: 13px; color: var(--text-muted); }
.card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px;
}
.empty { text-align: center; color: var(--text-muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 24px; }
.empty-state i { font-size: 32px; color: var(--text-faint); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.split-even { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.hero {
    background: var(--hero); color: var(--on-hero);
    border-radius: var(--radius);
    padding: 28px;
}
.hero-eyebrow { font-size: 14px; opacity: 0.85; margin-bottom: 6px; }
.hero h2 { font-size: 28px; }
.hero-sub { margin-top: 8px; opacity: 0.9; max-width: 60ch; }

.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.stat { padding: 18px 24px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; }
.stat-label { font-size: 14px; color: var(--text-muted); }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.stat-value.is-good { color: var(--tint-text); font-size: 20px; }
.stat-note { font-size: 13px; color: var(--text-muted); }

.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted);
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }
.table tr:last-child td { border-bottom: 0; }
.table th.align-end, .table td.align-end { text-align: right; }
.table tr.is-muted .person-name { color: var(--text-muted); }
.card:not(.card-flush) .table th:first-child, .card:not(.card-flush) .table td:first-child { padding-left: 0; }
.card:not(.card-flush) .table th:last-child, .card:not(.card-flush) .table td:last-child { padding-right: 0; }
.code {
    font-family: var(--font-mono); font-weight: 600; font-size: 13px;
    padding: 2px 8px; border-radius: 6px; background: var(--tint); color: var(--tint-text);
}

.person { display: flex; align-items: center; gap: 10px; }
.person-name { display: block; font-weight: 600; }
.person-meta { display: block; font-size: 13px; color: var(--text-muted); }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Temporary password shown once to the admin */
.issued {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 20px; border-radius: var(--radius);
    background: var(--tint); color: var(--text);
}
.issued > i { font-size: 22px; color: var(--tint-text); }
.issued-text { display: flex; flex-direction: column; gap: 6px; }
.issued-password { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.issued-password code {
    font-family: var(--font-mono); font-size: 18px; font-weight: 700;
    padding: 4px 12px; border-radius: var(--radius-sm); background: var(--surface);
}

/* ---------- Majors ---------- */
.major-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.major-card { display: flex; flex-direction: column; gap: 4px; }
.major-card.is-editing { border-color: var(--primary); box-shadow: var(--focus); }
.major-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.major-logo { height: 72px; width: auto; max-width: 140px; object-fit: contain; }

/* Logo tile in the add/edit form: click to choose, × to remove */
.logo-tile {
    position: relative; display: grid; place-items: center;
    width: 88px; height: 88px; padding: 6px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.logo-tile:hover { border-color: var(--primary); }
.logo-tile:focus-within { box-shadow: var(--focus); border-color: var(--primary); }
.logo-tile.is-invalid { border-color: var(--error); }
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-muted); text-align: center; }
.logo-empty i { font-size: 24px; }
.logo-pick { position: absolute; inset: 0; cursor: pointer; }
.logo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.logo-remove {
    position: absolute; top: -8px; right: -8px; z-index: 1;
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--text-muted); font-size: 14px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.logo-remove:hover { color: var(--danger-text); border-color: var(--danger); }
[hidden] { display: none !important; }
.major-prefix {
    display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 10px;
    border-radius: 10px; background: var(--tint); color: var(--tint-text);
    font-size: 20px; font-weight: 700;
}

/* ---------- Courses ---------- */
.table-clickable tbody tr { position: relative; }
.table-clickable tbody tr:hover { background: var(--surface-2); }
.table tr.is-selected { background: var(--tint); }
.code-link { font-weight: 700; color: var(--tint-text); }
/* The code link covers the whole row, so any click on the row opens it. */
.row-link::after { content: ""; position: absolute; inset: 0; }
.unit { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.stepper { display: flex; gap: 6px; }
.stepper .input { text-align: center; font-weight: 600; min-width: 0; }
.stepper .input::-webkit-inner-spin-button { display: none; }
.stepper .btn-icon { font-size: 18px; }

/* ---------- Groups (design canvas 6): cards or a list, New group / edit panel from the right ---------- */
.group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.group-card { display: flex; flex-direction: column; gap: 2px; min-height: 150px; padding: 18px 20px; color: var(--text); }
.group-card:hover, .group-row:hover { text-decoration: none; outline: 1.5px solid var(--primary); outline-offset: -1.5px; }
.group-card.is-editing { outline: 2px solid var(--primary); outline-offset: -2px; }
.group-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.group-card-title .group-major { overflow: hidden; text-overflow: ellipsis; }
.group-card-title strong { font-size: 18px; white-space: nowrap; }
.group-major { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; }
.group-term { font-size: 13px; margin: 10px 0 14px; display: flex; gap: 4px; align-items: baseline; }
.group-term .muted + b + .muted { margin-left: 8px; }
.group-card-foot {
    display: flex; align-items: flex-end; gap: 24px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.group-card-foot > div { display: flex; flex-direction: column; }
.group-card-foot .muted { font-size: 12px; }
.group-card-foot .warn-icon { margin-left: auto; }
.group-list { padding: 0; overflow: hidden; }
.group-list-head, .group-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 80px 100px 110px minmax(0, 1.2fr) 90px 90px 20px;
    gap: 16px; align-items: center; padding: 0 20px;
}
.group-list-head { height: 42px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.group-row { min-height: 50px; color: var(--text); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.group-row:last-child { border-bottom: 0; }
.group-list .align-end { text-align: right; }
.group-starts { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-auto { width: auto; }

/* Slide-in panel (New group, a group's details): over the page on the right; the dimmed page closes it. */
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 20, .32); }
.drawer {
    position: fixed; z-index: 41; top: 16px; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px));
    padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; box-shadow: var(--shadow-pop);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { font-size: 18px; }
.drawer .form-actions { margin-top: 4px; }
.drawer-section { padding-top: 16px; border-top: 1px solid var(--border); }
.drawer-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }

/* A warning icon whose message shows on hover or keyboard focus (sections and groups). */
.warn-icon { position: relative; display: inline-flex; color: var(--warning-text); font-size: 18px; cursor: help; border-radius: 50%; }
.warn-icon.is-muted { color: var(--text-muted); }
.warn-icon::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: -6px; z-index: 5;
    padding: 6px 10px; border-radius: 6px; background: var(--text); color: var(--surface);
    font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.warn-icon:hover::after, .warn-icon:focus-visible::after { opacity: 1; }
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.code-preview {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.code-preview-code { font-size: 32px; font-weight: 700; color: var(--tint-text); line-height: 1.15; }
/* Fixed heights so the form below never jumps while the preview updates. */
.code-preview [data-code-explain] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.5em; }
.code-status { font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: var(--radius-sm); min-height: 41px; transition: opacity .15s; }
.code-status:empty { visibility: hidden; }
.code-status.is-checking { opacity: 0.4; }
.code-status.is-available { color: var(--tint-text); background: var(--tint); }
.code-status.is-taken { color: var(--danger-text); background: var(--danger-tint); }

.term-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.term-row { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.term-row.is-current { border-color: var(--primary); }
.term-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.term-delete { margin-left: auto; }
.term-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.term-dates .input { min-width: 0; padding-left: 8px; padding-right: 8px; }
.term-dates button { grid-column: 1 / -1; width: 100%; }
.term-add { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.card-quiet { padding: 14px 20px; }
.card-foot-flat { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Students ---------- */
.page-actions { display: flex; align-items: center; gap: 8px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.filter-bar select.input { width: auto; max-width: 220px; }
.search-input { position: relative; flex: 1 1 200px; }
.search-input i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.search-input .input { padding-left: 36px; }
.col-num { width: 48px; font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.icon-btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* ---------- Import ---------- */
.back-link { display: inline-block; color: var(--text-muted); }
.steps { list-style: none; display: flex; gap: 20px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--text-muted); }
.steps li { display: flex; align-items: center; gap: 6px; }
.step-dot {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600;
}
.steps .is-current { color: var(--text); font-weight: 600; }
.steps .is-current .step-dot { border-color: var(--primary); color: var(--tint-text); }
.steps .is-done .step-dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 36px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2);
}
.dropzone { transition: border-color .15s, background-color .15s, transform .15s; }
.dropzone:hover, .dropzone:focus-within, .dropzone.has-file { border-color: var(--primary); }
.dropzone-icon { font-size: 36px; color: var(--tint-text); }
.dropzone-browse { color: var(--tint-text); text-decoration: underline; }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* A file is being dragged over the zone. */
.dropzone.is-dragover { border-style: solid; border-color: var(--primary); background: var(--tint); transform: scale(1.01); }
.dropzone.has-file { border-style: solid; background: var(--tint); }
.dropzone.has-error { border-color: var(--danger); }
.dropzone.has-error [data-dropzone-hint] { color: var(--danger-text); }
.table-compact td { padding: 8px 0; }
.code-cell { font-family: var(--font-mono); font-weight: 600; width: 56px; }

.import-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.import-file { display: flex; align-items: center; gap: 12px; }
.import-file > i { font-size: 28px; color: var(--tint-text); }
.import-file div { display: flex; flex-direction: column; }
.import-file .muted { font-size: 13px; }
.import-counts { display: flex; gap: 28px; margin: 0; }
.import-counts div { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.import-counts dt { font-size: 12px; color: var(--text-muted); }
.import-counts dd { margin: 0; font-size: 24px; font-weight: 700; }
.import-counts .is-good dd { color: var(--tint-text); }
.import-counts .is-warn dd { color: var(--danger-text); }

.attention-intro { margin: -8px 0 12px; font-size: 13px; }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.attention-row { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.attention-row:first-child { border-top: 0; }
.attention-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.attention-problem { font-size: 13px; color: var(--warning-text); }
.attention-fix { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; }
.attention-row:not(.is-included) .attention-fix .input { opacity: 0.6; }
.attention-row.has-error .attention-problem { color: var(--danger-text); }

.card-head-padded { padding: 14px 20px 4px; }
.existing-list { padding: 12px 20px; border-top: 1px solid var(--border); font-size: 14px; }
.existing-list summary { cursor: pointer; color: var(--text-muted); }
.existing-list ul { margin: 8px 0 0; padding-left: 20px; columns: 2; }

.action-bar {
    position: sticky; bottom: 12px; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.action-bar .muted { margin-right: auto; font-size: 13px; }

.done-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 560px; }
.done-icon { font-size: 36px; color: var(--tint-text); }
.form-actions-start { justify-content: flex-start; margin-top: 8px; }

/* ---------- Shared small bits ---------- */
.text-green { color: var(--tint-text); }
.text-warn { color: var(--warning-text); }
.narrow-card { max-width: 640px; }
.card-title-tight { margin-bottom: 4px; }
.type-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
    font-size: 12px; font-weight: 600; background: var(--tint); color: var(--tint-text);
}
.type-chip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.type-chip.is-practice { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.type-chip.is-practice::before { background: transparent; border: 1.5px solid currentColor; }
.btn-add {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 4px;
    border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--tint-text); cursor: pointer;
}

/* ---------- Rooms ---------- */
.room-name { font-family: var(--font-mono); font-weight: 700; }
.inline-rename { display: flex; gap: 6px; align-items: center; }
.inline-rename .input { width: 110px; min-height: 32px; padding: 4px 8px; }

/* ---------- No-class periods (on group terms) ---------- */
.breaks { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.break-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.break-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.break-name { white-space: nowrap; }
.break-row > .muted { min-width: 0; }
.break-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.break-mid_exams .break-dot, .break-final_exams .break-dot { background: var(--warning-text); }
.break-name { font-weight: 600; }
.break-delete { margin-left: auto; }
.break-delete .icon-btn { width: 26px; height: 26px; font-size: 14px; }
/* Stacked so it fits the narrow side column: kind (+ holiday name) / from + to / Add. */
.break-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.break-add [data-break-kind], .break-add [data-break-label] { grid-column: 1 / -1; }
.break-add button { grid-column: 1 / -1; width: 100%; }
.break-add .input { min-height: 34px; padding: 5px 8px; font-size: 13px; min-width: 0; }

/* ---------- Sections (design canvas 9, 9a): cards or a list, search, academic year ---------- */
.sections-head { align-items: center; }
.title-count { font-size: 18px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sections-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sections-tools .input { height: 44px; }
.search-box { position: relative; flex: 1 1 260px; max-width: 440px; }
.search-box > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-box .input { width: 100%; padding-left: 40px; padding-right: 40px; }
.search-box kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.search-count { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.tools-spacer { flex: 1 1 0; }
.view-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.view-switch button {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 7px;
    background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer;
}
.view-switch button[aria-pressed="true"] { background: var(--tint); color: var(--tint-text); }
html:not(.js) .view-switch, html:not(.js) .search-box { display: none; }
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.section-card { display: flex; flex-direction: column; gap: 4px; min-height: 176px; padding: 20px; color: var(--text); }
.section-card:hover, .section-row:hover { text-decoration: none; outline: 1.5px solid var(--primary); outline-offset: -1.5px; }
.section-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.section-card-title h3 { font-size: 18px; white-space: nowrap; }
.section-card-title .muted, .section-row-name strong .muted { font-weight: 500; }
.section-card-name { font-size: 13px; }
.title-pair { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.title-pair .muted { font-size: 13px; font-weight: 600; }
.section-card-title .title-pair strong { font-size: 18px; }
.slot-cols { display: flex; gap: 20px; margin-top: 14px; }
.slot-cols small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); }
.slot-cols b { font-size: 15px; }
.slot-cols > .muted { font-size: 13px; padding-top: 8px; }
.section-card-stats {
    display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 12px; align-items: end;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
}
.section-card-stats > div { display: flex; flex-direction: column; }
.section-card-stats .muted { font-size: 12px; }
.section-card-stats .align-end { align-items: flex-end; }
.section-card-stats .section-att { font-size: 16px; }
.week-bar { height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.week-bar span { display: block; height: 100%; border-radius: 2px; background: var(--primary); }
.section-row-schedule { display: flex; flex-direction: column; line-height: 1.5; white-space: nowrap; }
.section-row-schedule .day { display: inline-block; width: 36px; }
.section-list { padding: 0; overflow: hidden; }
.section-list-head, .section-row {
    display: grid; grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.3fr) 130px 90px 60px 20px;
    gap: 16px; align-items: center; padding: 0 20px;
}
.section-list-head { height: 44px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.section-row { min-height: 68px; color: var(--text); border-bottom: 1px solid var(--border); font-size: 13px; }
.section-row:last-child { border-bottom: 0; }
.section-row-name { display: flex; flex-direction: column; min-width: 0; }
.section-row-name strong { font-size: 14px; white-space: nowrap; }
.section-row-name .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-list .align-end { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip {
    font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    background: var(--tint); color: var(--tint-text);
}
.slot-chip.is-practice { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-strong); }
.slot-missing { font-size: 12px; font-weight: 600; color: var(--warning-text); background: var(--warning-tint); padding: 3px 8px; border-radius: 6px; align-self: flex-start; }

/* ---------- Section header + tabs (design page 39) ---------- */
.section-header { padding-bottom: 0; }
.section-header-top { display: flex; justify-content: space-between; gap: 16px; }
.section-header .eyebrow a { color: var(--text-muted); }
.section-meta { font-size: 13px; margin-top: 4px; }
.tabs { display: flex; gap: 22px; margin-top: 14px; overflow-x: auto; }
.tabs a, .tabs span {
    padding: 10px 0; font-size: 14px; white-space: nowrap; color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--tint-text); font-weight: 600; border-bottom-color: var(--primary); }
.tabs .is-soon { color: var(--text-faint); cursor: default; }

/* ---------- Classes list (design page 20) ---------- */
.session-list { list-style: none; margin: 0; padding: 0 0 8px; }
.session-row {
    display: grid; grid-template-columns: 32px 100px 120px 86px 44px minmax(0, 1fr) auto;
    align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 14px;
}
.session-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.session-date { font-weight: 600; }
.session-time, .session-room { font-size: 13px; }
.session-state { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.session-actions { display: flex; gap: 6px; justify-content: flex-end; }
.session-row.state-today { background: var(--tint); }
.session-row.state-cancelled .session-date, .session-row.state-cancelled .session-time { text-decoration: line-through; color: var(--text-muted); }
.session-row.state-make_up { background: color-mix(in srgb, var(--tint) 45%, transparent); }
.stats-2 { grid-template-columns: 1fr 1fr; }
.stat-value small { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.slot-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.slot-summary li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--tint); }
.slot-summary li.is-practice { background: var(--surface-2); }
.type-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tint-text); flex: none; }
.slot-summary li.is-practice .type-dot { background: transparent; border: 1.5px solid var(--text-muted); }
.section-students-note { padding: 0 20px 8px; font-size: 13px; }

/* ---------- Weekly slots editor (design page 21) ---------- */
.slot-intro { margin-bottom: 14px; font-size: 14px; }
.slot-head, .slot-row {
    display: grid; grid-template-columns: 110px 120px 120px 60px 110px 130px 34px; gap: 8px; align-items: center;
}
.slot-head { font-size: 12px; font-weight: 600; color: var(--text-muted); padding-bottom: 6px; }
.slot-row { padding: 4px 0; }
.slot-length { font-variant-numeric: tabular-nums; }
.unit-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.unit-box {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
    background: var(--surface-2); font-size: 14px;
}
.unit-box > div { display: flex; flex-direction: column; flex: 1; }
.unit-box .muted { font-size: 12px; }
.unit-box > i { font-size: 18px; }
.unit-box.is-ok { background: var(--tint); }
.unit-box.is-ok > i { color: var(--tint-text); }
.unit-box.is-off { background: var(--warning-tint); }
.unit-box.is-off > i, .unit-box.is-off strong { color: var(--warning-text); }
.unit-figure { font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-figure b { font-size: 18px; }
.slot-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; }

/* ---------- Attendance codes ---------- */
.code-pill {
    display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px;
    border-radius: 6px; font-size: 11px; font-weight: 700;
}
.code-present { background: var(--tint); color: var(--tint-text); }
.code-late { background: var(--warning-tint); color: var(--warning-text); }
.code-absent { background: var(--danger); color: #fff; }
.code-permission { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.text-danger { color: var(--danger-text); }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); }
.pill-green { background: var(--tint); color: var(--tint-text); }
.pill-red { background: var(--danger-tint); color: var(--danger-text); }

/* ---------- Take attendance: computer layout (design page 18) ---------- */
.take-page { gap: 16px; }
.take-desktop-head { display: flex; flex-direction: column; gap: 16px; }
.take-session { display: flex; flex-direction: column; gap: 14px; }
.take-picker { display: flex; align-items: flex-end; gap: 8px; }
.take-picker-field { flex: 1; max-width: 420px; }
.take-picker .icon-btn { width: 40px; height: 40px; }
.today-btn { min-height: 40px; background: var(--tint); color: var(--tint-text); border-color: transparent; }
.alert-warn { background: var(--warning-tint); color: var(--warning-text); }
.alert-warn a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.take-session-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.count-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.count-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: 13px;
}
.count-chip b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; font-size: 12px; }
.count-present b { background: var(--tint); color: var(--tint-text); }
.count-absent b { background: var(--danger); color: #fff; }
.count-permission b { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.count-late b { background: var(--warning-tint); color: var(--warning-text); }
.take-start-hint { margin-left: auto; font-size: 13px; }
.take-start-hint a { color: var(--text-muted); text-decoration: underline; }

.take-card { overflow: hidden; }
.take-head, .take-row {
    display: grid; grid-template-columns: 44px minmax(180px, 1fr) 400px minmax(160px, 0.8fr);
    align-items: center; gap: 12px; padding: 0 20px;
}
.take-head { padding-top: 12px; padding-bottom: 10px; font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.take-list { list-style: none; margin: 0; padding: 0; }
.take-row { min-height: 52px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.take-row:last-child { border-bottom: 0; }
.take-row.is-absent { background: var(--danger-tint); }
.take-num { color: var(--text-muted); font-size: 13px; }
.take-person {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: default;
}
.take-names { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.take-names .person-name { font-weight: 600; white-space: nowrap; }
.take-names .person-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.take-row .mark-choice { justify-self: start; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
}
.chip:hover { border-color: var(--primary); }

/* Segmented Present | Absent | Permission (| Late) */
.mark-choice { display: inline-flex; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); gap: 2px; }
.mark { position: relative; cursor: pointer; }
.mark input { position: absolute; opacity: 0; width: 0; height: 0; }
.mark span { display: inline-block; padding: 5px 12px; border-radius: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.mark input:focus-visible + span { box-shadow: var(--focus); }
.mark-present input:checked + span { background: var(--surface); color: var(--tint-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.mark-absent input:checked + span { background: var(--danger); color: #fff; font-weight: 600; }
.mark-permission input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.mark-late input:checked + span { background: var(--warning-tint); color: var(--warning-text); font-weight: 600; }
.mark-none input:checked + span { background: var(--surface); color: var(--text); border: 1px dashed var(--border-strong); }
.take-note-input { min-height: 34px; padding: 5px 10px; font-size: 13px; border-color: transparent; background: transparent; }
.take-note-input:hover, .take-note-input:focus { border-color: var(--border-strong); background: var(--surface); }
.take-row.is-absent .take-note-input::placeholder { color: var(--danger-text); }

.take-bar {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.take-summary { margin-right: auto; display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.take-clear { text-align: center; font-size: 13px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--tint-text); cursor: pointer; }

/* ---------- Take attendance: phone layout (design pages 8 and 9) ---------- */
.take-hero { background: var(--hero); color: var(--on-hero); border-radius: 0 0 var(--radius) var(--radius); margin: -12px -16px 0; padding: 14px 16px 16px; }
.take-hero-top { display: flex; align-items: center; gap: 10px; }
.take-hero-top .icon-btn { background: rgba(255,255,255,.12); border-color: transparent; color: var(--on-hero); }
.take-when { flex: 1; font-size: 13px; opacity: .9; }
.take-hero h1 { margin-top: 12px; font-size: 24px; color: var(--on-hero); }
.take-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; opacity: .9; }
.take-recorded { padding: 1px 8px; border-radius: 6px; background: rgba(255,255,255,.18); }
.take-counters { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 14px; }
.take-counter { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--radius-sm); background: rgba(255,255,255,.12); }
.take-counter b { font-size: 20px; line-height: 1.15; }
.take-counter span { font-size: 12px; opacity: .9; }
.take-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }

.status-pill {
    display: none; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
    border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.status-pill.pill-present { background: var(--tint); color: var(--tint-text); }
.status-pill.pill-absent { background: var(--danger); color: #fff; }
.status-pill.pill-permission { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.status-pill.pill-late { background: var(--warning-tint); color: var(--warning-text); }
.status-pill.pill-none { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); }
.status-pill.pill-present i::before { content: "\ea5e"; }
.status-pill.pill-absent i::before { content: "\eb55"; }
.status-pill.pill-permission i::before, .status-pill.pill-none i::before { content: "\eaf2"; }
.status-pill.pill-late i::before { content: "\ea70"; }

/* Bottom sheet (page 9) */
.sheet {
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 85vh;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    border: 0; border-radius: 16px 16px 0 0; background: var(--surface); color: var(--text);
    box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
.sheet::backdrop { background: rgba(10, 14, 12, 0.45); }
.sheet[open] { display: flex; flex-direction: column; gap: 12px; animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); align-self: center; }
.sheet-person { display: flex; align-items: center; gap: 12px; }
.sheet-person strong { display: block; font-size: 17px; }
.sheet-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.sheet-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer;
}
.sheet-tile i { font-size: 18px; }
.sheet-tile.is-selected { border: 2px solid var(--primary); background: var(--surface); color: var(--text); font-weight: 600; }
.sheet-tile.tile-absent.is-selected { border-color: var(--danger); color: var(--danger-text); }
.sheet-done { min-height: 48px; font-size: 16px; }

/* ---------- Attendance table (design page 15) ---------- */
/* Summary figures; the "Below 80%" one is also the filter button. */
.matrix-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.summary-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.summary-stat {
    display: flex; flex-direction: column; gap: 2px; min-width: 130px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: left; font: inherit; color: inherit;
}
.summary-label { font-size: 12px; color: var(--text-muted); }
.summary-stat strong { font-size: 20px; line-height: 1.2; }
.summary-stat strong small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.summary-toggle { cursor: pointer; }
.summary-toggle:disabled { cursor: default; }
.summary-toggle.has-risk { border-color: var(--danger); }
.summary-toggle.has-risk strong { color: var(--danger-text); }
.summary-toggle.has-risk:hover { background: var(--danger-tint); }
.summary-toggle[aria-pressed="true"] { background: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger); }
.summary-hint { font-style: normal; font-size: 12px; color: var(--danger-text); text-decoration: underline; }
.summary-toggle[aria-pressed="true"] .when-off, .summary-toggle:not([aria-pressed="true"]) .when-on { display: none; }
.matrix-tools { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; justify-content: flex-end; }
.matrix-tools .search-input { flex: 0 1 260px; }

/* The table: headers and values share the same alignment; class and count columns have fixed widths,
   so the name column takes the spare space (no lone column floating in the middle). */
.matrix-scroll { overflow-x: auto; }
.matrix { font-size: 13px; }
.matrix th, .matrix td { padding: 8px 6px; white-space: nowrap; }
.matrix th.matrix-name, .matrix td.matrix-name {
    position: sticky; left: 0; z-index: 1; background: var(--surface); width: 100%; min-width: 200px; text-align: left;
}
.matrix th.matrix-day, .matrix td.matrix-cell { width: 64px; min-width: 64px; text-align: center; }
.matrix th.matrix-count, .matrix td.matrix-count { width: 44px; min-width: 44px; text-align: center; }
.matrix th.matrix-pct, .matrix td.matrix-pct { width: 190px; min-width: 190px; text-align: left; padding-right: 20px; }
.matrix-day { font-weight: 500; line-height: 1.2; }
.matrix-day span { display: block; }
.type-tag { font-size: 10px; font-weight: 700; color: var(--tint-text); }
.type-tag.is-practice { color: var(--text-muted); }
.matrix-pct b { display: inline-block; min-width: 42px; margin-left: 8px; text-align: right; }
.bar { display: inline-block; vertical-align: middle; width: 110px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--primary); }
.bar span.is-low { background: var(--danger); }
.matrix tr.is-at-risk td { background: var(--danger-tint); }
.matrix tr.is-at-risk .matrix-name { background: var(--danger-tint); }
.matrix-empty td { text-align: center; color: var(--text-muted); padding: 24px; }

/* ---------- Below threshold list, attendance rules ---------- */
.risk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.risk-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.risk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.rules-intro { font-size: 13px; margin-bottom: 14px; }
.input-narrow { max-width: 140px; }
.status-rules { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.status-rules > .label { padding: 10px 12px 6px; }
.status-rule { display: grid; grid-template-columns: 40px 90px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 14px; }
.status-rule .muted { font-size: 13px; }
.status-rule-toggle { cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.switch input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ---------- Dashboard (design canvas 2, 2m) ---------- */
.dash-head { align-items: center; }
.dash-search { width: 300px; flex: none; }
.dash-search .input { padding-right: 14px; }
.dash-top, .dash-bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.dash-hero {
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px 26px;
    border-radius: var(--radius); background: var(--hero); color: #fff;
}
.dash-hero h2 { font-size: 32px; letter-spacing: -0.01em; line-height: 1.2; margin-top: 6px; color: #fff; }
.dash-hero-when { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--on-hero-muted, rgba(255, 255, 255, .85)); }
.dash-hero-meta { color: var(--on-hero-muted, rgba(255, 255, 255, .85)); margin-top: 4px; }
.dash-hero-btn { align-self: flex-start; height: 44px; padding: 0 20px; background: #fff; color: var(--hero); border-color: #fff; font-weight: 700; }
.dash-hero-btn:hover { background: var(--tint); text-decoration: none; }
.hero-type { padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--hero); }
.dash-today { display: flex; flex-direction: column; }
.link-strong { color: var(--tint-text); font-weight: 600; font-size: 13px; cursor: pointer; }
.day-list { list-style: none; margin: 0; padding: 0; }
.day-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.day-list li + li { border-top: 1px solid var(--border); }
.day-list li.is-cancelled .day-what strong { text-decoration: line-through; color: var(--text-muted); }
.day-time { font-weight: 600; }
.day-what { display: flex; flex-direction: column; color: var(--text); line-height: 1.35; min-width: 0; }
.day-what:hover { text-decoration: none; }
.day-what:hover strong { color: var(--tint-text); }
.day-what .muted { font-size: 13px; }
.day-state { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.day-state.state-next, .day-state.state-now { color: var(--tint-text); }
.day-state.state-not_recorded { color: var(--warning-text); }
.day-empty { padding: 10px 0; }
.dash-warn {
    display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--warning-text);
}
.dash-warn-more { margin-left: auto; font-weight: 500; }
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.dash-stats > div { display: flex; flex-direction: column; padding: 16px 22px; }
.dash-stats > div + div { border-left: 1px solid var(--border); }
.dash-stats .muted { font-size: 13px; }
.dash-stats b { font-size: 26px; }
.risk-rows { list-style: none; margin: 0; padding: 0; }
.risk-rows li + li { border-top: 1px solid var(--border); }
.risk-rows a { display: grid; grid-template-columns: minmax(0, 1fr) 140px 48px; gap: 16px; align-items: center; padding: 10px 0; color: var(--text); }
.risk-rows a:hover { text-decoration: none; }
.risk-rows a:hover strong { color: var(--tint-text); }
.risk-who { line-height: 1.35; min-width: 0; }
.risk-section { display: block; font-size: 13px; }
.risk-rows .bar { width: 100%; }
.risk-rows b { text-align: right; }
.risk-rows li.is-extra { display: none; }
.dash-risk:has(details[open]) .risk-rows li.is-extra { display: block; }
.dash-risk:has(details[open]) .risk-more summary { display: none; }
.risk-more summary { list-style: none; margin-top: 8px; }
.risk-more summary::-webkit-details-marker { display: none; }
.week-bars { display: flex; align-items: flex-end; gap: 14px; height: 190px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.week-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; position: relative; }
.week-bar-col > .num { font-size: 12px; font-weight: 600; }
.week-bar-fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--tint); }
.week-bar-fill.is-latest { background: var(--primary); }
.week-bar-label { position: absolute; bottom: -22px; font-size: 12px; white-space: nowrap; }
.dash-weeks { padding-bottom: 34px; }
.week-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.week-strip a {
    height: 64px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.week-strip a:hover { text-decoration: none; }
.week-strip a span { font-size: 11px; font-weight: 600; opacity: .8; }
.week-strip a b { font-size: 18px; }
.week-strip a i { width: 5px; height: 5px; border-radius: 50%; }
.week-strip a i.has-classes { background: var(--primary); }
.week-strip a.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.week-strip a.is-on i.has-classes { background: #fff; }

/* ---------- Student page (design canvas 7b) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table .col-actions { width: 56px; text-align: right; }
.student-hero {
    display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: var(--radius);
    background: var(--hero); color: #fff;
}
.avatar-xl { width: 76px; height: 76px; font-size: 26px; flex: none; }
.student-hero-text { flex: 1; min-width: 0; }
.student-back { font-size: 13px; color: rgba(255, 255, 255, .85); }
.student-hero h1 { font-size: 30px; color: #fff; }
.student-km { font-weight: 500; font-size: 22px; color: rgba(255, 255, 255, .85); }
.student-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hero-pill { display: inline-block; line-height: 26px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.16); }
.hero-pill.is-risk { background: #FEE4E2; color: #B42318; }
.btn-on-hero { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.btn-on-hero:hover { background: rgba(255,255,255,.26); text-decoration: none; }
.student-hero .icon-btn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.student-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 600; }
.note-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.note-item + .note-item { margin-top: 8px; }
.note-item .muted { font-size: 12px; }
.student-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.student-section { display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.student-section:hover { text-decoration: none; outline: 1.5px solid var(--primary); outline-offset: -1.5px; }
.student-section > span:nth-child(2) { display: flex; flex-direction: column; }
.student-section .muted { font-size: 12.5px; }
.student-att { font-size: 26px; }
.bar-wide { width: 100%; height: 8px; border-radius: 4px; }
.text-strong { color: var(--text); }
.mark-history { display: flex; flex-wrap: wrap; gap: 12px; }
.mark-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.mark-chip .code-pill { min-width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
.code-none { background: var(--surface-2); color: var(--text-muted); }

/* ---------- Timetable (design canvas 3): a column per day, classes placed by time ---------- */
.timetable-actions { flex-wrap: wrap; }
.type-legend { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.type-lecture { background: var(--tint); color: var(--tint-text); }
.type-practice { background: var(--surface-2); color: var(--text-muted); }
.week-nav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.week-nav .btn.is-current { background: var(--tint); color: var(--tint-text); border-color: transparent; }
.timetable { padding: 12px 16px 16px; }
.tt-head, .tt-grid { display: grid; grid-template-columns: 64px repeat(var(--days), minmax(0, 1fr)); gap: 8px; }
.tt-head { padding-bottom: 10px; }
.tt-day {
    height: 52px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tt-day span { font-size: 13px; font-weight: 600; opacity: .85; }
.tt-day b { font-size: 20px; }
.tt-day.is-today { background: var(--primary); color: #fff; }
.tt-hours { position: relative; }
.tt-hours span { position: absolute; right: 6px; font-size: 11.5px; color: var(--text-muted); transform: translateY(-6px); white-space: nowrap; }
.tt-hours span:first-child { transform: none; }
.tt-col {
    position: relative; border-radius: 10px;
    background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 50px);
}
.tt-block {
    position: absolute; left: 2px; right: 2px; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 6px 9px; border-radius: 10px; color: var(--text); font-size: 12px; line-height: 1.3;
}
.tt-block:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--primary); }
.tt-block.is-lecture { background: var(--tint); border: 1.5px solid var(--tint-text); }
.tt-block.is-practice { background: var(--surface-2); border: 1.5px dashed var(--text-muted); }
.tt-block.is-cancelled { opacity: .6; }
.tt-block.is-cancelled strong { text-decoration: line-through; }
.tt-time { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-block.is-lecture .tt-time { color: var(--tint-text); }
.tt-block.is-practice .tt-time { color: var(--text-muted); }
.tt-block strong { font-size: 15px; }
.tt-meta { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-now { position: absolute; left: -4px; right: 0; height: 2px; background: var(--danger); z-index: 2; }
.tt-now::before { content: ""; position: absolute; left: -2px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.tt-empty { text-align: center; padding: 16px 0 0; }

/* ---------- Section settings (design canvas 15): class dates, status options, archive ---------- */
.split-settings { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: none; }
.dates-summary {
    display: flex; justify-content: space-between; font-size: 13px; padding: 10px 12px;
    border-radius: var(--radius-sm); background: var(--surface-2);
}
.banner-sm { padding: 8px 12px; font-size: 12.5px; }
.input[disabled] { background: var(--surface-2); color: var(--text-muted); border-color: transparent; }
html.js .js-hidden { display: none; }
.status-table { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.status-table > .label { display: flex; align-items: center; }
.status-list { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.status-line {
    display: grid; grid-template-columns: 44px minmax(70px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 12px; font-size: 14px;
}
.status-line + .status-line { border-top: 1px solid var(--border); }
.status-line > .muted { font-size: 13px; }
.status-line.is-off { opacity: .85; }
.status-line form { display: contents; }
.status-fixed { font-size: 12.5px; padding: 0 10px; }
.btn-tint { color: var(--tint-text); }
.btn-danger-soft { color: var(--danger-text); background: var(--danger-tint); border-color: var(--danger-tint); }
.add-status summary { list-style: none; display: inline-block; padding: 4px 2px; }
.add-status summary::-webkit-details-marker { display: none; }
.add-status-form {
    display: grid; grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1.3fr) auto; gap: 8px; align-items: end;
    margin-top: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.settings-danger { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- Profile ---------- */
.profile-hero {
    display: flex; align-items: center; gap: 18px;
    background: var(--hero); color: var(--on-hero);
    border-radius: var(--radius); padding: 22px 24px;
}
.profile-hero p { opacity: 0.9; }
.photo-edit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-actions { display: flex; flex-direction: column; align-items: center; }
.photo-pick {
    position: relative; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--on-hero); cursor: pointer; opacity: 0.9;
}
.photo-pick:hover { opacity: 1; text-decoration: underline; }
.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.photo-pick:focus-within { box-shadow: var(--focus); border-radius: 4px; }
.photo-remove {
    border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
    color: var(--on-hero); opacity: 0.7; cursor: pointer; text-decoration: underline;
}
.profile-hero-actions { margin-left: auto; }
.profile-hero .icon-btn { background: transparent; border-color: rgba(255,255,255,.3); color: var(--on-hero); }

/* ---------- Password checklist ---------- */
.pw-check { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; }
.strength span { height: 4px; border-radius: 2px; background: var(--border); }
.strength-label { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 8px; min-width: 7em; text-align: right; }
.pw-check[data-level="1"] .strength span:nth-child(-n+1),
.pw-check[data-level="2"] .strength span:nth-child(-n+2) { background: var(--warning-text); }
.pw-check[data-level="3"] .strength span:nth-child(-n+3),
.pw-check[data-level="4"] .strength span:nth-child(-n+4) { background: var(--primary); }
.pw-check[data-level="1"] .strength-label, .pw-check[data-level="2"] .strength-label { color: var(--warning-text); }
.pw-check[data-level="3"] .strength-label, .pw-check[data-level="4"] .strength-label { color: var(--tint-text); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); }
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules li.is-met { color: var(--tint-text); }

/* ---------- Scores toolbar and banners (design pages 16, 17, 41, 44) ---------- */
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.subtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); }
.subtabs > a, .subtabs > button {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 0; border-radius: 6px;
    background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.subtabs > a:hover { text-decoration: none; color: var(--text); }
.subtabs > .is-active, .subtabs > [aria-pressed="true"] {
    background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.banner {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500;
}
.banner > a { margin-left: auto; font-weight: 600; color: inherit; text-decoration: underline; }
.banner-ok { background: var(--tint); color: var(--tint-text); }
.banner-warn { background: var(--warning-tint); color: var(--warning-text); }
.banner-error { background: var(--danger-tint); color: var(--danger-text); }
.help-dot {
    display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%;
    border: 1px solid var(--border-strong); font-size: 10px; font-weight: 700; color: var(--text-muted); cursor: help; vertical-align: 1px;
}

/* ---------- Assessment components (design pages 16, 43, 44, 45) ---------- */
.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.part-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.part-head :is(h2, h3) { font-size: 17px; }
.points-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.points-badge.is-ok { background: var(--tint); color: var(--tint-text); }
.points-badge.is-off { background: var(--warning-tint); color: var(--warning-text); }
.points-badge.is-off i { display: none; }
.component-head, .component-row {
    display: grid; grid-template-columns: 52px minmax(140px, 1fr) 180px 84px 124px 56px 32px; gap: 10px; align-items: center;
}
.component-head { font-size: 13px; font-weight: 500; color: var(--text-muted); padding-bottom: 6px; }
.component-head .align-end { text-align: right; }
.component-row { padding: 5px 0; }
.component-move { display: flex; }
.move-btn {
    display: inline-grid; place-items: center; width: 26px; height: 30px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); font-size: 15px; cursor: pointer;
}
.move-btn:hover { background: var(--surface-2); }
.move-btn:disabled { color: var(--text-faint); cursor: default; background: transparent; }
.input-number { text-align: right; font-variant-numeric: tabular-nums; }
.input-strong { font-weight: 700; }
.input[readonly] { background: var(--surface-2); color: var(--text-muted); }
.component-count { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.component-empty { padding: 4px 0 8px; font-size: 14px; }
.part-actions { display: flex; align-items: center; gap: 20px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.points-split .card-title { margin-bottom: 14px; }
.weight-part + .weight-part { margin-top: 18px; }
.weight-part-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.weight-part-head span { font-weight: 600; font-variant-numeric: tabular-nums; }
.weight-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); margin-bottom: 8px; }
.weight-bar span { display: block; height: 100%; background: var(--primary); }
.weight-bar span:nth-child(even) { background: color-mix(in srgb, var(--primary) 70%, #000); }
.weight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.weight-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weight-list li span:last-child { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.weight-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.several-fields { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 10px; }

/* ---------- Score grid (design pages 17, 40, 41, 42) ---------- */
.score-stats { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
.score-stat {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.score-stat strong { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.score-stat .fix { font-size: 14px; font-weight: 600; }
.score-stat .fix.is-off { color: var(--danger-text); }
.score-stat .fix.is-ok { color: var(--tint-text); }
.score-stat-note { font-size: 12px; color: var(--danger-text); text-decoration: underline; }
.score-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; }
.score-card-head h3 { font-size: 15px; }
.score-form { display: flex; flex-direction: column; gap: 12px; }
.score-table { font-size: 13px; }
.score-table td { padding-top: 4px; padding-bottom: 4px; }
.score-table th { vertical-align: bottom; }
.score-table .matrix-name { max-width: 240px; }
.score-table .matrix-name .person-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.score-table .matrix-name .person-name { display: inline; font-weight: 500; }
.score-table .matrix-name .person-meta { display: inline; margin-left: 4px; }
.matrix th.score-col, .matrix td.score-cell { width: 64px; min-width: 64px; text-align: right; }
.matrix th.score-wide, .matrix td.score-wide { width: 84px; min-width: 84px; }
.matrix th.score-half, .matrix td.score-half, .matrix th.score-total, .matrix td.score-total {
    width: 64px; min-width: 64px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
}
.matrix th.score-half, .matrix td.score-half { background: var(--surface-2); }
.matrix .part-end { border-right: 1px solid var(--border); }
.matrix .part-start { border-left: 1px solid var(--border); }
.matrix tr.score-parts th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text); padding-top: 10px; padding-bottom: 6px; }
.score-col-name { display: block; font-weight: 600; color: var(--text); white-space: nowrap; line-height: 1.2; }
.score-wide .score-col-name { white-space: normal; }
.person-line .muted { display: inline-block; min-width: 18px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.score-col-meta { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.score-cell > span { display: inline-block; padding-right: 9px; }
.score-input {
    width: 100%; height: 30px; padding: 0 8px; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
    border: 1px solid transparent; border-radius: 6px; background: var(--surface-2); color: var(--text);
}
.score-input:hover { border-color: var(--border-strong); }
.score-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); background: var(--surface); }
.score-input.is-empty { background: var(--surface); border: 1px dashed var(--border-strong); }
.score-input.is-invalid { border: 1px solid var(--danger); background: var(--danger-tint); color: var(--danger-text); }
.score-legend { padding: 10px 16px; font-size: 12px; }
html.js .score-table.only-midterm [data-part="FINAL"], html.js .score-table.only-final [data-part="MIDTERM"] { display: none; }
.save-bar {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.save-bar .save-state { margin-right: auto; font-size: 14px; color: var(--text-muted); }
.history { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.history li { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.history li:last-child { border-bottom: 0; }
.history .when { color: var(--text-muted); }
.history .what { font-weight: 600; }
kbd {
    display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: 4px;
    font: 600 11px var(--font-mono); text-align: center; background: var(--surface-2);
}

/* ---------- Dialogs (design page 39): title, text, then the buttons at the right; no icon ---------- */
.dialog {
    width: min(420px, calc(100vw - 32px)); padding: 22px 24px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
    text-align: left;
}
.dialog::backdrop { background: rgba(10, 14, 12, 0.5); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog textarea.input { resize: vertical; min-height: 64px; }
.dialog-wide { width: min(480px, calc(100vw - 32px)); }
.dialog :is(h2, h3):not(.dialog-title) { font-size: 17px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dialog .alert { font-size: 13px; }

/* ---------- Sign-in pages (design pages 11 and 12) ---------- */
body.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 100vh; padding: 16px; }
body.auth-single { grid-template-columns: 1fr; }
.auth-side { display: flex; flex-direction: column; padding: 8px 8px 0; }
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.auth-logo { display: block; height: 40px; width: auto; }
.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 0; }
.auth-form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-form h1 { font-size: 24px; }
.auth-form > .muted { margin-top: -8px; }
.auth-aside-action { font-size: 13px; }
.auth-foot { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.auth-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; padding: 32px;
    background: var(--tint); border-radius: var(--radius);
}
.auth-emblem { width: 180px; height: auto; margin-bottom: 16px; }
.auth-km { color: var(--tint-text); font-weight: 500; }
.auth-panel .muted { max-width: 36ch; }

/* ---------- Error page ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.error-card { max-width: 420px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- Mobile ---------- */
.bottom-nav { display: none; }

@media (max-width: 1100px) {
    .split, .split-even { grid-template-columns: 1fr; }
    .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .app { padding-bottom: 76px; }
    .main { padding: 16px 16px 24px; }
    .main-col > .flash { margin: 12px 16px 0; }
    .topbar { padding: 0 8px; gap: 4px; }
    .topbar .logo span, .crumb a, .crumb i { display: none; }
    /* Section and Setup tabs: a scrolling row under the top bar. */
    .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar); }
    .top-tabs { order: 10; width: 100%; height: 44px; overflow-x: auto; margin: 0 -8px; border-top: 1px solid var(--border); }
    .top-tabs a { padding: 0 14px; white-space: nowrap; font-size: 14px; }
    .sidebar { top: 0; }
    /* The side menu opens over the page (≡ or More). */
    .sidebar { display: none; position: fixed; z-index: 45; top: 0; left: 0; height: 100vh; width: min(300px, 86vw); background: var(--surface); box-shadow: var(--shadow-pop); padding-top: 16px; }
    .app.is-menu-open .sidebar { display: flex; }
    .app.is-menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(16, 24, 20, .32); }
    .sidebar-collapsed .app.is-menu-open .sidebar { display: flex; }
    h1 { font-size: 24px; }
    .stat { border-left: 0; border-top: 1px solid var(--border); }
    .stat:first-child { border-top: 0; }
    .hero h2 { font-size: 24px; }
    .field-row { grid-template-columns: 1fr; }
    .field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
    .term-dates { grid-template-columns: 1fr; }
    .attention-fix { grid-template-columns: 1fr; }

    /* Take attendance on a phone: pages 8 and 9. */
    .desktop-only { display: none !important; }
    .take-card { background: transparent; border: 0; overflow: visible; }
    .take-list { display: flex; flex-direction: column; gap: 8px; }
    .take-row {
        grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; min-height: 60px;
        border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    }
    .take-row:last-child { border-bottom: 1px solid var(--border); }
    .take-row.is-absent { background: var(--surface); border: 1.5px solid var(--danger); }
    .take-person { cursor: pointer; }
    .take-names { flex-direction: column; align-items: flex-start; gap: 0; }
    .take-names .person-meta { max-width: 100%; }
    html.js .take-row .mark-choice { display: none; }
    html.js .status-pill { display: inline-flex; }
    html:not(.js) .status-pill { display: none !important; }
    .take-bar { bottom: 76px; padding: 8px; border: 0; background: transparent; box-shadow: none; }
    .take-save { width: 100%; min-height: 50px; font-size: 16px; border-radius: var(--radius); }
    .section-header-top { flex-direction: column-reverse; gap: 10px; }
    .section-header-top .page-actions { justify-content: space-between; }
    .section-header-top .page-actions .btn { flex: 1; }
    .status-rule { grid-template-columns: 40px 1fr auto; }
    .status-rule > .muted { grid-column: 2 / 3; grid-row: 2; }
    .session-row { grid-template-columns: 28px 1fr auto; row-gap: 4px; padding: 10px 14px; }
    .session-time, .session-room { grid-column: 2; }
    .session-row .type-chip { grid-column: 3; grid-row: 1; }
    .session-state, .session-actions { grid-column: 2 / 4; justify-content: flex-start; }
    .slot-head { display: none; }
    .slot-row { grid-template-columns: 1fr 1fr 1fr; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .unit-check { grid-template-columns: 1fr; }
    .page-toolbar .page-actions { margin-left: auto; }
    .component-head { display: none; }
    .component-row {
        grid-template-columns: 1fr 1fr 32px; padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .component-row [data-component-name] { grid-column: 1 / 3; grid-row: 1; }
    .component-row [data-component-remove] { grid-column: 3; grid-row: 1; }
    .component-row [data-component-kind] { grid-column: 1 / 4; }
    .component-move { grid-column: 3; grid-row: 4; }
    .component-row .component-count { grid-column: 1 / 3; grid-row: 4; text-align: left; }
    .score-stats { grid-template-columns: 1fr 1fr; }
    .several-fields { grid-template-columns: 1fr 1fr; }
    .several-fields .field:first-child { grid-column: 1 / 3; }
    .history li { grid-template-columns: 1fr 1fr; }
    .history li > :last-child { grid-column: 1 / 3; }
    .score-table.matrix th.matrix-name, .score-table.matrix td.matrix-name { min-width: 130px; max-width: 150px; }
    .score-table .matrix-name .person-line { max-width: 140px; }
    .score-table .col-num { display: none; }
    .save-bar { bottom: 76px; }
    .dash-top, .dash-bottom { grid-template-columns: 1fr; }
    .student-hero { flex-wrap: wrap; padding: 20px; }
    .student-hero h1 { font-size: 24px; }
    .avatar-xl { width: 56px; height: 56px; font-size: 20px; }
    .student-layout { grid-template-columns: 1fr; }
    .dash-hero { padding: 20px; gap: 14px; }
    .dash-hero h2 { font-size: 24px; }
    .dash-hero-btn { align-self: stretch; justify-content: center; height: 50px; border-radius: 10px; }
    .dash-stats { grid-template-columns: 1fr 1fr; }
    .dash-stats > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
    .dash-stats > div:nth-child(4) { border-top: 1px solid var(--border); }
    .dash-stats b { font-size: 22px; }
    .risk-rows a { grid-template-columns: minmax(0, 1fr) 48px; }
    .risk-rows .bar { display: none; }
    .tt-head, .tt-hours { display: none; }
    .tt-grid { display: flex; flex-direction: column; gap: 14px; height: auto !important; }
    .tt-col { background: none; display: flex; flex-direction: column; gap: 8px; }
    .tt-block { position: static; height: auto !important; }
    .tt-phone-day { display: flex; justify-content: space-between; margin: 0; }
    .tt-col.is-today .tt-phone-day b { color: var(--tint-text); }
    .tt-now { display: none; }
    .add-status-form { grid-template-columns: 1fr 1fr; }
    .add-status-form .field:first-child { grid-column: 1 / 3; }
    .status-line { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .status-line > .muted:not(.status-fixed) { grid-column: 2; grid-row: 2; }
    .section-grid { grid-template-columns: 1fr; }
    .section-list-head { display: none; }
    .section-row { grid-template-columns: minmax(0, 1fr) auto 16px; row-gap: 2px; padding: 12px 16px; }
    .section-row > :nth-child(2), .section-row > :nth-child(3), .section-row > :nth-child(4), .section-row > :nth-child(5) { display: none; }
    .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .group-card { padding: 14px; }
    .group-card-foot { gap: 14px; }
    .group-list-head { display: none; }
    .group-row { grid-template-columns: minmax(0, 1fr) auto auto 16px; padding: 12px 16px; }
    .group-row > :nth-child(2), .group-row > :nth-child(3), .group-row > :nth-child(4), .group-row > :nth-child(5), .group-row > :nth-child(8) { display: none; }
    .drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 18px; }
    .tools-spacer { display: none; }
    .import-counts { gap: 16px; }
    .action-bar { bottom: 76px; }
    .profile-hero { padding: 18px; }
    .avatar-lg { width: 52px; height: 52px; font-size: 18px; }

    .bottom-nav {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
        background: var(--surface); border-top: 1px solid var(--border);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav > a, .bottom-nav > span, .bottom-nav > button {
        border: 0; background: none; font: inherit; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: 11px; color: var(--text-muted); padding: 6px 0; min-height: 48px; border-radius: var(--radius-sm);
    }
    .bottom-nav > a:hover { text-decoration: none; }
    .bottom-nav i { font-size: 22px; }
    .bottom-nav > .is-active { color: var(--tint-text); background: var(--tint); font-weight: 600; }
    .bottom-nav > .is-soon { color: var(--text-faint); }

    body.auth { grid-template-columns: 1fr; }
    .auth-panel { display: none; }
}

/* ---------- Search ---------- */
.search-page-box { max-width: 560px; }
.search-page-box .search-box, .dash-search .search-box { max-width: none; display: block; }
.search-group { font-size: 13px; color: var(--text-muted); padding: 12px 20px 6px; }
.search-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: center;
    padding: 10px 20px; border-top: 1px solid var(--border); color: var(--text);
}
.search-row:hover { text-decoration: none; background: var(--surface-2); }
.search-more { display: block; color: var(--tint-text); font-weight: 600; font-size: 13px; }

/* ---------- Teaching hours ---------- */
.month-label { min-width: 140px; text-align: center; font-size: 14px; }
.hours-note { font-size: 13px; }
.hours-table td, .hours-table th { padding-top: 10px; padding-bottom: 10px; }
.hours-table .align-end { text-align: right; }
.hours-table tr.is-muted td { color: var(--text-muted); }
.hours-status { font-weight: 600; font-size: 13px; }
.hours-status.status-taught { color: var(--tint-text); }
.hours-status.status-taught_no_attendance { color: var(--warning-text); }
.hours-status.status-cancelled, .hours-status.status-upcoming { color: var(--text-muted); }

/* ---------- Shared with me (design canvas 16) and Share reports ---------- */
.shared-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.shared-list { display: flex; flex-direction: column; gap: 10px; }
.shared-item { display: flex; flex-direction: column; gap: 8px; padding: 16px; color: var(--text); border: 2px solid transparent; }
.shared-item:hover { text-decoration: none; border-color: var(--border-strong); }
.shared-item.is-open { border-color: var(--primary); }
.shared-item-top { display: flex; justify-content: space-between; gap: 8px; }
.shared-item .muted { font-size: 13px; }
.pill-amber { background: var(--warning-tint); color: var(--warning-text); }
.shared-open { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.shared-open-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.shared-open-head h2 { font-size: 22px; }
.shared-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shared-stats > div { display: flex; flex-direction: column; padding: 14px; border-radius: 10px; background: var(--surface-2); }
.shared-stats span { font-size: 12.5px; color: var(--text-muted); }
.shared-stats b { font-size: 24px; }
.shared-stats .is-good { background: var(--tint); }
.shared-stats .is-good span, .shared-stats .is-good b { color: var(--tint-text); }
.shared-stats .is-bad { background: var(--danger-tint); }
.shared-stats .is-bad span, .shared-stats .is-bad b { color: var(--danger-text); }
.shared-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.shared-cols h3, .shared-scores h3 { font-size: 15px; margin-bottom: 10px; }
.spread-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 28px; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 12.5px; }
.spread-row b { text-align: right; }
.needs-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); margin-bottom: 8px; }
.shared-draft-note { font-size: 13px; margin-bottom: 8px; }
.shared-score-table .align-end { text-align: right; }
.share-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 8px; }
.share-people { display: flex; flex-direction: column; gap: 8px; }
.share-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.share-person > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
.share-person .muted { font-size: 12.5px; }
.share-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; font-weight: 600; padding: 14px; border-radius: 10px; background: var(--tint); }
.share-rules .can { color: var(--tint-text); }
.share-rules .cannot { color: var(--danger-text); }
@media (max-width: 860px) {
    .shared-layout, .shared-cols { grid-template-columns: 1fr; }
    .shared-stats { grid-template-columns: 1fr 1fr; }
    .share-form, .share-rules { grid-template-columns: 1fr; }
}
.share-sub { display: block; }

/* ==========================================================
   Sprint 8 · new web design (design canvas "Classroom style")
   ========================================================== */
.account > summary { display: block; }
.dot-sq { border-radius: 8px; width: 28px; height: 28px; margin: 0; font-size: 11px; }
.label-sm { display: block; font-size: 12.5px; color: var(--text-muted); }

/* Pills in toolbars: search, filter, group-by select, cards/list switch. */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-pill {
    display: flex; align-items: center; gap: 8px; height: 40px; width: 320px; max-width: 100%; padding: 0 12px 0 14px;
    border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text-muted);
}
.search-pill:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.search-pill input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); outline: none; }
.search-pill input::placeholder { color: var(--text-muted); }
.search-pill input::-webkit-search-cancel-button { display: none; }
.chip-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
    font: inherit; font-weight: 600; font-size: 13.5px; color: var(--text); cursor: pointer; white-space: nowrap; list-style: none;
}
.chip-btn::-webkit-details-marker { display: none; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn i { font-size: 16px; }
details[open] > .chip-btn, .chip-btn.is-on { background: var(--tint); border-color: var(--tint-line); color: var(--tint-text); }
.chip-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 11.5px; text-align: center; }
.filter-menu { position: relative; }
.filter-menu .menu { left: 0; top: calc(100% + 6px); width: 280px; }
.menu-check { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; font-size: 14px; cursor: pointer; }
.menu-check:hover { background: var(--surface-2); }
.menu-check input { accent-color: var(--primary); margin: 0; width: 16px; height: 16px; }
.select-pill {
    height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 19px;
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13.5px;
}
.view-toggle { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.view-toggle button {
    display: grid; place-items: center; width: 44px; height: 38px; border: 0;
    background: var(--surface); color: var(--text-muted); font-size: 18px; cursor: pointer;
}
.view-toggle button[aria-pressed="true"] { background: var(--tint); color: var(--tint-text); }
html:not(.js) .view-toggle, html:not(.js) .search-pill, html:not(.js) .select-pill { display: none; }

/* Home: Today strip */
.home { gap: 18px; }
.today-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.today-strip h2 { margin: 0 8px 0 4px; font-size: 14px; font-weight: 700; }
.today-chip {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 10px;
    background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-size: 13.5px; color: var(--text); white-space: nowrap;
}
.today-chip:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--primary); }
.today-time { font-weight: 700; min-width: 40px; text-align: right; }
.today-chip.is-now { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.today-chip.is-now .muted { color: inherit; opacity: .85; }
.today-chip.is-now .dot { background: rgba(0, 0, 0, .22); }
.today-state { display: inline-flex; align-items: center; gap: 4px; color: var(--tint-text); font-weight: 600; }
.today-state.is-warn { color: var(--warning-text); }
.today-chip.is-cancelled b, .today-chip.is-cancelled .today-time { text-decoration: line-through; color: var(--text-muted); }

/* Home: section cards */
.home-list { display: flex; flex-direction: column; gap: 18px; }
.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.class-card {
    position: relative; display: flex; flex-direction: column; min-height: 262px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.class-card:hover { box-shadow: var(--shadow-card); }
.class-banner { position: relative; display: block; height: 118px; padding: 16px 18px; overflow: hidden; color: #fff; background: var(--hero); }
.class-banner:hover { text-decoration: none; }
.class-banner h2 { position: relative; font-size: 24px; color: #fff; }
.class-banner .sub { position: relative; display: block; font-size: 14px; margin-top: 2px; }
.art {
    position: absolute; right: -6px; bottom: -26px; font-size: 96px; font-weight: 800; letter-spacing: -.04em;
    line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, .13); pointer-events: none;
}
.class-icon {
    position: absolute; right: 18px; top: 92px; display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 50%; background: var(--surface); color: var(--tint-text); font-size: 24px;
    box-shadow: 0 0 0 4px var(--surface), 0 1px 4px rgba(0, 0, 0, .18);
}
.class-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; padding: 16px 18px 12px; font-size: 14px; }
.next-class b { font-weight: 600; }
.next-class .next-room { display: block; font-size: 13px; }
.next-class .warn-icon { vertical-align: -3px; margin-left: 4px; font-size: 16px; }
.class-foot { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--border); }
.class-count { display: flex; align-items: center; gap: 8px; margin-right: auto; padding-left: 8px; font-size: 13.5px; color: var(--text-muted); }
.class-count b { color: var(--text); }
.class-count i { font-size: 18px; }
.has-dot { position: relative; }
.has-dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.has-dot.dot-ok::after { background: var(--primary); }
.has-dot.dot-warn::after { background: var(--warning-text); }
.class-foot .icon-btn { width: 40px; height: 40px; font-size: 20px; }

/* Home: list view */
.class-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.class-table-head, .class-row {
    display: grid; grid-template-columns: minmax(0, 2.2fr) 90px minmax(0, 1.4fr) 80px 90px 100px 100px;
    gap: 16px; align-items: center; padding: 0 16px;
}
.class-table-head { height: 42px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.class-row { min-height: 52px; border-bottom: 1px solid var(--border); font-size: 14px; }
.class-row:last-child { border-bottom: 0; }
.class-row:hover { background: var(--surface-2); }
.class-row-name { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.class-row-name:hover { text-decoration: none; }
.class-row-name small { display: block; font-size: 12.5px; }
.tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; font-size: 18px; }
.class-row .next-class .next-room { display: none; }
.class-row-actions { display: flex; justify-content: flex-end; }
.group-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 -6px; font-size: 15px; font-weight: 700; }
.group-heading .num { font-weight: 500; color: var(--text-muted); }
.group-heading::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.class-table .group-heading { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.home-archived-note { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: 13.5px; }

/* Home: first time */
.welcome { max-width: 712px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.steps-card { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.steps-card li { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.steps-card li:last-child { border-bottom: 0; }
.steps-card li > div { flex: 1; display: flex; flex-direction: column; }
.step-no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--primary); color: var(--tint-text); font-weight: 700; }
.welcome-tip { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--radius); background: var(--surface-2); }
.welcome-tip i { font-size: 20px; color: var(--tint-text); }
.welcome-tip span span { display: block; font-size: 13.5px; }

@media (max-width: 1100px) {
    .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .class-grid { grid-template-columns: 1fr; gap: 14px; }
    .search-pill { width: auto; flex: 1 1 200px; }
    .today-strip { flex-wrap: nowrap; overflow-x: auto; }
    .class-table-head { display: none; }
    .class-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
    .class-row > :nth-child(2), .class-row > :nth-child(4), .class-row > :nth-child(5), .class-row > :nth-child(6) { display: none; }
    .class-row .class-row-actions { grid-column: 2; grid-row: 1 / 3; }
}

/* Section: banners */
.hero-banner {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 236px; padding: 26px 28px; border-radius: var(--radius); background: var(--hero); color: #fff;
}
.hero-banner .art { top: -30px; bottom: auto; right: -10px; font-size: 200px; letter-spacing: -.05em; color: rgba(255, 255, 255, .1); }
.hero-banner h1 { position: relative; font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.hero-sub { position: relative; font-size: 18px; }
.hero-meta { position: relative; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; }
.hero-meta dt { font-size: 12.5px; opacity: .9; }
.hero-meta dd { margin: 0; font-size: 16px; font-weight: 700; }
.mini-banner {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; border-radius: var(--radius); background: var(--hero); color: #fff;
}
.mini-banner b { position: relative; font-size: 22px; font-weight: 800; }
.mini-banner > span:not(.art) { position: relative; font-size: 14px; }
.mini-banner .art { right: -6px; top: -22px; bottom: auto; font-size: 84px; color: rgba(255, 255, 255, .1); }

/* Section: Overview */
.overview-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.box { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.box-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.box-big { font-size: 22px; font-weight: 800; }
.box-note { margin-top: 2px; font-size: 13px; display: block; }
.box-btn { margin-top: 12px; }
.feed { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.feed-item, .feed-todo {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px; min-height: 70px;
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface);
}
a.feed-item:hover { text-decoration: none; box-shadow: 0 1px 3px rgba(20, 60, 40, .14); }
.feed-todo { border-color: transparent; box-shadow: 0 1px 2px rgba(20, 60, 40, .2), 0 2px 8px rgba(20, 60, 40, .08); margin-bottom: 4px; }
.feed-icon {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary); font-size: 19px;
}
.feed-icon.is-soft { background: var(--tint); color: var(--tint-text); }
.feed-icon.is-warn { background: var(--warning-tint); color: var(--warning-text); }
.feed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feed-text b { font-size: 14.5px; }
.feed-text .muted { font-size: 13px; }
.feed-when { font-size: 13px; white-space: nowrap; }
.feed-empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; }

@media (max-width: 860px) {
    .hero-banner { min-height: 180px; padding: 20px; }
    .hero-banner h1 { font-size: 30px; }
    .hero-banner .art { font-size: 120px; }
    .overview-cols { grid-template-columns: 1fr; }
}

/* Section: Attendance tab (design "Class · Attendance tab", "Edit a past session") */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--tint); color: var(--tint-text); font-size: 12px; font-weight: 700; }
.tag-gray { background: var(--surface-2); color: var(--text-muted); }
.take-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.take-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.session-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.session-when p:first-child { display: flex; align-items: center; gap: 8px; }
.session-when b { font-size: 17px; }
.session-when .muted { display: flex; gap: 12px; font-size: 13px; }
.session-recorded { text-align: right; }
.session-recorded b { font-size: 15px; }
.count-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.count-box {
    display: inline-flex; align-items: baseline; gap: 6px; height: 40px; padding: 0 14px; align-items: center;
    border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--text-muted);
}
.count-box b { font-size: 18px; color: var(--text); }
.count-box.count-unmarked { background: var(--warning-tint); color: var(--warning-text); }
.count-box.count-unmarked b { color: var(--warning-text); }
.take-side { display: flex; flex-direction: column; gap: 16px; }
.side-stats { display: flex; gap: 28px; }
.side-stats b { font-size: 26px; font-weight: 800; }
.side-links { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.side-links a { display: inline-flex; align-items: center; gap: 6px; }
.past-row { display: flex; justify-content: space-between; padding: 9px 10px; margin: 0 -10px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; border-radius: 6px; }
.past-row:last-child { border-bottom: 0; }
.past-row:hover { background: var(--surface-2); text-decoration: none; }
.past-row.is-on { background: var(--tint); color: var(--tint-text); font-weight: 600; border-bottom-color: transparent; }
.risk-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text); font-size: 14px; }
.risk-line:hover { text-decoration: none; }
.risk-line b { margin-left: auto; }
.box-title { display: flex; align-items: center; gap: 6px; }
.empty-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 16px; text-align: center; }
.empty-hero-icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--tint); color: var(--tint-text); font-size: 40px; }
.empty-hero :is(h1, h2) { font-size: 24px; }
.empty-facts { display: flex; gap: 36px; margin: 0; text-align: left; }
.empty-facts dt { font-size: 12.5px; color: var(--text-muted); }
.empty-facts dd { margin: 0; font-weight: 700; }

@media (min-width: 861px) {
    .take-card { border: 0; background: none; padding: 0; overflow: visible; }
    .take-row {
        grid-template-columns: minmax(0, 1fr) auto auto 40px; gap: 12px; padding: 8px 10px 8px 0;
        border-bottom: 1px solid var(--border); background: none;
    }
    .take-row.is-absent { background: none; }
    .take-row.is-changed { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--primary); padding-left: 12px; }
    .take-person .avatar { width: 36px; height: 36px; font-size: 12.5px; }
    .take-names { flex-direction: column; align-items: flex-start; gap: 0; }
    .take-names .person-name { font-size: 15px; }
    .take-names .person-meta { font-size: 12.5px; }
    .mark-choice { background: none; padding: 0; gap: 8px; }
    .mark span {
        display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px;
        border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-muted);
    }
    .mark span:hover { background: var(--surface-2); }
    .mark-present input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: none; }
    .mark-absent input:checked + span, .mark-late input:checked + span { background: var(--warning-tint); border-color: #e9b77a; color: var(--warning-text); }
    .mark-permission input:checked + span { background: var(--dark-chip); border-color: var(--dark-chip); color: var(--surface); box-shadow: none; }
    .mark-none input:checked + span { border-style: dashed; color: var(--text); }
    .was { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
    .take-note-input { grid-column: 1 / -1; display: none; margin: 2px 0 4px 48px; width: calc(100% - 48px); border-color: var(--border); background: var(--surface); }
    .take-row.show-note .take-note-input { display: block; }
    .take-row.has-note .note-toggle { color: var(--tint-text); }
    .take-bar {
        position: sticky; bottom: 16px; align-self: center; width: max-content; margin: 8px auto 0;
        padding: 8px 8px 8px 20px; border: 0; border-radius: 28px; background: #1c2a23; color: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }
    [data-theme="dark"] .take-bar { background: var(--border); }
    .take-bar .take-summary { margin-right: 12px; }
    .take-bar .btn-quiet { color: #fff; background: none; }
    .take-bar .btn-quiet:hover { background: rgba(255, 255, 255, .1); }
    .take-bar .btn-primary { background: var(--primary); }
    [data-theme="dark"] .take-bar .btn-primary { color: var(--on-primary); }
    .take-bar:not(.is-dirty):not(.is-new) .take-save { opacity: .45; pointer-events: none; }
    .take-clear { text-align: left; }
}
@media (max-width: 1100px) {
    .take-layout { grid-template-columns: 1fr; }
}
.count-box b { background: none !important; border: 0 !important; min-width: 0; height: auto; padding: 0; display: inline; }
@media (min-width: 861px) {
    .mark-none:not(:has(input:checked)) { display: none; }
}

/* Section: Scores (design "Classroom style · Scores", "Result /100") */
.main-flush { padding: 0 0 40px; gap: 0; }
.main-flush > .banner { margin: 12px 24px 0; }
.score-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.seg button, .seg a {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0;
    background: var(--surface); font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.seg button .num, .seg a .num { font-weight: 500; }
.seg [aria-pressed="true"], .seg .is-active { background: var(--tint); color: var(--tint-text); }
.adds-up { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.adds-up.is-ok { color: var(--tint-text); }
.adds-up.is-warn, .adds-up.is-warn a { color: var(--warning-text); }
.fix-chip { font-size: 13px; padding: 6px 12px; border-radius: 16px; background: var(--warning-tint); color: var(--warning-text); font-weight: 600; }
.fix-chip.is-quiet { background: none; color: var(--text-muted); font-weight: 400; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13.5px; }
.grid-scroll { overflow-x: auto; }
.grid-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.grid-table th, .grid-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid-table th { height: 116px; vertical-align: bottom; text-align: left; padding: 10px 12px; font-weight: 500; background: var(--surface); }
.grid-table td { height: 52px; padding: 0 14px; text-align: right; font-size: 15px; }
.grid-table .grid-name { position: sticky; left: 0; z-index: 1; width: 300px; min-width: 240px; text-align: left; background: var(--surface); }
.grid-table th.grid-name { vertical-align: bottom; font-size: 13px; }
.grid-top { display: block; font-size: 12px; color: var(--text-muted); min-height: 18px; }
.grid-col-name { display: block; margin: 4px 0 6px; font-size: 14px; font-weight: 700; color: var(--tint-text); white-space: normal; line-height: 1.25; }
.grid-col-name.plain { color: var(--text); }
.grid-out { display: block; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.grid-col { min-width: 96px; }
.grid-half .grid-col-name { color: var(--text); }
td.grid-half { font-weight: 700; }
.grid-average td { background: var(--surface-2); font-weight: 600; }
.grid-average .grid-name { background: var(--surface-2); }
.avatar-soft { background: var(--tint); color: var(--tint-text); font-size: 16px; }
.grid-table .person { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.grid-table .person .avatar { width: 32px; height: 32px; }
.grid-table .person-name { font-weight: 500; }
.grid-table .person-meta { font-size: 12px; }
.score-cell .score-input {
    width: 100%; height: 50px; border: 0; background: transparent; text-align: right;
    font: inherit; font-size: 15px; color: var(--text); padding: 0;
}
.score-cell .score-input::placeholder { color: var(--text-muted); font-size: 12px; }
.score-cell:focus-within { box-shadow: inset 0 0 0 2px var(--primary); background: var(--surface); }
.score-cell .score-input:focus, .score-cell .score-input.is-empty:focus { outline: none; border: 0; box-shadow: none; background: transparent; font-weight: 700; }
.score-cell .score-input:focus::placeholder { font-weight: 400; }
.score-cell:has(.score-input.is-invalid) { background: var(--warning-tint); box-shadow: inset 0 0 0 2px var(--warning-text); }
.score-cell .score-input.is-invalid { color: var(--warning-text); font-weight: 700; }
html.js .grid-table.only-midterm [data-part="FINAL"], html.js .grid-table.only-final [data-part="MIDTERM"] { display: none; }
.score-legend { padding: 10px 24px; font-size: 12.5px; }
.score-bar { margin-top: 0; }
.result-stats { display: flex; gap: 36px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.result-stats b { display: block; font-size: 22px; font-weight: 700; }
.result-table th { height: 58px; }
.result-table td { text-align: right; }
.score-history { margin: 20px 24px 0; }

/* Section: Assessment setup (design "Classroom style · Assessment setup") */
.title-with-back { display: flex; align-items: center; gap: 14px; }
.back-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 600; }
.parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.parts-grid .part-block { padding: 0; overflow: hidden; }
.parts-grid .part-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; margin: 0; }
.parts-grid .part-head :is(h2, h3) { font-size: 17px; }
.parts-grid .points-badge { font-size: 14px; font-weight: 700; }
.parts-grid .component-head { background: var(--surface-2); padding: 8px 18px; margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.parts-grid .component-row { padding: 6px 18px; border-bottom: 1px solid var(--border); }
.parts-grid .component-empty { padding: 14px 18px; }
.parts-grid .part-actions { display: flex; gap: 4px; padding: 10px 10px; }
@media (max-width: 1100px) { .parts-grid { grid-template-columns: 1fr; } }
.parts-grid .component-head, .parts-grid .component-row { grid-template-columns: 44px minmax(0, 1fr) 118px 58px 58px 30px; gap: 6px; }
.parts-grid .component-row select.input { padding-left: 8px; padding-right: 4px; font-size: 13.5px; }
.parts-grid .component-count, .parts-grid .component-head > :nth-child(6) { display: none; }
.parts-grid .component-row .input { min-height: 40px; }

/* Section: Students tab (design "Class · Students tab") */
.roster { gap: 32px; }
.roster-title { display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 600; color: var(--tint-text); }
.roster section > .roster-title { padding-bottom: 12px; border-bottom: 1px solid var(--primary); }
.roster-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--primary); }
.roster-head .roster-title { margin-right: auto; }
.roster-row { display: flex; align-items: center; gap: 16px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.roster-row .muted { margin-left: auto; font-size: 13.5px; }
.avatar-gray { background: #5b6a63; color: #fff; }
.roster-line {
    display: grid; grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1fr) 110px 130px 80px;
    gap: 16px; align-items: center; min-height: 58px; padding: 0 8px; border-bottom: 1px solid var(--border);
}
.roster-line-head { min-height: 44px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.roster-line .person-name { color: var(--text); font-weight: 600; }
.roster-flag { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.roster-note { font-size: 13px; padding-top: 10px; }
@media (max-width: 860px) {
    .roster-line { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .roster-line > :nth-child(3), .roster-line > :nth-child(5), .roster-line > :nth-child(6) { display: none; }
    .roster-line-head { display: none; }
}

/* Section: Settings (design "Class · Settings tab") */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.box-pad { padding: 20px; }
.box-pad .box-title { font-size: 16px; margin-bottom: 12px; }
.box-title-row { display: flex; align-items: center; justify-content: space-between; }
.box-pad .field { margin-bottom: 14px; }
.box-pad .field:last-child { margin-bottom: 0; }
.input.ro { display: flex; align-items: center; background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
/* Profile · Colour: school colour, the six presets, and Custom (the colour picker, rainbow until one is chosen). */
.colour-choice { display: grid; gap: 8px; }
.colour-swatches { display: flex; gap: 10px; flex-wrap: wrap; padding: 5px; margin: -5px; }
.colour-swatches .swatch { width: 36px; height: 36px; font-size: 16px; background: var(--swatch); }
.colour-swatches .swatch:focus-visible, .swatch-custom:focus-within { outline: 2px solid var(--text); outline-offset: 3px; }
.colour-swatches .swatch[aria-pressed="false"] .ti-check { display: none; }
.swatch-custom { position: relative; }
.colour-swatches .swatch-custom:not(.is-set) { background: conic-gradient(#d93025, #f9ab00, #1e8e3e, #1a73e8, #9334e6, #d93025); }
.swatch-custom.is-set { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.colour-hint { font-size: 13px; }
.slot-line { display: grid; grid-template-columns: 56px 1fr 70px 90px; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.slot-note { margin-top: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-of-type { border-bottom: 0; }
.switch { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--border-strong); cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.is-on { background: var(--primary); }
.switch.is-on::after { left: 21px; }
.switch.is-fixed { cursor: default; opacity: .85; }
.threshold-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-danger { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.share-facts { display: flex; gap: 28px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.share-facts dt { font-size: 12.5px; color: var(--text-muted); }
.share-facts dd { margin: 0; font-weight: 700; }
@media (max-width: 1100px) { .settings-grid { grid-template-columns: 1fr; } }

/* Timetable (design "Classroom style · Timetable · week, session popover") */
.timetable-page { gap: 12px; }
.tt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-toolbar h1 { font-size: 26px; font-weight: 800; }
.tt-range { font-size: 16px; margin-right: 8px; }
.type-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.legend-solid, .legend-practice { width: 14px; height: 14px; border-radius: 4px; background: var(--primary); }
.legend-practice { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, color-mix(in srgb, var(--primary) 75%, #fff) 3px 6px); }
.timetable { padding: 0; border: 0; }
.tt-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tt-day { background: none !important; color: var(--text-muted) !important; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tt-day b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--text); }
.tt-day.is-today span { color: var(--tint-text); font-weight: 700; }
.tt-day.is-today b { background: var(--primary); color: var(--on-primary); }
.tt-col.is-today { background-color: var(--surface-2); }
.tt-item { position: absolute; left: 3px; right: 3px; z-index: 1; }
.tt-item[open] { z-index: 6; }
.tt-item > summary { list-style: none; }
.tt-item > summary::-webkit-details-marker { display: none; }
.tt-item .tt-block {
    position: static; height: 100%; cursor: pointer; color: #fff; border: 0; background-color: var(--hero);
    font-size: 12.5px; padding: 6px 9px; border-radius: 8px;
}
.tt-item .tt-block:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.tt-item[open] .tt-block { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.tt-block.is-practice { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px); border: 0; }
.tt-item .tt-block.is-cancelled {
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px) !important;
    color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); opacity: 1;
}
.tt-block-top { display: flex; align-items: center; gap: 6px; }
.tt-block-top strong { font-size: 14px; }
.tt-block .tt-meta { color: inherit; opacity: .9; }
.tt-mark { margin-left: auto; font-size: 14px; }
.tt-alert { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--warning-text); font-size: 11px; font-weight: 800; }
.tt-tag { padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); }
.is-cancelled .tt-tag { background: var(--border); color: var(--text-muted); }
.is-cancelled strong { text-decoration: line-through; }
.tt-pop { left: calc(100% + 8px); top: 0; width: 300px; padding: 18px; cursor: default; }
.pop-left .tt-pop { left: auto; right: calc(100% + 8px); }
.tt-pop-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.tt-pop-dot { width: 14px; height: 14px; border-radius: 4px; }
.tt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.tt-facts dt { font-size: 12.5px; color: var(--text-muted); }
.tt-facts dd { margin: 0; font-size: 14px; }
.tt-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-wide { display: flex; margin-bottom: 8px; }
.seg-wide button { flex: 1; justify-content: center; }
@media (max-width: 860px) {
    .tt-item { position: static; height: auto !important; }
    .tt-item .tt-block { height: auto; }
    .tt-pop { position: static; width: auto; margin-top: 6px; box-shadow: none; }
}

/* Students (design "Classroom style · Students · all") */
.people { gap: 16px; }
.people-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.people-line {
    display: grid; grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 80px 100px 50px;
    gap: 16px; align-items: center; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text);
}
.people-line:last-child { border-bottom: 0; }
a.people-line:hover { background: var(--surface-2); text-decoration: none; }
.people-head { min-height: 42px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.people-end { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-left { margin-right: auto; }
@media (max-width: 860px) {
    .people-line { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
    .people-line > :nth-child(3), .people-line > :nth-child(4), .people-line > :nth-child(5) { display: none; }
    .people-head { display: none; }
}

/* Student detail (design "Classroom style · Student detail") */
.student-page { gap: 18px; }
.student-card { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: var(--radius); background: var(--surface-2); }
.student-card-text { flex: 1; min-width: 0; }
.student-card h1 { font-size: 28px; }
.student-km { font-size: 18px; font-weight: 500; color: var(--text-muted); }
.student-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 8px 0 0; }
.student-facts dt { font-size: 12.5px; color: var(--text-muted); }
.student-facts dd { margin: 0; }
.student-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.sub-title { font-size: 16px; font-weight: 700; margin: 6px 0 10px; }
.student-section-row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 100px 90px; gap: 14px; align-items: center;
    padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.student-section-row:hover { text-decoration: none; box-shadow: 0 1px 3px rgba(20, 60, 40, .14); }
.student-section-row .tile { width: 40px; height: 40px; }
.student-section-row .grow small, .student-section-row .fact small { display: block; font-size: 12.5px; }
.note-line { padding: 4px 0; }
.recent-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.status-tag { padding: 2px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: var(--tint); color: var(--tint-text); }
.status-tag.is-absent, .status-tag.is-late { background: var(--warning-tint); color: var(--warning-text); }
.status-tag.is-permission { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 1000px) { .student-cols { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
    .student-card { flex-wrap: wrap; padding: 18px; }
    .student-section-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .student-section-row > :nth-child(3), .student-section-row > :nth-child(5) { display: none; }
}

/* Setup · Calendars (design "Setup · Semester calendars") */
.cal-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-line { display: grid; grid-template-columns: minmax(0, 1.2fr) 120px 120px 60px minmax(0, 2.4fr) 20px; gap: 16px; align-items: center; min-height: 56px; padding: 6px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.cal-line:last-child { border-bottom: 0; }
a.cal-line:hover { background: var(--surface-2); text-decoration: none; }
.cal-head { min-height: 42px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cal-term { display: block; font-size: 12px; }
.cal-months, .cal-track { position: relative; height: 22px; }
.cal-months span { position: absolute; top: 2px; font-size: 12px; font-weight: 500; }
.cal-track { height: 34px; border-radius: 8px; background: var(--surface-2); }
.cal-track i { position: absolute; top: 9px; height: 16px; border-radius: 5px; }
.cal-term-bar { background: var(--tint-line); }
[data-theme="dark"] .cal-term-bar { background: #2b5a45; }
.cal-exam { top: 4px !important; height: 26px !important; width: 7px; background: var(--primary); border-radius: 3px !important; }
.cal-today { top: 0 !important; height: 34px !important; width: 2px; background: var(--danger); border-radius: 0 !important; }
.cal-track .warn-icon { position: absolute; left: 8px; top: 7px; }
.cal-legend { display: flex; gap: 20px; font-size: 13px; }
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key-term, .cal-key-exam, .cal-key-today { width: 14px; height: 10px; border-radius: 3px; background: var(--tint-line); }
.cal-key-exam { width: 5px; height: 14px; background: var(--primary); }
.cal-key-today { width: 2px; height: 14px; background: var(--danger); }
@media (max-width: 860px) {
    .cal-line { grid-template-columns: minmax(0, 1fr) auto 20px; }
    .cal-line > :nth-child(2), .cal-line > :nth-child(3), .cal-line > :nth-child(5) { display: none; }
}

/* Setup · Groups cards (design "Setup · Groups") and Courses list */
.group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); background: var(--surface); }
.g-card:hover { text-decoration: none; box-shadow: var(--shadow-card); }
.g-card.is-editing { box-shadow: 0 0 0 2px var(--primary); }
.g-head { position: relative; display: flex; flex-direction: column; height: 104px; padding: 14px 18px; overflow: hidden; background: var(--tint); }
.g-head .art { color: rgba(11, 110, 76, .07); font-size: 80px; bottom: -18px; }
.g-code { position: relative; font-size: 22px; }
.g-code .muted { font-size: 16px; font-weight: 500; }
.g-sub { position: relative; font-size: 13.5px; color: var(--text-muted); }
.g-badge {
    position: absolute; right: 18px; bottom: -22px; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface); color: var(--tint-text); font-weight: 800; font-size: 12.5px; box-shadow: 0 0 0 4px var(--surface), 0 1px 4px rgba(0,0,0,.15);
}
.g-head { overflow: visible; }
.g-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 18px 14px; font-size: 14px; }
.g-facts small { display: block; font-size: 12.5px; color: var(--text-muted); }
.g-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-top: 1px solid var(--border); }
.g-foot .class-count { margin-right: auto; }
.g-sections { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 13.5px; }
.course-line { display: grid; grid-template-columns: 36px 90px minmax(0, 1fr) 100px minmax(0, 1.4fr) 80px 20px; gap: 16px; align-items: center; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.course-line:last-child { border-bottom: 0; }
a.course-line:hover { background: var(--surface-2); text-decoration: none; }
.tile-soft { background: var(--tint); color: var(--tint-text); }
@media (max-width: 1100px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .group-grid { grid-template-columns: 1fr; }
    .course-line { grid-template-columns: 36px 70px minmax(0, 1fr) 20px; }
    .course-line > :nth-child(4), .course-line > :nth-child(5) { display: none; }
}

/* Admin · Overview */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.stat-tiles .box { padding: 18px; }
.stat-tiles b { display: block; font-size: 30px; font-weight: 800; margin-top: 4px; }
.overview-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.box-flush { padding: 0; overflow: hidden; }
.box-head { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.box-empty { padding: 16px 18px; }
.attention-line { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--text); }
.attention-line:last-child { border-bottom: 0; }
a.attention-line:hover { background: var(--surface-2); text-decoration: none; }
.attention-line .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attention-line .grow .muted { font-size: 13px; }
@media (max-width: 860px) { .stat-tiles { grid-template-columns: 1fr 1fr; } .overview-two { grid-template-columns: 1fr; } }

/* Viewer (design "Viewer · Shared with you") */
.shared-layout { display: block; }
.lecturer-circle { color: #fff; font-size: 16px; font-weight: 700; }
.shared-open { max-width: 1080px; }

/* Sign in and set password (design "Classroom style · Sign in", "Set password"): one card on a soft green page. */
body.auth, body.auth-single {
    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px;
    background: linear-gradient(180deg, var(--tint) 0%, var(--surface-2) 100%);
}
[data-theme="dark"] body.auth { background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); }
.auth-panel { display: none; }
.auth-side {
    width: min(448px, 100%); padding: 40px 40px 28px; border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: 0 1px 2px rgba(20, 60, 40, .08), 0 20px 50px -20px rgba(20, 60, 40, .25);
}
.auth-top { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.auth-top .icon-btn, .auth-top [data-theme-toggle] { display: none; }
.auth-logo { height: 48px; }
.auth-main { padding: 0; align-items: stretch; }
.auth-form { width: 100%; gap: 18px; }
.auth-form h1 { font-size: 22px; }
.auth-form .input { min-height: 48px; border-radius: 10px; font-size: 15px; }
.auth-form .btn-block { min-height: 48px; border-radius: 24px; font-size: 15px; margin-top: 4px; }
.auth-foot { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* Profile (design "Classroom style · Profile"): a mint header with the photo, name and role. */
.profile-hero { background: var(--surface-2); color: var(--text); padding: 24px; }
.profile-hero h1 { font-size: 28px; }
.profile-hero .avatar-lg { width: 88px; height: 88px; font-size: 30px; }
.photo-pick, .photo-remove { color: var(--tint-text); }
.profile-hero .icon-btn { border-color: var(--border); color: var(--text-muted); background: var(--surface); }
.is-away td, .is-withdrawn { opacity: .6; }
.row-menu { position: relative; }
.row-menu > summary { list-style: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu .menu { right: 0; top: calc(100% + 4px); width: 240px; }
.name-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.status-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warning-tint); color: var(--warning-text); font-size: 14px; }
.status-note.is-info { background: var(--surface-2); color: var(--text-muted); }
.seg-radio label { flex: 1; display: flex; }
.seg-radio input { position: absolute; opacity: 0; }
.seg-radio span { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.seg-radio input:checked + span { background: var(--tint); color: var(--tint-text); }
.move-line { display: grid; grid-template-columns: 1fr 20px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.grid-top { display: flex; align-items: center; justify-content: space-between; }
.col-menu summary.icon-btn { width: 26px; height: 26px; font-size: 15px; }
.col-menu .menu { left: auto; right: -8px; z-index: 20; font-weight: 500; }
.rule-card { max-width: 640px; }
.rule-line { display: grid; grid-template-columns: 14px 120px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rule-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); }
.rule-dot.is-present { background: var(--primary); }
.rule-dot.is-absent { background: var(--warning-text); }
.rule-line .seg { justify-self: start; }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.choice-card:has(input:checked) { border: 2px solid var(--primary); padding: 13px 15px; }
.choice-card input { accent-color: var(--primary); margin-top: 3px; }
.choice-card small { display: block; }
.course-sub { font-size: 18px; font-weight: 400; }
.ended-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-2); }
.ended-banner i { font-size: 20px; color: var(--tint-text); }
.close-line { display: grid; grid-template-columns: 24px minmax(0, 1.4fr) 70px 1fr 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.close-line-head { cursor: default; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.close-line input { accent-color: var(--primary); width: 16px; height: 16px; }
.close-line small, .archive-line small { display: block; font-size: 12px; }
.archive-block { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.archive-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.archive-line { display: grid; grid-template-columns: 32px minmax(0, 1.6fr) 80px 80px 90px 100px 100px; gap: 14px; align-items: center; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.archive-line:last-child { border-bottom: 0; }
.archive-line-head { min-height: 40px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.archive-line .name-cell { color: var(--text); }
.dialog-title { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
#close-dialog { width: min(640px, calc(100vw - 32px)); }
.seg-radio span { padding: 0 16px; white-space: nowrap; }
.rule-line .seg-radio span { height: 34px; }
.seg button, .seg a { white-space: nowrap; }
[data-reason-choice] button { flex: 1; justify-content: center; padding: 0 12px; }
/* Course logos: an uploaded picture sits on white inside badges, tiles and circles. */
.course-logo { width: 100%; height: 100%; object-fit: contain; }
.has-logo { background: #fff !important; padding: 3px; overflow: hidden; }
.dot .ti { font-size: 17px; }
.dot-sq .ti { font-size: 16px; }
.hero-title { position: relative; display: flex; align-items: center; gap: 14px; }
.hero-mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--primary); font-size: 28px; }
.hero-mark.has-logo { padding: 6px; }
.mini-mark { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--primary); font-size: 18px; }
.class-icon.has-logo { padding: 8px; }
.tile.has-logo { padding: 4px; border: 1px solid var(--border); }
.tile-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; }
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-actions label.btn { cursor: pointer; }
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 148px; overflow-y: auto; padding: 8px; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.icon-choice { position: relative; display: grid; place-items: center; height: 40px; border-radius: 10px; color: var(--text-muted); font-size: 22px; cursor: pointer; }
.icon-choice:hover { background: var(--surface-2); color: var(--text); }
.icon-choice input { position: absolute; opacity: 0; pointer-events: none; }
.icon-choice:has(input:checked) { background: var(--tint); color: var(--tint-text); box-shadow: inset 0 0 0 2px var(--primary); }
.icon-choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.icon-choice-auto { font-size: 12px; font-weight: 700; }
.scoring-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.scoring-line .grow { flex: 1; min-width: 0; }
.scoring-line small { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-actions { flex-wrap: wrap; }
/* The error page (design "States · Page not found", "No access"): centred in the page, no status code. */
.error-main { display: grid; place-items: center; min-height: calc(100vh - 160px); }
.error-page .error-main { min-height: 100vh; }
.error-hero p { max-width: 44ch; }
.empty-hero-icon.is-muted { background: var(--surface-2); color: var(--text-muted); }
.empty-hero-icon.is-warn { background: var(--warning-tint); color: var(--warning-text); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* "Signed out" dialog (design "Account · Session expired"). */
#signed-out-dialog { width: min(440px, calc(100vw - 32px)); }
.dialog-icon { width: 56px; height: 56px; font-size: 26px; }
.contents { display: contents; }
/* Skeleton loading (design "States · Loading"): the outline of the next page, shimmering. */
.skeleton { display: flex; flex-direction: column; gap: 18px; }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sk-base) 0, var(--sk-shine) 120px, var(--sk-base) 240px); background-size: 800px 100%; animation: sk-shimmer 1.4s linear infinite; }
@keyframes sk-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
:root { --sk-base: var(--surface-2); --sk-shine: var(--bg); }
:root[data-theme="dark"] { --sk-base: var(--surface-2); --sk-shine: var(--border); }
.sk-head, .sk-bar { display: flex; align-items: center; gap: 12px; }
.sk-title { width: 220px; height: 34px; }
.sk-pill { width: 130px; height: 40px; border-radius: 20px; }
.sk-search { width: 320px; max-width: 60%; height: 40px; border-radius: 20px; }
.sk-chip { width: 90px; height: 36px; border-radius: 18px; }
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.sk-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 262px; display: flex; flex-direction: column; }
.sk-banner { height: 118px; border-radius: 0; }
.sk-card-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sk-line { height: 14px; width: 60%; }
.sk-line.w20 { width: 20%; } .sk-line.w30 { width: 30%; } .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w70 { width: 70%; } .sk-line.w80 { width: 80%; }
.sk-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sk-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.sk-row:last-child { border-bottom: 0; }
.sk-row-head { min-height: 44px; background: var(--surface-2); }
.sk-row .sk-line { flex: none; }
.sk-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.sk-cell { width: 56px; height: 14px; margin-left: auto; flex: none; }
.sk-cell + .sk-cell { margin-left: 24px; }
.sk-hero { height: 220px; border-radius: var(--radius); }
.sk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
.sk-split > div { display: flex; flex-direction: column; gap: 12px; }
.sk-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .sk-split { grid-template-columns: 1fr; } .sk-cell:nth-of-type(n+3) { display: none; } }

.archive-instead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.archive-instead > span { flex: 1; }
.archive-instead small { display: block; font-size: 12.5px; }

/* ---------- Admin · Appearance (design "Admin · Appearance (theme)") ---------- */
.appearance-page .page-head { gap: 10px; }
.appearance-page .page-head h1 { margin-right: auto; }
.appearance-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .appearance-grid { grid-template-columns: 1fr; } }
.appearance-logo { display: grid; place-items: center; width: 140px; height: 64px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.appearance-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preset-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.preset { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.preset > i { width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset:has(input:checked) { border: 2px solid var(--swatch); padding: 9px 5px 7px; }
.preset:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.preset-check { display: none; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); color: #fff; font-size: 12px; place-items: center; }
.preset:has(input:checked) .preset-check { display: grid; }
.custom-colour { display: grid; grid-template-columns: 180px auto; gap: 14px; align-items: end; margin-top: 14px; }
.colour-input { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.colour-input input[type=color] { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.colour-input input[name=accent] { border: 0; background: transparent; font: inherit; font-family: var(--font-mono); width: 100%; outline: none; color: var(--text); }
.contrast-note { display: inline-flex; align-items: center; gap: 6px; height: 40px; font-weight: 600; font-size: 13.5px; }
.contrast-note.is-ok { color: var(--tint-text); }
.contrast-note.is-warn { color: var(--warning-text); }
.shade-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.shade-row span { width: 44px; height: 28px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mini-app { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 14px; background: var(--bg); color: var(--text); }
.mini-mode { position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.mini-top { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mini-top img { height: 22px; }
.mini-top span:not(.top-space):not(.mini-avatar) { color: var(--text-muted); }
.mini-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700; }
.mini-body { display: grid; grid-template-columns: 110px 1fr; min-height: 190px; }
.mini-nav { padding: 8px 8px 8px 0; border-right: 1px solid var(--border); font-size: 12px; }
.mini-nav span { display: block; padding: 7px 12px; border-radius: 0 14px 14px 0; }
.mini-nav .is-on { background: var(--tint); color: var(--tint-text); font-weight: 700; }
.mini-main { padding: 12px; }
.mini-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mini-banner-strip { height: 52px; padding: 8px 10px; background: var(--hero); color: #fff; font-weight: 700; font-size: 14px; }
.mini-card-foot { padding: 8px 10px; font-size: 11.5px; color: var(--text-muted); }
.mini-btn { display: inline-flex; height: 28px; align-items: center; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 700; margin: 10px 6px 0 0; border: 1px solid var(--border); color: var(--primary); }
.mini-btn.is-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.mini-tag { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 700; background: var(--tint); color: var(--tint-text); }
/* Side menu footer (design): who made it and the version, at the bottom. */
.nav-foot { margin: auto 0 0; padding: 14px 24px 6px; display: flex; flex-direction: column; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.today-quiet { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 14px; }
.scoring-start { max-width: 760px; margin: 40px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.scoring-start .choice-card .grow { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.scoring-start .choice-card .btn { margin-top: 4px; }
@media (max-width: 640px) { .scoring-start .choice-cards { grid-template-columns: 1fr; } }

/* ---------- Profile (design "Classroom style · Profile") ---------- */
.profile-page { display: flex; flex-direction: column; gap: 22px; }
.profile-head { display: flex; align-items: center; gap: 22px; padding: 24px; border-radius: var(--radius); background: var(--surface-2); }
.profile-head h1 { font-size: 28px; font-weight: 800; }
.profile-head p { margin: 4px 0 0; }
.settings-list { border: 1px solid var(--border); border-radius: var(--radius); }
.settings-list > h2 { margin: 0; padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--border); }
.setting-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 56px; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 14.5px; }
.settings-list > h2 + .setting-row { border-top: 0; }
.setting-key { color: var(--text-muted); font-size: 13.5px; }
.setting-value { min-width: 0; overflow-wrap: anywhere; }
.setting-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.setting-edit, [data-edit-row] [data-edit-cancel], [data-edit-row] [data-edit-save] { display: none; }
[data-edit-row].is-editing .setting-edit { display: flex; flex-direction: column; gap: 4px; }
[data-edit-row].is-editing [data-show], [data-edit-row].is-editing [data-edit-start] { display: none; }
[data-edit-row].is-editing [data-edit-cancel], [data-edit-row].is-editing [data-edit-save] { display: inline-flex; }
.profile-signout { display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
    .setting-row { grid-template-columns: 1fr auto; }
    .setting-key { grid-column: 1 / -1; }
    .profile-head { flex-wrap: wrap; }
}

/* ---------- Admin · Users, a user's page (design "Admin · Users", "Admin · User detail") ---------- */
.user-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) 80px 120px 110px; gap: 14px; align-items: center; min-height: 56px; padding: 0 16px; border-top: 1px solid var(--border); color: var(--text); font-size: 14px; }
.user-line.people-head { min-height: 42px; border-top: 0; }
a.user-line:hover { background: var(--surface-2); text-decoration: none; }
.user-line.is-muted .person-name { color: var(--text-muted); }
@media (max-width: 900px) { .user-line { grid-template-columns: minmax(0, 1fr) auto; } .user-line > :nth-child(n+3):not(:nth-child(5)) { display: none; } }
.user-page { display: flex; flex-direction: column; gap: 20px; }
.user-facts { margin-top: 10px; }
.role-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.switch-line { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.switch-line input { position: absolute; opacity: 0; }
.switch-box { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--border-strong); transition: background .15s; }
.switch-box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch-line input:checked + .switch-box { background: var(--primary); }
.switch-line input:checked + .switch-box::after { transform: translateX(16px); }
.switch-line input:focus-visible + .switch-box { outline: 2px solid var(--primary); outline-offset: 2px; }
.activity-row { display: flex; align-items: center; gap: 12px; }
.move-plan { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.move-plan.is-warn { color: var(--warning-text); font-weight: 600; }
#disable-dialog .choice-card select { margin-top: 8px; max-width: 280px; }
.profile-head .photo-edit { position: relative; }
.profile-head .photo-pick { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-2); background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; }
.profile-head .photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.settings-list .segmented { display: inline-flex; width: auto; }
.user-line > .badge { justify-self: start; }

/* ---------- Attendance · All sessions (design "Attendance · All sessions") ---------- */
.attendance-all { display: flex; flex-direction: column; }
.att-head { padding: 16px 24px 0; }
.att-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.view-switch a { height: 38px; padding: 0 16px; text-decoration: none; }
.take-switch { margin: 12px 0 0; }
.switch-button { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; padding: 0; }
.switch-button:disabled { opacity: .5; cursor: default; }
.switch-button[aria-pressed="true"] .switch-box { background: var(--primary); }
.switch-button[aria-pressed="true"] .switch-box::after { transform: translateX(16px); }
.att-counted { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.att-grid { border-collapse: separate; border-spacing: 0; width: 100%; }
.att-grid th, .att-grid td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); white-space: nowrap; }
.att-grid thead th { height: 78px; vertical-align: bottom; padding: 8px 6px; font-weight: 500; text-align: center; font-size: 12px; color: var(--text-muted); }
.att-grid thead th a, .att-grid thead th .att-cancelled-head { display: block; color: inherit; text-decoration: none; }
.att-grid thead th a:hover b { color: var(--tint-text); text-decoration: underline; }
.att-grid thead th b { display: block; margin: 2px 0; font-size: 14px; font-weight: 700; color: var(--text); }
.att-month { display: block; min-height: 1em; }
.att-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-bottom: 2px; border-radius: 9px; background: var(--tint); color: var(--tint-text); font-size: 10.5px; font-weight: 700; }
.att-tag.is-gray { background: var(--surface-2); color: var(--text-muted); }
.att-grid .att-name { position: sticky; left: 0; z-index: 1; width: 250px; padding: 0 16px 0 24px; text-align: left; border-left: 0; background: var(--surface); }
.att-grid td { height: 50px; text-align: center; font-size: 13px; font-weight: 700; position: relative; }
.att-grid .is-cancelled { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface-2) 6px 12px); }
.att-grid thead th.is-cancelled b { text-decoration: line-through; color: var(--text-muted); }
.att-grid .is-latest { background: var(--fresh); }
.att-grid .att-sum { padding: 0 16px; text-align: right; font-size: 14px; font-weight: 600; }
.att-grid thead .att-sum small { display: block; font-size: 11px; }
.att-grid .att-sum .muted { font-weight: 500; }
.att-grid .att-sum.is-low { color: var(--warning-text); font-weight: 700; }
.att-grid .att-sum.is-low i { margin-right: 4px; }
.att-grid tr.is-away td { color: var(--text-muted); }
.att-grid tr.is-away .att-name { opacity: .75; }
.att-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 4px; border-radius: 7px; font-weight: 700; }
.att-mark.is-absent { background: var(--error-tint, #fdecec); color: var(--error-text); }
.att-mark.is-permission { background: var(--surface-2); color: var(--text-muted); }
.att-mark.is-late { background: var(--warning-tint); color: var(--warning-text); }
.att-mark.is-present { background: var(--tint); color: var(--tint-text); }
.att-mark.is-blank { border: 1px solid var(--border); }
.att-mark.is-cancelled-key { border: 1px solid var(--border); background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--surface-2) 4px 8px); }
.att-none { color: var(--text-faint); font-weight: 500; }
.att-tip { display: none; position: absolute; bottom: calc(100% - 4px); right: -8px; z-index: 5; padding: 8px 12px; border-radius: 8px; background: #1f2933; color: #fff; font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); }
.att-tip b, .att-tip span { display: block; }
.att-tip .muted { color: #b6bcc2; }
.att-grid td:hover .att-tip, .att-grid td:focus-within .att-tip { display: block; }
.att-grid tr.att-total td { background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.att-grid tr.att-total .att-name { background: var(--surface-2); }
.att-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; padding: 12px 24px; font-size: 12.5px; color: var(--text-muted); }
.att-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.att-legend .att-mark { min-width: 24px; height: 22px; font-size: 11px; }
[data-theme="dark"] .att-mark.is-absent { background: #3a1d1b; }
.att-toolbar .search-pill { width: 220px; flex: 0 1 220px; }

/* ---------- Khmer (Sprint 11): Khmer script first, no capitals or letter-spacing, taller lines for the stacked vowels ---------- */
.lang-switch { display: flex; justify-content: center; gap: 4px; margin-top: 20px; }
.lang-switch a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px; color: var(--text-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.lang-switch a:hover { background: var(--surface-2); }
.lang-switch a[aria-current="true"] { background: var(--tint); color: var(--tint-text); }
html:lang(km) { --font: 'Noto Sans Khmer', 'Noto Sans', system-ui, sans-serif; }
[lang="km"] { font-family: 'Noto Sans Khmer', 'Noto Sans', system-ui, sans-serif; }
html:lang(km) body { line-height: 1.6; }
html:lang(km) *, [lang="km"] { letter-spacing: 0 !important; text-transform: none !important; }

/* ---------- UX review fixes (Sprint 12) ---------- */
/* Sub-headings that are h2 for screen readers but keep the h3 size. */
.h-sub { font-size: 16px; font-weight: 700; }
.h-sub.search-group { font-size: 13.5px; font-weight: 600; }
/* "?" help: opens on tap or Enter as a small bubble (app.js), not only as a hover title. */
.help-dot { cursor: pointer; position: relative; }
.help-dot::after { content: ""; position: absolute; inset: -12px; }   /* a thumb-sized tap area around the small dot */
.help-pop {
    position: absolute; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 8px;
    background: var(--text); color: var(--surface); font-size: 13px; line-height: 1.45; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
/* Saved attendance with nothing changed: the save button rests (phones too). */
.take-bar:not(.is-dirty):not(.is-new) .take-save { opacity: .45; pointer-events: none; }
@media (max-width: 860px) {
    /* Page headers wrap instead of pushing the page sideways (Admin · Users). */
    .page-head { flex-wrap: wrap; }
    .page-head .search-pill { flex: 1 1 100%; }
    /* Home "Today": a quiet day reads as a sentence; class chips still scroll sideways. */
    .today-strip h2 { flex: none; white-space: nowrap; }
    .today-strip:has(.today-quiet) { flex-wrap: wrap; overflow-x: visible; }
    .today-quiet { flex: 1 1 100%; margin: 0; }
    .today-strip:has(.today-quiet) .top-space { display: none; }
    /* Score grid on a phone: a narrower name column and a save bar that sits on a surface, not over the rows. */
    .grid-table .grid-name { width: auto; min-width: 150px; max-width: 170px; }
    .grid-table .grid-name .person-name { overflow: hidden; text-overflow: ellipsis; }
    .score-toolbar { padding: 12px 16px; }
    .score-toolbar .seg { max-width: 100%; overflow-x: auto; }
    .take-bar.score-bar {
        padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
        background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    }
    .score-bar .take-summary { font-size: 13px; }
    /* Attendance on a phone: the floating Save sits on a band of page colour, so the row under it isn't tapped by mistake. */
    .take-bar:not(.score-bar) { background: linear-gradient(to top, var(--bg) 70%, transparent); padding-top: 14px; }
    .take-names .person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
/* Touch screens: small controls get a finger-sized target. */
@media (pointer: coarse) {
    .btn-sm { min-height: 40px; }
    .col-menu summary.icon-btn, .break-delete .icon-btn { width: 36px; height: 36px; }
    .link-btn, .btn-link { min-height: 36px; display: inline-flex; align-items: center; }
}
@media (max-width: 860px) {
    /* Admin · a user's Role: the three choices fit the row instead of being cut off. */
    .role-choice .seg { max-width: 100%; }
    .role-choice .seg label { flex: 1 1 auto; }
    .role-choice .seg span { padding-left: 12px; padding-right: 12px; }
}