/**
 * 门户层组件样式：新手必做时间轴 / 常用工具箱 / 办事指南清单 / 活动日历。
 *
 * 只使用 `anchanglu.css` 里 `:root` 定义的令牌，不写死任何色值
 * （`docs/CONVENTIONS.md` §5.1）；类名以 `tl-` / `box-` / `gl-` / `evt-` 前缀
 * 命名，与商家侧组件互不污染。所有布局在窄屏下都能单列降级。
 */

/* ---------- 角标色调（门户层新增，与既有 badge 修饰类并存） ---------- */
.badge--info   { background: var(--info-100); color: var(--info-600); }
.badge--accent { background: var(--accent-100); color: var(--accent-700); }
.badge--good   { background: var(--jade-100); color: var(--jade-700); }
.badge--gold   { background: linear-gradient(135deg, var(--gold-surface-1), var(--gold-surface-2)); color: var(--gold-surface-fg-soft); }
.badge--muted  { background: var(--paper-3); color: var(--ink-500); border-color: var(--line); }

/* ---------- ① 新手必做：时间轴 ---------- */
.tl {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.tl-step { position: relative; display: flex; gap: 14px; }
.tl-step__marker {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-surface); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: var(--sh-1);
}
.tl-step__card {
  flex: 1 1 auto; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px;
  box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.tl-step__card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.tl-step__phase {
  display: inline-block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-700); text-transform: none;
}
.tl-step__title { margin: 0 0 8px; font-size: 16.5px; line-height: 1.4; }
.tl-step__title a { color: var(--ink-900); }
.tl-step__title a:hover { color: var(--brand-800); }
.tl-step__desc { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-500); line-height: 1.6; }
.tl-step__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.tl-step__list li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-600); }
.tl-step__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--brand-200);
}
.tl-step__list a { color: var(--ink-700); }
.tl-step__list a:hover { color: var(--brand-800); }
.tl-step__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- ③ 常用工具箱 ---------- */
.box-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.box-group {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.box-group:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.box-group__head { display: flex; align-items: center; gap: 10px; }
.box-group__icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-800);
}
.box-group__icon svg { width: 18px; height: 18px; }
.box-group__title { margin: 0; font-size: 15.5px; }
.box-group__desc { margin: 10px 0 12px; font-size: 13px; color: var(--ink-500); line-height: 1.6; }
.box-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.box-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 13px; line-height: 1.5;
  background: var(--paper-2); border: 1px solid var(--line-soft); color: var(--ink-600);
  transition: all var(--dur) var(--ease);
}
.box-chip--live { background: var(--paper); border-color: var(--line); color: var(--ink-800); font-weight: 600; }
.box-chip--live:hover { border-color: var(--jade-600); color: var(--jade-700); box-shadow: var(--sh-1); }
.box-chip__dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--jade-surface); flex: 0 0 7px;
}
.box-chip--soon { color: var(--ink-400); }

/* ---------- ④ 办事指南清单 ---------- */
.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-list li + li { border-top: 1px solid var(--line-soft); }
.gl-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 18px; transition: background var(--dur) var(--ease);
}
.gl-list a:hover { background: var(--brand-50); }
.gl-list b { font-size: 14px; font-weight: 600; color: var(--ink-800); }
.gl-list em { font-style: normal; font-size: 12.5px; color: var(--ink-400); white-space: nowrap; }

/* ---------- ⑤ 活动日历 ---------- */
.evt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.evt-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 18px; box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.evt-item:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.evt-item__date {
  flex: 0 0 58px; text-align: center;
  border-right: 1px solid var(--line-soft); padding-right: 14px;
}
.evt-item__date strong { display: block; font-size: 19px; font-weight: 800; color: var(--brand-800); line-height: 1.2; }
.evt-item__date span { font-size: 12px; color: var(--ink-400); }
.evt-item__body { flex: 1 1 auto; min-width: 0; }
.evt-item__title { margin: 0 0 6px; font-size: 16px; line-height: 1.4; }
.evt-item__title a { color: var(--ink-900); }
.evt-item__title a:hover { color: var(--brand-800); }
.evt-item__meta,
.evt-item__time {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-500); line-height: 1.6;
}
.evt-item__meta svg,
.evt-item__time svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-400); }
.evt-item__time { color: var(--accent-700); }

/* 活动日历 · 筛选条与视图切换 */
.pill-row__divider {
  width: 1px; height: 22px; align-self: center;
  background: var(--line); margin: 0 4px;
}
.evt-filter {
  margin-top: 16px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  display: grid; gap: 9px;
}
.evt-filter__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.evt-filter__label { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.evt-filter__current { font-size: 12px; color: var(--ink-400); }

/* 活动日历 · 月历视图 */
.evt-cal { display: grid; gap: 22px; }
.evt-cal__month {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.evt-cal__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
}
.evt-cal__title { margin: 0; font-size: 16px; }
.evt-cal__count { font-size: 12.5px; color: var(--ink-400); }
.evt-cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft);
}
.evt-cal__dow {
  padding: 8px 6px; text-align: center;
  font-size: 12px; color: var(--ink-400); background: var(--paper-2);
}
.evt-cal__day {
  min-height: 88px; min-width: 0;
  padding: 6px 7px 8px; background: var(--paper);
  display: flex; flex-direction: column; gap: 5px;
}
.evt-cal__day--pad { background: var(--paper-3); }
.evt-cal__day--today { background: var(--brand-50); }
.evt-cal__day--today .evt-cal__num { color: var(--brand-800); font-weight: 800; }
.evt-cal__num { font-size: 12px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.evt-cal__ev {
  display: block; min-width: 0;
  padding: 4px 6px; border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-800);
  font-size: 12px; line-height: 1.35;
  transition: background var(--dur) var(--ease);
}
.evt-cal__ev:hover { background: var(--brand-100); color: var(--brand-900); }
.evt-cal__time { display: block; font-size: 11px; color: var(--accent-700); font-variant-numeric: tabular-nums; }
.evt-cal__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-cal__pending { padding: 14px 16px; }

@media (max-width: 760px) {
  .evt-cal__day { min-height: 56px; padding: 4px 5px 6px; }
  .evt-cal__name { display: none; }
  .evt-cal__ev { padding: 3px 4px; }
  .evt-cal__time { font-size: 10.5px; }
  .pill-row__divider { display: none; }
}

/* 活动详情页 · 分享 */
.share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.share-row__label { font-size: 12.5px; font-weight: 600; color: var(--ink-500); margin-right: 2px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.share-btn--wechat { color: var(--jade-700); }
.share-btn--wechat:hover { border-color: var(--jade-700); color: var(--jade-700); }
.share-btn--facebook { color: var(--info-600); }
.share-btn--facebook:hover { border-color: var(--info-600); color: var(--info-600); }

/* 微信分享面板：把链接直接摆出来，不依赖剪贴板是否可用 */
.share-wechat {
  margin-top: 12px; padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.share-wechat__tip { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--ink-500); }
.share-wechat__field { display: flex; gap: 8px; }
.share-wechat__field input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  font-size: 12.5px; color: var(--ink-600);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.share-wechat__field input:focus { outline: 2px solid var(--brand-200); outline-offset: 1px; }

@media (max-width: 560px) {
  .share-wechat__field { flex-direction: column; }
}

/* ---------- ⑥ 工具卡（归档页与同组推荐共用） ---------- */
.tool-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.tool-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.tool-card__head { display: flex; align-items: flex-start; gap: 11px; }
.tool-card__icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-800);
}
.tool-card__icon svg { width: 19px; height: 19px; }
.tool-card__title { margin: 0 0 5px; font-size: 16px; line-height: 1.4; }
.tool-card__title a { color: var(--ink-900); }
.tool-card__title a:hover { color: var(--brand-800); }
.tool-card__desc { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.6; }
.tool-card__source { margin: 0; font-size: 12.5px; color: var(--ink-400); }
.tool-card__foot { margin-top: auto; padding-top: 4px; }

/* ---------- ⑦ 工具单页头部与交互面板 ---------- */
.tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.tool-head__main { min-width: 0; }
.tool-head__title { font-size: 28px; letter-spacing: -.02em; margin: 12px 0 0; }
.tool-head__lede { max-width: 760px; margin: 10px 0 0; font-size: 15.5px; color: var(--ink-600); line-height: 1.7; }
.tool-head__note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 13px; color: var(--ink-500); line-height: 1.65; }
.tool-head__note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--info-600); }
.tool-head__aside { display: flex; flex-direction: column; gap: 8px; flex: none; }

.tool-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.tool-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 22px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700));
}
.tool-panel__head h2 { margin: 0; font-size: 16.5px; color: #fff; }
.tool-panel__head .muted { color: rgba(255, 255, 255, .72); font-size: 12.5px; }
.tool-panel__body { padding: 22px; }

/* ---------- ⑧ 汇率换算（fx-） ---------- */
.fx__form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.fx__swap {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--paper); color: var(--brand-800); transition: all var(--dur) var(--ease);
}
.fx__swap:hover { border-color: var(--brand-600); background: var(--brand-50); }
.fx__swap svg { width: 18px; height: 18px; }
.fx__out {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700)); color: #fff;
}
.fx__result { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.fx__result strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.fx__code { font-size: 15px; font-weight: 700; color: var(--gold-400); letter-spacing: .06em; }
.fx__rate { margin: 8px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .84); }
.fx__meta { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.fx__meta--warn { color: var(--gold-400); }
.fx__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.fx__table-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-700); }
.fx__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fx__table th, .fx__table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.fx__table th:first-child, .fx__table td:first-child { text-align: left; }
.fx__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; }
.fx__table tbody tr:last-child td { border-bottom: 0; }
.fx__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- ⑨ 小费计算器（tip-） ---------- */
.tip__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tip__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tip__preset {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-600); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.tip__preset:hover { border-color: var(--brand-600); color: var(--brand-800); }
.tip__preset.is-active { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }
.tip__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.tip__cell { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.tip__cell--total { background: linear-gradient(135deg, var(--accent-50), var(--paper)); border-color: var(--accent-400); }
.tip__label { display: block; font-size: 12.5px; color: var(--ink-500); }
.tip__value { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; color: var(--brand-900); letter-spacing: -.02em; }
.tip__cell--total .tip__value { color: var(--accent-700); }
.tip__hint { margin: 18px 0 0; }

/* ---------- ⑩ 邮编查询（zip-） ---------- */
.zip__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.zip__submit { height: 42px; display: inline-flex; align-items: center; gap: 7px; }
.zip__submit svg { width: 16px; height: 16px; }
.zip__quick { align-items: center; margin-top: 14px; }
.zip__quick-label { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.zip__status { margin: 16px 0 0; font-size: 13px; color: var(--ink-500); }
.zip__results { margin-top: 10px; overflow-x: auto; }
.zip__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zip__table th, .zip__table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
.zip__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; }
.zip__table code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--ink-900); letter-spacing: .04em; }
.zip__tz { display: block; font-size: 11.5px; color: var(--ink-400); }
.zip__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- ⑪ 场景（scene-）：归档页头部与 /scene/ 索引页 ---------- */
.scene-head { display: flex; align-items: center; gap: 14px; }
.scene-head__icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-800);
}
.scene-head__icon svg { width: 26px; height: 26px; }
.scene-head h1 { margin: 0; }
.scene-head__en {
  margin: 4px 0 0; font-size: 12.5px; font-weight: 600;
  color: var(--ink-400); letter-spacing: .08em; text-transform: uppercase;
}

.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.scene-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.scene-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.scene-card__head { display: flex; align-items: flex-start; gap: 12px; }
.scene-card__icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-800);
}
.scene-card__icon svg { width: 21px; height: 21px; }
.scene-card__title { margin: 0; font-size: 17px; line-height: 1.4; }
.scene-card__title a { color: var(--ink-900); }
.scene-card__title a:hover { color: var(--brand-800); }
.scene-card__en { margin: 3px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ink-400); letter-spacing: .07em; text-transform: uppercase; }
.scene-card__meta { margin: 0; font-size: 13px; color: var(--ink-500); line-height: 1.6; }
.scene-card__cities { margin: 0; }
.scene-card__foot { margin-top: auto; padding-top: 2px; }

/* ---------- ⑫ 本地资讯（nw-）：/news/ 栏目页与城市频道内嵌版块 ---------- */
/* 条目一律外链原文，因此卡片本身就是「可点击的摘要」：标题是链接，来源与
   原文域名放在底部元信息里，让访客在点出去之前就知道会去到哪个站。 */
.nw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nw-list--single { grid-template-columns: 1fr; }
.nw-item {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sh-1); transition: all var(--dur) var(--ease);
}
.nw-item:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.nw-item__title { margin: 0; font-size: 16px; line-height: 1.5; }
.nw-item__title a { color: var(--ink-900); }
.nw-item__title a:hover { color: var(--brand-800); }
.nw-item__summary { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-600); }
.nw-item__meta {
  margin-top: auto; padding-top: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-400);
}
.nw-item__city {
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-800); font-weight: 600;
}
.nw-item__city:hover { background: var(--brand-100); }
.nw-item__source { font-weight: 600; color: var(--ink-600); }
.nw-item__origin { font-family: var(--font-mono); font-size: 12px; }
.nw-item__date { margin-left: auto; }

/* ---------- ⑬ 门户首页：左频道定位栏 + 右主内容列 ---------- */
/* 首页把全站栏目收进一条主内容列，左侧常驻「频道定位」栏，构成门户骨架。
   主内容列的每个栏目都用 `.pblock` 外壳，与独立栏目页的 `.section` 共用同一
   份内容渲染函数（见 portal-sections.php 的 `$bare` 参数）。 */
.home-portal {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 26px var(--gutter) 0;
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.home-portal__main { min-width: 0; display: grid; gap: 22px; }

/* 门户主内容列比全宽 section 窄约 25%（1200 容器 − 264 频道栏 − 26 间距 ≈ 862px）。
   通用 `.grid--4` 在这条列里会把商家卡压到约 200px，低于设计系统里 4 列卡的常规宽度
   （全宽约 273px），标题、评分、地址与底部双按钮都会挤成多行；这里降到 3 列对齐常规卡宽。
   ≤900px 交回 anchanglu.css 的通用降级（2 列 / 1 列），不重复定义。 */
@media (min-width: 901px) {
  .home-portal__main .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 场景板块下方的商家切片、分类信息列表：原先靠行内 style 表达间距，
   按 `docs/CONVENTIONS.md` §4.3「禁止行内 style」收进类。 */
.scene-listings { margin-top: 22px; }
.cl-list { gap: 10px; }
.gl-notice { margin-top: 20px; }

.pblock {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 24px;
}
.pblock--paper { background: var(--paper-3); }

/* 频道定位栏 */
.rail { display: grid; gap: 14px; }
.rail__card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
}
.rail__head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; color: #fff; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700));
}
.rail__head svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--gold-400); }
.rail__nav { display: grid; }
.rail__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; color: var(--ink-700);
  border-left: 3px solid transparent;
  transition: all var(--dur) var(--ease);
}
.rail__link + .rail__link { border-top: 1px solid var(--line-soft); }
.rail__link:hover { background: var(--brand-50); color: var(--brand-800); }
.rail__link.is-active {
  background: var(--brand-50); border-left-color: var(--accent-500);
  color: var(--brand-800); font-weight: 700;
}
.rail__icon { display: inline-flex; flex: 0 0 18px; color: var(--brand-600); }
.rail__icon svg { width: 17px; height: 17px; }
.rail__link.is-active .rail__icon { color: var(--accent-600); }
.rail__label { flex: 1 1 auto; min-width: 0; }
.rail__count {
  flex: 0 0 auto; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-400); font-size: 12px; font-weight: 600;
}
.rail__link.is-active .rail__count { background: var(--paper); color: var(--brand-700); }
.rail__ext { display: inline-flex; color: var(--ink-300); }
.rail__ext svg { width: 13px; height: 13px; }

.rail__group { padding: 12px 14px 14px; }
.rail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail__chip {
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  color: var(--ink-600); font-size: 12.5px; line-height: 1.7;
  transition: all var(--dur) var(--ease);
}
.rail__chip:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-800); }
.rail__more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; }

.rail__card--cta { border-color: transparent; background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700)); }
.rail__cta { padding: 16px; color: #fff; }
.rail__cta strong { display: block; font-size: 15px; color: #fff; }
.rail__cta p { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, .82); }

/* ---------- 窄屏降级 ---------- */
@media (max-width: 1080px) {
  /* 单列：频道定位栏转为顶部横向滚动条；快捷城市 / 品类卡让位给主内容列里的
     完整板块（两者内容重复，窄屏没必要占两遍纵向空间）。 */
  .home-portal { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .rail { gap: 12px; }
  .rail__nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rail__link {
    flex: 0 0 auto; padding: 11px 14px; white-space: nowrap;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  .rail__link + .rail__link { border-top: 0; border-left: 1px solid var(--line-soft); }
  .rail__link.is-active { border-left-color: transparent; border-bottom-color: var(--accent-500); }
  .rail__card--quick { display: none; }
}
@media (max-width: 900px) {
  .home-portal__main { gap: 18px; }
  .tl { grid-template-columns: 1fr; }
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-head { flex-direction: column; gap: 16px; }
  .tool-head__aside { flex-direction: row; }
  .fx__form { grid-template-columns: 1fr; }
  .fx__swap { justify-self: start; }
  .fx__tables { grid-template-columns: 1fr; }
  .tip__form { grid-template-columns: 1fr; }
  .tip__out { grid-template-columns: 1fr; }
  .nw-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-portal { padding-top: 16px; }
  .pblock { padding: 18px 16px; border-radius: var(--r-md); }
  .rail__head { padding: 11px 14px; }
  .rail__link { padding: 10px 12px; font-size: 13.5px; }
  .rail__count { display: none; }
  .box-grid { grid-template-columns: 1fr; }
  .evt-item { flex-direction: column; gap: 10px; }
  .evt-item__date {
    border-right: 0; border-bottom: 1px solid var(--line-soft);
    padding: 0 0 8px; display: flex; align-items: baseline; gap: 8px; text-align: left;
  }
  .tool-head__title { font-size: 23px; }
  .tool-panel__body { padding: 16px; }
  .fx__result strong { font-size: 28px; }
  .zip__form { grid-template-columns: 1fr; }
  .zip__submit { justify-content: center; }
  .nw-item { padding: 16px; }
  .nw-item__date { margin-left: 0; }
}