.year-groups { min-width: 0; color: var(--ink, #263747); --yg-muted: var(--muted, #657485); --yg-line: var(--line, #dce3e9); }
.year-groups [hidden] { display: none !important; }
.year-groups button, .year-groups input { font: inherit; }
.year-groups button:focus-visible { outline: 3px solid var(--blue, #6f429e); outline-offset: 4px; }
.yg-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 5px 0 27px; }
.yg-heading > div { min-width: 0; }
.yg-eyebrow { margin: 0 0 8px; color: var(--blue, #6f429e); font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.yg-heading h1 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 37px); line-height: 1.2; letter-spacing: -1px; }
.yg-heading p:not(.yg-eyebrow) { margin: 0; max-width: 590px; color: var(--yg-muted); font-size: 13px; line-height: 1.75; }
.yg-heading > button { flex-shrink: 0; font-size: 13px; white-space: normal; text-align: center; }
.yg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 23px; padding: 16px 20px; background: #fff; border: 1px solid var(--yg-line); border-radius: 12px; }
.yg-toolbar p { margin: 0; color: var(--yg-muted); font-size: 12px; line-height: 1.7; }
.yg-toolbar p strong { color: var(--ink); font-weight: 750; }
.yg-toolbar p > span { margin: 0 7px; }
.yg-refresh { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 36px; padding: 5px 7px; color: var(--blue); font-size: 12px !important; font-weight: 650 !important; }
.yg-refresh > span { font-size: 21px; line-height: 1; }
.yg-section { margin: 0 0 27px; }
.yg-section > h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: -.25px; }
.yg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.yg-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; min-height: 138px; padding: 20px; border: 1px solid #d7e1d3; border-radius: 14px; text-align: left; background: #fff; box-shadow: 0 3px 11px #26374703; }
.yg-card:hover { border-color: #91a783; background: #fbfdf9; }
.yg-card[aria-expanded="true"] { border-color: #68885b; box-shadow: inset 0 0 0 1px #68885b; background: #f2f7ed; }
.yg-card-marker { display: grid; place-items: center; width: 48px; height: 48px; color: #486640; background: #eaf1e3; border-radius: 14px; font-size: 23px; line-height: 1; font-weight: 750; }
.yg-card-copy { display: grid; gap: 5px; min-width: 0; }
.yg-card-copy strong { font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; letter-spacing: -.4px; }
.yg-card-copy > span { color: var(--yg-muted); font-size: 12px; }
.yg-card-open { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #536f48; font-size: 12px; font-weight: 650; }
.yg-card-open > span { font-size: 18px; line-height: 1; }
.yg-card-grade { border-color: #d9d8ea; }
.yg-card-grade .yg-card-marker { color: #6a5687; background: #f0ebf6; }
.yg-card-grade .yg-card-open { color: #6a5687; }
.yg-card-grade:hover { border-color: #ab99bd; background: #fdfbff; }
.yg-card-grade[aria-expanded="true"] { border-color: #8c72a4; box-shadow: inset 0 0 0 1px #8c72a4; background: #f6f1fb; }
.yg-card-unset { border-color: #e4ddce; }
.yg-card-unset .yg-card-marker { color: #8a6d3b; background: #f5efdf; }
.yg-card-unset .yg-card-open { color: #8a6d3b; }
.yg-card-unset:hover { border-color: #b7a273; background: #fffdf7; }
.yg-card-unset[aria-expanded="true"] { border-color: #a58b58; box-shadow: inset 0 0 0 1px #a58b58; background: #fbf7ec; }
.yg-section-note { margin: 10px 0 0; font-size: 12px; color: var(--yg-muted); line-height: 1.7; }
.yg-member-panel { min-width: 0; margin: 29px 0 0; border: 1px solid var(--yg-line); border-radius: 16px; background: #fff; overflow: hidden; scroll-margin-top: 20px; }
.yg-member-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 24px 25px 20px; }
.yg-member-heading h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.3; letter-spacing: -.65px; }
.yg-member-heading p:not(.yg-eyebrow) { margin: 0; font-size: 12px; color: var(--yg-muted); line-height: 1.6; }
.yg-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--yg-line); border-radius: 8px; font-size: 24px !important; color: var(--yg-muted); line-height: 1; }
.yg-search { display: block; padding: 0 25px; font-size: 12px; color: var(--yg-muted); }
.yg-search input { display: block; width: 100%; min-width: 0; margin-top: 7px; height: 43px; padding: 10px 12px; font-size: 13px; background: #fbfcfd; }
.yg-results { min-height: 16px; margin: 8px 25px 10px; color: var(--yg-muted); font-size: 11px; line-height: 1.5; }
.yg-students { list-style: none; margin: 0; padding: 0; }
.yg-students > li { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 0; margin: 0; padding: 19px 25px; border-top: 1px solid #edf0f3; }
.yg-student-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; min-width: 0; }
.yg-student-copy > strong { flex-basis: 100%; font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.yg-email { color: var(--yg-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.yg-level { display: inline-block; padding: 3px 7px; background: #f0f4ec; border-radius: 5px; color: #5b7252; font-size: 10px; line-height: 1.5; }
.yg-student-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 15px; flex-shrink: 0; }
.yg-student-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 8px 11px; border-radius: 8px; color: var(--blue); font-size: 12px; font-weight: 650; }
.yg-edit { border: 1px solid var(--yg-line); background: #fff; }
.yg-account { background: #f5f2f9; }
.yg-student-actions button:hover { background: #eee8f5; }
.yg-status { margin: 0 0 18px; padding: 13px 16px; border: 1px solid #d5e4cc; border-radius: 10px; background: #eff6e9; color: #4e6842; font-size: 13px; line-height: 1.6; }
.yg-status-error { border-color: #efd2c3; background: #fff4ed; color: #8a492e; }
.yg-empty { padding: 45px 25px; border: 1px solid var(--yg-line); border-radius: 14px; background: #fff; text-align: center; }
.yg-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 16px; border-radius: 15px; color: #698b59; background: #edf3e6; font-size: 29px; }
.yg-empty h1, .yg-empty h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.5px; }
.yg-empty p { max-width: 450px; margin: 0 auto; color: var(--yg-muted); font-size: 13px; line-height: 1.8; }
.yg-empty > button { margin-top: 19px; font-size: 13px; }
.yg-no-results { margin: 0; padding: 15px 25px 27px; font-size: 13px; line-height: 1.7; color: var(--yg-muted); }
.yg-loading { padding: 30px 0; color: var(--yg-muted); font-size: 13px; }
@media (max-width: 1100px) {
  .yg-heading { flex-direction: column; align-items: flex-start; gap: 17px; }
  .yg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yg-students > li { flex-direction: column; align-items: stretch; gap: 13px; }
  .yg-student-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .yg-toolbar { align-items: flex-start; padding: 13px 15px; gap: 10px; }
  .yg-toolbar p { padding-top: 5px; }
  .yg-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .yg-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 128px; padding: 17px; gap: 12px; }
  .yg-card-marker { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .yg-card-copy strong { font-size: 17px; }
  .yg-member-heading { padding: 21px 17px 17px; }
  .yg-member-heading h2 { font-size: 23px; }
  .yg-search { padding: 0 17px; }
  .yg-search input { font-size: 16px; }
  .yg-results { margin-left: 17px; margin-right: 17px; }
  .yg-students > li { padding: 18px 17px; }
  .yg-student-actions { gap: 9px; }
  .yg-student-actions button { flex: 1 1 135px; }
  .yg-no-results { padding-left: 17px; padding-right: 17px; }
}
@media (prefers-reduced-motion: reduce) { .year-groups * { scroll-behavior: auto !important; } }