/* Subject pages reuse the university ranking styles; rules here only cover what those pages lack. */
.shared-filter-grid.subject-grid {
  grid-template-columns: 170px minmax(290px, 1.4fr) minmax(175px, .8fr) minmax(190px, .9fr) 170px 128px;
  gap: 12px;
}
.shared-filter-grid.subject-my-grid {
  grid-template-columns: 145px minmax(270px, 1.3fr) minmax(185px, .9fr) 145px 165px 145px 128px;
  gap: 10px;
}
.shared-filter-grid.subject-grid .btn-primary,
.shared-filter-grid.subject-my-grid .btn-primary { min-width: 128px; padding: 0 12px; grid-column: auto; }
.enhanced-select-group {
  display: block;
  padding: 10px 12px 4px;
  color: #697386;
  font-size: 12px;
  font-weight: 700;
}

.subject-weight-tabs { display: flex; gap: 10px; margin: 8px 0 20px; }
.subject-weight-tabs .btn { border-radius: 999px; min-width: 150px; }
.subject-weight-tabs .btn.active { background: linear-gradient(100deg, #087364, #2664e9); color: #fff; border: 0; }
.weights.subject-weights { max-height: none; overflow: visible; }
.subject-weights .weight-row { grid-template-columns: minmax(108px, 1fr) 104px 52px; }
.subject-weights .w-name { white-space: normal; }
.subject-weights .w-parts { display: block; margin-top: 4px; color: #697386; font-size: 11px; font-weight: 400; line-height: 1.5; }
.w-num-wrap { display: flex; align-items: center; gap: 6px; }
.w-num-wrap .w-num { width: 72px; }
.w-unit { color: #697386; font-size: 12px; }
.subject-weights-hint { color: #697386; font-size: 12px; margin: 14px 0 0; line-height: 1.6; }

.subject-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.subject-pair .card { padding: 20px; }
.subject-pair .label { color: #1b2740; font-weight: 700; }
.subject-pair .value { font-size: 30px; font-weight: 800; margin: 8px 0; color: #141d31; }
.subject-pair .note { color: #697386; font-size: 14px; }
.subject-pair .field input { width: 100%; box-sizing: border-box; border: 1px solid #d9e5f4; border-radius: 12px; padding: 13px 15px; font: inherit; color: #1b2740; background: #fff; }
.subject-select-card .subject-pair { margin-bottom: 4px; }
.subject-compare-card { padding: 22px; margin-top: 14px; }
.subject-radar { display: block; width: 100%; height: 400px; }
.detail-drawer .subject-radar { height: 310px; }
.yourank-radar-card .subject-radar { height: 430px; }

.subject-trend { display: block; width: 100%; height: auto; max-height: 260px; }
.subject-trend-table { width: 100%; margin-top: 10px; }
.subject-empty-panel { border: 1px solid #dce7f5; border-radius: 16px; background: #f8fbff; padding: 34px 20px; text-align: center; color: #697386; line-height: 1.7; }
.subject-message { padding: 24px; color: #68788d; background: #f8fbff; border: 1px solid #dfe9f5; border-radius: 12px; }

.subject-drawer-body { padding: 22px 24px 34px; }
.subject-drawer-body h3 { font-size: 18px; margin: 24px 0 12px; }
.subject-drawer-meta { color: #697386; line-height: 1.6; font-size: 14px; }
.subject-drawer-note { font-size: 13px; color: #697386; line-height: 1.5; }
.subject-metric-list { display: grid; gap: 8px; }
.subject-metric-list div { display: flex; justify-content: space-between; border-bottom: 1px solid #e5edf7; padding: 9px 0; }

.subject-catalog { display: block; }
.subject-catalog-summary { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.subject-catalog-summary span { background: #f4f8fe; border: 1px solid #dce7f5; border-radius: 999px; padding: 6px 10px; color: #34435a; font-size: 12px; font-weight: 700; }
.subject-catalog-gap { background: #f8fbff; border: 1px solid #dce7f5; border-radius: 12px; padding: 11px 13px; color: #4f5e73; font-size: 12px; line-height: 1.55; margin: 4px 0 12px; }
.subject-catalog-gap strong { color: #27364d; }
.subject-catalog-search { width: 100%; box-sizing: border-box; border: 1px solid #d9e5f4; border-radius: 10px; padding: 10px 12px; font: inherit; margin: 3px 0 8px; }
.subject-catalog-head,
.subject-catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 112px; gap: 8px; align-items: center; }
.subject-catalog-head { color: #697386; font-size: 12px; font-weight: 700; padding: 8px 7px; border-bottom: 1px solid #d9e5f4; }
.subject-catalog-row { padding: 11px 7px; border-bottom: 1px solid #e5edf7; font-size: 14px; }
.subject-catalog-row[hidden] { display: none; }
.subject-catalog-row .subject-name { min-width: 0; }
.subject-catalog-row .subject-name strong { display: block; color: #1b2740; }
.subject-catalog-row .subject-name small { display: block; color: #718096; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.subject-catalog-row .subject-name em { display: inline-block; margin-top: 4px; color: #526887; font-size: 11px; font-style: normal; }
.subject-catalog-row .rank { font-weight: 800; }
.subject-catalog-row .tier { font-weight: 800; border-radius: 999px; text-align: center; padding: 4px 7px; font-size: 12px; }
.subject-catalog-row.top5 .rank, .subject-catalog-row.top5 .tier { color: #8335bf; }
.subject-catalog-row.top10 .rank, .subject-catalog-row.top10 .tier { color: #125acb; }
.subject-catalog-row.top50 .rank, .subject-catalog-row.top50 .tier { color: #087669; }
.subject-catalog-row.top100 .rank, .subject-catalog-row.top100 .tier { color: #af6812; }
.subject-catalog-row.top5 .tier { background: #f4eafd; }
.subject-catalog-row.top10 .tier { background: #eaf1ff; }
.subject-catalog-row.top50 .tier { background: #e6f8f1; }
.subject-catalog-row.top100 .tier { background: #fff4df; }
.subject-catalog-row.pending .rank, .subject-catalog-row.pending .tier { color: #6d7788; }
.subject-catalog-row.pending .tier { background: #eef2f6; }

@media (max-width: 1100px) {
  .shared-filter-grid.subject-grid,
  .shared-filter-grid.subject-my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-filter-grid.subject-grid .btn-primary,
  .shared-filter-grid.subject-my-grid .btn-primary { justify-self: start; margin-top: 0; }
}
@media (max-width: 900px) {
  .subject-pair { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .shared-filter-grid.subject-grid,
  .shared-filter-grid.subject-my-grid { grid-template-columns: 1fr; }
  .subject-weight-tabs .btn { min-width: 0; flex: 1; }
  .subject-radar, .yourank-radar-card .subject-radar { height: 320px; }
}