:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #f4f7fb;
  color: #243244;
  --navy: #0b4f7c;
  --blue: #1769d2;
  --green: #12835f;
  --amber: #d58c00;
  --red: #c53e4b;
  --muted: #6f7c8d;
  --line: #dce3eb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f4f7fb; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(150deg, #0b4f7c 0 34%, #f4f7fb 34%);
}

.login-panel {
  width: min(100%, 430px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(16, 53, 86, .18);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand div { min-width: 0; }
.brand strong { display: block; color: #fff; font-size: 20px; }
.brand span { display: block; color: rgba(255,255,255,.75); font-size: 12px; margin-top: 2px; }
.login-brand strong { color: var(--navy); }
.login-brand span { color: var(--muted); }
.login-heading { margin: 28px 0 22px; }
.login-heading p, .page-heading p, .dialog-panel > div > p {
  margin: 0 0 7px; color: var(--blue); font-size: 11px; font-weight: 800;
}
.login-heading h1, .page-heading h1 { margin: 0; color: #172436; font-size: 25px; }
.login-heading > span, .page-heading > span { display: block; color: var(--muted); margin-top: 7px; font-size: 13px; line-height: 1.5; }
label { display: grid; gap: 7px; margin-bottom: 15px; color: #344255; font-size: 13px; font-weight: 700; }
input, select, textarea {
  width: 100%; border: 1px solid #cfd8e3; border-radius: 6px; background: #fff;
  color: #172436; padding: 12px 13px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,210,.1); }
textarea { resize: vertical; }
.password-field { display: flex; border: 1px solid #cfd8e3; border-radius: 6px; overflow: hidden; }
.password-field input { border: 0; box-shadow: none; }
.password-field button { border: 0; background: #edf3f9; color: var(--navy); padding: 0 13px; font-weight: 700; }

.primary-command, .secondary-command {
  min-height: 46px; border-radius: 6px; padding: 10px 17px; font-weight: 800;
}
.primary-command { border: 0; background: var(--blue); color: #fff; width: 100%; }
.primary-command:disabled { opacity: .45; cursor: not-allowed; }
.secondary-command { border: 1px solid #aebdcc; background: #fff; color: var(--navy); }
.full-command { width: 100%; margin-bottom: 12px; }
.text-command { border: 0; background: transparent; color: var(--blue); font-weight: 800; padding: 7px; }
.form-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.form-status.error { color: var(--red); }
.form-status.success { color: var(--green); }

.student-app { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.app-header {
  position: sticky; top: 0; z-index: 20; height: 74px; padding: 11px max(16px, env(safe-area-inset-left));
  padding-top: max(11px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
  background: var(--navy); box-shadow: 0 2px 12px rgba(8,41,68,.16);
}
.app-header .brand { flex: 1; }
.header-command { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 5px; padding: 7px 10px; }
.profile-button {
  width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%;
  background: #fff; color: var(--navy); font-weight: 900;
}
.app-content { width: min(100%, 760px); margin: 0 auto; padding: 18px 16px 28px; }
.student-view { display: none; }
.student-view.active-view { display: block; }
.greeting p { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.greeting h1 { margin: 0; color: #15283e; font-size: 25px; }
.greeting > span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }

.attendance-banner {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px;
  margin: 18px 0; padding: 15px; border: 1px solid #efd5d8; border-radius: 8px; background: #fff5f5;
}
.attendance-banner.is-present { border-color: #b9dfd1; background: #f1fbf7; }
.attendance-banner.is-complete { border-color: #b9d3ef; background: #f2f7fd; }
.status-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 900;
}
.is-present .status-mark { background: var(--green); }
.is-complete .status-mark { background: var(--blue); }
.attendance-banner small { display: block; color: var(--muted); font-size: 9px; font-weight: 900; }
.attendance-banner strong { display: block; color: #172436; margin: 3px 0; font-size: 15px; }
.attendance-banner span { display: block; color: var(--muted); font-size: 11px; }
.attendance-banner button { border: 0; color: var(--blue); background: transparent; font-weight: 800; padding: 8px; }

.section-block { margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.section-heading h2 { margin: 0; font-size: 17px; color: #203148; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.quick-grid button {
  min-height: 118px; display: grid; justify-items: start; align-content: start; gap: 5px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; text-align: left;
}
.quick-grid strong { color: #21334a; font-size: 14px; }
.quick-grid small { color: var(--muted); font-size: 10px; }
.quick-symbol {
  display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 4px;
  border-radius: 50%; color: #fff; font-weight: 900;
}
.quick-symbol.blue { background: var(--blue); }
.quick-symbol.amber { background: var(--amber); }
.quick-symbol.green { background: var(--green); }
.quick-symbol.navy { background: var(--navy); }

.timeline-list { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.timeline-row { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #e9eef4; }
.timeline-row:last-child { border-bottom: 0; }
.timeline-time { color: var(--blue); font-size: 12px; font-weight: 900; }
.timeline-detail strong { display: block; color: #1d2d42; font-size: 13px; }
.timeline-detail span { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.timeline-row.activity-row { background: #f8fafc; }
.timeline-row.activity-row .timeline-time { color: var(--green); }
.empty-state { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.page-heading { margin-bottom: 17px; }
.page-heading h1 { font-size: 23px; }
.day-selector { display: flex; gap: 7px; margin-bottom: 13px; overflow-x: auto; scrollbar-width: none; }
.day-selector::-webkit-scrollbar { display: none; }
.day-selector button {
  flex: 0 0 auto; border: 1px solid #cfd9e4; border-radius: 5px; background: #fff;
  color: #536174; padding: 9px 13px; font-size: 12px; font-weight: 800;
}
.day-selector button.active { border-color: var(--blue); background: var(--blue); color: #fff; }

.attendance-status-panel { display: grid; gap: 10px; margin-bottom: 13px; }
.attendance-overview { padding: 18px; border-radius: 8px; border: 1px solid #ecd0d3; background: #fff5f5; }
.attendance-overview.present { border-color: #b9dfd1; background: #f1fbf7; }
.attendance-overview.complete { border-color: #b9d3ef; background: #f2f7fd; }
.attendance-overview strong { display: block; font-size: 19px; color: #1b2e45; }
.attendance-overview span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.attendance-moment { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.moment-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #96a2b1; color: #fff; font-size: 11px; font-weight: 900; }
.attendance-moment.recorded .moment-mark { background: var(--green); }
.attendance-moment strong { display: block; color: #22344a; font-size: 14px; }
.attendance-moment span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 3px; }
.mobile-attendance { margin: 13px 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mobile-attendance > div { margin-bottom: 12px; }
.mobile-attendance > div strong { display: block; color: #203148; font-size: 14px; }
.mobile-attendance > div span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.mobile-attendance .liveness-capture { margin-top: 11px; }
.center-note { min-height: 18px; text-align: center; color: var(--muted); font-size: 11px; }

.form-section { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.permission-history { padding-bottom: 10px; }
.data-list { display: grid; gap: 8px; }
.data-row { border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 13px; }
.data-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.data-row strong { color: #21344b; font-size: 13px; }
.data-row p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.status-badge { display: inline-block; border-radius: 4px; background: #edf2f7; color: #536174; padding: 5px 8px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.status-badge.approved, .status-badge.selesai { background: #e8f7f0; color: var(--green); }
.status-badge.pending, .status-badge.menunggu { background: #fff4dc; color: #a56a00; }
.status-badge.rejected, .status-badge.ditolak { background: #fdebed; color: var(--red); }

.profile-identity { display: flex; align-items: center; gap: 15px; padding: 6px 2px 4px; }
.profile-identity > span {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 24px; font-weight: 900;
}
.profile-identity h1 { margin: 0; color: #172a41; font-size: 22px; }
.profile-identity p { margin: 5px 0 2px; color: var(--muted); font-size: 12px; }
.profile-identity small { color: var(--blue); font-weight: 800; }
.face-enrollment { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 15px; }
.face-enrollment > p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.manual-face-fallback { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.manual-face-fallback summary { color: var(--navy); font-size: 12px; font-weight: 900; cursor: pointer; }
.manual-face-fallback[open] summary { margin-bottom: 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 13px; }
.photo-slot { min-height: 88px; margin: 0; place-items: center; align-content: center; border: 1px dashed #aab8c7; border-radius: 7px; background: #f8fafc; text-align: center; cursor: pointer; }
.photo-slot input, .liveness-capture input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-slot span { color: var(--navy); font-weight: 900; }
.photo-slot small { color: var(--muted); }
.photo-slot.ready { border-style: solid; border-color: var(--green); background: #f0faf6; }
.photo-slot.ready span { color: var(--green); }
.liveness-capture { margin: 0 0 12px; padding: 14px; border: 1px solid #b8cbe0; border-radius: 7px; background: #f3f7fb; text-align: center; cursor: pointer; }
.liveness-capture strong { color: #23364e; font-size: 13px; }
.liveness-capture span { color: var(--blue); font-size: 12px; font-weight: 900; }
.liveness-capture.ready { border-color: var(--green); background: #eff9f4; }
.camera-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; background: #07192d; }
.camera-dialog::backdrop { background: #07192d; }
.automatic-camera-panel { position: relative; width: 100%; height: 100%; overflow: hidden; background: #07192d; }
.automatic-camera-panel video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.automatic-face-guide { position: absolute; left: 50%; top: 43%; width: min(68vw,310px); aspect-ratio: .76; transform: translate(-50%,-50%); border: 3px solid rgba(255,255,255,.94); border-radius: 48%; box-shadow: 0 0 0 999px rgba(3,17,31,.28); }
.automatic-camera-copy { position: absolute; left: 18px; right: 18px; bottom: calc(34px + env(safe-area-inset-bottom)); padding: 15px; border-radius: 8px; background: rgba(4,24,43,.86); color: #fff; text-align: center; }
.automatic-camera-copy small { color: #bcd6ef; font-weight: 800; }
.automatic-camera-copy h2 { margin: 5px 0; font-size: 19px; letter-spacing: 0; }
.automatic-camera-copy strong { color: #fff; font-size: 13px; }
.camera-cancel { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; min-width: 70px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; background: rgba(4,24,43,.72); color: #fff; padding: 10px 12px; font-weight: 800; }
.account-actions { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.row-command { width: 100%; display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid #e8edf3; background: #fff; padding: 15px; color: #28394f; text-align: left; }
.row-command:last-child { border-bottom: 0; }
.row-command b { color: #8190a1; font-size: 20px; }
.danger-command span { color: var(--red); }

.grade-summary-panel { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:14px; border:1px solid var(--line); border-radius:7px; background:#fff; overflow:hidden; }
.grade-summary-panel span { display:grid; gap:5px; padding:13px; border-right:1px solid var(--line); }
.grade-summary-panel span:last-child { border-right:0; }.grade-summary-panel small{color:var(--muted);font-size:10px;font-weight:800}.grade-summary-panel strong{color:#153f6f;font-size:16px}
.student-grade-list { display:grid; gap:12px; }
.student-grade-subject { border:1px solid var(--line); border-radius:7px; background:#fff; overflow:hidden; }
.student-grade-subject > div,.student-grade-subject article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; }
.student-grade-subject > div { background:#eef5fc; color:#153f6f; }.student-grade-subject article{border-top:1px solid #e7edf3}
.student-grade-subject span { display:grid; gap:3px; }.student-grade-subject small{color:var(--muted);font-size:11px}.student-grade-subject b{font-size:18px;color:#0b5eb8}

.bottom-navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(66px + env(safe-area-inset-bottom)); padding: 5px 5px env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #dce3eb; background: rgba(255,255,255,.97);
}
.bottom-navigation button { min-width: 0; border: 0; background: transparent; color: #778494; display: grid; place-items: center; align-content: center; gap: 2px; }
.bottom-navigation span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; font-weight: 900; }
.bottom-navigation small { font-size: 9px; font-weight: 800; }
.bottom-navigation button.active { color: var(--blue); }
.bottom-navigation button.active span { background: #e8f1fc; }

/* PWA siswa: beranda ringkas, aktivitas akademik, dan progres harian. */
.student-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.student-hero-badge { display:flex; align-items:center; gap:5px; flex:0 0 auto; padding:7px 9px; border:1px solid #cce4d9; border-radius:6px; background:#eef9f4; color:#0d7655; font-size:10px; font-weight:800; }
.student-hero-badge svg { width:14px; height:14px; }
.student-primary-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.student-primary-actions button { min-width:0; min-height:112px; display:grid; justify-items:start; align-content:start; gap:5px; padding:13px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#203148; text-align:left; box-shadow:0 4px 14px rgba(25,55,83,.05); }
.student-primary-actions strong { font-size:13px; }
.student-primary-actions small { color:var(--muted); font-size:10px; line-height:1.35; }
.student-action-icon { width:38px; height:38px; display:grid; place-items:center; margin-bottom:3px; border-radius:8px; }
.student-action-icon svg { width:22px; height:22px; }
.student-action-icon.blue { background:#e7f0ff; color:#1769d2; }
.student-action-icon.amber { background:#fff4d8; color:#b97600; }
.student-action-icon.green { background:#e4f6ee; color:#12835f; }
.student-action-icon.navy { background:#e7eef6; color:#0b4f7c; }
.student-next-task { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid #eadcae; border-radius:8px; background:#fffdf5; color:#203148; text-align:left; }
.student-next-task>span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.student-next-task small { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.student-next-task>svg { width:18px; color:#8b98a8; }
.student-activity-hub { display:grid; gap:10px; }
.student-activity-feature { width:100%; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#203148; text-align:left; }
.student-activity-feature>span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.student-activity-feature small { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.student-activity-feature>svg { width:18px; color:#8b98a8; }
.student-activity-feature.schedule-feature { border-left:4px solid var(--blue); }
.student-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.student-service-grid button { min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:10px; padding:13px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--navy); text-align:left; }
.student-service-grid button>svg { width:24px; height:24px; }
.student-service-grid button>span { display:grid; gap:2px; }
.student-service-grid small { color:var(--muted); font-size:10px; }
.daily-mission-progress { display:grid; gap:10px; padding:15px; border:1px solid #cfe0ed; border-radius:8px; background:#fff; }
.daily-mission-progress>div:first-child { display:flex; align-items:baseline; gap:9px; min-width:0; }
.daily-mission-progress strong { flex:none; color:#0c4f7c; font-size:24px; }
.daily-mission-progress span { min-width:0; color:var(--muted); font-size:12px; }
.daily-mission-bar { height:8px; overflow:hidden; border-radius:4px; background:#e4ebf1; }
.daily-mission-bar i { display:block; width:0; height:100%; background:#16a36a; transition:width .2s ease; }
.student-mission-list { display:grid; gap:9px; }
.student-mission-row { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#21334a; text-align:left; }
.student-mission-row>span:nth-child(2) { display:grid; gap:3px; }
.student-mission-row small { color:var(--muted); }
.student-mission-row>svg { width:17px; color:#98a5b3; }
.mission-check { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:#edf3f9; color:var(--blue); }
.mission-check svg { width:20px; }
.student-mission-row.is-done { border-color:#cce4d9; background:#f5fbf8; }
.student-mission-row.is-done .mission-check { background:var(--green); color:#fff; }
.student-app .bottom-navigation { grid-template-columns:repeat(4,1fr); }
.bottom-navigation svg { width:23px; height:23px; margin-bottom:2px; stroke-width:2; }

dialog { width: min(calc(100% - 28px), 430px); border: 0; border-radius: 8px; padding: 0; box-shadow: 0 20px 60px rgba(12,34,56,.3); }
dialog::backdrop { background: rgba(9,24,42,.55); }
.dialog-panel { padding: 20px; }
.dialog-panel h2 { margin: 0; color: #17283e; }
.dialog-panel > div > span { color: var(--muted); font-size: 12px; }
.dialog-panel label:first-of-type { margin-top: 20px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.dialog-panel ol { color: #526174; padding-left: 22px; line-height: 1.65; font-size: 13px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 32px),420px); border-radius: 6px; background: #14273d; color: #fff; padding: 12px 15px; text-align: center; font-size: 12px; box-shadow: 0 9px 24px rgba(0,0,0,.2); }

/* Android menyediakan toolbar sendiri, sehingga kerangka navigasi PWA tidak ditampilkan dua kali. */
html.embedded-android .app-header { display: none !important; }
html.embedded-android .bottom-navigation { display: none !important; }
html.embedded-android .student-app { min-height: 100%; padding-bottom: 0; }
html.embedded-android .app-content { padding-top: 16px; padding-bottom: 24px; }
html.embedded-android .toast { bottom: 20px; }

@media (min-width: 700px) {
  .app-content { padding-top: 24px; }
  .quick-grid { grid-template-columns: repeat(4,1fr); }
  .bottom-navigation { left: 50%; width: 760px; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .student-primary-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .student-primary-actions button { min-height:104px; }
}

@media (max-width: 390px) {
  .app-content { padding-left: 12px; padding-right: 12px; }
  .attendance-banner { grid-template-columns: 42px 1fr; }
  .attendance-banner button { grid-column: 2; justify-self: start; padding: 3px 0; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .grade-summary-panel { grid-template-columns:1fr 1fr; }.grade-summary-panel span:last-child{grid-column:1/-1;border-top:1px solid var(--line)}
}
/* Asesmen fleksibel */
.student-assessment-list { display:grid; gap:12px; }
.student-assessment-card { width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:13px; align-items:center; padding:16px; border:1px solid #d9e2ee; border-radius:8px; background:#fff; color:#203047; text-align:left; box-shadow:0 4px 12px rgba(25,55,88,.06); }
.student-assessment-card>span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.student-assessment-card small,.student-assessment-card em { color:#728096; font-size:.78rem; font-style:normal; }
.student-assessment-card strong { font-size:1rem; }
.assessment-card-icon { width:46px; height:46px; border-radius:8px; display:grid; place-items:center; background:#e8f1ff; color:#155fc1; font-weight:800; font-size:1.15rem; }
.assessment-availability { font-size:.75rem; border-radius:999px; padding:6px 9px; white-space:nowrap; }
.assessment-availability.active { background:#dcfce7; color:#15803d; }.assessment-availability.upcoming { background:#fef3c7; color:#a16207; }.assessment-availability.done { background:#dbeafe; color:#1d4ed8; }.assessment-availability.review { background:#f3e8ff; color:#7e22ce; }.assessment-availability.ended { background:#f1f5f9; color:#64748b; }
.student-assessment-workspace { display:grid; gap:14px; }
.assessment-intro,.assessment-finish-panel { background:#fff; border:1px solid #d9e2ee; border-radius:8px; padding:22px; text-align:center; }
.assessment-intro h2,.assessment-finish-panel h2 { margin:4px 0 16px; color:#172a46; }
.assessment-intro-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:18px 0; background:#dce4ee; border:1px solid #dce4ee; }
.assessment-intro-meta span { display:grid; gap:4px; padding:12px 5px; background:#fff; }.assessment-intro-meta small { color:#718096; }.assessment-intro-meta strong { color:#123c6b; }
.assessment-finish-icon { width:64px; height:64px; margin:auto; display:grid; place-items:center; border-radius:50%; background:#dcfce7; color:#15803d; font-size:2rem; }
.assessment-finish-panel>strong { display:block; font-size:1.7rem; color:#155fc1; margin:14px 0 5px; }
.assessment-exit-waiting { display:grid; justify-items:center; gap:10px; margin-top:14px; }
.assessment-exit-waiting>strong { max-width:440px; font-size:1.35rem; color:#a85b00; }
.assessment-exit-waiting>small { max-width:520px; line-height:1.55; color:#617087; }
.assessment-exit-waiting .secondary-command { margin-top:8px; }
.assessment-run-header { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px; padding:12px; border-radius:8px; background:#143e6d; color:white; box-shadow:0 6px 16px rgba(15,47,83,.16); }
.assessment-run-header>span { display:grid; flex:1; min-width:0; }.assessment-run-header small { color:#c9ddf3; }.assessment-run-header strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assessment-run-header>b { font-size:1.15rem; font-variant-numeric:tabular-nums; }.assessment-run-header>b.urgent { color:#fbbf24; }
.assessment-progress { height:6px; border-radius:3px; background:#dce5ef; overflow:hidden; }.assessment-progress span { display:block; height:100%; background:#19a36c; transition:width .2s ease; }
.assessment-monitor-banner { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 13px; border:1px solid #a9d7c3; border-radius:8px; background:#effaf5; color:#155d43; }
.assessment-monitor-banner>span:nth-child(2) { display:grid; gap:2px; }.assessment-monitor-banner small { color:#527466; }.assessment-monitor-dot { width:10px; height:10px; border-radius:50%; background:#18a16b; box-shadow:0 0 0 4px rgba(24,161,107,.12); }
.assessment-monitor-banner.warning { border-color:#f1c27b; background:#fff8e8; color:#8a5200; }.assessment-monitor-banner.warning .assessment-monitor-dot { background:#e79b16; box-shadow:0 0 0 4px rgba(231,155,22,.14); }.assessment-monitor-banner.offline { border-color:#e6a4a4; background:#fff1f1; color:#9b2424; }
.student-question-list { display:grid; gap:14px; }
.student-question-card { padding:18px; border:1px solid #d9e2ee; border-radius:8px; background:#fff; }
.student-question-card header { display:flex; justify-content:space-between; color:#64748b; font-size:.8rem; }.student-question-card h3 { margin:12px 0 16px; font-size:1rem; line-height:1.55; }
.student-question-options { display:grid; gap:9px; }.student-question-options label { display:block; }.student-question-options input { position:absolute; opacity:0; }.student-question-options span { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 12px; border:1px solid #d7e0eb; border-radius:7px; }.student-question-options span b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#eef3f8; }.student-question-options span em { flex:0 0 auto; padding:3px 7px; border-radius:999px; background:#f1f5f9; color:#64748b; font-size:.68rem; font-style:normal; font-weight:850; }.student-question-options input:checked+span { border-color:#1967ce; background:#edf5ff; color:#124f9f; }.student-question-options input:checked+span b { background:#1967ce; color:white; }.single-choice-options span b { border-radius:50%; }.multiple-select-options span { border-color:#bdd8cc; background:#fbfffd; }.multiple-select-options span b { border-radius:7px; background:#e8f7ef; color:#128058; }.multiple-select-options span em { background:#e8f7ef; color:#128058; }.multiple-select-options input:checked+span { border-color:#16a36a; background:#ecfdf5; color:#0c6b47; box-shadow:inset 4px 0 #16a36a; }.multiple-select-options input:checked+span b { background:#16a36a; color:#fff; }.multiselect-help { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #bde2cf; border-radius:7px; background:#f0fdf6; color:#0d704a; font-weight:800; }.multiselect-help svg { width:16px; height:16px; }
.student-question-card textarea { width:100%; border:1px solid #ccd7e5; border-radius:7px; padding:12px; font:inherit; resize:vertical; }
.question-answer-help { display:block; margin-top:8px; color:#64748b; }
.student-question-media { display:grid; gap:7px; margin:0 0 16px; padding:10px; border:1px solid #dce5ef; border-radius:7px; background:#f8fafc; }
.student-question-media img,.student-question-media video { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:6px; background:#eef3f8; }
.student-question-media audio { width:100%; }.student-question-media figcaption { color:#64748b; font-size:.78rem; overflow-wrap:anywhere; }
.student-question-image-button { display:grid; gap:8px; width:100%; border:0; padding:0; background:transparent; color:#155fc1; cursor:zoom-in; }.student-question-image-button span { font-size:.75rem; font-weight:800; }
.student-question-media-file { display:grid; gap:3px; width:100%; margin:0 0 16px; padding:12px; border:1px solid #9fc2ec; border-radius:7px; background:#edf5ff; color:#124f9f; font:inherit; font-weight:800; text-align:left; }.student-question-media-file small { color:#58708c; font-weight:600; overflow-wrap:anywhere; }
.assessment-media-open { overflow:hidden; }.assessment-media-dialog { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; border:0; border-radius:0; padding:0; background:#fff; color:#1c2f45; }.assessment-media-dialog::backdrop { background:#08182a; }
.assessment-media-panel { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); height:100%; }.assessment-media-panel>header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:10px 14px; border-bottom:1px solid #dce5ef; background:#143e6d; color:#fff; }.assessment-media-panel>header strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.assessment-media-panel>header button { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:6px; background:#fff; color:#143e6d; }.assessment-media-panel>header svg { width:20px; }
.assessment-media-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:50px; padding:7px 12px; border-bottom:1px solid #dce5ef; background:#f7f9fc; }.assessment-media-pages,.assessment-media-zoom { display:flex; align-items:center; gap:7px; }.assessment-media-toolbar button { display:grid; place-items:center; min-width:38px; height:36px; border:1px solid #c9d5e3; border-radius:6px; padding:0 9px; background:#fff; color:#173f70; font-weight:800; }.assessment-media-toolbar button:disabled { opacity:.4; }.assessment-media-toolbar svg { width:18px; }.assessment-media-pages span { min-width:110px; color:#52667d; font-size:.78rem; text-align:center; }
.assessment-media-loading { min-height:24px; margin:0; padding:4px 12px; color:#52667d; font-size:.78rem; text-align:center; }.assessment-media-canvas { min-height:0; overflow:auto; padding:12px; background:#dfe6ee; text-align:center; overscroll-behavior:contain; }.assessment-media-canvas img { display:block; width:100%; height:auto; max-width:none; margin:0 auto; border-radius:4px; background:#fff; box-shadow:0 4px 16px rgba(15,35,58,.18); cursor:zoom-in; transition:width .15s ease; }
.student-question-page-form { display:grid; gap:14px; width:min(100%,820px); margin:0 auto; }
.assessment-exam-meta { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #d8e2ed; border-radius:7px; overflow:hidden; background:#fff; }
.assessment-exam-meta>span { display:grid; gap:2px; min-height:58px; padding:9px 12px; border-right:1px solid #e3eaf2; }
.assessment-exam-meta>span:last-child { border-right:0; }.assessment-exam-meta small { color:#718096; font-size:.72rem; }.assessment-exam-meta strong { color:#203a5b; font-size:.84rem; }.assessment-exam-meta .secure { grid-template-columns:20px 1fr; align-items:center; color:#138456; }.assessment-exam-meta .secure svg { grid-row:1/3; width:18px; }.assessment-exam-meta .secure strong { color:#138456; }
.assessment-monitor-compact { min-height:50px; }.assessment-monitor-compact small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studentAssessmentQuestionPage { scroll-margin-top:84px; }
.student-question-page-form .student-question-card { min-height:330px; padding:20px; box-shadow:0 5px 15px rgba(25,55,88,.05); }
.student-question-page-form .student-question-card header span { color:#155fc1; font-weight:850; text-transform:uppercase; }.student-question-page-form .student-question-card h3 { margin:14px 0 20px; color:#182a40; font-size:1.08rem; }
.question-type-indicator { display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; margin:13px 0 0; padding:7px 10px; border:1px solid #c8dbee; border-radius:6px; background:#eef6ff; color:#164f8f; }.question-type-indicator>i,.question-type-indicator>svg { flex:0 0 auto; width:19px; height:19px; }.question-type-indicator>span { display:grid; gap:1px; }.question-type-indicator strong { font-size:.78rem; }.question-type-indicator small { color:#526d89; font-size:.7rem; }.question-type-indicator.multiple_select { border-color:#b9ddce; background:#edf9f4; color:#126a4b; }.question-type-indicator.multiple_select small { color:#497565; }.question-type-indicator.matching,.question-type-indicator.category { border-color:#ead29e; background:#fff8e8; color:#845600; }.question-type-indicator.matching small,.question-type-indicator.category small { color:#7a6844; }.question-type-indicator.essay { border-color:#d8c9ed; background:#f7f2fc; color:#67438f; }.question-type-indicator.essay small { color:#716080; }
.assessment-review-toggle { display:flex; width:max-content; margin:12px 2px 0; cursor:pointer; }.assessment-review-toggle input { position:absolute; opacity:0; }.assessment-review-toggle span { display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 11px; border:1px solid transparent; border-radius:6px; color:#5f6f82; font-weight:750; }.assessment-review-toggle svg { width:18px; }.assessment-review-toggle.active span { border-color:#f0b93f; background:#fff7df; color:#8a5a00; }
.assessment-question-navigator { border:1px solid #d6e0eb; border-radius:7px; overflow:hidden; background:#fff; }
.assessment-navigator-heading { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:50px; padding:10px 14px; border:0; background:#fff; color:#203a5b; text-align:left; }.assessment-navigator-heading>span { display:flex; align-items:center; gap:9px; }.assessment-navigator-heading svg { width:19px; }
#studentQuestionNavigatorBody { padding:13px 14px 15px; border-top:1px solid #e4ebf3; }#studentQuestionNavigatorBody[hidden] { display:none; }
.assessment-navigator-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:13px; color:#5f6f82; font-size:.72rem; }.assessment-navigator-legend span { display:flex; align-items:center; gap:6px; }.assessment-navigator-legend i { width:14px; height:14px; border-radius:3px; }.assessment-navigator-legend .unanswered { border:2px solid #dc3636; background:#fff; }.assessment-navigator-legend .answered { background:#1967d2; }.assessment-navigator-legend .review { background:#f2ad16; }
.assessment-question-number-grid { display:grid; grid-template-columns:repeat(10,minmax(36px,1fr)); gap:7px; }.assessment-question-number-grid button { aspect-ratio:1; min-width:0; border-radius:6px; font-weight:850; }.assessment-question-number-grid button.unanswered { border:2px solid #dc3636; background:#fff; color:#c52d2d; }.assessment-question-number-grid button.answered { border:2px solid #1967d2; background:#1967d2; color:#fff; }.assessment-question-number-grid button.review { border:2px solid #f2ad16; background:#f2ad16; color:#4d3500; }.assessment-question-number-grid button.current { outline:3px solid #173f70; outline-offset:2px; }
.assessment-unanswered-count { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:.8rem; }.assessment-unanswered-count svg { width:18px; }.assessment-unanswered-count.warning { color:#c52d2d; }.assessment-unanswered-count.complete { color:#138456; }
.assessment-page-navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 2px; }.assessment-page-navigation button { display:flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:132px; min-height:40px; padding:8px 13px; font-size:.8rem; }.assessment-page-navigation #nextStudentQuestion { min-width:168px; }.assessment-page-navigation svg { width:16px; }
.assessment-submit-command { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; border:1px solid #16845a; border-radius:7px; background:#eaf8f1; color:#0d704a; font-weight:850; }.assessment-submit-command svg { width:18px; }
.student-category-grid,.student-matching-grid { display:grid; gap:10px; }
.student-category-grid label,.student-matching-grid label { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,42%); align-items:center; gap:12px; padding:11px; border:1px solid #dce5ef; border-radius:7px; background:#f8fafc; }
.student-category-grid label>span,.student-matching-grid label>span { line-height:1.45; }
.student-category-grid select,.student-matching-grid select { width:100%; min-height:42px; padding:8px; border:1px solid #b9c8da; border-radius:6px; background:#fff; font:inherit; }
@media (max-width:560px) { .student-category-grid label,.student-matching-grid label { grid-template-columns:1fr; gap:7px; } }
#studentAssessmentAutosave { text-align:center; color:#64748b; }
@media(max-width:560px) { .student-assessment-card { grid-template-columns:44px minmax(0,1fr); }.student-assessment-card>.assessment-availability { grid-column:2; justify-self:start; }.assessment-intro-meta { grid-template-columns:repeat(2,1fr); }.assessment-monitor-banner { grid-template-columns:12px 1fr; }.assessment-monitor-banner button { grid-column:2; justify-self:start; } }
@media(max-width:560px) { .assessment-run-header { margin:-4px -4px 0; border-radius:6px; }.assessment-run-header strong { max-width:180px; }.assessment-exam-meta>span { padding:8px; }.assessment-exam-meta strong { font-size:.76rem; }.assessment-monitor-compact { grid-template-columns:10px minmax(0,1fr) auto; }.assessment-monitor-compact button { grid-column:auto; padding:4px; }.assessment-monitor-compact small { display:none; }.student-question-page-form .student-question-card { min-height:300px; padding:16px; }.assessment-question-number-grid { grid-template-columns:repeat(5,1fr); gap:9px; }.assessment-page-navigation { margin:0 -2px; }.assessment-page-navigation button { min-width:116px; max-width:48%; padding:8px 9px; font-size:.76rem; }.assessment-page-navigation #nextStudentQuestion { min-width:154px; }.question-type-indicator { width:100%; box-sizing:border-box; } }
.seven-kaih-form{display:grid}.daily-seven-kaih-form{margin-top:14px;overflow:hidden;border:1px solid #d7e2ed;border-radius:8px;background:#fff}.daily-mission-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid #e1e8ef}.daily-mission-heading h2{margin:0;color:#18324f;font-size:17px}.daily-mission-heading p{margin:4px 0 0;color:#708094;font-size:11px}.daily-mission-heading>svg{width:26px;color:#16865c}.seven-kaih-habit-list{display:grid}.seven-kaih-habit{display:grid;grid-template-columns:38px minmax(0,1fr) 48px;align-items:center;gap:12px;min-height:66px;padding:11px 14px;border-bottom:1px solid #e4ebf2;background:#fff}.seven-kaih-habit strong,.seven-kaih-habit small{display:block}.seven-kaih-habit small{margin-top:3px;color:#748396;font-size:11px}.seven-kaih-number{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#eaf3ff;color:#145bb7;font-weight:800}.seven-kaih-number svg{width:20px;height:20px}.seven-kaih-habit input{position:absolute;opacity:0}.seven-kaih-habit>i{position:relative;width:46px;height:26px;border-radius:14px;background:#c5ced8}.seven-kaih-habit>i:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .2s}.seven-kaih-habit input:checked+i{background:#16a36a}.seven-kaih-habit input:checked+i:after{transform:translateX(20px)}.seven-kaih-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;padding:12px 14px;background:#f8fafc}.seven-kaih-note label{grid-column:1/-1;color:#36526d;font-size:12px;font-weight:900}.seven-kaih-note textarea{width:100%;box-sizing:border-box;border:1px solid #cfd9e4;border-radius:7px;padding:10px;font:inherit}.seven-kaih-note button{align-self:stretch;white-space:nowrap}.daily-seven-kaih-form .form-status{padding:0 14px 12px}.mission-group .section-heading{align-items:center}.school-missions{margin-top:16px;border-top:3px solid #1768bd}
.seven-detail-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:70px;padding:12px 14px;border-bottom:1px solid #e2e9f0}.seven-detail-row strong,.seven-detail-row small,.seven-detail-panel header strong,.seven-detail-panel header small{display:block}.seven-detail-row small,.seven-detail-panel header small{margin-top:3px;color:#728296;font-size:11px}.seven-detail-row.is-complete{background:#f3fbf7}.seven-detail-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:7px;background:#eaf3ff;color:#145bb7}.seven-detail-icon svg{width:21px}.seven-one-tap{min-width:70px;min-height:38px;border:0;border-radius:6px;background:#1267c4;color:#fff;font-weight:800}.seven-one-tap:disabled{background:#9ba8b5;opacity:1}.seven-detail-row.is-complete .seven-one-tap:disabled{background:#16865c}.seven-detail-panel{padding:14px;border-bottom:1px solid #e2e9f0}.seven-detail-panel header{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;margin-bottom:12px}.seven-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.seven-detail-choice{display:grid;place-items:center;gap:2px;min-height:42px;border:1px solid #bfd0df;border-radius:6px;background:#fff;color:#26445f;font-weight:800}.seven-detail-choice span{font-size:13px}.seven-detail-choice small{font-size:9px;color:#76879a;font-weight:700;line-height:1.1}.seven-detail-choice.active{border-color:#16865c;background:#eaf8f1;color:#0d754d}.seven-detail-choice:disabled{background:#eef2f6;color:#7b8897}.seven-field-grid{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px}.seven-field-grid label{display:grid;gap:5px;color:#597086;font-size:11px;font-weight:700}.seven-field-grid input{box-sizing:border-box;width:100%;min-height:40px;border:1px solid #cbd7e2;border-radius:6px;padding:0 10px;font:inherit}.seven-photo-field{display:inline-flex;align-items:center;gap:7px;margin-top:10px;color:#145b9f;font-size:12px;font-weight:800;cursor:pointer}.seven-photo-field input{position:absolute;width:1px;height:1px;opacity:0}.seven-photo-field svg{width:17px}.seven-photo-preview{display:inline-block;margin:8px 0 0 12px;vertical-align:middle}.seven-photo-preview img{display:block;width:52px;height:52px;object-fit:cover;border:1px solid #d2dce6;border-radius:6px}.seven-meal-list{display:grid;gap:8px}.seven-meal-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.seven-meal-list .seven-detail-choice{min-height:34px;max-width:150px}.seven-meal-list .seven-photo-field{margin-top:0}
@media(max-width:420px){.seven-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seven-field-grid{grid-template-columns:1fr}.seven-meal-list>div{grid-template-columns:1fr auto}.seven-one-tap{min-width:64px}}