:root {
  --bg: #f5f7f2;
  --surface: #ffffff;
  --ink: #17201b;
  --muted: #68736b;
  --line: #dfe5dc;
  --green: #2f6f4e;
  --green-soft: #e5f0e8;
  --blue: #285f82;
  --amber: #9a6b1f;
  --rose: #9b3f4b;
  --shadow: 0 18px 50px rgba(42, 56, 48, 0.12);
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans SC", "PingFang SC", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 247, 242, 0.94)),
    url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1800&q=80");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  gap: 22px;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.finder-panel,
.results-panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(223, 229, 220, 0.92);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.finder-panel {
  position: sticky;
  top: 22px;
  align-self: start;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

.finder-panel::-webkit-scrollbar {
  width: 10px;
}

.finder-panel::-webkit-scrollbar-thumb {
  background: #c6d2c9;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
}

.results-panel {
  min-height: calc(100vh - 56px);
  padding: 24px;
  overflow: hidden;
}

.user-dashboard {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #dbe6df;
  border-radius: 8px;
  background: #f8fbf8;
  min-width: 0;
  overflow: hidden;
}

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.dashboard-head h3 {
  margin: 0;
  font-size: 1.1rem;
}

#loginStatus {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.login-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.login-grid label {
  display: grid;
  gap: 6px;
  color: #3d4d42;
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 0;
}

.login-grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d9e2db;
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
}

.login-grid button,
.save-school-button,
.saved-list button {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.login-grid button {
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
}

.founder-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
  min-width: 0;
}

.founder-setup label {
  display: grid;
  gap: 6px;
  color: #6d4d15;
  font-size: 0.82rem;
  font-weight: 850;
  min-width: 0;
}

.founder-setup input {
  width: 100%;
  min-width: 0;
  border: 1px solid #dccda7;
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
}

.founder-setup button,
.lead-board button {
  border: 0;
  border-radius: 8px;
  background: #8a681e;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.founder-setup button {
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  white-space: nowrap;
}

.cooldown-status {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: -2px 0 0;
  padding: 8px 10px;
  border: 1px solid #dbe6df;
  border-radius: 8px;
  background: #fff;
  color: #496357;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cooldown-status.is-waiting {
  border-color: #eadfca;
  background: #fffaf0;
  color: #8a5a18;
}

.dashboard-fold,
.fold-panel {
  min-width: 0;
}

.dashboard-fold {
  border: 1px solid #e3ebe5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.dashboard-fold summary,
.fold-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.dashboard-fold summary::-webkit-details-marker,
.fold-panel summary::-webkit-details-marker {
  display: none;
}

.dashboard-fold summary::after,
.fold-panel summary::after {
  content: "展开";
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6f0;
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 850;
}

.dashboard-fold[open] summary::after,
.fold-panel[open] summary::after {
  content: "收起";
}

.dashboard-fold summary {
  padding: 12px;
  color: #26372d;
  font-size: 0.9rem;
  font-weight: 900;
}

.dashboard-fold[open] {
  padding-bottom: 12px;
}

.dashboard-fold[open] > :not(summary) {
  margin-right: 12px;
  margin-left: 12px;
}

.dashboard-fold[open] > :not(summary) + :not(summary) {
  margin-top: 10px;
}

.sync-note {
  margin: -4px 0 0;
  color: #607067;
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tracker-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.tracker-grid > div,
.service-binding,
.admin-panel,
.copyright-box {
  padding: 12px;
  border: 1px solid #e3ebe5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.tracker-grid strong,
.service-binding > strong,
.admin-panel > strong,
.copyright-box strong {
  display: block;
  margin-bottom: 8px;
  color: #223127;
  font-size: 0.9rem;
}

.saved-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.saved-list span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 8px;
  background: #eef6f0;
  color: #2c4c38;
  font-size: 0.78rem;
  font-weight: 800;
}

.saved-list span strong,
.saved-list span em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.saved-list span strong {
  grid-column: 1;
  color: #26372d;
}

.saved-list span em {
  grid-column: 1;
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.saved-list button {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 3px 7px;
  background: #486255;
  font-size: 0.72rem;
}

.saved-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.88rem;
}

.progress-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.progress-list label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

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

.binding-grid label {
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e3ebe5;
  border-radius: 8px;
  background: #fbfdfb;
  cursor: pointer;
}

.binding-grid label.is-bound {
  border-color: #b8d4c2;
  background: #eef7f0;
}

.binding-grid span {
  display: grid;
  gap: 3px;
}

.binding-grid strong {
  margin: 0;
  color: #26372d;
  font-size: 0.82rem;
}

.binding-grid em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
}

.admin-panel {
  border-color: #d8c99b;
  background: #fffaf0;
}

.admin-panel summary {
  color: #6d4d15;
}

.admin-panel.is-hidden {
  display: none;
}

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

.admin-grid div {
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-grid strong {
  margin: 0 0 5px;
  color: #6d4d15;
  font-size: 0.82rem;
}

.admin-grid p {
  margin: 0;
  color: #725f3c;
  font-size: 0.76rem;
  line-height: 1.4;
}

.lead-board {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.lead-board > strong {
  color: #6d4d15;
  font-size: 0.9rem;
}

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

.lead-board-content em {
  color: #725f3c;
  font-style: normal;
}

.lead-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.lead-card span {
  color: #8a681e;
  font-size: 0.74rem;
  font-weight: 850;
}

.lead-card strong {
  color: #3f2e10;
  font-size: 0.88rem;
}

.lead-card p {
  margin: 0;
  color: #725f3c;
  font-size: 0.76rem;
  line-height: 1.4;
}

.lead-board button {
  justify-self: start;
  padding: 9px 12px;
}

.copyright-box p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.save-school-button {
  justify-self: start;
  margin: -6px 0 2px;
  padding: 8px 11px;
  background: #285f82;
  font-size: 0.82rem;
}

.brand-row,
.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
}

h2 {
  margin-bottom: 0;
  font-size: 1.9rem;
}

.data-pill,
.score-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 800;
}

.score-summary {
  flex-direction: column;
  width: 76px;
  height: 58px;
  border-radius: 8px;
  background: #f8fbf9;
  color: var(--ink);
}

.score-summary strong {
  font-size: 1.35rem;
}

.score-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.profile-form {
  display: grid;
  gap: 18px;
}

.is-hidden {
  display: none !important;
}

.pre-university-group {
  display: grid;
  gap: 18px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.filter-fold {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.filter-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.filter-fold summary::-webkit-details-marker {
  display: none;
}

.filter-fold summary span {
  color: #26372d;
  font-size: 0.92rem;
  font-weight: 900;
}

.filter-fold summary small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.filter-fold summary::after {
  content: "展开";
  flex: 0 0 auto;
  border: 1px solid #d7e2da;
  border-radius: 999px;
  background: #fff;
  color: #2d7b54;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.filter-fold[open] {
  padding-bottom: 12px;
}

.filter-fold[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.filter-fold[open] summary::after {
  content: "收起";
  background: #2d7b54;
  color: #fff;
}

.filter-fold > .field-grid,
.filter-fold > .field-group,
.filter-fold > .range-row,
.filter-fold > .checkbox-grid {
  margin-right: 12px;
  margin-left: 12px;
}

.filter-fold > .field-grid + .field-grid,
.filter-fold > .field-grid + .field-group,
.filter-fold > .field-grid + .range-row,
.filter-fold > .field-group + .field-grid,
.filter-fold > .field-group + .range-row {
  margin-top: 14px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-group {
  display: grid;
  gap: 8px;
}

label {
  color: #334139;
  font-size: 0.9rem;
  font-weight: 750;
}

select,
input[type="search"],
input[type="range"] {
  width: 100%;
}

select,
input[type="search"] {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}

select:focus,
input[type="search"]:focus,
input[type="range"]:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 78, 0.14);
}

.range-row {
  display: grid;
  gap: 10px;
}

.range-row label {
  display: flex;
  justify-content: space-between;
}

#gpaValue {
  color: var(--green);
}

.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbf8;
  color: var(--muted);
  font-size: 0.9rem;
}

.action-row button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
}

.action-row button:hover {
  background: #255b3f;
}

.checkbox-grid {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #34433a;
  font-weight: 650;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.choice-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: #34433a;
  font-size: 0.86rem;
  font-weight: 700;
}

.recommendation-note {
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f6f9fc;
  color: #31516a;
  line-height: 1.55;
}

.search-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dce8de;
  border-radius: 8px;
  background: #fbfcfa;
}

.search-panel label {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.search-row button {
  min-height: 42px;
  border: 1px solid #cddde8;
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 850;
}

.search-row button:hover {
  background: #eef6fb;
}

.search-panel input::placeholder {
  color: #8a968d;
}

.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dce8de;
  border-radius: 8px;
  background: #f7fbf8;
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    transform 260ms ease;
}

.filter-summary.is-updating {
  border-color: #95b99f;
  background: #edf7ef;
  transform: translateY(-1px);
}

.filter-summary strong {
  display: block;
  margin-bottom: 4px;
  color: #203329;
}

.filter-summary span {
  color: var(--muted);
  font-size: 0.9rem;
}

.summary-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.summary-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #31516a;
  font-size: 0.78rem;
  font-weight: 750;
}

.results-list {
  display: grid;
  gap: 14px;
}

.school-card {
  display: grid;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.school-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.school-page-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.open-school-page {
  background: #285f82;
  color: #fff;
}

.back-school-list {
  display: none;
  background: #eef5f0;
  color: #2d7b54;
}

.school-list-mode .school-card > :not(.card-top):not(.school-page-actions) {
  display: none;
}

.school-list-mode .school-card {
  gap: 12px;
}

.school-page-mode .school-card {
  display: none;
}

.school-page-mode .school-card.is-open-page {
  display: grid;
}

.school-page-mode .school-card.is-open-page .school-page-actions {
  justify-content: flex-start;
  order: -1;
}

.school-page-mode .open-school-page {
  display: none;
}

.school-page-mode .back-school-list {
  display: inline-flex;
  align-items: center;
}

.card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
}

.school-card h3 {
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.meta-line {
  color: var(--muted);
  font-size: 0.92rem;
}

.match-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #edf5ef;
  color: var(--green);
  font-weight: 900;
}

.match-badge span {
  font-size: 0.72rem;
  line-height: 1;
}

.match-badge strong {
  font-size: 1rem;
}

.match-badge.fit-reach {
  background: #fff5df;
  color: var(--amber);
}

.match-badge.fit-gap {
  background: #fff0f1;
  color: var(--rose);
}

.path-badge {
  display: grid;
  place-items: center;
  min-width: 76px;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff5df;
  color: var(--amber);
  font-size: 0.86rem;
  font-weight: 900;
}

.pathway-card {
  border-color: #eadfca;
}

.program-match {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}

.program-match span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 850;
}

.program-match strong {
  color: #1f3548;
  font-size: 1rem;
  line-height: 1.45;
}

.program-selector {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
  overflow: hidden;
}

.program-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.program-selector-head::-webkit-details-marker {
  display: none;
}

.program-selector-head strong {
  display: block;
  color: #60430f;
}

.program-selector-head em {
  display: block;
  margin-top: 3px;
  color: #8a681e;
  font-size: 0.78rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1.4;
}

.program-selector-head b {
  flex: 0 0 auto;
  border: 1px solid #d7c59f;
  border-radius: 999px;
  background: #fff;
  color: #60430f;
  padding: 5px 10px;
  font-size: 0.74rem;
  line-height: 1;
}

.program-selector[open] .program-selector-head b {
  background: #60430f;
  color: #fff;
}

.program-selector[open] .program-selector-head b::before {
  content: "收起";
}

.program-selector[open] .program-selector-head b {
  font-size: 0;
}

.program-selector[open] .program-selector-head b::before {
  font-size: 0.74rem;
}

.program-selector-note {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.program-option-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 0 14px 14px;
}

.program-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.program-option span,
.program-option strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.program-option span {
  color: #8a681e;
  font-size: 0.74rem;
  font-weight: 850;
}

.program-option strong {
  grid-column: 1;
  color: #26372d;
  font-size: 0.9rem;
  line-height: 1.45;
}

.program-option div {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.program-option button,
.program-compare-grid button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: #8a681e;
  color: #fff;
  padding: 0 9px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.program-option button + button {
  background: #285f82;
}

.program-compare-box {
  display: grid;
  gap: 9px;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}

.program-compare-box > strong {
  color: #22536a;
}

.program-compare-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.program-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.program-compare-grid > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fff;
}

.program-compare-grid span {
  color: #285f82;
  font-size: 0.78rem;
  font-weight: 900;
}

.program-compare-grid strong {
  color: #203329;
  font-size: 0.88rem;
  line-height: 1.4;
}

.program-compare-grid em,
.program-compare-grid small {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
}

.official-links {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fbfdff;
}

.official-links > span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 850;
}

.official-links div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.official-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cddde8;
  border-radius: 999px;
  background: #fff;
  color: #285f82;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.official-links a:hover {
  border-color: #8ab0c7;
  background: #eef6fb;
}

.cost-location {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dce8de;
  border-radius: 8px;
  background: #f7fbf8;
}

.cost-location div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cost-location span {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
}

.cost-location strong {
  color: #223127;
  font-size: 0.92rem;
  line-height: 1.45;
}

.recognition-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}

.recognition-box > strong {
  color: var(--blue);
}

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

.recognition-grid span {
  padding: 8px 9px;
  border-radius: 6px;
  background: #fff;
  color: #31516a;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.4;
}

.recognition-box p {
  margin: 0;
  color: var(--rose);
  line-height: 1.5;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f5f1;
  color: #3a463d;
  font-size: 0.8rem;
  font-weight: 700;
}

.decision-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #e2eadf;
  border-radius: 8px;
  background: #f8fbf7;
}

.meter-row {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.meter-row span {
  color: #3c4a41;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.meter {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #dce5dd;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.salary-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}

.salary-box strong {
  color: #213f59;
}

.salary-box p {
  margin: 0;
  color: #31516a;
  line-height: 1.5;
}

.roadmap-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dce8de;
  border-radius: 8px;
  background: #f7fbf8;
}

.roadmap-box strong {
  color: var(--green);
}

.roadmap-box ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #3c4a41;
  line-height: 1.5;
}

.past-exam-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d9e3dd;
  border-radius: 8px;
  background: #f7fbf8;
}

.past-exam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.past-exam-head strong {
  color: var(--green);
}

.past-exam-head span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #486255;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.past-exam-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.past-exam-grid div {
  padding: 10px;
  border: 1px solid #e6eee8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.past-exam-grid span {
  display: block;
  margin-bottom: 6px;
  color: #496357;
  font-size: 0.76rem;
  font-weight: 800;
}

.past-exam-grid p,
.past-exam-caution {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.past-exam-grid ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.4;
}

.past-exam-caution {
  padding-top: 2px;
  color: #8a5a18;
  font-size: 0.88rem;
}

.learning-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e4eb;
  border-radius: 8px;
  background: #f5fbfd;
}

.learning-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.learning-head strong {
  color: #22536a;
}

.learning-head span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #3d6170;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

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

.learning-grid > div {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e3edf1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
}

.learning-grid strong {
  color: #223127;
  font-size: 0.9rem;
}

.course-plan {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid #d5e4eb;
  border-radius: 8px;
  background: #eef7fa;
}

.course-plan span {
  color: #4d6a76;
  font-size: 0.78rem;
  font-weight: 800;
}

.course-plan strong {
  color: #214b5d;
  line-height: 1.35;
}

.learning-grid ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.4;
}

.learning-grid p,
.learning-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.learning-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.learning-links a {
  padding: 5px 8px;
  border: 1px solid #d8e7ee;
  border-radius: 999px;
  background: #fff;
  color: #23546a;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

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

.lesson-card {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid #d9e8ee;
  border-radius: 8px;
  background: #fff;
}

.lesson-video {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 10px;
  background: #183647;
  color: #fff;
}

.lesson-video::before {
  content: "▶";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f4c542;
  color: #183647;
  font-size: 0.8rem;
  font-weight: 900;
}

.lesson-video span {
  color: #cce2eb;
  font-size: 0.72rem;
  font-weight: 850;
}

.lesson-video strong {
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
}

.lesson-body {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.lesson-body p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #4d5f67;
  font-size: 0.78rem;
  line-height: 1.35;
}

.lesson-body b {
  color: #245268;
  font-size: 0.72rem;
}

.learning-note {
  color: #5c6c73;
  font-size: 0.88rem;
}

.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mini-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  color: #31516a;
  font-size: 0.78rem;
  font-weight: 750;
}

.admission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.detail-fold {
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #f8fbf9;
  overflow: hidden;
}

.detail-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.detail-fold summary::-webkit-details-marker {
  display: none;
}

.detail-fold summary span {
  color: #21342a;
  font-size: 0.92rem;
  font-weight: 900;
}

.detail-fold summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.detail-fold summary::after {
  content: "展开";
  flex: 0 0 auto;
  border: 1px solid #cfe0d7;
  border-radius: 999px;
  background: #fff;
  color: #2d7b54;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.detail-fold[open] summary {
  border-bottom: 1px solid #dfe8ee;
}

.detail-fold[open] summary::after {
  content: "收起";
  background: #2d7b54;
  color: #fff;
}

.detail-fold-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

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

.info-block {
  padding: 12px;
  border-radius: 8px;
  background: #fbfcfa;
  border: 1px solid #edf1ea;
}

.highlight-block {
  background: #fffaf0;
  border-color: #eadfca;
}

.info-block strong {
  display: block;
  margin-bottom: 7px;
  color: #223127;
  font-size: 0.88rem;
}

.info-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.risk {
  color: var(--rose);
}

.condition {
  color: var(--amber);
}

.empty-state {
  padding: 36px;
  border: 1px dashed #c9d3ca;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    width: min(100% - 20px, 680px);
    padding: 10px 0;
  }

  .finder-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .results-panel {
    min-height: auto;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .admission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .past-exam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-grid {
    grid-template-columns: 1fr;
  }

  .lesson-grid {
    grid-template-columns: 1fr;
  }

  .decision-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-location {
    grid-template-columns: 1fr;
  }

  .recognition-grid {
    grid-template-columns: 1fr;
  }

  .login-grid,
  .founder-setup,
  .tracker-grid {
    grid-template-columns: 1fr;
  }

  .binding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-board-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .field-grid,
  .card-top {
    grid-template-columns: 1fr;
  }

  .brand-row,
  .results-head,
  .filter-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .score-summary {
    width: 100%;
  }

  .summary-tags {
    justify-content: flex-start;
  }

  .decision-strip {
    grid-template-columns: 1fr;
  }

  .admission-grid {
    grid-template-columns: 1fr;
  }

  .detail-fold summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-fold-grid {
    grid-template-columns: 1fr;
  }

  .past-exam-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .learning-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-card {
    grid-template-columns: 1fr;
  }

  .past-exam-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-head {
    align-items: stretch;
    flex-direction: column;
  }

  .progress-list {
    grid-template-columns: 1fr;
  }

  .binding-grid {
    grid-template-columns: 1fr;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .program-option {
    grid-template-columns: 1fr;
  }

  .program-selector-head {
    flex-direction: column;
  }

  .program-option div {
    grid-column: 1;
    grid-row: auto;
    flex-wrap: wrap;
  }

  .program-option button {
    flex: 1;
  }

  .program-compare-grid {
    grid-template-columns: 1fr;
  }
}