:root {
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:#283930;
  background:#f5f7f6;
  font-synthesis:none;
  --green:#487763;
  --muted:#89918c;
  --line:#e8ede9;
  --blue-bg:#e0eaf8;
  --blue-ink:#426fa9;
  --peach-bg:#f9e6d8;
  --peach-ink:#ad673b;
  --purple-bg:#e8e4f5;
  --purple-ink:#7961ac;
  --green-bg:#e4eedc;
  --green-ink:#64844f;
  --rose-bg:#f6e1e6;
  --rose-ink:#b5647b;
  --teal-bg:#dceee9;
  --teal-ink:#4c887c;
  --gold-bg:#f7edcf;
  --gold-ink:#987722;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,select {
  font:inherit;
}
button,a,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible,select:focus-visible {
  outline:3px solid #487763;
  outline-offset:4px;
}
a {
  color:inherit;
  text-decoration:none;
}
svg {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle;
}
[hidden] {
  display:none!important;
}
.page-shell {
  max-width:1512px;
  margin:auto;
  padding:36px 48px 40px;
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
h1 {
  font-size:32px;
  letter-spacing:1px;
  margin:0;
  font-weight:650;
  line-height:1.4;
}
.heading-dot {
  color:#71987d;
  padding-left:3px;
}
.term-meta {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:0;
}
.term-meta>span {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:#eaf0eb;
  color:#70937c;
  border-radius:12px;
}
.term-meta strong {
  display:block;
  font-size:12px;
  font-weight:500;
  color:#63766a;
}
.term-meta div>span {
  display:block;
  font-size:10px;
  color:#929e95;
  margin-top:7px;
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 314px;
  gap:24px;
  align-items:start;
}
.panel {
  background:white;
  border:1px solid #e4eae5;
  border-radius:18px;
  box-shadow:0 3px 12px #233e2d03;
}
.schedule-toolbar {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:19px 23px;
  border-bottom:1px solid var(--line);
}
.week-heading {
  display:flex;
  align-items:center;
  gap:10px;
}
.small-icon {
  color:#6c8976;
}
.small-icon svg {
  width:19px;
}
.week-heading h2 {
  font-size:18px;
  font-weight:650;
  margin:0;
}
.week-range {
  font-size:10px;
  letter-spacing:.6px;
  color:#94a096;
  display:block;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.current-badge {
  font-size:9px;
  color:#618572;
  background:#edf4ee;
  padding:3px 6px;
  border-radius:4px;
  align-self:flex-start;
  margin-top:2px;
}
.week-controls {
  display:flex;
  align-items:center;
  gap:12px;
}
.today-button {
  color:#789080;
  border:none;
  background:none;
  font-size:11px;
  padding:8px 2px;
  white-space:nowrap;
}
.today-button:hover {
  color:var(--green);
}
.week-stepper {
  display:flex;
  align-items:center;
  border:1px solid #e3e9e4;
  border-radius:9px;
  background:#fff;
  height:34px;
  overflow:hidden;
}
.icon-button {
  border:none;
  background:none;
  display:grid;
  place-items:center;
  width:30px;
  height:32px;
  color:#64786b;
}
.icon-button svg {
  width:13px;
  height:13px;
}
.icon-button:hover:enabled {
  background:#f1f5f1;
}
.icon-button:disabled {
  color:#cdd5cf;
}
.week-picker-wrap {
  display:flex;
  position:relative;
  align-items:center;
}
.week-picker-wrap select {
  appearance:none;
  border:none;
  background:transparent;
  padding:6px 17px 6px 7px;
  color:#65796d;
  font-size:11px;
  cursor:pointer;
  min-width:66px;
}
.week-picker-wrap>span {
  position:absolute;
  right:1px;
  pointer-events:none;
  color:#8c9b91;
}
.week-picker-wrap svg {
  width:13px;
  height:13px;
}
.timetable {
  display:grid;
  grid-template-columns:69px repeat(var(--days,5),minmax(0,1fr));
  grid-template-rows:62px repeat(12,45px);
  padding:0 15px 14px 10px;
  isolation:isolate;
  touch-action:pan-y;
}
.time-heading,.day-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#55655a;
}
.time-heading {
  font-size:10px;
  color:#a0aaa3;
  padding-top:14px;
}
.day-heading {
  flex-direction:column;
  gap:7px;
}
.day-heading strong {
  font-size:12px;
  font-weight:600;
}
.day-heading>span {
  font-size:10px;
  color:#99a29c;
  font-variant-numeric:tabular-nums;
  position:relative;
}
.day-heading.is-today strong {
  color:var(--green);
}
.day-heading.is-today>span {
  color:var(--green);
}
.day-heading i {
  position:absolute;
  white-space:nowrap;
  left:calc(100% + 4px);
  top:0;
  font-style:normal;
  font-size:8px;
  padding:1px 3px;
  border-radius:3px;
  background:#edf4ee;
  color:#5f806a;
}
.stripe {
  background:#f7f9f7;
}
.grid-cell {
  border-right:1px solid #f0f3f0;
}
.time-cell {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 7px 0 1px;
  color:#9ca59e;
  font-variant-numeric:tabular-nums;
}
.time-cell strong {
  font-size:11px;
  font-weight:500;
  min-width:12px;
  color:#849288;
}
.time-cell>span {
  font-size:10px;
  line-height:1.55;
}
.time-cell em {
  display:block;
  font-style:normal;
  color:#929c95;
  font-size:9px;
}
.color-blue {
  --course-bg:var(--blue-bg);
  --course-ink:var(--blue-ink);
}
.color-peach {
  --course-bg:var(--peach-bg);
  --course-ink:var(--peach-ink);
}
.color-purple {
  --course-bg:var(--purple-bg);
  --course-ink:var(--purple-ink);
}
.color-green {
  --course-bg:var(--green-bg);
  --course-ink:var(--green-ink);
}
.color-rose {
  --course-bg:var(--rose-bg);
  --course-ink:var(--rose-ink);
}
.color-teal {
  --course-bg:var(--teal-bg);
  --course-ink:var(--teal-ink);
}
.color-gold {
  --course-bg:var(--gold-bg);
  --course-ink:var(--gold-ink);
}
.course-card {
  z-index:1;
  min-width:0;
  margin:3px;
  background:var(--course-bg);
  color:var(--course-ink);
  border:1px solid transparent;
  border-radius:9px;
  text-align:left;
  padding:10px 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 3px #233e2d03;
}
.course-card:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 9px #283f3410;
}
.course-card.is-selected {
  border-color:var(--course-ink);
  box-shadow:inset 0 0 0 1px #ffffff8c,0 2px 5px #233e2d09;
}
.course-card>strong {
  font-size:14px;
  line-height:1.4;
  letter-spacing:.1px;
  font-weight:650;
}
.card-teacher {
  font-size:12px;
  line-height:1.4;
  margin-top:4px;
  opacity:.86;
}
.card-room {
  font-size:13px;
  display:flex;
  align-items:center;
  gap:3px;
  line-height:1.35;
  margin-top:auto;
  padding-top:3px;
  word-break:break-word;
  text-align:left;
  font-weight:500;
  max-width:100%;
  flex-shrink:0;
}
.card-room svg {
  width:12px;
  height:12px;
  opacity:.75;
}
.schedule-footer {
  min-height:49px;
  border-top:1px solid var(--line);
  margin:0 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#9aa49c;
  font-size:9px;
}
.schedule-footer>span {
  display:flex;
  align-items:center;
  gap:6px;
}
.footer-indicator {
  width:5px;
  height:5px;
  background:#a3b4a7;
  border-radius:50%;
}
.detail-card {
  padding:21px 20px 4px;
}
.detail-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.detail-topline h2 {
  font-size:13px;
  font-weight:600;
  margin:0;
}
.detail-topline>span {
  font-size:7px;
  letter-spacing:1.2px;
  color:#a7b0a9;
}
.course-intro {
  border-radius:12px;
  background:var(--course-bg);
  color:var(--course-ink);
  padding:17px;
  position:relative;
}
.course-intro-icon {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:#ffffff70;
  border-radius:9px;
}
.course-intro-icon svg {
  width:18px;
  height:18px;
}
.course-code {
  position:absolute;
  right:15px;
  top:21px;
  font-size:9px;
  letter-spacing:.7px;
  opacity:.7;
}
.course-intro h3 {
  font-size:22px;
  font-weight:650;
  margin:15px 0 13px;
  line-height:1.35;
  letter-spacing:.2px;
}
.course-meta {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:11px;
}
.course-meta>span {
  display:flex;
  gap:5px;
  align-items:center;
}
.course-meta>span+span {
  border-left:1px solid color-mix(in srgb,var(--course-ink) 20%,transparent);
  padding-left:13px;
}
.course-meta svg {
  width:12px;
  height:12px;
}
.detail-body {
  padding-top:23px;
}
.detail-section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  font-weight:550;
  color:#89978d;
  letter-spacing:.5px;
}
.detail-section-label>span {
  font-size:9px;
  background:#f2f5f2;
  padding:3px 7px;
  border-radius:4px;
  color:#82948a;
  font-weight:400;
}
.session-date,.session-time {
  display:flex;
  gap:10px;
  align-items:center;
}
.session-date {
  margin-top:15px;
}
.session-date>svg,.session-time>svg {
  width:15px;
  height:15px;
  color:#8e9b92;
}
.session-date strong {
  font-size:12px;
  font-weight:550;
}
.session-date strong>span {
  font-weight:400;
  color:#87958b;
  font-size:11px;
  margin-left:10px;
}
.session-time {
  margin-top:12px;
  font-size:11px;
  color:#65796b;
  font-variant-numeric:tabular-nums;
}
.session-time small {
  font-size:9px;
  color:#9ba69e;
  margin-left:10px;
}
.location-box {
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:11px;
  background:#f6f8f5;
  border:1px solid #edf0e9;
  border-radius:9px;
  padding:12px;
}
.location-box>svg {
  color:#819b83;
  width:17px;
  height:17px;
}
.location-box strong {
  font-size:16px;
  font-weight:600;
  color:#506f58;
}
.location-box div>span {
  font-size:9px;
  color:#94a08f;
  display:block;
  margin-top:4px;
}
.arrangements-heading {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.arrangements-heading h4 {
  font-size:11px;
  font-weight:550;
  margin:0;
  color:#74877a;
}
.arrangements-heading>span {
  font-size:9px;
  color:#a4afa6;
}
.arrangements {
  padding:15px 0 4px;
}
.arrangement {
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.arrangement-line {
  width:3px;
  flex-shrink:0;
  align-self:stretch;
  border-radius:2px;
  background:#e7ece6;
}
.arrangement.is-active .arrangement-line {
  background:#90a48c;
}
.arrangement>div {
  flex:1;
  min-width:0;
}
.arrangement-title {
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:center;
}
.arrangement-title strong {
  font-size:11px;
  font-weight:500;
  color:#66796c;
}
.arrangement-title>span {
  font-size:9px;
  color:#9aa59c;
}
.arrangement p {
  margin:5px 0 3px;
  font-size:13px;
  color:#748579;
}
.arrangement small {
  font-size:10px;
  color:#a7afa9;
}
.overview-card {
  margin-top:16px;
  padding:18px 20px 21px;
}
.overview-card h2 {
  font-size:11px;
  font-weight:550;
  margin:0;
  color:#75877a;
  display:flex;
  align-items:center;
  gap:7px;
}
.overview-card h2 svg {
  width:14px;
  height:14px;
  color:#8c9c8d;
}
.overview-numbers {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:20px 0 19px;
}
.overview-numbers>div {
  text-align:center;
}
.overview-numbers>div+div {
  border-left:1px solid #edf0eb;
}
.overview-numbers strong {
  font-size:24px;
  font-weight:500;
  letter-spacing:-.5px;
  color:#4a6553;
  font-variant-numeric:tabular-nums;
}
.overview-numbers small {
  font-size:9px;
  color:#99a49a;
  font-weight:400;
  margin-left:4px;
}
.overview-numbers div>span {
  display:block;
  font-size:9px;
  color:#a0aaa2;
  margin-top:6px;
}
.semester-progress {
  font-size:9px;
  display:flex;
  justify-content:space-between;
  color:#a0aa9f;
}
.progress-track {
  height:4px;
  border-radius:5px;
  background:#edf1eb;
  margin-top:9px;
  overflow:hidden;
}
.progress-track>span {
  display:block;
  height:100%;
  background:#9cb397;
  border-radius:5px;
  transition:width .2s;
}
.mobile-tabs {
  display:none;
}
.empty-detail {
  text-align:center;
  padding:50px 15px;
  color:#879a8c;
}
.empty-detail>svg {
  width:36px;
  height:36px;
}
.empty-detail h2 {
  font-size:16px;
}
.empty-detail p {
  font-size:12px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.noscript {
  text-align:center;
  padding:30px;
  color:#ad673b;
}
.card-room>span {
  min-width:0;
  overflow-wrap:anywhere;
}
.course-card>strong,.card-teacher {
  flex-shrink:0;
}
/* Keep the full timetable visible; use height to make room for larger type. */
@media(min-width:1550px) {
  .page-shell { padding-top:40px; }
  .timetable { grid-template-rows:66px repeat(12,49px); }
  .course-card { padding:12px; }
  .card-teacher { font-size:12px; }
}
@media(max-width:1200px) {
  .page-shell { padding:28px 28px 32px; }
  .workspace { grid-template-columns:minmax(0,1fr) 288px; gap:18px; }
  .schedule-toolbar { padding:17px; }
  .timetable {
    grid-template-columns:59px repeat(var(--days,5),minmax(0,1fr));
    padding-right:10px;
    padding-left:5px;
  }
  .course-card { padding:8px 7px; }
  .course-card>strong { font-size:12px; }
  .card-teacher { font-size:10px; }
  .card-room { font-size:12px; }
  .detail-card { padding:19px 17px 4px; }
  .schedule-footer { margin:0 17px; }
  .day-heading i { display:none; }
}
@media(max-width:1050px) {
  .workspace { display:block; }
  .details-panel { max-width:600px; margin:auto; }
  .workspace[data-view="timetable"] .details-panel { display:none; }
  .workspace[data-view="details"] .timetable-panel { display:none; }
  .page-heading { margin-bottom:22px; }
  .mobile-tabs {
    display:flex;
    gap:5px;
    background:#e9eee9;
    padding:4px;
    border-radius:11px;
    margin-bottom:18px;
    width:310px;
  }
  .mobile-tabs>button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:1;
    border:none;
    background:none;
    color:#78877c;
    font-size:14px;
    height:42px;
    border-radius:8px;
  }
  .mobile-tabs>button[aria-selected="true"] {
    background:#fff;
    color:#4d7157;
    box-shadow:0 1px 5px #2c49380a;
  }
  .mobile-tabs svg { width:16px; height:16px; }
  .week-heading h2 { font-size:20px; }
  .week-range { font-size:12px; }
  .today-button { font-size:13px; padding:8px 4px; }
  .week-stepper { height:38px; }
  .icon-button { height:36px; width:32px; }
  .week-picker-wrap select { font-size:13px; }
  .current-badge { font-size:11px; }
  .timetable {
    grid-template-columns:78px repeat(var(--days,5),minmax(0,1fr));
    grid-template-rows:64px repeat(12,59px);
  }
  .time-heading { font-size:12px; }
  .time-cell { gap:7px; }
  .time-cell strong { font-size:13px; }
  .time-cell>span,.time-cell em { font-size:12px; }
  .time-cell>span { color:#708176; }
  .day-heading strong { font-size:14px; }
  .day-heading>span { font-size:12px; }
  .course-card { padding:11px; }
  .course-card>strong { font-size:16px; }
  .card-teacher { font-size:13px; }
  .card-room { font-size:14px; }
  .schedule-footer { font-size:12px; color:#839188; }
  .detail-card { padding:22px 24px 8px; }
  .detail-topline h2 { font-size:15px; }
  .detail-topline>span { font-size:10px; letter-spacing:.7px; }
  .course-code { font-size:12px; }
  .details-panel .course-intro h3 { font-size:26px; }
  .course-meta { font-size:14px; }
  .course-meta svg { width:14px; height:14px; }
  .detail-section-label { font-size:13px; }
  .detail-section-label>span { font-size:12px; }
  .session-date strong { font-size:15px; }
  .session-date strong>span { font-size:14px; }
  .session-time { font-size:14px; }
  .session-time small { font-size:12px; }
  .location-box { padding:15px; }
  .location-box strong { font-size:18px; }
  .location-box div>span { font-size:13px; color:#7f8f7a; }
  .arrangements-heading h4 { font-size:14px; }
  .arrangements-heading>span { font-size:12px; }
  .arrangement-title strong { font-size:14px; }
  .arrangement p { font-size:14px; margin:6px 0 5px; }
  .arrangement small,.arrangement-title>span { font-size:12px; color:#87958b; }
  .arrangement { margin-bottom:20px; }
  .overview-card { padding:20px 24px; }
  .overview-card h2 { font-size:14px; }
  .overview-numbers strong { font-size:28px; }
  .overview-numbers small,.overview-numbers div>span,.semester-progress { font-size:12px; color:#829080; }
}
@media(min-width:601px) and (max-width:850px) {
  .timetable { grid-template-rows:64px repeat(12,74px); }
}
@media(max-width:600px) {
  .page-shell { padding:24px 12px 28px; }
  .page-heading { padding:0 5px; margin-bottom:20px; }
  h1 { font-size:30px; }
  .term-meta { display:none; }
  .mobile-tabs { width:100%; margin-bottom:16px; border-radius:10px; }
  .panel { border-radius:14px; }
  .schedule-toolbar { padding:15px 12px; min-height:79px; gap:8px; }
  .small-icon { display:none; }
  .week-heading { gap:6px; }
  .week-range { margin-top:5px; letter-spacing:.2px; }
  .week-controls { gap:8px; }
  .today-button { font-size:12px; padding:8px 2px; }
  .week-picker-wrap select { font-size:12px; min-width:60px; padding-left:5px; }
  .icon-button { width:28px; }
  .timetable {
    grid-template-columns:54px repeat(var(--days,5),minmax(0,1fr));
    grid-template-rows:60px repeat(12,66px);
    padding:0 5px 10px 3px;
  }
  .time-heading { padding-top:0; }
  .day-heading { gap:7px; }
  .day-heading strong { font-size:13px; }
  .day-heading>span { font-size:11px; }
  .time-cell { flex-direction:column; gap:5px; padding:0; }
  .time-cell strong { font-size:13px; font-weight:600; text-align:center; line-height:1.2; color:#667b6d; }
  .time-cell>span { font-size:12px; line-height:1.25; letter-spacing:0; text-align:center; }
  .time-cell em { display:block; font-size:12px; line-height:1.25; margin-top:2px; color:#8b978f; }
  .course-card { margin:2px; padding:9px 5px 8px; border-radius:8px; }
  .course-card>strong {
    font-size:clamp(.8125rem,3.2vw,.9375rem);
    line-height:1.4;
    letter-spacing:0;
    overflow-wrap:anywhere;
  }
  .card-teacher { font-size:12px; line-height:1.4; margin-top:6px; }
  .card-room { font-size:clamp(.75rem,3vw,.875rem); line-height:1.4; margin-top:8px; padding-top:0; }
  .card-room svg { display:none; }
  .schedule-footer { margin:0 12px; min-height:46px; font-size:11px; }
  .footer-indicator { width:4px; height:4px; }
  .detail-card { padding:20px 18px 6px; }
  .overview-card { padding:20px 18px; }
  .current-badge { font-size:10px; padding:2px 4px; }
  .day-heading.is-today strong { color:#487763; }
}
/* Preserve the original narrow-screen layout and shorten the course blocks modestly. */
@media(max-width:380px) {
  .page-shell { padding-left:9px; padding-right:9px; }
  .schedule-toolbar { flex-wrap:wrap; row-gap:12px; }
  .week-controls { width:100%; justify-content:space-between; }
  .timetable { grid-template-rows:60px repeat(12,76px); }
  .course-card { padding-left:4px; padding-right:4px; }
  .session-time>span { display:flex; flex-wrap:wrap; column-gap:10px; row-gap:4px; }
  .session-time small { margin-left:0; }
  .detail-topline>span { font-size:9px; }
  .arrangement-title { flex-wrap:wrap; }
}
@media(max-width:350px) {
  .timetable { grid-template-rows:60px repeat(12,88px); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; }
  .course-card:hover { transform:none; }
}