/* ==========================================================================
   轻保研 Web · pages.css — 各页面专属版式
   ========================================================================== */

.section {
  margin-top: 54px;
}
.section:first-child {
  margin-top: 0;
}

/* ==========================================================================
   首页 · 头图区
   ========================================================================== */
.hero {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-line);
  padding: 52px 0 56px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 54px;
  align-items: center;
}
.hero__title {
  margin: 14px 0 18px;
}
.hero__lede {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-text-sub);
  max-width: 460px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
  max-width: 520px;
}
.hero__stats dt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--color-text-3);
  margin-bottom: 4px;
}
.hero__stats dd {
  margin: 0;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 26px;
  /* 桌面 26px 算大字号（3:1 即可），手机档降到 22px 就变成正文阈值 4.5:1，
     统一用实心蓝保证两档都达标 */
  color: var(--color-brand-fill);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* 头图拼贴：三张真实摄影 */
.hero__media {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  aspect-ratio: 4 / 3.1;
}
.hero__shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-line-soft);
  box-shadow: var(--sh-2);
}
.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__shot--main {
  grid-row: span 2;
  border-radius: var(--r-xl);
}
.hero__badge {
  position: absolute;
  left: -20px;
  bottom: 22px;
  background: var(--color-card);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 13px 18px;
  max-width: 250px;
}
.hero__badge-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 分类入口 ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--color-card);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--sh-1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}
.cat-card__k {
  font-size: 22px;
  color: var(--color-brand-fill);
  font-weight: 500;
  flex: none;
  line-height: 1;
}
.cat-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cat-card__name {
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.4;
}
.cat-card__desc {
  font-size: 12.5px;
  color: var(--color-text-2);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---------- 院校热度榜 ---------- */
.school-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}
.school-row + .school-row {
  border-top: 1px solid var(--color-line-soft);
}
.school-row__name {
  font-size: 13.5px;
  font-weight: 550;
  flex: none;
  width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.school-row__bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--color-line-soft);
  overflow: hidden;
}
.school-row__bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--color-brand);
  opacity: 0.85;
}
.school-row__n {
  font-size: 13px;
  color: var(--color-text-sub);
  flex: none;
  width: 28px;
  text-align: right;
}
.school-row:hover .school-row__name {
  color: var(--color-brand-deep);
}

/* ---------- 资料卡 ---------- */
.res-card {
  display: flex;
  flex-direction: column;
}
.res-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px 20px;
  align-items: flex-start;
}
.res-card__title {
  font-family: var(--font-body);
  font-weight: 620;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}
.res-card__meta {
  margin-top: auto;
}

/* ==========================================================================
   帖子广场
   ========================================================================== */
.filterbar {
  background: var(--color-card);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--sh-1);
}
.filterbar__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
}
.filterbar__row + .filterbar__row {
  border-top: 1px solid var(--color-line-soft);
}
.filterbar__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
  flex: none;
  width: 54px;
}
.filterbar__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.filterbar__more {
  flex: none;
  align-self: center;
  margin-left: 4px;
}
/* 纯文字的可展开控件（不画箭头，靠文案说清楚） */
.linkish {
  border: 0;
  background: none;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-brand-deep);
  border-bottom: 1px dashed currentColor;
  transition: color 0.16s var(--ease);
}
.linkish:hover {
  color: var(--color-text);
}
.linkish:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.filterbar__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line-soft);
  margin-top: 8px;
  flex-wrap: wrap;
}
.searchbox {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}
.searchbox input {
  width: 100%;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-line);
  background: var(--color-field);
  padding: 0 18px;
  font-size: 14px;
}
.searchbox input:focus {
  outline: none;
  background: var(--color-card);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.searchbox input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.sorttabs {
  display: flex;
  gap: 4px;
  background: var(--color-field);
  border-radius: var(--r-pill);
  padding: 4px;
  flex: none;
}
.sorttabs button {
  height: 34px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-sub);
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.sorttabs button[aria-pressed="true"] {
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: var(--sh-1);
}

.result-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.result-line__n {
  font-family: var(--font-num);
  color: var(--color-brand-deep);
  font-weight: 500;
}

/* ==========================================================================
   帖子详情
   ========================================================================== */
.post-head {
  padding: 34px 34px 26px;
}
.post-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  margin: 14px 0 18px;
  word-break: break-word;
}
.post-head__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line-soft);
  flex-wrap: wrap;
}
.post-body {
  padding: 6px 34px 34px;
}
.post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 34px 26px;
  border-top: 1px solid var(--color-line-soft);
  flex-wrap: wrap;
}

/* 评论 */
.cmt-form {
  display: flex;
  gap: 13px;
  padding: 20px 0;
}
.cmt-form__body {
  flex: 1 1 auto;
  min-width: 0;
}
.cmt-form textarea {
  width: 100%;
  min-height: 84px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-line);
  background: var(--color-field);
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.7;
  resize: vertical;
}
.cmt-form textarea:focus {
  outline: none;
  background: var(--color-card);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.cmt {
  display: flex;
  gap: 13px;
  padding: 18px 0;
  border-top: 1px solid var(--color-line-soft);
}
.cmt__body {
  min-width: 0;
  flex: 1 1 auto;
}
.cmt__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmt__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
}
.cmt__text {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.78;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cmt__acts {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.cmt__replies {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--color-line);
}
.cmt--reply {
  padding: 12px 0 4px;
  border-top: 0;
}

/* ==========================================================================
   发帖 / 编辑
   ========================================================================== */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
}
.editor-title-input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.4;
  padding: 8px 0;
  letter-spacing: -0.01em;
}
.editor-title-input:focus {
  outline: none;
}
/* 无边框输入必须自带可见焦点指示，否则键盘用户会「迷路」 */
.editor-title-input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}
.editor-title-input::placeholder {
  color: var(--color-text-faint);
}
.editor-body {
  width: 100%;
  min-height: 420px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  resize: vertical;
  padding: 0;
}
.editor-body:focus {
  outline: none;
}
.editor-body:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 6px;
  border-radius: var(--r-xs);
}
.editor-body::placeholder {
  color: var(--color-text-faint);
}
.editor-hr {
  height: 1px;
  background: var(--color-line);
  margin: 14px 0 18px;
}
.preview-pane {
  font-size: 15.5px;
}
.draft-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-2);
}

/* 正文残留的 markdown 语法提示条 */
.md-hint {
  background: var(--color-brand-tint);
  color: #2f4a75;
  border-radius: var(--r-md);
  padding: 11px 15px;
  font-size: 12.5px;
  line-height: 1.7;
}

/* ==========================================================================
   登录 / 注册
   ========================================================================== */
.auth-wrap {
  min-height: calc(100vh - var(--header-h) - 260px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--color-card);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
  margin: 40px 0;
}
.auth-aside {
  position: relative;
  background: var(--color-navy);
  min-height: 520px;
}
.auth-aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-aside__text {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  color: #fff;
  z-index: 1;
}
.auth-aside__text h2 {
  color: #fff;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 10px;
  /* 窄屏下这句 15 字标题会只剩一个「标」字孤零零掉到第二行 */
  text-wrap: balance;
}
.auth-aside__text p {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.76);
}
.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.15) 30%, rgba(28, 34, 48, 0.88) 100%);
}
.auth-form {
  padding: 48px 52px;
}
.auth-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 26px;
}
.auth-tabs button {
  border: 0;
  background: transparent;
  padding: 0 0 13px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.auth-tabs button[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-brand);
}

/* ==========================================================================
   用户主页 / 个人中心
   ========================================================================== */
.profile-hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--color-navy);
}
.profile-hero__cover {
  height: 200px;
  position: relative;
}
.profile-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-hero__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.1), rgba(28, 34, 48, 0.62));
}
.profile-hero__body {
  background: var(--color-card);
  padding: 0 32px 26px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}
.profile-hero__avatar {
  margin-top: -46px;
  flex: none;
  position: relative;
  z-index: 1;
}
.profile-hero__id {
  flex: 1 1 240px;
  min-width: 0;
  padding-top: 18px;
}
.profile-hero__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.3;
}
.profile-hero__bio {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 560px;
}
.profile-hero__facts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.profile-hero__cta {
  padding-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kv {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 13.5px;
}
.kv:last-child {
  border-bottom: 0;
}
.kv__k {
  flex: none;
  width: 72px;
  color: var(--color-text-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
}
.kv__v {
  min-width: 0;
  word-break: break-word;
}

.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 20px;
}
.tabs button,
.tabs a {
  border: 0;
  background: transparent;
  padding: 0 0 13px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-sub);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.tabs [aria-selected="true"],
.tabs [aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-brand);
}

/* ==========================================================================
   资料库 / 资讯
   ========================================================================== */
.lib-card {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  align-items: flex-start;
}
.lib-card__cover {
  width: 132px;
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
}
.lib-card__body {
  min-width: 0;
  flex: 1 1 auto;
}
.lib-card__title {
  font-family: var(--font-body);
  font-weight: 640;
  font-size: 16.5px;
  line-height: 1.45;
  margin: 9px 0 6px;
}
.lib-card__sub {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.7;
}
.lib-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.lib-card__stats {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

/* 资料预览表 */
.preview-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
/* 横向可滚动区域要能被键盘聚焦并看得见焦点（窄屏下表格宽 520px，需左右滚动） */
.preview-wrap:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* 滚动提示默认不占位，由 resource.js 实测溢出后再显示（见那里的 syncHint） */
.preview-hint[hidden] {
  display: none;
}
.preview-tbl {
  min-width: 520px;
  font-size: 13px;
}
.preview-tbl th {
  background: var(--color-field);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-sub);
  text-align: left;
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-line);
}
.preview-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-line-soft);
  color: #33383f;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-tbl tr:last-child td {
  border-bottom: 0;
}

/* 文章详情 */
.article-hero {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  background: var(--color-navy);
  min-height: 300px;
  display: flex;
  align-items: flex-end;
}
.article-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.2) 20%, rgba(28, 34, 48, 0.85) 100%);
}
.article-hero__text {
  position: relative;
  z-index: 1;
  padding: 38px 38px 34px;
  color: #fff;
  width: 100%;
}
.article-hero__text h1 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 12px 0 14px;
}
.article-hero__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1199px) {
  .hero {
    padding: 40px 0 44px;
  }
  .hero__grid {
    gap: 34px;
  }
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editor-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
  }
  .auth-form {
    padding: 40px 36px;
  }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__media {
    aspect-ratio: 16 / 10;
    max-width: 640px;
  }
  .hero__badge {
    left: 16px;
  }
  .auth-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-aside {
    min-height: 230px;
  }
  .editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .section {
    margin-top: 36px;
  }
  .hero {
    padding: 26px 0 32px;
  }
  .hero__lede {
    font-size: 14.5px;
  }
  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    margin-top: 28px;
    padding-top: 20px;
  }
  .hero__stats dd {
    font-size: 22px;
  }
  .hero__media {
    aspect-ratio: 3 / 2.4;
    gap: 10px;
  }
  .hero__shot--main {
    grid-row: span 2;
  }
  .hero__badge {
    left: 10px;
    bottom: 10px;
    padding: 10px 13px;
    max-width: 210px;
  }
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cat-card {
    padding: 15px 14px;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
  }
  .cat-card__k {
    font-size: 17px;
  }
  .cat-card__name {
    font-size: 14.5px;
  }
  .cat-card__desc {
    font-size: 11.5px;
  }
  .filterbar {
    padding: 14px 16px;
  }
  .filterbar__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .filterbar__label {
    width: auto;
  }
  .filterbar__opts {
    gap: 7px;
  }
  .chip {
    height: 32px;
    padding: 0 13px;
    font-size: 12.5px;
  }
  .filterbar__foot {
    flex-direction: column;
    align-items: stretch;
  }
  /* 竖排时 flex-basis 作用于高度，会把搜索框撑成 240px 高，这里显式复位 */
  .searchbox {
    flex: 0 0 auto;
    width: 100%;
  }
  .filterbar__foot .btn {
    width: 100%;
  }
  .sorttabs {
    align-self: flex-start;
  }
  .post-head {
    padding: 22px 18px 18px;
  }
  .post-body {
    padding: 4px 18px 22px;
  }
  .post-actions {
    padding: 16px 18px 20px;
  }
  .cmt-form {
    flex-direction: column;
  }
  .lib-card {
    padding: 16px;
    gap: 13px;
  }
  .lib-card__cover {
    width: 96px;
  }
  .lib-card__title {
    font-size: 15px;
  }
  .lib-card__stats {
    display: none;
  }
  .profile-hero__body {
    padding: 0 18px 20px;
    gap: 14px;
  }
  .profile-hero__cover {
    height: 140px;
  }
  .profile-hero__name {
    font-size: 21px;
  }
  .profile-hero__cta {
    width: 100%;
  }
  .profile-hero__cta .btn {
    flex: 1 1 auto;
  }
  .auth-wrap {
    margin: 20px 0;
    border-radius: var(--r-lg);
  }
  .auth-form {
    padding: 26px 20px 32px;
  }
  .auth-aside {
    min-height: 180px;
  }
  .auth-aside__text {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .auth-aside__text h2 {
    font-size: 19px;
  }
  .article-hero {
    min-height: 240px;
    border-radius: var(--r-lg);
  }
  .article-hero__text {
    padding: 22px 18px 22px;
  }
  /* 帖子详情侧栏的作者卡在手机上重复（正文头部已有作者信息），隐藏以缩短页面 */
  .rail [data-author-card] {
    display: none;
  }
  .tbl thead {
    display: none;
  }
  .tbl td {
    display: block;
    padding: 6px 0;
    border: 0;
  }
  .tbl tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line-soft);
  }
}

/* ==========================================================================
   面包屑 / 侧栏要点列表
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-2);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.crumbs a {
  color: var(--color-text-sub);
}
.crumbs a:hover {
  color: var(--color-brand-deep);
}
.crumbs span {
  color: var(--color-text-2);
}

.guideline {
  margin-top: 10px;
}
/* 用浏览器原生的列表标记（::marker），而不是自己用 CSS 画一个圆点——
   自绘几何图形属于被禁的「自造素材」，原生 marker 是排版行为，不在此列。 */
.guideline li {
  list-style: disc;
  margin-left: 1.15em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-2);
  margin-bottom: 10px;
}
.guideline li::marker {
  color: var(--color-brand);
  font-size: 0.9em;
}

/* 手机端资料卡改为横向排布，避免整页被封面拉得过长 */
@media (max-width: 767px) {
  .res-card {
    flex-direction: row;
    align-items: stretch;
  }
  .res-card .cover {
    width: 108px;
    flex: none;
    aspect-ratio: auto;
    border-radius: var(--r-md);
    margin: 12px 0 12px 12px;
  }
  .res-card .cover img {
    height: 100%;
  }
  .res-card__body {
    padding: 14px 14px 14px 12px;
    justify-content: center;
  }
}

/* ==========================================================================
   资料详情
   ========================================================================== */
.res-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  align-items: stretch;
}
.res-hero__cover {
  display: block;
  border-radius: 0;
  min-height: 260px;
}
.res-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.res-hero__text {
  padding: 30px 34px;
}
.res-body {
  padding: 6px 34px 34px;
}
@media (max-width: 980px) {
  .res-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .res-hero__cover {
    min-height: 200px;
    aspect-ratio: 16 / 9;
    /* 必须显式钉住宽度：本块同时有 aspect-ratio 和 min-height，
       当 min-height(200px) 压过比例算出的高(343px→193px)时，
       浏览器会反过来**用高度推宽度** = 200×16/9 = 356px，
       比 375px 屏下的卡片(343px)宽 13px，右侧被 overflow:hidden 切掉，
       封面看着像没对齐。写死 width:100% 让宽度听栅格、高度听 min-height。 */
    width: 100%;
  }
}
@media (max-width: 767px) {
  .res-hero__text {
    padding: 20px 18px;
  }
  .res-body {
    padding: 4px 18px 22px;
  }
  .res-hero__text .btn {
    width: 100%;
  }
  .res-hero__text .row {
    gap: 8px;
  }
}

/* ==========================================================================
   个人中心
   ========================================================================== */
.me-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.menu-card {
  padding: 10px;
}
.menu-card a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-2);
  transition: all 0.16s var(--ease);
}
.menu-card a:hover {
  background: var(--color-line-soft);
  color: var(--color-text);
}
.menu-card a[aria-current="page"] {
  background: var(--color-brand-tint);
  color: var(--color-brand-deep);
}
.menu-card__n {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 12.5px;
  color: var(--color-text-2);
}
@media (max-width: 980px) {
  .me-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.article-lede {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: #33415c;
  background: var(--color-brand-tint);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .article-lede {
    font-size: 15px;
    padding: 13px 15px;
  }
  .article-hero__text .tag--dark {
    font-size: 11px;
  }
}

/* ==========================================================================
   搜索页 / 收藏 / 浏览历史（W5 第二轮新增，与小程序 search/favorites/history 对齐）
   ========================================================================== */

/* 大搜索条：白卡胶囊，右侧「清空」是纯文字按钮（不画叉号 icon） */
.sbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--r-pill);
  padding: 8px 10px 8px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.sbar:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.sbar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  height: 44px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
}
.sbar input:focus {
  outline: none;
}
.sbar input::placeholder {
  color: var(--color-text-faint);
}
.sbar__clear,
.sbar__go {
  flex: none;
}
/* 手机端：输入框与按钮换行铺满，避免挤成两个小目标 */
@media (max-width: 560px) {
  .sbar {
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    padding: 10px 14px;
  }
  .sbar input {
    flex-basis: 100%;
    height: 40px;
  }
  .sbar__go {
    flex: 1 1 auto;
  }
}

/* 关键词词条（搜索历史 / 大家都在搜）：纯文字，无图标 */
.kw-card + .kw-card {
  margin-top: 14px;
}
.kw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.kw-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--color-field);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.kw-chip:hover {
  background: var(--color-brand-tint);
  border-color: var(--color-brand);
  color: var(--color-brand-deep);
}
/* 触摸目标 ≥44px 只在触屏档生效：桌面鼠标指针不需要那么高，硬撑会显得松散 */
@media (hover: none) and (pointer: coarse) {
  .kw-chip {
    min-height: 44px;
    padding: 0 18px;
  }
}

/* 结果行：搜索页与列表页共用的「共 N 条」行 */
.hit-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

/* 收藏 / 历史行的行尾操作（纯文字按钮，不遮挡卡片本身的链接） */
.rowact {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-sub);
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.rowact:hover {
  color: var(--color-brand-deep);
  background: var(--color-brand-tint);
}
@media (hover: none) and (pointer: coarse) {
  .rowact {
    min-height: 44px;
    padding: 0 14px;
  }
}
/* 收藏/历史行：整行可点，但行尾操作按钮要能独立点击 → 用 grid 而非嵌套 <a> */
.arow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.arow__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* ==========================================================================
   触屏可点击区域 ≥44px（W5 第二轮，移动端实测补齐）
   --------------------------------------------------------------------------
   实测（375 宽，Chromium）：页脚链接 42×16、面包屑 26×21、筛选 chip 54×32、
   nav-toggle 57×36、品牌链接 67×22、.btn--sm 34 高 —— 都低于 44px。
   只在两种情况下生效：① 触屏设备（无 hover + 粗指针）；② 视口 ≤767px。
   桌面用鼠标点击时 44px 会把版面撑松，所以不做全站默认值。
   加「视口」这一条是因为：手机浏览器偶尔会把自己报成 hover:hover，
   而把浏览器窗口拖窄的桌面用户也常遇到「控件太密点不准」的同样问题。
   ========================================================================== */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* 顶栏：品牌链接与菜单开关 */
  .brand {
    min-height: 44px;
    align-items: center;
  }
  .nav-toggle {
    height: 44px;
    padding: 0 16px;
  }
  /* 移动端抽屉导航：这是手机上的主导航，每个条目都要够大 */
  .mobile-drawer a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 4px;
  }
  /* 面包屑：站点层级导航 */
  .crumbs a,
  .crumbs span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 按钮族：--sm 只有 34 高 */
  .btn,
  .btn--sm,
  .btn--lg {
    min-height: 44px;
  }
  /* 列表筛选 chip（分类 / 院校 / 排序）与标签选择 */
  .filterbar__opts button,
  .filterbar__opts a,
  .filterbar__more button,
  .sorttabs button,
  .segmented button,
  .tagpick button {
    min-height: 44px;
  }
  /* 「按热度看全部」这类区块级更多入口 */
  .section-head__more,
  .linkish {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 页脚导航：手机上是一列，撑高后仍可读 */
  .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 卡片内的小链接：作者署名、排行项、个人中心菜单 */
  .byline,
  .mini-post,
  .menu-card a,
  .school-row {
    min-height: 44px;
  }
  /* 分页 */
  .pager button,
  .pager a {
    min-height: 44px;
  }
  /* 详情页的操作条（赞同 / 编辑 / 删除） */
  .act {
    min-height: 44px;
    padding: 0 14px;
  }

  /* 输入框：搜索框实测 40–42px，差几像素也是差 */
  .searchbox input,
  .sbar input,
  .input {
    min-height: 44px;
  }

  /* 资料库 / 资讯的页签实测 39px 高、「资讯」只有 28px 宽 */
  .tabs button,
  .tabs a {
    min-height: 44px;
    min-width: 44px;
    padding-left: 2px;
    padding-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 帖子卡片：整张卡不是链接，**标题链接就是打开帖子的唯一可点区**，
     实测单行标题只有 20px 高、两行 43px。
     这里用「行内元素的垂直 padding」撑开命中区：inline 元素的上下 padding
     不影响行盒高度（版面一点不动），但 border box 会变大，
     点击落在 padding 里同样命中该元素。 */
  .post-card__title a,
  .t-brand,
  .lib-card__title,
  .mini-post__title {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .t-brand {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ---------- 个人中心：数据总览（对齐小程序 pages/mine 的 stats-card） ----------
   三个数字让用户一眼看到自己在站内的积累，并可点击直接切到对应页签。
   字体分层：数字用 --font-num（等宽数字，tabular-nums 对齐），标签用 --font-ui，
   两者字号/字重都拉开，不是一个字体打天下。 */
.mestat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mestat__i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.mestat__i:hover {
  background: var(--color-line-soft);
}
.mestat__n {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
/* 数字为 0 时压暗，避免"0"和真实数据一样抢眼（小程序用 stat-num--zero 做同一件事） */
.mestat__i[data-zero="true"] .mestat__n {
  color: var(--color-text-3);
}
.mestat__k {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-2);
}

/* 触屏下把整块撑到 44px 以上 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .mestat__i {
    padding: 18px 6px;
    min-height: 44px;
  }
}

/* ---------- 触屏点击区：补两个「只有高度够、宽度不够」的漏网元素 ----------
   严格按「宽高都 ≥44」复测后发现的：
     · 页脚导航链接（如「经验帖」三个字）42×44 —— 高度早就撑到 44 了，宽度只有文字宽度
     · 登录页的页签按钮 38×47 —— padding 只有下内边距，宽度同样只等于文字宽度
   两处都只需 min-width 把盒子向右撑开：inline-flex 默认左对齐，文字位置一点不动，
   视觉上完全看不出来，命中区却够了。
   （注：早前一轮自检用的是「高度 ≥44 且宽度 ≥24」的较松口径，所以报了 0 个；
     这里按「宽高都 ≥44」重测并补齐，口径以更严的为准。） */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .site-footer a {
    min-width: 44px;
  }
  .auth-tabs button {
    min-width: 44px;
  }
  /* 面包屑同样只有高度够（26×44，「首页」就俩字） */
  .crumbs a {
    min-width: 44px;
  }
  /* 分页按钮 38×44 */
  .pager button,
  .pager a {
    min-width: 44px;
  }
  /* 帖子详情里可点的院校 / 标签 chip：97×25，高度差得最多（25 → 44）。
     只针对 `a.tag`（可点的那些）；非链接的 .tag 是纯展示，不该被撑高影响版面。 */
  a.tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* 评论里的昵称链接（42×23）：评论头部是一行 flex（昵称 + 相对时间），
   撑到 44 高不会挤掉时间（同一行内 align-items:center 自动对齐）。 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .cmt__name {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   素材来源与授权页（credits.html）
   纯排版：一条 = 名称 + 作者/授权 + 出处链接。不放任何图标或缩略图 ——
   这一页本身就是在声明「站内图形都来自真实素材」，它自己更不该自造图形。
   ========================================================================== */
.credit-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.credit {
  background: var(--color-card);
  padding: 14px 16px;
  min-width: 0;
}
.credit__t {
  font-family: var(--font-body);
  font-weight: 620;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
/* 作者 / 授权 / 出处：辅助信息层，用界面字体 + 更小字号，和上面的名称拉开层次 */
.credit__m {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.62;
  color: var(--color-text-2);
  margin: 3px 0 0;
  word-break: break-word;
}
.credit__m a {
  color: var(--color-brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.credit__m--fine {
  color: var(--color-text-3);
  font-size: 11px;
}
@media (max-width: 767px) {
  .credit-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .credit__m a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- 资料详情：深度报告的章节大纲与正文摘录 ----------
   纯排版，无图标无图形（与小程序 pages/resource 的 rep-toc / rep-sample 对齐）。
   字体分层：章节号用 --font-ui 小号字重轻，一级章名 --font-body 更重更大，
   二级条目降一档，摘录正文用 --font-body 常规行高。 */
.rep-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-line);
}
.rep-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0 5px 14px;
}
.rep-row--l1 {
  margin-top: 8px;
}
.rep-row--l1:first-child {
  margin-top: 0;
}
/* 文档标题行：不带章节号，比一级章名再重一档 */
.rep-row--doc {
  padding-left: 14px;
  margin-bottom: 6px;
}
.rep-toc-txt--doc {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--color-text);
}
/* 二级条目前的圆点：用文字「·」而不是 CSS 画的圆，避免自造图形 */
.rep-dot {
  color: var(--color-text-3);
  margin-right: 6px;
}
.rep-row--l2 {
  padding-left: 24px;
}
.rep-toc-txt {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-2);
}
.rep-toc-txt--h1 {
  font-size: 15px;
  font-weight: 620;
  color: var(--color-text);
}
.rep-sample {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line-soft);
}
.rep-para {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-2);
  margin: 0 0 12px;
}
.rep-para:last-child {
  margin-bottom: 0;
}
/* plainToProse 会在 .rep-para 里产出 <p>，去掉它的默认外边距避免双份间距 */
.rep-para > p {
  margin: 0;
}
.rep-para > p + p {
  margin-top: 12px;
}