/*
 * User web UI system.
 *
 * The visual grammar follows DBX's compact application shell: neutral surfaces,
 * thin separators, small radii and restrained elevation. Ya Wang's green stays
 * the product accent so the storefront remains recognisable and accessible.
 */
:root {
  /* 这一族 `--ya-*` 曾是本文件私有的**字面量**色板（亮色专用），
     与 design-system 的 `--yw-*` / 语义令牌平行存在。后果是它覆盖到的区块
     对外观设置完全免疫：切主题色（10 套 accent）、切圆角（3 档）、切暗色，
     这些区块都纹丝不动——因为 `--ya-accent: #087d5b`、`--ya-radius-sm: 4px`
     是写死的，跟令牌无关。
     现在整族改为**设计令牌的别名**：解析推迟到使用时刻，因此暗色、主题色、
     圆角档位会自动传下来，本文件 78 处 var(--ya-*) 一处不用改。
     亮色下与原来的字面量几乎同色（--ya-accent #087d5b ↔ --primary #0b805f），
     所以视觉不会突然换脸，只是从此跟着设置走。 */
  --ya-background: var(--background);
  --ya-foreground: var(--foreground);
  --ya-card: var(--card);
  --ya-card-foreground: var(--card-foreground);
  --ya-muted: var(--muted);
  --ya-muted-foreground: var(--muted-foreground);
  --ya-border: var(--border);
  --ya-border-strong: var(--border-strong);
  --ya-accent: var(--primary);
  --ya-accent-hover: var(--primary-hover);
  --ya-accent-soft: var(--primary-soft);
  --ya-danger: var(--destructive);
  --ya-radius-sm: var(--yw-radius-sm);
  --ya-radius-md: var(--yw-radius-md);
  --ya-shadow-sm: var(--yw-shadow-sm);
  --ya-shadow-md: var(--yw-shadow-md);

  /* Compatibility with the existing public templates. */
  --green: var(--ya-accent);
  --mint: var(--ya-accent);
  --brand: var(--ya-accent);
  --line: var(--ya-border);
  --text-muted: var(--ya-muted-foreground);
  --surface-soft: var(--ya-muted);
  color: var(--ya-foreground);
  background: var(--ya-background);
}

html { background: var(--ya-background); }

body {
  background: var(--ya-background) !important;
  color: var(--ya-foreground);
  font-family: "Geist Variable", Inter, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.005em;
}

/* 页头：高度、配色、控件形状与悬停态全部交给 design-system.css 的
   「页头工具栏」一节（该文件注入在文档最后，是页头的唯一真源）。

   这里此前用 !important 抢过一批页头属性，每一项都留下了可见后果：
     · `body > header > div > div { height: 52px !important }`
       与 design-system 的页头 64px 打架，页头里那一行只有 52px，
       整行内容因此偏上 6px 而不是垂直居中；
     · `body > .h-14 { height: 52px !important }`
       固定页头的占位块比页头矮 12px，每个页面首屏内容都被压住一截；
     · `body > header form input { height: 32px !important }`
       搜索框被压回 32px，和同排其它控件对不齐；
     · `body > header a[href="/merchant/apply"] { background: var(--ya-accent) }`
       把「发布活动」钉死在硬编码的品牌绿上，切主题色时它不跟着变。
   这些规则已全部删除，改由 design-system.css 消费语义令牌实现。 */

/* 页头只留结构（导航间距），皮肤全部交给 design-system.css §12。
   这里原先还写着 `height: 52px` 与 `background: rgb(250 250 250 / 0.96)`：
   高度比 §12 的 64px 矮 12px（靠 §12 覆盖才没出事），底色是亮色专用的
   字面量（暗色下靠另一条 §12 规则盖住）。两条都是"靠别人压着才正确"的
   隐患，直接删掉。 */
.site-header {
  border-color: var(--ya-border);
}

.site-header nav { gap: 4px; }
.site-header nav a { padding: 7px 10px; border-radius: var(--ya-radius-sm); }
.site-header nav a:hover { background: var(--ya-muted); color: var(--ya-foreground); }

/* 全站输入控件归一。这里保留 !important（页头等局部要覆盖时必须给出
   更高的特异性），但取色一律改走语义令牌：原先写死 --ya-accent
   （#087d5b），切主题色后表单描边与聚焦环不跟着变。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border-color: var(--input) !important;
  border-radius: var(--yw-radius-md) !important;
  background: var(--card) !important;
  color: var(--foreground);
  box-shadow: var(--yw-shadow-sm);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover { border-color: var(--muted-foreground) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

/* 注意 button[type="submit"] 那一档带了 :not(:has(svg))：
   页头与移动端搜索框里的放大镜是"纯图标提交按钮"（class 只有 absolute left-*
   和 cursor-pointer），把它当实心按钮渲染会变成一块顶着输入框左边缘、还比
   输入框高 4px 的绿块。真正要实心样式的文字提交按钮不带 svg，仍然命中。 */
.btn,
.primary-link,
.publish-link,
button[type="submit"]:not(:has(svg)),
#wechat-pay,
#submit-order,
.promo-actions a,
.list-hero-actions a {
  min-height: 36px;
  border-radius: var(--ya-radius-sm) !important;
  font-size: 14px;
  font-weight: 650;
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.btn:not(.light):not(.ghost):not(.secondary),
.primary-link,
.publish-link,
button[type="submit"]:not(:has(svg)),
#wechat-pay,
#submit-order {
  background: var(--ya-accent) !important;
  /* 白字写死会在暗色下失配：暗色 --primary 提亮成亮薄荷后，
     白字对比度只剩 2.34:1，必须跟随前景令牌翻成深墨绿。 */
  color: var(--primary-foreground) !important;
}

.btn:not(.light):not(.ghost):not(.secondary):hover,
.primary-link:hover,
.publish-link:hover,
button[type="submit"]:not(:has(svg)):hover,
#wechat-pay:hover,
#submit-order:hover { background: var(--ya-accent-hover) !important; }

.btn.secondary,
.btn.light {
  border: 1px solid var(--ya-border-strong);
  background: var(--ya-card);
  color: var(--ya-foreground);
}

.btn.secondary:hover,
.btn.light:hover { background: var(--ya-muted); }

button:disabled,
.btn:disabled { opacity: 0.48; cursor: not-allowed; }

button,
a[href],
input,
select,
textarea { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--ya-accent) !important;
  outline-offset: 2px !important;
}

.panel,
.card,
.empty,
.account-nav,
.account-row,
.order-card,
.category-grid a,
.event-card,
.service-card,
.filter-panel,
.trust-item,
.category-strip,
.region-dialog,
[role="dialog"] > div:last-child {
  border-color: var(--ya-border) !important;
  border-radius: var(--ya-radius-md) !important;
  box-shadow: var(--ya-shadow-sm) !important;
}

.event-card:hover,
.service-card:hover {
  transform: translateY(-1px);
  border-color: var(--ya-border-strong) !important;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.07) !important;
}

.account-nav { padding: 4px; background: var(--ya-muted); }

.account-nav a,
aside nav a {
  border-radius: var(--ya-radius-sm) !important;
  transition: background-color 150ms ease, color 150ms ease;
}

.account-nav a.active,
aside nav a[aria-current="page"] {
  background: var(--ya-card) !important;
  color: var(--ya-foreground) !important;
  box-shadow: var(--ya-shadow-sm);
}

.tags span,
.card-status,
.hero-kicker {
  border-radius: var(--ya-radius-sm);
  background: var(--ya-accent-soft);
  color: var(--ya-accent);
}

.home-hero,
.list-hero,
.list-page { background: var(--ya-background); }

.home-hero::before,
.list-hero::before { opacity: 0.35; }

.hero-wrap { padding-top: 24px; padding-bottom: 28px; }

.hero-tabs {
  margin-bottom: 18px;
  padding: 4px;
  gap: 2px;
  border-color: var(--ya-border);
  border-radius: var(--ya-radius-md);
  background: var(--ya-muted);
  box-shadow: none;
  backdrop-filter: none;
}

.hero-tabs a { height: 30px; min-width: 64px; border-radius: var(--ya-radius-sm); }

.hero-tabs a.active {
  background: var(--ya-card);
  color: var(--ya-foreground);
  box-shadow: var(--ya-shadow-sm);
}

.hero-flank { display: none; }
.hero-stage,
.hero-carousel,
.hero-slide { height: 380px; }
.hero-carousel { width: 100%; }
.hero-slide { width: 100%; border-radius: var(--ya-radius-md); }
.hero-slide.prev,
.hero-slide.next { opacity: 0; transform: translateX(-50%) scale(0.98); }
.hero-slide.active { box-shadow: var(--ya-shadow-md); }

.hero-title { font-size: clamp(34px, 4.2vw, 54px); }
.hero-content { padding: 0 clamp(28px, 6vw, 72px); }

.category-strip {
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--ya-card);
  backdrop-filter: none;
}

.category-pill span:first-child {
  border-color: var(--ya-border);
  border-radius: var(--ya-radius-md);
  background: var(--ya-muted);
  box-shadow: none;
}

.feed-section { margin-top: 42px; }
.section-row { margin-bottom: 16px; }
.section-row h2 { font-size: 24px; font-weight: 750; }
.section-row h2 span { border-radius: var(--ya-radius-sm); background: var(--ya-accent-soft); color: var(--ya-accent); }

.market-grid,
.recommend-grid,
.service-grid { gap: 16px; }

.event-card,
.service-card { border-radius: var(--ya-radius-md); }
.event-body,
.service-body { min-height: 164px; padding: 15px; }
.event-title,
.service-title { font-size: 16px; font-weight: 700; }
.event-foot { padding-top: 12px; }

.trust-band { gap: 10px; }
.trust-item { min-height: 80px; padding: 14px 16px; }

.home-promo {
  margin-top: 52px;
  min-height: 200px;
  border: 1px solid #18483d;
  border-radius: var(--ya-radius-md);
  background: #173b33;
  box-shadow: none;
}

.promo-panel { border-radius: var(--ya-radius-md); box-shadow: none; }

.list-hero-wrap { padding-top: 24px; padding-bottom: 28px; }

.list-hero-card {
  min-height: 270px;
  padding: 40px 48px;
  border: 1px solid #292929;
  border-radius: var(--ya-radius-md);
  background: linear-gradient(135deg, #171717 0%, #21443b 100%);
  box-shadow: var(--ya-shadow-md);
}

.list-hero-card.service-tone { background: linear-gradient(135deg, #171717 0%, #1c5142 100%); }
.list-hero-title { font-size: clamp(34px, 4vw, 48px); }
.list-shell { padding-top: 32px; }

.filter-panel {
  padding: 18px 20px;
  background: var(--ya-card);
  backdrop-filter: none;
}

.filter-options a.active {
  border-radius: var(--ya-radius-sm);
  background: var(--ya-foreground);
  color: #fff;
}

body > footer { background: #171717 !important; }

@media (max-width: 900px) {
  .hero-stage,
  .hero-carousel,
  .hero-slide { height: 320px; }
  .list-hero-card { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .list-hero-panel { display: none; }
}

@media (max-width: 720px) {
  /* 页头高度与占位块随断点变化的定义已移入 design-system.css
     （页头不再是 52px，见本文件顶部说明）。 */
  .hero-wrap { padding: 14px; }
  .hero-tabs { margin-bottom: 12px; }
  .hero-tabs a { height: 44px; }
  .btn,
  .primary-link,
  .publish-link,
  button[type="submit"]:not(:has(svg)),
  #wechat-pay,
  #submit-order,
  .promo-actions a,
  .list-hero-actions a { min-height: 44px; }
  .hero-stage,
  .hero-carousel,
  .hero-slide { height: 240px; }
  .hero-content { padding: 0 22px; }
  .hero-title { font-size: 30px; }
  .hero-summary { margin-top: 12px; font-size: 14px; line-height: 1.65; }
  .category-strip { margin-top: 12px; padding: 14px 10px; }
  .feed-section { margin-top: 32px; }
  .section-row h2 { font-size: 21px; }
  .list-hero-card { padding: 28px 24px; }
  .list-shell { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}