.grade-view {
      min-height: 100vh;
      background: var(--soft);
      padding: 8px;
    }

    .grade-shell {
      min-height: calc(100vh - 16px);
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(31, 41, 55, 0.08);
      display: grid;
      grid-template-rows: auto auto 1fr;
    }

    .grade-top {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
      background: white;
    }

    .grade-tabs {
      display: flex;
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
    }

    .grade-tab {
      border-radius: 0;
      border: 0;
      border-right: 1px solid var(--line);
      background: #f8fafc;
      padding: 8px 14px;
      color: #344054;
      font-weight: 800;
    }

    .grade-tab.active {
      background: var(--blue);
      color: white;
    }

    .grade-content {
      padding: 14px;
      overflow: auto;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .grade-toolbar,
    .grade-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .grade-toolbar {
      justify-content: space-between;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #fbfcfe;
    }

    .grade-actions button,
    .grade-toolbar button,
    .grade-card button {
      border: 1px solid #bfd0e2;
      background: #eef5fb;
      color: var(--blue);
      font-weight: 800;
    }

    .grade-actions .primary,
    .grade-toolbar .primary {
      border-color: var(--blue);
      background: var(--blue);
      color: white;
    }

    .grade-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }

    .inspector-roster-panel {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      padding: 14px;
      display: grid;
      gap: 12px;
      box-shadow: 0 8px 18px rgba(31, 41, 55, 0.05);
    }

    .inspector-roster-panel[hidden] {
      display: none;
    }

    .inspector-roster-panel h3 {
      margin: 0;
      color: var(--blue);
      font-size: 18px;
    }

    .roster-course-list {
      display: grid;
      gap: 10px;
    }

    .roster-course-list details {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
      overflow: hidden;
    }

    .roster-course-list summary {
      cursor: pointer;
      padding: 10px 12px;
      color: var(--ink);
      font-weight: 900;
    }

    .roster-actions,
    .roster-form-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px 12px;
      border-top: 1px solid var(--line);
      background: #fff;
    }

    .roster-form-grid input,
    .roster-form-grid select {
      min-height: 36px;
      border: 1px solid #98b9d7;
      border-radius: 5px;
      padding: 7px;
      background: #fbfdff;
      font-family: inherit;
      font-weight: 800;
    }

    .roster-actions button,
    .roster-form-grid button {
      border: 1px solid #bfd0e2;
      background: #eef5fb;
      color: var(--blue);
      font-weight: 900;
    }

    .roster-actions .danger,
    .roster-form-grid .danger,
    .grade-table button.danger {
      border-color: #f2b8b5;
      background: #fff5f5;
      color: #b42318;
    }

    .attendance-input {
      width: 82px;
      min-height: 36px;
      padding: 7px 6px;
      text-align: center;
      border: 1px solid #98b9d7;
      border-radius: 5px;
      background: #f7fbff;
      font-weight: 900;
    }

    .grade-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      padding: 14px;
      display: grid;
      gap: 8px;
      min-height: 112px;
      box-shadow: 0 8px 18px rgba(31, 41, 55, 0.05);
    }

    .scale-view {
      min-height: 100vh;
      background: #eef4f9;
      padding: 8px;
    }

    .scale-shell {
      min-height: calc(100vh - 16px);
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(31, 41, 55, 0.08);
      display: grid;
      grid-template-rows: auto auto 1fr;
    }

    .scale-toolbar {
      display: grid;
      grid-template-columns: repeat(6, minmax(92px, 1fr)) auto;
      gap: 8px;
      align-items: end;
      padding: 10px 12px;
      border-bottom: 1px solid #dce3ee;
      background: #fbfdff;
    }

    .scale-toolbar label {
      display: grid;
      gap: 4px;
      color: #164266;
      font-size: 11px;
      font-weight: 900;
    }

    .scale-toolbar input,
    .scale-toolbar select {
      width: 100%;
      min-height: 34px;
      border: 1px solid #98b9d7;
      border-radius: 6px;
      padding: 6px 8px;
      background: white;
      color: var(--ink);
      font-weight: 800;
    }

    .scale-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
    }

    .scale-actions button {
      border: 1px solid #bfd0e2;
      background: #eef5fb;
      color: var(--blue);
      font-weight: 900;
      white-space: nowrap;
    }

    .scale-actions .primary {
      border-color: var(--blue);
      background: var(--blue);
      color: white;
    }

    .scale-workspace {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      min-height: 0;
    }

    .scale-panel {
      border-right: 1px solid #dce3ee;
      background: #f7fafc;
      padding: 14px;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .scale-panel h2,
    .scale-panel h3 {
      margin: 0;
      color: var(--blue);
    }

    .scale-summary {
      display: grid;
      gap: 8px;
      font-size: 13px;
      color: #344054;
    }

    .scale-summary strong {
      color: var(--ink);
    }

    .scale-status {
      border: 1px solid #cfe3d4;
      border-radius: 8px;
      background: #f0fdf4;
      color: #166534;
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 900;
      min-height: 36px;
    }

    .scale-table-wrap {
      padding: 12px;
      overflow: auto;
      background: white;
    }

    .scale-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      table-layout: fixed;
    }

    .scale-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #6b7280;
      color: white;
      padding: 5px 4px;
      border: 2px solid white;
      font-size: 11px;
      font-weight: 900;
      text-align: center;
    }

    .scale-table td {
      padding: 4px 5px;
      border: 2px solid white;
      text-align: center;
      font-weight: 800;
      background: #edf6ff;
      color: #123d63;
    }

    .scale-table .score {
      background: #fff3df;
      color: #c2410c;
    }

    .scale-table .failing {
      color: #ef4444;
    }

    .scale-table .passing {
      color: #1d4ed8;
    }

    .scale-table .empty {
      background: #f8fafc;
      color: transparent;
    }





    .word-page {
      width: min(100%, 820px);
      min-height: 1050px;
      margin: 0 auto 18px;
      padding: 54px 58px;
      border: 1px solid #d8dee8;
      border-radius: 2px;
      background: white;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.13);
    }

    .word-page-label {
      margin: 0 auto 8px;
      width: min(100%, 820px);
      color: #667085;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .plan-header {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: center;
      border-bottom: 2px solid var(--blue);
      padding-bottom: 10px;
      margin-bottom: 12px;
    }

    .plan-logo {
      width: 62px;
      height: 62px;
      object-fit: contain;
      object-position: left center;
    }

    .plan-header h1 {
      margin: 0;
      color: var(--blue);
      font-size: 19px;
    }

    .plan-header p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-style: italic;
    }

    .plan-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 12px;
      font-size: 12px;
    }

    .plan-meta div {
      border: 1px solid #dce3ee;
      background: #f8fafc;
      padding: 7px;
      border-radius: 5px;
    }

    .plan-section {
      margin: 12px 0;
    }

    .plan-section h3 {
      margin: 0 0 6px;
      color: var(--blue);
      font-size: 15px;
    }

    .plan-section ul,
    .plan-section ol {
      margin-top: 6px;
      padding-left: 22px;
    }

    .plan-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .plan-table th {
      background: var(--blue);
      color: white;
    }

    .plan-table th,
    .plan-table td {
      border: 1px solid var(--line);
      padding: 7px;
      vertical-align: top;
    }

    .saved-list {
      display: grid;
      gap: 10px;
    }

    .saved-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .saved-card h3 {
      margin: 0;
      color: var(--blue);
      font-size: 15px;
    }

    .saved-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }

    .tab {
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: #f8fafc;
      padding: 8px 14px;
      font-weight: 700;
      color: #344054;
      cursor: pointer;
    }

    .tab.active {
      background: var(--blue);
      color: white;
    }

    .export-tools {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 7px 10px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfe;
    }

    .export-tools.hidden {
      display: none;
    }

    .export-tools button,
    .stats-export button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #bfd0e2;
      background: #eef5fb;
      color: var(--blue);
      border-radius: 6px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 800;
    }

    .file-icon {
      min-width: 24px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 4px;
      background: var(--blue);
      color: white;
      font-size: 11px;
      line-height: 1;
    }

    .file-icon.pdf {
      background: #b42318;
    }

    .title {
      background: var(--blue);
      color: white;
      text-align: center;
      padding: 8px;
      font-size: 20px;
      font-weight: 700;
    }

    .month-tools {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 5px 10px;
      background: #eef5fb;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      font-weight: 700;
      color: var(--blue);
    }

    .month-tools select {
      width: min(260px, 100%);
      padding: 7px 9px;
      border: 1px solid #98b9d7;
      border-radius: 6px;
      background: white;
      font: inherit;
      color: var(--ink);
    }

    .subtitle {
      background: #d9eaf7;
      text-align: center;
      padding: 6px;
      font-style: italic;
    }

    .ticker {
      overflow: hidden;
      white-space: nowrap;
      background: #fff8df;
      border-bottom: 1px solid #ecd17e;
      color: #344054;
      min-height: 26px;
      display: flex;
      align-items: center;
    }

    .ticker span {
      display: inline-block;
      padding-left: 100%;
      animation: ticker 28s linear infinite;
      font-weight: 700;
      font-size: 12px;
    }

    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-100%); }
    }