[hidden] { display: none !important; }
.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-dialog {
  max-width: min(540px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 22px 70px #0006;
  color: var(--ink);
  background: var(--paper);
}
.app-dialog::backdrop { background: #171411a8; backdrop-filter: blur(2px); }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.app-dialog .danger { border-color: #9a241b; }
.app-dialog p a { font-weight: 750; }
.section-links { display: flex; gap: 18px; flex-wrap: wrap; }
.group-summary { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding: 13px 0; color: var(--ink); text-decoration: none; }
.group-summary > div:last-child { display: grid; }
.group-summary span, .card-overview span { color: var(--muted); font-size: 14px; }
.card-overview { display: grid; }
.card-overview > a { display: grid; grid-template-columns: 1.25fr .8fr 1.5fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.card-overview > a > div { display: grid; align-content: start; }
.all-cards-scroll.is-scrollable { overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
.scorecard-group { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.scorecard-group h2, .scorecard-group p { margin: 0; }
.scorecard-group form { display: flex; align-items: end; gap: 10px; }
.password-admin { grid-template-columns: auto minmax(380px,1fr); }
.course-request-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.course-request-panel h2 { margin-top: 0; }
.course-request-panel input[type="file"] { width: 100%; }
.privacy-summary p a { font-weight: 750; }
.read-only-score:disabled { appearance: none; -webkit-appearance: none; border: 0; background: transparent !important; padding: 0; opacity: 1; color: var(--ink); cursor: default; }
.mode-toggle { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--cream); }
.mode-toggle button { padding: 8px 12px; }
.mode-toggle .active { background: var(--red); color: white; }
.course-ranking-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.course-ranking { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fbfdf9; }
.course-ranking h3 { margin: 0 0 12px; font-size: 21px; }
.course-ranking ol { margin: 0; padding-left: 24px; }
.course-ranking li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.course-ranking li::marker { font-weight: 750; }
.course-ranking li > span { display: inline-grid; }
.course-ranking li > b { float: right; }
.course-ranking small { color: var(--muted); }
@media (max-width: 700px) {
  .card-overview > a { grid-template-columns: 1fr; gap: 6px; }
  .section-links { gap: 10px; }
  .course-ranking-grid { grid-template-columns: 1fr; }
  .section-head:has(.mode-toggle) { align-items: flex-start; flex-direction: column; }
  .scorecard-group, .scorecard-group form { align-items: stretch; flex-direction: column; }
}
@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}