*{box-sizing:border-box}body{margin:0;background:#f5f7f8;color:#192a2c;font:15px system-ui,sans-serif;min-height:100vh;display:grid;grid-template-columns:236px 1fr}aside{background:#102c2b;color:#fff;padding:27px 18px;display:flex;flex-direction:column;min-height:100vh}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand span{background:#baf0d7;color:#133831;border-radius:12px;padding:9px 13px;font-size:19px}.brand small{display:block;color:#a5c0b7;font-size:9px;letter-spacing:1.4px;margin-top:5px}.nav-label{color:#a5c0b7;font-size:11px;margin:45px 12px 12px}nav{display:grid;gap:5px}nav button,nav #sidebarLectures{text-align:left;color:#d7e7e0;background:transparent}nav button.active,nav button:hover,nav #sidebarLectures:hover{background:#234844;color:#fff}footer{margin-top:auto;color:#b9d9cc;font-size:12px;padding:26px 8px 0}main{min-width:0}header{background:white;border-bottom:1px solid #dce5e3;padding:18px 30px;font-size:13px}header span{color:#80918e;margin:0 8px}#view,#notice{max-width:1260px;margin:auto}#view{padding:29px 30px}#notice:not(:empty){padding:15px 30px 0;color:#19614a}h1{font-size:32px;margin:5px 0 8px;letter-spacing:-1px}h2{font-size:18px;margin:0 0 16px}p{line-height:1.65}.muted{color:#596d6b}.eyebrow{font-weight:800;color:#15684f;letter-spacing:2px;font-size:11px}.hero{background:linear-gradient(110deg,#173d38,#246457);color:white;padding:32px;border-radius:17px;margin-bottom:20px}.hero .eyebrow{color:#baf0d7}.hero p{color:#d6eae3}.hero button{background:#c5f3de;color:#183a30}.cards,.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.card,.panel{background:white;border:1px solid #dce5e3;border-radius:14px;padding:21px;margin-bottom:14px}.card strong{display:block;font-size:29px;margin-top:8px}.flow button{background:#e7f3ed;color:#19523f;width:100%}.flow{grid-template-columns:repeat(4,1fr)}button{border:0;border-radius:8px;background:#17664e;color:white;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.08)}button.secondary{background:#e5f0eb;color:#175441}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #64a98d;outline-offset:2px}form,.fields{display:flex;align-items:end;gap:12px;flex-wrap:wrap}label{display:grid;gap:6px;font-size:13px;font-weight:650}input,select{padding:9px;border:1px solid #bdceca;border-radius:7px;background:white;color:inherit;font:inherit;max-width:100%}.wide{width:100%}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:10px;border-bottom:1px solid #e4ece9}th{background:#eff5f2;font-size:13px}td{font-size:14px}.questions{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px;margin:12px 0}.question{border:1px solid #dae6e1;border-radius:9px;padding:10px;display:grid;gap:6px}.badge{background:#e5f3eb;color:#205741;padding:3px 8px;border-radius:12px;font-size:12px}@media(max-width:720px){body{display:block}aside{min-height:0;padding:14px}nav{display:flex;overflow:auto;margin-top:12px}nav button{white-space:nowrap}footer,.nav-label{display:none}#view{padding:20px 14px}.flow,.cards{grid-template-columns:repeat(2,1fr)}.hero{padding:22px}}@media print{aside,header,button,.fields,#notice{display:none}body{display:block;background:white}#view{padding:0}}
.mark-buttons{display:flex;gap:8px}.mark-buttons label{position:relative;flex:1;cursor:pointer}.mark-buttons input{position:absolute;opacity:0}.mark-buttons span{display:block;text-align:center;padding:9px;border:1px solid #bdceca;border-radius:7px}.mark-buttons input:checked+span{background:#17664e;color:white;border-color:#17664e}.mark-buttons input[value=X]:checked+span{background:#973f40;border-color:#973f40}.mark-buttons input:focus-visible+span{outline:3px solid #64a98d;outline-offset:2px}.question{min-width:0}.scan-row,#scanReview{width:100%}#scanReview{margin-top:14px}
[hidden]{display:none!important}.answer-editor{display:grid;gap:8px}.answer-choices{gap:4px}.answer-choices span{padding:6px 3px}.scan-preview img{display:block;max-width:100%;max-height:520px;margin:10px 0}
.upload-button{display:inline-flex;flex-direction:column;padding:10px 14px;border:1px solid #bdceca;border-radius:8px;background:#e5f0eb;color:#175441}
#sidebarLogo{width:42px;height:42px;flex:none;display:grid;place-items:center;padding:0;overflow:hidden;background:#baf0d7;color:#133831;font-size:19px}#sidebarLogo img{width:100%;height:100%;object-fit:contain}
#examForm .questions,#settingsForm .questions{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
#examForm .question,#settingsForm .question{align-content:start;grid-auto-rows:max-content}
.answer-editor{min-width:0;grid-template-rows:40px 63px}
.answer-editor .mark-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.answer-editor .answer-choices{grid-template-columns:repeat(5,minmax(0,1fr));align-self:end;margin-bottom:1px}
.answer-editor label,.answer-editor input{min-width:0}.short-answer input{width:100%}
.answer-editor .mark-buttons span{padding-inline:2px}
#savedToast{position:fixed;right:20px;bottom:20px;z-index:10;max-width:calc(100% - 40px);border-radius:10px;padding:14px 18px;background:#17664e;color:white;box-shadow:0 3px 16px #0003}
.trend{display:block;min-width:340px}.trend text{font:12px system-ui;fill:#354b47}
@media print{#savedToast{display:none}}
#sidebarLogo{position:relative;display:block;padding:0}
#sidebarLogo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#examForm .question,#settingsForm .question{grid-template-columns:minmax(0,1fr)}
#examForm .question label,#settingsForm .question label{min-width:0;grid-template-columns:minmax(0,1fr)}
#examForm .question input:not([type=radio]),#settingsForm .question input:not([type=radio]){width:100%;min-width:0}
#statsExam{margin-bottom:12px;justify-self:start}

.choice-answer{display:grid;gap:6px;align-content:start;font-size:13px;font-weight:650}
#examDetail,#examRegisterDialog{width:min(1100px,calc(100% - 24px));max-height:90vh;border:1px solid #dce5e3;border-radius:14px;padding:20px;color:inherit}
#examDetail::backdrop,#examRegisterDialog::backdrop{background:#102c2b99}
.exam-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.exam-detail-heading h2{margin:0}
#examDetail th,#examDetail td{white-space:nowrap}

.student-filters,#examRegisterDialog .exam-detail-heading{margin-bottom:16px}
#examRegisterError{color:#973f40}
#gradeForm .mark-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#gradeForm .mark-buttons span{display:grid;place-items:center;height:36px;padding:0}
#gradeForm legend{max-width:100%;overflow-wrap:anywhere}

main > header:has(#headerLogo){padding:0}
#headerLogo{display:block;width:100%;height:auto}
.flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.flow button{padding-inline:4px;font-size:clamp(11px,1.6vw,15px);white-space:nowrap}
body.guest{grid-template-columns:minmax(0,1fr)}
.staff-actions{display:flex;gap:8px;margin-top:18px}
.staff-actions button{white-space:nowrap}
.staff-actions + .nav-label{margin-top:20px}
#staffSettings{width:min(560px,calc(100% - 24px));border:1px solid #dce5e3;border-radius:14px;padding:20px;color:inherit}
#staffSettings::backdrop{background:#102c2b99}
#staffSettings form{margin-top:16px}
#loginErrorDialog{width:min(420px,calc(100% - 24px));border:1px solid #f0c6c6;border-radius:14px;padding:24px;color:#9c2828}
#loginErrorDialog::backdrop{background:#102c2b99}

.guest #examDetailTitle { font-size: 30px; }
#examDetail .own-question-results :is(th, td):is(:first-child, :nth-child(3)) { text-align: center; }
.own-question-results :is(.correct-mark, .wrong-mark) { font-size: 18pt; font-weight: 700; }
.correct-mark { font-weight: 700; color: #1654b5; }
.wrong-mark { font-weight: 700; color: #b42318; }

nav .menu-icon { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; background: currentColor; mask: var(--menu-icon) center / contain no-repeat; }
nav [data-page="home"] { --menu-icon: url("/menu-home.png"); }
nav [data-page="stats"] { --menu-icon: url("/menu-stats.png"); }
nav [data-page="exams"] { --menu-icon: url("/menu-exams.png"); }
nav [data-page="results"] { --menu-icon: url("/menu-results.png"); }
nav [data-page="students"] { --menu-icon: url("/menu-students.png"); }
.hero .flow { margin-bottom: 0; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

.lecture-link {
  display: inline-block;
  padding: 11px 14px;
  border-radius: 9px;
  background: #e7f3ed;
  color: #19523f;
  font-weight: 700;
  text-decoration: none;
}
.lecture-link:hover { text-decoration: underline; }

.hero .flow:has(.lecture-link) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
}
.hero .flow > :is(button, .lecture-link) {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 4px;
  font-size: clamp(11px, 1.6vw, 15px);
  line-height: 1.4;
  text-align: center;
}
#sidebarLectures { white-space: nowrap; text-decoration: none; --menu-icon: url("/menu-lectures.png"); }

.home-link { color: inherit; text-decoration: none; }
header .home-link { display: block; }
.brand #sidebarLogo { padding: 0; border-radius: 9px; }

.lecture-round + .lecture-round { margin-top: 28px; }
.lecture-entry { margin-bottom: 16px; }
.lecture-entry form { margin-top: 12px; }

.lecture-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }