/* Ruang kerja perusahaan: hierarki jelas, permukaan lembut dan aksen biru yang terkawal. */
:root {
  --bg: #f5f7fb; --surface: #fff; --surface-2: #f6f8fc; --surface-3: #edf1f8;
  --text: #1d293d; --text-muted: #5e6c80; --border: #e3e9f2; --border-strong: #ccd5e3;
  --primary: #3455ce; --primary-hover: #2947b7; --on-primary: #fff; --focus: #3455ce;
  --accent-soft: #edf2ff; --accent-text: #3455ce; --success: #1d7255; --success-bg: #edf8f2; --success-border: #c8e6d6;
  --info-bg: #edf2ff; --info-border: #d4defb;
  --shadow: 0 4px 18px rgb(30 50 85 / .045); --shadow-sm: 0 2px 5px rgb(30 50 85 / .025);
  --radius: 10px; --radius-lg: 16px; --sidebar-w: 16.25rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0e1522; --surface:#151e2e; --surface-2:#1b2638; --surface-3:#253248; --text:#edf2fa; --text-muted:#acb9cb;
    --border:#2a374c; --border-strong:#43516a; --primary:#a6bbff; --primary-hover:#c0cfff; --on-primary:#142347; --focus:#b7c8ff;
    --accent-soft:#233354; --accent-text:#b7c8ff; --success:#8dd8b3; --success-bg:#17382e; --success-border:#335848;
    --info-bg:#233354; --info-border:#40517c; --shadow:0 4px 18px rgb(0 0 0 / .12); --shadow-sm:0 2px 5px rgb(0 0 0 / .1);
  }
}
:root[data-theme="dark"] {
  --bg:#0e1522; --surface:#151e2e; --surface-2:#1b2638; --surface-3:#253248; --text:#edf2fa; --text-muted:#acb9cb;
  --border:#2a374c; --border-strong:#43516a; --primary:#a6bbff; --primary-hover:#c0cfff; --on-primary:#142347; --focus:#b7c8ff;
  --accent-soft:#233354; --accent-text:#b7c8ff; --success:#8dd8b3; --success-bg:#17382e; --success-border:#335848;
  --info-bg:#233354; --info-border:#40517c; --shadow:0 4px 18px rgb(0 0 0 / .12); --shadow-sm:0 2px 5px rgb(0 0 0 / .1);
}
body { font-size:.9375rem; }
h1 { font-size:clamp(1.6rem,2vw,2rem); font-weight:650; letter-spacing:-.035em; text-wrap:balance; }
h2 { font-weight:600; }
.eyebrow { letter-spacing:.06em; font-size:.7rem; color:var(--text-muted); }
.page-head { margin-bottom:1.75rem; }
.page-head p { max-width:70ch; }
.container-wide { padding:2rem; max-width:1540px; }
.workspace-bar { min-height:76px; background:var(--surface); padding: .75rem 2rem; position:relative; z-index:30; }
.crumbs { flex:1; min-width:0; font-size:.8125rem; }
.crumbs-current { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overview-head h1, .exam-card h2, .exam-card-title, .reminder-item strong, .setup-info dd { overflow-wrap:anywhere; }
.exam-card h2 a { display:flex; align-items:center; min-height:44px; }
.sidebar { background:var(--surface); }
.sidebar-head { min-height:76px; padding-inline:1.2rem .6rem; }
.brand-mark { border-radius:9px; width:32px; height:32px; }
.brand-name { font-size:.875rem; letter-spacing:-.025em; }
.sidebar-nav { padding:1rem .875rem; gap:1.25rem; }
.nav-group-toggle { min-height:44px; font-size:.625rem; letter-spacing:.09em; }
.nav-link { border-radius:9px; min-height:44px; font-size:.8125rem; }
.nav-link[aria-current="page"] { color:var(--accent-text); background:var(--accent-soft); }
.nav-link[aria-current="page"] .icon { color:var(--accent-text); }
.sidebar-foot .user-card { display:none; }
.sidebar-foot { padding:.75rem; }
.workspace-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.theme-control { display:flex; align-items:center; gap:.35rem; border:1px solid var(--border); background:var(--surface); border-radius:9px; padding-left:.65rem; }
.theme-control .icon { width:17px; height:17px; color:var(--text-muted); }
.theme-control select { min-height:44px; max-width:115px; border:0; font:inherit; font-size:.75rem; color:var(--text); background:transparent; padding:.4rem .4rem .4rem 0; cursor:pointer; }
.theme-control select option { background:var(--surface); color:var(--text); }
.topbar-divider { height:28px; width:1px; background:var(--border); margin-inline:.25rem; }
.topbar-popover { position:relative; }
.topbar-popover summary { list-style:none; cursor:pointer; }
.topbar-popover summary::-webkit-details-marker { display:none; }
.notification-trigger { position:relative; }
.notification-dot { position:absolute; top:9px; right:9px; width:7px; height:7px; background:var(--primary); border:2px solid var(--surface); border-radius:50%; }
.profile-trigger { display:flex; align-items:center; gap:.65rem; min-height:44px; border-radius:9px; padding:.2rem; }
.profile-trigger .avatar { background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--info-border); border-radius:10px; width:36px; height:36px; }
.profile-trigger > .icon { width:14px; height:14px; color:var(--text-muted); }
.profile-label { display:grid; line-height:1.4; max-width:160px; }
.profile-label strong { font-size:.75rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-label > span { color:var(--text-muted); font-size:.65rem; }
.topbar-menu { position:absolute; right:0; top:calc(100% + 12px); z-index:45; width:min(340px,calc(100vw - 32px)); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:1.1rem; }
.topbar-menu h2 { font-size:.9375rem; margin-bottom:.75rem; }
.reminder-item { display:grid; gap:.3rem; text-decoration:none; padding:.8rem .4rem; border-top:1px solid var(--border); font-size:.8125rem; }
.reminder-item span { color:var(--text-muted); font-size:.75rem; }
.profile-menu { width:250px; }
.profile-menu > a { display:flex; align-items:center; min-height:44px; font-size:.8125rem; text-decoration:none; }
.panel, .exam-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.panel { padding:1.5rem; min-width:0; }
.panel-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.panel-head h2 { margin:0; font-size:1rem; }
.panel-head p { color:var(--text-muted); font-size:.8125rem; margin:.35rem 0 0; }
.panel-head > a { min-height:44px; display:inline-flex; align-items:center; font-size:.8125rem; }
.btn { gap:.5rem; font-size:.8125rem; font-weight:550; padding-inline:1rem; }
.btn .icon { width:16px; height:16px; }
.btn-ghost { background:var(--surface); border-color:var(--border-strong); }
.btn:active { transform:translateY(1px); }
.input { border-color:var(--border-strong); border-radius:9px; font-size:.875rem; background:var(--surface); }
.input:focus { border-color:var(--focus); }
.field .label { font-size:.8125rem; font-weight:550; }
.help { font-size:.75rem; line-height:1.6; }
.muted { color:var(--text-muted); }
.overview-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.75rem; }
.overview-head p { margin:.5rem 0 0; color:var(--text-muted); }
.overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.overview-stat { padding:1.15rem 1.25rem; }
.overview-stat-top { display:flex; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:.75rem; }
.stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent-text); background:var(--accent-soft); }
.stat-icon .icon { width:17px; height:17px; }
.overview-stat strong { display:block; font-size:1.9rem; letter-spacing:-.04em; line-height:1.2; margin:.8rem 0 .35rem; font-weight:600; font-variant-numeric:tabular-nums; }
.overview-stat small { color:var(--text-muted); font-size:.7rem; }
.welcome-panel { padding:1.75rem; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr); gap:2rem; margin-bottom:1.75rem; }
.welcome-panel h2 { font-size:1.3rem; line-height:1.35; max-width:25ch; }
.welcome-panel p { max-width:60ch; color:var(--text-muted); font-size:.875rem; }
.welcome-steps { display:grid; gap:1rem; align-content:center; list-style:none; margin:0; padding:0; }
.welcome-steps li { display:flex; align-items:center; gap:.75rem; font-size:.8125rem; }
.step-dot { width:28px; height:28px; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; display:grid; place-items:center; font-size:.7rem; font-weight:600; color:var(--text-muted); flex:none; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(250px,1fr); gap:1.5rem; align-items:start; }
.assessment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.exam-card { padding:1.25rem; min-width:0; transition:border-color 150ms ease,box-shadow 150ms ease; }
.exam-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
.exam-card-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:center; margin-bottom:1.1rem; }
.course-tag { display:inline-flex; background:var(--accent-soft); color:var(--accent-text); padding:.3rem .55rem; border-radius:6px; font:600 .6875rem var(--font-mono); letter-spacing:.015em; }
.status-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:6px; font-size:.65rem; font-weight:500; color:var(--text-muted); background:var(--surface-2); }
.status-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-pill[data-state="warning"] { background:var(--warning-bg); color:var(--warning); }
.status-pill[data-state="info"] { background:var(--accent-soft); color:var(--accent-text); }
.status-pill[data-state="success"] { background:var(--success-bg); color:var(--success); }
.exam-card h2 { font-size:1rem; line-height:1.45; margin-bottom:.25rem; }
.exam-card h2 a { text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.exam-card-title { font-size:.8125rem; color:var(--text-muted); }
.exam-card-meta { display:flex; flex-wrap:wrap; gap:.6rem 1rem; color:var(--text-muted); font-size:.7rem; margin:1.2rem 0; }
.exam-card-meta span { display:flex; align-items:center; gap:.3rem; }
.exam-card-meta .icon { width:14px; height:14px; }
.exam-card-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:center; padding-top:1rem; border-top:1px solid var(--border); }
.exam-card-bottom > span { font-size:.7rem; color:var(--text-muted); }
.exam-card-bottom strong { color:var(--text); font-weight:550; }
.exam-card-bottom .btn { padding-inline:.65rem; font-size:.7rem; }
.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-icon { width:54px; height:54px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:16px; background:var(--accent-soft); color:var(--accent-text); }
.empty-icon .icon { width:24px; height:24px; }
.empty-state h2 { font-size:1.1rem; }.empty-state p { color:var(--text-muted); max-width:46ch; margin:0 auto 1.25rem; }
.quick-guide { list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
.quick-guide li { display:flex; gap:.7rem; }
.quick-guide strong { display:block; font-size:.8125rem; font-weight:550; }
.quick-guide p { margin:.3rem 0 0; font-size:.75rem; color:var(--text-muted); }
.subtle-warning { margin-top:1.25rem; background:var(--warning-bg); border:1px solid var(--warning-border); box-shadow:none; }
.subtle-warning h2 { font-size:.875rem; }.subtle-warning p { font-size:.75rem; }
.assessment-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.assessment-search { max-width:340px; flex:1 1 220px; }
.filter-pills { display:flex; gap:.25rem; flex-wrap:wrap; }
.filter-pills button { border:1px solid transparent; background:transparent; color:var(--text-muted); min-height:44px; padding:0 .8rem; border-radius:8px; cursor:pointer; font:500 .75rem var(--font-sans); }
.filter-pills button[aria-pressed="true"] { border-color:var(--border); color:var(--text); background:var(--surface); box-shadow:var(--shadow-sm); }
.guide-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:1.5rem; }
.guide-steps { list-style:none; padding:0; margin:0; display:grid; gap:2rem; }
.guide-steps li { display:flex; gap:1rem; }.guide-steps li > span { color:var(--accent-text); font:600 .8125rem var(--font-mono); padding-top:.2rem; }
.guide-steps h2 { font-size:1rem; }.guide-steps p,.guide-aside p { font-size:.875rem; color:var(--text-muted); }.guide-steps a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:1150px) { .profile-label { display:none; }.dashboard-columns { grid-template-columns:1fr; } }
@media (max-width:768px) {
  .container-wide { padding:1.25rem; }.workspace-bar { min-height:68px; padding:.6rem 1.25rem; }.sidebar-head { min-height:68px; }
  .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }.overview-head { align-items:flex-start; }.overview-head .btn { flex:none; }
  .welcome-panel,.guide-layout { grid-template-columns:1fr; }.assessment-grid { grid-template-columns:1fr; }.welcome-steps { grid-template-columns:1fr; }
  .theme-control .icon,.topbar-divider,.profile-trigger > .icon { display:none; }.theme-control { padding-left:.4rem; }.theme-control select { max-width:88px; font-size:.6875rem; }
  .workspace-tools { gap:.1rem; }.crumbs { font-size:.6875rem; }.crumbs > span:first-child,.crumbs-sep { display:none; }
  .topbar-popover:not(.profile-popover) .topbar-menu { right:-44px; }.profile-menu { width:min(250px,calc(100vw - 32px)); }
}
@media (max-width:420px) { .overview-head { flex-direction:column; }.overview-stat { padding:1rem; }.welcome-panel,.panel { padding:1.15rem; }.workspace-bar { gap:.35rem; padding-inline:.8rem; }.profile-trigger { gap:0; }.profile-trigger .avatar { width:30px; height:30px; }.workspace-tools .icon-btn { width:36px; } }
@media (prefers-reduced-motion:reduce) { .btn:active { transform:none; }.exam-card { transition:none; } }
.setup-progress { margin:0 0 1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:.5rem 1rem; }
.setup-progress ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.setup-progress li { min-width:0; }.setup-progress a { display:flex; align-items:center; gap:.65rem; padding:.6rem .25rem; min-height:60px; text-decoration:none; color:var(--text-muted); font-size:.75rem; font-weight:500; }
.setup-progress .assessment-step-number { width:28px; height:28px; flex:none; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); font-size:.75rem; }
.setup-progress .is-complete .assessment-step-number { background:var(--success-bg); color:var(--success); border-color:var(--success-border); }
.setup-progress .is-current a { color:var(--accent-text); }.setup-progress .is-current .assessment-step-number { color:var(--on-primary); background:var(--primary); border-color:var(--primary); }
.setup-layout { display:grid; grid-template-columns:minmax(0,2.45fr) minmax(245px,1fr); gap:1.5rem; align-items:start; }
.setup-main,.setup-aside { min-width:0; display:grid; gap:1.25rem; }.setup-aside { position:sticky; top:1.5rem; }
.setup-info > div { display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem; }.setup-info h2 { font-size:.875rem; margin:0; }
.setup-info dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; }
.setup-info dt { font-size:.7rem; color:var(--text-muted); margin-bottom:.35rem; }.setup-info dd { font-size:.8125rem; margin:0; font-weight:500; }
.csv-instructions { color:var(--text-muted); font-size:.8125rem; max-width:65ch; }
.assessment-upload { display:block; margin-top:1rem; }.csv-upload-zone { border:1px dashed var(--border-strong); border-radius:12px; background:var(--surface-2); padding:1.5rem; text-align:center; }
.csv-upload-zone .empty-icon { width:42px; height:42px; border-radius:12px; margin-bottom:.75rem; }.csv-upload-zone .empty-icon .icon { width:20px; height:20px; }
.csv-upload-zone .label { display:block; font-size:.875rem; margin-bottom:.4rem; }.csv-upload-zone > p { color:var(--text-muted); font-size:.7rem; }
.csv-file-control { position:relative; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem; max-width:100%; color:var(--text-muted); font-size:.75rem; border-radius:9px; }
.csv-file-control input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }.csv-file-control:focus-within { outline:2px solid var(--focus); outline-offset:4px; }
.csv-file-control > span:last-of-type { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }.upload-actions > a { font-size:.75rem; min-height:44px; display:flex; align-items:center; }
.setup-locked { display:flex; align-items:center; gap:.75rem; padding:1rem; border:1px dashed var(--border); border-radius:10px; background:var(--surface-2); }.setup-locked p { margin:0; color:var(--text-muted); font-size:.8125rem; }
.roster-success { display:flex; align-items:center; gap:.85rem; padding:.5rem 0 1rem; }.roster-success strong { font-size:.875rem; font-weight:550; }.roster-success p { margin:.3rem 0 0; color:var(--text-muted); font-size:.75rem; }
.roster-detail { border-top:1px solid var(--border); padding:.25rem 0; }.roster-detail > summary { min-height:44px; padding:.65rem 0; cursor:pointer; font-size:.8125rem; font-weight:500; }
.allocation-prompt { padding:1.25rem; background:var(--accent-soft); border-radius:12px; }.allocation-prompt h3 { font-size:.9375rem; }.allocation-prompt p { color:var(--text-muted); font-size:.8125rem; }.allocation-prompt form { margin-top:1.25rem; }.allocation-prompt .label { font-size:.75rem; }
.inline-input-action { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin-top:.4rem; }.inline-input-action .input { max-width:110px; }
.section-summaries { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; }.section-summaries > div { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:1rem; }.section-summaries span { display:block; font-size:.75rem; color:var(--text-muted); }.section-summaries strong { display:block; font-size:1.35rem; margin-top:.4rem; font-weight:600; }.section-summaries small { font-size:.7rem; color:var(--text-muted); font-weight:400; }
.panel-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }.panel-footer p { margin:0; flex:1 1 200px; }
.exam-sessions { display:grid; gap:1rem; }.exam-session { border:1px solid var(--border); border-radius:12px; overflow:hidden; }.exam-session-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; }.exam-session-head h3 { font-size:.9375rem; margin:0; }.exam-session-head p { font-size:.75rem; color:var(--text-muted); margin:.25rem 0 0; }
.exam-session-code { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; background:var(--surface-2); }.exam-session-code .label { display:block; font-size:.65rem; font-weight:400; color:var(--text-muted); }.exam-session-code code { display:block; white-space:nowrap; font:600 1.5rem var(--font-mono); letter-spacing:.1em; margin-top:.35rem; }.exam-session > .actions { padding:1rem 1.2rem; }
.assessment-section-form { max-width:none; border-top:1px solid var(--border); padding-top:1.5rem; }.assessment-section-form h3 { font-size:1rem; }.assessment-advanced { background:var(--surface-2); padding-inline:1rem; border:1px solid var(--border); border-radius:10px; }.assessment-advanced summary { font-size:.8125rem; }
.summary-list { margin:1.2rem 0; }.summary-list > div { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem 0; border-bottom:1px solid var(--border); font-size:.75rem; }.summary-list dt { color:var(--text-muted); }.summary-list dd { font-weight:550; margin:0; }
.setup-aside h2 { font-size:.875rem; }.next-step-note { padding:1rem; background:var(--accent-soft); border-radius:10px; }.next-step-note .eyebrow { color:var(--accent-text); font-size:.6rem; }.next-step-note p { margin:.4rem 0 0; font-size:.75rem; line-height:1.65; }
.setup-help > .icon { color:var(--accent-text); width:22px; height:22px; margin-bottom:.8rem; }.setup-help p { color:var(--text-muted); font-size:.75rem; }.setup-help a { min-height:44px; display:flex; align-items:center; font-size:.75rem; }
.assessment-danger { font-size:.75rem; color:var(--text-muted); padding:.5rem; }.assessment-danger summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }.assessment-danger form { margin-top:.75rem; }
.allocation-builder { display:flex; flex-wrap:wrap; align-items:end; gap:1rem; margin-bottom:1.5rem; }.allocation-builder > div:first-child { flex:1 1 300px; }.allocation-builder h2 { font-size:1rem; }.allocation-builder p { color:var(--text-muted); font-size:.8125rem; margin:0; }.allocation-count { max-width:150px; }.allocation-count .label { font-size:.75rem; }
.allocation-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; padding:1rem; border-radius:10px; background:var(--surface-2); margin-bottom:1.5rem; }.allocation-group .label { font-size:.75rem; }.allocation-group .help { margin:.5rem 0 0; }.allocation-table select { min-width:150px; max-width:250px; }.allocation-save { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:center; border-top:1px solid var(--border); padding-top:1.2rem; margin-top:1rem; }.allocation-save .help { max-width:60ch; margin:0; }
.form-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr); align-items:start; gap:1.5rem; max-width:1100px; }.form-layout .form-narrow { max-width:none; }.form-layout aside h2 { font-size:1rem; }.form-layout aside p { font-size:.8125rem; color:var(--text-muted); }.form-footer { padding-top:1rem; border-top:1px solid var(--border); margin-top:1rem; }
@media(max-width:1100px) { .setup-layout { grid-template-columns:1fr; }.setup-aside { grid-template-columns:repeat(2,minmax(0,1fr)); position:static; }.assessment-danger { grid-column:1/-1; }.setup-progress a { font-size:.7rem; gap:.4rem; } }
@media(max-width:768px) { .setup-progress { padding:.35rem .75rem; }.setup-progress ol { grid-template-columns:repeat(2,minmax(0,1fr)); }.setup-progress a { min-height:52px; }.setup-info dl { grid-template-columns:1fr; }.setup-aside,.form-layout { grid-template-columns:1fr; }.setup-info > div { flex-wrap:wrap; }.assessment-detail-head { align-items:flex-start; }.assessment-detail-head > .btn { flex:none; }.exam-session > .actions .btn { flex:1 1 140px; }.csv-upload-zone { padding:1.15rem; }.workspace-tools .icon-btn { width:44px; }.profile-trigger { min-width:44px; }.allocation-save .btn { width:100%; } }
.form-next-steps { padding-left:1.2rem; margin:1.5rem 0 0; }.form-next-steps li { padding-left:.3rem; margin-bottom:1.5rem; font-size:.875rem; }.form-next-steps p { margin:.4rem 0 0; }.preview-panel { margin:1.25rem 0; }.preview-stats .stat-value { font-size:1.8rem; }.preview-stats .stat-label { color:var(--text-muted); font-size:.75rem; }
.auth-appearance { display:flex; justify-content:center; margin-top:1.5rem; }
/* Jejak lokasi, kad utama dan maklum balas interaksi. */
:root { --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
.breadcrumb { display:block; overflow:hidden; }.breadcrumb ol { display:flex; align-items:center; list-style:none; padding:0; margin:0; gap:.35rem; min-width:0; }.breadcrumb li { display:flex; align-items:center; gap:.35rem; min-width:0; flex:none; }.breadcrumb li:last-child { flex:0 1 auto; }.breadcrumb a { display:flex; align-items:center; gap:.4rem; min-height:44px; padding:.3rem .25rem; color:var(--text-muted); text-decoration:none; white-space:nowrap; }.breadcrumb a:hover { color:var(--accent-text); text-decoration:underline; }.breadcrumb .icon { width:15px; height:15px; }.breadcrumb-separator { color:var(--text-muted); opacity:.7; }.breadcrumb-current { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--accent-soft); color:var(--accent-text); font-size:.75rem; font-weight:600; border-radius:7px; padding:.5rem .7rem; }
.nav-projection { margin:.2rem 0 .5rem 1rem; border-left:2px solid var(--info-border); font-size:.75rem; color:var(--accent-text); }.shell.is-collapsed .nav-projection { margin-left:0; border-left:0; }
.overview-stat { padding:1.5rem; min-height:190px; border-top:3px solid var(--primary); }.overview-stat strong { font-size:2.65rem; }.overview-stat[data-metric="activity"] { border-top-color:var(--success); background:linear-gradient(145deg,var(--surface) 50%,var(--success-bg)); }.overview-stat[data-metric="check"] { border-top-color:var(--primary); background:linear-gradient(145deg,var(--surface) 50%,var(--accent-soft)); }.overview-stat[data-metric="clock"] { border-top-color:var(--warning); background:linear-gradient(145deg,var(--surface) 50%,var(--warning-bg)); }
.exam-card { padding:1.5rem; border-top:3px solid var(--primary); }.exam-card h2 { font-size:1.125rem; }.exam-card-bottom strong { font-size:1rem; }.exam-card-bottom .btn { background:var(--accent-soft); color:var(--accent-text); border-color:var(--info-border); }
.live-count { min-height:115px; padding:1.25rem; border-radius:14px; }.live-count dd { font-size:2.25rem; }.live-count[data-count-item="working"] { color:var(--success); background:var(--success-bg); border-color:var(--success-border); }.live-count[data-count-item="hand_raised"] { color:var(--warning); background:var(--warning-bg); border-color:var(--warning-border); }.live-count[data-count-item="toilet_out"],.live-count[data-count-item="toilet_requested"] { color:var(--toilet); background:var(--toilet-bg); border-color:var(--toilet-border); }.live-count[data-count-item="disconnected"] { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-border); }
.btn,button,.chip-btn { transition:transform 160ms var(--ease-out); }.btn:active { transform:none; }:root[data-input-mode="pointer"] .btn:active,:root[data-input-mode="pointer"] button:active { transform:scale(.97); }
.overview-stat,.exam-card,.setup-main>.panel,.setup-aside>.panel,.live-count,.live-side>.card { position:relative; }.exam-card { transition:transform 160ms var(--ease-out); }
.overview-stat::after,.exam-card::after,.setup-main>.panel::after,.setup-aside>.panel::after,.live-count::after,.live-side>.card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:0 0 0 1px var(--info-border),0 8px 24px rgb(52 85 206 / .1); transition:opacity 160ms ease; }
@media(hover:hover) and (pointer:fine) { .exam-card:hover { transform:translateY(-3px); }.overview-stat:hover::after,.exam-card:hover::after,.setup-main>.panel:hover::after,.setup-aside>.panel:hover::after,.live-count:hover::after,.live-side>.card:hover::after { opacity:1; } }
[data-form-step] { min-width:0; border:0; padding:0; margin:0; }[data-form-step] legend { font-size:1.3rem; font-weight:650; margin:0 0 .75rem; padding:0; }[data-form-step] > .help { margin-bottom:1.75rem; }
.form-wizard-progress { margin:0 0 2rem; }.form-wizard-progress ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }.form-wizard-progress button { display:flex; align-items:center; gap:.5rem; width:100%; min-height:48px; padding:.5rem; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text-muted); font:500 .75rem var(--font-sans); cursor:pointer; }.form-wizard-progress button>span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:var(--surface); }.form-wizard-progress button[aria-current="step"] { background:var(--accent-soft); color:var(--accent-text); border-color:var(--info-border); }.form-wizard-progress button:disabled { cursor:default; opacity:.65; }.wizard-nav { display:flex; flex-wrap:wrap; gap:.65rem; }.wizard-review { margin:1.5rem 0; }.wizard-review>div { padding:1rem 0; border-bottom:1px solid var(--border); }.wizard-review dt { color:var(--text-muted); font-size:.75rem; }.wizard-review dd { margin:.4rem 0 0; font-size:1rem; font-weight:550; overflow-wrap:anywhere; }
.setup-wizard-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }.setup-wizard-footer .help { margin:.3rem 0 0; }.setup-flow .setup-progress li.is-current a { color:var(--text-muted); }.setup-flow .setup-progress a[aria-current="step"] { color:var(--accent-text); background:var(--accent-soft); border-radius:10px; }
.projection-page { margin:0; overflow:hidden; }.projection-page #main { height:100dvh; }.projection-page .projection-lab { height:100dvh; min-height:0; max-height:none; border:0; border-radius:0; width:100%; }.projection-return { position:fixed; z-index:15; top:1rem; right:1rem; padding:.6rem .9rem; min-height:44px; display:flex; gap:.5rem; align-items:center; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; font-size:.75rem; text-decoration:none; }.projection-connection { position:fixed; z-index:20; left:1rem; right:1rem; top:4.5rem; }.projection-fallback { height:100dvh; overflow:auto; padding:5rem 1.5rem 2rem; }.projection-clock { font:600 clamp(2rem,7vw,5rem) var(--font-mono); }
@media(max-width:768px) { .breadcrumb li:not(:nth-last-child(2)):not(:last-child) { display:none; }.breadcrumb a { font-size:.7rem; }.breadcrumb-current { max-width:150px; padding-inline:.5rem; font-size:.7rem; }.breadcrumb li:nth-last-child(2)>.breadcrumb-separator { display:none; }.overview-stat { min-height:160px; padding:1.1rem; }.overview-stat strong { font-size:2.25rem; }.exam-card { padding:1.25rem; }.form-wizard-progress button { flex-direction:column; gap:.3rem; }.setup-wizard-footer .actions { width:100%; }.setup-wizard-footer .btn { flex:1; }.live-count { min-height:95px; padding:1rem; }.live-count dd { font-size:2rem; }.nav-projection { margin-left:1rem !important; } }
@media(prefers-reduced-motion:reduce) { .sidebar,.sidebar *,.exam-card,.btn,button { transition:none !important; }.exam-card:hover,:root[data-input-mode="pointer"] .btn:active,:root[data-input-mode="pointer"] button:active { transform:none; } }
@media(max-width:768px) {
  .workspace-bar { display:grid; grid-template-columns:44px minmax(0,1fr); gap:.1rem .6rem; }
  .workspace-tools { grid-column:2; grid-row:1; justify-self:end; margin-left:0; }
  .breadcrumb { grid-column:1/-1; grid-row:2; width:100%; }
  .breadcrumb ol { min-height:40px; }
}
.setup-progress a[aria-disabled="true"] { opacity:.55; cursor:default; }
@media print {
  :root:not([data-theme]), :root[data-theme] {
    --bg:#fff; --surface:#fff; --surface-2:#f1f3f5; --text:#000; --text-muted:#3d4650; --border:#9aa3ad;
    --primary:#000; --warning:#6b3a00; --warning-bg:#fff; --warning-border:#9aa3ad; --success:#0e5233;
    --success-bg:#fff; --success-border:#9aa3ad; --shadow:none; color-scheme:light;
  }
  body { font-size:10pt; } h1 { font-size:16pt; }.container-wide { max-width:none; padding:0; }
  .workspace-tools { display:none !important; }.panel,.exam-card { box-shadow:none; break-inside:avoid; }
}
/* Satu fail, satu seksyen: makmal dan senarai dikekalkan bersama. */
.setup-progress .section-flow-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.section-flow-step { display:flex; align-items:center; gap:.65rem; min-height:60px; padding:.6rem .25rem; font-size:.8rem; color:var(--text-muted); }.setup-progress .is-current .section-flow-step { color:var(--accent-text); }
.section-workspace>.section-head { margin-bottom:1.5rem; }.section-head p { margin:.5rem 0 0; font-size:.85rem; }
.section-file-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }.section-file-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; }.section-file-card { align-content:start; border-top:3px solid var(--primary); scroll-margin-top:1.5rem; }.section-file-card h3 { font-size:1.75rem; margin:.5rem 0; }.section-file-card>p { margin:0; }.section-file-card .exam-session-code { flex-wrap:wrap; }.section-source { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--text-muted); overflow-wrap:anywhere; }.section-source .icon { flex:none; }
.section-empty { text-align:center; justify-items:center; margin-bottom:1.5rem; padding:2.5rem; }.section-empty p { max-width:60ch; color:var(--text-muted); margin:0; }
.add-section-panel { margin-top:1.5rem; scroll-margin-top:1.5rem; }.section-upload-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem; }.section-upload-layout h3 { font-size:.95rem; margin:0 0 1rem; }.csv-example { font-size:.8rem; }.csv-rules { padding-left:1.1rem; color:var(--text-muted); font-size:.8rem; line-height:1.75; }.csv-rules li { margin:.5rem 0; }.section-csv-upload { margin:0; }.section-csv-upload .csv-upload-zone { text-align:left; }.section-csv-upload .csv-upload-zone>.icon { color:var(--primary); margin-bottom:1rem; }.section-csv-upload .input { max-width:100%; font-size:.8rem; }
.section-preview-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:1.5rem; align-items:start; }.section-preview-roster { min-width:0; }.section-confirm .field { margin-bottom:.7rem; }.invigilator-appearance { border:1px solid var(--border); padding:1rem; border-radius:12px; margin:.5rem 0; min-width:0; }.invigilator-appearance legend { padding:0 .35rem; font-weight:600; font-size:.85rem; }.invigilator-appearance .help { margin:.5rem 0 0; }
.logo-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.logo-upload { min-width:0; }.logo-upload>.input { font-size:.75rem; }.wall-logo-preview { display:block; width:100%; height:90px; object-fit:contain; padding:.5rem; border:1px dashed var(--border-strong); border-radius:10px; margin:.75rem 0; background:var(--surface-2); }
@media(max-width:1000px) { .section-upload-layout,.section-preview-layout { grid-template-columns:1fr; }.section-preview-roster { order:-1; }.section-preview-roster .table-scroll { max-height:300px; } }
@media(max-width:700px) { .section-file-grid,.logo-upload-grid { grid-template-columns:1fr; }.setup-progress .section-flow-steps { grid-template-columns:1fr; }.section-flow-step { min-height:45px; }.section-file-card h3 { font-size:1.4rem; }.section-workspace>.section-head { flex-wrap:wrap; gap:1rem; }.section-empty { padding:1.5rem; } }

/* Fasa 12: borang "Sesi peperiksaan baharu" dan pratonton */
.setup-form { display:grid; gap:1.25rem; max-width:62rem; }
.setup-step { padding:1.5rem; }
.setup-step-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; }
.setup-step-head h2 { margin:0; font-size:1rem; }
.session-setup-progress { margin-bottom:1.25rem; max-width:62rem; }
.setup-form .session-setup-progress { margin:0; }
.session-setup-progress ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; }
.session-setup-progress :is(button,.setup-progress-label) { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:48px; padding:.55rem .4rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-muted); font:500 .75rem var(--font-sans); }
.session-setup-progress button { cursor:pointer; }
.session-setup-progress :is(button,.setup-progress-label)>span { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:7px; background:var(--surface-2); font-variant-numeric:tabular-nums; }
.session-setup-progress [aria-current="step"] { color:var(--accent-text); background:var(--accent-soft); border-color:var(--info-border); }
.session-setup-progress [aria-current="step"]>span { background:var(--primary); color:var(--on-primary); }
.session-setup-progress button:disabled { cursor:default; }
.setup-step-status { margin:0; font-size:.8125rem; font-weight:600; color:var(--text-muted); }
.setup-form .setup-step { margin:0; }
@media(max-width:768px) { .session-setup-progress ol { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.setup-step .assessment-advanced { margin-block:.5rem 0; }
.source-choice { border:0; padding:0; margin:0 0 1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.source-choice legend { margin-bottom:.6rem; padding:0; }
.source-option { display:flex; gap:.75rem; align-items:flex-start; min-height:44px; padding:.9rem 1rem; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); cursor:pointer; }
.source-option:has(input:checked) { border-color:var(--primary); background:var(--accent-soft); }
.source-option:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
.source-option input { margin-top:.2rem; width:18px; height:18px; accent-color:var(--primary); flex:none; }
.source-option span { display:grid; gap:.2rem; }
.source-option strong { font-size:.875rem; font-weight:600; }
.source-option small { color:var(--text-muted); font-size:.75rem; line-height:1.5; }
.source-panel + .source-panel { margin-top:1rem; }
.textarea-roster { min-height:14rem; font-family:var(--font-mono); font-size:.8125rem; line-height:1.7; resize:vertical; }
.setup-submit { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.75rem; }
.setup-submit .help { margin:0 auto 0 0; max-width:48ch; }
.setup-submit form { margin:0; }
.setup-submit-help { text-align:right; }
.setup-preview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:1.25rem; align-items:start; margin-bottom:1.25rem; }
.detail-list { display:grid; gap:.85rem; margin:0; }
.detail-list > div { display:grid; gap:.2rem; }
.detail-list dt { color:var(--text-muted); font-size:.75rem; }
.detail-list dd { margin:0; font-size:.875rem; overflow-wrap:anywhere; }
.setup-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:0 0 1rem; }
.setup-stats > div { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.75rem .9rem; }
.setup-stats dt { color:var(--text-muted); font-size:.7rem; }
.setup-stats dd { margin:.25rem 0 0; font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; }
.error-lines { margin:0 0 1rem; padding-left:1.1rem; color:var(--danger); font-size:.8125rem; display:grid; gap:.35rem; }
.roster-card .table-scroll { max-height:24rem; }
.roster-add { display:grid; gap:.75rem; margin-top:1rem; }
.roster-add .textarea-roster { min-height:7rem; }
.session-groups { display:grid; gap:1.5rem; }
.session-group-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.session-group-head h2 { margin:0; font-size:1rem; }
@media(max-width:768px) { .source-choice,.setup-preview { grid-template-columns:1fr; }.setup-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.setup-submit { justify-content:stretch; }.setup-submit > .btn, .setup-submit form { flex:1 1 100%; }.setup-submit form .btn { width:100%; } }

/* Fasa 12: pemantauan Ketua Jabatan */
.monitor-head { align-items:flex-end; flex-wrap:wrap; }
.date-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.date-nav .input { width:auto; min-height:44px; }
.monitor-totals { margin-top:0; }
.monitor-totals dd { margin:0; }
.monitor-alerts { margin-bottom:1.5rem; }
.monitor-alert-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.monitor-alert { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.4rem .8rem; border:1px solid var(--warning-border); background:var(--warning-bg); color:var(--text); border-radius:10px; font-size:.8125rem; }
.monitor-alert .icon { width:16px; height:16px; color:var(--warning); }
.monitor-alert a { font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
.monitor-groups { display:grid; gap:1.75rem; }
.monitor-group-head { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:.85rem; }
.monitor-group-head h2 { margin:0; font-size:1.05rem; }
.monitor-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:1rem; }
.monitor-card { display:flex; flex-direction:column; }
.monitor-card[data-status="running"] { border-color:var(--success-border); }
.monitor-card-title { margin:0; font-size:1rem; }
.monitor-card-title a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.monitor-flag { display:inline-flex; align-items:center; gap:.3rem; color:var(--warning); font-size:.7rem; font-weight:600; }
.monitor-flag .icon { width:14px; height:14px; }
.monitor-time { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin:.9rem 0; }
.monitor-time strong { font:600 1.6rem var(--font-mono); letter-spacing:-.02em; }
.monitor-time span { font-size:.75rem; }
.monitor-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0 0 1rem; }
.monitor-count { background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:.5rem .6rem; }
.monitor-count dt { color:var(--text-muted); font-size:.65rem; }
.monitor-count dd { margin:.15rem 0 0; font-size:1rem; font-weight:600; }
.monitor-count[data-tone="warn"], .monitor-count[data-tone="hand"] { border-color:var(--warning-border); background:var(--warning-bg); }
.monitor-count[data-tone="toilet"] { border-color:var(--toilet-border); background:var(--toilet-bg); }
.monitor-count[data-tone="offline"] { border-color:var(--danger-border); background:var(--danger-bg); }
.card-alerts { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.35rem; font-size:.75rem; color:var(--warning); font-weight:550; }
.monitor-card .exam-card-bottom { margin-top:auto; }
.monitor-card .exam-card-bottom > span { line-height:1.6; }
.readonly-note { display:flex; gap:.5rem; align-items:flex-start; margin:0; padding:.75rem .9rem; border:1px solid var(--info-border); background:var(--info-bg); border-radius:10px; font-size:.8125rem; max-width:34rem; }
.readonly-note .icon { width:16px; height:16px; flex:none; margin-top:.1rem; color:var(--accent-text); }

/* Fasa 12: papan kod masuk pada projektor (sebelum Mula) */
.join-board { min-height:100dvh; box-sizing:border-box; display:grid; grid-template-rows:auto 1fr auto; gap:clamp(1rem,3vh,2.5rem); padding:clamp(1.5rem,4vw,4rem); background:var(--bg); color:var(--text); }
.join-subject { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:0; font-size:clamp(1rem,1.6vw,1.6rem); color:var(--text-muted); }
.join-subject .course-tag { font-size:clamp(.85rem,1.2vw,1.2rem); padding:.35rem .7rem; }
.join-title { margin:.5rem 0 0; font-size:clamp(1.8rem,3.6vw,3.6rem); line-height:1.15; letter-spacing:-.03em; }
.join-meta { margin:.5rem 0 0; font-size:clamp(1.1rem,2vw,2rem); font-weight:600; }
.join-main { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.join-code-card { background:var(--surface); border:2px solid var(--border-strong); border-radius:24px; padding:clamp(1.5rem,3vw,3rem); text-align:center; box-shadow:var(--shadow); }
.join-label { margin:0; text-transform:uppercase; letter-spacing:.14em; font-size:clamp(.9rem,1.4vw,1.4rem); color:var(--text-muted); font-weight:600; }
.join-code { margin:.75rem 0 0; font-size:clamp(3rem,6.6vw,8.5rem); line-height:1; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.join-closed { margin:1rem 0 0; font-size:clamp(1.3rem,2.6vw,2.6rem); font-weight:600; color:var(--warning); }
.join-steps { list-style:none; margin:0; padding:0; display:grid; gap:clamp(.8rem,2vh,1.6rem); font-size:clamp(1rem,1.7vw,1.7rem); line-height:1.4; }
.join-steps li { display:flex; gap:1rem; align-items:flex-start; }
.join-steps .step-dot { width:clamp(32px,2.6vw,48px); height:clamp(32px,2.6vw,48px); font-size:clamp(.9rem,1.2vw,1.3rem); flex:none; }
.join-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; }
.join-progress { display:grid; gap:.6rem; min-width:min(100%,28rem); }
.join-progress p { margin:0; font-size:clamp(1.2rem,2.2vw,2.2rem); }
.join-progress strong { font-size:clamp(2rem,4vw,4rem); font-weight:700; }
.join-progress progress { width:100%; height:14px; appearance:none; border:0; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.join-progress progress::-webkit-progress-bar { background:var(--surface-3); border-radius:999px; }
.join-progress progress::-webkit-progress-value { background:var(--primary); border-radius:999px; }
.join-progress progress::-moz-progress-bar { background:var(--primary); border-radius:999px; }
.join-start { margin:0; font-size:clamp(1rem,1.6vw,1.6rem); color:var(--text-muted); }
.join-chip { position:fixed; z-index:15; left:1rem; bottom:1rem; margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.6rem 1rem; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--shadow); font-size:clamp(.9rem,1.2vw,1.2rem); }
.join-chip strong { font-size:clamp(1.3rem,2vw,2rem); letter-spacing:.04em; }
@media(max-width:768px) { .join-board { padding:1.25rem 1rem; }.join-main { grid-template-columns:1fr; }.join-code-card { padding:1.25rem 1rem; }.join-code { font-size:clamp(2rem,10.5vw,5rem); letter-spacing:.03em; } }
.session-groups > section { min-width:0; }
.projection-page:has(.join-board:not([hidden])) { overflow:auto; }

/* Modal Kawalan peperiksaan (halaman sesi): pola modal tetapan dengan navigasi sisi menegak. */
.control-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.control-head .section-title { margin:0; }
.modal { width:min(52rem, calc(100% - 2rem)); max-width:none; max-height:min(38rem, calc(100dvh - 2rem)); padding:0; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 24px 64px rgb(15 23 42 / .28); overflow:hidden; }
.modal::backdrop { background:rgb(15 23 42 / .55); }
.modal-shell { display:grid; grid-template-rows:auto minmax(0,1fr); max-height:inherit; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem 1rem 1.5rem; border-bottom:1px solid var(--border); }
.modal-title { margin:0; font-size:1.125rem; }
.modal-sub { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.35rem 0 0; color:var(--text-muted); font-size:.8125rem; }
.modal-sub strong { color:var(--text); font-family:var(--font-mono); font-weight:600; }
.modal-close { flex:none; }
.modal-body { display:grid; grid-template-columns:13rem minmax(0,1fr); min-height:0; }
.modal-nav { padding:1rem .75rem; border-right:1px solid var(--border); background:var(--surface-2); overflow:auto; }
.modal-nav [role="tablist"] { display:grid; gap:.25rem; }
.modal-tab { position:relative; display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; padding:.5rem .75rem; border:0; border-radius:9px; background:transparent; color:var(--text-muted); font:inherit; font-size:.875rem; font-weight:500; text-align:left; cursor:pointer; }
.modal-tab .icon { width:17px; height:17px; flex:none; }
.modal-tab:hover { background:var(--surface-3); color:var(--text); }
.modal-tab[aria-selected="true"] { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.modal-tab.is-danger { color:var(--danger); }
.modal-tab.is-danger[aria-selected="true"] { background:var(--danger-bg); color:var(--danger); }
.modal-tab.is-separated { margin-top:.9rem; }
.modal-tab.is-separated::before { content:""; position:absolute; left:.5rem; right:.5rem; top:-.5rem; border-top:1px solid var(--border); }
.modal-panels { padding:1.5rem; overflow:auto; }
.modal-panel h3 { margin:0 0 .35rem; font-size:1rem; }
.modal-panel p { margin:0 0 1.25rem; color:var(--text-muted); font-size:.875rem; max-width:52ch; }
.modal-panel form { margin:0; }
.modal-panel .actions { margin-bottom:1rem; }
.modal-panel .extend-custom { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.modal-panel .extend-custom .label { margin:0; }
.danger-zone { padding:1rem 1.1rem; border:1px solid var(--danger-border); background:var(--danger-bg); border-radius:12px; }
.danger-zone p { color:var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation:modal-in 160ms ease-out; }
  .modal[open]::backdrop { animation:modal-fade 160ms ease-out; }
}
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
@media (max-width:640px) {
  .modal { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .modal-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .modal-nav { padding:.5rem; border-right:0; border-bottom:1px solid var(--border); }
  .modal-nav [role="tablist"] { grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; }
  .modal-tab.is-separated { margin-top:0; margin-left:.6rem; }
  .modal-tab.is-separated::before { top:.5rem; bottom:.5rem; left:-.35rem; right:auto; border-top:0; border-left:1px solid var(--border); }
}

/* Kod masuk di kad Kunci enrolmen: muat dalam kad pada sebarang lebar (unit bekas). */
.key-card { container-type:inline-size; }
.key-display { font-size:clamp(1.5rem, 14cqi, 3.75rem); }