/* =============================================================
   寿光市人民政府门户网站（静态演示样板）
   文件：assets/css/pages.css
   职责：首页分区版式、各频道专属版式与特色模块样式。
   依赖：tokens.css、base.css、layout.css、components.css
   约定：仅新增页面级类名，不覆盖既有组件基础样式。
   ============================================================= */

/* =============================================================
   1. 首页 · 公告速递条（不自动滚动，静态醒目条）
   ============================================================= */
.notice-flash {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-left: 4px solid var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.notice-flash__badge { flex: 0 0 auto; }
.notice-flash__link {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-flash__link:hover { color: var(--c-gov-blue); }
.notice-flash__date {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* =============================================================
   2. 首页 · 首要信息区（重点信息 + 要闻列表 + 侧栏）
   ============================================================= */
.home-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.headline-card {
  display: block;
  background: linear-gradient(160deg, var(--c-gov-blue-mist) 0%, #FFFFFF 70%);
  border: 1px solid var(--c-border-light);
  border-top: 3px solid var(--c-gov-blue);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.headline-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.headline-card__tag { margin-bottom: var(--sp-3); }
.headline-card__title {
  font-size: var(--fs-2xl);
  line-height: 1.4;
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}
.headline-card:hover .headline-card__title { color: var(--c-gov-blue); }
.headline-card__summary {
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-3);
}
.headline-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

/* 迷你标签页（要闻分类切换） */
.mini-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-2);
}
.mini-tab {
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.mini-tab:hover { color: var(--c-gov-blue); }
.mini-tab[aria-selected="true"] {
  color: var(--c-gov-blue);
  border-bottom-color: var(--c-gov-blue);
}

/* 通用侧栏卡 */
.side-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.side-card + .side-card { margin-top: var(--sp-5); }
.side-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  background: var(--c-gov-blue-mist);
}
.side-card__head h3,
.side-card__head h2 {
  margin: 0;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.side-card__more {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.side-card__more:hover { color: var(--c-gov-blue); }
.side-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.doc-list--compact .doc-list__item { padding: var(--sp-2) 0; }

/* =============================================================
   3. 首页 · 高频服务区
   ============================================================= */
.seg-switch {
  display: inline-flex;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  min-height: 40px;
  padding: 0 var(--sp-5);
  border-radius: 999px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text-secondary);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.seg-btn:hover { color: var(--c-gov-blue); }
.seg-btn[aria-pressed="true"] {
  background: var(--c-gov-blue);
  color: #fff;
}
.seg-switch--green .seg-btn:hover { color: var(--c-sg-green-dark); }
.seg-switch--green .seg-btn[aria-pressed="true"] { background: var(--c-sg-green); }

.one-thing-card { position: relative; }
.one-thing-card .tag { position: static; }

/* =============================================================
   4. 首页 · 政策速览行
   ============================================================= */
.policy-mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px dashed var(--c-border-light);
  color: inherit;
}
.policy-mini:hover { text-decoration: none; background: var(--c-gov-blue-mist); }
.policy-mini__title {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.policy-mini:hover .policy-mini__title { color: var(--c-gov-blue); }
.policy-mini .status-badge { flex: 0 0 auto; }
.policy-mini__date {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* =============================================================
   5. 首页 · 智能与互动区（菜小帮介绍 + 正式渠道）
   ============================================================= */
.ai-intro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-gov-blue) 0%, var(--c-gov-blue-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.ai-intro::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  pointer-events: none;
}
.ai-intro__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ai-intro__head img,
.ai-intro__head svg { width: 52px; height: 52px; flex: 0 0 auto; }
.ai-intro__head h3 { margin: 0; color: #fff; font-size: var(--fs-xl); }
.ai-intro__head p {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
}
.ai-intro__desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.ai-chip {
  min-height: 36px;
  padding: 5px var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease);
}
.ai-chip:hover { background: rgba(255, 255, 255, 0.16); }
.ai-chip:focus-visible { outline-color: #fff; }
.ai-intro__disclaimer {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: var(--sp-3) 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
  padding-top: var(--sp-3);
}

/* 正式互动渠道卡 */
.channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  min-height: 150px;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.channel-card:hover {
  border-color: var(--c-gov-blue-light);
  box-shadow: var(--shadow-md);
}
.channel-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.channel-card__name { font-weight: 700; font-size: var(--fs-base); }
.channel-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
  flex: 1;
}
.channel-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border-light);
  flex-wrap: wrap;
}

/* =============================================================
   6. 首页 · 便民与城市服务区
   ============================================================= */
.city-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.city-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.city-card__head h3 { margin: 0; font-size: var(--fs-lg); }
.city-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  flex: 1;
}
.city-card__list li {
  padding: var(--sp-1) 0;
  border-bottom: 1px dashed var(--c-border-light);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}
.city-card__list li:last-child { border-bottom: 0; }
.city-card__list .d { color: var(--c-text-muted); flex: 0 0 auto; }
.city-card__foot { padding-top: var(--sp-2); }

/* =============================================================
   7. 首页 · 寿光特色区（深色质感带）
   ============================================================= */
.feature-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--c-gov-blue-dark) 0%, #0B5A52 100%);
  color: #fff;
}
.feature-band::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
}
.feature-band::after {
  content: "";
  position: absolute;
  right: 6%;
  top: -60px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.feature-band .container { position: relative; z-index: 1; }
.band-head { margin-bottom: var(--sp-6); }
.band-head h2 { color: #fff; margin-bottom: var(--sp-1); }
.band-head p { color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 760px; }
.band-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
}
.band-stat__value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.band-stat__value small {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 2px;
}
.band-stat__label {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
}
.band-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.band-links a {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: 600;
}
.band-links a:hover {
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}
.feature-band .demo-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #FFE1B8;
  border-color: rgba(255, 255, 255, 0.35);
}

/* =============================================================
   8. 首页 · 三品牌入口
   ============================================================= */
.brand-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--c-gov-blue);
  padding: var(--sp-5);
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.brand-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.brand-card--service { border-top-color: var(--c-sg-green); }
.brand-card--read { border-top-color: var(--c-warm); }
.brand-card__logo {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.brand-card__logo img,
.brand-card__logo svg { width: 100%; height: 100%; }
.brand-card__body { min-width: 0; flex: 1; }
.brand-card__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: 4px;
}
.brand-card__scope {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-2);
}
.brand-card__go {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-gov-blue);
}
.brand-card--service .brand-card__go { color: var(--c-sg-green-dark); }
.brand-card--read .brand-card__go { color: var(--c-warm-dark); }

/* =============================================================
   9. 列表页通用：工具条
   ============================================================= */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.list-toolbar__count {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}
.list-toolbar__count strong { color: var(--c-gov-blue); }
/* 工具条内的关键词输入不撑满整行，避免排序控件被挤到下一行 */
.list-toolbar .form-input { width: 220px; max-width: 100%; }
.sort-select {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}
.sort-select select {
  min-height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* 热点排行 */
.hot-list { list-style: none; margin: 0; padding: 0; counter-reset: hot; }
.hot-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-border-light);
  margin: 0;
}
.hot-list li::before {
  counter-increment: hot;
  content: counter(hot);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.hot-list li:nth-child(-n+3)::before {
  background: var(--c-warm-pale);
  color: var(--c-warm-dark);
}
.hot-list a {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-list a:hover { color: var(--c-gov-blue); }

/* =============================================================
   10. 政府公报
   ============================================================= */
.gazette-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { margin: 0 0 var(--sp-2); }
.issue-btn {
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--fs-base);
  color: var(--c-text-secondary);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.issue-btn:hover { border-color: var(--c-gov-blue-light); color: var(--c-gov-blue); }
.issue-btn[aria-pressed="true"] {
  border-color: var(--c-gov-blue);
  background: var(--c-gov-blue-pale);
  color: var(--c-gov-blue-dark);
  font-weight: 700;
}
.issue-btn .d {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.gazette-head {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-4);
}
.gazette-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 128px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--c-gov-blue) 0%, var(--c-gov-blue-deep) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--sp-2);
  box-shadow: var(--shadow-md);
}
.gazette-cover b { font-size: var(--fs-lg); }
.gazette-cover span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.8); }
.gazette-head__info h2 { margin-bottom: var(--sp-1); font-size: var(--fs-xl); }
.gazette-head__info p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.toc-index {
  flex: 0 0 auto;
  width: 2.2em;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* =============================================================
   11. 法定主动公开目录
   ============================================================= */
.dir-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.dir-card[open],
.dir-card:hover {
  border-color: var(--c-gov-blue-light);
  box-shadow: var(--shadow-sm);
}
.dir-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.dir-card > summary::-webkit-details-marker { display: none; }
.dir-card > summary:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}
.dir-card__body { min-width: 0; flex: 1; }
.dir-card__name {
  font-weight: 700;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.dir-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 2px 0 0;
}
.dir-card__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.dir-card[open] .dir-card__arrow { transform: rotate(225deg); }
.dir-card__items {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px dashed var(--c-border-light);
  font-size: var(--fs-sm);
}
.dir-card__items li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
  margin: 0;
  color: var(--c-text-secondary);
}
.dir-card__items .d { color: var(--c-text-muted); flex: 0 0 auto; }
.dir-card__items a { color: var(--c-gov-blue); }

/* =============================================================
   12. 步骤流程（依申请公开 / 投资流程等）
   ============================================================= */
.step-flow {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  counter-reset: step;
}
.step-flow > li {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 var(--sp-2);
  margin: 0;
}
.step-flow > li::before {
  counter-increment: step;
  content: counter(step);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-gov-blue);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-3);
  position: relative;
  z-index: 1;
  border: 4px solid var(--c-gov-blue-pale);
}
.step-flow > li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--c-border);
}
.step-flow > li:last-child::after { display: none; }
.step-flow__t { font-weight: 700; margin-bottom: 4px; }
.step-flow__d { font-size: var(--fs-sm); color: var(--c-text-muted); }
.step-flow--green > li::before {
  background: var(--c-sg-green);
  border-color: var(--c-sg-green-pale);
}

/* 纵向时间线（办理流程） */
.vtimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.vtimeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-border-light);
}
.vtimeline > li {
  position: relative;
  padding: 0 0 var(--sp-5) 46px;
  margin: 0;
}
.vtimeline > li:last-child { padding-bottom: 0; }
.vtimeline > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--c-sg-green);
}
.vtimeline__t { font-weight: 700; margin-bottom: 2px; }
.vtimeline__d { font-size: var(--fs-sm); color: var(--c-text-secondary); }

/* =============================================================
   13. 办事指南详情（锚点导航 + 分块）
   ============================================================= */
.guide-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.guide-nav {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
}
.guide-nav a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  min-height: 40px;
  line-height: 24px;
}
.guide-nav a:hover {
  background: var(--c-gov-blue-mist);
  color: var(--c-gov-blue);
  text-decoration: none;
}
.guide-nav a.is-current {
  border-left-color: var(--c-gov-blue);
  background: var(--c-gov-blue-pale);
  color: var(--c-gov-blue-dark);
  font-weight: 600;
}
.guide-block {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
}
.guide-block > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-4);
}
.guide-block > h3::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--c-sg-green);
  flex: 0 0 auto;
}

/* =============================================================
   14. 商事登记材料预审
   ============================================================= */
.precheck-result {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.precheck-result__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.precheck-result__icon svg { width: 24px; height: 24px; }
.precheck-result--ok {
  background: var(--c-success-pale);
  border-color: #BBDFC6;
}
.precheck-result--ok .precheck-result__icon { background: #CBE8D3; color: var(--c-success); }
.precheck-result--warn {
  background: var(--c-warm-pale);
  border-color: #EBD4AE;
}
.precheck-result--warn .precheck-result__icon { background: #F3DFBD; color: var(--c-warm-dark); }
.precheck-result__title { font-weight: 700; margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.precheck-missing { margin: 0 0 var(--sp-3); padding-left: 1.3em; }
.precheck-missing li { color: var(--c-danger); font-weight: 600; }
.precheck-missing li span { color: var(--c-text-secondary); font-weight: 400; }

/* =============================================================
   15. 搜索页
   ============================================================= */
.search-hero {
  background: linear-gradient(150deg, var(--c-gov-blue-mist) 0%, #FFFFFF 70%);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.search-big {
  display: flex;
  max-width: 720px;
  background: #fff;
  border: 2px solid var(--c-gov-blue);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.search-big input {
  flex: 1;
  min-width: 0;
  border: 0;
  min-height: 52px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-base);
}
.search-big button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 var(--sp-6);
  background: var(--c-gov-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
}
.search-big button:hover { background: var(--c-gov-blue-light); }
.search-meta {
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}
.search-meta strong { color: var(--c-gov-blue); }
.search-meta .kw {
  color: var(--c-warm-dark);
  font-weight: 700;
}

/* =============================================================
   16. 数据开放
   ============================================================= */
.dataset-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.dataset-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.dataset-card__head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-lg);
}
.dataset-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.dataset-card__meta b { color: var(--c-text-secondary); font-weight: 600; }
.dataset-card__fields > summary {
  cursor: pointer;
  color: var(--c-gov-blue);
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.dataset-card__fields > summary:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.dataset-card__fields .table-wrap { margin-top: var(--sp-2); }
.data-table--flat { min-width: 0; }
.dataset-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border-light);
}

/* =============================================================
   17. 数字便民地图页
   ============================================================= */
.map-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.map-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.place-list {
  max-height: 480px;
  overflow-y: auto;
  padding-right: var(--sp-1);
}
.place-detail-card .meta-grid { margin-bottom: var(--sp-3); }

/* =============================================================
   18. 城市日历页
   ============================================================= */
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-6);
  align-items: start;
}
.event-item {
  display: flex;
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease);
}
.event-item:hover { border-color: var(--c-gov-blue-light); }
.event-item.is-highlight {
  border-color: var(--c-sg-green);
  background: var(--c-sg-green-pale);
}
.event-date {
  flex: 0 0 auto;
  width: 60px;
  text-align: center;
  background: var(--c-gov-blue-mist);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: var(--sp-2) 2px;
  align-self: flex-start;
}
.event-date b {
  display: block;
  font-size: var(--fs-xl);
  color: var(--c-gov-blue-dark);
  line-height: 1.15;
}
.event-date span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.event-item__body { flex: 1; min-width: 0; }
.event-item__title { font-weight: 700; margin-bottom: 4px; }
.event-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.cat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-3);
}
.cat-legend .map-legend__dot { margin-right: 5px; }

/* =============================================================
   19. 走进寿光 / 用户旅程
   ============================================================= */
.about-hero {
  background: linear-gradient(120deg, var(--c-gov-blue-pale) 0%, #FFFFFF 50%, var(--c-sg-green-pale) 100%);
  border-bottom: 1px solid var(--c-border-light);
  padding: var(--sp-12) 0 var(--sp-10);
}
.about-hero h1 { margin-bottom: var(--sp-3); }
.about-hero__intro {
  max-width: 820px;
  color: var(--c-text-secondary);
  font-size: var(--fs-md);
}
.fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.fact-chip {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  padding: 6px var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}
.fact-chip b { color: var(--c-gov-blue-dark); }

.journey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + 4px);
  overflow: hidden;
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.journey-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--c-gov-blue);
}
.journey-card--meet::before { background: var(--c-gov-blue); }
.journey-card--live::before { background: var(--c-sg-green); }
.journey-card--invest::before { background: var(--c-warm); }
.journey-card--work::before { background: #7C5CBF; }
.journey-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.journey-card__en {
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  color: var(--c-text-muted);
  text-transform: uppercase;
}
.journey-card__name { font-size: var(--fs-lg); font-weight: 700; }
.journey-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin: 0;
  flex: 1;
}
.journey-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border-light);
}

/* =============================================================
   20. 投资寿光
   ============================================================= */
.park-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.park-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* =============================================================
   21. 网站地图
   ============================================================= */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.sitemap-group {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
}
.sitemap-group h2 {
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-2);
}
.sitemap-group h2::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--c-gov-blue);
  flex: 0 0 auto;
}
.sitemap-group ul { list-style: none; margin: 0; padding: 0; }
.sitemap-group li {
  margin: 0;
  border-bottom: 1px dashed var(--c-border-light);
}
.sitemap-group li:last-child { border-bottom: 0; }
.sitemap-group a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: var(--sp-1) var(--sp-1);
  color: var(--c-text-secondary);
}
.sitemap-group a:hover { color: var(--c-gov-blue); }
.sitemap-group a::before {
  content: "·";
  margin-right: var(--sp-2);
  color: var(--c-sg-green);
  font-weight: 700;
}

/* =============================================================
   22. 404
   ============================================================= */
.page-404 {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-5);
}
.page-404__code {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--sp-3);
  color: var(--c-gov-blue);
  background: linear-gradient(120deg, var(--c-gov-blue), var(--c-sg-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.high-contrast .page-404__code,
body.care-mode .page-404__code {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--c-gov-blue);
}
.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* =============================================================
   23. 政策详情 · 公文样式 + 菜晓解组件
   ============================================================= */
.policy-doc .article__title { letter-spacing: 1px; }
.policy-doc__docno {
  text-align: center;
  color: var(--c-text-secondary);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
  font-size: var(--fs-base);
}
.policy-body p { text-indent: 2em; margin-bottom: var(--sp-4); }
.policy-body .sec-t {
  font-weight: 700;
  text-indent: 0;
  margin: var(--sp-5) 0 var(--sp-3);
  color: var(--c-text);
}
.toc-box a {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}
.toc-box a:hover { color: var(--c-gov-blue); }

.cxj-widget {
  border: 1px solid #EBD4AE;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--sp-8);
  background: #fff;
}
.cxj-widget__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-warm-pale);
  color: var(--c-warm-dark);
  font-weight: 700;
}
.cxj-widget__head img,
.cxj-widget__head svg { width: 28px; height: 28px; flex: 0 0 auto; }
.cxj-widget__head .demo-badge { margin-left: auto; }
.cxj-widget .tabs { margin-bottom: 0; }
.cxj-widget .tabs__list { padding: 0 var(--sp-4); }
.cxj-widget .tab-panel { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cxj-widget .tab-btn[aria-selected="true"] {
  color: var(--c-warm-dark);
  border-bottom-color: var(--c-warm);
}
.cxj-note {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  border-top: 1px dashed var(--c-border-light);
  padding: var(--sp-2) var(--sp-5);
  background: #FFFDF8;
  margin: 0;
}

/* 图解/视频占位块 */
.media-placeholder {
  background:
    linear-gradient(45deg, var(--c-bg-soft) 25%, transparent 25%, transparent 75%, var(--c-bg-soft) 75%),
    linear-gradient(45deg, var(--c-bg-soft) 25%, #FFFFFF 25%, #FFFFFF 75%, var(--c-bg-soft) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-md);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-4);
}
.media-placeholder svg { width: 40px; height: 40px; opacity: 0.55; }

/* 解读类型过滤 chips：绿色/暖色扩展 */
.filter-chip--warm[aria-pressed="true"] {
  background: var(--c-warm);
  border-color: var(--c-warm);
}
.filter-chip--green[aria-pressed="true"] {
  background: var(--c-sg-green);
  border-color: var(--c-sg-green);
}

/* =============================================================
   24. 政民互动 · 演示表单卡
   ============================================================= */
.form-demo-card {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.form-demo-card .demo-banner { margin-top: 0; }
.flow-diagram {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.flow-diagram__node {
  flex: 1 1 150px;
  background: var(--c-gov-blue-mist);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align: center;
  position: relative;
}
.flow-diagram__node b { display: block; margin-bottom: 2px; color: var(--c-gov-blue-dark); }
.flow-diagram__node span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.flow-diagram__node .tag { margin-top: var(--sp-1); }
.flow-diagram__arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

/* =============================================================
   25. 无障碍页引导块（结构样式；控件样式见 accessibility.css）
   ============================================================= */
.a11y-section {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.a11y-section > h2 {
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-3);
}