/* Dashboard */
body .workspace .overview-home .overview-hero {
  position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  gap:clamp(14px,3vw,44px); align-items:center; padding:clamp(18px,3vw,32px);
  margin-bottom:16px; border-radius:18px;
  background:radial-gradient(ellipse at 80% 15%,#5d98dd 0%,transparent 54%),linear-gradient(120deg,#18477f,#2b6eb8);
}
.overview-home .overview-hero .overline,.overview-home .overview-hero p { color:#e0edff }
body .workspace .overview-home .overview-hero h2 { font-size:clamp(21px,3vw,32px); line-height:1.14; color:#fff; margin:8px 0 }
.overview-home .overview-hero p { font-size:14px; margin:0 0 15px }
.overview-hero-mascot { display:grid; place-items:center; width:148px; aspect-ratio:1; border:1px solid #ffffff35; border-radius:50%; background:#ffffff20; box-shadow:0 0 0 12px #ffffff0f }
.overview-hero-mascot img { display:block; max-width:86%; height:auto }
.overview-home .overview-date { min-width:110px; margin:0 }
.overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px }
.overview-home [data-tone] { --overview-ink:#245c99; --overview-tint:#e9f2ff }
.overview-home [data-tone="gold"] { --overview-ink:#925c14; --overview-tint:#fff2d9 }
.overview-home [data-tone="mint"] { --overview-ink:#17664f; --overview-tint:#e2f5ec }
.overview-home [data-tone="violet"] { --overview-ink:#664b9a; --overview-tint:#f0eafd }
.overview-stat { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; color:#243c59; background:#fff; border:1px solid #dbe5f0; border-radius:13px; text-decoration:none; box-shadow:0 2px 5px #234a7910 }
.overview-stat:hover { border-color:var(--overview-ink); color:var(--overview-ink) }
.overview-stat .menu-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:10px; background:var(--overview-tint); color:var(--overview-ink) }
.overview-stat small,.overview-stat strong { display:block }
.overview-stat small { font-size:12px; line-height:1.2; color:#4d6481 }
.overview-stat strong { margin-top:3px; color:var(--overview-ink); font-size:23px; line-height:1; font-variant-numeric:tabular-nums }
.overview-stat-arrow { margin-left:auto; align-self:flex-start; color:#647c98 }
.overview-home .overview-columns { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; margin-bottom:14px }
.overview-home .panel { min-width:0; padding:16px; border-radius:14px }
.overview-home .section-heading { gap:8px; margin-bottom:12px; flex-wrap:wrap }
.overview-home .section-heading h3 { margin:0; font-size:16px }
.overview-empty { display:flex; align-items:center; gap:12px; padding:12px; min-height:83px; border-radius:11px; background:#f7faff; border:1px dashed #d6e2f1 }
.overview-empty-art { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; border-radius:50%; background:var(--overview-tint) }
.overview-empty strong { color:var(--overview-ink); font-size:14px }
.overview-empty p { margin:4px 0 0; color:#526985; font-size:12px; line-height:1.4 }
.overview-home .quick-actions { margin-top:12px; gap:8px; flex-wrap:wrap }
@media (max-width:1050px) { .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:760px) {
  body .workspace .overview-home .overview-hero { grid-template-columns:minmax(0,1fr) auto }
  .overview-home .overview-date { display:none }
  .overview-hero-mascot { width:76px; box-shadow:none }
  .overview-home .overview-columns { grid-template-columns:1fr }
}
@media (max-width:380px) { .overview-stat-arrow { display:none } .overview-stat { gap:7px; padding:9px } }

/* Audio playback and recording */
.exam-audio { display:flex; align-items:center; gap:12px; padding:11px 13px; margin:8px 0 0; width:100%; min-width:0; box-sizing:border-box; border:1px solid #d6e4f5; border-radius:13px; background:linear-gradient(125deg,#f3f8ff,#fff); color:#24466b }
.exam-audio audio[hidden],.exam-audio [hidden] { display:none !important }
.exam-audio .exam-audio-toggle { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; min-height:42px; margin:0; padding:0; border:0; border-radius:50%; color:white; background:#2b68ae; cursor:pointer; box-shadow:0 2px 5px #295f962c }
.exam-audio .exam-audio-toggle:hover { background:#1d518d }
.exam-audio-main { flex:1; min-width:0 }
.exam-audio-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; line-height:1.3 }
.exam-audio-time { color:#496682; white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums }
.exam-audio input.exam-audio-seek { display:block; appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:24px; min-height:24px; border:0; border-radius:0; padding:0; margin:0; background:transparent; box-shadow:none; cursor:pointer }
.exam-audio input.exam-audio-seek:disabled { cursor:default; opacity:.65 }
.exam-audio-seek::-webkit-slider-runnable-track { height:5px; border-radius:6px; background:linear-gradient(to right,#2b68ae var(--audio-progress,0%),#d7e5f4 var(--audio-progress,0%)) }
.exam-audio-seek::-moz-range-track { height:5px; border-radius:6px; background:linear-gradient(to right,#2b68ae var(--audio-progress,0%),#d7e5f4 var(--audio-progress,0%)) }
.exam-audio-seek::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-4.5px; border:2px solid #fff; border-radius:50%; background:#2b68ae; box-shadow:0 0 0 1px #2b68ae }
.exam-audio-seek::-moz-range-thumb { width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#2b68ae; box-shadow:0 0 0 1px #2b68ae }
.exam-audio .exam-audio-toggle:focus-visible,.exam-audio input.exam-audio-seek:focus-visible { outline:2px solid #1b62bb; outline-offset:3px }
.exam-audio .exam-audio-error { margin:4px 0 0; font-size:12px; color:#9c2737 }
.exam-record-card,.speaking-panel { display:grid; gap:10px; padding:12px; margin-top:12px; border:1px solid #d6e4f5; border-radius:13px; background:#f6f9fd }
.exam-record-heading { display:flex; align-items:baseline; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; color:#24466b }
.exam-record-heading small { color:#536f8f; font-size:12px }
.exam-record-card .speaking-controls,.speaking-panel .speaking-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 }
.exam-record-card .mic-permission-link { justify-self:start; margin:0 }
.exam-record-card .speaking-controls [data-action="record"]::before { content:""; width:8px; height:8px; display:inline-block; margin-right:8px; border-radius:50%; background:currentColor }
.exam-record-card:has(.is-recording) .speaking-controls [data-action="record"]::before { border-radius:2px }
.speaking-panel .speaking-status,.exam-record-status { margin:0; font-size:12px; color:#4a6480 }
.exam-record-status:empty,.exam-record-card [id^="record-preview-"]:empty { display:none }
.speaking-status.is-recording,.exam-record-status.is-recording { display:flex; align-items:center; gap:8px; justify-self:start; padding:5px 9px; border-radius:8px; background:#fdecef; color:#9c2737; font-weight:650; font-variant-numeric:tabular-nums }
.is-recording::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor }
.exam-record-card .exam-audio,.speaking-preview .exam-audio { margin:0 }

/* Keep Speaking controls together and allow the editor text to grow. */
.exam-record-card,.speaking-panel { gap:8px; padding:10px 12px }
.exam-record-card .exam-record-heading { margin:0; line-height:1.25 }
.exam-record-card .speaking-controls { gap:6px 8px }
.exam-record-card .speaking-controls :is(button,.speaking-file-btn),.speaking-panel .speaking-actions button { min-height:36px; padding:6px 10px; margin:0; line-height:1.2 }
.exam-record-card .speaking-controls .mic-permission-link { background:none; border:0; color:#285a98; box-shadow:none; text-decoration:underline; text-underline-offset:3px }
.exam-record-card .exam-audio,.speaking-preview .exam-audio { padding:5px 9px; gap:9px }
.exam-record-card .exam-audio-toggle,.speaking-preview .exam-audio-toggle { width:36px; height:36px; min-height:36px; flex-basis:36px }
.exam-record-card .exam-record-status { margin:0; line-height:1.3 }
.speaking-panel .writing-rubric { margin:0; padding:0; background:none; border:0 }
.speaking-panel .speaking-preview > p { display:none }
#editor-form .group-material :is(.section-instructions,.section-passage) { display:block; width:100%; min-width:0; max-width:100%; min-height:64px; height:auto; max-height:none; box-sizing:border-box; resize:vertical!important; overflow:auto }
#editor-form .section-image-preview:empty { display:none }
.exam-group-image { display:block; width:auto; max-width:100%; max-height:520px; object-fit:contain; margin:10px 0; border-radius:8px }
.section-image-preview .exam-group-image { max-height:200px; margin:0 }
#editor-form .exam-move-handle { display:inline-grid; place-items:center; flex:0 0 28px; width:28px; height:32px; padding:0; color:#526e8f; background:#edf3fb; border:1px solid #d5e2f0; border-radius:7px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none }
#editor-form .exam-move-handle:active { cursor:grabbing }
#editor-form .exam-move-handle:focus-visible { outline:2px solid #296bbb; outline-offset:2px }
#editor-form .exam-dragging { opacity:.52 }
#editor-form [data-exam-drop="before"] { box-shadow:0 -3px 0 #296bbb }
#editor-form [data-exam-drop="after"] { box-shadow:0 3px 0 #296bbb }

.overview-home .overview-columns { align-items:start }
.overview-home :is(.text-link,.overview-hero .btn) { display:inline-flex; align-items:center; gap:6px }
.overview-home :is(.text-link,.overview-hero .btn,.overview-event,.overview-submission)>svg { flex:none; width:16px; height:16px }
.overview-grading h3 { display:flex; align-items:center; gap:8px }
.overview-submissions { display:grid; gap:6px; list-style:none; margin:0; padding:0 }
.overview-submission { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; text-align:left; color:#27466b; background:#f6f9fd; border:1px solid #e1eaf5; border-radius:9px; cursor:pointer }
.overview-submission:hover { background:#edf5ff; border-color:#bfd5ef }
.overview-submission-icon { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:8px; background:#e8f0fc; color:#376dab }
.overview-submission-copy { flex:1; min-width:0 }
.overview-submission-copy :is(strong,small) { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.overview-submission-copy strong { font-size:13px }
.overview-submission-copy small { color:#546f90; font-size:12px; margin-top:3px }
body .exam-form-dialog .q-materials.group-material .q-materials-passage textarea { margin:0 }

/* Both shared upload fields follow the same row sizing. */
#editor-form .group-material .question-media-editor { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:0 }
#editor-form .group-material .question-media-editor>.upload-label { display:inline-flex; align-items:center; flex:0 0 auto; width:auto; margin:0; white-space:nowrap }
#editor-form .group-material .question-media-editor>.q-media-name { flex:1 1 70px; min-width:0; margin:0; color:#687e99 }

.exam-form-dialog .choice-toolbar .q-multiple-toggle { display:inline-flex; align-items:center; gap:7px; margin:0; cursor:pointer }
.exam-form-dialog .q-multiple-toggle input { width:16px; height:16px; flex:none; margin:0; accent-color:#2b68ae }
.multi-choice-instruction { margin:6px 0 8px; font-size:.9em; color:#496682 }