.grade-page > main { max-width: 1700px; }
.grade-sheets { display: flex; gap: 3px; align-items: end; overflow-x: auto; margin: 0 0 -1px; padding: 0 4px; }
.grade-sheet-tab { flex: none; min-width: 92px; padding: 11px 18px; border: 1px solid #cdded4; border-bottom-color: #b5ccc0; border-radius: 9px 9px 0 0; background: #eaf2ec; color: #4b6b60; font-size: 12px; font-weight: 800; }
.grade-sheet-tab:hover { background: #f4faf5; }
.grade-sheet-tab.active { position: relative; z-index: 1; border-color: #b5ccc0; border-bottom-color: #fff; background: #fff; color: #176d58; }
.grade-sheet-tab:focus-visible { outline: 3px solid #258a78; outline-offset: -3px; }
.grade-toolbar, .grade-bulk { padding: 20px 24px; margin-bottom: 18px; }
.grade-control-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.grade-control-row label { display: flex; flex-direction: column; gap: 5px; color: #607d7b; font-size: 11px; font-weight: 800; }
.grade-control-row select, .grade-control-row input {
  height: 39px; min-width: 115px; padding: 0 10px; border: 1px solid #cdded4; border-radius: 8px;
  background: #fff; color: #183449; font: inherit; font-size: 13px;
}
.grade-control-row input { min-width: 210px; }
.grade-control-row select:focus-visible, .grade-control-row input:focus-visible, .grade-table button:focus-visible, .grade-table input:focus-visible, .grade-table select:focus-visible { outline: 3px solid #258a78; outline-offset: 2px; }
.grade-search-label { flex: 1 1 210px; }
.grade-search-label input { width: 100%; }
.grade-action-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #e3ece7; }
.grade-action-row > span { color: #4d7771; font-size: 12px; font-weight: 750; }
.grade-action-row > div { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-action-row .button { min-height: 36px; font-size: 11px; }
.grade-bulk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; background: #f8fcf8; }
.grade-bulk[hidden] { display: none; }
.grade-bulk h3 { margin: 2px 0 5px; font-size: 17px; color: #173d4b; }
.grade-bulk p { margin: 0; color: #78908f; font-size: 11px; }
.grade-bulk .button { min-height: 39px; }
.grade-table-panel { overflow: hidden; margin-bottom: 16px; }
.grade-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #dce7e2; }
.grade-section-head h3 { margin: 0; font-size: 19px; color: #173d4b; }
.grade-section-head p { margin: 0; font-size: 11px; color: #78908f; }
.grade-table-wrap { overflow: auto; max-height: min(73vh, 900px); }
.grade-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1180px; white-space: nowrap; text-align: left; }
.grade-table th, .grade-table td { padding: 9px 10px; border-bottom: 1px solid #e3ece7; background: #fff; font-size: 12px; }
.grade-table thead th { position: sticky; top: 0; z-index: 2; background: #e7f3ef; color: #346c62; font-size: 11px; font-weight: 800; }
.grade-table tbody tr:hover td, .grade-table tbody tr:hover th { background: #f5faf6; }
.grade-table .grade-name { min-width: 170px; font-weight: 800; color: #234454; }
.grade-table .grade-kana { min-width: 145px; color: #68827d; }
.grade-table .grade-number { font-variant-numeric: tabular-nums; font-weight: 800; color: #346c62; }
.grade-table .grade-center { text-align: center; }
.grade-table .grade-seat { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.grade-table .grade-attendance-cell { min-width: 58px; text-align: center; }
.grade-attendance-button { cursor: pointer; }
.grade-attendance-button:hover { filter: brightness(.96); }
.attendance-mark { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; border: 1px solid #dce7e2; border-radius: 5px; background: #f5f7f6; color: #7d918b; font-size: 17px; font-weight: 850; vertical-align: middle; }
.attendance-mark[data-state="automatic"] { border-color: #a9d7bc; background: #dff3e9; color: #187254; }
.attendance-mark[data-state="manual"] { border-color: #a9cdd7; background: #e6f3f7; color: #28728a; }
.attendance-mark[data-state="late"] { border-color: #ead5a9; background: #fff3df; color: #9a6a22; }
.grade-table .grade-progress { min-width: 96px; text-align: center; }
.grade-table .grade-progress small { display: block; color: #8ca29e; font-size: 10px; }
.grade-table .grade-total { font-weight: 850; color: #1f715b; text-align: right; }
.grade-overview-table { width: max-content; min-width: 100%; color: #25424a; }
.grade-overview-table th, .grade-overview-table td { min-width: 64px; padding: 8px 10px; border-right: 1px solid #d2ddd6; text-align: center; font-variant-numeric: tabular-nums; }
.grade-overview-table thead tr:first-child th { top: 0; height: 39px; background: #dce8df; color: #2d5a4e; }
.grade-overview-table thead tr:nth-child(2) th { top: 39px; height: 35px; background: #edf3ed; color: #4b6b60; }
.grade-overview-table thead .grade-total-head { background: #d0e6d5 !important; color: #205c47 !important; }
.grade-overview-table thead .grade-grand-head { background: #b6dec3 !important; color: #154e3c !important; }
.grade-overview-table tbody tr:nth-child(even) td, .grade-overview-table tbody tr:nth-child(even) th { background: #f8fbf9; }
.grade-overview-table .grade-name, .grade-overview-table .grade-kana { text-align: left; }
.grade-overview-table .grade-score { min-width: 64px; }
.grade-overview-table .grade-pair-end { border-right-color: #b7ccc0; }
.grade-overview-table .grade-total-cell { background: #f1f8ef; font-weight: 800; color: #2b604c; }
.grade-overview-table .grade-grand-cell { background: #def0df; font-size: 14px; font-weight: 900; color: #1e6242; }
.grade-overview-table tbody tr:nth-child(even) .grade-total-cell { background: #eaf5e9; }
.grade-overview-table tbody tr:nth-child(even) .grade-grand-cell { background: #d6ebd7; }
.grade-overview-table tbody tr:hover .grade-total-cell, .grade-overview-table tbody tr:hover .grade-grand-cell { filter: brightness(.97); }
.grade-overview-table .grade-exam-cell { min-width: 92px; }
.grade-overview-table .grade-exam-cell input { text-align: center; }
.grade-table input[type="number"] { width: 78px; padding: 6px 7px; border: 1px solid #cdded4; border-radius: 7px; background: #fff; color: #183449; text-align: right; }
.grade-table input[type="text"] { width: 155px; padding: 6px 7px; border: 1px solid #cdded4; border-radius: 7px; background: #fff; color: #183449; }
.grade-table select { padding: 6px 5px; border: 1px solid #cdded4; border-radius: 7px; background: #fff; color: #183449; font-size: 11px; }
.task-button { min-width: 32px; min-height: 31px; padding: 2px 7px; border: 1px solid #cdded4; border-radius: 6px; background: #fff; color: #81958e; font-size: 14px; font-weight: 900; cursor: pointer; }
.task-button[data-state="1"] { background: #dff3e9; border-color: #a9d7bc; color: #187254; }
.task-button[data-state="0"] { background: #fff3df; border-color: #ead5a9; color: #9a6a22; }
.task-button:hover { filter: brightness(.96); }
.grade-task-head { text-align: center; min-width: 45px; }
.grade-task-head small { display: block; font-size: 9px; font-weight: 650; color: #77988b; }
.grade-table thead .grade-task-head.is-basic, .grade-table .grade-task-cell.is-basic { background: #fff0a9; }
.grade-table thead .grade-task-head.is-advanced, .grade-table .grade-task-cell.is-advanced { background: #fff; }
.grade-table .grade-task-cell.is-basic:has(.task-button[data-state="0"]), .grade-table .grade-task-cell.is-basic:has(.task-button[data-state="blank"]) { background: #f8ceca; }
.grade-help { margin: 12px 0 30px; color: #78908f; font-size: 11px; line-height: 1.7; }
@media (max-width: 760px) {
  .grade-toolbar, .grade-bulk { padding: 15px; }
  .grade-control-row { gap: 9px; }
  .grade-control-row label { flex: 1 1 130px; }
  .grade-control-row select { width: 100%; }
  .grade-action-row > div { width: 100%; }
  .grade-action-row .button { flex: 1 1 auto; }
  .grade-section-head { align-items: flex-start; flex-direction: column; }
}