.assistant-shell {
  width: min(100%, 1280px);
}

.assistant-page .notice {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  z-index: 40;
  width: min(calc(100% - 24px), 520px);
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  animation: assistantNoticeIn .16s ease-out;
}

@keyframes assistantNoticeIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.assistant-page dialog select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 9px;
  color: white;
  background: #174d59;
  outline: 0;
}

.login-group-preview {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(33, 212, 178, .28);
  border-radius: 9px;
  color: #d8f8f3;
  background: rgba(33, 212, 178, .1);
  font-size: 9px;
}

.login-group-preview strong {
  color: #ffe093;
  font-size: 11px;
}

.login-group-preview[hidden],
.login-session-conflict[hidden] {
  display: none !important;
}

.login-session-conflict {
  display: grid;
  gap: 5px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid rgba(244, 197, 87, .38);
  border-radius: 10px;
  color: #d9e7ef;
  background: rgba(244, 197, 87, .1);
  font-size: 9px;
}

.login-session-conflict > strong {
  color: #ffe093;
  font-size: 11px;
}

.login-session-conflict > div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6px;
  margin-top: 4px;
}

.login-session-conflict button {
  padding: 8px 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  color: #e6f2f5;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

.login-session-conflict #confirmTakeover {
  color: #072e2b;
  border-color: #f4c557;
  background: #f4c557;
  font-weight: 800;
}

.subject-tabs button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  place-content: center;
}

.subject-tabs[hidden] {
  display: none !important;
}

.subject-tabs button strong {
  font-size: 10px;
}

.assistant-matrix-panel {
  overflow: hidden;
  border: 1px solid #dce6ed;
  border-radius: 15px;
  background: white;
  box-shadow: 0 9px 26px rgba(18, 52, 80, .06);
}

.assistant-matrix-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 61px;
  padding: 13px 16px;
  border-bottom: 1px solid #e5ecf1;
  background: linear-gradient(90deg, #f8fbfc, #eff9f7);
}

.assistant-matrix-heading > div {
  display: grid;
  gap: 2px;
}

.assistant-matrix-heading span {
  color: #087b70;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.assistant-matrix-heading strong {
  color: #173b52;
  font-size: 18px;
}

.assistant-matrix-heading p {
  margin: 0;
  color: #718597;
  font-size: 9px;
}

.assistant-matrix-scroll {
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.assistant-progress-matrix {
  width: 100%;
}

.assistant-matrix-header,
.assistant-matrix-row {
  display: grid;
  align-items: stretch;
}

.assistant-matrix-header {
  position: sticky;
  top: 0;
  z-index: 4;
  color: #516c7e;
  background: #eef5f7;
  box-shadow: 0 1px 0 #dce7ec;
}

.assistant-matrix-corner,
.assistant-student-column,
.assistant-action-label,
.matrix-status-button,
.exam-status-editor {
  min-width: 0;
  border-right: 1px solid #e2eaef;
  border-bottom: 1px solid #e6edf1;
}

.assistant-matrix-corner {
  position: sticky;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 8px 13px;
  color: #698092;
  background: #eef5f7;
  font-size: 9px;
  font-weight: 800;
}

.assistant-student-column {
  display: grid;
  min-height: 54px;
  padding: 7px 5px;
  place-items: center;
  background: #eef5f7;
  text-align: center;
}

.assistant-student-column span {
  display: -webkit-box;
  overflow: hidden;
  color: #183b52;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.assistant-action-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 13px;
  background: #fbfdfe;
  box-shadow: 1px 0 0 #e2eaef;
}

.assistant-action-label b {
  display: grid;
  flex: 0 0 40px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #046e64;
  background: #dff7f3;
  font-size: 11px;
}

.assistant-action-label span {
  overflow: hidden;
  color: #294b60;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.matrix-status-button {
  display: grid;
  min-height: 58px;
  padding: 5px;
  place-content: center;
  border-top: 0;
  border-left: 0;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .12s ease, background-color .12s ease;
}

.matrix-status-button:hover {
  background: #f5fafb;
}

.matrix-status-button i {
  display: grid;
  width: 27px;
  height: 27px;
  margin: auto;
  place-items: center;
  border: 2px solid #bdccd6;
  border-radius: 50%;
  color: #94a7b4;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.matrix-status-button span {
  margin-top: 3px;
  color: #8294a2;
  font-size: 8px;
}

.matrix-status-button.passed {
  background: #eefbf8;
}

.matrix-status-button.passed i {
  color: white;
  border-color: #10a891;
  background: #10a891;
}

.matrix-status-button.passed span {
  color: #08796e;
  font-weight: 800;
}

.matrix-status-button.saving {
  cursor: progress;
}

.matrix-status-button:disabled,
.exam-status-editor select:disabled {
  cursor: wait;
  opacity: .55;
}

.matrix-legend {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 13px;
  color: #718597;
  background: #f8fbfc;
  font-size: 8px;
}

.matrix-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.matrix-legend i {
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 2px solid #bdccd6;
  border-radius: 50%;
  font-size: 7px;
  font-style: normal;
}

.matrix-legend i.passed {
  color: white;
  border-color: #10a891;
  background: #10a891;
}

.matrix-legend em {
  margin-left: auto;
  color: #97a5b0;
  font-style: normal;
}

.exam-matrix-scroll {
  min-height: 165px;
}

.assistant-exam-row .assistant-action-label {
  min-height: 82px;
}

.exam-status-editor {
  display: grid;
  min-height: 82px;
  padding: 10px 6px;
  place-items: center;
  background: white;
}

.exam-status-editor select {
  width: 100%;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid #cfdae2;
  border-radius: 8px;
  color: #526a7c;
  background: #f6f9fb;
  font-size: 9px;
  font-weight: 800;
}

.exam-status-editor.waiting select { color: #916900; border-color: #ead08a; background: #fff9e9; }
.exam-status-editor.redo select { color: #526a7c; border-color: #cfdae2; background: #f6f9fb; }
.exam-status-editor.passed select { color: #08796e; border-color: #8dd7ca; background: #ecfaf7; }

.exam-legend i.not-started { background: #edf2f5; }
.exam-legend i.waiting { border-color: #d9a62e; background: #d9a62e; }
.exam-legend i.redo,
.exam-legend i.not-passed {
  color: #94a7b4;
  border-color: #bdccd6;
  background: transparent;
}

@media (max-width: 700px) {
  .assistant-matrix-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 11px 12px;
  }

  .assistant-matrix-heading strong { font-size: 16px; }

  .assistant-matrix-header,
  .assistant-matrix-row {
    grid-template-columns: 108px repeat(var(--student-count, 1), 92px) !important;
    min-width: var(--mobile-matrix-width) !important;
  }

  .assistant-matrix-corner {
    min-height: 48px;
    padding: 6px 8px;
    font-size: 8px;
  }

  .assistant-student-column {
    min-height: 48px;
    padding: 5px 3px;
  }

  .assistant-student-column span { font-size: 9px; }
  .assistant-action-label { gap: 5px; min-height: 54px; padding: 6px; }
  .assistant-action-label b { flex: 0 0 30px; height: 28px; font-size: 9px; }
  .assistant-action-label span { font-size: 9px; line-height: 1.2; }
  .matrix-status-button { min-height: 54px; }
  .matrix-legend em { display: none; }
}