:root {
  --sidebar-width: 200px;
}

body.has-modal-open {
  overflow: hidden;
}

/* Scrim behind the mobile slide-in nav. Hidden on desktop (where the sidebar is
   a static column); the mobile @media block turns it on. It also captures taps
   to close the menu and stops the background from scrolling under the fixed
   overlay — on iOS Safari that background scroll detaches fixed elements and
   garbles the layout (Android keeps fixed elements stable, so it never showed
   there). */
.sidebar-backdrop {
  display: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 14px 18px;
  background: var(--sidebar-brand);
  border-right: 1px solid var(--sidebar-brand-deep);
  color: white;
  transition: width 180ms ease, padding 180ms ease;
}

.brand-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-height);
  margin: 0 -14px;
  padding: 0 14px;
  background: var(--brand);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-ui);
  color: white;
  background: transparent;
  font-weight: 800;
  letter-spacing: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

.brand-block strong,
.brand-block span {
  display: block;
}

.brand-block > div:not(.brand-mark) {
  min-width: 0;
}

.brand-block span,
.section-label,
.card-meta,
.result-count,
.form-note,
.notification-item span,
.log-row span {
  color: var(--muted);
  font-size: 12px;
}

.brand-block strong {
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}

.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 2;
  transform: translateY(-50%);
  width: 22px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-ui);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1;
  opacity: 0.52;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  opacity: 1;
}

.brand-block span,
.sidebar .section-label {
  color: rgba(255, 255, 255, 0.74);
}

.brand-block span {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
}

.nav-list,
.board-list,
.followed-tags {
  display: grid;
  gap: 4px;
}

.nav-list {
  padding-top: 2px;
}

.nav-item,
.board-link,
.tag-link,
.admin-link {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.nav-item > span:first-child {
  width: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  font-size: 13px;
}

.nav-item:hover,
.board-link:hover,
.tag-link:hover,
.admin-link:hover,
.sort-button:hover,
.tab-pill:hover,
.card-actions button:hover,
.detail-actions button:hover,
.comment-actions button:hover {
  background: var(--surface-muted);
}

.nav-item.is-active,
.board-link.is-active,
.tag-link.is-active,
.tab-pill.is-active,
.sort-button.is-active,
.admin-tabs .is-active {
  background: var(--brand-weak);
  color: var(--brand);
}

.sidebar .nav-item.is-active,
.sidebar .board-link.is-active,
.sidebar .tag-link.is-active {
  background: white;
  color: var(--sidebar-brand);
  box-shadow: none;
  font-weight: 800;
}

.sidebar .nav-item:hover,
.sidebar .board-link:hover,
.sidebar .tag-link:hover,
.sidebar .admin-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.sidebar-section,
.tag-follow-section {
  min-height: 0;
}

.tag-follow-section {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.followed-tag-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 0 0 10px;
}

.followed-tag-head .section-label {
  margin: 0;
}

.tag-link {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: var(--radius-ui);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.followed-tag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 5px;
  align-items: center;
}

.followed-tag-row .tag-link {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag-remove-button,
.followed-tag-add button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
  font-weight: 900;
  line-height: 1;
}

.tag-remove-button:hover,
.followed-tag-add button:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Keep the remove (×) discreet: hidden until the tag row is hovered or a control
   inside it is focused. Its 26px column stays reserved so nothing shifts. */
.tag-remove-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.followed-tag-row:hover .tag-remove-button,
.followed-tag-row:focus-within .tag-remove-button {
  opacity: 1;
  pointer-events: auto;
}

.followed-tag-add {
  display: grid;
  grid-template-columns: 22px 0fr;
  gap: 3px;
  width: 22px;
  margin: 6px 0 0;
  padding-left: 10px;
  transition: width 140ms ease, grid-template-columns 140ms ease;
}

.followed-tag-add:hover,
.followed-tag-add:focus-within {
  grid-template-columns: 22px minmax(0, 1fr);
  width: 132px;
}

.followed-tag-add input {
  width: 100%;
  min-width: 0;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-ui);
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, padding 140ms ease;
}

.followed-tag-add:hover input,
.followed-tag-add:focus-within input {
  padding: 0 7px;
  opacity: 1;
  pointer-events: auto;
}

.followed-tag-add input::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

.followed-tag-add button {
  width: 22px;
  height: 22px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.section-label {
  margin: 0 0 8px 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.board-link {
  justify-content: space-between;
}

.admin-link {
  margin-top: auto;
  color: white;
  font-weight: 700;
}

body.is-sidebar-collapsed {
  --sidebar-width: 78px;
}

.sidebar.is-collapsed {
  align-items: center;
  padding: 14px 9px;
}

.sidebar.is-collapsed .brand-block {
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

.sidebar.is-collapsed .brand-block div:not(.brand-mark),
.sidebar.is-collapsed .nav-item span:last-child,
.sidebar.is-collapsed .section-label,
.sidebar.is-collapsed .tag-follow-section,
.sidebar.is-collapsed .admin-link {
  display: none;
}

.sidebar.is-collapsed .nav-item {
  justify-content: center;
  width: 44px;
}

.sidebar.is-collapsed .sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
  width: 22px;
  height: 34px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.16);
}

.sidebar.is-collapsed .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

body.is-faculty-view .sidebar {
  background: #101725;
  border-right-color: #0a0f19;
}

body.is-faculty-view .brand-block,
body.is-faculty-view .topbar {
  background: #101725;
}

body.is-faculty-view .topbar {
  border-bottom-color: #0a0f19;
}

.topbar {
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  z-index: 20;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 28px;
  background: var(--brand);
  border-bottom: 1px solid var(--brand-deep);
  /* No backdrop-filter: the background is opaque so a blur is never visible,
     yet a fixed bar re-blurring everything scrolled under it costs a repaint
     every frame — a major source of scroll jank. */
  transition: inset 180ms ease;
}

.search-shell {
  position: absolute;
  left: calc(50vw - var(--sidebar-width) + 72px);
  transform: translateX(-50%);
  width: min(620px, calc(100% - 360px));
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.96);
}

.search-shell:focus-within {
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: var(--focus);
}

.search-shell.is-faculty-search:focus-within {
  border-color: color-mix(in srgb, var(--topbar-search-theme, var(--brand)) 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--topbar-search-theme, var(--brand)) 24%, transparent);
}

.search-shell input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.topbar-subject-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  border: 1px solid #d8e0ec;
  border-radius: var(--radius-card);
  padding: 7px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 11, 52, 0.18);
}

.topbar-subject-suggestions button {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 3px 10px;
  border: 0;
  border-radius: var(--radius-ui);
  padding: 10px;
  background: transparent;
  color: #0e1947;
  text-align: left;
}

.topbar-subject-suggestions button:hover,
.topbar-subject-suggestions button:focus-visible {
  background: color-mix(in srgb, var(--topbar-search-theme, var(--brand)) 14%, #f5f8fc);
}

.topbar-subject-suggestions strong {
  grid-row: span 2;
  align-self: center;
  color: #0e1947;
  font-size: 13px;
  font-weight: 950;
}

.topbar-subject-suggestions span {
  overflow: hidden;
  color: #111111;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-subject-suggestions em,
.topbar-subject-empty {
  overflow: hidden;
  color: #657186;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-subject-empty {
  padding: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-auth-skeleton {
  width: 110px;
  height: 32px;
  border-radius: var(--radius-ui);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12));
  background-size: 180% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lang-switch button {
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-ui);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lang-switch button.is-active {
  border-color: #ffffff;
  background: #ffffff;
  color: #00164b;
}

.ghost-button,
.primary-button,
.icon-button,
.profile-chip,
.sort-button,
.tab-pill,
.card-actions button,
.detail-actions button,
.comment-actions button,
.admin-tabs button,
.admin-actions button,
.admin-row button {
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--text);
}

.ghost-button,
.primary-button {
  min-height: 32px;
  padding: 0 12px;
  font-weight: 700;
}

.primary-button {
  background: var(--brand);
  color: white;
}

.topbar .ghost-button,
.topbar .icon-button {
  color: white;
}

.topbar .icon-button {
  font-size: 14px;
}

.topbar .ghost-button {
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.topbar .ghost-button {
  height: 32px;
  font-size: 13px;
}

.topbar .ghost-button:hover,
.topbar .icon-button:hover {
  background: rgba(255, 255, 255, 0.13);
}

.icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  /* iOS Safari keeps the native push-button appearance even when a background is
     set, and that native chrome ignores grid centering — the glyph (e.g. the "+"
     publish button) renders off-centre/crooked. Chromium (Android) drops native
     styling once display is set, so it only shows there. Reset it explicitly. */
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  line-height: 1;
  font-size: 19px;
}

.notification-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.bell-icon {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 10px;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: rgba(255, 255, 255, 0.14);
  color: white;
}

.avatar {
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-ui);
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-bright));
  color: white;
  font-weight: 800;
  letter-spacing: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center;
}

.avatar-small {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.avatar-normal {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.avatar-large {
  width: 82px;
  height: 82px;
  font-size: 24px;
}

.avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.avatar-button:hover {
  background: transparent;
}

.avatar-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 3px;
}

.thread-author-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.thread-author-button:hover {
  color: #0e1947;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.main-content {
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 12px) 24px 48px;
  transition: margin-left 180ms ease;
}

.feed-top-row {
  position: sticky;
  top: var(--topbar-height);
  z-index: 12;
  display: grid;
  grid-template-columns: 260px minmax(720px, 860px) 260px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.feed-tool-rail {
  justify-self: end;
}

.board-tabs {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  width: 100%;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  /* Opaque, no blur: this bar is sticky, so a backdrop blur re-computed on every
     scroll frame is expensive for a barely-visible effect. */
  background: #ffffff;
  scrollbar-width: none;
}

.board-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-pill,
.sort-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-ui);
  font-size: 13px;
}

.feed-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 42px;
  height: 42px;
  margin: 0;
  color: var(--text);
  font-size: initial;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-hero h1 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.profile-hero p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
}

.feed-layout {
  display: grid;
  grid-template-columns: 260px minmax(720px, 860px) 260px;
  justify-content: center;
  align-items: start;
  gap: 12px;
  margin-top: 0;
}

.feed-column {
  min-width: 0;
  grid-column: 2;
}

.sort-menu {
  position: relative;
}

.sort-menu summary {
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 0;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.sort-menu summary::-webkit-details-marker {
  display: none;
}

.sort-menu summary::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--brand) 0 0) left top / 5px 5px no-repeat,
    linear-gradient(var(--brand) 0 0) right top / 5px 5px no-repeat,
    linear-gradient(var(--brand) 0 0) left bottom / 5px 5px no-repeat,
    linear-gradient(var(--brand) 0 0) right bottom / 5px 5px no-repeat;
}

.sort-popover {
  position: absolute;
  top: 48px;
  left: 0;
  z-index: 15;
  width: 118px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.sort-popover .sort-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.sort-menu:not([open]) .sort-popover {
  display: none;
}

.result-count {
  display: none;
}

.masonry-feed {
  max-width: 860px;
  margin: 0 auto;
  column-count: initial;
  column-gap: 0;
  border: 1px solid #d5d5d5;
  border-radius: var(--radius-ui);
  background: #ffffff;
  overflow: hidden;
}

.feed-sidebar {
  position: sticky;
  grid-column: 3;
  top: calc(var(--topbar-height) + 58px);
  display: grid;
  gap: 14px;
  /* Cap the sticky sidebar to the viewport and let it scroll internally. Without
     this, opening the "add date" form grows the sidebar past the viewport and, being
     sticky-pinned, its lower content (校园活动 + the save button) becomes unreachable. */
  max-height: calc(100vh - var(--topbar-height) - 74px); /* fallback */
  max-height: calc(100dvh - var(--topbar-height) - 74px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Keep it scrollable (so opening the add-date form doesn't hide content) but
     hide the scrollbar itself. */
  scrollbar-width: none;
}

.feed-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.calendar-sidebar-block {
  display: grid;
  gap: 6px;
}

/* Publish button mirrors the four-squares filter button on the opposite side
   of the tab row: same box treatment/height, hugging the tabs from the right
   (justify-self: start) just as .feed-tool-rail hugs them from the left. */
.feed-create-rail {
  justify-self: start;
}

.feed-create-button {
  height: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
}

.feed-create-button:hover,
.feed-create-button:focus-visible {
  border-color: var(--brand);
}

.feed-hot-rail {
  position: sticky;
  grid-column: 1;
  top: calc(var(--topbar-height) + 58px);
  width: 100%;
  min-width: 0;
}

.side-widget {
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
  padding: 14px 14px 16px;
}

.hot-posts-widget h2,
.events-widget h2 {
  margin: 0 0 12px;
  color: #0e1947;
  font-size: 15px;
  font-weight: 800;
}

.calendar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-title-row h2 {
  margin: 0;
  color: #0e1947;
  font-size: 15px;
  font-weight: 800;
}

.calendar-title-row a {
  color: var(--brand);
  font-size: 11px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feed-hot-rail .hot-posts-widget {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 14px 14px 16px;
  background: #ffffff;
}

.widget-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.widget-title-row h2 {
  margin: 0;
}

.widget-title-row button {
  border: 0;
  border-radius: var(--radius-ui);
  background: #f0f3f8;
  color: #0e1947;
  font-size: 12px;
  font-weight: 800;
}

.hot-post-list {
  display: grid;
  gap: 0;
}

.hot-post-list.is-loading {
  gap: 10px;
  padding-top: 10px;
}

.hot-post-skeleton {
  display: block;
  height: 58px;
  border-radius: var(--radius-ui);
  background: linear-gradient(90deg, #eef2f8, #f8fafc, #eef2f8);
  background-size: 180% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.hot-post-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid #e8ebf1;
  background: transparent;
  color: #0e1947;
  text-align: left;
}

.hot-post-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.hot-post-copy small,
.hot-post-copy em {
  overflow: hidden;
  color: #737c8d;
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hot-post-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #0e1947;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hot-post-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce2ed;
  border-radius: var(--radius-ui);
  background: #eef2f8;
}

.hot-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-post-initial {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

/* Text-only hot post (normal post, no photo): drop the empty thumb column. */
.hot-post-item.is-textonly {
  grid-template-columns: minmax(0, 1fr);
}

.hot-post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: #526079;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Course-review promo card below the hot-posts widget. */
.course-review-promo {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border: 1px solid #d9e0ec;
  background:
    linear-gradient(135deg, rgba(240, 244, 250, 0.92), rgba(255, 255, 255, 0.98)),
    #ffffff;
  color: #0e1947;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.course-review-promo:hover,
.course-review-promo:focus-visible {
  transform: translateY(-2px);
  border-color: #9fb1d0;
  box-shadow: 0 12px 26px rgba(14, 25, 71, 0.12);
}

.course-review-promo .promo-badge {
  position: relative;
  justify-self: start;
  padding: 3px 7px;
  border-radius: var(--radius-ui);
  background: #eef3fb;
  color: #30405f;
  font-size: 11px;
  font-weight: 900;
}

.course-review-promo strong {
  position: relative;
  color: #0e1947;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}

.course-review-promo p {
  position: relative;
  margin: 0;
  color: #59677d;
  font-size: 12px;
  line-height: 1.55;
}

.course-review-promo .promo-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-ui);
  border: 1px solid #cfd9ea;
  background: #ffffff;
  color: #0e2d6f;
  font-size: 13px;
  font-weight: 850;
}

.course-review-promo .promo-cta::after {
  content: "→";
}

.course-review-promo:hover .promo-cta,
.course-review-promo:focus-visible .promo-cta {
  border-color: #a9b9d6;
  background: #eef4ff;
}

.events-widget {
  display: grid;
  gap: 8px;
}

.events-stack-widget {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.events-stack-list {
  display: grid;
  gap: 0;
}

.events-stack-list .events-widget {
  position: relative;
  padding: 10px 12px 10px;
  border-top: 1px solid #e9edf4;
}

.events-stack-list .events-widget h2 {
  margin: 0;
}

.events-stack-list .events-widget::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 82%);
}

.events-day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  border-top: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
}

.events-day-nav-shared {
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #e9edf4;
  border-radius: 0;
  background: #ffffff;
}

.events-day-label {
  color: #0e1947;
  font-size: 12px;
  font-weight: 800;
}

.events-day-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #0e1947;
  font-size: 15px;
  cursor: pointer;
}

.events-day-arrow:hover:not(:disabled) {
  background: #f0f4fb;
  border-color: #00164b;
}

.events-day-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.events-day-list {
  display: grid;
  gap: 6px;
  max-height: 279px;
  overflow-y: auto;
  padding: 0 0 2px;
  scrollbar-width: none;
}

.events-day-list::-webkit-scrollbar {
  display: none;
}

.event-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 4px 3px;
  border-radius: var(--radius-ui);
  color: #0e1947;
  text-decoration: none;
}

.event-link:hover,
.event-link:focus-visible {
  background: #f6f9fd;
}

.event-tag {
  justify-self: start;
  max-width: 100%;
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 5px;
  border: 1px solid #dce5f1;
  border-radius: 5px;
  background: #f6f8fc;
  color: #64728a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.event-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-ui);
  border: 1px solid #d5dbe8;
  background-color: #eef2f8;
  background-size: cover;
  background-position: center;
}

.event-thumb-stone {
  background-image: linear-gradient(120deg, #b8d6f2 0 40%, #f6f1e8 40% 62%, #7d8eb4 62% 100%);
}

.event-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.event-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.24;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.event-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-link:hover .event-copy strong,
.event-link:focus-visible .event-copy strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.events-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.calendar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-head strong {
  color: var(--brand);
  font-size: 14px;
}

.calendar-head span {
  color: var(--muted);
  font-size: 12px;
}

.calendar-widget {
  padding-bottom: 10px;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-month-nav strong {
  min-width: 0;
  flex: 1;
  padding: 5px 10px;
  border-radius: var(--radius-ui);
  background: #f3f5f9;
  color: var(--brand);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.calendar-month-nav button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #dce2ed;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.calendar-month-nav button:hover,
.calendar-month-nav button:focus-visible {
  border-color: var(--brand);
  background: var(--brand-weak);
}

.calendar-week,
.calendar-row {
  display: grid;
  grid-template-columns: 16px repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.calendar-week {
  padding: 10px 0 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.calendar-grid {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}

.calendar-row {
  align-items: center;
  position: relative;
}

.calendar-day {
  min-height: 27px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: var(--radius-ui);
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}

.calendar-day b {
  position: relative;
  z-index: 3;
  line-height: 1;
}

.calendar-week-label {
  min-height: 25px;
  align-self: center;
  justify-self: end;
  padding-right: 1px;
  color: #6f8794;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.calendar-grid .is-muted {
  color: #a7adb7;
}

.calendar-grid .is-today {
  background: var(--brand);
  color: #ffffff;
}

.calendar-grid .has-event.is-deadline:not(.is-today) {
  background: #fff4f4;
}

.calendar-grid .has-event.is-break:not(.is-today) {
  background: #fff8e9;
}

.calendar-grid .has-event.is-exam:not(.is-today) {
  background: #f4f5ff;
}

.calendar-grid .has-event.is-result:not(.is-today) {
  background: #eef3ff;
}

.calendar-grid .has-event.is-orientation:not(.is-today) {
  background: #eaf7fa;
}

.calendar-grid .has-event.is-term:not(.is-today) {
  background: #eef9f2;
}

.calendar-grid .has-event.is-timetable-plan:not(.is-today) {
  background: #eef6f8;
}

.calendar-grid .has-event.is-timetable-preference:not(.is-today) {
  background: #f4f8ef;
}

.calendar-grid .has-event.is-timetable-creation:not(.is-today) {
  background: #fff8e8;
}

.calendar-grid .has-event.is-timetable-review:not(.is-today) {
  background: #f5f3ff;
}

.calendar-grid .has-event.is-custom:not(.is-today) {
  background: #f1f6ff;
}

.calendar-grid .has-event.tone-deadline:not(.is-today) {
  background: #ffe8e8;
}

.calendar-grid .has-event.tone-census:not(.is-today) {
  background: #efe9ff;
}

.calendar-grid .has-event.tone-results:not(.is-today) {
  background: #edf1ff;
}

.calendar-grid .has-event.tone-orientation:not(.is-today) {
  background: #e7f8f8;
}

.calendar-grid .has-event.tone-break:not(.is-today) {
  background: #fff0df;
}

.calendar-grid .has-event.tone-exam:not(.is-today) {
  background: #f3ebff;
}

.calendar-grid .has-event.tone-custom:not(.is-today) {
  background: #eef4ff;
}

.calendar-row-bars {
  position: absolute;
  left: 18px;
  right: 2px;
  bottom: 1px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 3px;
  gap: 0;
  pointer-events: none;
}

.calendar-range-bar {
  min-width: 0;
  border-radius: 0;
  pointer-events: auto;
}

.calendar-range-bar:first-child {
  border-radius: 999px 0 0 999px;
}

.calendar-range-bar:last-child {
  border-radius: 0 999px 999px 0;
}

.calendar-range-bar.is-deadline {
  background: #f0b9b9;
}

.calendar-range-bar.is-break {
  background: #ead49c;
}

.calendar-range-bar.is-exam {
  background: #c9cef4;
}

.calendar-range-bar.is-result {
  background: #c9d4f1;
}

.calendar-range-bar.is-orientation {
  background: #b9dbe2;
}

.calendar-range-bar.is-term {
  background: #bfdec9;
}

.calendar-range-bar.is-timetable-plan {
  background: #b9d4dc;
}

.calendar-range-bar.is-timetable-preference {
  background: #cfe0b9;
}

.calendar-range-bar.is-timetable-creation {
  background: #ead49c;
}

.calendar-range-bar.is-timetable-review {
  background: #cdc7ec;
}

.calendar-range-bar.is-custom {
  background: #b9cbe8;
}

.calendar-range-bar.tone-deadline {
  background: #e76f6f;
}

.calendar-range-bar.tone-census {
  background: #9277e8;
}

.calendar-range-bar.tone-results {
  background: #7185d6;
}

.calendar-range-bar.tone-career {
  background: #d6e2d8;
}

.calendar-range-bar.tone-plan {
  background: #56acd0;
}

.calendar-range-bar.tone-preference {
  background: #caa934;
}

.calendar-range-bar.tone-create {
  background: #dc8740;
}

.calendar-range-bar.tone-orientation {
  background: #44b8b5;
}

.calendar-range-bar.tone-break {
  background: #d08b46;
}

.calendar-range-bar.tone-exam {
  background: #9f82dd;
}

.calendar-range-bar.tone-custom {
  background: #5f8fd8;
}

.calendar-custom-form button {
  border: 1px solid #dce2ed;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}

.calendar-custom-form {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid #dfe6f1;
  border-radius: var(--radius-ui);
  background: #fbfcff;
}

.calendar-custom-form label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #536176;
  font-size: 10px;
  font-weight: 850;
}

.calendar-custom-form input,
.calendar-custom-form select {
  min-width: 0;
  height: 29px;
  padding: 0 8px;
  border: 1px solid #d9e0eb;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}

.calendar-custom-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.calendar-custom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-custom-head span {
  color: #0e1947;
  font-size: 12px;
  font-weight: 850;
}

.calendar-custom-close {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-ui);
  background: rgba(14, 25, 71, 0.06);
  color: #536176;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.calendar-custom-close:hover {
  background: rgba(14, 25, 71, 0.12);
  color: #0e1947;
}

.calendar-color-field {
  display: grid;
  gap: 5px;
  color: #536176;
  font-size: 10px;
  font-weight: 850;
}

.calendar-color-row {
  display: flex;
  gap: 9px;
  padding-top: 1px;
}

.calendar-color-swatch {
  position: relative;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.calendar-color-swatch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.calendar-color-swatch span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(14, 25, 71, 0.1);
}

.calendar-color-swatch input:checked + span,
.calendar-color-swatch input:focus-visible + span {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swatch);
}

/* User-picked colours for custom calendar dates (row tint + date-badge tint). */
.calendar-key-date-row.cal-c-blue { border-color: #cdd9f4; background: #eef3ff; }
.cal-c-blue .calendar-date-badge { background: #dfe8ff; }
.calendar-key-date-row.cal-c-green { border-color: #cde9d8; background: #eefaf2; }
.cal-c-green .calendar-date-badge { background: #e0f5e8; }
.calendar-key-date-row.cal-c-amber { border-color: #ecdcb4; background: #fdf7ea; }
.cal-c-amber .calendar-date-badge { background: #fbeecb; }
.calendar-key-date-row.cal-c-orange { border-color: #f2d3bf; background: #fdf2ec; }
.cal-c-orange .calendar-date-badge { background: #fbe2d3; }
.calendar-key-date-row.cal-c-red { border-color: #eecdd1; background: #fdf1f2; }
.cal-c-red .calendar-date-badge { background: #fbdfe2; }
.calendar-key-date-row.cal-c-purple { border-color: #ddd4f2; background: #f5f2fd; }
.cal-c-purple .calendar-date-badge { background: #e9e2fb; }

.calendar-custom-form button {
  min-height: 30px;
  margin-top: 1px;
}

.calendar-key-dates {
  display: grid;
  gap: 6px;
  margin-top: 5px;
  padding: 5px 0 0;
  border-top: 1px solid rgba(14, 25, 71, 0.08);
}

.calendar-key-dates a,
.calendar-key-date-row,
.calendar-key-dates > span {
  display: grid;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  padding: 2px 6px;
  border: 1px solid #e1e6ef;
  border-radius: var(--radius-ui);
  background: #fafbfe;
  color: #0e1947;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.18;
  text-decoration: none;
}

.calendar-key-dates a,
.calendar-key-dates > span {
  grid-template-columns: 58px minmax(0, 1fr);
}

.calendar-key-date-row {
  position: relative;
  grid-template-columns: 58px minmax(0, 1fr);
  padding-right: 24px;
  overflow: hidden;
}

.calendar-key-date-main {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}

.calendar-key-dates .calendar-key-date-main:hover,
.calendar-key-dates .calendar-key-date-main:focus-visible {
  background: transparent;
}

.calendar-key-dates a:hover,
.calendar-key-date-row:hover {
  border-color: #b9c5d6;
  background: #ffffff;
}

.calendar-key-date-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(14, 25, 71, 0.08);
  color: rgba(14, 25, 71, 0.58);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

.calendar-key-date-row:hover .calendar-key-date-delete,
.calendar-key-date-row:focus-within .calendar-key-date-delete {
  opacity: 1;
}

.calendar-key-date-delete:hover,
.calendar-key-date-delete:focus-visible {
  border-color: #cbd5e1;
  background: #ffffff;
  color: var(--brand);
}

.calendar-date-badge {
  width: 50px;
  min-height: 23px;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: #0e1947;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

.calendar-date-badge small {
  color: #5f6d81;
  font-size: 9px;
  font-weight: 850;
}

.calendar-date-range-text {
  width: 50px;
  min-height: 23px;
  justify-self: center;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  color: #0e1947;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.calendar-date-range-text small {
  display: block;
  width: 100%;
  color: #5f6d81;
  font-size: 9px;
  font-weight: 850;
}

.calendar-date-range-text strong {
  display: block;
  width: 100%;
}

.calendar-key-dates a.is-deadline,
.calendar-key-date-row.is-deadline {
  border-color: #edd2d5;
  background: #fff6f6;
}

.calendar-key-dates .is-deadline .calendar-date-badge {
  background: #fff4f4;
}

.calendar-key-dates a.is-break,
.calendar-key-date-row.is-break {
  border-color: #eadbb4;
  background: #fffaf0;
}

.calendar-key-dates .is-break .calendar-date-badge {
  background: #fff8e9;
}

.calendar-key-dates a.is-exam,
.calendar-key-date-row.is-exam {
  border-color: #d7dcf2;
  background: #f6f7ff;
}

.calendar-key-dates .is-exam .calendar-date-badge {
  background: #f4f5ff;
}

.calendar-key-dates a.is-result,
.calendar-key-date-row.is-result {
  border-color: #d6ddf1;
  background: #f5f7ff;
}

.calendar-key-dates .is-result .calendar-date-badge {
  background: #eef3ff;
}

.calendar-key-dates a.is-orientation,
.calendar-key-date-row.is-orientation {
  border-color: #cfe9ee;
  background: #f2fbfd;
}

.calendar-key-dates .is-orientation .calendar-date-badge {
  background: #eaf7fa;
}

.calendar-key-dates a.is-term,
.calendar-key-date-row.is-term {
  border-color: #d4eadc;
  background: #f3fbf6;
}

.calendar-key-dates .is-term .calendar-date-badge {
  background: #eef9f2;
}

.calendar-key-dates a.is-timetable-plan,
.calendar-key-date-row.is-timetable-plan {
  border-color: #cfe3e9;
  background: #f5fbfc;
}

.calendar-key-dates .is-timetable-plan .calendar-date-badge {
  background: #eef6f8;
}

.calendar-key-dates a.is-timetable-preference,
.calendar-key-date-row.is-timetable-preference {
  border-color: #dae8ca;
  background: #f8fbf4;
}

.calendar-key-dates .is-timetable-preference .calendar-date-badge {
  background: #f4f8ef;
}

.calendar-key-dates a.is-timetable-creation,
.calendar-key-date-row.is-timetable-creation {
  border-color: #eadbb4;
  background: #fffaf0;
}

.calendar-key-dates .is-timetable-creation .calendar-date-badge {
  background: #fff8e8;
}

.calendar-key-dates a.is-timetable-review,
.calendar-key-date-row.is-timetable-review {
  border-color: #dedbf4;
  background: #f8f7ff;
}

.calendar-key-dates .is-timetable-review .calendar-date-badge {
  background: #f5f3ff;
}

.calendar-key-dates a.is-custom,
.calendar-key-date-row.is-custom {
  border-color: #cfdcf2;
  background: #f7faff;
}

.calendar-key-dates .is-custom .calendar-date-badge {
  background: #f1f6ff;
}

.calendar-key-dates a.tone-deadline,
.calendar-key-date-row.tone-deadline {
  border-color: #efb7b7;
  background: #fff1f1;
}

.calendar-key-dates .tone-deadline .calendar-date-badge,
.calendar-key-dates .tone-deadline .calendar-date-range-text {
  background: #ffe8e8;
}

.calendar-key-dates a.tone-census,
.calendar-key-date-row.tone-census {
  border-color: #c7b6f5;
  background: #f5f1ff;
}

.calendar-key-dates .tone-census .calendar-date-badge,
.calendar-key-dates .tone-census .calendar-date-range-text {
  background: #efe9ff;
}

.calendar-key-dates a.tone-career,
.calendar-key-date-row.tone-career {
  border-color: #9bdcac;
  background: #f0fbf3;
}

.calendar-key-dates .tone-career .calendar-date-badge,
.calendar-key-dates .tone-career .calendar-date-range-text {
  background: #e4f8e9;
}

.calendar-key-dates a.tone-plan,
.calendar-key-date-row.tone-plan {
  border-color: #91cfe9;
  background: #f0faff;
}

.calendar-key-dates .tone-plan .calendar-date-badge,
.calendar-key-dates .tone-plan .calendar-date-range-text {
  background: #e4f5ff;
}

.calendar-key-dates a.tone-preference,
.calendar-key-date-row.tone-preference {
  border-color: #dcc46a;
  background: #fff9df;
}

.calendar-key-dates .tone-preference .calendar-date-badge,
.calendar-key-dates .tone-preference .calendar-date-range-text {
  background: #fff3bf;
}

.calendar-key-dates a.tone-results,
.calendar-key-date-row.tone-results {
  border-color: #a9b5eb;
  background: #f1f4ff;
}

.calendar-key-dates .tone-results .calendar-date-badge,
.calendar-key-dates .tone-results .calendar-date-range-text {
  background: #e7ecff;
}

.calendar-key-dates a.tone-orientation,
.calendar-key-date-row.tone-orientation {
  border-color: #89d8d5;
  background: #eefafa;
}

.calendar-key-dates .tone-orientation .calendar-date-badge,
.calendar-key-dates .tone-orientation .calendar-date-range-text {
  background: #ddf5f4;
}

.calendar-key-dates a.tone-create,
.calendar-key-date-row.tone-create {
  border-color: #e9b579;
  background: #fff3e7;
}

.calendar-key-dates .tone-create .calendar-date-badge,
.calendar-key-dates .tone-create .calendar-date-range-text {
  background: #ffe8cd;
}

.calendar-key-dates a.tone-break,
.calendar-key-date-row.tone-break {
  border-color: #e3ca8a;
  background: #fff9ea;
}

.calendar-key-dates .tone-break .calendar-date-badge,
.calendar-key-dates .tone-break .calendar-date-range-text {
  background: #fff0c7;
}

.calendar-key-dates a.tone-exam,
.calendar-key-date-row.tone-exam {
  border-color: #bca9e8;
  background: #f6f1ff;
}

.calendar-key-dates .tone-exam .calendar-date-badge,
.calendar-key-dates .tone-exam .calendar-date-range-text {
  background: #eee6ff;
}

.calendar-key-dates a.tone-custom,
.calendar-key-date-row.tone-custom {
  border-color: #a9bee9;
  background: #f2f6ff;
}

.calendar-key-dates .tone-custom .calendar-date-badge,
.calendar-key-dates .tone-custom .calendar-date-range-text {
  background: #e7efff;
}

.calendar-key-dates .calendar-key-date-row .calendar-date-badge,
.calendar-key-dates .calendar-key-date-row .calendar-date-range-text {
  background: transparent;
}

.calendar-key-dates time {
  color: var(--brand);
  font-weight: 900;
}

.calendar-add-bottom {
  display: grid;
  justify-items: center;
  gap: 2px;
  position: relative;
  height: 0;
  margin: 0;
  padding: 0;
}

/* When the add-date form is open it must occupy real height (the "+" button is
   absolutely positioned, so the container is 0-height by default). Otherwise the
   form overflows the zero-height box and overlaps the events list below it. */
.calendar-add-bottom.is-editing {
  height: auto;
  justify-items: stretch;
  margin-top: 8px;
}

.calendar-add-subtle {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 25, 71, 0.06);
  color: rgba(14, 25, 71, 0.42);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.42;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

.calendar-widget:hover .calendar-add-subtle,
.calendar-widget:focus-within .calendar-add-subtle {
  opacity: 1;
}

.calendar-add-subtle:hover,
.calendar-add-subtle:focus-visible {
  background: rgba(14, 25, 71, 0.1);
  color: rgba(14, 25, 71, 0.72);
}

.calendar-add-message {
  display: none;
}

.post-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 20px 24px 18px;
  break-inside: avoid;
  border-radius: 0;
  border-bottom: 1px solid #d5d5d5;
  background: transparent;
  overflow: hidden;
  transition:
    background 160ms ease;
  content-visibility: auto;
  contain-intrinsic-size: 360px;
}

.post-card:hover {
  background: transparent;
}

.post-card:last-child {
  border-bottom: 0;
}

.thread-avatar {
  padding-top: 2px;
}

.thread-avatar .avatar {
  border: 1px solid #d5d5d5;
  border-radius: 1000px;
  background: #f2f2f2;
  color: #20242c;
}

.is-hidden-post {
  opacity: 0.62;
}

.media-strip {
  position: relative;
  /* Full content width so more than ~3 images are visible before scrolling, and
     the right edge lines up with the review score box (both bounded by the card
     content padding). */
  width: 100%;
  margin-top: 14px;
}

.media-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}

.media-track::-webkit-scrollbar {
  display: none;
}

.post-media {
  width: 150px;
  height: 112px;
  flex: 0 0 150px;
  display: block;
  border: 1px solid #d5d5d5;
  border-radius: var(--radius-ui);
  object-fit: cover;
  object-position: center;
  background: #efefef;
  scroll-snap-align: start;
  cursor: zoom-in;
}

/* Full-screen image lightbox */
.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: rgba(8, 12, 20, 0.92);
  overscroll-behavior: contain;
}

.media-viewer-stage {
  grid-column: 2;
  margin: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  min-width: 0;
}

.media-viewer-stage img {
  max-width: min(92vw, 1120px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #0b0f18;
}

.media-viewer-count {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.media-viewer-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.media-viewer-nav {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.media-viewer-prev {
  grid-column: 1;
}

.media-viewer-next {
  grid-column: 3;
}

.media-viewer-close:hover,
.media-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 640px) {
  .media-viewer {
    padding: 12px;
    gap: 4px;
  }
  .media-viewer-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
}

.media-nav {
  display: none;
}

.media-prev {
  left: 0;
}

.media-next {
  right: 0;
}

.text-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background:
    radial-gradient(circle at 80% 16%, rgba(0, 32, 91, 0.14), transparent 30%),
    linear-gradient(135deg, #f9fafc, #e9efff);
}

.text-art span {
  color: #969696;
  font-size: 12px;
  font-weight: 700;
}

.text-art strong {
  color: var(--brand);
  font-size: 26px;
  line-height: 1;
}

.post-card-body {
  position: relative;
  padding: 0;
  /* Grid item: without min-width:0 the automatic minimum size lets the media
     carousel (a flex overflow-x:auto track of fixed-width thumbnails) balloon
     this body past its 338px track. The card's overflow-x:hidden then clips the
     right side — posts with images looked cut off on mobile. min-width:0 pins the
     body to the track so the carousel scrolls internally instead. */
  min-width: 0;
}

.card-top-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-time,
.card-top-actions .flag {
  white-space: nowrap;
}

.post-more-menu {
  position: relative;
}

.post-more-menu summary {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  list-style: none;
  line-height: 1;
}

.post-more-menu summary::-webkit-details-marker {
  display: none;
}

.card-top-actions button {
  min-height: 30px;
  border: 0;
  border-radius: var(--radius-ui);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.post-more-menu summary:hover,
.card-top-actions button:hover {
  background: var(--surface-muted);
  color: #385898;
}

.post-more-popover {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 12;
  min-width: 84px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(12, 19, 36, 0.12);
}

.post-more-popover button {
  width: 100%;
  justify-content: flex-start;
  padding: 0 10px;
  text-align: left;
}

.thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  /* Only the top author/board row needs to clear the absolutely-positioned
     time + ••• menu; the title/body/review below use the full card width. */
  padding-right: 132px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.thread-meta strong {
  color: #000000;
  font-weight: 600;
}

.verified-dot {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 1000px;
  background: #385898;
  color: white;
  font-size: 10px;
  line-height: 1;
}

.post-flags,
.tag-row,
.translation-meta,
.card-actions,
.detail-actions,
.comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.translation-meta {
  justify-content: flex-end;
  width: 100%;
  gap: 6px;
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
}

.translation-meta button {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.translation-meta button:hover {
  color: #0e1947;
}

.translation-meta.is-loading {
  color: #8a94a6;
}

.flag,
.tag-row span,
.edited {
  border-radius: var(--radius-ui);
  padding: 2px 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.flag.danger {
  color: var(--danger);
  background: #fff0f2;
}

.post-card h2 {
  margin: 7px 0 6px;
  overflow: visible;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
  color: #0e1947;
}

.post-card p {
  display: block;
  margin: 0 0 12px;
  overflow: visible;
  color: #000000;
  font-size: 16px;
  line-height: 1.55;
}

/* Feed "展开全文 / 收起" toggle. The collapse only engages on narrow screens;
   on desktop the body stays fully expanded and this toggle is hidden (the
   mobile @media block below flips it on and clamps the collapsed text). */
.post-expand-toggle {
  display: none;
  margin: -6px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 10px;
}

.card-actions {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 10px;
}

.card-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.post-time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.media-strip + .tag-row {
  margin-top: 12px;
}

.card-actions button,
.detail-actions button,
.comment-actions button {
  min-height: 30px;
  padding: 0;
  color: #000000;
}

.post-action-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303642;
  font-size: 14px;
  line-height: 1;
}

.post-action-button:hover {
  color: #000000;
}

.action-icon {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-icon-send {
  width: 20px;
  height: 20px;
}

.post-action-button span {
  color: #303642;
  font-size: 13px;
  line-height: 1;
}

.card-actions button:hover,
.detail-actions button:hover,
.comment-actions button:hover {
  color: #0e1947;
  background: transparent;
}

.card-actions .is-active,
.detail-actions .is-active {
  color: #303642;
  background: transparent;
}

.card-actions .is-active .action-icon,
.detail-actions .is-active .action-icon {
  fill: #0e1947;
  stroke: #0e1947;
}

.card-actions .is-active span,
.detail-actions .is-active span {
  color: #303642;
}

.empty-state,
.load-state {
  max-width: 720px;
  margin: 24px auto;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

.empty-state span,
.load-state p {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

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

.skeleton-grid span {
  height: 70px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #eef1f6, #f8f9fc, #eef1f6);
}

.skeleton-grid span:nth-child(2) {
  height: 96px;
}

.skeleton-grid span:nth-child(3) {
  height: 118px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 23, 33, 0.34);
  overscroll-behavior: contain;
}

.modal-card,
.drawer-card {
  width: min(560px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  border-radius: 16px;
  background: var(--surface);
}

.modal-wide {
  width: min(720px, 100%);
}

.create-modal {
  width: min(900px, calc(100vw - 40px));
  overflow: auto;
}

/* Keep the publish button pinned to the bottom of the (scrolling) modal so it is
   always reachable, even on short screens where the form overflows. */
.create-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 8px -18px -18px;
  padding: 14px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.create-submit-button {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.detail-modal,
.admin-modal {
  width: min(980px, 100%);
}

.detail-modal {
  width: min(1080px, calc(100vw - 48px));
  max-height: min(88vh, 960px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #f7f9fc;
}

.detail-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.auth-modal {
  width: min(880px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(330px, 1fr);
  overflow: hidden;
  border: 1px solid #d8e1ef;
  background: #ffffff;
  color: #0e1947;
  box-shadow: 0 24px 70px rgba(5, 14, 34, 0.22);
}

.auth-register-modal {
  width: min(940px, calc(100vw - 32px));
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
  background: #f6f8fc;
}

.auth-info-panel,
.auth-form-panel,
.auth-register-profile-panel {
  min-width: 0;
  padding: 34px;
}

.auth-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  border-right: 1px solid #d8e1ef;
  background: #071a33;
}

.auth-register-profile-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  border-right: 1px solid #d8e1ef;
  background: #eef4fb;
  color: #0e1947;
}

.auth-register-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-register-panel-heading div {
  display: grid;
  gap: 3px;
}

.auth-register-panel-heading span {
  color: #647084;
  font-size: 12px;
  font-weight: 850;
}

.auth-register-panel-heading strong {
  color: #0e1947;
  font-size: 22px;
  line-height: 1.2;
}

.auth-register-preview-card,
.auth-register-edit-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d8e1ef;
  border-radius: var(--radius-card);
  background: #ffffff;
}

.auth-register-preview-card {
  align-items: center;
  justify-items: center;
  text-align: center;
}

.auth-register-preview-card strong {
  display: block;
  color: #0e1947;
  font-size: 18px;
}

.auth-register-preview-card span {
  color: #647084;
  font-size: 12px;
  font-weight: 800;
}

.auth-register-edit-card {
  gap: 12px;
}

.auth-avatar-dropzone {
  display: grid;
  gap: 8px;
  align-items: center;
  border: 1px dashed #a9b8cc;
  border-radius: var(--radius-card);
  padding: 12px;
  background: #f8fafc;
  color: #0e1947;
  cursor: pointer;
}

.auth-avatar-dropzone:hover,
.auth-avatar-dropzone:focus-within {
  border-color: #00164b;
  background: #f8fafc;
}

.auth-avatar-preview {
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-ui);
  background: #00164b;
  color: #ffffff;
  font-size: 36px;
  font-weight: 950;
}

.auth-avatar-preview-large {
  width: 128px;
  font-size: 42px;
}

.auth-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

.auth-avatar-copy {
  display: grid;
  gap: 6px;
}

.auth-avatar-copy strong {
  color: #0e1947;
  font-size: 16px;
}

.auth-avatar-copy small,
.auth-register-profile-panel label {
  color: #5f6b7c;
  line-height: 1.5;
}

.auth-register-edit-card > label:not(.auth-avatar-dropzone):not(.auth-avatar-range) {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-register-profile-panel input:not([type="range"]):not([type="file"]),
.auth-register-profile-panel select {
  width: 100%;
  border: 1px solid #d8e1ef;
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: #f8fafc;
  color: #0e1947;
  font: inherit;
}

.auth-register-profile-panel input:not([type="range"]):not([type="file"]):focus,
.auth-register-profile-panel select:focus {
  border-color: #00164b;
  box-shadow: 0 0 0 3px rgba(0, 22, 75, 0.12);
  outline: none;
}

.auth-register-profile-panel input::placeholder {
  color: #8a95a8;
}

/* Square drag-to-crop avatar stage (replaces the old zoom slider). */
.avatar-crop-stage {
  position: relative;
  width: 148px;
  height: 148px;
  overflow: hidden;
  border-radius: var(--radius-ui);
  background: #0e1947;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.avatar-crop-stage.is-dragging {
  cursor: grabbing;
}

.avatar-crop-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center;
  pointer-events: none;
}

.avatar-crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-ui);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.avatar-crop-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.auth-avatar-range {
  display: grid;
  gap: 8px;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.auth-code-row label {
  min-width: 0;
}

.auth-code-row input {
  width: 100%;
}

.auth-send-code-button {
  height: 42px;
  min-height: 0;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #e7edfb;
  color: #00164b;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-send-code-button:hover,
.auth-send-code-button:focus-visible {
  background: #00164b;
  color: #ffffff;
}

.auth-send-code-button:disabled {
  cursor: not-allowed;
  background: #eef1f6;
  color: #94a0b4;
}

.auth-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 900;
}

.auth-info-panel h2 {
  max-width: 360px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-info-panel p {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
}

.auth-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-proof-list span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-ui);
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.auth-info-panel .auth-small-note {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: #f4f7fb;
  color: #0e1947;
}

.auth-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 0;
}

.auth-modal-top.is-close-only {
  justify-content: flex-end;
}

.auth-modal-top h2 {
  margin: 0;
  color: #0e1947;
  font-size: 22px;
}

.auth-modal .icon-button {
  color: #0e1947;
}

.auth-form {
  padding: 20px;
  border: 1px solid #dfe6f1;
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(14, 25, 71, 0.08);
}

.auth-form p,
.auth-modal .form-note {
  color: #5f6b7c;
  line-height: 1.5;
}

.auth-form label {
  color: #344054;
}

.auth-form input {
  border: 1px solid #d8e1ef;
  background: #f8fafc;
  color: #0e1947;
}

.auth-form input:focus {
  border-color: #00164b;
  box-shadow: 0 0 0 3px rgba(0, 22, 75, 0.12);
}

.auth-form input::placeholder {
  color: #8a95a8;
}

.auth-modal .primary-button {
  min-height: 46px;
  justify-content: center;
  border-color: #00164b;
  background: #00164b;
  color: #ffffff;
}

.auth-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #00164b;
  text-align: left;
  font-weight: 850;
}

.auth-link-button:hover,
.auth-link-button:focus-visible {
  color: #000b34;
  text-decoration: underline;
}

/* Third-party (Google / Discord) sign-in */
.auth-oauth {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8a95a8;
  font-size: 12px;
  font-weight: 800;
}

.auth-oauth-divider::before,
.auth-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dfe6f1;
}

.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid #d8e1ef;
  background: #ffffff;
  color: #1f2733;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.oauth-button:hover,
.oauth-button:focus-visible {
  background: #f4f7fb;
  border-color: #b9c6db;
}

.oauth-button .oauth-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.oauth-button.oauth-discord {
  border-color: #5865f2;
  background: #5865f2;
  color: #ffffff;
}

.oauth-button.oauth-discord:hover,
.oauth-button.oauth-discord:focus-visible {
  background: #4752c4;
  border-color: #4752c4;
}

.auth-modal .success-state {
  padding: 18px;
  border: 1px solid #dfe6f1;
  border-radius: var(--radius-card);
  background: #ffffff;
  color: #5f6b7c;
}

.auth-modal .success-state strong {
  color: #0e1947;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.drawer-card {
  position: fixed;
  top: 80px;
  right: 22px;
  width: min(420px, calc(100vw - 32px));
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.stack-form,
.profile-editor {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.create-modal .stack-form {
  gap: 16px;
  padding: 18px;
  background: #f7f9fc;
}

.create-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.create-type-tabs button {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  padding: 10px;
  background: #ffffff;
  color: #0e1947;
  text-align: left;
}

.create-type-tabs button strong {
  font-size: 14px;
  font-weight: 950;
}

.create-type-tabs button span {
  color: #647084;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.create-type-tabs button:hover,
.create-type-tabs button.is-active {
  border-color: #0e1947;
  background: #0e1947;
  color: #ffffff;
}

.create-type-tabs button:hover span,
.create-type-tabs button.is-active span {
  color: rgba(255, 255, 255, 0.74);
}

.create-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

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

.create-rating-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.media-upload-entry {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed #b9c3d3;
  border-radius: var(--radius-ui);
  background: #f8fafc;
}

.media-upload-entry span {
  color: #647084;
  font-size: 12px;
  font-weight: 750;
}

.media-upload-entry .media-upload-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.media-preview-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #eef2f8;
}

.media-preview-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.media-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 25, 71, 0.74);
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.media-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.media-upload-entry .media-add-button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.media-add-button span {
  padding: 6px 12px;
  border: 1px solid #b9c3d3;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #0e1947;
  font-size: 13px;
  font-weight: 800;
}

.media-add-button:hover span {
  border-color: #0e1947;
  background: #eef3fb;
}

/* Votable poll inside a post */
.post-poll {
  display: grid;
  gap: 8px;
  margin: 6px 0 12px;
}

.post-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d5dbe8;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #0e1947;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.post-poll-option:hover {
  border-color: #0e1947;
}

.post-poll.is-voted .post-poll-option::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--poll-pct, 0%);
  background: color-mix(in srgb, var(--brand) 16%, #eef3fb);
  z-index: 0;
}

.post-poll-option.is-mine {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.post-poll-label,
.post-poll-pct {
  position: relative;
  z-index: 1;
}

.post-poll-pct {
  font-weight: 900;
  color: #385898;
}

.post-poll-meta {
  color: #647084;
  font-size: 12px;
  font-weight: 700;
}

.create-submit-button {
  min-height: 42px;
  font-weight: 900;
}

.stack-form label,
.profile-editor label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.stack-form input,
.stack-form select,
.stack-form textarea,
.profile-editor input,
.profile-editor select,
.profile-editor textarea,
.admin-actions select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: #fff;
  color: var(--text);
}

.form-note {
  margin: 0;
}

.edit-post-modal .stack-form {
  gap: 14px;
}

.edit-post-metrics {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.edit-post-note {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.edit-post-modal textarea {
  resize: vertical;
  min-height: 170px;
  line-height: 1.6;
  font: inherit;
}

.edit-post-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.error-text {
  color: var(--danger);
  margin: 0;
}

.success-text,
.success-state strong {
  color: var(--brand);
}

.success-state {
  padding: 18px;
}

.settings-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.settings-body section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.settings-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.settings-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.detail-post {
  display: grid;
  gap: 16px;
  padding: 22px 24px 18px;
  background: #ffffff;
}

.detail-post-hero {
  display: grid;
  gap: 12px;
}

.detail-author-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
}

.detail-author-row .avatar-button {
  margin-top: 1px;
}

.detail-author-row > div {
  display: grid;
  gap: 2px;
}

.detail-author-row .thread-author-button {
  justify-self: start;
  color: #0e1947;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.detail-author-row span {
  color: #6a7280;
  font-size: 13px;
  line-height: 1.35;
}

.detail-post h1 {
  margin: 0;
  color: #0e1947;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.24;
  letter-spacing: 0;
}

.detail-media-wrap {
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius-ui);
  background: #f8fafc;
}

.detail-post .post-media {
  border-radius: var(--radius-ui);
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

.detail-post-body {
  padding: 16px;
  border: 1px solid #e1e7f0;
  border-radius: var(--radius-ui);
  background: #f8fafc;
}

.detail-post-body p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

.detail-post .tag-row span {
  background: #edf2f8;
  color: #43506a;
}

.detail-actions {
  padding-top: 2px;
  gap: 10px;
}

.detail-actions button:not(.post-action-button) {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d9e1ec;
  background: #ffffff;
  color: #0e1947;
  font-weight: 800;
}

.comment-section {
  display: grid;
  gap: 14px;
  padding: 18px 24px 24px;
  border-top: 1px solid #e1e7f0;
  background: #f7f9fc;
}

.comment-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comment-section-head h3 {
  margin: 0;
  color: #0e1947;
  font-size: 22px;
}

.comment-section-head span {
  color: #6a7280;
  font-size: 13px;
  font-weight: 800;
}

.comment-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.comment-form textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid #d9e1ec;
  border-radius: var(--radius-ui);
  padding: 12px;
  resize: vertical;
}

.comment-form button {
  justify-self: end;
  min-width: 110px;
}

.locked-note {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
}

.comment-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  margin-left: calc(var(--depth) * 16px);
  padding: 6px 0;
}

.comment-line {
  width: 2px;
  min-height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #d8e1ee, #eef3f8);
}

.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.comment-header > div {
  display: grid;
  gap: 2px;
}

.comment-header .thread-author-button {
  justify-self: start;
  color: #0e1947;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.comment-header span {
  color: #6a7280;
  font-size: 12px;
  line-height: 1.3;
}

.comment-body {
  margin: 10px 0 12px;
  color: #1d2430;
  font-size: 15px;
  line-height: 1.58;
}

.comment-content {
  padding: 14px 16px;
  border: 1px solid #dfe6f0;
  border-radius: var(--radius-ui);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(14, 25, 71, 0.04);
}

.comment-item[style*="--depth:1"] .comment-content,
.comment-item[style*="--depth:2"] .comment-content,
.comment-item[style*="--depth:3"] .comment-content,
.comment-item[style*="--depth:4"] .comment-content,
.comment-item[style*="--depth:5"] .comment-content {
  background: #fbfcfe;
  box-shadow: none;
}

.comment-thread {
  display: grid;
  gap: 9px;
}

.comment-content > .comment-thread {
  margin-top: 10px;
  padding-top: 2px;
}

.comment-actions {
  gap: 8px;
}

.comment-actions button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  color: #4d596d;
  font-size: 12px;
  font-weight: 850;
}

.comment-actions button:hover {
  border-color: #d7e0ec;
  background: #f5f8fc;
}

.empty-comments {
  margin: 0;
  padding: 18px;
  border: 1px dashed #cfd8e6;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #6a7280;
}

.notification-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.notification-item,
.admin-row,
.log-row,
.mini-post {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: left;
}

.notification-item.is-unread {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background: var(--brand-weak);
}

.profile-page {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 24px;
}

.profile-hero {
  position: relative;
  overflow: hidden;
  padding: 0 24px 22px;
  border: 1px solid #d9e1ee;
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(14, 25, 71, 0.08);
}

/* Blue cover band, matching the user-preview modal for a consistent look. */
.profile-hero-cover {
  height: 116px;
  margin: 0 -24px;
  background:
    linear-gradient(135deg, rgba(14, 25, 71, 0.92), rgba(56, 88, 152, 0.72)),
    linear-gradient(90deg, #0e1947, #385898);
}

.profile-hero-logout {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-ui);
  color: #ffffff;
  background: rgba(14, 25, 71, 0.26);
  font-weight: 800;
}

.profile-hero-logout:hover,
.profile-hero-logout:focus-visible {
  background: rgba(14, 25, 71, 0.44);
}

/* Avatar overlaps the cover; headings sit beside it, bottom-aligned. */
.profile-hero-identity {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin-top: -44px;
}

.profile-hero-headings {
  min-width: 0;
  padding-bottom: 4px;
}

.profile-avatar-shell {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}

.profile-hero .avatar-large {
  width: 96px;
  height: 96px;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 28px rgba(14, 25, 71, 0.18);
}

.profile-avatar-edit-button {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #cbd7e8;
  border-radius: 50%;
  background: #ffffff;
  color: #00164b;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(14, 25, 71, 0.16);
}

.profile-avatar-edit-button:hover,
.profile-avatar-edit-button:focus-visible {
  border-color: #00164b;
  background: #eef3fb;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-hero h1 {
  margin: 0;
  color: #0e1947;
  font-size: 32px;
  line-height: 1.06;
}

.profile-name-row .verified-dot {
  width: 20px;
  height: 20px;
  font-size: 13px;
}

.profile-hero-bio {
  max-width: 680px;
  margin: 14px 0 0;
  color: #59667b;
  font-size: 15px;
  line-height: 1.55;
}

/* Loading skeleton for the profile page (avoids flashing the mock identity). */
.profile-skel {
  display: block;
  box-sizing: border-box;
  border-radius: var(--radius-ui);
  background: linear-gradient(90deg, #eef2f8, #f8fafc, #eef2f8);
  background-size: 180% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.profile-skel-avatar {
  width: 96px;
  height: 96px;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.profile-skel-line {
  height: 14px;
}

.profile-hero-headings .profile-skel-line {
  margin-bottom: 8px;
}

.profile-skel-name {
  width: 180px;
  height: 30px;
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-meta-row span {
  padding: 5px 9px;
  border-radius: var(--radius-ui);
  background: #eef3fb;
  color: #34435b;
  font-size: 12px;
  font-weight: 850;
}

/* "Edit profile" toggle — the whole editor form is hidden until this is clicked. */
.profile-hero-edit {
  margin-top: 14px;
}

.profile-edit-toggle {
  padding: 8px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-ui);
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.profile-edit-toggle:hover,
.profile-edit-toggle:focus-visible {
  filter: brightness(1.06);
}

.profile-edit-toggle.is-open {
  background: #ffffff;
  color: var(--brand);
}

.profile-editor {
  gap: 14px;
  margin: 16px 0;
  padding: 0;
  background: transparent;
}

.profile-editor-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d9e1ee;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 10px 24px rgba(14, 25, 71, 0.06);
}

.profile-avatar-card {
  grid-template-columns: 1fr;
  gap: 16px;
}

.profile-avatar-edit-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e1e8f3;
  border-radius: var(--radius-ui);
  background: #f8fafc;
}

.profile-avatar-edit-preview strong {
  display: block;
  color: #0e1947;
  font-size: 16px;
}

.profile-avatar-edit-preview span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-avatar-edit-controls {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: end;
}

.profile-avatar-dropzone {
  display: grid;
  gap: 5px;
  min-height: 74px;
  align-content: center;
  border: 1px dashed #a9b8cc;
  border-radius: var(--radius-ui);
  padding: 12px 14px;
  background: #f8fafc;
  color: #0e1947;
  cursor: pointer;
}

.profile-avatar-dropzone:hover,
.profile-avatar-dropzone:focus-within {
  border-color: #00164b;
  background: #eef3fb;
}

.profile-avatar-dropzone strong {
  font-size: 14px;
}

.profile-avatar-dropzone span {
  color: #647084;
  font-size: 12px;
  font-weight: 750;
}

.profile-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-field-head strong {
  color: #0e1947;
  font-size: 17px;
}

.profile-field-head span {
  max-width: 360px;
  color: #647084;
  text-align: right;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(130px, 0.8fr) minmax(110px, 0.7fr) minmax(150px, 0.9fr) minmax(170px, 1fr);
  gap: 12px;
  /* Top-align so every field's input lines up on the same row. The username
     cell is taller (it carries the change-limit note under its input); with
     end-alignment that note dragged the other inputs down to match. */
  align-items: start;
}

.profile-basic-card > label {
  margin-top: 2px;
}

/* Value box for the "当前阶段" field. The label now sits above it (like every
   other field), so this box lines up with the inputs on the same row. */
.profile-stage-card {
  display: grid;
  align-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #cbd7e8;
  border-radius: var(--radius-sm);
  background: #eef4fc;
}

.profile-stage-card strong {
  color: #0e1947;
  font-size: 14px;
  font-weight: 850;
}

.profile-field-note {
  color: #69768a;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.profile-save-button {
  min-height: 42px;
}

/* Cover background picker */
.cover-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cover-swatch {
  width: 64px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-ui);
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(14, 25, 71, 0.14);
  cursor: pointer;
}

.cover-swatch.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, #ffffff);
}

.cover-upload {
  display: grid;
  place-items: center;
  background-color: #eef3fb;
  background-size: cover;
  background-position: center;
  color: #6a7788;
  font-size: 20px;
  font-weight: 800;
}

.cover-remove-button {
  width: fit-content;
  color: #b91c1c;
  font-size: 13px;
}

/* School-email verification card */
.profile-verify-card {
  border: 1px solid #cfe0c9;
  background: linear-gradient(180deg, #f4faf1, #ffffff);
}

.profile-verify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.profile-verify-row input {
  flex: 1 1 220px;
  min-width: 0;
}

.profile-verify-note {
  margin: 0;
  color: #2f7d32;
  font-size: 13px;
  font-weight: 700;
}

.profile-verify-note.is-error {
  color: #b91c1c;
}

.profile-whiteboard-section {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.whiteboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.whiteboard-heading h2 {
  margin: 0 0 6px;
  color: #0e1947;
  font-size: 22px;
  line-height: 1.2;
}

.whiteboard-heading p {
  margin: 0;
  color: var(--muted);
}

.whiteboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.whiteboard-toolbar .ghost-button {
  border: 1px solid var(--line);
  color: #0e1947;
  background: #f8fafc;
}

.user-whiteboard {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #d8dee9;
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    linear-gradient(#eef3fb 1px, transparent 1px),
    linear-gradient(90deg, #eef3fb 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.user-whiteboard.is-editable {
  cursor: default;
}

.whiteboard-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.whiteboard-item {
  position: absolute;
  z-index: 1;
  min-width: 140px;
  border: 1px solid rgba(14, 25, 71, 0.14);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 28px rgba(14, 25, 71, 0.08);
}

.whiteboard-item.is-dragging {
  z-index: 3;
  opacity: 0.88;
}

.whiteboard-text-item {
  padding: 14px;
}

.whiteboard-text-item p {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.whiteboard-image-item {
  overflow: hidden;
}

.whiteboard-image-item img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.whiteboard-image-item a {
  color: inherit;
}

.whiteboard-link-hint {
  display: block;
  padding: 7px 10px;
  border-top: 1px solid var(--line);
  color: #0e1947;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.whiteboard-item-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  border-bottom: 1px solid rgba(14, 25, 71, 0.08);
  background: rgba(248, 250, 252, 0.92);
}

.whiteboard-item-controls button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #fff;
  color: #0e1947;
  font-size: 12px;
  font-weight: 700;
}

.whiteboard-item-controls button[data-action="whiteboard-drag"] {
  cursor: grab;
}

.user-profile-modal {
  width: min(980px, calc(100vw - 48px));
  overflow: hidden;
  background: #f7f9fc;
}

.user-profile-summary {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 0 22px 20px;
  border-bottom: 1px solid #e0e6ef;
  background: #ffffff;
}

.user-profile-cover {
  height: 118px;
  margin: 0 -22px;
  background:
    linear-gradient(135deg, rgba(14, 25, 71, 0.92), rgba(56, 88, 152, 0.72)),
    linear-gradient(90deg, #0e1947, #385898);
}

.user-profile-identity {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  margin-top: -46px;
}

.user-profile-identity .avatar-large {
  width: 96px;
  height: 96px;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 28px rgba(14, 25, 71, 0.18);
}

.user-profile-summary h3 {
  margin: 0 0 6px;
  color: #0e1947;
  font-size: 30px;
  line-height: 1.12;
}

.user-profile-summary p,
.user-profile-summary span {
  color: var(--muted);
}

.user-profile-summary .eyebrow {
  width: fit-content;
  margin: 0 0 6px;
  border-radius: var(--radius-ui);
  padding: 3px 8px;
  background: #edf2f8;
  color: #0e1947;
  font-size: 12px;
  font-weight: 900;
}

.user-profile-summary p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Close button floats over the cover now that the top title bar is gone. */
.user-profile-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  color: #ffffff;
  background: rgba(14, 25, 71, 0.32);
}

.user-profile-close:hover,
.user-profile-close:focus-visible {
  background: rgba(14, 25, 71, 0.5);
}

/* Name + academic-stage pill on one line. */
.user-profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.user-profile-summary .user-profile-name-row h3 {
  margin: 0;
}

/* Slightly larger verified badge to sit next to the big profile name. */
.user-profile-name-row .verified-dot {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

.user-profile-stage {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  background: color-mix(in srgb, #385898 14%, #ffffff);
  border: 1px solid color-mix(in srgb, #385898 32%, #ffffff);
  color: #0e1947;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.user-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.user-profile-stats span {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid #e0e6ef;
  border-radius: var(--radius-ui);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

.user-profile-stats strong {
  color: #0e1947;
  font-size: 18px;
  line-height: 1.1;
}

.user-profile-posts {
  display: grid;
  gap: 12px;
  padding: 20px 22px 24px;
}

.user-profile-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.user-profile-section-head h3 {
  margin: 0;
  color: #0e1947;
  font-size: 22px;
}

.user-profile-section-head span {
  color: #6a7280;
  font-size: 13px;
  font-weight: 850;
}

.user-profile-post-list {
  display: grid;
  gap: 10px;
}

.user-profile-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #cbd5e3;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #6a7280;
}

.profile-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}

/* Match the hero card style (border + shadow) so top and bottom read as one system. */
.profile-columns section {
  padding: 16px;
  border: 1px solid #d9e1ee;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 16px 36px rgba(14, 25, 71, 0.08);
}

/* Use the hero's navy ink for section titles (default --text is charcoal). */
.profile-columns section h2 {
  color: #0e1947;
}

.campus-info-main {
  padding: var(--topbar-height) 0 16px;
  background:
    linear-gradient(180deg, rgba(245, 247, 251, 0.92), #f5f7fb 420px),
    radial-gradient(circle at 78% 8%, rgba(0, 11, 52, 0.16), transparent 32%);
}

.campus-info-page {
  /* Hug the edges to maximise usable area — the board is horizontally
     scrollable, so the more width it gets, the more source columns show before
     scroll (school/UMSU/GSA/Melbourne/future sources). Tiny gutter only. */
  width: calc(100% - 24px);
  max-width: 2600px;
  margin: 0 auto;
  color: #111827;
}

.campus-info-hero {
  position: relative;
  min-height: 220px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 34px 44px;
  background:
    linear-gradient(90deg, rgba(255, 219, 22, 0.98), rgba(255, 207, 0, 0.86)),
    radial-gradient(circle at 74% 35%, rgba(0, 11, 52, 0.18), transparent 34%);
}

.campus-info-hero::before,
.campus-info-hero::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.campus-info-hero::before {
  right: 9%;
  top: -36px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(0, 11, 52, 0.92), rgba(39, 53, 249, 0.58)),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255, 255, 255, 0.18) 18px 20px);
  clip-path: polygon(18% 0, 100% 22%, 73% 100%, 0 82%);
  transform: rotate(8deg);
}

.campus-info-hero::after {
  right: 4%;
  bottom: 22px;
  width: 240px;
  height: 78px;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(0, 11, 52, 0.9) 18% 40%, transparent 40% 49%, rgba(255, 255, 255, 0.72) 49% 56%, transparent 56%),
    linear-gradient(90deg, rgba(0, 11, 52, 0.12), rgba(0, 11, 52, 0.24));
}

.campus-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.campus-hero-copy span {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 9px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.campus-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #0a0c10;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 0.96;
  letter-spacing: 0;
  font-weight: 900;
}

.campus-hero-copy p {
  max-width: 560px;
  margin: 16px 0 0;
  color: rgba(17, 24, 39, 0.78);
  font-size: 15px;
  line-height: 1.55;
}

.campus-hero-tabs {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  display: flex;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  transform: translateX(-50%);
}

.campus-hero-tabs button {
  min-width: 78px;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0e1947;
  font-size: 13px;
  font-weight: 800;
}

.campus-hero-tabs button.is-active {
  background: #ffffff;
  box-shadow: 0 1px 8px rgba(0, 11, 52, 0.12);
}

.campus-feature-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.campus-feature-card,
.campus-pick-card,
.campus-news-card,
.campus-question-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.campus-feature-card {
  overflow: hidden;
}

.campus-feature-art {
  min-height: 142px;
  border-bottom: 1px solid var(--line);
}

.campus-feature-copy {
  padding: 13px 15px 16px;
}

.campus-feature-copy span,
.campus-pick-body span {
  color: #c00f10;
  font-size: 12px;
  font-weight: 900;
}

.campus-feature-copy h2,
.campus-pick-body h3,
.campus-news-card h3 {
  margin: 6px 0 0;
  color: #0e1947;
  line-height: 1.22;
}

.campus-feature-copy h2 {
  font-size: 19px;
}

.campus-feature-copy p,
.campus-pick-body p,
.campus-news-card p {
  margin: 8px 0 0;
  color: #526079;
  line-height: 1.45;
}

.campus-section {
  margin-top: 30px;
}

.campus-section > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #111827;
  font-size: 22px;
  line-height: 1;
}

.campus-events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

.campus-events-head h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 1;
}

.campus-events-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* Two-pane 校园信息 layout (Phase 4 TIME-01): events board LEFT (narrower),
   weekly student timetable RIGHT. Hero removed — this is now the first thing
   under the page header. Stacks to a single column, timetable BELOW board,
   at the board's existing ≤640px breakpoint (see that block below). */
.campus-info-layout {
  display: flex;
  /* stretch: the timetable pane matches the board pane's height exactly, so the
     two sides line up bottom-to-bottom instead of the timetable sticking out. */
  align-items: stretch;
  gap: 24px;
  margin-top: 28px;
  /* Bound the whole layout to the viewport so the page itself never scrolls and
     both panes reach the bottom edge (16px gutter) instead of floating. Each pane
     scrolls internally. Top offset = main pad-top (--topbar-height, 68) + this
     margin (28) = 96; plus the 16px bottom gutter = 112. */
  height: calc(100vh - 112px); /* fallback for browsers without dvh */
  height: calc(100dvh - 112px);
  min-height: 0;
  /* Never hard-clip: if the fixed-px timetable grid is taller than the
     viewport-bound box (short window OR browser zoom-in), scroll to reach it
     instead of cutting content off unreachably. The max-height media query
     below fully releases the height lock on short viewports. */
  overflow-y: auto;
}

/* Short-viewport fallback: when the window is too short (or the page is zoomed
   in, which shrinks the CSS-px viewport height), the fixed-px timetable grid can
   no longer fit inside a viewport-locked box. Release the height lock so the
   whole page scrolls normally and nothing is clipped. Mirrors the desktop
   two-pane layout collapsing to stacked at the ≤640px width breakpoint. */
@media (max-height: 760px) {
  .campus-info-layout {
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }
}

/* Board sizes to its columns (does not stretch to fill), so when only a few
   columns exist the timetable sits right beside them with no empty gap. When
   columns exceed the width, the board shrinks (min-width:0) and its row scrolls
   horizontally. */
.campus-info-board-pane {
  min-width: 0;
  flex: 0 1 auto;
}

/* Timetable grows to absorb ALL leftover width so it hugs the right edge (no
   whitespace), never below 320px. Flex column so the panel fills the stretched
   height; the grid inside flex-grows to that height (no internal scrollbar). */
.campus-info-timetable-pane {
  min-width: 320px;
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
}

.campus-info-board-pane .campus-board {
  margin-top: 0;
}

/* Weekly timetable panel: header + week nav, guest/empty prompts, and the
   Mon-Fri hour-row grid. See src/utils/timetableWeek.js for the geometry
   math this grid's inline styles (top/height/left/width) are computed from. */
.timetable-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-muted, #eef1f6);
  /* Fill the stretched pane height so the week grid can flex-grow to the bottom. */
  flex: 1;
  min-height: 0;
}

.timetable-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timetable-week-head h2 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.timetable-week-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timetable-week-controls button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #3a4a7a;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.timetable-week-controls button:hover {
  background: var(--brand, #001b4b);
  border-color: var(--brand, #001b4b);
  color: #ffffff;
}

.timetable-week-controls strong {
  min-width: 108px;
  text-align: center;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.timetable-guest-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.timetable-empty-prompt {
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  text-align: center;
}

.timetable-empty-prompt p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.timetable-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.timetable-week-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  /* Single row that fills the panel's remaining height; the hour rows/labels
     inside flex-grow to share it, so the grid stretches to the board's height. */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow-x: auto;
}

.timetable-time-col {
  display: flex;
  flex-direction: column;
}

.timetable-day-header {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #3a4a7a;
  font-size: 11px;
  font-weight: 800;
}

.timetable-day-header span {
  color: var(--muted);
  font-weight: 600;
}

.timetable-hour-label {
  flex: 1 1 0;
  min-height: 30px;
  padding-top: 2px;
  padding-right: 6px;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.timetable-day-track {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}

/* Anchors .timetable-block's absolute (percentage) positioning. Flex column so
   its in-flow .timetable-hour-row children grow to fill the stretched height,
   and flex:1 so the column fills the day track. */
.timetable-day-col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.timetable-hour-row {
  flex: 1 1 0;
  min-height: 30px;
  border-top: 1px solid rgba(14, 25, 71, 0.06);
}

.timetable-block {
  position: absolute;
  min-height: 16px;
  padding: 4px 6px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand, #001b4b);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.25;
}

.timetable-block strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
}

.timetable-block span {
  display: block;
  opacity: 0.85;
}

/* Manual class blocks (04-02): per-subject colour via --block-color (set
   inline from subjectColour()), a hoverable delete control, and a subdued
   time line alongside the location line. */
.timetable-class-block {
  background: var(--block-color, var(--brand));
  cursor: pointer;
}

/* Saved-event blocks (04-03): a board event favourited via ☆ (CONTEXT D4),
   coloured by --block-color (tag-derived hash via the same subjectColour()
   used for classes) so it reads as a distinct "from the board" block next to
   manual classes, with its own hoverable unsave control. */
.timetable-saved-block {
  background: var(--block-color, #2735f9);
}

.timetable-block-time {
  font-weight: 700;
  opacity: 0.92;
}

.timetable-class-remove,
.timetable-saved-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 140ms ease, background 140ms ease;
}

.timetable-class-block:hover .timetable-class-remove,
.timetable-class-block:focus-within .timetable-class-remove,
.timetable-saved-block:hover .timetable-saved-remove,
.timetable-saved-block:focus-within .timetable-saved-remove {
  opacity: 1;
}

.timetable-class-remove:hover,
.timetable-class-remove:focus-visible,
.timetable-saved-remove:hover,
.timetable-saved-remove:focus-visible {
  background: var(--danger, #d64545);
}

.timetable-add-trigger {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Add/edit class form — echoes .calendar-custom-form's aesthetic (inputs,
   selects, submit, open/close chrome). */
.timetable-add-form {
  display: grid;
  gap: 7px;
  margin: 4px 0 2px;
  padding: 10px;
  border: 1px solid #dfe6f1;
  border-radius: var(--radius-ui);
  background: #fbfcff;
}

.timetable-add-form label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #536176;
  font-size: 10px;
  font-weight: 850;
}

.timetable-add-form input,
.timetable-add-form select {
  min-width: 0;
  height: 29px;
  padding: 0 8px;
  border: 1px solid #d9e0eb;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}

.timetable-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.timetable-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timetable-add-head span {
  color: #0e1947;
  font-size: 12px;
  font-weight: 850;
}

.timetable-add-close {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-ui);
  background: rgba(14, 25, 71, 0.06);
  color: #536176;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.timetable-add-close:hover {
  background: rgba(14, 25, 71, 0.12);
  color: #0e1947;
}

.timetable-add-form button[type="submit"] {
  min-height: 30px;
  margin-top: 1px;
  border: 1px solid #dce2ed;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.timetable-add-form button[type="submit"]:hover {
  background: var(--brand, #001b4b);
  border-color: var(--brand, #001b4b);
  color: #ffffff;
}

.timetable-add-message {
  margin: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Weekend/undated saved events that don't get a Mon-Fri column (04-03/WR-02
   fix) — a compact list below the grid so a persisted save is never
   invisible. */
.timetable-other-saved {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.timetable-other-saved h3 {
  margin: 0 0 6px;
  color: #3a4a7a;
  font-size: 11px;
  font-weight: 800;
}

.timetable-other-saved-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timetable-other-saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-muted, #eef1f6);
}

.timetable-other-saved-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timetable-other-saved-date {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.timetable-other-saved-remove {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 25, 71, 0.1);
  color: #536176;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.timetable-other-saved-remove:hover,
.timetable-other-saved-remove:focus-visible {
  background: var(--danger, #d64545);
  color: #ffffff;
}

.campus-board {
  margin-top: 28px;
  /* Fill the board pane's (viewport-bounded) height as a flex column so the
     timefilter sits on top and the columns row flex-grows to the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Desktop hides the mobile source-switch tabs; the ≤640px block re-enables them. */
.campus-board-tabs {
  display: none;
}

/* Trello-style board: fixed-width "list" columns, ~5 per page, horizontal scroll
   for any beyond that (GSA/Melbourne columns land here in later phases). */
.campus-board-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
  /* Small — the horizontal scrollbar is now thin (6px). Keeping this tight lets
     the columns' bottoms line up with the timetable pane's bottom. */
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Grow to fill the board pane's remaining height (below the timefilter) so the
     columns reach the bottom; min-height:0 lets the flex child actually shrink. */
  flex: 1 1 auto;
  min-height: 0;
}

.campus-board-column {
  flex: 0 0 320px;
  width: 320px;
  min-width: 0;
  min-height: 240px;
  /* The row (align-items:stretch) gives every column the same height as the
     viewport-bounded board, so columns reach the bottom edge; the body scrolls
     internally. max-height:100% keeps a column from exceeding the row. */
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-muted, #eef1f6);
  scroll-snap-align: start;
}

.campus-board-column-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 12px;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  background: var(--surface-muted, #eef1f6);
  border-bottom: 1px solid rgba(14, 25, 71, 0.06);
  border-radius: 16px 16px 0 0;
}

.campus-board-column-count {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(14, 25, 71, 0.1);
  color: #3a4a7a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* Each column scrolls independently; the head stays pinned. */
.campus-board-column-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

/* Thin, invisible-until-touched scrollbars for the board.
   NOTE: `scrollbar-width`/`scrollbar-color` are INHERITED — an ancestor sets
   `scrollbar-width: thin` (grey thumb) which cascades in AND disables any
   `::-webkit-scrollbar` styling we'd try. So we override the standard properties
   here instead: transparent track+thumb at rest (scrollbar effectively invisible)
   and a faint navy thumb only while the column body / horizontal row is hovered
   or actively scrolled. Works in both Chrome (121+) and Firefox. */
.campus-board-column-body,
.campus-board-row {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
}

.campus-board-column-body:hover,
.campus-board-column-body:active,
.campus-board-row:hover,
.campus-board-row:active {
  scrollbar-color: rgba(14, 25, 71, 0.32) transparent;
}

.campus-board-column-loading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campus-board-column-loading-bar {
  display: block;
  height: 96px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #eef2f8, #f8fafc, #eef2f8);
  background-size: 180% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.campus-board-column-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.campus-board-column-empty {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-align: center;
}

.campus-board-column-empty strong {
  display: block;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.campus-board-column-empty span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.campus-event-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(14, 25, 71, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.campus-event-card:hover,
.campus-event-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 25, 71, 0.16);
}

.campus-event-card.is-saved {
  border-color: #f2b807;
  box-shadow: 0 0 0 2px rgba(242, 184, 7, 0.4), 0 8px 20px rgba(14, 25, 71, 0.1);
}

.campus-event-link {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 14px;
  color: #0e1947;
  text-decoration: none;
}

/* Star-to-save-to-timetable button — sibling of the card link (not nested, so the
   anchor stays valid). Repurposed from the old pin-to-top star (CONTEXT D4); the
   class name is kept for style continuity, the meaning changed. */
.campus-event-pin {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 5px rgba(14, 25, 71, 0.2);
  color: #9aa3b2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: color 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}

/* Save star: revealed only on card hover/focus, or when saved/keyboard-focused (a11y). */
.campus-event-card:hover .campus-event-pin,
.campus-event-card:focus-within .campus-event-pin,
.campus-event-pin:focus-visible,
.campus-event-pin.is-saved {
  opacity: 1;
}

/* Touch devices have no hover state — keep the star reachable there. */
@media (hover: none) {
  .campus-event-pin {
    opacity: 1;
  }
}

.campus-event-pin:hover {
  color: #f2b807;
  transform: scale(1.08);
}

.campus-event-pin.is-saved {
  color: #f2b807;
}

.campus-event-image {
  display: block;
  width: 100%;
  /* Adaptive media: each image keeps its own aspect ratio — width fills the card,
     height follows naturally (no fixed frame, no cropping). */
  height: auto;
  background: #eef2f8;
}

.campus-event-tag {
  justify-self: start;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 22, 75, 0.9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Melbourne "What's On" cards show their full tag set — flow the chips in a
   wrapping row instead of stacking them as separate grid rows. */
.campus-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-self: start;
}

.campus-event-card--no-image .campus-event-link {
  display: block;
}

.campus-event-card--no-image .campus-event-tag {
  position: static;
  justify-self: start;
  align-self: start;
  margin-bottom: 2px;
}

.campus-event-card--no-image .campus-event-body {
  padding-right: 46px;
}

.campus-event-body {
  display: grid;
  gap: 7px;
  padding: 14px 15px 15px;
}

.campus-event-body strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.campus-event-when {
  color: #2a4bb0;
  font-size: 12px;
  font-weight: 800;
}

/* "by <club>" line on UMSU club cards */
.campus-event-org {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Board time-window filter pills */
.campus-board-timefilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.campus-board-timefilter button {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.campus-board-timefilter button:hover {
  border-color: #2a4bb0;
  color: #2a4bb0;
}

.campus-board-timefilter button.is-active {
  background: #00164b;
  border-color: #00164b;
  color: #ffffff;
}

.campus-event-loc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Mobile: collapse the board into one active column with a sticky source-switch
   tab bar (re-authored — restores the BORD-04 behaviour). */
@media (max-width: 640px) {
  /* Single column. The timetable is NOT stacked below the board on mobile —
     instead it's a tab in the source-switch bar (data-tab="timetable"), so the
     board and calendar never fight for space. The active tab drives which pane
     shows via [data-mobile-pane] on .campus-info-layout. */
  .campus-info-layout {
    display: block;
    /* Undo the desktop viewport-bounded height — the stacked mobile layout must
       size to its content and scroll the page normally. */
    height: auto;
    min-height: 0;
  }
  /* Match: the board is a normal block on mobile (columns use max-height:none
     below), not the desktop flex-fill column. */
  .campus-board {
    display: block;
    height: auto;
  }
  /* Timetable hidden unless its tab is selected; board hidden when it is.
     Reset the desktop flex + sticky sizing so the pane fills the phone width. */
  .campus-info-timetable-pane {
    display: none;
    margin-top: 0;
    min-width: 0;
    max-width: none;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .campus-info-layout[data-mobile-pane="timetable"] .campus-info-timetable-pane {
    display: block;
  }
  .campus-info-layout[data-mobile-pane="timetable"] .campus-board-row,
  .campus-info-layout[data-mobile-pane="timetable"] .campus-board-timefilter {
    display: none;
  }
  /* On mobile the layout is block (no stretched height to fill), so give the
     grid fixed-height rows instead of flex-grow ones — blocks are % of the
     resulting definite day-column height, so they still position correctly. */
  .timetable-week-grid {
    grid-template-rows: none;
    flex: none;
  }
  .timetable-hour-label,
  .timetable-hour-row {
    flex: none;
    height: 56px;
    min-height: 0;
  }
  .timetable-day-col {
    flex: none;
    min-height: 0;
  }
  .campus-board-tabs {
    position: sticky;
    top: var(--topbar-height, 56px);
    z-index: 3;
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 0;
    overflow-x: auto;
    background: var(--canvas, #f5f7fb);
    scrollbar-width: none;
  }
  .campus-board-tabs::-webkit-scrollbar {
    display: none;
  }
  .campus-board-tabs button {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: #3a4a7a;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
  }
  .campus-board-tabs button.is-active {
    background: #001b4b;
    border-color: #001b4b;
    color: #ffffff;
  }
  .campus-board-row {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }
  .campus-board-column {
    display: none;
    flex: none;
    width: 100%;
    min-height: 0;
    max-height: none;
  }
  .campus-board-column.is-active {
    display: flex;
  }
  .campus-board-column-head {
    position: static;
  }
  .campus-board-column-body {
    overflow: visible;
  }
}

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

.campus-pick-card {
  overflow: hidden;
}

.campus-pick-visual {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
}

.campus-pick-body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.campus-pick-body h3 {
  font-size: 17px;
}

.campus-pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  color: #8a93a6;
  font-size: 12px;
}

.campus-pick-meta strong {
  color: #0e1947;
}

.campus-news-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 14px;
}

.campus-news-card {
  overflow: hidden;
  background: transparent;
  border-color: transparent;
}

.campus-news-visual {
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
  border-radius: var(--radius-ui);
  border: 1px solid var(--line);
}

.campus-news-card h3 {
  min-height: 42px;
  font-size: 15px;
}

.campus-news-card p {
  color: #8a93a6;
  font-size: 12px;
}

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

.campus-question-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  min-height: 74px;
  padding: 16px 18px;
  color: #0e1947;
  text-align: left;
}

.campus-question-card span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-ui);
  background: #dbe7f8;
  color: #0e1947;
  font-weight: 900;
}

.campus-question-card strong {
  font-size: 15px;
}

.campus-question-card em {
  grid-column: 2;
  color: #8a93a6;
  font-size: 12px;
  font-style: normal;
}

.campus-visual-library .campus-feature-art,
.campus-visual-library.campus-pick-visual,
.campus-news-1 {
  background:
    linear-gradient(135deg, rgba(0, 11, 52, 0.86), rgba(13, 77, 139, 0.7)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 18px);
}

.campus-visual-calendar .campus-feature-art,
.campus-visual-calendar.campus-pick-visual,
.campus-news-2 {
  background:
    linear-gradient(135deg, #ffde17, #f6b800),
    radial-gradient(circle at 72% 28%, rgba(0, 11, 52, 0.28), transparent 26%);
}

.campus-visual-campus .campus-feature-art,
.campus-visual-campus.campus-pick-visual,
.campus-news-3 {
  background:
    linear-gradient(120deg, rgba(0, 11, 52, 0.08) 0 38%, rgba(0, 11, 52, 0.78) 38% 58%, rgba(255, 255, 255, 0.78) 58% 66%, rgba(14, 25, 71, 0.78) 66%),
    #dfe7f3;
}

.campus-visual-study,
.campus-news-4 {
  background:
    linear-gradient(135deg, rgba(14, 25, 71, 0.84), rgba(63, 99, 166, 0.74)),
    radial-gradient(circle at 18% 38%, rgba(255, 255, 255, 0.72), transparent 18%);
}

.campus-visual-rent {
  background:
    linear-gradient(120deg, #e9edf4, #ffffff),
    repeating-linear-gradient(0deg, rgba(14, 25, 71, 0.18) 0 1px, transparent 1px 18px);
}

.campus-visual-clubs {
  background:
    linear-gradient(135deg, #000b34, #294f9d),
    radial-gradient(circle at 70% 28%, rgba(255, 219, 22, 0.78), transparent 16%);
}

.campus-visual-safety {
  background:
    linear-gradient(135deg, #f7f9fd, #dbe7f8),
    radial-gradient(circle at 78% 26%, rgba(192, 15, 16, 0.36), transparent 18%);
}

.discussion-main {
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
  padding: calc(var(--topbar-height) + 18px) 16px 56px;
  background: linear-gradient(180deg, #eef3f8 0%, #f7f9fc 46%, #edf2f7 100%);
}

.discussion-page {
  width: min(1720px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.discussion-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.24fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 12px;
  border: 1px solid #d8e0eb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.discussion-copy {
  min-height: clamp(420px, 31vw, 520px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: var(--radius-ui);
  background: linear-gradient(150deg, #000b34, #0e1947);
  color: #ffffff;
}

.discussion-copy span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.discussion-copy h1 {
  margin: 10px 0 12px;
  color: #ffffff;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: 0;
}

.discussion-copy p {
  max-width: 330px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.65;
}

.discussion-pin-button,
.discussion-section-header button {
  width: fit-content;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.discussion-map-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe3ee;
  border-radius: var(--radius-ui);
  background: linear-gradient(180deg, #e6f0fb, #f9fbfe);
}

.origin-map {
  position: relative;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 2000 / 857;
  overflow: hidden;
  border-radius: var(--radius-ui);
  border: 1px solid #dbe3ee;
  background: #ffffff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.origin-map.is-dragging {
  cursor: grabbing;
}

.origin-map:focus-visible {
  outline: 2px solid #0e1947;
  outline-offset: 3px;
}

.origin-map-stage {
  position: absolute;
  inset: 0;
}

.origin-map-loading {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #526079;
  font-size: 13px;
  font-weight: 800;
}

.origin-map-image,
.origin-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  fill: #a8adb2;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 0.55px;
}

.origin-map-svg path,
.origin-map-svg polygon,
.origin-map-svg polyline {
  vector-effect: non-scaling-stroke;
}

.origin-map-image {
  object-fit: fill;
}

.origin-map-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.origin-image-pin {
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px 999px 999px 4px;
  background: #0e1947;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(14, 25, 71, 0.24);
  transform: translate(-50%, -100%) rotate(-45deg);
  pointer-events: none;
  will-change: left, top;
}

.origin-image-pin span {
  transform: rotate(45deg);
}

.origin-image-pin.is-current {
  background: #c00f10;
  box-shadow: 0 8px 20px rgba(192, 15, 16, 0.28);
}

.origin-map-controls {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.origin-map-controls button {
  min-width: 34px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d6deea;
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, 0.9);
  color: #0e1947;
  font-size: 13px;
  font-weight: 900;
}

.origin-map-controls button:hover {
  background: #eef3f8;
}

.discussion-map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  color: #526079;
  font-size: 13px;
}

.discussion-map-meta strong {
  color: #0e1947;
  font-size: 16px;
}

.discussion-question-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e0eb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.discussion-content-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 14px;
}

.discussion-column {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.discussion-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.discussion-section-header span {
  color: #0e1947;
  font-size: 18px;
  font-weight: 900;
}

.discussion-section-header button {
  border-color: #d5deea;
  background: #f4f7fb;
  color: #0e1947;
}

.discussion-poll-card {
  padding: 18px;
  border: 1px solid #d8e0eb;
  border-radius: var(--radius-ui);
  background: linear-gradient(180deg, #f7fbff, #eef5fc);
  color: #0e1947;
}

.discussion-poll-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}

.discussion-poll-header h2 {
  margin: 0 0 10px;
  color: #0e1947;
  font-size: 20px;
  line-height: 1.35;
}

.discussion-poll-header span,
.discussion-poll-prompt {
  color: #526079;
  font-size: 13px;
  font-weight: 800;
}

.discussion-poll-prompt {
  margin: 0 0 14px;
}

.discussion-thread-link {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #cfd9e7;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #0e1947;
  font-size: 13px;
  font-weight: 900;
}

.discussion-thread-link:hover {
  border-color: #0e1947;
  background: #eef3f8;
}

.discussion-poll-options {
  display: grid;
  gap: 8px;
}

.discussion-poll-option {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: var(--radius-ui);
  padding: 0 14px;
  background: #ffffff;
  color: #0e1947;
  text-align: left;
  font-size: 15px;
  font-weight: 900;
}

.discussion-poll-option::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--poll-percent, 0%);
  background: rgba(14, 25, 71, 0.08);
}

.discussion-poll-option span,
.discussion-poll-option strong {
  position: relative;
  z-index: 1;
}

.discussion-poll-option:hover,
.discussion-poll-option.is-selected {
  border-color: #0e1947;
  background: #f2f6fb;
}

.discussion-question-list {
  display: grid;
  gap: 12px;
}

.discussion-question-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid #e0e6ef;
  border-radius: var(--radius-ui);
  background: #f8fafc;
  color: #0e1947;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.discussion-question-card:hover {
  border-color: #b9c7d8;
  background: #ffffff;
}

.discussion-rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-ui);
  background: #0e1947;
  color: #ffffff;
  font-weight: 900;
}

.discussion-question-card h2 {
  margin: 0 0 7px;
  color: #0e1947;
  font-size: 17px;
  line-height: 1.32;
}

.discussion-question-card p {
  margin: 0 0 10px;
  color: #526079;
  font-size: 13px;
  line-height: 1.55;
}

.discussion-question-card small {
  color: #7c8798;
  font-size: 12px;
}

/* Game-squad is a full-viewport embed that keeps the dark app topbar (like every
   other view) so the blue bar runs edge-to-edge across the top. The embed sits
   just below the fixed topbar and the whole area is locked to the viewport with
   no outer scroll — the embed scrolls internally. Backgrounds use the embed's own
   #f7f8fb so the chrome around it reads as one continuous surface. */
.game-squad-main {
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
  padding: var(--topbar-height) clamp(12px, 3vw, 32px) 12px;
  background: #f7f8fb;
}

.game-squad-page {
  width: min(100%, 1600px);
  height: calc(100vh - var(--topbar-height) - 12px); /* fallback */
  height: calc(100dvh - var(--topbar-height) - 12px);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  background: #f7f8fb;
}

.squadpool-frame-shell {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #f7f8fb;
}

.squadpool-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7f8fb;
}

/* On the game-squad view, keep the dark global topbar (same as every other view)
   and lock the page to the viewport so no outer scrollbar appears — the embed
   handles its own scrolling. Nav stays reachable via the sidebar, topbar, and the
   mobile bottom nav. */
body.is-game-squad-view {
  overflow: hidden;
}

.game-squad-auth {
  place-items: center;
  padding: 24px;
}

.game-squad-auth > div {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid #d8e0eb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.game-squad-auth span {
  color: #526079;
  font-size: 13px;
  font-weight: 800;
}

.game-squad-auth h1 {
  margin: 0;
  color: #0e1947;
  font-size: 28px;
  line-height: 1.2;
}

.game-squad-auth p {
  margin: 0;
  color: #526079;
  font-size: 14px;
  line-height: 1.6;
}

.faculty-main {
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
  padding: calc(var(--topbar-height) + 18px) 24px 34px;
  background:
    radial-gradient(circle at 18% 12%, rgba(98, 105, 118, 0.12), transparent 31%),
    radial-gradient(circle at 84% 18%, rgba(105, 112, 104, 0.08), transparent 28%),
    linear-gradient(135deg, #15171b 0%, #171b22 46%, #101216 100%);
}

.faculty-page {
  position: relative;
  width: min(1540px, 100%);
  margin: 0 auto;
  color: #f3f6ff;
}

.faculty-detail-main {
  background:
    radial-gradient(circle at 16% 10%, rgba(14, 25, 71, 0.045), transparent 32%),
    linear-gradient(180deg, #f4f6fa 0%, #eef2f7 100%);
}

.faculty-detail-main .faculty-page {
  color: #0e1947;
}

.faculty-select-page {
  position: relative;
  min-height: calc(100vh - var(--topbar-height) - 52px); /* fallback */
  min-height: calc(100dvh - var(--topbar-height) - 52px);
  display: grid;
}

.faculty-select-page::before {
  content: "";
  position: fixed;
  inset: var(--topbar-height) 0 0 var(--sidebar-width);
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 86%);
}

.faculty-page-header {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.faculty-page-header h1 {
  margin: 0;
  color: #0e1947;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.faculty-page-header p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: #526079;
  font-size: 15px;
  line-height: 1.6;
}

.faculty-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 20px;
  min-height: 100%;
}

.faculty-card {
  position: relative;
  z-index: 1;
  min-height: 240px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--faculty-text, #f3f6ff) 34%, transparent);
  border-radius: var(--radius-ui);
  background: var(--faculty-theme, #ffffff);
  color: var(--faculty-text, #0e1947);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.28);
  text-align: left;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.faculty-card:hover {
  border-color: color-mix(in srgb, var(--faculty-hover-text, #ffffff) 54%, transparent);
  background: var(--faculty-hover-theme, #ffffff);
  color: var(--faculty-hover-text, #0e1947);
  transform: translateY(-2px);
}

.faculty-card:hover .faculty-index,
.faculty-card:hover strong,
.faculty-card:hover em,
.faculty-card:hover p {
  color: var(--faculty-hover-text, #0e1947);
}

.faculty-index {
  color: var(--faculty-text, #0e1947);
  font-size: 15px;
  font-weight: 900;
}

.faculty-card strong {
  max-width: 96%;
  color: var(--faculty-text, #0e1947);
  font-size: clamp(32px, 3.1vw, 54px);
  line-height: 1.04;
  font-weight: 950;
}

.faculty-card em {
  color: var(--faculty-text, #0e1947);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.faculty-card p {
  margin: 0;
  color: var(--faculty-text, #0e1947);
  font-size: 16px;
  line-height: 1.45;
}

.faculty-detail-page {
  display: grid;
  gap: 18px;
}

.faculty-back-button {
  justify-self: start;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 28%, #d9dfeb);
  border-radius: var(--radius-ui);
  padding: 0 12px;
  background: #ffffff;
  color: #0e1947;
  font-weight: 800;
}

.faculty-detail-page .faculty-back-button:hover {
  border-color: var(--faculty-detail-theme, #0e1947);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 12%, #ffffff);
}

.faculty-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 28px 34px;
  border: 1px solid color-mix(in srgb, var(--faculty-detail-text, #0e1947) 24%, transparent);
  border-left: 8px solid var(--faculty-detail-text, #0e1947);
  border-radius: var(--radius-ui);
  background: var(--faculty-detail-theme, #ffffff);
  color: var(--faculty-detail-text, #0e1947);
}

.faculty-detail-hero > span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-ui);
  border: 1px solid color-mix(in srgb, var(--faculty-detail-text, #0e1947) 52%, transparent);
  background: var(--faculty-detail-text, #0e1947);
  color: var(--faculty-detail-theme, #ffffff);
  font-size: 28px;
  font-weight: 900;
}

.faculty-detail-hero h1 {
  margin: 0;
  color: var(--faculty-detail-text, #0e1947);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
}

.faculty-detail-hero .eyebrow {
  color: var(--faculty-detail-text, #0e1947);
}

.faculty-detail-hero p:not(.eyebrow) {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--faculty-detail-text, #0e1947) 84%, transparent);
}

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

.faculty-detail-grid section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.faculty-detail-grid h2 {
  margin: 0 0 8px;
  color: #0e1947;
  font-size: 18px;
}

.faculty-detail-grid p {
  margin: 0 0 14px;
  color: #5c6678;
  line-height: 1.55;
}

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

.faculty-search-form input {
  min-height: 42px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  padding: 0 12px;
}

.faculty-search-form input:focus {
  border-color: var(--faculty-detail-theme, #0e1947);
  outline: 2px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 24%, transparent);
}

.faculty-review-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faculty-review-entry .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.faculty-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 24%, #d9dfeb);
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.faculty-detail-actions strong,
.faculty-detail-actions span {
  display: block;
}

.faculty-detail-actions strong {
  color: #0e1947;
  font-size: 15px;
}

.faculty-detail-actions span {
  margin-top: 3px;
  color: #5c6678;
  font-size: 12px;
}

.faculty-detail-actions > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.faculty-detail-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.faculty-detail-page .primary-button {
  border-color: var(--faculty-detail-theme, #0e1947);
  background: var(--faculty-detail-theme, #0e1947);
  color: var(--faculty-detail-text, #ffffff);
}

.faculty-detail-page .ghost-button {
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 30%, #d9dfeb);
  background: #ffffff;
  color: #0e1947;
}

.faculty-detail-page .primary-button:hover,
.faculty-detail-page .primary-button:focus-visible,
.faculty-detail-page .ghost-button:hover,
.faculty-detail-page .ghost-button:focus-visible,
.faculty-detail-page .faculty-back-button:focus-visible {
  border-color: var(--faculty-detail-theme, #0e1947);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 22%, transparent);
  outline: 0;
}

.faculty-detail-page .ghost-button:hover,
.faculty-detail-page .ghost-button:focus-visible {
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 12%, #ffffff);
}

.faculty-filter-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.faculty-subject-filter-block {
  display: grid;
  gap: 8px;
}

.faculty-subject-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faculty-area-toggle {
  display: none;
}

.faculty-area-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(217, 223, 235, 0.72);
  border-radius: var(--radius-ui);
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.94);
  color: #0e1947;
  font-size: 12px;
  font-weight: 850;
}

.faculty-area-chip:hover,
.faculty-area-chip:focus-visible {
  border-color: var(--faculty-detail-theme, #0e1947);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 12%, #ffffff);
  outline: 0;
}

.faculty-area-chip span {
  color: #6a7280;
  font-weight: 750;
}

.faculty-area-chip.is-active {
  border-color: var(--faculty-detail-theme, #0e1947);
  background: var(--faculty-detail-theme, #0e1947);
  color: var(--faculty-detail-text, #ffffff);
}

.faculty-area-chip.is-active span {
  color: currentColor;
}

.faculty-course-results {
  display: grid;
  gap: 18px;
}

.faculty-level-booklet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.booklet-row {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #e5eaf2;
  border-radius: var(--radius-ui);
  padding: 0 12px;
  background: #ffffff;
  color: #0e1947;
  text-align: left;
}

.booklet-row:hover {
  border-color: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 42%, #e5eaf2);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 10%, #ffffff);
}

.booklet-row:focus-visible {
  border-color: var(--faculty-detail-theme, #0e1947);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 20%, transparent);
  outline: 0;
}

.booklet-row.is-active {
  border-color: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 62%, #ffffff);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 18%, #ffffff);
  box-shadow: inset 4px 0 0 var(--faculty-detail-theme, #0e1947);
}

.booklet-row.is-active strong {
  color: #0e1947;
}

.booklet-row.is-active em {
  color: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 58%, #0e1947);
}

.booklet-row.is-parent {
  font-weight: 900;
}

.booklet-row.is-open {
  background: #fbfcfe;
}

.booklet-row strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
}

.booklet-row em {
  color: #6a7280;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.booklet-caret {
  display: none;
}

.booklet-row.is-open .booklet-caret {
  transform: rotate(90deg);
}

.booklet-row:not(.is-parent) .booklet-caret {
  opacity: 0;
}

.booklet-children {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 0;
  background: #fbfcfe;
}

.booklet-children .booklet-row {
  min-height: 56px;
  padding-left: 12px;
  background: #fbfcfe;
}

.booklet-children .booklet-row:hover {
  background: #f4f7fb;
}

.undergraduate-level-filters .booklet-row {
  min-height: 40px;
}

.faculty-course-level {
  display: grid;
  gap: 12px;
}

.undergraduate-level-stack {
  gap: 18px;
}

.undergraduate-level-section {
  display: grid;
  gap: 10px;
}

.undergraduate-level-subheading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.undergraduate-level-subheading h3 {
  margin: 0;
  color: #0e1947;
  font-size: 18px;
}

.undergraduate-level-subheading span {
  color: #6a7280;
  font-size: 12px;
  font-weight: 850;
}

.faculty-course-level.is-expanded {
  animation: panel-in 140ms ease;
}

.faculty-level-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
}

.faculty-level-heading h2 {
  margin: 0;
  color: #0e1947;
  font-size: 22px;
  line-height: 1.1;
}

.faculty-level-heading span {
  color: #6a7280;
  font-size: 12px;
  font-weight: 800;
}

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

.faculty-subject-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 210px;
  padding: 16px;
  border: 1px solid #d9dfeb;
  border-top: 4px solid color-mix(in srgb, var(--faculty-theme, #0e1947) 76%, #d9dfeb);
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #0e1947;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.faculty-subject-card:hover,
.faculty-subject-card:focus-visible {
  border-color: color-mix(in srgb, var(--faculty-theme, #0e1947) 45%, #d9dfeb);
  box-shadow: 0 12px 28px rgba(14, 25, 71, 0.1);
  outline: 0;
  transform: translateY(-1px);
}

.load-more-wrap {
  display: grid;
  place-items: center;
  gap: 6px;
  margin: 10px 0 2px;
}

.load-more-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
  color: #0e1947;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.load-more-button:hover,
.load-more-button:focus-visible {
  border-color: #b9c3d4;
  background: #f6f8fb;
}

.load-more-sentinel {
  width: 100%;
  height: 1px;
}

.subject-card-cover {
  display: grid;
  /* Fixed score + offered columns so the title column always keeps the middle
     space; a long "Offered ..." string wraps inside its 96px column instead of
     starving the title and breaking the English name word-by-word. */
  grid-template-columns: 74px minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: start;
}

.subject-score-tile {
  min-height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: var(--radius-ui);
  background: #e7edf4;
  color: #111111;
}

.subject-score-tile.is-score-1,
.review-item-score.is-score-1,
.review-post-score.is-score-1 {
  background: #ff8f95;
}

.subject-score-tile.is-score-2,
.review-item-score.is-score-2,
.review-post-score.is-score-2 {
  background: #ffbf69;
}

.subject-score-tile.is-score-3,
.review-item-score.is-score-3,
.review-post-score.is-score-3 {
  background: #ffeb6a;
}

.subject-score-tile.is-score-4,
.review-item-score.is-score-4,
.review-post-score.is-score-4 {
  background: #a8e875;
}

.subject-score-tile.is-score-5,
.review-item-score.is-score-5,
.review-post-score.is-score-5 {
  background: #52d69d;
}

/* Clickable review-post title -> jumps to the course in the faculty view. */
.review-title-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.review-title-link:hover,
.review-title-link:focus-visible {
  text-decoration: underline;
}

.review-title-arrow {
  font-size: 0.8em;
  color: var(--muted);
}

/* Auto-generated course-review post: metric chips row + comment + score box. */
.review-post {
  display: grid;
  gap: 12px;
  margin: 4px 0 2px;
}

.review-post-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-metric {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 10px;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f4f7fb;
}

.review-metric small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.review-metric b {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.review-post-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}

.review-post-comment {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.review-post-score {
  align-self: start;
  min-width: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--radius-ui);
  background: #e7edf4;
  color: #111111;
  text-align: center;
}

.review-post-score small {
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.review-post-score strong {
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 640px) {
  .review-post-main {
    grid-template-columns: 1fr;
  }
  .review-post-score {
    justify-self: start;
    min-width: 0;
    grid-auto-flow: column;
    gap: 8px;
    padding: 8px 14px;
  }
  .review-post-score strong {
    font-size: 22px;
  }
}

.subject-score-tile span {
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.subject-score-tile strong {
  font-size: 30px;
  line-height: 1;
}

.subject-score-tile em {
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.subject-title-block {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.faculty-subject-card .subject-cn-name {
  color: #111111;
  font-size: 19px;
  font-weight: 950;
}

.review-scoreline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-scoreline span {
  border-radius: var(--radius-ui);
  padding: 5px 7px;
  background: #f1f4f9;
  color: #33405c;
  font-size: 11px;
  font-weight: 900;
}

.review-preview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: var(--radius-ui);
  background: #f7f8fa;
}

.review-preview div {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  background: #ffe1e3;
  color: #111111;
}

.review-preview strong {
  font-size: 22px;
  line-height: 1;
}

.review-preview span {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.review-preview p {
  margin: 0;
  color: #111111;
  font-size: 13px;
  line-height: 1.45;
}

.subject-review-modal {
  width: min(1040px, calc(100vw - 40px));
  max-width: 1040px;
  padding: 0;
  /* Card scrolls its own content: on short/mobile screens the review lists
     below the fold were clipped by overflow:hidden with no way to scroll. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.subject-review-modal .modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid #e5eaf2;
  background: #ffffff;
}

.subject-review-summary {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #e5eaf2;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fc 100%);
}

.subject-review-summary h3 {
  margin: 0;
  color: #0e1947;
  font-size: 24px;
  line-height: 1.18;
}

.subject-review-summary p {
  margin: 4px 0 10px;
  color: #4f596b;
}

.subject-review-summary .review-scoreline {
  gap: 8px;
}

.subject-review-summary .review-scoreline .is-key-stat {
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 38%, #d9dfeb);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 16%, #ffffff);
  color: #0e1947;
  font-size: 12px;
  font-weight: 950;
}

.subject-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #e5eaf2;
  background: #ffffff;
}

.subject-review-list {
  display: grid;
  gap: 10px;
}

.subject-review-section {
  display: grid;
  gap: 10px;
  padding: 16px 20px 18px;
}

.subject-review-section + .subject-review-section {
  border-top: 1px solid #e5eaf2;
}

.subject-review-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
}

.subject-review-section-heading h3 {
  margin: 0;
  color: #0e1947;
  font-size: 18px;
}

.subject-review-section-heading span {
  border-radius: var(--radius-ui);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 12%, #f1f4f9);
  color: #0e1947;
  font-size: 12px;
  font-weight: 950;
}

.subject-review-item,
.subject-review-empty {
  padding: 14px;
  border: 1px solid #e2e7f0;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.subject-review-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.review-item-score {
  min-height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: var(--radius-ui);
  background: #e7edf4;
  color: #111111;
}

.review-item-score span {
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.review-item-score strong {
  font-size: 32px;
  line-height: 1;
}

.review-item-score em {
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.subject-review-item p,
.subject-review-empty p {
  margin: 10px 0;
  color: #111111;
  line-height: 1.55;
}

.subject-review-empty {
  background: #f8fafc;
}

.subject-review-item footer {
  color: #6a7280;
  font-size: 12px;
  font-weight: 800;
}

.review-thanks-modal {
  position: relative;
  max-width: 440px;
}

.review-thanks-modal.is-revealed {
  max-width: 470px;
}

/* Step 1 — thank you + ask */
.review-thanks-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.review-thanks-intro {
  text-align: center;
  padding: 34px 30px 4px;
}

.review-thanks-badge {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-weak);
  font-size: 33px;
  line-height: 1;
}

.review-thanks-intro h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--text);
}

.review-thanks-lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.review-thanks-cta {
  margin: 22px 30px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-align: center;
}

.review-thanks-cta p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

.review-thanks-generate {
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: var(--radius-sm);
}

.review-thanks-skip {
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 8px 22px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.review-thanks-skip:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Step 2 — the generated card + share actions */
.review-share-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.review-share-preview {
  align-self: center;
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 11, 52, 0.16);
}

.review-share-preview svg {
  display: block;
  width: 100%;
  height: auto;
}

.review-share-actions {
  display: flex;
  gap: 10px;
}

.review-share-actions .primary-button,
.review-share-actions .ghost-button {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.review-share-actions .ghost-button {
  border: 1px solid var(--line);
}

.review-share-status {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-bright);
  text-align: center;
}

.review-share-body .review-thanks-skip {
  padding: 2px 8px 4px;
}

.subject-tutor-list,
.subject-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.subject-tutor-list button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 28%, #d9dfeb);
  border-radius: var(--radius-ui);
  padding: 0 9px;
  background: #ffffff;
  color: #0e1947;
  font-size: 12px;
  font-weight: 850;
}

.subject-tutor-list button:hover,
.subject-tutor-list button:focus-visible {
  border-color: var(--faculty-detail-theme, #0e1947);
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 12%, #ffffff);
  outline: 0;
}

.subject-card-actions .ghost-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.faculty-professor-panel {
  display: grid;
  gap: 14px;
}

.faculty-professor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
  align-items: end;
  padding: 18px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.faculty-professor-toolbar h2,
.faculty-professor-toolbar p {
  margin: 0;
}

.faculty-professor-toolbar p {
  margin-top: 6px;
  color: #5c6678;
}

.professor-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
}

.professor-add-form input {
  min-height: 40px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  padding: 0 10px;
}

.professor-add-form input:focus {
  border-color: var(--faculty-detail-theme, #0e1947);
  outline: 2px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 22%, transparent);
}

.professor-form-toggle {
  justify-self: end;
  min-height: 40px;
  padding: 0 14px;
}

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

.professor-card,
.professor-empty-card {
  display: grid;
  gap: 12px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.professor-card strong,
.professor-empty-card strong {
  display: block;
  color: #0e1947;
  font-size: 18px;
}

.professor-card > div:first-child span,
.professor-empty-card p {
  display: block;
  margin-top: 4px;
  color: #5c6678;
  font-size: 13px;
}

.professor-empty-card .primary-button {
  justify-self: start;
  margin-top: 4px;
}

.graduate-subject-strip {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #d9dfeb;
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.graduate-subject-strip h3 {
  margin: 0;
  color: #0e1947;
  font-size: 16px;
}

.graduate-subject-strip div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.graduate-subject-strip span {
  border-radius: var(--radius-ui);
  padding: 6px 8px;
  background: #f1f4f9;
  color: #33405c;
  font-size: 12px;
  font-weight: 800;
}

.review-modal {
  max-width: 820px;
}

.review-slider-grid,
.review-select-grid {
  display: grid;
  gap: 10px;
}

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

.review-select-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-slider-field {
  gap: 12px;
  border: 1px solid #dce3ee;
  border-radius: var(--radius-ui);
  padding: 12px;
  background: #f8fafc;
}

.review-slider-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-slider-field strong {
  color: #0e1947;
  font-size: 13px;
}

.review-slider-field em {
  min-width: 42px;
  border-radius: var(--radius-ui);
  padding: 5px 8px;
  background: #00164b;
  color: #ffffff;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

.review-slider-field input[type="range"] {
  width: 100%;
  accent-color: #00164b;
  cursor: pointer;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skeleton-pulse {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.subject-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #697386;
  font-size: 12px;
  font-weight: 800;
}

.subject-card-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
  color: #697386;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.subject-card-side span {
  white-space: normal;
  overflow-wrap: break-word;
}

.subject-offered-inline {
  display: none;
  margin-top: 4px;
  color: #697386;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.subject-card-review-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
}

.subject-code {
  color: var(--faculty-theme, #0e1947);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.1;
}

.faculty-subject-card h3 {
  margin: 0;
  color: #0e1947;
  font-size: 18px;
  line-height: 1.16;
}

.faculty-subject-card h3.subject-en-name-only {
  font-size: 21px;
  line-height: 1.12;
  font-weight: 950;
}

.subject-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subject-meta span {
  border-radius: var(--radius-ui);
  padding: 4px 7px;
  background: color-mix(in srgb, var(--faculty-theme, #0e1947) 12%, #f1f4f9);
  color: #33405c;
  font-size: 11px;
  font-weight: 800;
}

.faculty-subject-card p {
  margin: 0;
  color: #4f596b;
  font-size: 13px;
  line-height: 1.5;
}

.subject-link {
  align-self: end;
  justify-self: start;
  color: color-mix(in srgb, var(--faculty-theme, #0e1947) 70%, #0e1947);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.faculty-course-empty {
  padding: 24px;
  border: 1px solid rgba(217, 223, 235, 0.82);
  border-radius: var(--radius-ui);
  background: #ffffff;
}

.faculty-course-empty strong {
  color: #0e1947;
  font-size: 18px;
}

.faculty-course-empty p {
  margin: 8px 0 0;
  color: #5c6678;
}

.faculty-course-empty-search {
  display: grid;
  gap: 10px;
  justify-items: start;
  text-align: left;
}

.faculty-course-empty-search .primary-button,
.faculty-course-empty-search .ghost-button {
  min-height: 34px;
  margin-top: 2px;
}

.faculty-search-expanded-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 28%, #d9dfeb);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 10%, #ffffff);
}

.faculty-search-expanded-note strong {
  display: block;
  margin-bottom: 3px;
  color: #0e1947;
  font-size: 14px;
}

.faculty-search-expanded-note p {
  margin: 0;
  color: #596579;
  font-size: 13px;
}

.mini-post {
  display: grid;
  gap: 5px;
  margin-top: 0;
  padding: 14px 16px;
  border-color: #dfe5ee;
  border-radius: var(--radius-ui);
  background: #ffffff;
  transition:
    border-color 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.mini-post:hover {
  border-color: #b9c7d8;
  box-shadow: 0 10px 24px rgba(14, 25, 71, 0.08);
  transform: translateY(-1px);
}

.mini-post strong {
  color: #0e1947;
  font-size: 16px;
  line-height: 1.35;
}

.mini-post span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clubs-page {
  --club-ink: #303030;
  --club-canvas: #dbdbdb;
  --club-card: #ffffff;
  --club-fog: #f2f2f2;
  --club-ash: #ededed;
  --club-smoke: #c2c2c2;
  --club-graphite: #808080;
  --club-sand: #e2ceb8;
  --club-slate: #6a728e;
  --club-yellow: #f9f5a2;
  max-width: 1440px;
  min-height: calc(100vh - var(--topbar-height) - 60px); /* fallback */
  min-height: calc(100dvh - var(--topbar-height) - 60px);
  margin: 0 auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--club-canvas);
  color: var(--club-ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.clubs-hero-widget,
.clubs-index-widget,
.club-widget,
.clubs-state-widget {
  border: 0;
  border-radius: 20px;
  background: var(--club-card);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px 0;
}

.clubs-hero-widget {
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 26px;
}

.clubs-hero-widget h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}

.clubs-hero-widget h1 span {
  background: var(--club-yellow);
}

.clubs-hero-widget p {
  max-width: 680px;
  margin: 0;
  color: var(--club-ink);
  font-size: 15px;
  line-height: 1.55;
}

.club-caption {
  margin-bottom: 8px;
  color: var(--club-ink);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.club-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.club-hero-meta span,
.club-actions a,
.club-actions span,
.club-info-stack a,
.club-info-stack span,
.club-category-list span {
  border-radius: 20px;
  background: var(--club-fog);
  color: var(--club-ink);
}

.club-hero-meta span {
  padding: 8px 18px;
  font-size: 13px;
}

.clubs-index-widget {
  margin-top: 24px;
  padding: 18px;
}

.club-category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.club-category-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
}

.club-category-list b,
.club-category-list em {
  font: inherit;
}

.club-category-list em {
  color: var(--club-graphite);
}

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-auto-flow: dense;
  gap: 24px;
  margin-top: 24px;
}

.club-widget {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.club-widget:nth-child(9n + 1),
.club-widget:nth-child(9n + 5) {
  grid-row: span 2;
  min-height: 400px;
}

.club-widget.is-sand {
  background: var(--club-sand);
}

.club-widget.is-slate {
  background: var(--club-slate);
}

.club-widget.is-slate,
.club-widget.is-slate .club-category,
.club-widget.is-slate .club-description,
.club-widget.is-slate .club-actions span {
  color: #ffffff;
}

.club-card-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.club-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--club-fog);
  color: var(--club-ink);
  font-size: 17px;
  line-height: 1;
  box-shadow: rgba(0, 0, 0, 0.18) 0 1px 4px 0;
}

.club-category {
  margin: 0 0 4px;
  color: var(--club-graphite);
  font-size: 12px;
  line-height: 1.4;
}

.club-widget h2 {
  margin: 0;
  color: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.club-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--club-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.club-widget:nth-child(9n + 1) .club-description,
.club-widget:nth-child(9n + 5) .club-description {
  -webkit-line-clamp: 12;
}

.club-info-stack {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.club-info-stack a,
.club-info-stack span {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 7px 12px;
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-info-stack a:hover,
.club-actions a:hover {
  background: var(--club-ash);
}

.club-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.club-actions a,
.club-actions span {
  padding: 7px 12px;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.clubs-state-widget {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
}

.clubs-state-widget strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  font-size: 20px;
}

.clubs-state-widget p {
  margin: 0;
  color: var(--club-graphite);
}

.clubs-main {
  padding: var(--topbar-height) 0 0;
}

.clubs-main .clubs-page {
  max-width: none;
  min-height: calc(100vh - var(--topbar-height)); /* fallback */
  min-height: calc(100dvh - var(--topbar-height));
  margin: 0;
  padding: 24px 28px 28px;
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.38), transparent 26%),
    radial-gradient(circle at 16% 6%, rgba(10, 77, 179, 0.35), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, #d6dce2), #c9d1d8 42%, color-mix(in srgb, var(--sidebar-brand) 22%, #d8d8d8));
}

.clubs-main .club-widget,
.clubs-main .clubs-state-widget {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px 0;
}

.clubs-slogan-panel {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  break-inside: avoid;
  /* No bottom margin/padding: the masonry column's 24px gap alone separates the
     hero from the first card, so cards sit close instead of drifting far down. */
  padding: 0 16px 0 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  /* Speak the site's brand voice (Inter) rather than the board's mono zine face. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Eyebrow chip, matching the Campus Info / profile heroes. */
.clubs-slogan-panel .club-caption {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: var(--radius-ui);
  background: #0e1947;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
}

.clubs-slogan-panel h1 {
  max-width: 620px;
  margin: 0;
  color: #0e1947;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Brand-yellow highlighter, echoing the Campus Info hero's accent. */
.clubs-slogan-panel mark {
  padding: 0 0.06em;
  background: #ffdb16;
  color: #0e1947;
}

.clubs-slogan-panel p:not(.club-caption) {
  max-width: 560px;
  margin: 16px 0 0;
  color: #526079;
  font-size: 15px;
  line-height: 1.6;
}

.club-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.club-filter-tags button {
  min-height: 34px;
  border: 1px solid rgba(14, 25, 71, 0.18);
  border-radius: var(--radius-ui);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #0e1947;
  font-size: 13px;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 2px 0;
}

.club-filter-tags button.is-active {
  border-color: #0e1947;
  background: #0e1947;
  color: #ffffff;
  box-shadow:
    rgba(0, 0, 0, 0.18) 0 1px 4px 0;
}

.club-filter-panel {
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(0, 11, 52, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.club-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8791a6;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.club-filter-head strong {
  color: #0e1947;
  font-size: 13px;
  letter-spacing: 0;
}

.clubs-main .clubs-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  margin-top: 0;
}

.club-masonry-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clubs-main .club-widget {
  position: relative;
  min-height: 0;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  break-inside: avoid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--club-ink);
  cursor: pointer;
}

.clubs-main .club-widget.is-wide {
  width: 100%;
}

.club-image-wrap {
  width: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: #ffffff;
}

.club-image-wrap img {
  width: 100%;
  min-height: 0;
  max-height: none;
  display: block;
  height: auto;
  object-fit: initial;
  filter: saturate(0.94) contrast(0.98);
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.club-image-wrap.is-fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.62), transparent 24%),
    linear-gradient(135deg, rgba(0, 15, 70, 0.92), rgba(1, 48, 167, 0.7));
}

.club-widget:hover .club-image-wrap img {
  transform: scale(1.015);
  filter: saturate(1.02) contrast(1);
}

.club-image-fallback {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  color: #ffffff;
  text-align: center;
}

.club-image-fallback span {
  font-size: 38px;
  line-height: 1;
}

.club-image-fallback small {
  font-size: 12px;
  opacity: 0.78;
}

.club-card-overlay {
  position: static;
  display: grid;
  gap: 6px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 11, 52, 0.08);
  background: rgba(255, 255, 255, 0.95);
  color: var(--club-ink);
  backdrop-filter: none;
}

.club-card-overlay span {
  color: var(--club-graphite);
  font-size: 11px;
}

.club-card-overlay strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.clubs-load-more {
  width: min(420px, calc(100% - 32px));
  margin: 18px auto 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(0, 11, 52, 0.72);
  font-size: 13px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px 0;
}

.clubs-load-more.is-complete {
  opacity: 0.72;
}

/* Two side-by-side windows: the club window + a separate event-history window.
   align-items: stretch makes them the same height. */
.club-modal-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-height: 88vh;
}

/* Left window is wider than the events window so the logo column has room to
   render the mark at its natural size instead of leaving a tall white gap. */
.club-detail-modal {
  flex: 1.7 1 0;
  min-width: 0;
  max-width: 980px;
  max-height: min(88vh, 980px);
  overflow: auto;
  border-radius: 20px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  scrollbar-width: none;
}

/* The second window (event history): grey padded panel with separate poster cards. */
.club-events-modal {
  flex: 1 1 0;
  min-width: 0;
  max-width: 620px;
  max-height: min(88vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px;
  border-radius: 20px;
  background: #dbdbdb;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.club-detail-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Two columns: logo card on the left, copy on the right. The events list is a
   separate window beside this one, so the whole screen reads as three columns. */
/* Logo column is `auto` (content-width): the card shrink-wraps to the logo, so
   its width adapts to each logo's aspect ratio. Copy takes the remaining space. */
.club-detail-body {
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr);
  gap: 22px;
  padding: 22px;
  background: #dbdbdb;
  align-items: start;
}

/* Fixed height + logo scaled to fill it (height: 100% below) means EVERY logo —
   wide, tall or square — touches the top and bottom edges. The card width then
   follows the logo's own proportion: wide marks get a wide card, tall marks a
   narrow one. max-width caps ultra-wide banners so the copy keeps its room. */
.club-detail-media {
  height: clamp(300px, 30vw, 420px);
  min-width: 200px;
  max-width: 460px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px 0;
}

.club-detail-media img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.club-detail-copy {
  min-width: 0;
  padding: 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px 0;
}


.club-events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 12px;
}

.club-events-head span {
  font-size: 14px;
  font-weight: 950;
  color: #111111;
}

.club-events-head strong {
  font-size: 12px;
  font-weight: 800;
  color: #647084;
}

.club-events-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  gap: 14px;
  overflow-y: auto;
  padding: 2px;
}

.club-event-card {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px 0;
  color: #111111;
  text-decoration: none;
}

.club-event-card:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0 6px 14px 0;
}

/* Full poster — natural aspect ratio, not cropped. */
.club-event-poster {
  display: block;
  width: 100%;
  height: auto;
  background: #eef2f8;
}

.club-event-body {
  display: grid;
  gap: 3px;
  padding: 12px 16px 14px;
}

.club-event-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  color: #0e1947;
}

.club-event-meta {
  font-size: 12px;
  color: #647084;
}

.club-detail-category {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 20px;
  padding: 7px 14px;
  background: #f2f2f2;
  color: #303030;
  font-size: 12px;
}

.club-detail-copy p {
  margin: 0 0 18px;
  color: #303030;
  font-size: 14px;
  line-height: 1.65;
}

.club-detail-links {
  display: grid;
  gap: 8px;
}

.club-detail-links a {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  padding: 9px 14px;
  background: #f2f2f2;
  color: #303030;
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-detail-links a:hover {
  background: #ededed;
}

.club-wall-panel {
  display: grid;
  gap: 14px;
  padding: 0 22px 22px;
  background: #dbdbdb;
}

.club-wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 5px 0;
}

.club-wall-head span {
  color: #808080;
  font-size: 12px;
  font-weight: 800;
}

.club-wall-head h3 {
  margin: 6px 0;
  color: #303030;
  font-size: 20px;
  line-height: 1.25;
}

.club-wall-head p {
  max-width: 620px;
  margin: 0;
  color: #5d6470;
  font-size: 13px;
  line-height: 1.5;
}

.club-wall-head strong {
  flex: 0 0 auto;
  border-radius: var(--radius-ui);
  padding: 8px 10px;
  background: #f2f2f2;
  color: #303030;
  font-size: 12px;
}

.club-wall-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.club-wall-compose-button {
  min-height: 34px;
  border-color: #d7d7d7;
  background: #303030;
  color: #ffffff;
}

.club-wall-compose-button:hover {
  background: #111111;
}

.club-post-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 5px 0;
}

.club-post-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
}

.club-post-form label {
  display: grid;
  gap: 7px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.club-post-form input,
.club-post-form select,
.club-post-form textarea {
  width: 100%;
  border: 1px solid #cfd7e4;
  border-radius: var(--radius-ui);
  padding: 10px 12px;
  background: #f8fafc;
  color: #111827;
  font: inherit;
}

.club-post-form textarea {
  resize: vertical;
}

.club-post-form .primary-button {
  justify-content: center;
  min-height: 40px;
  background: #303030;
}

.club-history-list {
  display: grid;
  gap: 10px;
}

.club-history-list .mini-post,
.club-history-empty {
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.10) 0 2px 5px 0;
}

.club-history-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  color: #303030;
}

.club-history-empty span {
  color: #6b7280;
  font-size: 13px;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.admin-tabs button {
  min-height: 34px;
  padding: 0 12px;
}

.admin-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.admin-row p,
.notification-item p,
.log-row p {
  margin: 5px 0;
  color: var(--muted);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-actions button,
.admin-row > button {
  min-height: 32px;
  padding: 0 10px;
  background: var(--surface-muted);
}

.bottom-nav {
  display: none;
}

.mobile-only {
  display: none;
}

@media (max-width: 1580px) {
  .feed-hot-rail {
    display: none;
  }

  .feed-top-row,
  .feed-layout {
    grid-template-columns: 44px minmax(0, 860px) 260px;
    gap: 14px;
  }
}

@media (max-width: 1280px) {
  .discussion-hero {
    grid-template-columns: 1fr;
  }

  .discussion-copy {
    min-height: 280px;
  }

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

  .origin-map {
    min-height: 0;
    height: auto;
  }

  .campus-info-page {
    width: min(960px, calc(100% - 28px));
  }

  .campus-info-hero {
    min-height: 190px;
    padding: 30px 28px;
  }

  .campus-info-hero::before,
  .campus-info-hero::after {
    opacity: 0.42;
  }

  .campus-feature-row,
  .campus-pick-grid,
  .campus-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campus-news-strip {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .campus-question-grid {
    grid-template-columns: 1fr;
  }

  .feed-top-row {
    grid-template-columns: 44px minmax(0, 760px) auto;
    gap: 14px;
  }

  .feed-layout {
    grid-template-columns: minmax(0, 760px);
    gap: 0;
  }

  .feed-column {
    grid-column: 1;
  }

  .feed-hot-rail,
  .feed-sidebar {
    display: none;
  }

  .masonry-feed {
    max-width: 760px;
  }

  .board-tabs {
    width: min(100%, 760px);
  }

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

  .profile-avatar-edit-controls {
    grid-template-columns: 1fr;
  }

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

@media (max-height: 880px) {
  .feed-hot-rail {
    display: none;
  }

  .feed-top-row,
  .feed-layout {
    grid-template-columns: 44px minmax(0, 860px) 260px;
    gap: 14px;
  }
}

@media (max-width: 1280px) and (max-height: 880px) {
  .feed-top-row {
    grid-template-columns: 44px minmax(0, 760px) auto;
  }

  .feed-layout {
    grid-template-columns: minmax(0, 760px);
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-width: 78px;
  }

  .sidebar {
    width: var(--sidebar-width);
    align-items: center;
    padding: 14px 9px;
  }

  .brand-block div:not(.brand-mark),
  .nav-item span:last-child,
  .board-link span,
  .section-label,
  .tag-follow-section,
  .hot-posts-widget,
  .admin-link {
    display: none;
  }

  .sidebar-toggle {
    display: none;
  }

  .nav-item,
  .board-link {
    justify-content: center;
    width: 44px;
  }

  .board-link::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--soft);
  }

  .board-link.is-active::before {
    background: var(--sidebar-brand);
  }

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

  .profile-hero-cover {
    height: 100px;
  }

  .profile-hero-identity {
    margin-top: -40px;
  }

  .feed-top-row {
    grid-template-columns: 44px minmax(0, 600px) auto;
  }

  .feed-layout {
    grid-template-columns: minmax(0, 600px);
  }

  .feed-column {
    grid-column: 1;
  }

  .feed-sidebar {
    display: none;
  }

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

  .discussion-main {
    padding-inline: 16px;
  }

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

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

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

  .faculty-level-booklet,
  .booklet-children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .faculty-professor-toolbar {
    grid-template-columns: 1fr;
  }

  .professor-add-form,
  .review-select-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --sidebar-width: 0px;
    --topbar-height: 60px;
  }

  body {
    font-size: 14px;
  }

  .game-squad-main {
    padding: var(--topbar-height) 0 76px;
  }

  .game-squad-page {
    height: calc(100vh - var(--topbar-height) - 76px); /* fallback */
    height: calc(100dvh - var(--topbar-height) - 76px);
    min-height: 520px;
    border-radius: 0;
  }

  .squadpool-frame-shell {
    border-radius: 0;
  }

  .discussion-main {
    padding: calc(var(--topbar-height) + 14px) 12px 88px;
  }

  .discussion-hero,
  .discussion-question-section {
    padding: 12px;
  }

  .discussion-copy {
    min-height: 250px;
    padding: 18px;
  }

  .discussion-poll-header {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .faculty-subject-grid {
    grid-template-columns: 1fr;
  }

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

  .discussion-copy h1 {
    font-size: 42px;
  }

  .origin-map {
    min-height: 0;
    height: auto;
  }

  .campus-info-main {
    padding: var(--topbar-height) 0 88px;
  }

  .campus-info-page {
    width: 100%;
  }

  .campus-info-hero {
    min-height: 230px;
    padding: 58px 18px 24px;
  }

  .campus-hero-tabs {
    top: 12px;
    width: calc(100% - 24px);
    justify-content: space-between;
  }

  .campus-hero-tabs button {
    min-width: 0;
    flex: 1;
  }

  .campus-hero-copy h1 {
    font-size: 42px;
  }

  .campus-feature-row,
  .campus-pick-grid,
  .campus-event-grid,
  .campus-news-strip,
  .campus-question-grid {
    grid-template-columns: 1fr;
  }

  .campus-feature-row,
  .campus-section {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .auth-modal {
    width: min(100% - 20px, 440px);
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .auth-modal:not(.auth-register-modal) .auth-info-panel {
    display: none;
  }

  .auth-info-panel,
  .auth-register-profile-panel {
    border-right: 0;
  }

  .auth-info-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .auth-register-profile-panel {
    border-bottom: 1px solid #d8e1ef;
  }

  .auth-info-panel,
  .auth-form-panel,
  .auth-register-profile-panel {
    padding: 22px;
  }

  .auth-register-modal {
    width: min(100% - 20px, 460px);
  }

  .auth-register-profile-panel {
    gap: 12px;
  }

  .auth-register-panel-heading strong {
    font-size: 20px;
  }

  .auth-register-edit-card,
  .auth-form {
    padding: 14px;
  }

  .auth-avatar-dropzone {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px;
  }

  .auth-avatar-dropzone .auth-avatar-copy small {
    display: none;
  }

  .avatar-crop-stage {
    width: min(128px, 42vw);
    height: min(128px, 42vw);
  }

  .auth-register-profile-panel input:not([type="range"]):not([type="file"]),
  .auth-register-profile-panel select,
  .auth-form input,
  .auth-send-code-button {
    min-width: 0;
  }

  .auth-modal .primary-button,
  .auth-form > .auth-send-code-button {
    width: 100%;
  }

  .auth-code-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
    align-items: end;
    gap: 8px;
  }

  .auth-code-row .auth-send-code-button {
    width: auto;
    padding: 0 10px;
  }

  .profile-page {
    padding: 14px 12px 88px;
  }

  .profile-field-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profile-field-head span {
    max-width: none;
    text-align: left;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .mobile-only {
    display: grid;
  }

  .sidebar {
    width: min(290px, 86vw);
    transform: translateX(-104%);
    transition: transform 180ms ease;
    align-items: stretch;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  /* Lock the page while the slide-in nav is open so iOS Safari can't scroll the
     content under the fixed sidebar (the source of the "UI 变奇怪" glitch). */
  body.has-menu-open {
    overflow: hidden;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(10, 16, 34, 0.42);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
  }

  /* Keep the open menu's own scroll from chaining to the locked page. */
  .sidebar.is-open {
    overscroll-behavior: contain;
  }

  .sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .sidebar-toggle {
    display: none;
  }

  .brand-block div:not(.brand-mark),
  .nav-item span:last-child,
  .board-link span,
  .section-label,
  .tag-follow-section,
  .admin-link {
    display: block;
  }

  .nav-item,
  .board-link {
    width: 100%;
    justify-content: flex-start;
  }

  .board-link::before {
    display: none;
  }

  .topbar {
    left: 0;
    gap: 8px;
    padding: 9px 10px;
  }

  .topbar .mobile-create-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
  }

  .topbar .notification-button,
  .topbar .profile-chip {
    display: none;
  }

  .search-shell {
    position: static;
    transform: none;
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .desktop-action,
  .profile-chip span:not(.avatar) {
    display: none;
  }

  .main-content {
    margin-left: 0;
    padding: calc(var(--topbar-height) + 12px) 10px 64px;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .faculty-detail-hero {
    grid-template-columns: 1fr;
    padding: 28px 18px;
  }

  .faculty-detail-hero > span {
    width: 92px;
  }

  .faculty-search-form {
    grid-template-columns: 1fr;
  }

  .faculty-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .faculty-detail-actions > div:last-child {
    justify-content: flex-start;
  }

  .faculty-level-booklet,
  .booklet-children {
    grid-template-columns: 1fr;
  }

  .faculty-subject-grid,
  .professor-grid,
  .professor-add-form,
  .review-slider-grid,
  .review-select-grid {
    grid-template-columns: 1fr;
  }

  .faculty-subject-filter-block {
    position: relative;
    gap: 6px;
  }

  .faculty-subject-filter-block.is-collapsed .faculty-subject-filters {
    max-height: 158px;
    overflow: hidden;
  }

  .faculty-subject-filter-block.is-collapsed::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 34px;
    left: 0;
    height: 38px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 82%);
  }

  .faculty-area-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    min-height: 34px;
    border: 1px solid rgba(217, 223, 235, 0.9);
    border-radius: var(--radius-ui);
    background: #ffffff;
    color: color-mix(in srgb, var(--faculty-detail-theme, #0e1947) 72%, #0e1947);
    font-size: 12px;
    font-weight: 900;
  }

  .faculty-area-chip {
    min-height: 29px;
    padding: 0 9px;
    font-size: 11px;
    gap: 5px;
  }

  .booklet-row {
    min-height: 38px;
    padding: 0 10px;
    font-size: 13px;
  }

  .faculty-course-results,
  .faculty-filter-panel {
    gap: 12px;
  }

  .faculty-search-expanded-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .subject-card-cover {
    grid-template-columns: 78px minmax(0, 1fr) 92px;
    gap: 12px 10px;
  }

  .subject-card-side {
    grid-column: 3;
    grid-row: 1;
    justify-items: end;
    align-self: start;
    gap: 6px;
    text-align: right;
  }

  .subject-card-side span {
    max-width: 92px;
    font-size: 10px;
    line-height: 1.18;
  }

  .faculty-subject-card.is-en-card .subject-offered-side {
    display: none;
  }

  .faculty-subject-card.is-en-card .subject-offered-inline {
    display: block;
  }

  .faculty-subject-card.is-en-card .subject-card-side {
    justify-content: start;
  }

  .faculty-subject-card.is-zh-card .subject-cn-name {
    font-size: 15px;
    line-height: 1.12;
  }

  .faculty-subject-card.is-zh-card h3:not(.subject-cn-name) {
    font-size: 16px;
    line-height: 1.14;
  }

  .faculty-subject-card h3.subject-en-name-only {
    font-size: 17px;
  }

  .subject-score-tile {
    min-height: 74px;
  }

  .subject-score-tile strong {
    font-size: 24px;
  }

  .subject-code {
    font-size: 12px;
  }

  .subject-meta span,
  .review-scoreline span {
    font-size: 10px;
  }

  .faculty-subject-card p {
    font-size: 12px;
    line-height: 1.42;
  }

  .subject-card-review-button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
  }

  .subject-review-summary,
  .subject-review-item {
    grid-template-columns: 1fr;
  }

  .subject-review-summary .subject-score-tile,
  .review-item-score {
    width: 92px;
  }

  .feed-top-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  /* On phones the topbar "+" mobile-create-button is the publish entry, so the
     inline feed button steps aside to keep the tab row uncrowded. */
  .feed-create-rail {
    display: none;
  }

  .feed-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .feed-rail-spacer {
    display: none;
  }

  .sort-menu summary {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .masonry-feed {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .post-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px 10px;
  }

  .post-card-body {
    padding: 0;
  }

  .thread-meta {
    padding-right: 96px;
  }

  .media-strip {
    width: 100%;
    padding: 0;
  }

  .card-actions {
    gap: 14px;
  }

  .card-actions button {
    padding: 0;
  }

  /* Mobile feed card: full-width content (title/body no longer pushed into a
     narrow column beside the avatar), and actions stay on one row. */
  .post-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 16px 14px;
  }

  .thread-avatar {
    display: none;
  }

  /* Mobile feed: clamp long post bodies to a few lines and reveal the
     "展开全文" toggle. Tapping it (toggle-post-body) adds .is-expanded. */
  .post-card-text.is-collapsible:not(.is-expanded) p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }

  .post-card-text.is-collapsible:not(.is-expanded) {
    position: relative;
  }

  /* Course-review comments reuse the same clamp (they render their own markup,
     so the rule is duplicated for the .review-post-comment element). */
  .review-post-comment.is-collapsible:not(.is-expanded) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }

  .post-expand-toggle {
    display: inline-flex;
  }

  .card-action-group {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .modal-backdrop {
    padding: 8px;
    align-items: end;
  }

  .modal-card,
  .drawer-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }

  .detail-modal,
  .user-profile-modal {
    width: 100%;
  }

  .detail-post,
  .comment-section,
  .user-profile-posts {
    padding-left: 16px;
    padding-right: 16px;
  }

  .detail-post h1 {
    font-size: 24px;
  }

  .user-profile-summary {
    padding-left: 16px;
    padding-right: 16px;
  }

  .user-profile-cover {
    margin-left: -16px;
    margin-right: -16px;
  }

  .user-profile-identity,
  .user-profile-stats {
    grid-template-columns: 1fr;
  }

  .create-type-tabs,
  .create-two-column,
  .create-rating-grid {
    grid-template-columns: 1fr;
  }

  .drawer-card {
    position: static;
  }

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

  .admin-actions {
    justify-content: flex-start;
  }

  .comment-item {
    margin-left: calc(var(--depth) * 8px);
  }

  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 46px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
  }

  .bottom-nav button {
    display: grid;
    place-items: center;
    gap: 1px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    padding: 4px 0;
  }

  .bottom-nav span {
    font-size: 9px;
  }
}

@media (max-width: 980px) {
  .clubs-desktop-top,
  .club-detail-body {
    grid-template-columns: 1fr;
  }

  /* Stack the two windows on narrow screens. */
  .club-modal-group {
    flex-direction: column;
    align-items: stretch;
    max-height: none;
  }

  .club-detail-modal,
  .club-events-modal {
    width: 100%;
    max-height: none;
  }

  .club-post-grid {
    grid-template-columns: 1fr;
  }

  .club-wall-head {
    display: grid;
  }

  .clubs-main .clubs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .club-masonry-column {
    gap: 18px;
  }

  .clubs-main .club-widget.is-wide {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .clubs-main {
    margin-left: 0;
    padding: var(--topbar-height) 0 76px;
  }

  .clubs-main .clubs-page {
    padding: 14px;
  }

  .clubs-slogan-panel {
    min-height: auto;
    padding: 18px 0;
    margin: 0 0 14px;
  }

  .clubs-slogan-panel h1 {
    font-size: 38px;
  }

  .clubs-main .clubs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .club-masonry-column {
    gap: 14px;
  }

  .clubs-main .club-widget.is-wide,
  .clubs-main .club-widget.is-tall {
    width: 100%;
  }

  .club-card-overlay {
    padding: 9px;
  }

  .club-card-overlay strong {
    font-size: 13px;
  }

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

  .club-detail-body {
    padding: 12px;
  }

  .club-wall-panel {
    padding: 0 12px 12px;
  }

  .club-detail-media {
    min-height: 240px;
  }
}

/* ---- Poster wall --------------------------------------------------------- */

/* Full-bleed board that starts right under the topbar; the toolbar floats over
   its top row so the wall is truly the whole area. */
.posters-main {
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
  padding: var(--topbar-height) 0 0;
  background: #eceef2;
}

.posters-page {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Toolbar floats over the top of the wall; the empty parts of the row let
   clicks fall through to the board underneath. */
.posters-toolbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  pointer-events: none;
}

.posters-filter,
.poster-upload-button {
  pointer-events: auto;
}

.poster-upload-button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* Segmented pill filter, styled after the dark rounded switcher reference. */
.posters-filter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  background: #14171d;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.posters-filter::-webkit-scrollbar {
  display: none;
}

.poster-filter-pill {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.poster-filter-pill:hover {
  color: #ffffff;
}

.poster-filter-pill.is-active {
  background: #2c313b;
  color: #ffffff;
}

.poster-upload-button {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.poster-upload-button:hover {
  filter: brightness(1.12);
}

/* The wall fills the entire board area (edge to edge, up to the topbar) with the
   toolbar floating over its top. Scrollbars are hidden — panning is by dragging
   empty space; zoom is the mouse wheel. */
.poster-wall {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    #f4f5f8;
  background-size: 40px 40px, 40px 40px, auto;
  overflow: auto;
  scrollbar-width: none;
  cursor: grab;
  /* iOS Safari otherwise claims every touch-drag as a native scroll/zoom gesture
     and fires pointercancel instead of pointermove, so our drag-to-pan never runs
     — leaving off-screen posters unreachable. Disable native touch gestures so
     the pointer handlers own the pan. */
  touch-action: none;
}

.poster-wall::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.poster-wall.is-panning {
  cursor: grabbing;
}

/* Inner canvas is 1.5× the viewport; the default (min) zoom scales it to fit the
   screen, so the board shows 50% more area than a viewport-sized one. Wheel
   zooms in from there. */
.poster-canvas {
  position: relative;
  width: 150%;
  height: 150%;
  transform-origin: 0 0;
}

.poster-wall-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #8a93a3;
  font-size: 14px;
  text-align: center;
}

.poster-card {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.poster-card.is-own {
  cursor: grab;
}

.poster-card.is-own.is-dragging {
  cursor: grabbing;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.3);
}

.poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.poster-tag-chip {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.poster-delete {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.poster-card.is-own:hover .poster-delete {
  opacity: 1;
}

.poster-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.poster-upload-form .form-error {
  margin: 0;
  color: var(--danger, #d64545);
  font-size: 13px;
}

/* Highlight the wall while dragging an image file over it. */
.poster-wall.is-drop-target {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand);
  background-color: #eef2fb;
}

.poster-file-ready {
  padding: 9px 12px;
  border-radius: var(--radius-ui);
  background: #eef2fb;
  border: 1px solid #cfd8ee;
  color: #0e1947;
  font-size: 13px;
}

.poster-file-ready strong {
  font-weight: 800;
}

@media (max-width: 720px) {
  .posters-main {
    padding: var(--topbar-height) 0 0;
  }

  .poster-upload-button {
    right: 10px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .poster-form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Reddit panel: a SECOND window parallel to the review modal (migration 0021).
   The two cards sit side by side in .dual-modal-row; each scrolls independently.
   Stacks vertically on narrow screens. --- */
.dual-modal-row {
  display: flex;
  gap: 16px;
  align-items: stretch;            /* both windows share one height */
  justify-content: center;
  max-width: calc(100vw - 48px);
}

.reddit-panel-modal {
  flex: 0 0 360px;
  width: 360px;
  max-width: 360px;
  height: min(760px, 90vh);        /* tall parallel window */
  max-height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Left review window matches the Reddit window's height (equal parallel windows).
   overflow-y: auto means the scrollbar only appears when its content actually
   overflows — short review lists show no scroll track. */
.dual-modal-row .subject-review-modal {
  height: min(760px, 90vh);
  max-height: 90vh;
}

.reddit-panel-modal .modal-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e5eaf2;
  background: #ffffff;
}

.reddit-panel-modal .modal-header h2 {
  font-size: 16px;
  margin: 0;
}

.reddit-panel-modal .reddit-column-note {
  padding: 12px 18px 0;
  margin: 0;
}

.reddit-panel-modal .reddit-thread-list {
  padding: 12px 18px 18px;
  overflow-y: auto;
}

@media (max-width: 860px) {
  .dual-modal-row {
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - 32px); /* fallback */
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }

  .reddit-panel-modal {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
  }

  .dual-modal-row .subject-review-modal {
    height: auto;
    max-height: none;
  }
}

/* --- (legacy) embedded Reddit column styles, kept harmless below --- */
.subject-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.subject-review-main {
  min-width: 0;
}

.subject-reddit-column {
  min-width: 0;
  border-left: 1px solid #e5eaf2;
  padding: 16px 20px 18px 18px;
}

.reddit-column-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reddit-column-heading h3 {
  margin: 0;
  font-size: 15px;
}

.reddit-column-heading span {
  font-size: 11px;
  font-weight: 800;
  color: #ff4500;
  background: #fff0e8;
  border-radius: 999px;
  padding: 1px 8px;
}

.reddit-column-note {
  margin: 6px 0 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted, #7a8699);
}

.reddit-thread-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reddit-column-hint {
  font-size: 12px;
  color: var(--muted, #7a8699);
  padding: 8px 0;
}

.reddit-thread-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5eaf2;
  border-radius: var(--radius-ui, 12px);
  background: #fbfcfe;
}

.reddit-thread-score {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  height: 44px;
  border-radius: 10px;
  color: #22303f;
}

.reddit-thread-score span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.reddit-thread-score strong {
  font-size: 17px;
  line-height: 1;
}

.reddit-thread-score em {
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.reddit-thread-score.is-score-1 { background: #ff8f95; }
.reddit-thread-score.is-score-2 { background: #ffbf69; }
.reddit-thread-score.is-score-3 { background: #ffeb6a; }
.reddit-thread-score.is-score-4 { background: #a8e875; }
.reddit-thread-score.is-score-5 { background: #52d69d; }
.reddit-thread-score.is-score-empty { background: #e5eaf2; color: #7a8699; }
/* Engagement block (upvotes + comments) — replaces the old AI score tile. */
.reddit-thread-score.is-votes { background: #fff0e8; color: #d93a00; }
.reddit-thread-score.is-votes span { font-size: 10px; line-height: 1; }
.reddit-thread-score.is-votes em { color: #8a5a44; }

.reddit-thread-body {
  min-width: 0;
}

.reddit-thread-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text, #22303f);
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

a.reddit-thread-title:hover {
  color: #ff4500;
  text-decoration: underline;
}

.reddit-thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #7a8699);
}

@media (max-width: 720px) {
  .subject-review-body {
    grid-template-columns: 1fr;
  }

  .subject-reddit-column {
    border-left: none;
    border-top: 1px solid #e5eaf2;
    padding: 16px 20px 18px;
  }
}