:root { color-scheme: light; --paper: #fafaf8; --ink: #17191d; --muted: #62666d; --line: #d6d7d7; --blue: #244bc9; --soft: #efefeb; font-family: Inter, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; border-radius: 0; }
button { cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 10px 18px; min-height: 44px; }
button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
button:disabled { cursor: default; opacity: .4; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
button.quiet:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
input, select, textarea { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); background: transparent; border: 1px solid var(--line); min-height: 44px; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 4vw; padding: 40px 0 30px; border-bottom: 2px solid var(--ink); }
.masthead h1 { font-size: clamp(36px, 5.2vw, 72px); line-height: 1.08; letter-spacing: -.05em; font-weight: 650; }
.title-dot { color: var(--blue); }
main { margin: 0 4vw; }
.gate { min-height: 55vh; display: grid; place-items: center; }
.access-form { width: min(100%, 460px); border-top: 1px solid var(--ink); padding-top: 24px; }
.input-action { display: flex; gap: 8px; }
.input-action button { flex-shrink: 0; }
.status { min-height: 24px; margin: 12px 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 32px 0 60px; }
aside { border-right: 1px solid var(--line); padding-right: 28px; }
summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px; }
.filter-form { padding-top: 12px; }
.filter-form > label:not(:first-child) { margin-top: 24px; }
.filter-actions { display: flex; gap: 8px; margin-top: 26px; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.section-bar output { color: var(--muted); font-variant-numeric: tabular-nums; }
.results-pane > .status:empty { margin: 0; min-height: 0; }
.school-row { display: grid; width: 100%; grid-template-columns: 100px minmax(0, 1fr) 65px 150px 20px; align-items: center; gap: 16px; padding: 18px 8px 18px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.school-row:hover { background: var(--soft); color: var(--ink); border-color: var(--line); }
.school-identity { min-width: 0; }
.school-identity strong { display: block; font-size: 18px; font-weight: 550; overflow-wrap: anywhere; }
.campus { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.province { color: var(--muted); font-size: 12px; }
.badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge { border: 1px solid #bdc8e7; color: var(--blue); padding: 1px 5px; font-size: 10px; line-height: 18px; white-space: nowrap; }
.row-arrow { color: var(--blue); font-size: 20px; }
.preview { display: grid; place-items: center; width: 100px; height: 75px; background: var(--soft); color: var(--muted); font-size: 11px; overflow: hidden; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.campus-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 20px; gap: 20px; align-items: center; width: 100%; background: transparent; color: var(--ink); text-align: left; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); }
.campus-row:hover { background: var(--soft); color: var(--ink); }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 24px; }
.pagination output { font-size: 12px; font-variant-numeric: tabular-nums; }
dialog { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 24px 32px; max-height: 92dvh; width: min(920px, 94vw); overscroll-behavior: contain; }
dialog::backdrop { background: #17191d99; }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.detail-heading { padding: 30px 0; }
.detail-heading h2 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -.03em; line-height: 1.25; }
.detail-campus { margin: 8px 0 12px; color: var(--muted); }
.detail-section { border-top: 1px solid var(--ink); padding: 16px 0 28px; }
.detail-section h3 { margin-bottom: 18px; }
.field-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 0 24px; }
.field { border-bottom: 1px solid var(--line); padding: 12px 0; min-width: 0; }
.field dt { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo { display: block; border: 0; padding: 0; background: var(--soft); overflow: hidden; aspect-ratio: 4/3; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-dialog { width: min(1300px, 96vw); padding: 16px; }
.image-dialog img { display: block; max-width: 100%; max-height: 76dvh; object-fit: contain; margin: 12px auto 0; }
.sources { border-top: 1px solid var(--line); padding: 16px 0; }
.sources .field-list { grid-template-columns: 1fr; font-size: 12px; }
.generate-form { display: grid; grid-template-columns: 110px 150px minmax(140px, 1fr) auto; align-items: end; gap: 20px; margin-top: 36px; }
.generate-form.has-expiry { grid-template-columns: 110px 150px 220px minmax(140px, 1fr) auto; }
.generated { margin: 24px 0 36px; }
.generated label { margin: 0; }
.generated textarea { margin-top: 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.button-group { display: flex; gap: 8px; }
.invite-row { display: grid; grid-template-columns: minmax(180px, 1fr) 180px 70px 100px; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.invite-row strong { font-weight: 550; overflow-wrap: anywhere; }
.invite-id { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.cell-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.invite-row time, .invite-state { font-size: 12px; }
@media (min-width: 1500px) { body { max-width: 1600px; margin: auto; } }
@media (max-width: 1050px) {
  .catalog-layout { gap: 24px; grid-template-columns: 180px minmax(0, 1fr); }
  aside { padding-right: 18px; }
  .school-row { grid-template-columns: 80px minmax(0, 1fr) 42px 100px 18px; gap: 10px; }
  .school-row .preview { width: 80px; height: 64px; }
  .generate-form, .generate-form.has-expiry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite-row { grid-template-columns: minmax(130px, 1fr) 150px 60px 100px; gap: 12px; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .masthead { margin: 0 20px; padding: 30px 0 24px; }
  main { margin: 0 20px; }
  input, select, textarea { font-size: 16px; }
  .catalog-layout { display: block; padding-top: 18px; }
  aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 22px; }
  summary { min-height: 40px; padding-top: 8px; }
  .filter-form { padding-bottom: 14px; }
  .school-row { grid-template-columns: 72px minmax(0, 1fr) 18px; gap: 6px 12px; padding: 18px 0; }
  .school-row .preview { width: 72px; height: 64px; grid-column: 1; grid-row: 1 / 4; }
  .school-row .school-identity { grid-column: 2; grid-row: 1; }
  .school-row .province { grid-column: 2; grid-row: 2; }
  .school-row .badges { grid-column: 2; grid-row: 3; }
  .school-row .badges:empty { display: none; }
  .school-row .row-arrow { grid-column: 3; grid-row: 1; }
  .campus-row { grid-template-columns: 72px minmax(0, 1fr) 18px; gap: 12px; }
  .campus-row .preview { width: 72px; height: 64px; }
  .school-identity strong { font-size: 16px; }
  .pagination { justify-content: space-between; gap: 10px; }
  dialog { width: calc(100vw - 20px); max-width: none; padding: 18px; max-height: 95dvh; }
  .field-list { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .generate-form { gap: 18px 12px; margin-top: 24px; }
  .generate-form > div:nth-child(3), .generate-form > div:nth-child(4) { grid-column: 1 / -1; }
  .generate-form > button { grid-column: 1 / -1; }
  .invite-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .invite-row > div:first-child { grid-column: 1 / -1; }
  .invite-row > button { grid-column: -2 / -1; justify-self: end; min-width: 100px; }
  .gate { min-height: 50vh; }
}
@media (prefers-reduced-motion: no-preference) { button { transition: background-color .12s, color .12s; } }