.speaking-performance-indicator {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid rgba(45, 77, 93, .14);
  padding-top: clamp(20px, 3vw, 30px);
}

.performance-indicator-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.performance-indicator-heading span,
.performance-table-card header span {
  color: #13746d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.performance-indicator-heading h2,
.performance-table-card h3 {
  margin: 4px 0 0;
  color: #173653;
  font-family: Georgia, "Times New Roman", "Edmund Serif TC", serif;
}

.performance-indicator-heading h2 { font-size: clamp(24px, 3vw, 34px); }
.performance-indicator-heading p {
  max-width: 510px;
  margin: 0;
  color: #5b6773;
  font-size: 13px;
  line-height: 1.55;
}
.performance-indicator-heading p span { color: inherit; font-size: inherit; letter-spacing: 0; }

.performance-table-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 16px;
}

.performance-table-card {
  overflow: hidden;
  border: 1px solid rgba(32, 75, 92, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
}

.performance-table-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}
.performance-content > header { background: linear-gradient(135deg, #e9f6e4, #d9eed2); }
.performance-language > header { background: linear-gradient(135deg, #fff3d8, #ffe4ac); }
.performance-table-card h3 { font-size: 22px; }
.performance-table-card > header strong {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  color: #174a45;
  background: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}

.performance-table-scroll { overflow-x: auto; }
.performance-table-card table {
  width: 100%;
  border-collapse: collapse;
  color: #263746;
  font-size: 14px;
}
.performance-table-card th,
.performance-table-card td {
  border-top: 1px solid rgba(45, 77, 93, .11);
  padding: 11px 13px;
  text-align: left;
}
.performance-table-card thead th {
  color: #68727b;
  background: rgba(245, 248, 248, .76);
  font-size: 11px;
  letter-spacing: .06em;
}
.performance-table-card thead th:last-child,
.performance-table-card td { width: 64px; text-align: center; }
.performance-table-card tbody th { font-weight: 720; line-height: 1.45; }
.performance-table-card tbody label { display: block; cursor: pointer; }
.performance-table-card tbody tr { transition: background .15s ease, color .15s ease; }
.performance-table-card tbody tr.is-checked { color: #155f4d; background: #edf9f1; }
.performance-table-card input {
  width: 25px;
  height: 25px;
  margin: 0;
  accent-color: #16836a;
  cursor: pointer;
}

.admin-recorder-notice .speaking-performance-indicator { margin-top: 22px; }

.attempt-performance-record {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid rgba(32, 75, 92, .16);
  border-radius: 16px;
  background: rgba(247, 251, 251, .88);
}

.attempt-performance-record > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  color: #173653;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.attempt-performance-record > summary strong {
  color: #13746d;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.attempt-checklist-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 0 14px 14px;
}

.attempt-checklist-section {
  overflow: hidden;
  border: 1px solid rgba(32, 75, 92, .12);
  border-radius: 14px;
  background: #fff;
}

.attempt-checklist-section > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  font-size: 12px;
}

.attempt-checklist-content > header { background: #e6f4e2; }
.attempt-checklist-language > header { background: #fff0cf; }
.attempt-checklist-section > header span { color: #13746d; font-weight: 900; letter-spacing: .06em; }
.attempt-checklist-section > header strong { color: #173653; }
.attempt-checklist-section ul { margin: 0; padding: 0; list-style: none; }
.attempt-checklist-section li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  border-top: 1px solid rgba(45, 77, 93, .09);
  padding: 8px 10px;
  color: #7a858d;
  font-size: 13px;
  line-height: 1.4;
}
.attempt-checklist-section li > span:first-child { text-align: center; font-weight: 900; }
.attempt-checklist-section li.is-demonstrated { color: #155f4d; background: #edf9f1; font-weight: 750; }

@media (max-width: 820px) {
  .performance-indicator-heading { align-items: flex-start; flex-direction: column; }
  .performance-table-grid,
  .attempt-checklist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .speaking-performance-indicator { margin-inline: -4px; width: calc(100% + 8px); }
  .performance-table-card th,
  .performance-table-card td { padding: 10px 9px; }
  .performance-table-card table { font-size: 13px; }
  .performance-indicator-heading p { font-size: 12px; }
  .attempt-performance-record > summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.performance-point-heading th{background:#dcebe7;padding:14px!important;border-top:10px solid white;font-size:1rem}.performance-content tbody tr:not(.performance-point-heading) th{border-left:2px solid #dcebe7}.performance-content tbody tr td{border-right:2px solid #dcebe7}

.performance-indicator-heading{position:relative;padding-right:100px}.performance-indicator-heading [data-performance-float]{position:absolute;right:0;top:0;border:1px solid #aac2cb;background:#fff;border-radius:8px;padding:8px;cursor:pointer}.speaking-performance-indicator.is-floating{position:fixed;right:16px;bottom:16px;width:min(640px,calc(100vw - 32px));height:min(64vh,600px);overflow:auto;resize:both;z-index:1200;background:#f7fafb;border:2px solid #527f90;border-radius:16px;padding:14px;box-shadow:0 12px 60px #182f4650}.is-floating .performance-indicator-heading h2{font-size:18px}.is-floating .performance-indicator-heading p{display:none}.is-floating .performance-table-scroll{max-height:none}@media(max-width:500px){.is-floating .performance-table-grid{grid-template-columns:1fr}}

.speaking-performance-indicator.is-floating{inset:auto 16px 16px auto;margin:0}.glass-card:has(.speaking-performance-indicator.is-floating),.content-panel:has(.speaking-performance-indicator.is-floating){backdrop-filter:none;-webkit-backdrop-filter:none}

.performance-notes{margin:12px 0 20px;padding:16px;background:#fff8e9;border:1px solid #e4d7b9;border-radius:12px}.performance-notes label{display:block;font-weight:750;margin-bottom:8px}.performance-notes textarea{box-sizing:border-box;display:block;width:100%;min-height:130px;padding:12px;border:1px solid #c5b994;border-radius:8px;font:16px/1.6 system-ui;resize:vertical;background:#fffdf8;color:#263746}.performance-notes small{display:block;margin-top:8px;color:#645c4b}
.speaking-performance-indicator:not(.is-floating)>.floating-window-corner{display:none}.speaking-performance-indicator:not(.is-floating)>.performance-indicator-heading{cursor:auto;touch-action:auto;user-select:auto}.speaking-performance-indicator.is-floating{display:flex;flex-direction:column;overflow:hidden;min-height:220px;padding:22px}.is-floating>.performance-indicator-heading{flex:none;padding-right:100px}.is-floating>.performance-panel-scroll{overflow:auto;min-height:0;flex:1}.performance-panel-scroll{scrollbar-gutter:stable}
