/*
 * 粤医美 · 机构列表页样式
 * 翻译自 design-reference/archive-clinic-design.html
 * 依赖 main.css（statusbar / footer / topbar 样式均在 main.css）
 */

/* ============================================
   城市 Hero
   ============================================ */
.city-hero {
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--line);
}
.city-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-8);
  align-items: end;
}
.city-hero__id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-bottom: var(--sp-4);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.city-hero__id span::before {
  content: "// ";
  opacity: 0.5;
}
.city-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.city-hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.city-hero__sub {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
  max-width: 56ch;
  line-height: 1.6;
}

/* 区域 / 城市快速跳转胶囊 */
.district-quick {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.district-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--bg-paper);
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
  border-radius: 0;
}
.district-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.district-pill.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.district-pill__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  margin-left: 4px;
}
.district-pill.active .district-pill__count {
  color: rgba(255, 255, 255, 0.6);
}

/* Hero 右侧 mini 统计 */
.city-hero__stats {
  border-left: 1px solid var(--line);
  padding-left: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
}
.mini-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.mini-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mini-stat__value--accent { color: var(--accent); }
.mini-stat__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ============================================
   筛选条
   ============================================ */
.filter-bar {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 64px;
  z-index: 90;
  backdrop-filter: blur(8px);
  background-color: rgba(253, 252, 248, 0.96);
}
.filter-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.filter-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.filter-select {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 5px 24px 5px 10px;
  border: 1px solid var(--line);
  background: var(--bg-paper);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath d='M3 5l3 3 3-3' stroke='%238a8d80' stroke-width='1.5' fill='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color 0.15s ease;
  border-radius: 0;
}
.filter-select:focus,
.filter-select:hover {
  outline: none;
  border-color: var(--ink);
}
.filter-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--line);
}
.filter-active-tags {
  display: flex;
  gap: var(--sp-2);
  flex: 1;
  align-items: center;
  flex-wrap: wrap;
}
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  text-transform: uppercase;
}
.active-tag__close {
  cursor: pointer;
  opacity: 0.6;
  font-weight: 700;
}
.active-tag__close:hover { opacity: 1; }
.clear-all {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: 1px;
}
.clear-all:hover { color: var(--accent); border-color: var(--accent); }
.filter-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  background: var(--bg-paper);
}
.view-btn {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 0;
}
.view-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* ============================================
   结果统计行
   ============================================ */
.results-meta {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
}
.results-count {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.results-count strong { color: var(--accent); font-weight: 500; }
.results-count__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-left: var(--sp-2);
  letter-spacing: 0.05em;
}
.results-sort {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.results-sort strong { color: var(--ink); font-weight: 500; }

/* ============================================
   列表表头 + 行
   ============================================ */
.clinic-table {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.clinic-table__head {
  display: grid;
  grid-template-columns: 60px 1.5fr 0.8fr 110px 100px 100px 60px;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.clinic-table__head span[data-sort] {
  cursor: pointer;
  transition: color 0.15s ease;
}
.clinic-table__head span[data-sort]:hover { color: var(--ink); }
.clinic-table__head .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
}

.clinic-row {
  display: grid;
  grid-template-columns: 60px 1.5fr 0.8fr 110px 100px 100px 60px;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s ease;
  align-items: center;
  position: relative;
}
.clinic-row:hover { background: var(--bg-paper); }
.clinic-row::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.clinic-row:hover::before { background: var(--accent); }

.clinic-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.clinic-row__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clinic-row__name-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.clinic-row__name-id {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.clinic-row__name-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.row-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 0;
}
.row-tag--cert {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.row-tag--hospital {
  background: var(--positive);
  color: #fff;
  border-color: var(--positive);
}

.clinic-row__district {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.clinic-row__district-sub {
  display: block;
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.clinic-row__compliance {
  display: flex;
  align-items: center;
}
.compliance-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
}
.compliance-badge--ok {
  color: var(--positive);
  background: rgba(45,90,61,0.06);
}
.compliance-badge--warn {
  color: var(--warning);
  background: rgba(184,116,10,0.06);
}
.compliance-badge--danger {
  color: var(--danger);
  background: rgba(160,40,40,0.06);
}

.clinic-row__lic-status {
  display: flex;
  align-items: center;
}
.lic-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.lic-status--valid   { color: var(--positive); }
.lic-status--expiring { color: var(--warning); }
.lic-status--expired  { color: var(--danger); }
.lic-status--unknown  { color: var(--ink-mute); }

.clinic-row__verified {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-align: right;
}
.clinic-row__verified-date {
  display: block;
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.clinic-row__verified-stale { color: var(--warning); }
.clinic-row__arrow {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-size: var(--fs-base);
  transition: all 0.15s ease;
}
.clinic-row:hover .clinic-row__arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* 空状态 */
.clinic-table__empty {
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

/* ============================================
   分页
   ============================================ */
.archive-pagination {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.archive-pagination__info {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.archive-pagination__info strong { color: var(--ink); font-weight: 500; }
.archive-pagination__nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.archive-pagination__nav a,
.archive-pagination__nav span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-paper);
  color: var(--ink-soft);
  text-decoration: none;
  min-width: 36px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-block;
}
.archive-pagination__nav a:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.archive-pagination__nav .current {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.archive-pagination__nav .dots {
  color: var(--ink-mute);
  border: none;
  background: none;
  cursor: default;
  padding: 8px 4px;
}
.archive-pagination__nav .prev.disabled,
.archive-pagination__nav .next.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   底部 SEO 城市简介
   ============================================ */
.city-content {
  padding: var(--sp-9) 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.city-content__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.city-content__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-3);
}
.city-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--sp-5);
}
.city-content p {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.city-content p strong { color: var(--ink); font-weight: 600; }
.city-content__footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.05em;
}
.city-content__footer a { color: var(--accent); text-decoration: none; }

/* ============================================
   响应式
   ============================================ */
@media (max-width: 1100px) {
  .clinic-table__head,
  .clinic-row {
    grid-template-columns: 50px 1.5fr 100px 80px 50px;
    gap: var(--sp-3);
  }
  .clinic-table__head .col-procedures,
  .clinic-table__head .col-verified,
  .clinic-row__procedures,
  .clinic-row__verified { display: none; }
}
@media (max-width: 900px) {
  .city-hero__inner { grid-template-columns: 1fr; }
  .city-hero__stats {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--sp-5);
  }
  .filter-bar__inner {
    gap: var(--sp-3);
    overflow-x: auto;
  }
  .filter-bar__divider { display: none; }
}
@media (max-width: 700px) {
  .clinic-table__head,
  .clinic-row {
    grid-template-columns: 40px 1fr 70px 40px;
  }
  .clinic-table__head .col-district,
  .clinic-row__district { display: none; }
  .results-meta { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .archive-pagination { flex-direction: column; align-items: flex-start; }
  .city-hero__stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   搜索结果页
   ============================================ */
.search-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-9);
}
.search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.search-result-item {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.search-result-item__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.search-result-item__type {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 2px 8px;
  font-weight: 500;
}
.search-result-item__sub { color: var(--ink-soft); }
.search-result-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
}
.search-result-item__title a {
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s ease;
}
.search-result-item__title a:hover { color: var(--accent); }
.search-result-item__excerpt {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}
.search-pagination {
  padding: var(--sp-6) 0;
}
.search-pagination .nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.search-pagination .page-numbers {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-paper);
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.15s ease;
}
.search-pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.search-pagination .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search-empty {
  padding: var(--sp-9) 0;
  text-align: center;
}
.search-empty__msg {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.search-empty__hint {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.search-empty__hint a { color: var(--accent); text-decoration: none; }
.search-empty__hint a:hover { text-decoration: underline; }

@media ( max-width: 640px ) {
  .search-page { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}

/* ============================================================
   项目库 archive-procedure.php
   ============================================================ */

.proc-archive { padding: var(--sp-7) 0 var(--sp-9); }
.proc-archive__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* 页头 */
.proc-archive__head { margin-bottom: var(--sp-7); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-6); }
.proc-archive__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}
.proc-archive__title .en {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: var(--sp-3);
}
.proc-archive__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0;
  max-width: 620px;
  line-height: 1.7;
}

/* 垂类 Tab */
.proc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: var(--sp-5);
}
.proc-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: .03em;
}
.proc-tab:hover { color: var(--ink); }
.proc-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.proc-tab__en { color: var(--ink-mute); font-weight: 400; }

/* 分类筛选条 */
.proc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.proc-filter__item {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  background: var(--bg-paper);
  transition: border-color .15s, color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.proc-filter__item:hover { border-color: var(--ink-soft); color: var(--ink); }
.proc-filter__item--active { border-color: var(--ink); color: var(--ink); background: var(--bg-alt); font-weight: 600; }
.proc-filter__cnt {
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--bg-alt);
  padding: 0 4px;
  border-radius: 2px;
}

/* 卡片网格 */
.proc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.proc-card {
  display: block;
  text-decoration: none;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  padding: var(--sp-5);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.proc-card:hover { border-color: var(--ink-soft); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.proc-card__top { margin-bottom: var(--sp-2); }
.proc-card__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--accent-soft);
  padding: 1px 6px;
  background: var(--accent-soft);
}
.proc-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0 0 var(--sp-1);
  font-weight: 600;
  line-height: 1.3;
}
.proc-card__en {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}
.proc-card__alias {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.proc-card__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.proc-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
}
.proc-card__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.proc-card__recovery {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.proc-card__arrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.proc-card:hover .proc-card__arrow { color: var(--accent); }

/* 空状态 */
.proc-empty {
  padding: var(--sp-9) 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
}

/* 翻页 */
.proc-archive .pagination {
  margin-top: var(--sp-8);
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}
.proc-archive .pagination a,
.proc-archive .pagination span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-soft);
}
.proc-archive .pagination .current { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.proc-archive .pagination a:hover { border-color: var(--ink-soft); color: var(--ink); }

/* 响应式 */
@media ( max-width: 768px ) {
  .proc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
  .proc-tabs { overflow-x: auto; }
  .proc-tab { white-space: nowrap; }
}
@media ( max-width: 480px ) {
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .proc-archive__inner { padding: 0 var(--sp-4); }
}