:root {
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #20302d;
  background: #f6f8f7;
  font-size: 16px;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, textarea:focus-visible {
  outline: 2px solid #24836b;
  outline-offset: 2px;
}
[hidden] { display: none !important; }

.topbar {
  border-bottom: 1px solid #dce3e0;
  background: #fff;
}
.topbar-inner {
  max-width: 1100px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
h1 { margin: 0; font-size: 20px; font-weight: 650; }
.member-count { color: #5f716b; font-size: 13px; white-space: nowrap; }
main { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }
.view-tabs {
  display: flex;
  border-bottom: 1px solid #dce3e0;
  gap: 30px;
}
.view-tab {
  min-width: 72px;
  min-height: 52px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #64756e;
  padding: 0 2px;
  font-size: 15px;
}
.view-tab[aria-selected="true"] {
  color: #185c4b;
  border-bottom-color: #208166;
  font-weight: 650;
}
.ask-section { padding-top: 22px; max-width: 800px; }
.conversation {
  min-height: 0;
  max-height: min(60vh, 620px);
  overflow-y: auto;
  padding: 20px 4px 0 0;
}
.conversation:empty { padding: 0; }
.message { max-width: 100%; margin: 0 0 20px; }
.message.user {
  display: flex;
  justify-content: flex-end;
}
.message-text { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.message.user .message-text {
  max-width: min(82%, 580px);
  background: #e5f1ed;
  border-radius: 8px 8px 2px 8px;
  padding: 11px 15px;
}
.message.assistant {
  border-left: 3px solid #46a082;
  padding: 3px 0 2px 15px;
}
.answer-people {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  border-top: 1px solid #e1e8e4;
}
.answer-people li {
  padding: 10px 0;
  border-bottom: 1px solid #e1e8e4;
}
.person-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.person-line strong { font-weight: 650; }
.person-line span { font-size: 13px; color: #5a6c65; overflow-wrap: anywhere; }
.person-note { margin: 5px 0 0; color: #465a51; line-height: 1.6; font-size: 14px; }
.answer-people .tentative .person-note { color: #805b32; }
.ask-form {
  background: #fff;
  border: 1px solid #b9cbc3;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: end;
  gap: 12px;
}
.ask-form:focus-within { border-color: #25866d; }
textarea {
  flex: 1;
  min-width: 0;
  min-height: 64px;
  max-height: 180px;
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: #20302d;
  line-height: 1.5;
}
textarea::placeholder { color: #85958e; }
#submit {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  padding: 0 17px;
  background: #176d57;
  color: #fff;
}
#submit:hover:not(:disabled) { background: #105540; }
.directory { padding-top: 24px; }
.section-heading { margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 14px 12px;
  border-bottom: 1px solid #e0e7e3;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
th { background: #edf2ef; font-size: 13px; font-weight: 650; color: #365147; }
td { font-size: 14px; }
th:nth-child(1) { width: 10%; }
th:nth-child(2) { width: 7%; }
th:nth-child(3) { width: 23%; }
th:nth-child(4), th:nth-child(5) { width: 30%; }
.empty-value { color: #8a9992; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .topbar-inner { height: 58px; padding: 0 16px; }
  h1 { font-size: 18px; }
  main { padding: 0 16px 28px; }
  .view-tabs { gap: 22px; }
  .view-tab { min-height: 48px; }
  .ask-section { padding-top: 14px; }
  .conversation { max-height: 66vh; }
  .ask-form { padding: 10px; }
  textarea { font-size: 16px; }
  .message.user .message-text { max-width: 90%; }
  .directory { padding-top: 18px; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { background: transparent; }
  tr {
    background: #fff;
    border: 1px solid #dce4df;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 6px 12px;
  }
  td {
    display: grid;
    grid-template-columns: minmax(98px, 35%) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
  }
  td:last-child { border-bottom: 0; }
  td::before {
    content: attr(data-label);
    font-size: 12px;
    color: #62766c;
    line-height: 1.5;
  }
}

@media (max-width: 360px) {
  td:nth-child(n + 4) { display: block; }
  td:nth-child(n + 4)::before { display: block; margin-bottom: 3px; }
}