@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root { --font-primary: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --stellar-deep: #00072d; --stellar-navy: #001c55; --stellar-blue: #0a2472; --stellar-sky: #0e6ba8; --stellar-cyan: #a6e1fa; }

* { box-sizing: border-box; margin: 0px; padding: 0px; }

body { font-family: var(--font-primary); line-height: 1.6; color: var(--app-ink); background: linear-gradient(135deg, rgb(248, 250, 252) 0%, rgb(241, 245, 249) 100%); min-height: 100vh; position: relative; overflow-x: hidden; }

.container { max-width: 900px; margin: 0px auto; padding: 15px 20px; position: relative; z-index: 1; }

.header-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }

.header-logo { height: 60px; width: auto; background: transparent; padding: 0px; border-radius: 0px; box-shadow: none; }

h1 { text-align: center; font-family: var(--font-primary); font-weight: 900; color: rgb(0, 31, 63); margin-bottom: 0px; font-size: 1.6rem; position: relative; padding: 15px 30px; }

h1::before, h1::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, var(--app-blue), transparent); }

h1::before { top: 0px; }

h1::after { bottom: 0px; }

.history-link { color: var(--app-blue); text-decoration: none; font-family: var(--font-primary); font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid rgb(147, 197, 253); border-radius: 8px; transition: 0.2s; margin-left: auto; }

.history-link:hover { background: rgb(239, 246, 255); border-color: var(--app-blue); }

h2 { font-family: var(--font-primary); color: var(--app-blue); margin-bottom: 12px; border-bottom: 2px solid rgb(226, 232, 240); padding-bottom: 6px; padding-left: 12px; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; position: relative; }

h2::before { content: "▸"; position: absolute; left: 0px; color: var(--app-blue); font-size: 1.1rem; }

.form-section { background: rgb(255, 255, 255); border-top: 1px solid rgb(226, 232, 240); border-right: 1px solid rgb(226, 232, 240); border-bottom: 1px solid rgb(226, 232, 240); border-image: none; border-left: 3px solid var(--app-blue); padding: 18px; margin-bottom: 16px; border-radius: 0px 12px 12px 0px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px; position: relative; overflow: visible; z-index: 1; }

.form-section:focus-within { z-index: 50; }

.form-section::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 2px; background: linear-gradient(90deg, var(--app-blue), var(--app-teal), transparent); opacity: 0.3; }

.form-section::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg, transparent, rgb(226, 232, 240), transparent); }

.form-row { display: flex; gap: 15px; margin-bottom: 12px; }

.hidden-initial-assessment { display: none !important; }

.form-group { flex: 1 1 0%; }

.form-group label { display: block; margin-bottom: 6px; font-weight: 700; color: rgb(71, 85, 105); font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; font-family: var(--font-primary); }

.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1.5px solid rgb(203, 213, 225); border-radius: 6px; font-size: 14px; background: rgb(248, 250, 252); color: var(--app-ink); font-family: var(--font-primary); transition: 0.2s; }

.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--app-blue); box-shadow: rgba(47, 47, 228, 0.1) 0px 0px 0px 3px; background: rgb(255, 255, 255); }

.form-group input::placeholder, .form-group textarea::placeholder { color: rgb(148, 163, 184); }

.form-group input[readonly] { font-weight: 600; background: rgb(239, 246, 255) !important; border: 1.5px solid rgb(191, 219, 254) !important; color: var(--app-secondary) !important; cursor: default !important; }

.weakness-input-note { margin: 0px 0px 12px; padding: 10px 12px; border: 1px solid rgb(191, 219, 254); border-radius: 8px; background: rgb(239, 246, 255); color: rgb(30, 58, 138); font-size: 13px; font-weight: 700; line-height: 1.35; }

.vocab-header-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }

.vocab-header-row .vocab-section-note { margin-bottom: 0px; flex: 1 1 0%; }

.vocab-na-toggle { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: rgb(100, 116, 139); white-space: nowrap; cursor: pointer; padding: 8px 12px; border: 1.5px solid rgb(203, 213, 225); border-radius: 6px; background: rgb(248, 250, 252); transition: 0.2s; flex-shrink: 0; }

.vocab-na-toggle:hover { border-color: rgb(148, 163, 184); }

.vocab-na-toggle input { margin: 0px; cursor: pointer; }

.vocab-na-toggle.vocab-na-active { border-color: rgb(245, 158, 11); background: rgb(255, 251, 235); color: rgb(146, 64, 14); }

.vocab-columns.vocab-disabled { opacity: 0.45; pointer-events: none; user-select: none; }

.vocab-section-note { margin: 0px 0px 14px; padding: 10px 12px; border: 1px solid rgb(226, 232, 240); border-radius: 8px; background: rgb(248, 250, 252); color: rgb(71, 85, 105); font-size: 13px; line-height: 1.4; }

.vocab-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.vocab-column { display: flex; flex-direction: column; gap: 8px; }

.vocab-column-label { font-size: 14px; font-weight: 600; color: rgb(30, 41, 59); }

.vocab-required { color: rgb(239, 68, 68); font-weight: 700; }

.vocab-word-list { display: flex; flex-direction: column; gap: 6px; }

.vocab-word-entry { display: flex; align-items: center; gap: 6px; }

.vocab-word-input { flex: 1 1 0%; padding: 8px 10px; border: 1.5px solid rgb(203, 213, 225); border-radius: 6px; font-size: 14px; font-family: var(--font-primary); color: rgb(30, 41, 59); background: rgb(255, 255, 255); transition: border-color 0.2s; }

.vocab-word-input:focus { outline: none; border-color: var(--stellar-sky); box-shadow: rgba(14, 107, 168, 0.1) 0px 0px 0px 3px; }

.vocab-word-input.vocab-input-error { border-color: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.1) 0px 0px 0px 3px; }

.vocab-remove-btn { width: 28px; height: 28px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; background: rgb(254, 226, 226); color: rgb(220, 38, 38); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; }

.vocab-remove-btn:hover { background: rgb(254, 202, 202); }

.vocab-add-btn { align-self: flex-start; padding: 6px 14px; border: 1.5px dashed rgb(148, 163, 184); border-radius: 6px; background: transparent; color: rgb(100, 116, 139); font-size: 13px; font-weight: 600; font-family: var(--font-primary); cursor: pointer; transition: 0.2s; }

.vocab-add-btn:hover { border-color: var(--stellar-sky); color: var(--stellar-sky); background: rgb(240, 249, 255); }

@media (max-width: 600px) {
  .vocab-columns { grid-template-columns: 1fr; }
}

.searchable-dropdown { position: relative; width: 100%; will-change: auto; }

.search-input-wrapper { position: relative; display: flex; align-items: center; }

#studentSearch, #teacherSearch, #skillFocusSearch, #subjectSearch { flex: 1 1 0%; padding: 12px 45px 12px 15px; border: 1px solid rgb(226, 232, 240); border-radius: 8px; font-size: 14px; min-width: 300px; background: rgb(255, 255, 255); color: var(--app-ink); backdrop-filter: blur(5px); }

.dropdown-arrow { position: absolute; right: 8px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 14px; color: var(--app-blue); cursor: pointer; padding: 8px; border-radius: 6px; transition: 0.3s; }

.dropdown-arrow:hover { background: rgba(47, 47, 228, 0.1); transform: scale(1.1); }

.dropdown-arrow.open { transform: rotate(180deg); }

.dropdown-list { position: absolute; top: 100%; left: 0px; right: 0px; background: rgb(255, 255, 255); border-width: medium 1.5px 1.5px; border-style: none solid solid; border-color: currentcolor rgb(203, 213, 225) rgb(203, 213, 225); border-image: none; border-radius: 0px 0px 8px 8px; max-height: 200px; overflow-y: auto; z-index: 10000; display: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }

.dropdown-list.show { display: block; }

.dropdown-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid rgb(241, 245, 249); font-size: 14px; color: var(--app-ink); transition: 0.2s; }

.dropdown-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.dropdown-item:hover { background: rgb(239, 246, 255); color: var(--app-blue); }

.dropdown-item.selected { background: rgb(219, 234, 254); color: var(--app-blue); }

.dropdown-item.no-results { text-align: center; color: rgb(136, 146, 176); font-style: italic; cursor: default; }

.dropdown-item.no-results:hover { background: transparent; color: rgb(136, 146, 176); }

.dropdown-item.student-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.student-dropdown-name { flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.student-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(241, 245, 249);
    color: rgb(71, 85, 105);
}

.student-status-active { color: rgb(15, 118, 110); background: rgb(204, 251, 241); }
.student-status-pending { color: rgb(180, 83, 9); background: rgb(254, 243, 199); }
.student-status-inactive { color: rgb(127, 29, 29); background: rgb(254, 226, 226); }
.student-status-on-hold { color: rgb(67, 56, 202); background: rgb(224, 231, 255); }
.student-status-alumni { color: rgb(55, 65, 81); background: rgb(229, 231, 235); }
.student-status-unknown { color: rgb(100, 116, 139); background: rgb(241, 245, 249); }

.form-group textarea { resize: vertical; }

.ratings-scores-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ratings-scores-container > .analysis-skills-panel { grid-column: 1 / -1; margin-bottom: 0px; }

.ratings-column h3, .scores-column h3 { font-family: var(--font-primary); color: var(--app-blue); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid rgb(226, 232, 240); }

.scores-optional { font-size: 12px; color: rgb(100, 116, 139); font-weight: 400; text-transform: none; letter-spacing: 0px; }

.ratings-scores-container .rating-grid { display: flex; flex-direction: column; gap: 6px; }

.ratings-scores-container .rating-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 8px 10px; background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 6px; height: 44px; }

.ratings-scores-container .rating-item .rating-label { margin: 0px; min-width: 0px; flex: 1 1 0%; font-size: 12px; color: rgb(100, 116, 139); font-weight: 600; font-family: var(--font-primary); }

.ratings-scores-container .rating-na-option { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(100, 116, 139); cursor: pointer; white-space: nowrap; }

.ratings-scores-container .rating-optional-note { font-size: 11px; color: rgb(148, 163, 184); font-style: italic; }

.ratings-scores-container .rating-item.rating-na .star-rating, .ratings-scores-container .rating-item.rating-na .rating-label { opacity: 0.65; text-decoration: line-through; }

.comprehension-badge-container { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }

.comprehension-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--stellar-blue); color: white; padding: 4px 12px; border-radius: 20px; font-size: 14px; font-weight: 800; min-width: 60px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; border: 2px solid var(--stellar-cyan); transition: 0.3s; }

.comprehension-badge.na { background: rgb(226, 232, 240); color: rgb(148, 163, 184); border-color: rgb(203, 213, 225); box-shadow: none; }

.comprehension-badge.high { background: var(--stellar-navy); border-color: var(--stellar-cyan); }

.comprehension-badge.mid { background: var(--stellar-blue); border-color: var(--stellar-sky); }

.comprehension-badge.low { background: var(--stellar-sky); border-color: var(--stellar-blue); }

.comprehension-explanation { font-size: 9px; color: rgb(148, 163, 184); margin-top: 2px; font-style: italic; white-space: nowrap; }

.comprehension-summary-badge { margin-bottom: 15px; padding: 10px 12px; background: linear-gradient(135deg, rgb(248, 251, 255) 0%, rgb(238, 249, 255) 100%); border: 1px solid rgba(14, 107, 168, 0.24); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: rgba(255, 255, 255, 0.7) 0px 0px 0px 1px inset; }

.comprehension-summary-badge .label { font-size: 10px; font-weight: 900; color: rgb(10, 36, 114); letter-spacing: 1px; }

.comprehension-summary-badge .value { font-size: 24px; color: rgb(0, 28, 85); font-weight: 900; line-height: 1.2; }

.comprehension-summary-badge .note { font-size: 9px; color: rgb(14, 107, 168); font-style: italic; }

.ratings-scores-container .star-rating.rating-disabled { pointer-events: none; opacity: 0.45; }

.ratings-scores-container .star-rating.rating-disabled .star { cursor: not-allowed; }

.rating-select { font-size: 14px; padding: 8px; }

.ratings-scores-container .star-rating { display: flex; gap: 4px; margin-left: auto; }

.ratings-scores-container .star { font-size: 22px; cursor: pointer; color: rgba(255, 215, 0, 0.3); transition: 0.2s; user-select: none; text-shadow: rgba(255, 215, 0, 0.2) 0px 0px 10px; line-height: 1; }

.star:hover { transform: scale(1.2); text-shadow: rgba(255, 215, 0, 0.5) 0px 0px 15px; }

.star.active { color: rgb(255, 215, 0); text-shadow: rgba(255, 215, 0, 0.8) 0px 0px 20px; }

.star.hover { color: rgb(255, 215, 0); text-shadow: rgba(255, 215, 0, 0.6) 0px 0px 15px; }

.star-rating:hover .star { color: rgba(255, 215, 0, 0.3); }

.star-rating .star:hover ~ .star { color: rgba(255, 215, 0, 0.3); }

.star-rating .star:hover, .star-rating .star.hover { color: rgb(255, 215, 0); }

.button-group { text-align: center; margin-top: 16px; }

.selected-date-confirmation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 12px; margin: 18px auto 0px; padding: 12px 16px; border: 1px solid rgb(191, 219, 254); border-radius: 16px; background: rgb(239, 246, 255); color: var(--app-blue); text-align: center; }

.selected-date-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 220px; }

.selected-date-confirmation span, .selected-date-status { color: rgb(100, 116, 139); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.selected-date-confirmation strong { color: var(--app-secondary); font-family: var(--font-primary); font-size: 16px; font-weight: 950; }

.selected-date-vs { color: rgb(148, 163, 184); font-size: 11px; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; }

.selected-date-status { width: 100%; letter-spacing: 0.04em; }

.selected-date-confirmation.date-match .selected-date-status { color: rgb(15, 118, 110); }

.selected-date-confirmation.date-mismatch { border-color: rgb(254, 202, 202); background: rgb(255, 247, 237); }

.selected-date-confirmation.date-mismatch .selected-date-status, .selected-date-confirmation.date-mismatch #selectedDateDisplay { color: rgb(220, 38, 38); }

button { background: var(--app-blue); color: rgb(255, 255, 255); padding: 11px 24px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0px 8px; font-family: var(--font-primary); text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; box-shadow: rgba(47, 47, 228, 0.2) 0px 2px 4px; }

button:hover { background: var(--app-secondary); transform: translateY(-1px); box-shadow: rgba(47, 47, 228, 0.3) 0px 4px 8px; }

#clearForm { background: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.2) 0px 2px 4px; }

#clearForm:hover { background: rgb(220, 38, 38); box-shadow: rgba(239, 68, 68, 0.3) 0px 4px 8px; }

.report-output { background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); padding: 0px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px; display: none; position: relative; overflow: hidden; max-width: 900px; margin: 30px auto; }

.report-card { background: rgb(255, 255, 255); padding: 18px; border-radius: 12px; position: relative; overflow: hidden; }

.report-card { font-family: var(--font-primary); }

.report-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 6px; background: linear-gradient(90deg, var(--app-blue), var(--app-teal), var(--app-blue)); }

.report-output.show { display: block; }

.report-output.seasonal-output { max-width: none; width: 900px; margin: 30px auto; padding: 0px; background: transparent; border: 0px; border-radius: 0px; box-shadow: none; overflow: visible; }

.report-logo { height: 45px; width: auto; background: transparent; padding: 0px; border-radius: 0px; box-shadow: none; }

.report-header { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; margin-top: 8px; position: relative; }

.report-header::after { display: none; }

.subject-report-subsection { margin-top: 14px; }

.subject-report-subsection h4 { margin: 0px 0px 8px; color: var(--app-secondary); font-size: 15px; font-weight: 700; }

.report-title { font-family: var(--font-primary); font-size: 23px; font-weight: 700; margin-bottom: 10px; color: var(--app-ink); letter-spacing: 1px; }

.report-body { margin-bottom: 14px; }

.section-title { font-family: var(--font-primary); font-size: 15px; font-weight: 700; color: var(--app-blue); margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 2px solid var(--app-blue); padding-bottom: 6px; }

.report-info-section { margin-bottom: 14px; padding: 14px 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 22px; font-size: 14px; }

.info-item { display: flex; flex-direction: row; align-items: baseline; gap: 8px; }

.info-label { font-weight: 600; color: var(--app-blue); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; min-width: 120px; }

.info-value { color: rgb(15, 23, 42); font-weight: 600; font-size: 14px; word-break: break-word; }

.report-performance-row { display: grid; grid-template-columns: minmax(0px, 0.92fr) minmax(0px, 1.08fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }

.report-ratings-section { margin-bottom: 14px; padding: 14px 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.report-performance-row .report-ratings-section, .report-performance-row .report-scores-section { display: flex; flex-direction: column; height: 100%; min-width: 0px; margin-bottom: 0px; }

.ratings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; font-size: 14px; }

.report-performance-row .ratings-grid { flex: 1 1 0%; grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(0px, 1fr)); gap: 6px; }

.rating-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; gap: 18px; }

.rating-label { font-weight: 600; color: rgb(71, 85, 105); font-size: 14px; letter-spacing: 0.3px; }

.rating-stars { color: rgb(251, 191, 36); font-size: 18px; white-space: nowrap; }

.report-comments-section { margin-bottom: 14px; padding: 14px 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.comments-content { background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); padding: 12px; border-radius: 6px; white-space: normal; min-height: 60px; position: relative; color: var(--app-ink); line-height: 1.5; font-size: 13px; }

.narrative-container { position: relative; }

.narrative-text { background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); padding: 14px 16px; border-radius: 8px; color: var(--app-ink); line-height: 1.55; font-size: 14.5px; min-height: 70px; }

.narrative-textarea { width: 100%; background: rgb(255, 255, 255); border: 2px solid var(--app-blue); padding: 15px; border-radius: 8px; color: var(--app-ink); line-height: 1.6; font-size: 14px; min-height: 120px; font-family: var(--font-primary); resize: vertical; box-shadow: rgba(47, 47, 228, 0.1) 0px 2px 4px; }

.narrative-textarea:focus { outline: none; border-color: var(--app-teal); box-shadow: rgba(47, 47, 228, 0.3) 0px 0px 15px; }

.narrative-controls { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }

.narrative-controls button { padding: 8px 16px; font-size: 13px; border-radius: 6px; font-weight: 600; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; transition: 0.3s; font-family: var(--font-primary); }

.edit-narrative-btn { background: linear-gradient(135deg, var(--app-blue), var(--app-secondary)); color: white; box-shadow: rgba(47, 47, 228, 0.3) 0px 4px 15px; }

.edit-narrative-btn:hover { transform: translateY(-2px); box-shadow: rgba(47, 47, 228, 0.4) 0px 6px 20px; }

.save-narrative-btn { background: linear-gradient(135deg, rgb(76, 175, 80), rgb(102, 187, 106)); color: white; box-shadow: rgba(76, 175, 80, 0.3) 0px 4px 15px; }

.save-narrative-btn:hover { transform: translateY(-2px); box-shadow: rgba(76, 175, 80, 0.4) 0px 6px 20px; }

.revert-narrative-btn { background: linear-gradient(135deg, rgb(255, 107, 107), rgb(238, 90, 36)); color: white; box-shadow: rgba(255, 107, 107, 0.3) 0px 4px 15px; }

.revert-narrative-btn:hover { transform: translateY(-2px); box-shadow: rgba(255, 107, 107, 0.4) 0px 6px 20px; }

.narrative-controls.hidden { display: none; }

.hidden { display: none !important; }

.comments-text.loading::after { content: "Generating narrative report..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(102, 102, 102); font-style: italic; }

.report-actions { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid rgb(226, 232, 240); }

.print-button, .download-button { display: inline-block; margin: 0px 10px; padding: 12px 24px; background: linear-gradient(135deg, rgb(39, 174, 96), rgb(46, 204, 113)); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-family: var(--font-primary); box-shadow: rgba(46, 204, 113, 0.3) 0px 4px 15px; transition: 0.3s; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; }

.download-button { background: linear-gradient(135deg, var(--app-blue), var(--app-secondary)); box-shadow: rgba(47, 47, 228, 0.3) 0px 4px 15px; }

.print-button:hover, .download-button:hover { transform: translateY(-2px); }

.print-button:hover { box-shadow: rgba(46, 204, 113, 0.4) 0px 6px 20px; }

.download-button:hover { box-shadow: rgba(47, 47, 228, 0.4) 0px 6px 20px; }

@media print {
  * { print-color-adjust: exact !important; }
  body { font-family: var(--font-primary); background: white !important; color: rgb(51, 51, 51) !important; font-size: 12px !important; line-height: 1.4 !important; }
  .container { max-width: 100%; padding: 0px; }
  h1, .form-section, button { display: none; }
  .report-output { padding: 0px; box-shadow: none !important; background: white !important; color: rgb(51, 51, 51) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; margin: 0px !important; display: block !important; }
  .report-card { break-inside: avoid; background: white !important; padding: 20px !important; color: rgb(51, 51, 51) !important; border: 2px solid rgb(51, 51, 51) !important; border-radius: 0px !important; margin: 0px !important; }
  .report-header { text-align: center !important; margin-bottom: 20px !important; border-bottom: 2px solid rgb(51, 51, 51) !important; padding-bottom: 10px !important; }
  .report-title { font-family: var(--font-primary); color: rgb(51, 51, 51) !important; text-shadow: none !important; font-size: 20px !important; font-weight: bold !important; margin: 0px !important; }
  .section-title { color: rgb(51, 51, 51) !important; text-shadow: none !important; font-size: 14px !important; font-weight: bold !important; margin-bottom: 10px !important; margin-top: 15px !important; border-bottom: 1px solid rgb(51, 51, 51) !important; padding-bottom: 5px !important; text-transform: uppercase !important; }
  .info-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-bottom: 15px !important; }
  .info-item { background: white !important; border: 1px solid rgb(51, 51, 51) !important; color: rgb(51, 51, 51) !important; padding: 8px !important; border-radius: 0px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .info-label { color: rgb(51, 51, 51) !important; font-weight: bold !important; font-size: 10px !important; margin-bottom: 3px !important; text-transform: uppercase !important; }
  .info-value { color: rgb(51, 51, 51) !important; font-weight: normal !important; font-size: 11px !important; word-break: break-word !important; }
  .ratings-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 15px !important; }
  .report-performance-row { display: grid !important; grid-template-columns: 0.92fr 1.08fr !important; gap: 12px !important; align-items: stretch !important; margin-bottom: 15px !important; }
  .report-performance-row .report-ratings-section, .report-performance-row .report-scores-section { display: flex !important; flex-direction: column !important; height: 100% !important; margin-bottom: 0px !important; }
  .report-performance-row .ratings-grid { grid-template-columns: 1fr !important; grid-template-rows: repeat(6, 1fr) !important; flex: 1 1 0% !important; margin-bottom: 0px !important; }
  .rating-item { background: white !important; border: 1px solid rgb(51, 51, 51) !important; color: rgb(51, 51, 51) !important; padding: 6px !important; border-radius: 0px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
  .rating-label { color: rgb(51, 51, 51) !important; font-weight: bold !important; font-size: 11px !important; }
  .rating-stars { font-family: var(--font-primary); color: rgb(51, 51, 51) !important; text-shadow: none !important; font-size: 12px !important; }
  .comments-content { background: white !important; border: 1px solid rgb(51, 51, 51) !important; color: rgb(51, 51, 51) !important; padding: 10px !important; border-radius: 0px !important; font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 15px !important; }
  .report-actions { display: none !important; }
  .report-body { break-inside: avoid; }
  .report-info-section, .report-ratings-section, .report-scores-section, .report-gbwt-section, .report-comments-section { margin-bottom: 15px !important; }
}

.report-gbwt-section { margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, rgba(47, 47, 228, 0.08) 0%, rgba(47, 47, 228, 0.08) 100%); border-radius: 12px; border: 1px solid rgba(47, 47, 228, 0.2); }

.gbwt-content { display: flex; flex-direction: column; gap: 15px; }

.gbwt-score { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(47, 47, 228, 0.15); }

.gbwt-label { font-weight: 600; color: var(--app-blue); font-size: 14px; }

.gbwt-value { font-weight: 700; font-size: 16px; padding: 4px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); }

.gbwt-value.high-mistakes { background: linear-gradient(135deg, rgb(255, 71, 87), rgb(255, 107, 107)); color: white; box-shadow: rgba(255, 71, 87, 0.4) 0px 0px 10px; }

.gbwt-value.low-mistakes { background: linear-gradient(135deg, rgb(255, 167, 38), rgb(255, 183, 77)); color: white; box-shadow: rgba(255, 167, 38, 0.4) 0px 0px 10px; }

.gbwt-value.success-mistakes { background: linear-gradient(135deg, rgb(76, 175, 80), rgb(102, 187, 106)); color: white; box-shadow: rgba(76, 175, 80, 0.4) 0px 0px 10px; }

.gbwt-status { padding: 12px; border-radius: 8px; font-weight: 600; text-align: center; font-size: 14px; }

.gbwt-status.success { background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(102, 187, 106, 0.2)); border: 1px solid rgba(76, 175, 80, 0.5); color: rgb(76, 175, 80); }

.gbwt-status.warning { background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(255, 107, 107, 0.2)); border: 1px solid rgba(255, 71, 87, 0.5); color: rgb(255, 71, 87); }

.gbwt-notes { padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border-left: 4px solid var(--app-blue); font-size: 14px; line-height: 1.5; }

.gbwt-notes strong { color: var(--app-blue); }

#gbwtSection { border: 2px solid rgba(47, 47, 228, 0.2); background: linear-gradient(135deg, rgba(47, 47, 228, 0.05) 0%, rgba(47, 47, 228, 0.05) 100%); }

#gbwtSection h2 { color: var(--app-blue); }

.gbwt-info { background: linear-gradient(135deg, rgba(47, 47, 228, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(47, 47, 228, 0.2) !important; color: var(--app-blue) !important; }

.gbwt-info p { color: var(--app-blue) !important; }

@media print {
  .report-gbwt-section { break-inside: avoid; background: white !important; border: 1px solid rgb(51, 51, 51) !important; color: rgb(51, 51, 51) !important; }
  .gbwt-score { background: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; color: rgb(51, 51, 51) !important; }
  .gbwt-label { color: rgb(51, 51, 51) !important; }
  .gbwt-value { background: rgb(224, 224, 224) !important; color: rgb(51, 51, 51) !important; box-shadow: none !important; }
  .gbwt-value.high-mistakes { background: rgb(255, 235, 238) !important; color: rgb(211, 47, 47) !important; }
  .gbwt-value.low-mistakes { background: rgb(255, 243, 224) !important; color: rgb(245, 124, 0) !important; }
  .gbwt-value.success-mistakes { background: rgb(232, 245, 232) !important; color: rgb(46, 125, 50) !important; }
  .gbwt-status { background: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; color: rgb(51, 51, 51) !important; }
  .gbwt-notes { background: rgb(249, 249, 249) !important; border-left: 4px solid rgb(51, 51, 51) !important; color: rgb(51, 51, 51) !important; }
  .gbwt-notes strong { color: rgb(51, 51, 51) !important; }
}

.skills-assessment-note { font-size: 14px; color: rgb(100, 116, 139); margin-bottom: 15px; text-align: center; }

#skillsContainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }

.skill-item { background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); padding: 15px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }

.skill-item.skill-not-covered { background: rgb(241, 245, 249); border-color: rgb(203, 213, 225); opacity: 0.72; }

.skill-item.skill-not-covered .skill-header h3, .skill-item.skill-not-covered .microskill-item label { color: rgb(148, 163, 184); text-decoration: line-through 2px; }

.skill-item.skill-not-covered .microskills-grid { pointer-events: none; }

.skill-item.skill-not-covered .skill-score { color: rgb(100, 116, 139); }

.skill-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(226, 232, 240); padding-bottom: 10px; }

.skill-header h3 { font-family: var(--font-primary); color: var(--app-blue); font-size: 14px; margin: 0px; }

.skill-subject-heading { grid-column: 1 / -1; padding: 8px 12px; background: rgb(239, 246, 255); border: 1px solid rgb(191, 219, 254); border-radius: 8px; color: var(--app-blue); font-family: var(--font-primary); font-weight: 700; font-size: 13px; }

.skill-na-option { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 800; color: rgb(100, 116, 139); }

.microskills-grid { display: flex; flex-direction: column; gap: 10px; }

.microskill-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--app-ink); font-family: var(--font-primary); }

.microskill-item input[type="checkbox"] { width: auto; }

.skill-score { text-align: right; font-weight: bold; color: var(--app-blue); }

.seasonal-report-canvas { width: 900px; max-width: none; margin: 0px auto; padding: 16px; background: transparent; }

.report-card.seasonal-report { --accent: var(--app-ink-deep); --accent-2: var(--app-teal); --name-gradient: linear-gradient(92deg, var(--app-ink-deep) 0%, var(--app-teal) 100%); --report-gradient: linear-gradient(135deg, #eef5ff 0%, #e6f8ff 54%, #f4f0ff 100%); width: 100%; max-width: none; margin: 0px auto; padding: 0px; background: rgb(255, 255, 255); border: 0px; border-radius: 24px; box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 60px; color: rgb(16, 24, 39); font-family: var(--font-primary); overflow: hidden; }

.report-card.seasonal-report::before { display: none; }

.seasonal-report.theme-space { --accent: var(--app-ink-deep); --accent-2: var(--app-teal); --name-gradient: linear-gradient(92deg, var(--app-ink-deep) 0%, var(--app-teal) 100%); --report-gradient: linear-gradient(135deg, #eef5ff 0%, #e6f8ff 54%, #f4f0ff 100%); }

.seasonal-report .report-hero { position: relative; min-height: 168px; padding: 20px 30px; border-bottom: 1px solid rgb(230, 237, 245); display: grid; grid-template-columns: minmax(0px, 1fr) 214px; gap: 8px 18px; align-items: start; overflow: hidden; background: radial-gradient(circle at 84% 22%, rgba(22, 46, 147, 0.24) 0px, rgba(22, 46, 147, 0.24) 74px, transparent 76px), radial-gradient(circle at 76% 82%, rgba(124, 58, 237, 0.16) 0px, rgba(124, 58, 237, 0.16) 128px, transparent 130px), linear-gradient(135deg, rgba(8, 6, 22, 0.08), rgba(47, 47, 228, 0.13) 48%, rgba(22, 46, 147, 0.1)), rgb(251, 253, 255); }

.seasonal-report .hero-copy, .seasonal-report .date { position: relative; z-index: 2; }

.seasonal-report .hero-copy { min-width: 0px; max-width: none; }

.seasonal-report .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }

.seasonal-report .brand img { width: 74px; height: auto; padding: 0px; border-radius: 0px; background: transparent; box-shadow: none; }

.seasonal-report .brand span { color: rgb(100, 116, 139); font-weight: 800; font-size: 14px; }

.seasonal-report .report-student-name { margin: 0px; padding: 0px; border: 0px; font-family: var(--font-primary); font-size: 0px; line-height: 0; letter-spacing: 0px; color: var(--app-ink-deep); font-weight: 850; background: transparent; -webkit-text-fill-color: currentcolor; display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }

.seasonal-report .report-student-name-svg { display: block; max-width: 100%; overflow: visible; }

.seasonal-report .report-student-name::before { display: none; }

.seasonal-report .report-subtitle { position: relative; z-index: 2; grid-column: 1 / -1; width: 100%; margin: 0px; color: rgb(71, 85, 105); font-size: 16px; font-weight: 700; line-height: 1.22; display: flex; flex-direction: column; gap: 2px; min-width: 0px; overflow: hidden; }

.seasonal-report .report-subtitle .class-name { display: block; color: rgb(15, 23, 42); font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seasonal-report .report-subtitle .material { display: block; color: rgb(71, 85, 105); font-size: 13.5px; font-weight: 800; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seasonal-report .class-description { position: relative; z-index: 2; grid-column: 1 / -1; width: 100%; max-width: none; margin: 0px; padding: 5px 10px; border: 1px solid rgba(166, 225, 250, 0.32); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: rgb(51, 65, 85); font-size: 11.5px; font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seasonal-report .date { display: inline-block; place-self: start end; padding: 8px 10px 9px; border: 1px solid rgba(219, 231, 239, 0.88); border-radius: 16px; background: rgba(255, 255, 255, 0.84); box-shadow: rgba(8, 6, 22, 0.08) 0px 12px 28px; backdrop-filter: blur(8px); text-align: right; color: var(--app-ink); font-weight: 800; font-size: 14px; }

.seasonal-report .date b { display: block; color: var(--accent); font-size: 26px; line-height: 1; margin-bottom: 4px; }

.seasonal-report .season-scene { position: absolute; right: -16px; bottom: -22px; width: 236px; height: 144px; opacity: 0.5; z-index: 1; pointer-events: none; }

.seasonal-report .space-scene::before { content: ""; position: absolute; inset: 14px 4px 0px 32px; border-radius: 50%; background: radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.92) 0px, rgba(255, 255, 255, 0.92) 2px, transparent 3px), radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.75) 0px, rgba(255, 255, 255, 0.75) 1.5px, transparent 3px), radial-gradient(circle at 62% 72%, rgba(255, 255, 255, 0.86) 0px, rgba(255, 255, 255, 0.86) 2px, transparent 3px), radial-gradient(circle at 27% 78%, rgba(34, 211, 238, 0.48) 0px, rgba(34, 211, 238, 0.48) 2px, transparent 4px); opacity: 0.48; }

.seasonal-report .space-planet { position: absolute; right: 32px; top: 40px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.86), transparent 18px),
        linear-gradient(135deg, var(--app-ink-deep) 0%, var(--app-blue) 54%, var(--app-teal) 100%); box-shadow: rgba(8, 6, 22, 0.16) 0px 18px 34px; z-index: 3; }

.seasonal-report .space-planet::after { content: ""; position: absolute; left: -21px; top: 28px; width: 114px; height: 18px; border-width: 2px; border-style: solid; border-color: rgba(22, 46, 147, 0.7) transparent; border-image: none; border-radius: 50%; transform: rotate(-14deg); }

.seasonal-report .space-moon { position: absolute; right: 136px; top: 42px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, rgb(219, 234, 254), rgb(147, 197, 253)); box-shadow: rgba(47, 47, 228, 0.18) 0px 8px 18px; z-index: 2; }

.seasonal-report .space-orbit { position: absolute; border: 1.5px solid rgba(47, 47, 228, 0.18); border-radius: 50%; transform: rotate(-17deg); }

.seasonal-report .orbit-1 { right: 8px; top: 20px; width: 168px; height: 106px; }

.seasonal-report .orbit-2 { right: 42px; top: 45px; width: 132px; height: 78px; border-color: rgba(22, 46, 147, 0.22); transform: rotate(18deg); }

.seasonal-report .space-comet { position: absolute; right: 116px; top: 105px; width: 76px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(22, 46, 147, 0.95), rgb(255, 255, 255)); transform: rotate(-18deg); z-index: 4; }

.seasonal-report .space-comet::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(22, 46, 147, 0.92) 0px 0px 12px; }

.seasonal-report .space-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--app-ink-deep); box-shadow: rgba(47, 47, 228, 0.08) 0px 0px 0px 4px; }

.seasonal-report .star-1 { right: 29px; top: 20px; }

.seasonal-report .star-2 { right: 195px; top: 64px; width: 4px; height: 4px; background: var(--app-teal); }

.seasonal-report .star-3 { right: 24px; top: 118px; width: 4px; height: 4px; background: var(--app-blue); }

.seasonal-report .star-4 { right: 183px; top: 122px; width: 3px; height: 3px; background: var(--app-blue); }

.seasonal-report .report-modern-body { padding: 18px 28px 22px; }

.seasonal-report .metrics { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 8px; margin-bottom: 12px; }

.seasonal-report .report-metric { padding: 0px 8px 6px 0px; border-bottom: 2px solid rgb(230, 237, 245); min-width: 0px; }

.seasonal-report .report-metric span { display: block; color: rgb(100, 116, 139); font-size: 11px; font-weight: 800; margin-bottom: 2px; }

.seasonal-report .report-metric strong { display: block; color: rgb(17, 24, 39); font-size: 13.5px; font-weight: 800; line-height: 1.25; word-break: break-word; }

.seasonal-report .lesson-strip, .seasonal-report .lesson-notes, .seasonal-report .report-performance-row { display: grid; border-bottom: 1px solid rgb(230, 237, 245); }

.seasonal-report .lesson-strip { grid-template-columns: 1fr 1fr; gap: 18px; padding: 0px 0px 11px; margin-bottom: 11px; }

.seasonal-report .lesson-notes { grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 13px; margin-bottom: 14px; }

.seasonal-report .report-performance-row { grid-template-columns: minmax(320px, 0.95fr) minmax(0px, 1.05fr); gap: 18px; align-items: start; padding-bottom: 15px; margin-bottom: 15px; }

.seasonal-report .report-performance-row.performance-compact { grid-template-columns: minmax(280px, 0.82fr) minmax(0px, 1.18fr); }

.seasonal-report .report-performance-row.performance-balanced { grid-template-columns: minmax(320px, 0.95fr) minmax(0px, 1.05fr); }

.seasonal-report .report-performance-row.performance-expanded { grid-template-columns: minmax(350px, 1fr) minmax(0px, 1.08fr); }

.seasonal-report .section-title { margin: 0px 0px 6px; padding: 0px; border: 0px; color: var(--app-secondary); font-family: var(--font-primary); font-size: 15.5px; font-weight: 950; letter-spacing: 0px; line-height: 1.18; text-transform: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.seasonal-report .section-title::before { content: ""; flex: 0 0 auto; width: 5px; height: 15px; border-radius: 999px; background: linear-gradient(180deg, var(--app-secondary), var(--app-ink-deep)); transform: translateY(2px); }

.seasonal-report .section-title span { color: var(--app-secondary); }

.seasonal-report .section-title em { color: var(--app-blue); padding: 2px 7px; border-radius: 999px; background: rgba(47, 111, 150, 0.1); font-size: 10.5px; font-style: normal; font-weight: 900; }

.seasonal-report .lesson p, .seasonal-report .note p { margin: 0px; color: rgb(23, 32, 51); font-size: 14px; font-weight: 700; line-height: 1.34; }

.seasonal-report .lesson-detail-list { display: grid; gap: 5px; margin: 0px; }

.seasonal-report .lesson-detail-list span { display: grid; grid-template-columns: 82px minmax(0px, 1fr); align-items: baseline; gap: 8px; min-width: 0px; }

.seasonal-report .lesson-detail-list em { color: rgb(100, 116, 139); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }

.seasonal-report .lesson-detail-list strong { color: rgb(23, 32, 51); font-size: 13.5px; font-weight: 800; line-height: 1.25; word-break: break-word; }

.seasonal-report .focus-list { display: flex; flex-wrap: wrap; gap: 5px; }

.seasonal-report .focus { display: inline-grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; background: rgb(238, 246, 255); color: var(--app-blue); font-size: 11.5px; font-weight: 800; }

.seasonal-report .focus b { padding: 2px 6px; border-radius: 999px; background: rgba(47, 47, 228, 0.12); font-size: 10px; }

.seasonal-report .learning-journey-strip { margin-bottom: 8px; padding: 9px 10px; border: 1px solid rgba(166, 225, 250, 0.18); border-radius: 14px; background: radial-gradient(circle at 7% 26%, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 1px, transparent 1.7px), radial-gradient(circle at 18% 70%, rgba(166, 225, 250, 0.52) 0px, rgba(166, 225, 250, 0.52) 1px, transparent 1.6px), radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.52) 0px, rgba(255, 255, 255, 0.52) 1px, transparent 1.5px), radial-gradient(circle at 66% 64%, rgba(166, 225, 250, 0.46) 0px, rgba(166, 225, 250, 0.46) 1px, transparent 1.5px), radial-gradient(circle at 92% 22%, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0.6) 1px, transparent 1.6px), linear-gradient(135deg, rgb(3, 5, 19) 0%, rgb(0, 7, 45) 50%, rgb(0, 28, 85) 100%); color: rgb(238, 248, 255); }

.seasonal-report .learning-journey-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

.seasonal-report .learning-journey-header span { color: rgba(166, 225, 250, 0.86); font-size: 9px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; }

.seasonal-report .learning-journey-header strong { color: rgba(238, 248, 255, 0.76); font-size: 10.5px; font-weight: 950; }

.seasonal-report .journey-telemetry { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 7px; }

.seasonal-report .journey-segment { --journey-color: #a6e1fa; --journey-bg: rgba(166, 225, 250, .10); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0px; min-height: 52px; padding: 8px 9px; border: 1px solid rgba(166, 225, 250, 0.22); border-radius: 13px; background: linear-gradient(135deg, var(--journey-bg), rgba(255, 255, 255, .05)),
        rgba(255, 255, 255, .06); }

.seasonal-report .journey-high { --journey-color: #34d399; --journey-bg: rgba(52, 211, 153, .18); }

.seasonal-report .journey-mid { --journey-color: #a6e1fa; --journey-bg: rgba(166, 225, 250, .16); }

.seasonal-report .journey-low { --journey-color: #f59e0b; --journey-bg: rgba(245, 158, 11, .18); }

.seasonal-report .journey-na { --journey-color: rgba(166, 225, 250, .56); --journey-bg: rgba(166, 225, 250, .08); }

.seasonal-report .journey-segment-top { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.seasonal-report .journey-rocket { font-size: 16px; font-style: normal; line-height: 1; filter: drop-shadow(rgba(0, 7, 45, 0.5) 0px 2px 4px); }

.seasonal-report .journey-score { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--journey-color); border-radius: 50%; background: rgba(0, 7, 45, 0.42); color: rgb(255, 255, 255); font-size: 12px; font-weight: 950; line-height: 1; box-shadow: rgba(166, 225, 250, 0.22) 0px 0px 16px; }

.seasonal-report .journey-high .journey-score { box-shadow: rgba(52, 211, 153, 0.26) 0px 0px 16px; }

.seasonal-report .journey-mid .journey-score { box-shadow: rgba(166, 225, 250, 0.24) 0px 0px 16px; }

.seasonal-report .journey-low .journey-score { box-shadow: rgba(245, 158, 11, 0.24) 0px 0px 16px; }

.seasonal-report .journey-segment-copy { min-width: 0px; text-align: right; }

.seasonal-report .journey-segment-copy span { display: block; color: rgba(238, 248, 255, 0.94); font-size: 9.4px; font-weight: 950; line-height: 1.12; white-space: normal; }

.seasonal-report .journey-segment-copy em { display: block; margin-top: 3px; color: var(--journey-color); font-size: 7.4px; font-style: normal; font-weight: 950; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }

.seasonal-report .block, .seasonal-report .report-ratings-section, .seasonal-report .report-scores-section, .seasonal-report .report-skills-section, .seasonal-report .report-comments-section { min-width: 0px; margin: 0px; padding: 0px; background: transparent; border: 0px; border-radius: 0px; }

.seasonal-report .report-ratings-section, .seasonal-report .report-scores-section { display: flex; flex-direction: column; height: auto; }

.seasonal-report .report-analysis-skills-section { padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid rgb(230, 237, 245); }

.seasonal-report .report-analysis-summary { margin: 0px 0px 8px; color: rgb(100, 116, 139); font-size: 11.5px; font-weight: 800; line-height: 1.25; }

.seasonal-report .report-analysis-skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px 16px; }

.seasonal-report .report-analysis-skills-grid > .report-analysis-skills:only-child { grid-column: 1 / -1; }

.seasonal-report .participation-radar { margin-top: 4px; min-height: 0px; flex: 0 0 auto; display: grid; align-items: start; }

.seasonal-report .participation-radar svg { width: 100%; max-width: 332px; height: auto; margin: 0px auto; display: block; overflow: hidden; }

.seasonal-report .report-performance-row.performance-compact .participation-radar svg { max-width: 292px; }

.seasonal-report .report-performance-row.performance-balanced .participation-radar svg { max-width: 332px; }

.seasonal-report .report-performance-row.performance-expanded .participation-radar svg { max-width: 382px; }

.seasonal-report .scores-list { display: flex; flex: 1 1 0%; flex-direction: column; gap: 8px; }

.seasonal-report .scores-list .score-item { flex: 0 0 auto; display: block; }

.seasonal-report .radar-ring { fill: none; stroke: rgb(228, 235, 244); stroke-width: 1.2; }

.seasonal-report .radar-axis { stroke: rgb(220, 230, 241); stroke-width: 1.1; }

.seasonal-report .radar-fill { stroke-width: 3.5; stroke-linejoin: round; }

.seasonal-report .radar-dot { stroke: rgb(255, 255, 255); stroke-width: 2; }

.seasonal-report .radar-label { fill: rgb(51, 65, 85); font-size: 10.5px; font-weight: 900; }

.seasonal-report .radar-value { fill: rgb(100, 116, 139); font-size: 9.5px; font-weight: 850; }

.seasonal-report .radar-value.na { fill: rgb(148, 163, 184); }

.seasonal-report .radar-center { fill: rgba(255, 255, 255, 0.86); stroke: rgb(230, 237, 245); stroke-width: 1; }

.seasonal-report .radar-average { fill: rgb(15, 23, 42); font-size: 22px; font-weight: 900; }

.seasonal-report .radar-average-label { fill: rgb(100, 116, 139); font-size: 10px; font-weight: 900; text-transform: uppercase; }

.seasonal-report .score-pair-card { min-width: 0px; padding: 9px 10px; border: 1px solid rgb(227, 235, 245); border-radius: 8px; background: rgb(248, 250, 252); box-shadow: rgba(255, 255, 255, 0.72) 0px 1px 0px inset; }

.seasonal-report .score-pair-head, .seasonal-report .score-analysis-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }

.seasonal-report .score-pair-head strong, .seasonal-report .score-analysis-mini-head strong { color: rgb(15, 23, 42); font-size: 11.5px; font-weight: 950; line-height: 1.1; }

.seasonal-report .score-pair-head span, .seasonal-report .score-analysis-mini-head span, .seasonal-report .score-analysis-mini.empty p { color: rgb(100, 116, 139); font-size: 9.8px; font-weight: 850; line-height: 1.2; white-space: nowrap; }

.seasonal-report .score-score-list { order: 2; }

.seasonal-report .score-score-items { display: flex; flex-direction: column; }

.seasonal-report .score-item { padding: 7px 0px; border-bottom: 1px solid rgb(231, 237, 245); }

.seasonal-report .score-item:first-child { padding-top: 0px; }

.seasonal-report .score-item:last-child { padding-bottom: 0px; border-bottom: 0px; }

.seasonal-report .report-analysis-skills { display: flex; flex-direction: column; gap: 7px; min-width: 0px; }

.seasonal-report .report-analysis-subject { margin: 0px 0px 1px; color: var(--app-blue); font-size: 11px; font-weight: 950; line-height: 1.2; text-transform: uppercase; }

.seasonal-report .report-analysis-heading { display: flex; justify-content: space-between; gap: 12px; }

.seasonal-report .report-analysis-heading strong { color: rgb(15, 23, 42); font-size: 13px; font-weight: 950; }

.seasonal-report .report-analysis-heading span { color: rgb(100, 116, 139); font-size: 10px; font-weight: 850; text-align: right; }

.seasonal-report .report-analysis-skill { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 10px; padding: 8px 0px; border-bottom: 1px solid rgb(237, 242, 247); }

.seasonal-report .report-analysis-skill.pinned { padding-left: 8px; border-left: 3px solid rgb(14, 165, 233); }

.seasonal-report .report-analysis-skill strong { display: block; color: rgb(15, 23, 42); font-size: 12.8px; font-weight: 900; line-height: 1.2; }

.seasonal-report .report-analysis-skill span, .seasonal-report .report-analysis-skill em, .seasonal-report .report-analysis-skill small { display: block; margin-top: 2px; color: rgb(100, 116, 139); font-size: 10.4px; font-style: normal; font-weight: 750; line-height: 1.25; }

.seasonal-report .report-analysis-skill b { align-self: start; min-width: 76px; padding: 4px 7px; border-radius: 999px; background: rgb(219, 234, 254); color: var(--app-blue); text-align: center; font-size: 10px; font-weight: 900; white-space: nowrap; }

.seasonal-report .score-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }

.seasonal-report .score-copy span, .seasonal-report .score-copy strong { color: rgb(51, 65, 85); font-size: 11.2px; font-weight: 850; line-height: 1.15; }

.seasonal-report .score-copy strong { color: rgb(15, 23, 42); white-space: nowrap; }

.seasonal-report .score-ribbon { position: relative; height: 12px; border-radius: 999px; background: rgb(232, 238, 246); overflow: hidden; }

.seasonal-report .score-ribbon i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-ink-deep), var(--app-teal) 58%, var(--app-teal)); }

.seasonal-report .score-ribbon b { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--app-ink-deep); font-size: 8px; font-weight: 850; }

/* Indented breakdown under the Book/Materials total score */
.seasonal-report .score-subitems { display: grid; gap: 4px; margin-top: 6px; margin-left: 12px; padding: 6px 0 0 10px; border-top: 1px solid rgb(230, 237, 245); border-left: 2px solid rgba(47, 47, 228, 0.18); }

.seasonal-report .score-subitems span { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 8px; }

.seasonal-report .score-subitems em { color: rgb(100, 116, 139); font-size: 10.5px; font-style: normal; font-weight: 750; line-height: 1.25; }

.seasonal-report .score-subitems b { color: rgb(23, 32, 51); font-size: 10.5px; font-weight: 900; white-space: nowrap; }

.seasonal-report .score-analysis-mini { order: 1; margin: 0px; }

.seasonal-report .score-analysis-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }

.seasonal-report .score-analysis-mini-head strong { color: rgb(15, 23, 42); font-size: 11.5px; font-weight: 950; line-height: 1.1; }

.seasonal-report .score-analysis-mini-head span, .seasonal-report .score-analysis-mini.empty p { color: rgb(100, 116, 139); font-size: 9.8px; font-weight: 850; line-height: 1.2; white-space: nowrap; }

.seasonal-report .score-analysis-legend .achieved, .seasonal-report .score-analysis-skill-row.achieved b { background: rgb(16, 185, 129); }

.seasonal-report .score-analysis-legend .help, .seasonal-report .score-analysis-skill-row.help b { background: rgb(245, 158, 11); }

.seasonal-report .score-analysis-legend .notyet, .seasonal-report .score-analysis-skill-row.notyet b { background: rgb(239, 68, 68); }

.seasonal-report .score-analysis-legend { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 1px 0px 7px; }

.seasonal-report .score-analysis-legend span { display: inline-flex; align-items: center; gap: 4px; color: rgb(100, 116, 139); font-size: 8.8px; font-weight: 850; line-height: 1; }

.seasonal-report .score-analysis-legend i { width: 8px; height: 8px; border-radius: 50%; }

.seasonal-report .score-analysis-skill-list { display: flex; flex-direction: column; gap: 4px; }

.seasonal-report .score-analysis-skill-row { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0px; border-top: 1px solid rgb(241, 245, 249); }

.seasonal-report .score-analysis-skill-copy { min-width: 0px; }

.seasonal-report .score-analysis-skill-copy span { display: block; min-width: 0px; color: rgb(51, 65, 85); font-size: 10.1px; font-weight: 900; line-height: 1.18; }

.seasonal-report .score-analysis-skill-copy em { display: block; margin-top: 2px; color: rgb(100, 116, 139); font-size: 9px; font-style: normal; font-weight: 780; line-height: 1.15; }

.seasonal-report .score-analysis-skill-row b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid rgb(255, 255, 255); border-radius: 50%; color: rgb(255, 255, 255); text-align: center; font-size: 11px; font-weight: 950; line-height: 1; box-shadow: rgba(15, 23, 42, 0.18) 0px 1px 4px; }

.seasonal-report .skills { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 2px 16px; }

.seasonal-report .learning-trajectory-panel { display: grid; grid-template-columns: minmax(0px, 1fr) 108px; gap: 8px; margin: 0px 0px 8px; padding: 8px; border: 1px solid rgba(166, 225, 250, 0.14); border-radius: 18px; background: radial-gradient(circle at 8% 30%, rgba(166, 225, 250, 0.16) 0px, rgba(166, 225, 250, 0.16) 1px, transparent 1.5px), radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px), linear-gradient(135deg, rgba(0, 7, 45, 0.98) 0%, rgba(0, 28, 85, 0.94) 64%, rgba(10, 36, 114, 0.82) 100%); color: rgb(238, 248, 255); box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px inset, rgba(0, 7, 45, 0.06) 0px 8px 20px; }

.seasonal-report .learning-trajectory-map { min-width: 0px; }

.seasonal-report .trajectory-title { display: block; margin-bottom: 6px; color: rgba(238, 248, 255, 0.62); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.seasonal-report .trajectory-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); align-items: start; gap: 4px; }

.seasonal-report .trajectory-track::before { content: ""; position: absolute; left: 7%; right: 7%; top: 9px; height: 1px; background: linear-gradient(90deg, rgba(14, 107, 168, 0.34), rgba(166, 225, 250, 0.42), rgba(166, 225, 250, 0.16)); }

.seasonal-report .trajectory-stop { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0px; color: rgba(238, 248, 255, 0.48); text-align: center; z-index: 1; }

.seasonal-report .trajectory-stop i { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid rgba(166, 225, 250, 0.24); border-radius: 50%; background: rgb(0, 7, 45); color: transparent; font-size: 8px; font-style: normal; font-weight: 950; line-height: 1; }

.seasonal-report .trajectory-stop span { color: inherit; font-size: 8.2px; font-weight: 900; line-height: 1.08; overflow-wrap: anywhere; }

.seasonal-report .trajectory-stop.complete { color: rgba(238, 248, 255, 0.76); }

.seasonal-report .trajectory-stop.complete i { border-color: rgba(14, 107, 168, 0.56); background: rgba(14, 107, 168, 0.72); color: rgb(238, 248, 255); }

.seasonal-report .trajectory-stop.current { color: rgb(166, 225, 250); }

.seasonal-report .trajectory-stop.current i { width: 21px; height: 21px; margin-top: -3px; border-color: rgba(166, 225, 250, 0.82); background: rgba(166, 225, 250, 0.16); color: rgb(166, 225, 250); box-shadow: rgba(166, 225, 250, 0.09) 0px 0px 0px 4px, rgba(166, 225, 250, 0.32) 0px 0px 14px; }

.seasonal-report .learning-trajectory-status { display: grid; align-content: center; justify-items: center; gap: 3px; padding: 6px; border: 1px solid rgba(166, 225, 250, 0.16); border-radius: 14px; background: rgba(166, 225, 250, 0.08); text-align: center; }

.seasonal-report .learning-trajectory-status span { color: rgba(238, 248, 255, 0.56); font-size: 8.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.seasonal-report .learning-trajectory-status strong { color: rgb(166, 225, 250); font-size: 14px; font-weight: 950; line-height: 1; text-transform: uppercase; }

.seasonal-report .learning-trajectory-status em { color: rgba(238, 248, 255, 0.68); font-size: 9.5px; font-style: normal; font-weight: 850; }

.seasonal-report .learning-trajectory-panel p { display: none; }

.seasonal-report .skill { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0px; border-bottom: 1px solid rgb(237, 242, 247); }

.seasonal-report .skill strong { display: block; color: rgb(15, 23, 42); font-size: 13.5px; font-weight: 800; }

.seasonal-report .skill span { display: block; color: rgb(100, 116, 139); font-size: 11.5px; font-weight: 700; margin-top: 1px; }

.seasonal-report .skill > b { min-width: 34px; padding: 4px 7px; border-radius: 999px; background: rgb(219, 234, 254); color: var(--app-blue); text-align: center; font-size: 12px; }

.seasonal-report .skill > b.na { background: rgb(237, 242, 247); color: rgb(100, 116, 139); font-size: 9.5px; line-height: 1.1; white-space: nowrap; }

.seasonal-report .subject-report-subsection { margin-top: 7px; }

.seasonal-report .subject-report-subsection h4 { margin: 0px 0px 6px; color: rgb(51, 65, 85); font-size: 13px; font-weight: 900; }

.seasonal-report .report-empty-state { display: inline-flex; align-items: center; min-height: 36px; color: rgb(100, 116, 139); font-size: 13px; font-weight: 800; }

.seasonal-report .written { margin-top: 14px; padding: 16px 18px 18px; border-radius: 16px; background: var(--report-gradient); color: rgb(23, 32, 51); border: 0px; box-shadow: none; }

.seasonal-report .written .section-title { color: var(--app-ink-deep); }

.seasonal-report .written .section-title span { color: var(--app-ink-deep); }

.seasonal-report .written .section-title em { color: var(--app-blue); background: rgba(255, 255, 255, 0.62); }

.seasonal-report .narrative-container { position: relative; background: transparent !important; border: 0px !important; box-shadow: none !important; padding: 0px !important; }

.seasonal-report .narrative-text { min-height: 0px; border-radius: 0px; color: rgb(23, 32, 51); font-size: 15.5px; line-height: 1.44; font-weight: 650; padding: 0px !important; background: transparent !important; border: 0px !important; box-shadow: none !important; }

.seasonal-report .narrative-text * { box-sizing: border-box; }

.structured-narrative { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; }

.structured-report-card { border: 1px solid rgba(14, 107, 168, 0.2); border-radius: 13px; background: rgba(255, 255, 255, 0.78); padding: 9px 11px; }

.structured-report-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; }

.structured-report-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }

.structured-report-card-head strong { color: rgb(0, 28, 85); font-size: 12.5px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; }

.structured-report-card-head span { color: rgb(14, 107, 168); font-size: 10px; font-weight: 800; line-height: 1.2; }

.structured-report-card ul { margin: 0px; padding-left: 18px; }

.structured-report-card li { margin: 4px 0px; color: rgb(23, 32, 51); font-size: 12.8px; line-height: 1.32; font-weight: 650; }

.structured-report-copy { display: flex; flex-direction: column; gap: 6px; }

.structured-report-copy p { margin: 0px; color: rgb(23, 32, 51); font-size: 13px; line-height: 1.36; font-weight: 650; }

.report-keyword { display: inline; color: rgb(0, 28, 85); font-weight: 900; background: linear-gradient(transparent 58%, rgba(166, 225, 250, 0.62) 58%); border-radius: 4px; padding: 0px 2px; }

.report-score-value { display: inline-block; color: rgb(255, 255, 255); background: rgb(14, 107, 168); border-radius: 999px; padding: 1px 7px; font-size: 0.92em; font-weight: 900; line-height: 1.35; }

.structured-report-weakness { border-left: 5px solid rgb(10, 36, 114); }

.structured-report-improvement { border-left: 5px solid rgb(14, 107, 168); }

.structured-report-prediction { border-left: 5px solid rgb(166, 225, 250); }

.structured-narrative-fallback { color: rgb(23, 32, 51); font-size: 15px; line-height: 1.5; }

.seasonal-report .narrative-textarea { width: 100%; min-height: 160px; margin-top: 8px; padding: 12px 14px; border: 1px solid rgba(47, 47, 228, 0.5); border-radius: 12px; color: rgb(23, 32, 51); font-family: var(--font-primary); font-size: 16px; line-height: 1.5; resize: vertical; }

.seasonal-report .narrative-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

.seasonal-report .narrative-controls button { padding: 8px 12px; border: 0px; border-radius: 999px; color: rgb(255, 255, 255); font-family: var(--font-primary); font-size: 12px; font-weight: 900; cursor: pointer; }

.seasonal-report .edit-narrative-btn, .seasonal-report .save-narrative-btn { background: var(--accent); }

.seasonal-report .revert-narrative-btn { background: rgb(100, 116, 139); }

.seasonal-report .report-actions { margin: 0px; padding: 0px 34px 28px; border: 0px; text-align: center; }

.seasonal-report-actions { max-width: 900px; margin: 12px auto 0px; padding: 0px; border: 0px; text-align: center; }

.seasonal-report .download-button { margin: 0px; border-radius: 999px; background: var(--accent); box-shadow: rgba(15, 23, 42, 0.12) 0px 8px 22px; }

@media (max-width: 760px) {
  .report-output.seasonal-output { width: 100%; }
  .seasonal-report-canvas { width: 100%; padding: 14px; }
  .seasonal-report .report-hero { grid-template-columns: 1fr; min-height: 0px; padding: 22px; }
  .seasonal-report .season-scene { opacity: 0.22; }
  .seasonal-report .date { text-align: left; }
  .seasonal-report .report-modern-body { padding: 20px 22px 24px; }
  .seasonal-report .metrics, .seasonal-report .lesson-strip, .seasonal-report .lesson-notes, .seasonal-report .report-performance-row, .seasonal-report .report-analysis-skills-grid, .seasonal-report .skills { grid-template-columns: 1fr; }
  .seasonal-report .learning-trajectory-panel { grid-template-columns: 1fr; }
  .seasonal-report .learning-trajectory-status { grid-template-columns: auto 1fr auto; justify-items: stretch; text-align: left; }
  .seasonal-report .report-student-name { max-width: 100%; }
  .seasonal-report .report-student-name-svg { max-height: 46px; }
  .seasonal-report .report-subtitle .class-name { white-space: normal; }
}

.report-skills-section { margin-bottom: 16px; padding: 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.report-vocabulary-section { margin-bottom: 16px; padding: 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.vocab-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }

.vocab-report-col { display: flex; flex-direction: column; gap: 6px; }

.vocab-report-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(100, 116, 139); }

.vocab-report-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.vocab-report-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }

.vocab-report-chip-known { background: rgb(220, 252, 231); color: rgb(22, 101, 52); border: 1px solid rgb(187, 247, 208); }

.vocab-report-chip-unknown { background: rgb(254, 226, 226); color: rgb(153, 27, 27); border: 1px solid rgb(254, 202, 202); }

.vocab-report-empty { font-size: 12px; color: rgb(148, 163, 184); }

.vocab-report-na { margin-top: 8px; padding: 8px 12px; background: rgb(255, 251, 235); border: 1px solid rgb(253, 230, 138); border-radius: 6px; color: rgb(146, 64, 14); font-size: 13px; font-weight: 600; }

@media (max-width: 600px) {
  .vocab-report-grid { grid-template-columns: 1fr; }
}

.skills-table { margin-top: 8px; }

.skills-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: rgb(255, 255, 255); }

.skills-table th, .skills-table td { border: 1px solid rgb(226, 232, 240); padding: 7px 8px; text-align: left; }

.skills-table th { background: rgb(248, 250, 252); font-weight: 600; color: var(--app-blue); font-size: 11.5px; }

.skills-table td { color: var(--app-ink); }

.skills-table tr:nth-child(2n) { background: rgb(248, 250, 252); }

.toggle-switch-container { display: flex; align-items: center; gap: 15px; margin-top: 8px; }

.toggle-switch { position: relative; display: inline-block; width: 60px; height: 30px; }

.toggle-switch input[type="checkbox"] { opacity: 0; width: 0px; height: 0px; }

.toggle-slider { position: absolute; cursor: pointer; inset: 0px; background: linear-gradient(135deg, rgb(255, 71, 87), rgb(255, 107, 107)); transition: 0.4s; border-radius: 30px; box-shadow: rgba(255, 71, 87, 0.3) 0px 4px 15px; }

.toggle-slider::before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px; }

input[type="checkbox"]:checked + .toggle-slider { background: linear-gradient(135deg, rgb(76, 175, 80), rgb(102, 187, 106)); box-shadow: rgba(76, 175, 80, 0.4) 0px 4px 15px; }

input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(30px); }

.toggle-label { font-weight: 600; color: rgb(71, 85, 105); font-size: 14px; min-width: 70px; transition: color 0.3s; }

.toggle-label.met { color: rgb(76, 175, 80); }

.toggle-label.not-met { color: rgb(255, 71, 87); }

.scores-note { font-size: 14px; color: rgb(100, 116, 139); margin-bottom: 12px; font-style: italic; }

.scores-compact { display: flex; flex-direction: column; gap: 6px; }

.scores-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid rgb(207, 220, 232); }

.scores-column .scores-header h3 { margin: 0px; padding: 0px; border: 0px; min-width: 0px; }

.scores-compact.multi-subject > .score-row, .scores-compact.multi-subject > .score-group, .scores-compact.multi-subject > .ted-presentation-rubric { display: none !important; }

.subject-score-cards { display: none; flex-direction: column; gap: 10px; }

.scores-compact.multi-subject .subject-score-cards { display: flex; }

.subject-score-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: rgb(248, 250, 252); border: 1px solid rgb(219, 234, 254); border-radius: 8px; }

.subject-score-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }

.subject-score-card-title { min-width: 0px; color: var(--app-secondary); font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subject-score-card-badge { flex: 0 0 auto; padding: 3px 7px; background: rgb(219, 234, 254); color: var(--app-blue); border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }

.ted-score-card .subject-score-card-badge { background: rgb(236, 253, 245); color: rgb(4, 120, 87); }

.subject-score-card .score-row { height: auto; min-height: 40px; }

.subject-score-card .subject-activity-row { grid-template-columns: 140px minmax(0px, 1fr); }

.subject-score-card .subject-activity-row select { grid-column: 2 / 3; }

.score-group { display: flex; flex-direction: column; gap: 0px; background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 6px; overflow: hidden; }

.score-group .score-row { margin: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 0px; background: transparent; }

.score-group:not(.paired) .score-row:last-child { border-radius: 6px; }

.score-group .score-row + .score-row { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }

.score-row { display: grid; grid-template-columns: 140px 70px 20px 70px; align-items: center; gap: 8px; padding: 8px 10px; background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 6px; height: 44px; }

.score-row label { font-size: 12px; color: rgb(100, 116, 139); font-weight: 600; text-transform: none; letter-spacing: 0.5px; margin: 0px; }

.score-row input[type="number"] { width: 70px; padding: 5px 8px; border: 1px solid rgb(203, 213, 225); border-radius: 4px; font-size: 14px; background: rgb(255, 255, 255); color: var(--app-ink); font-family: var(--font-primary); transition: border-color 0.15s; text-align: center; font-weight: 500; }

.score-row select { grid-column: 2 / 5; width: 100%; min-width: 0px; padding: 6px 8px; border: 1px solid rgb(203, 213, 225); border-radius: 4px; font-size: 13px; background: rgb(255, 255, 255); color: var(--app-ink); font-family: var(--font-primary); font-weight: 500; }

.score-row select:focus { outline: none; border-color: var(--app-blue); }

.score-row input[type="number"]:focus { outline: none; border-color: var(--app-blue); }

.score-row input[type="number"]::placeholder { color: rgb(148, 163, 184); font-weight: 400; }

.score-row span { font-size: 14px; font-weight: 600; color: var(--app-blue); text-align: center; }

.analysis-skills-panel { --analysis-accent: #2563eb; --analysis-border: #d8e2ee; --analysis-muted: #64748b; display: flex; flex-direction: column; gap: 11px; margin-top: 0px; padding: 14px; background: linear-gradient(rgba(248, 251, 255, 0.96), rgb(255, 255, 255) 72%), rgb(255, 255, 255); border: 1px solid var(--analysis-border); border-radius: 12px; box-shadow: rgba(15, 23, 42, 0.06) 0px 8px 22px; }

.analysis-skills-panel.hidden { display: none; }

.analysis-skills-panel:empty { display: none; }

.analysis-skills-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; min-width: 0px; }

.analysis-skills-header strong { display: block; color: rgb(15, 23, 42); font-size: 15px; font-weight: 950; line-height: 1.18; }

.analysis-skills-header span, .analysis-skills-status { display: block; color: var(--analysis-muted); font-size: 12px; font-weight: 700; line-height: 1.25; }

.analysis-level-map-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.analysis-level-map-summary span, .analysis-level-map-summary b { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1; }

.analysis-level-map-summary span { background: rgb(248, 250, 252); color: rgb(100, 116, 139); }

.analysis-level-map-summary b { background: rgb(236, 254, 255); color: rgb(14, 116, 144); }

.analysis-skills-status { flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgb(226, 232, 240); border-radius: 999px; background: rgb(248, 250, 252); white-space: nowrap; }

.analysis-panel-controls { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }

.analysis-skill-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.analysis-skill-filter, .analysis-mapping-toggle { min-height: 30px; padding: 6px 10px; border: 1px solid rgb(216, 226, 238); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(71, 85, 105); font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer; }

.analysis-skill-filter.active, .analysis-mapping-toggle.active { border-color: rgb(147, 197, 253); background: rgb(239, 246, 255); color: rgb(29, 78, 216); }

.analysis-skills-status.warning { color: rgb(180, 83, 9); }

.analysis-skills-status.loading { color: var(--app-blue); }

.analysis-skills-list { display: flex; flex-direction: column; gap: 8px; }

.analysis-skill-card { display: grid; grid-template-columns: minmax(230px, 0.95fr) minmax(430px, 1.35fr); align-items: start; gap: 14px; padding: 12px 14px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 237, 246); border-radius: 11px; min-width: 0px; box-shadow: rgba(15, 23, 42, 0.04) 0px 1px 2px; }

.analysis-skill-card.analysis-skill-pinned { border-color: rgb(147, 197, 253); background: linear-gradient(90deg, rgba(37, 99, 235, 0.043), rgb(255, 255, 255) 22%); box-shadow: inset 3px 0 0 var(--analysis-accent),
        0 1px 2px rgba(15, 23, 42, .04); }

.analysis-skill-card-header, .analysis-skill-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }

.analysis-skill-copy { min-width: 0px; }

.analysis-skill-copy strong { display: block; color: rgb(15, 23, 42); font-size: 14px; font-weight: 900; line-height: 1.25; }

.analysis-skill-description { margin: 4px 0px 0px; color: rgb(71, 85, 105); font-size: 12.5px; font-weight: 650; line-height: 1.4; }

.analysis-skill-meta { align-items: center; flex-wrap: wrap; gap: 5px; margin: 5px 0px 0px; color: var(--analysis-muted); font-size: 11.5px; font-weight: 750; line-height: 1.25; display: flex !important; }

.analysis-skill-meta b, .analysis-skill-meta em, .analysis-skill-meta small { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 900; line-height: 1; }

.analysis-skill-meta b { background: rgb(241, 245, 249); color: rgb(71, 85, 105); }

.analysis-skill-meta em { background: rgb(239, 246, 255); color: rgb(29, 78, 216); }

.analysis-skill-meta small { max-width: 220px; overflow: hidden; background: rgb(248, 250, 252); color: rgb(100, 116, 139); font-size: 10.8px; text-overflow: ellipsis; white-space: nowrap; }

.analysis-skill-meta .analysis-importance-major { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }

.analysis-skill-meta .analysis-importance-minor { background: rgb(241, 245, 249); color: rgb(71, 85, 105); }

.analysis-skill-meta .analysis-ixl-major { background: rgb(236, 254, 255); color: rgb(14, 116, 144); }

.analysis-skill-meta .analysis-ixl-minor { background: rgb(248, 250, 252); color: rgb(100, 116, 139); }

.analysis-skill-mapping { display: none; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.analysis-skills-panel.analysis-mapping-mode .analysis-skill-mapping { display: flex; }

.analysis-skill-mapping b, .analysis-skill-mapping em, .analysis-skill-mapping small { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 8px; border-radius: 999px; background: rgb(248, 250, 252); color: rgb(100, 116, 139); font-size: 10.8px; font-style: normal; font-weight: 900; line-height: 1; }

.analysis-skill-mapping small { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.analysis-skill-filtered-out { display: none; }

.analysis-skill-pin { padding: 4px 8px; border-radius: 999px; background: rgb(239, 246, 255); color: rgb(29, 78, 216); font-size: 11px; font-weight: 900; white-space: nowrap; }

.analysis-skill-remove { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0px; border-radius: 50%; background: transparent; color: rgb(100, 116, 139); font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer; opacity: 0.52; transition: background 0.15s, color 0.15s, opacity 0.15s; }

.analysis-skill-card:hover .analysis-skill-remove, .analysis-skill-remove:focus-visible { opacity: 1; }

.analysis-skill-remove:hover { background: rgb(241, 245, 249); color: rgb(15, 23, 42); }

.analysis-skill-grading { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 6px; min-width: 0px; }

.analysis-band-row { display: flex; gap: 3px; min-width: 0px; padding: 3px; border: 1px solid rgb(226, 232, 240); border-radius: 10px; background: rgb(241, 245, 249); }

.analysis-rating-panel { display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 6px; min-width: 0px; }

.analysis-rating-label, .analysis-evidence-label { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 9px; border-radius: 8px; background: rgb(248, 250, 252); color: rgb(100, 116, 139); font-size: 11px; font-weight: 900; line-height: 1; text-transform: uppercase; }

.analysis-band-button { position: relative; flex: 1 1 0px; min-width: 0px; min-height: 32px; padding: 6px 8px; border: 0px; border-radius: 7px; background: transparent; color: rgb(100, 116, 139); font-size: 12px; font-weight: 850; line-height: 1.1; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }

.analysis-band-button.active { background: rgb(255, 255, 255); color: rgb(15, 23, 42); box-shadow: rgba(15, 23, 42, 0.13) 0px 1px 3px; }

.analysis-band-button.active::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px; border-radius: 999px; background: var(--band-color, var(--analysis-accent)); }

.analysis-band-button.band-needs_support.active { --band-color: #ea580c; color: rgb(154, 52, 18); }

.analysis-band-button.band-building.active { --band-color: #ca8a04; color: rgb(113, 63, 18); }

.analysis-band-button.band-applying.active, .analysis-band-button.band-extending.active { --band-color: #059669; color: rgb(6, 95, 70); }

.analysis-evidence-panel { display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 6px; min-width: 0px; }

.analysis-evidence-hint { grid-column: 2; color: rgb(100, 116, 139); font-size: 11px; font-weight: 750; line-height: 1.25; }

.analysis-evidence-options { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 4px; min-width: 0px; }

.analysis-evidence-option { display: inline-flex; align-items: center; justify-content: center; min-width: 0px; min-height: 32px; padding: 5px 7px; border: 1px solid rgb(216, 226, 238); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(71, 85, 105); font-size: 11.5px; font-weight: 850; line-height: 1.15; text-align: center; cursor: pointer; box-shadow: rgba(15, 23, 42, 0.035) 0px 1px 2px; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }

.analysis-evidence-option:hover { border-color: rgb(191, 219, 254); color: rgb(29, 78, 216); }

.analysis-evidence-option:focus-visible { outline: none; border-color: rgb(96, 165, 250); box-shadow: rgba(37, 99, 235, 0.12) 0px 0px 0px 3px; }

.analysis-evidence-option.active { border-color: rgb(147, 197, 253); background: rgb(239, 246, 255); color: rgb(29, 78, 216); box-shadow: rgba(37, 99, 235, 0.18) 0px 0px 0px 1px inset, rgba(15, 23, 42, 0.04) 0px 1px 2px; }

.analysis-proof-disabled .analysis-evidence-option { border-color: rgb(229, 231, 235); background: rgb(248, 250, 252); color: rgb(148, 163, 184); cursor: not-allowed; box-shadow: none; }

.analysis-proof-disabled .analysis-evidence-label { color: rgb(148, 163, 184); }

.analysis-proof-required .analysis-evidence-label { background: rgb(236, 253, 245); color: rgb(4, 120, 87); }

.analysis-proof-required .analysis-evidence-hint { color: rgb(4, 120, 87); }

.analysis-proof-missing .analysis-evidence-options { padding: 3px; border: 1px solid rgb(249, 115, 22); border-radius: 10px; background: rgb(255, 247, 237); }

.analysis-proof-missing .analysis-evidence-hint { color: rgb(194, 65, 12); font-weight: 900; }

.analysis-note-input { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid rgb(216, 226, 238); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(15, 23, 42); font-size: 14px; font-weight: 650; font-family: var(--font-primary); }

.analysis-note-input:focus { outline: none; border-color: rgb(147, 197, 253); box-shadow: rgba(37, 99, 235, 0.1) 0px 0px 0px 3px; }

.analysis-skill-add-row { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; }

.analysis-skill-search { min-width: 0px; padding: 10px 12px; border: 1px solid rgb(216, 226, 238); border-radius: 9px; font-size: 14px; font-family: var(--font-primary); background: rgb(255, 255, 255); }

.analysis-skill-add-row button { padding: 10px 14px; border: 0px; border-radius: 9px; background: var(--app-secondary); color: rgb(255, 255, 255); font-size: 13px; font-weight: 900; cursor: pointer; }

@media (max-width: 940px) {
  .analysis-skills-header { align-items: flex-start; flex-direction: column; gap: 7px; }
  .analysis-skills-status { white-space: normal; }
  .analysis-skill-card { grid-template-columns: 1fr; gap: 9px; }
  .analysis-skill-grading { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .analysis-rating-panel, .analysis-evidence-panel { grid-template-columns: 1fr; }
  .analysis-rating-label, .analysis-evidence-label { justify-content: flex-start; width: fit-content; }
  .analysis-evidence-options { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

.ted-presentation-rubric { max-width: 100%; overflow-x: visible; padding: 8px; border: 1px solid rgb(187, 247, 208); border-radius: 10px; background: rgb(240, 253, 244); }

.ted-presentation-rubric .ted-presentation-aggregate-row { grid-template-columns: 112px 62px 14px 62px; gap: 5px; margin-bottom: 7px; padding: 6px 8px; background: rgb(255, 255, 255); border-color: rgb(187, 247, 208); }

.ted-presentation-rubric .ted-presentation-aggregate-row input[readonly] { background: rgb(236, 253, 245); color: rgb(4, 120, 87); font-weight: 800; }

.ted-presentation-rubric-header { display: grid; gap: 2px; margin-bottom: 6px; color: rgb(6, 95, 70); }

.ted-presentation-rubric-header span { font-size: 12px; font-weight: 900; }

.ted-presentation-rubric-header small { color: rgb(4, 120, 87); font-size: 9px; font-weight: 700; line-height: 1.3; }

.ted-presentation-grid-head, .ted-presentation-evaluator { display: grid; grid-template-columns: minmax(76px, 1fr) repeat(5, 52px) 20px; gap: 3px; align-items: center; min-width: 0px; }

.ted-presentation-grid-head { margin-bottom: 4px; color: rgb(4, 120, 87); font-size: 8px; font-weight: 900; line-height: 1.15; white-space: normal; }

.ted-presentation-evaluator-list { display: grid; gap: 4px; }

.ted-presentation-evaluator input { box-sizing: border-box; width: 100%; min-width: 0px; padding: 5px 4px; border: 1px solid rgb(167, 243, 208); border-radius: 6px; background: rgb(255, 255, 255); color: var(--app-ink); font-size: 10px; font-family: var(--font-primary); }

.ted-presentation-evaluator input[type="number"] { min-width: 52px; padding-right: 4px; padding-left: 4px; appearance: textfield; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }

.ted-presentation-rubric input[type="number"] { appearance: textfield; }

.ted-presentation-rubric input[type="number"]::-webkit-outer-spin-button, .ted-presentation-rubric input[type="number"]::-webkit-inner-spin-button { margin: 0px; appearance: none; }

.ted-presentation-remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0px; border-radius: 999px; background: rgb(254, 226, 226); color: rgb(153, 27, 27); box-shadow: none; font-size: 12px; }

.ted-presentation-actions { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-top: 7px; }

.ted-presentation-add { padding: 5px 8px; border-radius: 999px; background: rgb(4, 120, 87); color: rgb(255, 255, 255); box-shadow: none; font-size: 10px; }

.ted-presentation-summary { color: rgb(4, 120, 87); font-size: 10px; font-weight: 800; text-align: right; }

.ted-presentation-summary span { color: rgb(100, 116, 139); }

.score-override-btn { min-width: 0px; padding: 6px 9px; border: 1px solid rgb(203, 213, 225); border-radius: 999px; background: rgb(255, 255, 255); color: rgb(67, 86, 107); font-size: 11px; font-weight: 800; line-height: 1; box-shadow: none; white-space: nowrap; }

.score-header-override { flex: 0 0 auto; padding: 7px 11px; font-size: 11px; }

.score-override-btn:hover { background: rgb(241, 245, 249); color: var(--app-blue); box-shadow: none; transform: none; }

.score-override-btn.active { border-color: rgb(245, 158, 11); background: rgb(255, 251, 235); color: rgb(146, 64, 14); }

.video-summary-score-row.override-active { border-color: rgb(245, 158, 11); background: rgb(255, 251, 235); }

.video-summary-score-row.override-active input[type="number"] { background: rgb(248, 250, 252); color: rgb(148, 163, 184); }

@media (max-width: 768px) {
  .report-performance-row { grid-template-columns: 1fr; }
  .report-performance-row .ratings-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: none; }
  .scores-grid { grid-template-columns: 1fr; }
}

.report-scores-section { margin-bottom: 14px; padding: 14px 15px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid rgb(226, 232, 240); }

.scores-table { margin-top: 8px; }

.report-performance-row .scores-table { display: flex; flex: 1 1 0%; min-height: 0px; }

.scores-table table { width: 100%; border-collapse: collapse; font-size: 13px; background: rgb(255, 255, 255); }

.report-performance-row .scores-table table { height: 100%; }

.scores-table th, .scores-table td { border: 1px solid rgb(226, 232, 240); padding: 7px 8px; text-align: left; }

.report-performance-row .scores-table th, .report-performance-row .scores-table td { padding: 6px 7px; }

.scores-table th { background: rgb(248, 250, 252); font-weight: 600; color: var(--app-blue); font-size: 11.5px; }

.scores-table td { color: var(--app-ink); }

.scores-table tr:nth-child(2n) { background: rgb(248, 250, 252); }

.scores-table td:first-child { width: 35%; }

.scores-table td:nth-child(2) { width: 20%; text-align: center; font-weight: 600; }

.scores-table td:last-child { width: 45%; padding: 4px 10px; }

/* Indented book/material activity breakdown under the total score row */
.scores-table tr.score-breakdown-row td { background: rgb(248, 250, 252); color: rgb(71, 85, 105); font-size: 12px; }
.scores-table tr.score-breakdown-row td.score-breakdown-label { padding-left: 22px; font-weight: 500; }
.scores-table tr.score-breakdown-row td.score-breakdown-label::before { content: "↳ "; color: rgb(148, 163, 184); font-weight: 700; }

.scores-graph { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

.score-bar-item { display: flex; flex-direction: column; gap: 4px; }

.score-bar-label { font-size: 11px; color: rgb(71, 85, 105); font-weight: 600; }

.score-bar-container { position: relative; width: 100%; height: 24px; background: rgb(241, 245, 249); border: 1px solid rgb(226, 232, 240); border-radius: 6px; overflow: hidden; }

.score-bar-fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; font-weight: 700; color: white; transition: width 0.6s; border-radius: 5px; }

.score-bar-fill.high { background: rgb(34, 197, 94); }

.score-bar-fill.medium { background: rgb(245, 158, 11); }

.score-bar-fill.low { background: rgb(239, 68, 68); }

.score-bar-percentage { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: rgb(100, 116, 139); z-index: 1; }

.report-performance-row .score-bar-percentage { display: none; }

@media (max-width: 768px) {
  .scores-content { grid-template-columns: 1fr; }
}

.form-group label { font-size: 12px; }

.label-helper { font-size: 10px; font-weight: 300; letter-spacing: 0.5px; opacity: 0.8; }

.field-examples { margin-top: 6px; font-size: 11px; color: rgb(100, 116, 139); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.field-examples strong { color: rgb(71, 85, 105); font-weight: 600; }

.structured-lesson-stack { display: grid; gap: 12px; margin-top: 4px; }

.structured-lesson-card { padding: 12px; border: 1px solid rgb(216, 229, 238); border-radius: 14px; background: linear-gradient(135deg, rgb(248, 251, 255) 0%, rgb(255, 255, 255) 100%); box-shadow: rgba(15, 23, 42, 0.04) 0px 8px 22px; }

.structured-lesson-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }

.structured-lesson-head label { margin: 0px; }

.structured-lesson-head span { color: rgb(100, 116, 139); font-size: 11px; font-weight: 700; text-align: right; }

.structured-lesson-grid { display: grid; grid-template-columns: minmax(220px, 1.35fr) minmax(160px, 0.85fr) minmax(150px, 0.8fr); gap: 10px; }

.structured-lesson-field label { display: block; margin-bottom: 5px; color: rgb(100, 116, 139); font-size: 10.5px; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }

.structured-lesson-field input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid rgb(216, 229, 238); border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: var(--app-ink); font-family: var(--font-primary); font-size: 14px; font-weight: 650; box-shadow: rgba(255, 255, 255, 0.82) 0px 1px 0px inset; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }

.structured-lesson-field input:focus { outline: none; border-color: rgba(47, 47, 228, 0.62); box-shadow: rgba(47, 47, 228, 0.12) 0px 0px 0px 4px; background: rgb(255, 255, 255); }

.structured-lesson-field input::placeholder { color: rgb(148, 163, 184); font-weight: 650; }

.example-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; }

.example-tag.good { background: rgb(220, 252, 231); color: rgb(22, 163, 74); border: 1px solid rgb(187, 247, 208); }

.example-tag.good::before { content: "✓ "; }

.example-tag.bad { background: rgb(254, 226, 226); color: rgb(220, 38, 38); border: 1px solid rgb(254, 202, 202); text-decoration: line-through; opacity: 0.8; }

.example-tag.bad::before { content: "✗ "; text-decoration: none; }

.score-row { position: relative; }

.score-invalid { border-color: rgb(239, 68, 68) !important; background-color: rgb(254, 242, 242) !important; box-shadow: rgba(239, 68, 68, 0.2) 0px 0px 0px 2px !important; }

.score-error { display: block; width: 100%; margin-top: 4px; font-size: 10px; color: rgb(220, 38, 38); font-weight: 500; }

.multi-select-dropdown { position: relative; width: 100%; }

.selected-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0px; }

.selected-skills:empty { display: none; }

.selected-subjects, .selected-materials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0px; }

.selected-subjects:empty, .selected-materials:empty { display: none; }

.subject-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: var(--app-teal); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; animation: 0.2s ease-out 0s 1 normal none running tagAppear; }

.subject-tag-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subject-tag-remove { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0px; margin: 0px; background: rgba(255, 255, 255, 0.24); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; color: rgb(255, 255, 255); cursor: pointer; font-size: 13px; line-height: 1; }

.subject-tag-remove:hover { background: rgba(255, 255, 255, 0.38); transform: none; box-shadow: none; }

.material-tag { background: var(--app-primary-button); border-radius: 999px; border: 1px solid rgba(47, 47, 228, 0.15); color: rgb(255, 255, 255); padding: 6px 11px; }

.dropdown-item.subject-selected { background: rgb(239, 246, 255); color: var(--app-blue); font-weight: 700; }

.subject-check { display: inline-block; width: 18px; color: var(--app-teal); font-weight: 700; }

.skill-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; animation: 0.2s ease-out 0s 1 normal none running tagAppear; transition: 0.2s; }

.skill-tag.not-met { background: linear-gradient(135deg, rgb(239, 68, 68), rgb(220, 38, 38)); color: white; box-shadow: rgba(239, 68, 68, 0.3) 0px 2px 4px; }

.skill-tag.met { background: linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74)); color: white; box-shadow: rgba(34, 197, 94, 0.3) 0px 2px 4px; }

@keyframes tagAppear { 
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.skill-tag-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.skill-met-toggle { display: flex; align-items: center; justify-content: center; min-width: 58px; height: 22px; padding: 0px 8px; margin: 0px; background: rgba(255, 255, 255, 0.3); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 11px; color: white; font-size: 9px; font-weight: bold; cursor: pointer; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }

.skill-met-toggle:hover { background: rgba(255, 255, 255, 0.5); transform: scale(1.1); }

.skill-tag-remove { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0px; margin: 0px; background: rgba(255, 255, 255, 0.2); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; color: white; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s; line-height: 1; }

.skill-tag-remove:hover { background: rgba(255, 255, 255, 0.4); transform: scale(1.1); }

.sf-legend { margin-top: 8px; font-size: 11px; color: rgb(100, 116, 139); display: flex; align-items: center; gap: 8px; }

.sf-met-legend { background: rgb(22, 163, 74); color: white; font-weight: 600; font-size: 9px; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

.sf-not-met-legend { background: rgb(220, 38, 38); color: white; font-weight: 600; font-size: 9px; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

.multi-select-dropdown .dropdown-list { position: absolute; top: 100%; left: 0px; right: 0px; background: rgb(255, 255, 255); border-width: medium 1.5px 1.5px; border-style: none solid solid; border-color: currentcolor rgb(203, 213, 225) rgb(203, 213, 225); border-image: none; border-radius: 0px 0px 8px 8px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }

.multi-select-dropdown .dropdown-list.show { display: block; }

.multi-select-dropdown .dropdown-item.no-results { color: rgb(100, 116, 139); font-size: 13px; }

.multi-select-dropdown .dropdown-item.no-results strong { color: var(--app-blue); }

.multi-select-dropdown .dropdown-item.no-results em { color: var(--app-ink); font-style: normal; font-weight: 600; }

.skill-focus-display { flex-direction: column !important; align-items: flex-start !important; }

.sf-tags-display { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.sf-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }

.sf-tag.sf-met { background: linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74)); color: white; box-shadow: rgba(34, 197, 94, 0.3) 0px 2px 4px; }

.sf-tag.sf-not-met { background: linear-gradient(135deg, rgb(239, 68, 68), rgb(220, 38, 38)); color: white; box-shadow: rgba(239, 68, 68, 0.3) 0px 2px 4px; }

.autosave-indicator { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74)); color: white; padding: 10px 20px; border-radius: 25px; font-size: 0.85em; font-weight: 600; box-shadow: rgba(34, 197, 94, 0.4) 0px 4px 12px; z-index: 9999; opacity: 0; transform: translateY(20px); transition: 0.3s; pointer-events: none; }

.autosave-indicator.show { opacity: 1; transform: translateY(0px); }

.draft-restored-notification { position: fixed; top: 20px; right: 20px; background: white; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px; z-index: 10000; overflow: hidden; animation: 0.4s ease 0s 1 normal none running slideInRight; border-left: 4px solid var(--app-blue); }

.draft-restored-notification.fade-out { animation: 0.3s ease 0s 1 normal forwards running fadeOutRight; }

.draft-restored-content { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }

.draft-icon { font-size: 2em; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; -webkit-text-fill-color: transparent; background-clip: text; }

.draft-message { flex: 1 1 0%; }

.draft-message strong { display: block; color: var(--app-ink); font-size: 1em; margin-bottom: 2px; }

.draft-message p { color: rgb(100, 116, 139); font-size: 0.85em; margin: 0px; }

.draft-dismiss { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(148, 163, 184); cursor: pointer; font-size: 1.2em; padding: 5px; line-height: 1; transition: color 0.2s; }

.draft-dismiss:hover { color: rgb(100, 116, 139); }

@keyframes slideInRight { 
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeOutRight { 
  0% { opacity: 1; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(100px); }
}

.pending-drafts-notification { position: fixed; top: 20px; right: 20px; z-index: 10000; animation: 0.3s ease-out 0s 1 normal none running slideInRight; }

.pending-drafts-notification.fade-out { animation: 0.3s ease-out 0s 1 normal forwards running fadeOutRight; }

.pending-drafts-content { background: linear-gradient(135deg, rgb(30, 58, 95) 0%, rgb(45, 74, 111) 100%); border-radius: 12px; padding: 16px 20px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; border: 1px solid rgba(255, 255, 255, 0.1); max-width: 300px; }

.pending-drafts-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: rgb(241, 245, 249); }

.pending-icon { font-size: 1.3em; }

.pending-dismiss { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(148, 163, 184); cursor: pointer; font-size: 1.2em; padding: 5px; line-height: 1; margin-left: auto; transition: color 0.2s; }

.pending-dismiss:hover { color: rgb(241, 245, 249); }

.pending-hint { color: rgb(148, 163, 184); font-size: 0.85em; margin: 8px 0px 12px; }

.pending-drafts-list { display: flex; flex-direction: column; gap: 8px; }

.pending-draft-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; transition: 0.2s; }

.pending-draft-item:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(3px); }

.pending-draft-item .student-name { color: rgb(241, 245, 249); font-weight: 500; }

.pending-draft-item .saved-time { color: rgb(100, 116, 139); font-size: 0.8em; }

:root { --stellar-primary: #2f2fe4; --stellar-primary-dark: #162e93; --stellar-primary-darker: #1a1953; --stellar-ink: #080616; --app-ink: var(--stellar-primary-darker); --app-muted: #5a6580; --app-line: #d9deff; --app-panel: rgba(255, 255, 255, 0.88); --app-panel-strong: #ffffff; --app-blue: var(--stellar-primary); --app-teal: var(--stellar-primary-dark); --app-gold: var(--stellar-primary); --app-rose: var(--stellar-primary-dark); --app-shadow: 0 18px 48px rgba(8, 6, 22, 0.13); --app-bg: radial-gradient(circle at 12% 5%, rgba(47, 47, 228, 0.14) 0 18rem, transparent 18.2rem),
        radial-gradient(circle at 88% 8%, rgba(22, 46, 147, 0.14) 0 15rem, transparent 15.2rem),
        radial-gradient(circle at 78% 86%, rgba(47, 47, 228, 0.10) 0 13rem, transparent 13.2rem),
        linear-gradient(135deg, #f5f6ff 0%, #eff2ff 50%, #ebefff 100%); --app-screen-lines: repeating-linear-gradient(135deg, rgba(8, 6, 22, 0.035) 0 1px, transparent 1px 22px); --app-accent-gradient: linear-gradient(90deg, var(--app-ink-deep), var(--app-teal) 50%, var(--app-teal)); --app-logo-gradient: linear-gradient(135deg, var(--app-ink-deep) 0%, var(--app-teal) 100%); --app-section-dot: linear-gradient(135deg, var(--app-ink-deep), var(--app-teal)); --app-soft-panel: linear-gradient(135deg, rgba(241, 247, 255, 0.94), rgba(245, 244, 255, 0.82)); --app-soft-chip: linear-gradient(135deg, #eef1ff, #f5f5ff); --app-primary-button: linear-gradient(135deg, var(--app-ink-deep), var(--app-teal) 62%, var(--app-teal)); --app-primary-button-hover: linear-gradient(135deg, var(--app-ink-deep), var(--app-blue) 62%, var(--app-blue)); --app-primary-shadow: rgba(47, 47, 228, 0.2); --app-primary-shadow-hover: rgba(47, 47, 228, 0.24); --app-link: var(--app-blue); --app-link-hover: var(--stellar-primary-dark); --app-link-hover-bg: #eef2ff; --app-table-head: linear-gradient(135deg, #eef2ff, #f4f6ff); --app-ink-deep: var(--stellar-ink); --app-secondary: var(--stellar-primary-darker); }

body { font-family: var(--font-primary); color: var(--app-ink); background: var(--app-bg); }

body::before { content: ""; position: fixed; inset: 0px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent 26%, transparent 74%, rgba(255, 255, 255, 0.35)),
        var(--app-screen-lines); z-index: 0; }

.container { max-width: 1120px; padding: 28px 24px 48px; }

.header-wrapper, .history-header { position: relative; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 18px 20px; border: 1px solid rgba(219, 231, 239, 0.86); border-radius: 22px; background: rgba(255, 255, 255, 0.72); box-shadow: rgba(25, 58, 94, 0.08) 0px 12px 34px; backdrop-filter: blur(12px); }

.header-wrapper::after, .history-header::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 999px; background: var(--app-accent-gradient); }

.header-logo { height: 58px; padding: 0px; border-radius: 0px; background: transparent; box-shadow: none; }

h1 { flex: 1 1 0%; padding: 0px; margin: 0px; color: var(--app-ink); font-family: var(--font-primary); font-size: clamp(2rem, 4vw, 3.15rem); font-weight: 850; line-height: 0.98; letter-spacing: 0px; text-align: left; }

h1::before, h1::after { display: none; }

.history-link, .back-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0px; padding: 10px 16px; border: 1px solid rgba(47, 47, 228, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--app-link); font-family: var(--font-primary); font-size: 13px; font-weight: 800; letter-spacing: 0px; text-decoration: none; box-shadow: none; }

.history-link:hover, .back-link:hover { background: var(--app-link-hover-bg); border-color: rgba(47, 47, 228, 0.42); color: var(--app-link-hover); transform: translateY(-1px); box-shadow: rgba(15, 118, 110, 0.12) 0px 8px 20px; }

.form-section { margin-bottom: 18px; padding: 22px; border: 1px solid rgba(219, 231, 239, 0.96); border-radius: 20px; background: var(--app-panel); box-shadow: var(--app-shadow); backdrop-filter: blur(10px); overflow: visible; }

.form-section::before, .form-section::after { display: none; }

h2 { display: flex; align-items: center; gap: 10px; margin: 0px 0px 16px; padding: 0px 0px 12px; border-bottom: 1px solid rgba(219, 231, 239, 0.92); color: var(--app-ink); font-family: var(--font-primary); font-size: 1.35rem; font-weight: 800; letter-spacing: 0px; line-height: 1.1; text-transform: none; }

h2::before { content: ""; position: static; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 999px; background: var(--app-section-dot); box-shadow: rgba(47, 47, 228, 0.12) 0px 0px 0px 5px; }

.form-row { gap: 16px; margin-bottom: 14px; }

.form-group label, .ratings-column h3, .scores-column h3 { color: rgb(48, 68, 88); font-family: var(--font-primary); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }

.form-group input, .form-group select, .form-group textarea, #studentSearch, #teacherSearch, #skillFocusSearch, #subjectSearch, #searchStudent, #searchTeacher { min-width: 0px; min-height: 44px; border: 1px solid rgb(216, 229, 238); border-radius: 13px; background: rgba(255, 255, 255, 0.9); color: var(--app-ink); font-family: var(--font-primary); font-size: 14.5px; font-weight: 650; box-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px inset; }

.form-group textarea { min-height: 104px; line-height: 1.55; }

.form-group input:focus, .form-group select:focus, .form-group textarea:focus, #studentSearch:focus, #teacherSearch:focus, #skillFocusSearch:focus, #subjectSearch:focus, #searchStudent:focus, #searchTeacher:focus { border-color: rgba(47, 47, 228, 0.62); box-shadow: rgba(47, 47, 228, 0.12) 0px 0px 0px 4px; background: rgb(255, 255, 255); }

.form-group input[readonly] { background: rgb(238, 248, 251) !important; border-color: rgb(207, 230, 239) !important; color: var(--app-blue) !important; }

.dropdown-arrow { right: 6px; color: rgb(18, 139, 138); border-radius: 10px; box-shadow: none; }

.dropdown-arrow:hover { background: rgba(47, 47, 228, 0.1); transform: none; }

.dropdown-list { margin-top: 6px; border: 1px solid rgb(216, 229, 238); border-radius: 14px; box-shadow: rgba(17, 46, 72, 0.14) 0px 16px 36px; overflow: auto; }

.dropdown-item { color: var(--app-secondary); font-family: var(--font-primary); font-weight: 650; }

.dropdown-item:hover, .dropdown-item.selected { background: rgb(238, 246, 255); color: var(--app-blue); }

.label-helper, .scores-optional, .skills-assessment-note, .sf-legend { color: var(--app-muted); font-family: var(--font-primary); letter-spacing: 0px; }

.field-examples { border: 1px solid rgb(220, 234, 241); border-radius: 14px; background: var(--app-soft-chip); }

.example-tag { border-radius: 999px; font-family: var(--font-primary); }

.selected-skills, .selected-subjects, .selected-materials { border-radius: 14px; background: rgb(246, 251, 255); border-color: rgb(219, 231, 239); }

.ratings-scores-container { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 18px; align-items: stretch; }

.ratings-column, .scores-column { display: flex; flex-direction: column; min-width: 0px; padding: 14px; border: 1px solid rgb(219, 231, 239); border-radius: 18px; background: var(--app-soft-panel); }

.ratings-column h3, .scores-column h3 { margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid rgb(207, 220, 232); color: var(--app-secondary); font-size: 13px; }

.ratings-scores-container .rating-grid, .scores-compact { flex: 1 1 0%; }

.ratings-scores-container .rating-item, .score-row, .score-group, .subject-score-card, .skill-item { border: 1px solid rgb(219, 231, 239); border-radius: 14px; background: rgba(255, 255, 255, 0.76); }

.ratings-scores-container .rating-item { min-height: 48px; height: auto; padding: 9px 11px; }

.ratings-scores-container .rating-item .rating-label, .score-row label { color: rgb(67, 86, 107); font-family: var(--font-primary); font-size: 12px; letter-spacing: 0px; }

.ratings-scores-container .star { color: rgba(124, 58, 237, 0.24); font-size: 22px; text-shadow: none; }

.star.active, .star.hover, .star-rating .star:hover, .star-rating .star.hover { color: var(--app-gold); text-shadow: rgba(124, 58, 237, 0.2) 0px 4px 12px; }

.rating-na-option { accent-color: var(--app-teal); }

.score-row { grid-template-columns: minmax(118px, 1fr) 64px 14px 64px; min-height: 46px; height: auto; padding: 8px 10px; }

.score-row input[type="number"], .score-row select { border-color: rgb(216, 229, 238); border-radius: 10px; color: var(--app-ink); font-family: var(--font-primary); font-weight: 750; }

.score-row span { color: rgb(111, 129, 146); }

.material-score-list, .subject-material-score-list { display: flex; flex-direction: column; gap: 6px; }

.score-row.material-score-row { grid-template-columns: minmax(0px, 1fr) minmax(118px, 0.9fr) 54px 10px 54px 28px; height: auto; min-height: 48px; row-gap: 0px; }

.material-score-name { min-width: 0px; color: var(--app-ink); font-size: 12px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.score-row.material-score-row select { grid-column: auto; min-width: 0px; }

.score-row.material-score-row input[type="number"] { width: 54px; }

.material-score-add { align-self: flex-start; margin: 2px 0px 4px; padding: 7px 11px; border: 1px solid rgb(191, 219, 254); border-radius: 999px; background: rgb(239, 246, 255); color: var(--app-blue); box-shadow: none; font-size: 11px; font-weight: 850; letter-spacing: 0px; text-transform: none; }

.material-score-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0px; padding: 0px; border-radius: 999px; background: rgb(254, 226, 226); color: rgb(185, 28, 28); box-shadow: none; font-size: 17px; font-weight: 900; letter-spacing: 0px; text-transform: none; }

.skill-header h3, .skill-score, .skill-subject-heading { color: var(--app-link); font-family: var(--font-primary); }

.skill-item.skill-not-covered .skill-header h3, .skill-item.skill-not-covered .microskill-item label, .skill-item.skill-not-covered .skill-score { color: rgb(148, 163, 184); text-decoration: line-through; }

.microskill-item { color: var(--app-secondary); font-family: var(--font-primary); }

button, .print-button, .download-button, .view-btn { border-radius: 999px; background: var(--app-primary-button); color: rgb(255, 255, 255); font-family: var(--font-primary); font-weight: 850; letter-spacing: 0px; text-transform: none; box-shadow: 0 10px 24px var(--app-primary-shadow); }

button:hover, .print-button:hover, .download-button:hover, .view-btn:hover { background: var(--app-primary-button-hover); transform: translateY(-1px); box-shadow: 0 14px 28px var(--app-primary-shadow-hover); }

#clearForm, #clearSearch, .revert-narrative-btn { background: linear-gradient(135deg, var(--app-rose), var(--app-rose)); box-shadow: rgba(47, 47, 228, 0.2) 0px 10px 24px; }

#clearForm:hover, #clearSearch:hover, .revert-narrative-btn:hover { background: linear-gradient(135deg, var(--app-rose), var(--app-rose)); box-shadow: rgba(47, 47, 228, 0.24) 0px 14px 28px; }

.button-group { margin-top: 22px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.54); }

.selected-date-confirmation { border-color: rgb(219, 231, 239); background: var(--app-soft-panel); box-shadow: rgba(255, 255, 255, 0.72) 0px 1px 0px inset; }

.selected-date-confirmation strong { color: var(--app-link); }

.selected-date-confirmation.date-mismatch { border-color: rgb(254, 202, 202); background: rgb(255, 247, 237); }

.selected-date-confirmation.date-mismatch .selected-date-status, .selected-date-confirmation.date-mismatch #selectedDateDisplay { color: rgb(220, 38, 38); }

.report-output:not(.seasonal-output) { border-radius: 20px; border-color: rgb(219, 231, 239); box-shadow: var(--app-shadow); }

.report-actions, .modal-actions { border-top-color: rgb(219, 231, 239); }

.draft-restored-notification { border-left-color: var(--app-teal); box-shadow: var(--app-shadow); }

.autosave-indicator { background: var(--app-primary-button); box-shadow: rgba(47, 47, 228, 0.24) 0px 12px 28px; }

@media (max-width: 860px) {
  .container { padding: 18px 14px 36px; }
  .header-wrapper, .history-header { flex-direction: column; align-items: stretch; text-align: left; padding: 16px; }
  .header-logo { width: 74px; height: auto; }
  h1 { font-size: 2.15rem; }
  .history-link, .back-link { width: 100%; }
  .form-row, .ratings-scores-container { display: grid; grid-template-columns: 1fr; }
  .structured-lesson-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .structured-lesson-head span { text-align: left; }
  .structured-lesson-grid { grid-template-columns: 1fr; }
  .form-section { padding: 17px; border-radius: 18px; }
  .score-row { grid-template-columns: minmax(100px, 1fr) 58px 12px 58px; }
  .score-row.material-score-row { grid-template-columns: minmax(0px, 1fr) 64px 14px 64px 32px minmax(0px, 1fr); row-gap: 6px; }
  .score-row.material-score-row .material-score-name, .score-row.material-score-row select { grid-column: 1 / -1; }
  .score-row.material-score-row input[data-material-score] { grid-column: 2; width: 64px; }
  .score-row.material-score-row > span:not(.material-score-name) { grid-column: 3; }
  .score-row.material-score-row input[data-material-total] { grid-column: 4; width: 64px; }
  .score-row.material-score-row .material-score-remove { grid-column: 5; }
  .scores-header { align-items: stretch; flex-direction: column; }
  .score-header-override { width: 100%; }
}

html, body, body *, button, input, select, textarea, .report-card, .report-card *, .seasonal-report, .seasonal-report *, .report-output, .report-output *, .modal-overlay, .modal-overlay * { font-family: var(--font-primary) !important; }

.header-logo, .report-logo, .seasonal-report .brand img { background: transparent !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; }