:root {
  --ucla-blue: #2774ae;
  --ucla-dark-blue: #005587;
  --ucla-gold: #ffb300;
  --ink: #303030;
  --muted: #666;
  --rule: #d9e3ea;
}

body { color: var(--ink); font-family: "Fira Sans", sans-serif; }
h1 { color: var(--ucla-blue); font-size: 2.25rem; font-weight: 500; margin: 3rem 0 0; }
h2 { color: var(--ucla-blue); font-size: 1.75rem; font-weight: 500; margin: 2.1rem 0 .65rem; }
h3 { color: #777; font-size: 1.15rem; font-weight: 400; margin: .35rem 0 1.5rem; }
h4 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }
p, li { font-size: .97rem; line-height: 1.55; }
a { color: var(--ucla-blue); }
a:hover { color: #b87500; }
.muted { color: var(--muted); }
.development-banner { background: #fff1c9; border: 1px solid #e2b949; border-left: 5px solid var(--ucla-gold); border-radius: 4px; color: #5d4500; font-weight: 600; margin: 1.5rem 0 1rem; padding: .7rem .9rem; }

.meeting-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1.45fr; margin: 1rem 0 1.2rem; }
.meeting-card { border-left: 5px solid var(--ucla-blue); border-radius: 3px; box-shadow: 0 1px 5px rgba(0,0,0,.08); padding: .8rem 1rem; }
.discussion-card { background: #fff8e8; border-color: var(--ucla-gold); }
.meeting-card p { margin: 0; }
.meeting-label { color: var(--ucla-dark-blue); font-size: .76rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.meeting-note { color: var(--muted); font-size: .72rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.discussion-card .meeting-label { color: #8a6200; }

.schedule-key { display: flex; flex-wrap: wrap; gap: .75rem; margin: .85rem 0; }
.key-item { border-radius: 99px; font-size: .8rem; font-weight: 600; padding: .25rem .7rem; }
.lecture-key { background: #e8f2f9; color: var(--ucla-dark-blue); }
.discussion-key { background: #fff1c9; color: #785300; }
.schedule { border: 1px solid var(--rule); border-radius: 5px; margin-bottom: 1.5rem; overflow: hidden; }
.schedule-head, .schedule-week { display: grid; grid-template-columns: .4fr minmax(0, 1fr) .4fr minmax(0, 1fr) minmax(0, 1fr); }
.schedule-head { background: var(--ucla-dark-blue); color: white; font-size: .9rem; font-weight: 600; }
.schedule-head div { padding: .65rem .8rem; }
.schedule-head .discussion-heading { background: #9d7000; }
.schedule-head .filler-heading { background: #174d73; color: #b9d4e8; font-size: .68rem; padding-left: .25rem; padding-right: .25rem; text-align: center; }
.schedule-week { border-top: 1px solid var(--rule); position: relative; }
.week-label { background: #f3f6f8; border-bottom: 1px solid var(--rule); color: #516572; font-size: .76rem; font-weight: 700; grid-column: 1 / -1; letter-spacing: .04em; margin: 0; padding: .25rem .8rem; text-transform: uppercase; }
.schedule-filler { background: #f3f6f8; border-right: 1px solid var(--rule); }
.office-hours { align-items: center; background: #e8f2f9; color: var(--ucla-dark-blue); display: flex; justify-content: center; padding: .35rem .15rem; text-align: center; }
.office-hours p, .holiday-filler p { font-size: .68rem; line-height: 1.25; margin: 0; }
.holiday-filler { align-items: center; background: #f4f4f4; color: #707070; display: flex; justify-content: center; padding: .35rem .15rem; text-align: center; }
.schedule-item { border-right: 1px solid var(--rule); min-height: 100px; padding: .75rem .8rem; }
.schedule-item:last-child { border-right: 0; }
.schedule-item h4 { color: var(--ucla-dark-blue); }
.schedule-item p { font-size: .88rem; line-height: 1.35; margin: 0; }
.discussion-item { background: #fffaf0; }
.discussion-item h4 { color: #896000; }
.virtual-item { background: #f4effa; border-top: 3px solid #8265a7; }
.virtual-item h4 { color: #614b7e; }
.empty, .holiday { background: #f4f4f4; color: #707070; }
.holiday h4 { color: #707070; }

.grading-item { border-left: 4px solid var(--ucla-gold); margin: 1rem 0; padding: .2rem 0 .2rem 1rem; }
.grading-item h4 { color: var(--ucla-dark-blue); }
.grading-item p { margin-bottom: 0; }

@media (max-width: 650px) {
  h1 { font-size: 1.85rem; margin-top: 1.5rem; }
  .meeting-grid { grid-template-columns: 1fr; }
  .schedule { overflow-x: auto; }
  .schedule-head, .schedule-week { min-width: 760px; }
}