/* ============================================================================
 * 牙网公众站设计系统 (design-system.css)
 * ----------------------------------------------------------------------------
 * 职责：**组件层 + 历史类名兼容层**。不定义任何色值/尺度，全部消费 tokens.css。
 *
 * 三件套分工（参考 t8y2/dbx）：
 *   assets/tokens.css         令牌：色值与尺度的唯一来源，含 .dark 覆盖
 *   assets/tailwind.css       @theme 桥接：让 Tailwind 生成 bg-primary 这类工具类
 *   assets/design-system.css  本文件：组件与兼容层，兜住 29 个历史模板
 *
 * 加载位置由 src/middleware/web_original.rs 的 INJECTED_BODY 决定：
 * 注入到 `</body>` 之前，即整份文档最后一个样式表。
 * 为什么不能在 `</head>`：10 个模板在 <body> 里还各带 1–2 块内联 <style>
 * （about / category / deal / event / events / hospital / hospitals / privacy /
 * services / terms），它们的文档顺序在 <head> 之后，只注入到 </head> 前会被
 * 这些内联块反过来压住，兜底就失效了。
 *
 * 生效顺序（从弱到强）：
 *   <head>:  original-daisyui.css → 各页内联 style → original-bridge.css
 *            → tokens.css → tailwind.css
 *   <body>:  account-ui.css / home.css / clinic.css / dialogs.css / 各页内联 style
 *   </body>: design-system.css（本文件，最后生效）
 *
 * 为什么它能压住 Tailwind：Tailwind v4 浏览器运行时把生成的 CSS 注入到
 * <head> 末尾，但其输出包在 @layer 内。按 CSS 层叠规则，未分层的声明
 * 优先于分层声明，因此本文件用普通特异性即可覆盖工具类，无需 !important。
 * 反过来说，未分层的规则也会压住 Tailwind 的 hover:/focus: 变体——
 * 所以第 7 节必须把交互态一并映射，否则悬停反馈会整体失效。
 *
 * 组织方式：
 *   1. 令牌            —— 已迁出到 tokens.css，本节只留说明
 *   2. Base 归一       —— reset、排版、容器、焦点态
 *   3. 基础组件        —— 按钮、表单、卡片、徽标、价格、分页、空态…
 *   4. 历史类名映射    —— 把历史页面的类名指向令牌，无需改每个模板
 *   5. 页面几何统一    —— 把所有页面族的内容宽度收敛到同一容器
 *   6. Tailwind 工具类 → 令牌映射（收敛 3000+ 处硬编码色值）
 *   7. 交互态（hover / focus）令牌映射
 *   8. 主题切换（亮 / 暗）
 * ========================================================================== */

/* ============================================================================
 * 1. 令牌
 * ----------------------------------------------------------------------------
 * 全部令牌已移入独立文件 `assets/tokens.css`（唯一色值与尺度来源）。
 * 本文件只消费令牌，不再定义任何值——这是与 t8y2/dbx 一致的分工：
 *   tokens.css      令牌
 *   tailwind.css    @theme 桥接（生成 bg-primary / border-border 等工具类）
 *   design-system.css  组件层 + 历史类名兼容层
 * 尺度令牌（--yw-space-* / --yw-text-* / --yw-radius-* / --yw-shadow-* /
 * --yw-control-* 等）与语义色令牌（--background / --foreground / --primary /
 * --muted-foreground / --border / --ring 等）均由 tokens.css 提供。
 * ========================================================================== */

/* ============================================================================
 * 2. Base 归一
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--yw-font-sans);
  font-size: var(--yw-text-sm);
  line-height: var(--yw-lh-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* 这两条归一必须放进 @layer base：若留在未分层，会压住 Tailwind
 * utilities 层的 text-white / text-[#10c98f]，品牌绿按钮上的白字
 * 会被继承来的深色覆盖（暗色下对比度仅 1.63:1）。放进 base 层后，
 * utilities 层优先级更高，工具类恢复正常；而无类名的普通链接/控件
 * 仍由本层归一（Tailwind preflight 也在 base 层，本文件位置更后，
 * 同层内仍然生效）。 */
@layer base {
  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* 移动端输入框字号必须 ≥16px，否则 iOS Safari 聚焦时自动放大页面 */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* 统一焦点态：只在键盘导航时出现，且全站同一形态 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--yw-radius-xs);
}

::selection {
  background: var(--primary-soft);
  color: var(--foreground);
}

/* 滚动条：桌面端收窄，视觉更安静 */
@media (min-width: 1024px) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
}

/* --- 统一容器：header / main / footer 全部使用，确保左右边缘对齐 --- */
.yw-container {
  width: 100%;
  max-width: var(--yw-container);
  margin-inline: auto;
  padding-inline: var(--yw-gutter);
}

/* --- 排版 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--yw-fw-semibold);
  line-height: var(--yw-lh-snug);
  color: var(--foreground);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--yw-text-4xl);
}

h2 {
  font-size: var(--yw-text-3xl);
}

h3 {
  font-size: var(--yw-text-2xl);
}

h4 {
  font-size: var(--yw-text-xl);
}

h5 {
  font-size: var(--yw-text-lg);
}

h6 {
  font-size: var(--yw-text-sm);
}

p {
  margin: 0;
}

small {
  font-size: var(--yw-text-2xs);
}

/* 页面主标题区：所有列表/详情页共用，取代各页自造的 hero 变体 */
.yw-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--yw-space-4);
  margin-bottom: var(--yw-space-6);
}

.yw-page-title {
  font-size: var(--yw-text-3xl);
  font-weight: var(--yw-fw-semibold);
  line-height: var(--yw-lh-tight);
  margin: 0;
}

.yw-page-subtitle {
  margin-top: var(--yw-space-2);
  font-size: var(--yw-text-sm);
  color: var(--muted-foreground);
}

/* 区块标题：全站统一的 section 头部 */
.yw-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yw-space-4);
  margin: var(--yw-space-10) 0 var(--yw-space-4);
}

.yw-section-head:first-child {
  margin-top: 0;
}

.yw-section-head h2 {
  font-size: var(--yw-text-2xl);
  font-weight: var(--yw-fw-semibold);
}

.yw-section-head a {
  font-size: var(--yw-text-xs);
  color: var(--primary-text);
  white-space: nowrap;
}

.yw-section-head a:hover {
  color: var(--primary-hover);
}

/* ============================================================================
 * 3. 基础组件
 * ========================================================================== */

/* --- 按钮：三个变体 × 三个尺寸，全站唯一来源 --- */
.yw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yw-space-2);
  height: var(--yw-control-md);
  padding-inline: var(--yw-space-5);
  border: 1px solid transparent;
  border-radius: var(--yw-radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--yw-dur-fast) var(--yw-ease),
    border-color var(--yw-dur-fast) var(--yw-ease), color var(--yw-dur-fast) var(--yw-ease);
}

.yw-btn:hover {
  background: var(--primary-hover);
}

.yw-btn:active {
  background: var(--primary-active);
}

.yw-btn[disabled],
.yw-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.yw-btn-sm {
  height: var(--yw-control-sm);
  padding-inline: var(--yw-space-4);
  font-size: var(--yw-text-xs);
}

.yw-btn-lg {
  height: var(--yw-control-lg);
  padding-inline: var(--yw-space-6);
  font-size: var(--yw-text-md);
}

.yw-btn-block {
  width: 100%;
}

.yw-btn-outline {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--foreground);
}

.yw-btn-outline:hover {
  background: var(--muted);
  border-color: var(--primary-border);
  color: var(--primary-text);
}

.yw-btn-soft {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.yw-btn-soft:hover {
  background: var(--primary-soft);
}

.yw-btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
}

.yw-btn-ghost:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* --- 表单控件 --- */
.yw-field {
  display: grid;
  gap: var(--yw-space-2);
}

.yw-label {
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
  color: var(--muted-foreground);
}

.yw-input,
.yw-select,
.yw-textarea {
  width: 100%;
  min-height: var(--yw-control-md);
  padding: var(--yw-space-2) var(--yw-space-3);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--yw-text-sm);
  line-height: var(--yw-lh-snug);
  transition: border-color var(--yw-dur-fast) var(--yw-ease),
    box-shadow var(--yw-dur-fast) var(--yw-ease);
}

.yw-input::placeholder,
.yw-textarea::placeholder {
  color: var(--text-tertiary);
}

.yw-input:focus,
.yw-select:focus,
.yw-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-shadow);
}

.yw-input[aria-invalid="true"],
.yw-textarea[aria-invalid="true"] {
  border-color: var(--destructive);
}

.yw-input[disabled],
.yw-select[disabled],
.yw-textarea[disabled] {
  background: var(--muted);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.yw-textarea {
  min-height: 104px;
  resize: vertical;
}

/* 字段级提示 / 错误：统一替代各页自造的 *-status、*-hint */
.yw-hint {
  font-size: var(--yw-text-2xs);
  line-height: var(--yw-lh-snug);
  color: var(--text-tertiary);
}

.yw-hint-error {
  color: var(--destructive);
}

.yw-hint-ok {
  color: var(--success);
}

/* --- 卡片 --- */
.yw-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  box-shadow: var(--yw-shadow-xs);
}

.yw-card-pad {
  padding: var(--yw-space-5);
}

.yw-card-interactive {
  transition: border-color var(--yw-dur) var(--yw-ease), box-shadow var(--yw-dur) var(--yw-ease);
}

.yw-card-interactive:hover {
  border-color: var(--primary-border);
  box-shadow: var(--yw-shadow-md);
}

/* --- 徽标 / 标签 --- */
.yw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--yw-space-1);
  padding: 2px var(--yw-space-2);
  border-radius: var(--yw-radius-xs);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--yw-text-2xs);
  font-weight: var(--yw-fw-medium);
  line-height: 18px;
  white-space: nowrap;
}

.yw-badge-primary {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.yw-badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.yw-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.yw-badge-danger {
  background: var(--destructive-bg);
  color: var(--destructive);
}

/* --- 价格：全站唯一写法，取代散落的 event-price / service-price / card-price --- */
.yw-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--price);
  font-weight: var(--yw-fw-semibold);
  line-height: var(--yw-lh-tight);
}

.yw-price-symbol {
  font-size: 0.75em;
}

.yw-price-value {
  font-size: var(--yw-text-3xl);
}

.yw-price-note {
  font-size: var(--yw-text-2xs);
  color: var(--text-tertiary);
  font-weight: var(--yw-fw-regular);
}

.yw-price-origin {
  font-size: var(--yw-text-2xs);
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-weight: var(--yw-fw-regular);
}

/* --- 分页 --- */
.yw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--yw-space-2);
  margin-top: var(--yw-space-8);
}

.yw-pagination a,
.yw-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--yw-control-sm);
  height: var(--yw-control-sm);
  padding-inline: var(--yw-space-3);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  background: var(--card);
  font-size: var(--yw-text-xs);
  color: var(--muted-foreground);
}

.yw-pagination a:hover {
  border-color: var(--primary-border);
  color: var(--primary-text);
}

.yw-pagination [aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* --- 空态 / 加载 --- */
.yw-empty {
  padding: var(--yw-space-12) var(--yw-space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--yw-radius-md);
  background: var(--card);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--yw-text-sm);
}

.yw-skeleton {
  border-radius: var(--yw-radius-sm);
  background: linear-gradient(90deg, var(--muted) 25%, var(--muted) 37%, var(--muted) 63%);
  background-size: 400% 100%;
  animation: yw-skeleton 1.4s ease infinite;
}

@keyframes yw-skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yw-skeleton {
    animation: none;
  }
}

/* --- 弹层：遮罩 + 面板，统一 regionModal / credential-dialog / payment-dialog --- */
.yw-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--yw-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yw-space-4);
  background: rgba(24, 35, 31, 0.45);
  backdrop-filter: blur(2px);
}

.yw-dialog {
  position: relative;
  z-index: var(--yw-z-dialog);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: hidden auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  box-shadow: var(--yw-shadow-lg);
}

.yw-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yw-space-4);
  padding: var(--yw-space-5) var(--yw-space-5) var(--yw-space-4);
  border-bottom: 1px solid var(--border);
}

.yw-dialog-body {
  padding: var(--yw-space-5);
}

.yw-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--yw-space-3);
  padding: var(--yw-space-4) var(--yw-space-5);
  border-top: 1px solid var(--border);
  background: var(--muted);
}

.yw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--yw-control-sm);
  height: var(--yw-control-sm);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color var(--yw-dur-fast) var(--yw-ease), color var(--yw-dur-fast) var(--yw-ease);
}

.yw-icon-btn:hover {
  border-color: var(--primary-border);
  color: var(--primary-text);
}

/* --- Toast --- */
#toast {
  position: fixed;
  left: 50%;
  bottom: var(--yw-space-8);
  z-index: var(--yw-z-toast);
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--yw-space-3) var(--yw-space-5);
  border-radius: var(--yw-radius-sm);
  background: var(--surface-strong);
  color: var(--surface-strong-foreground);
  font-size: var(--yw-text-xs);
  box-shadow: var(--yw-shadow-lg);
}

#toast:empty {
  display: none;
}

/* --- 表格 --- */
.yw-table {
  width: 100%;
  font-size: var(--yw-text-xs);
}

.yw-table th,
.yw-table td {
  padding: var(--yw-space-3) var(--yw-space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.yw-table th {
  color: var(--muted-foreground);
  font-weight: var(--yw-fw-medium);
  background: var(--muted);
}

/* 长表格在窄屏横向滚动，避免撑破页面 */
.yw-table-scroll,
.yw-prose-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 头像 --- */
.yw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--yw-radius-full);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
}

.yw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
 * 4. 历史类名映射
 * ----------------------------------------------------------------------------
 * 下面这一层把历史页面已经在用的类名指到令牌上，让老页面无需逐个改模板
 * 就能获得统一外观。择机应把模板改为直接使用第 3 节的 yw-* 组件类。
 * ========================================================================== */

/* --- 跳到主要内容 --- */
.skip-link {
  position: fixed;
  left: var(--yw-space-4);
  top: -60px;
  z-index: var(--yw-z-toast);
  padding: var(--yw-space-2) var(--yw-space-4);
  border-radius: var(--yw-radius-sm);
  background: var(--surface-strong);
  color: var(--surface-strong-foreground);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
  transition: top var(--yw-dur) var(--yw-ease);
}

.skip-link:focus {
  top: var(--yw-space-3);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- 通用按钮（原 styles.css / daisyui 的 .btn 与 .btn-primary） --- */
.btn,
.primary-link,
.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yw-space-2);
  min-height: var(--yw-control-md);
  padding: var(--yw-space-2) var(--yw-space-5);
  border: 1px solid transparent;
  border-radius: var(--yw-radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-medium);
  line-height: 1;
  cursor: pointer;
}

.btn:hover,
.primary-link:hover {
  background: var(--primary-hover);
}

.btn.light {
  background: var(--card);
  color: var(--primary-text);
}

.btn.ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--primary-foreground);
}

.btn.secondary {
  background: var(--primary-soft);
  color: var(--primary-text);
}

/* --- 历史容器与主区域：统一到同一栅格，消除与 header/footer 的错位 --- */
main {
  width: 100%;
  max-width: var(--yw-container);
  margin-inline: auto;
  padding: var(--yw-space-6) var(--yw-gutter) var(--yw-space-20);
  min-height: 60vh;
}

/* --- 历史 hero：收敛为一种形态，不再有 28px 圆角 + 深色渐变 --- */
.hero {
  padding: var(--yw-space-10);
  border-radius: var(--yw-radius-lg);
  background: var(--surface-strong);
  color: var(--surface-strong-foreground);
}

.hero small {
  display: block;
  color: var(--surface-strong-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--yw-text-2xs);
}

.hero h1 {
  margin: var(--yw-space-3) 0;
  color: var(--surface-strong-foreground);
  font-size: var(--yw-text-5xl);
}

.hero p {
  max-width: 720px;
  color: var(--surface-strong-muted);
  font-size: var(--yw-text-md);
  line-height: var(--yw-lh-relaxed);
}

/* --- 历史卡片容器 --- */
.card,
.panel,
.empty {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  box-shadow: var(--yw-shadow-xs);
}

.empty {
  padding: var(--yw-space-10) var(--yw-space-6);
  border-style: dashed;
  text-align: center;
  color: var(--text-tertiary);
}

.cover {
  height: 148px;
  padding: var(--yw-space-4);
  color: var(--primary-foreground);
  font-weight: var(--yw-fw-medium);
  background: var(--primary);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yw-space-4);
  margin: var(--yw-space-10) 0 var(--yw-space-4);
}

.section-head h2 {
  font-size: var(--yw-text-2xl);
}

/* --- 历史表单 --- */
.form {
  display: grid;
  gap: var(--yw-space-4);
}

.form small {
  font-size: var(--yw-text-2xs);
  font-weight: var(--yw-fw-regular);
  color: var(--text-tertiary);
}

.form-status {
  min-height: 20px;
  margin: 0;
  font-size: var(--yw-text-2xs);
  color: var(--success);
}

.form-status.bad {
  color: var(--destructive);
}

/* --- 历史分页 --- */
.listing-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--yw-space-4);
  margin-top: var(--yw-space-8);
  font-size: var(--yw-text-xs);
  color: var(--muted-foreground);
}

/* --- 组织者徽标 / 关注按钮（原 public-ui.css 的孤立蓝色） --- */
.org-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--yw-space-2);
  border-radius: var(--yw-radius-xs);
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--yw-text-2xs);
  line-height: 18px;
  font-weight: var(--yw-fw-medium);
  white-space: nowrap;
}

.organizer-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--yw-control-md);
  min-width: 120px;
  padding-inline: var(--yw-space-5);
  border: 1px solid transparent;
  border-radius: var(--yw-radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--yw-dur-fast) var(--yw-ease),
    border-color var(--yw-dur-fast) var(--yw-ease), color var(--yw-dur-fast) var(--yw-ease);
}

.organizer-follow:hover {
  background: var(--primary-hover);
}

.organizer-follow:disabled {
  opacity: 0.5;
  cursor: default;
}

.organizer-follow.followed {
  background: var(--card);
  border-color: var(--primary);
  color: var(--primary-text);
}

.organizer-follow.followed:hover {
  background: var(--primary-soft);
}

/* --- 积分卡等品牌色块：去掉渐变，改用纯色 --- */
.points-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yw-space-5);
  padding: var(--yw-space-6);
  border-radius: var(--yw-radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
}

.points-card > div {
  display: grid;
  gap: var(--yw-space-1);
}

.points-card span {
  padding: var(--yw-space-2) var(--yw-space-4);
  border-radius: var(--yw-radius-sm);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--yw-text-xs);
}

/* --- 商家入驻步骤条（原 support.css） --- */
.merchant-steps {
  display: grid;
  grid-auto-flow: column;
  gap: var(--yw-space-1);
  padding: var(--yw-space-1);
  border-radius: var(--yw-radius-md);
  background: var(--muted);
}

.merchant-steps b {
  padding: var(--yw-space-3);
  border-radius: var(--yw-radius-sm);
  text-align: center;
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
  color: var(--text-tertiary);
}

.merchant-steps b.active {
  background: var(--card);
  color: var(--primary-text);
  box-shadow: var(--yw-shadow-xs);
}

/* --- 长文（协议、法律文档） --- */
.legal-document {
  margin-top: var(--yw-space-6);
  font-size: var(--yw-text-sm);
  line-height: var(--yw-lh-relaxed);
  color: var(--foreground);
}

.legal-document h2 {
  margin-top: var(--yw-space-8);
  font-size: var(--yw-text-xl);
}

.legal-date {
  padding: var(--yw-space-3) var(--yw-space-4);
  border-radius: var(--yw-radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

.rich-content {
  font-size: var(--yw-text-sm);
  line-height: var(--yw-lh-relaxed);
  color: var(--foreground);
}

/* --- 诊所/机构页（原 clinic.css 的第三套绿 #07866b） --- */
.hospital-shell {
  font-size: var(--yw-text-md);
  line-height: var(--yw-lh-relaxed);
}

.hospital-shell section {
  scroll-margin-top: 84px;
}

.clinic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yw-space-2);
  margin: var(--yw-space-5) 0;
  padding: var(--yw-space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-md);
}

.clinic-nav a {
  padding: var(--yw-space-2) var(--yw-space-4);
  border-radius: var(--yw-radius-sm);
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
}

.clinic-nav a:hover,
.clinic-nav a[aria-current="true"] {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.clinic-book,
.clinic-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--yw-control-md);
  padding: var(--yw-space-2) var(--yw-space-5);
  border: 1px solid var(--primary);
  border-radius: var(--yw-radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-medium);
  cursor: pointer;
}

.clinic-book:hover {
  background: var(--primary-hover);
}

.clinic-secondary {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--foreground);
}

.clinic-book:disabled {
  opacity: 0.5;
  cursor: wait;
}

.clinic-muted {
  font-size: var(--yw-text-xs);
  color: var(--text-tertiary);
}

.hospital-shell .doctor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--yw-space-4);
}

.hospital-shell .doctor-card {
  display: flex;
  align-items: flex-start;
  gap: var(--yw-space-4);
  min-width: 0;
  padding: var(--yw-space-5);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-md);
  background: var(--card);
}

@media (max-width: 640px) {
  .hospital-shell .doctor-grid {
    grid-template-columns: 1fr;
  }

  .hospital-shell .doctor-card {
    padding: var(--yw-space-4);
    gap: var(--yw-space-3);
  }
}

/* --- 历史品牌类别名（原 29 份内联块里定义，已随内联块删除） ---
   .bg-primary / .text-primary / .border-primary / focus:border-primary 同时也会
   由 tailwind.css 的 @theme 生成，这里再显式写一遍是为了保证是「未分层」规则——
   否则它们会输给页面自己的内联样式。 */
.bg-primary,
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover,
.bg-primary-dark,
.hover\:bg-primary-dark:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.text-primary {
  color: var(--primary-text);
}

.border-primary {
  border-color: var(--primary);
}

/* --- 历史页脚（support.css 与 styles.css 各有一套，统一为一套 --- */
.site-footer {
  display: block;
  padding: var(--yw-space-12) var(--yw-gutter) var(--yw-space-6);
  background: var(--surface-strong);
  color: var(--surface-strong-muted);
}

.site-footer nav,
.site-footer section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yw-space-3);
}

.site-footer nav b,
.site-footer section > b {
  color: var(--surface-strong-foreground);
  font-size: var(--yw-text-xs);
}

.site-footer p,
.site-footer small {
  margin: 0;
  color: var(--surface-strong-muted);
  font-size: var(--yw-text-xs);
  line-height: var(--yw-lh-relaxed);
}

.footer-grid {
  display: grid;
  gap: var(--yw-space-8);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--yw-space-2);
  margin-top: var(--yw-space-8);
  padding-top: var(--yw-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted-foreground);
  font-size: var(--yw-text-2xs);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- 页头登录状态切换：保持原有 id 钩子不变，只统一外观 --- */
.yw-has-local-user #headerUserNotLogin {
  display: none !important;
}

.yw-has-local-user #headerUserLoggedIn {
  display: flex !important;
}

/* --- 移动端菜单（原 support.css 的 .mobile-menu / .mobile-menu-toggle） --- */
.mobile-menu-toggle {
  display: inline-flex;
}

.mobile-menu {
  padding: var(--yw-space-4) var(--yw-gutter);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.mobile-menu:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--yw-space-2);
}

.mobile-menu a {
  padding: var(--yw-space-3);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  font-size: var(--yw-text-xs);
  color: var(--foreground);
}

.mobile-menu a:hover {
  border-color: var(--primary-border);
  color: var(--primary-text);
}

/* --- 地区选择弹窗（原 support.css 的 .region-dialog） --- */
.region-dialog {
  width: min(680px, calc(100vw - 32px));
  padding: var(--yw-space-5);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  box-shadow: var(--yw-shadow-lg);
}

.region-dialog::backdrop {
  background: rgba(24, 35, 31, 0.45);
}

.region-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.region-dialog header h2 {
  margin: 0;
  font-size: var(--yw-text-2xl);
}

.region-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--yw-space-2);
  margin-top: var(--yw-space-4);
  max-height: 55vh;
  overflow: auto;
}

.region-option {
  padding: var(--yw-space-3);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--yw-text-xs);
  cursor: pointer;
}

.region-option:hover {
  border-color: var(--primary-border);
  color: var(--primary-text);
}

@media (max-width: 820px) {
  .region-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 搜索栏（原 support.css 的 .search-large） --- */
.search-large select {
  min-height: var(--yw-control-lg);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  padding: var(--yw-space-2) var(--yw-space-3);
  background: var(--card);
}

@media (max-width: 820px) {
  .search-large {
    flex-wrap: wrap;
  }

  .search-large input {
    flex-basis: 100%;
  }

  .search-large select {
    flex: 1;
  }
}

/* --- 反馈附件预览 --- */
.feedback-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yw-space-3);
}

.feedback-previews img {
  width: 100%;
  height: 110px;
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  object-fit: cover;
}

/* --- 价值主张栅格 --- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yw-space-4);
}

.value-grid > div {
  padding: var(--yw-space-5);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-md);
  background: var(--primary-soft);
}

.value-grid h3 {
  margin-top: 0;
  color: var(--primary-text);
  font-size: var(--yw-text-lg);
}

@media (max-width: 820px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 申请/审核列表 --- */
.application-row p {
  margin: var(--yw-space-2) 0 0;
  white-space: pre-line;
  font-size: var(--yw-text-xs);
  color: var(--muted-foreground);
}

.merchant-payment-result {
  display: grid;
  gap: var(--yw-space-3);
  padding: var(--yw-space-5);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-md);
  background: var(--primary-soft);
}

.merchant-payment-result strong {
  font-size: var(--yw-text-3xl);
  color: var(--primary-text);
}

.license-preview img {
  display: block;
  max-width: 320px;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-sm);
  object-fit: contain;
}

/* --- 上传控件 --- */
.upload-field input[type="file"] {
  padding: var(--yw-space-2);
}

/* ============================================================================
 * 5. 页面几何统一
 * ----------------------------------------------------------------------------
 * 为什么需要这一节：历史上每一类页面各自设定内容宽度，实测并存 7 个值——
 *   main 默认                      1180px   (styles.css / original-bridge.css)
 *   /deal/* /event/* 详情          1120px   (legacy.css)
 *   /category                      1120px   (legacy.css)
 *   .list-shell / .list-hero-wrap  1200px   (legacy.css)
 *   .home-shell                    1200px   (home.css)
 *   外壳 header/footer             1152px   (Tailwind max-w-6xl)
 *   /account/*                     880px    (account-ui.css，连外壳一起缩到 880px)
 *   /login                         无约束   (login.html 不加载 original-bridge.css)
 *   /register                      1180px   (flows.css 的 grid 布局)
 *
 * 加上 29 个模板各自带内联样式、只有 11 个加载 original-bridge.css，
 * 结果就是每切一个页面，内容宽度、左右边距、导航栏宽度都跟着变。
 *
 * 这里把所有页面族收敛到同一容器。header / main / footer 共用
 * --yw-container 与 --yw-gutter，三者左右边缘因此对齐。
 *
 * 另外：模板里 body[data-route=...] 的路由分支选择器（/services、/events、
 * /category、/login 等）实测只有 layout.html 带 data-route 属性，其余 28 个
 * 模板都只有 data-original-page，所以那些分支规则本来就是死代码，不构成约束。
 * ========================================================================== */

/* 外壳与内容包装统一到同一容器 —— 覆盖 account-ui.css 把外壳压到 880px 的接管 */
body > header > .max-w-6xl,
body > footer > .max-w-6xl,
#main-content > .max-w-6xl,
.max-w-6xl {
  max-width: var(--yw-container);
  padding-inline: var(--yw-gutter);
}

/* 内容区默认几何 */
main {
  width: 100%;
  max-width: var(--yw-container);
  margin-inline: auto;
  padding: var(--yw-space-6) var(--yw-gutter) var(--yw-space-20);
  min-height: 0;
}

/* 账户中心：原先由 account-ui.css 接管（#main-content 归零 + 内层 880px），交回统一容器 */
#main-content {
  width: 100%;
  max-width: var(--yw-container);
  margin-inline: auto;
  padding: var(--yw-space-6) var(--yw-gutter) var(--yw-space-12);
  min-height: 0;
}

#main-content > .max-w-6xl {
  max-width: none;
  padding-inline: 0;
}

/* 列表页与首页的内层容器不再自带宽度，避免与 main 叠加出双重内边距 */
.list-shell,
.list-hero-wrap,
.home-shell,
.legacy-category-shell {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* 首页内容需要和轮播、分类条共享同一条居中边界。此前这里被归零后，
 * 1200px 内容贴在桌面视口左侧，右侧留下整块空白。 */
body[data-original-page="home"] .home-shell {
  width: min(100%, var(--yw-container));
  margin-inline: auto;
  padding-inline: var(--yw-gutter);
}

/* 首页主导航已经固定在页头，轮播上方的重复标签会形成第二层导航。 */
body[data-original-page="home"] .hero-tabs {
  display: none;
}

/* 头部三段按内容宽度排列。左右两段不再用 1fr 拉伸，否则登录态下会把
 * 导航和搜索区域扩成三等分，看起来像一整块过宽的中间栏。
 *
 * 页头的高度、配色、控件形状与悬停态统一在本文件末尾的
 * 「页头工具栏」一节；这里只定义三段式栅格，不再插手皮肤。 */
body > header.fixed > .max-w-6xl {
  height: 100%;
  max-width: var(--yw-container);
  padding-inline: var(--yw-gutter);
}

body > header.fixed > .max-w-6xl > .flex.items-center.justify-between {
  display: grid;
  /* 三列：品牌+导航 | 搜索 | 动作区。
     原来三列都是 max-content 起步，且只有中列能收到 240px 停止。实测在
     「字号 XL + 密度宽松 + 九字以上区域名」的组合下，整行会比容器宽
     150px 以上；页头是 fixed 定位，溢出的部分既不换行也不产生滚动条，
     结果是调色板/月亮直接消失到屏幕外。
     现在左列允许收缩（minmax(0, …)），中列下限降到 150px，右列保持
     max-content 不参与让位——宁可压缩搜索与区域名，也要保证动作区在。 */
  grid-template-columns: minmax(0, max-content) minmax(150px, 320px) max-content;
  justify-content: space-between;
  align-items: center;
  gap: var(--yw-space-4);
  height: 100%;
}

body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:first-child {
  min-width: 0;
  gap: var(--yw-space-6);
}

body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:first-child > a:first-child {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 收口到工具栏那一层。原来写的是 `body > header.fixed nav`，而 <header>
   下还有第二组导航（#mobileMenuPanel），这条 nowrap 会一并落到移动面板上。
   工具栏导航项的不换行已由末尾「页头工具栏」一节给出，这里只保留作用域。 */
body > header.fixed > .max-w-6xl nav {
  white-space: nowrap;
}

body > header.fixed form[data-activity-search-form] {
  width: 100%;
  max-width: 320px;
  margin: 0;
}

/* 搜索框里的放大镜是纯图标提交按钮：尺寸压到 16px、去掉底色与描边，
   避免被全站的 button[type="submit"] 实心样式渲染成一块绿方块。
   输入框本体的高度/圆角/配色见末尾「页头工具栏」一节。 */
body > header.fixed form[data-activity-search-form] button[type="submit"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--text-tertiary);
}

body > header.fixed form[data-activity-search-form] button[type="submit"]:hover {
  background: transparent !important;
  color: var(--primary-text);
}

body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child {
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 1100px) {
  body > header.fixed > .max-w-6xl > .flex.items-center.justify-between {
    grid-template-columns: minmax(0, max-content) minmax(150px, 280px) max-content;
    gap: var(--yw-space-4);
  }
}

@media (max-width: 1023px) {
  body > header.fixed > .max-w-6xl > .flex.items-center.justify-between {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}

/* 认证页：/login 与 /register 收敛到同一窄容器，取代 无约束/1180px/600px/560px 四种 */
body[data-route="/login"] main,
body[data-route="/register"] main {
  max-width: 1040px;
  padding-top: var(--yw-space-8);
  padding-bottom: var(--yw-space-12);
}

@media (max-width: 640px) {
  body[data-route="/login"] main,
  body[data-route="/register"] main {
    max-width: none;
    padding-top: var(--yw-space-5);
    padding-bottom: var(--yw-space-8);
  }
}

/* 详情页与分类页收敛到统一容器 */
body[data-route^="/deal/"] main,
body[data-route^="/event/"] main,
body[data-route="/category"] main {
  max-width: var(--yw-container);
  padding: var(--yw-space-6) var(--yw-gutter) var(--yw-space-20);
}

/* 移动端统一内边距，取代 14px / 16px / 18px / 20px 混用 */
@media (max-width: 640px) {
  main {
    padding: var(--yw-space-5) var(--yw-gutter) var(--yw-space-12);
  }

  .hero {
    padding: var(--yw-space-6);
    border-radius: var(--yw-radius-md);
  }

  .hero h1 {
    font-size: var(--yw-text-4xl);
  }
}
/* ============================================================================
 * 6. Tailwind 工具类 → 设计令牌映射
 * ----------------------------------------------------------------------------
 * 29 个模板与 layout.html 各自内联了一份相同的 Tailwind 覆盖块，其中包含
 *   .rounded-xl / .rounded-2xl { border-radius: 8px !important }
 *   .shadow-sm/lg/xl/2xl   { box-shadow: … !important }
 * 把全站圆角拍平成单一值——这是"卡片、按钮、头像圆角自相矛盾"的直接原因。
 *
 * 同时，页面里到处是硬编码的任意值工具类，实测用量：
 *   bg-[#10c98f]      515 处       text-slate-600    445 处
 *   border-slate-100  305 处       border-slate-200  300 处
 *   text-slate-400    408 处       bg-slate-900      439 处
 * 每一处都是一次写死的色值，正是 327 个去重色值的来源。
 *
 * 本节把这些工具类改指到令牌，一次性收敛上千处硬编码。
 *
 * 关于 !important：圆角与阴影必须带 !important，因为被覆盖的声明本身带
 * !important——这是全文件唯一需要它的地方（另两处是登录态显隐切换）。
 * 后续删除模板里的重复内联块后，本节可以整体去掉 !important。
 * 颜色类不需要 !important：Tailwind 输出在 @layer 内，未分层声明优先。
 * ========================================================================== */

/* --- 品牌色：四个近似亮绿统一到品牌主色，覆盖 500+ 处 ---
 * 注意：#0f766e（深青 teal-700）不在此列——它是登录页推广面板与详情页
 * hero 的深色底，若并入 --primary，暗色下会被令牌提亮成亮绿。保持原值，
 * 两主题下都是深青底白字，对比度均达标。 */
.bg-\[\#10c98f\],
.bg-\[\#00b851\],
.bg-\[\#10b981\] {
  background-color: var(--primary);
}

.hover\:bg-\[\#0db884\]:hover,
.hover\:bg-\[\#008f40\]:hover {
  background-color: var(--primary-hover);
}

.text-\[\#10c98f\],
.text-\[\#18d19b\],
.text-\[\#0f9f76\],
.text-\[\#08795d\],
.text-\[\#07866b\],
.text-\[\#087d5b\] {
  color: var(--primary-text);
}

.border-\[\#10c98f\],
.hover\:border-\[\#10c98f\]:hover {
  border-color: var(--primary-border);
}

.bg-\[\#10c98f\]\/10 {
  background-color: var(--primary-soft);
}

.border-\[\#10c98f\]\/15,
.focus\:border-\[\#10c98f\]:focus {
  border-color: var(--primary-border);
}

.focus\:ring-\[\#10c98f\]\/15:focus {
  --tw-ring-color: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* --- 主色底上的白字跟随前景令牌 ---
 * 模板里 100+ 处 `bg-[#10c98f] text-white` / `bg-primary text-white`
 * 组合类把文字写死成白色。亮色下 --primary-foreground 就是白色，
 * 外观完全不变；暗色下 --primary 提亮成亮薄荷（--brand-dark），
 * 白字对比度只剩 2.34:1（支付页「微信支付」、登录页「登录」均中招），
 * 必须跟着翻成 --brand-ink 深墨绿。(0,2,0) 特异性压过单类 .text-white。 */
.bg-\[\#10c98f\].text-white,
.bg-primary.text-white {
  color: var(--primary-foreground);
}

/* 模板里的 hover:bg-primary-dark 引用了不存在的 --color-primary-dark
 * （@theme 只映射了 --color-primary-hover），悬停态一直是空操作；
 * 这里接上悬停令牌，与 hover:bg-[#0db884] 的接管行为对齐。 */
.hover\:bg-primary-dark:hover {
  background-color: var(--primary-hover);
}

/* --- 品牌浅色底与页面底色 --- */
.bg-\[\#f0fdf9\],
.bg-\[\#e7faf4\] {
  background-color: var(--primary-soft);
}

.bg-\[\#f7faf9\] {
  background-color: var(--background);
}

/* --- 白底 → 卡片层（模板里 400 处 bg-white） ---
   亮色下 --card 就是 #fff，与原来完全等价，所以这一条**不改变亮色外观**；
   暗色下它变深，卡片、页头、下拉菜单、弹层才会跟着主题走。
   没有这一条，暗色模式等于白做——页面 90% 的面积都是 bg-white。 */
.bg-white {
  background-color: var(--card);
}

/* 页头是 fixed + backdrop-blur + 0.95 透明，必须保留透明度，
   直接套 --card 会丢掉那层通透感。 */
.bg-white\/95 {
  background-color: color-mix(in srgb, var(--card) 95%, transparent);
}

.bg-white\/80 {
  background-color: color-mix(in srgb, var(--card) 80%, transparent);
}

/* 地区选择弹层的头部是一条浅色渐变（from-white via-#f6fffb to-#fff8f1）。
   只覆盖渐变的三个色标即可：Tailwind v4 的 --tw-gradient-stops 里存的是
   var(--tw-gradient-from) 这类**引用**，色标一变，整条渐变跟着变。 */
.from-white {
  --tw-gradient-from: var(--card);
}

.via-\[\#f6fffb\] {
  --tw-gradient-via: var(--surface-sunken);
}

.to-\[\#fff8f1\] {
  --tw-gradient-to: var(--surface-sunken);
}

/* 同上，针对纯色标的浅色渐变（about 等业务卡片用
   from-primary/10 via-cyan-50 to-white）。暗色下尾色标若还是纯白，
   整块卡片会亮成一片，压在上面的浅色文字直接读不出来。
   亮色下 --card 就是 #fff，外观不变。 */
.to-white {
  --tw-gradient-to: var(--card);
}

.via-white {
  --tw-gradient-via: var(--card);
}

.via-cyan-50 {
  --tw-gradient-via: var(--surface-sunken);
}

.to-slate-50 {
  --tw-gradient-to: var(--surface-sunken);
}

/* --- 语义状态色 --- */
.text-red-500,
.text-rose-500 {
  color: var(--destructive);
}

.text-green-500,
.text-emerald-500 {
  color: var(--success);
}

.divide-gray-100,
.divide-slate-100 {
  border-color: var(--border);
}

/* --- 圆角：改回令牌档位，撤销被拍平成 8px 的全局覆盖 --- */
.rounded {
  border-radius: var(--yw-radius-xs) !important;
}

.rounded-md {
  border-radius: var(--yw-radius-xs) !important;
}

.rounded-lg {
  border-radius: var(--yw-radius-sm) !important;
}

.rounded-xl {
  border-radius: var(--yw-radius-md) !important;
}

.rounded-2xl,
.rounded-3xl {
  border-radius: var(--yw-radius-lg) !important;
}

.rounded-none {
  border-radius: 0 !important;
}

/* --- 阴影：收敛到三档，撤销原来的统一阴影 --- */
.shadow-sm,
.shadow-xs {
  box-shadow: var(--yw-shadow-xs) !important;
}

.shadow,
.shadow-md {
  box-shadow: var(--yw-shadow-sm) !important;
}

.shadow-lg,
.shadow-xl {
  box-shadow: var(--yw-shadow-md) !important;
}

.shadow-2xl {
  box-shadow: var(--yw-shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

/* 品牌色阴影原本被压成一层通用灰阴影，这里保留主色投影 */
.shadow-\[\#10c98f\]\/25 {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

/* --- 灰阶：Tailwind slate / gray 两族统一到同一套中性色 --- */
.text-slate-950,
.text-slate-900,
.text-gray-900 {
  color: var(--foreground);
}

.text-slate-800,
.text-slate-700,
.text-gray-800,
.text-gray-700 {
  color: var(--foreground);
}

.text-slate-600,
.text-slate-500,
.text-gray-600,
.text-gray-500 {
  color: var(--muted-foreground);
}

.text-slate-400,
.text-slate-300,
.text-gray-400,
.text-gray-300 {
  color: var(--text-tertiary);
}

.bg-slate-900,
.bg-slate-950 {
  background-color: var(--surface-strong);
}

.bg-slate-50,
.bg-gray-50 {
  background-color: var(--muted);
}

.bg-slate-100,
.bg-gray-100 {
  background-color: var(--muted);
}

.bg-gray-300 {
  background-color: var(--border-strong);
}

.border-slate-100,
.border-gray-100,
.border-slate-200,
.border-gray-200 {
  border-color: var(--border);
}

.border-slate-300 {
  border-color: var(--border-strong);
}

/* --- 页脚与弹层的深色底：去掉渐变，改用纯色 --- */
body > footer {
  background-image: none;
  background-color: var(--surface-strong);
}

/* 深色底上的文字必须用浅灰阶。上面的中性色映射是给浅底用的，
   如果直接套到页脚会变成深底深字，这里用更高特异性纠正回来。

   注意不能用 --border-strong / --muted-foreground 这类「浅底语义」的令牌：
   它们在亮色下是半透明深色或中灰，落在深色页脚上等于隐身。
   页脚只认 --surface-strong-* 一族。 */
body > footer,
.site-footer {
  color: var(--surface-strong-muted);
}

/* 深底上的强调文字（标题、品牌名） */
body > footer .text-white,
.site-footer nav b,
.site-footer section > b,
body > footer .text-slate-950,
body > footer .text-slate-900,
body > footer .text-slate-800,
body > footer .text-slate-700,
body > footer .text-gray-900,
body > footer .text-gray-800,
body > footer .text-gray-700 {
  color: var(--surface-strong-foreground);
}

/* 深底上的次级文字（说明、版权、链接） */
body > footer .text-slate-600,
body > footer .text-slate-500,
body > footer .text-slate-400,
body > footer .text-slate-300,
body > footer .text-gray-600,
body > footer .text-gray-500,
body > footer .text-gray-400,
body > footer .text-gray-300,
.site-footer p,
.site-footer small {
  color: var(--surface-strong-muted);
}

/* 例外：深色页脚里嵌的浅色小卡片（登录页二维码卡 bg-white）。
 * 卡内文字落在卡片底（亮色为白、暗色为深卡）上，必须用回浅底语义色，
 * 否则白卡上是浅灰字（2.56:1）。特异性 (0,2,2) 高于上面那条 (0,1,2)。 */
body > footer .bg-white .text-slate-600,
body > footer .bg-white .text-slate-500,
body > footer .bg-white .text-gray-600,
body > footer .bg-white .text-gray-500,
.site-footer .bg-white .text-slate-600,
.site-footer .bg-white .text-slate-500 {
  color: var(--muted-foreground);
}

body > footer .bg-white .text-slate-400,
body > footer .bg-white .text-slate-300,
body > footer .bg-white .text-gray-400,
body > footer .bg-white .text-gray-300,
.site-footer .bg-white .text-slate-400,
.site-footer .bg-white .text-slate-300 {
  color: var(--text-tertiary);
}

/* ============================================================================
 * 7. 交互态（hover / focus）令牌映射
 * ----------------------------------------------------------------------------
 * 为什么必须显式列出交互态：本文件是未分层样式，按 CSS 层叠规则，
 * 未分层的声明优先于 Tailwind 输出所在的 @layer——而且 layer 的优先级
 * 高于 specificity。因此第 6 节的 .text-slate-600 会反过来压住 Tailwind
 * 的 .hover:text-[#10c98f]:hover，导致悬停反馈整体失效。
 *
 * 解决办法是把共存的交互变体一并映射：这样两条规则同属未分层，
 * 带 :hover / :focus 的那条特异性更高，交互态才能正常生效。
 *
 * 实测用量（模板 body 中的出现次数）：
 *   hover:text-[#10c98f]      730      hover:border-[#10c98f]     270
 *   hover:text-[#18d19b]      232      hover:bg-gray-50           119
 *   focus:border-[#10c98f]     89      focus:ring-[#10c98f]/15     89
 *   hover:bg-slate-50          89      hover:bg-[#0db884]          66
 * 后续把这些工具类从模板里换成 yw-* 语义类后，本节可整段删除。
 * ========================================================================== */

/* --- 文字悬停 --- */
.hover\:text-\[\#10c98f\]:hover,
.hover\:text-\[\#0db884\]:hover,
.hover\:text-\[\#08795d\]:hover,
.hover\:text-slate-700:hover {
  color: var(--primary-text);
}

.hover\:text-\[\#18d19b\]:hover,
.hover\:text-\[\#0f9f76\]:hover {
  color: var(--primary);
}

/* --- 边框悬停 / 聚焦 --- */
.hover\:border-\[\#10c98f\]:hover,
.focus\:border-\[\#10c98f\]:focus,
.focus-visible\:border-\[\#10c98f\]:focus-visible,
.focus\:border-primary:focus {
  border-color: var(--primary-border);
}

.hover\:border-\[\#10c98f\]\/40:hover,
.hover\:border-primary\/50:hover {
  border-color: var(--primary);
}

/* --- 背景悬停 / 聚焦 --- */
.hover\:bg-gray-50:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-\[\#f0fdf9\]:hover {
  background-color: var(--muted);
}

.hover\:bg-gray-200:hover {
  background-color: var(--border);
}

.hover\:bg-primary-dark:hover {
  background-color: var(--primary-hover);
}

.focus\:bg-white:focus {
  background-color: var(--card);
}

/* --- 焦点环 --- */
.focus\:ring-\[\#10c98f\]\/15:focus,
.focus\:ring-primary\/20:focus,
.focus-visible\:ring-\[\#10c98f\]\/20:focus-visible {
  --tw-ring-color: color-mix(in srgb, var(--primary) 22%, transparent);
}

.focus-visible\:ring-\[\#10c98f\]:focus-visible,
.focus-visible\:ring-\[\#10c98f\]\/30:focus-visible,
.focus\:ring-primary\/30:focus {
  --tw-ring-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

/* --- 阴影悬停：基准档位与悬停档位拉开一级，保证悬停有可见反馈 --- */
.hover\:shadow-md:hover {
  box-shadow: var(--yw-shadow-sm) !important;
}

.hover\:shadow-lg:hover {
  box-shadow: var(--yw-shadow-md) !important;
}

/* ============================================================================
 * 8. 主题切换（亮 / 暗）
 * ----------------------------------------------------------------------------
 * 由 assets/theme.js 驱动：在 <html> 上加/去 .dark，选择写入 localStorage。
 * 首屏着色由 </head> 前的同步内联脚本完成，避免刷新时闪白。
 * 按钮标记 #themeToggle 注入在每个模板页头右侧操作区（original/*.html），
 * 外观（尺寸/圆角/悬停）与页头其它图标按钮保持同形，定义在末尾
 * 「页头工具栏」一节。这里只管"亮色显示月亮、暗色显示太阳"这套图标切换。
 * ========================================================================== */

/* 亮色下显示月亮（点击进入暗色），暗色下显示太阳 */
.yw-theme-toggle .yw-icon-sun {
  display: none;
}

.dark .yw-theme-toggle .yw-icon-sun {
  display: block;
}

.dark .yw-theme-toggle .yw-icon-moon {
  display: none;
}

/* 切换瞬间的颜色过渡。只在 theme.js 加上 .yw-theme-anim 的 220ms 内生效，
   避免把过渡永久挂在所有元素上拖慢交互反馈。 */
.yw-theme-anim,
.yw-theme-anim *,
.yw-theme-anim *::before,
.yw-theme-anim *::after {
  transition: background-color 220ms var(--yw-ease),
    border-color 220ms var(--yw-ease), color 220ms var(--yw-ease) !important;
}

/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
  .yw-theme-anim,
  .yw-theme-anim *,
  .yw-theme-anim *::before,
  .yw-theme-anim *::after {
    transition: none !important;
  }
}

/* 暗色下 --primary 提亮为 rgb(52 190 151)，白字落在上面只有 2.3:1。
 * 品牌底 + 白字的组合（按钮、页脚 CTA）要把文字翻转为深色前景。
 * 同色选择器与后代选择器都要：有的模板把 text-white 写在子元素上。 */
.dark .bg-\[\#10c98f\].text-white,
.dark .bg-\[\#00b851\].text-white,
.dark .bg-\[\#10b981\].text-white,
.dark .bg-primary.text-white,
.dark .bg-\[\#10c98f\] .text-white,
.dark .bg-\[\#00b851\] .text-white,
.dark .bg-\[\#10b981\] .text-white,
.dark .bg-primary .text-white {
  color: var(--primary-foreground);
}

/* 人机验证按钮（pink.ya.wang）：暗色手工接管。
 * 它是有意设计的品牌控件（浅色渐变底 + 品牌绿左边条），第 9 节的自动
 * 分档会把它误并进「卡片层」而丢掉品牌特征，生成脚本已将相关选择器
 * 列入 MANUAL 排除。暗色下改为令牌驱动的深色控件，保留绿色左边条。 */
.dark #auth-pink-button {
  background-color: var(--muted);
  background-image: none;
  border-color: var(--border);
  border-left-color: var(--primary);
  color: var(--foreground);
}

.dark #auth-pink-button::before {
  color: var(--primary-text);
}

.dark #auth-pink-button::after {
  color: var(--muted-foreground);
}

.dark #auth-pink-button:hover:not(:disabled) {
  background-color: var(--primary-soft);
  border-color: var(--primary);
}

.dark #auth-pink-button:disabled {
  background-color: var(--surface-sunken);
  color: var(--muted-foreground);
}

.dark #auth-pink-button[data-verified="true"] {
  background-color: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-text);
}

/* 注册页内嵌的小号验证按钮保持品牌绿底白字（register.css 特异性更高，
 * 上面的背景规则压不过它，正是想要的结果），只有禁用态换暗色令牌。 */
.dark #auth-form.register-form #auth-pink-button:disabled {
  background-color: var(--surface-sunken);
  color: var(--muted-foreground);
}

/* ============================================================================
 * 9. 历史页面样式的暗色桥接（过渡层，全站迁移完成后可整体删除）
 * ----------------------------------------------------------------------------
 * 为什么需要这一节：29 个模板与 12 个按页样式表（home.css / clinic.css /
 * account-ui.css / legacy.css / original-bridge.css / flows.css / dialogs.css
 * / signup.css / register.css / styles.css / support.css / captcha.css）里，
 * 有约 600 处写死的颜色。第 6 节把 Tailwind 的灰阶文字映射到随主题翻转的
 * 令牌上之后，两边一叠加，暗色下就会出现「深底深字」或「浅底浅字」的
 * 不可读组合。
 *
 * 处理方式：把写死的颜色按明度分档映射到语义令牌 ——
 *   浅色背景 → --card / --surface-sunken / --muted / --primary-soft
 *   深色文字 → --card-foreground（原深） / --muted-foreground（原中灰）
 * 全部选择器一律加 `.dark ` 前缀：多出一级特异性，必然压住原声明；又因为
 * 只在 .dark 下生效，**亮色模式的结果与改造前逐像素一致**。
 *
 * 两条刻意保留的边界：
 *   * 品牌绿、价格红、链接蓝这类**彩色**文字不参与桥接。它们在暗底上本就有
 *     足够对比度，抹成灰反而是设计倒退。
 *   * 已在前面各节明确接管过的选择器会被跳过（见生成脚本的 taken 集合），
 *     避免覆盖有意为之的设计（.card / .btn.secondary / .clinic-secondary 等）。
 *
 * 本节由 web/gen_dark_bridge.py 自动生成（可加 --check 校验是否需要重跑），
 * 不是手写意图。移除条件：某一页的按页样式表完成向令牌迁移后，把对应选择器
 * 从本节删掉；全部迁移完成后，本节连同被迁移的按页样式表一起删除。
 * ========================================================================== */


/* 纯白/近白背景 → 卡片层 —— 共 140 个选择器 */
.dark #auth-captcha-frame,
.dark #auth-form.register-form .register-field input,
.dark #main-content .account-load-error,
.dark #main-content .btn-ghost,
.dark #main-content .btn-outline,
.dark #main-content .btn.secondary,
.dark #main-content input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]),
.dark #main-content textarea,
.dark #merchant-form [data-step-tab][aria-current=step],
.dark #native-payment-qr[data-state=scan],
.dark #payment-modal .payment-action:not(.payment-action-primary),
.dark #payment-modal .payment-dialog,
.dark .account-dialog,
.dark .account-dialog .dialog-actions .secondary {
  background-color: var(--card);
}
.dark .account-dialog .form input,
.dark .account-dialog .form select,
.dark .account-dialog .form textarea,
.dark .account-invitations,
.dark .account-nav,
.dark .account-row,
.dark .account-sidebar,
.dark .action-card,
.dark .auth-benefits > div,
.dark .category-card,
.dark .category-grid a,
.dark .category-hero,
.dark .category-hero-mark,
.dark .category-page {
  background-color: var(--card);
}
.dark .category-pill,
.dark .category-strip,
.dark .credential-qr-area,
.dark .detail-app-phone,
.dark .detail-help,
.dark .detail-hero,
.dark .detail-main,
.dark .detail-page,
.dark .detail-tabs,
.dark .detail-topbar,
.dark .doctor-card,
.dark .event-card,
.dark .event-favorite::before,
.dark .fake-qr {
  background-color: var(--card);
}
.dark .fake-qr div,
.dark .filter-panel,
.dark .footer-account,
.dark .footer-cta,
.dark .form input,
.dark .form select,
.dark .form textarea,
.dark .ghost-btn,
.dark .hero-action,
.dark .hero-controls .hero-indicator::after,
.dark .hero-controls .hero-indicator:hover,
.dark .hero-controls button:hover,
.dark .hero-kicker,
.dark .hero-slide[data-has-image="false"]::before {
  background-color: var(--card);
}
.dark .hero-tabs,
.dark .home-float,
.dark .home-hero,
.dark .hospital-actions a.ghost,
.dark .hospital-card,
.dark .hospital-contact-panel,
.dark .hospital-empty,
.dark .hospital-hero,
.dark .hospital-list-card,
.dark .hospital-page,
.dark .hospital-service-card,
.dark .hospital-side-card,
.dark .hospital-stats div,
.dark .legacy-category-card {
  background-color: var(--card);
}
.dark .legacy-category-hero,
.dark .legacy-category-hero-mark,
.dark .legacy-category-page,
.dark .list-body,
.dark .list-card,
.dark .list-empty,
.dark .list-hero,
.dark .merchant-actions a.secondary,
.dark .merchant-activity-card,
.dark .merchant-capability-band,
.dark .merchant-capability-grid a,
.dark .merchant-contact-actions a.plain,
.dark .merchant-contact-strip,
.dark .merchant-dossier-item {
  background-color: var(--card);
}
.dark .merchant-eyebrow strong,
.dark .merchant-gallery,
.dark .merchant-hero,
.dark .merchant-intro,
.dark .merchant-logo-card,
.dark .merchant-logo-card-img,
.dark .merchant-media-dot,
.dark .merchant-proof div,
.dark .merchant-section,
.dark .merchant-service-card,
.dark .merchant-step-tab.active,
.dark .mini-search input,
.dark .organizer-card,
.dark .organizer-popover {
  background-color: var(--card);
}
.dark .organizer-popover::after,
.dark .organizer-profile,
.dark .payment-action,
.dark .payment-dialog,
.dark .promo-qr,
.dark .promo-qr div,
.dark .qr-card,
.dark .refund-dialog .refund-cancel,
.dark .region-choice,
.dark .region-detail,
.dark .region-nationwide,
.dark .region-province,
.dark .region-provinces,
.dark .section-row a {
  background-color: var(--card);
}
.dark .service-card,
.dark .signup-auth-state,
.dark .signup-card,
.dark .signup-extra textarea,
.dark .signup-fields input,
.dark .signup-stepper input,
.dark .signup-steps b,
.dark .site-header,
.dark .site-header .header-account-menu nav,
.dark .ticket-option,
.dark .toolbar input,
.dark .toolbar select,
.dark .trust-item,
.dark .yw-select .yw-select-trigger {
  background-color: var(--card);
}
.dark .yw-select .yw-select-trigger:hover:not(:disabled),
.dark .yw-select-options,
.dark body select option,
.dark body select:not([multiple]):not([size]),
.dark body select[size="1"]:not([multiple]),
.dark body.human-verification,
.dark body.human-verification .captcha-modal-backdrop,
.dark body[data-original-page="home"],
.dark body[data-route="/category"],
.dark body[data-route="/register"] #auth-form.register-form,
.dark body[data-route^="/deal/"],
.dark body[data-route^="/event/"],
.dark dialog.account-dialog,
.dark dialog.credential-dialog {
  background-color: var(--card);
}

/* 近白背景 → 下沉层（比卡片更深） —— 共 68 个选择器 */
.dark #auth-form.register-form .register-error-summary,
.dark #auth-form.register-form input[aria-invalid="true"],
.dark #native-payment-qr,
.dark #native-payment-qr[data-state=closed],
.dark #native-payment-qr[data-state=error],
.dark #native-payment-qr[data-state=expired],
.dark #payment-modal .payment-close,
.dark .account-dialog .dialog-actions .secondary:hover:not(:disabled),
.dark .account-dialog .form-status:not(:empty),
.dark .account-dialog-close,
.dark .account-invitations input,
.dark .article-content th,
.dark .auth-tabs,
.dark .card-org-logo {
  background-color: var(--surface-sunken);
}
.dark .category-card.activity .category-icon,
.dark .credential-badge[data-inactive],
.dark .credential-close,
.dark .credential-manual,
.dark .credential-text,
.dark .detail-badge.warm,
.dark .detail-copy blockquote,
.dark .detail-copy code,
.dark .detail-copy pre,
.dark .detail-cover,
.dark .dialog-summary,
.dark .doctor-chip,
.dark .header-account-menu nav a:hover,
.dark .header-account-menu nav button:hover {
  background-color: var(--surface-sunken);
}
.dark .hospital-doctor-empty,
.dark .hospital-empty-activity,
.dark .hospital-flow div,
.dark .hospital-info-grid div,
.dark .hospital-placeholder-grid div,
.dark .hospital-shell .merchant-empty,
.dark .legacy-category-card.activity .legacy-category-icon,
.dark .list-cover,
.dark .list-org-logo,
.dark .list-page,
.dark .list-tag.warm,
.dark .merchant-flow div,
.dark .merchant-gallery-item,
.dark .merchant-media {
  background-color: var(--surface-sunken);
}
.dark .merchant-service-org-logo,
.dark .merchant-tags span,
.dark .org-logo,
.dark .org-stats span,
.dark .organizer-business span,
.dark .payment-action:hover,
.dark .payment-close,
.dark .refund-dialog .form-status:not(:empty),
.dark .refund-dialog .refund-summary,
.dark .refund-summary,
.dark .region-city,
.dark .signup-error,
.dark .signup-notice,
.dark .signup-page [aria-invalid=true] {
  background-color: var(--surface-sunken);
}
.dark .signup-stepper button,
.dark .signup-ticket:has(input:disabled),
.dark .site-header .top-search input,
.dark .stats div,
.dark .ticket-option.soldout,
.dark .value-grid>div,
.dark .yw-select .yw-select-trigger:disabled,
.dark :root,
.dark body select:disabled:not([multiple]):not([size]),
.dark body select[size="1"]:disabled,
.dark dialog.account-dialog .account-dialog-close,
.dark dialog.credential-dialog .credential-close {
  background-color: var(--surface-sunken);
}

/* 浅灰背景 → 静音层 —— 共 14 个选择器 */
.dark #native-payment-qr[data-state=closed] .payment-state-icon,
.dark #native-payment-qr[data-state=expired] .payment-state-icon,
.dark .action-card .detail-btn.disabled,
.dark .detail-badge.closed,
.dark .detail-topbar .detail-btn.disabled,
.dark .hospital-activity-badges span.amber,
.dark .hospital-activity-badges span.blue,
.dark .hospital-activity-cover,
.dark .hospital-badges span.amber,
.dark .hospital-badges span.blue,
.dark .merchant-activity-cover,
.dark .payment-close:hover,
.dark .payment-state-icon,
.dark .signup-stepper button:disabled {
  background-color: var(--muted);
}

/* 浅绿背景 → 品牌浅色层 —— 共 54 个选择器 */
.dark #auth-form.register-form .register-security-hint,
.dark #auth-form.register-form button[type="submit"]:disabled,
.dark #main-content aside nav a[aria-current=page],
.dark #payment-modal .payment-close:hover,
.dark .account-avatar,
.dark .account-dialog .form-status[data-success=true],
.dark .account-dialog-close:hover,
.dark .account-nav a.active,
.dark .account-row.unread,
.dark .card-status,
.dark .category-icon,
.dark .category-pill span:first-child,
.dark .category-pill:hover,
.dark .credential-badge {
  background-color: var(--primary-soft);
}
.dark .credential-close:hover,
.dark .detail-explore,
.dark .doctor-avatar,
.dark .doctor-card>.doctor-avatar,
.dark .doctor-card>img,
.dark .event-cover,
.dark .fallback-cover,
.dark .fallback-list-cover,
.dark .follow-btn,
.dark .ghost-btn:hover,
.dark .ghost-btn:hover:not(:disabled),
.dark .hero-action:hover,
.dark .hero-tabs a.active,
.dark .home-promo {
  background-color: var(--primary-soft);
}
.dark .hospital i,
.dark .hospital-activity-badges span.green,
.dark .hospital-activity-card,
.dark .hospital-badges span.green,
.dark .hospital-service-cover,
.dark .merchant-capability-grid,
.dark .merchant-empty,
.dark .merchant-eyebrow span,
.dark .merchant-info-grid div,
.dark .merchant-placeholder-grid div,
.dark .merchant-rich-text blockquote,
.dark .merchant-service-cover,
.dark .order-first-tip,
.dark .organizer-profile-avatar {
  background-color: var(--primary-soft);
}
.dark .refund-dialog .form-status[data-success=true],
.dark .region-province[aria-pressed=true],
.dark .service-cover,
.dark .tags span,
.dark .top-search button,
.dark .yw-select-option.is-active,
.dark .yw-select-option:hover,
.dark .yw-select-option[aria-selected=true],
.dark body select option:focus,
.dark body select option:hover,
.dark dialog.account-dialog .account-dialog-close:hover,
.dark dialog.credential-dialog .credential-close:hover {
  background-color: var(--primary-soft);
}

/* 浅色渐变 → 撤销渐变 —— 共 20 个选择器 */
.dark .category-hero,
.dark .detail-cover,
.dark .fake-qr div,
.dark .fallback-cover,
.dark .fallback-list-cover,
.dark .home-hero,
.dark .home-promo,
.dark .hospital-activity-card,
.dark .hospital-activity-cover,
.dark .hospital-hero,
.dark .hospital-page,
.dark .hospital-service-cover,
.dark .legacy-category-hero,
.dark .list-hero {
  background-image: none;
}
.dark .merchant-contact-strip,
.dark .merchant-hero,
.dark .org-logo,
.dark .promo-qr div,
.dark .qr-card,
.dark .refund-dialog .refund-summary {
  background-image: none;
}

/* 原深色文字 → 主前景 —— 共 104 个选择器 */
.dark #auth-form.register-form .register-field input,
.dark #main-content input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]),
.dark #main-content textarea,
.dark #payment-modal,
.dark .account-dialog,
.dark .account-dialog .dialog-actions .secondary:hover:not(:disabled),
.dark .account-dialog .form input,
.dark .account-dialog .form select,
.dark .account-dialog .form textarea,
.dark .account-invitations input,
.dark .article-content h2,
.dark .article-content h3,
.dark .article-content th,
.dark .category-card h3 {
  color: var(--card-foreground);
}
.dark .category-hero h1,
.dark .credential-meta dd,
.dark .credential-short-code,
.dark .credential-text,
.dark .detail-block h2,
.dark .detail-copy,
.dark .detail-copy code,
.dark .detail-copy h1,
.dark .detail-copy h2,
.dark .detail-copy h3,
.dark .detail-copy h4,
.dark .detail-copy h5,
.dark .detail-copy h6,
.dark .detail-copy pre {
  color: var(--card-foreground);
}
.dark .detail-meta-item > span:last-child,
.dark .detail-reco-head h2,
.dark .detail-titlebar h1,
.dark .doctor-card strong,
.dark .doctor-chip,
.dark .event-card .event-title,
.dark .event-title,
.dark .filter-options,
.dark .filter-options a,
.dark .filter-options a.nearby-filter-button,
.dark .filter-options label,
.dark .hero-tabs a.active,
.dark .hospital-activity-body strong,
.dark .hospital-card-head h2 {
  color: var(--card-foreground);
}
.dark .hospital-contact-panel > strong,
.dark .hospital-contact-panel p,
.dark .hospital-doctor-empty strong,
.dark .hospital-flow strong,
.dark .hospital-info-grid strong,
.dark .hospital-list-card strong,
.dark .hospital-list-head h1,
.dark .hospital-main h1,
.dark .hospital-placeholder-grid strong,
.dark .hospital-service-body strong,
.dark .hospital-side-card h3,
.dark .hospital-side-item strong,
.dark .hospital-stats strong,
.dark .legacy-category-card h3 {
  color: var(--card-foreground);
}
.dark .legacy-category-hero h1,
.dark .list-body h3,
.dark .list-foot .list-org-copy strong,
.dark .merchant-activity-body strong,
.dark .merchant-contact-strip,
.dark .merchant-dossier-item strong,
.dark .merchant-empty strong,
.dark .merchant-eyebrow strong,
.dark .merchant-flow strong,
.dark .merchant-hero-body,
.dark .merchant-info-grid strong,
.dark .merchant-intro-grid > p,
.dark .merchant-logo-card strong,
.dark .merchant-placeholder-grid strong {
  color: var(--card-foreground);
}
.dark .merchant-proof strong,
.dark .merchant-rich-field,
.dark .merchant-rich-text,
.dark .merchant-rich-text h2,
.dark .merchant-rich-text h3,
.dark .merchant-rich-text h4,
.dark .merchant-section-title h2,
.dark .merchant-service-body > strong,
.dark .merchant-title-row h1,
.dark .org-name,
.dark .org-stats strong,
.dark .organizer-copy strong,
.dark .organizer-popover-name,
.dark .payment-action {
  color: var(--card-foreground);
}
.dark .payment-close:hover,
.dark .qr-card strong,
.dark .reco-card h3,
.dark .refund-dialog .refund-product,
.dark .region-choice,
.dark .region-nationwide,
.dark .region-province,
.dark .section-row h2,
.dark .service-title,
.dark .ticket-option-main strong,
.dark .trust-item strong,
.dark .yw-select .yw-select-trigger,
.dark .yw-select-options,
.dark :root {
  color: var(--card-foreground);
}
.dark body.human-verification,
.dark body[data-route="/order-confirm"] .hero,
.dark body[data-route="/order-success"] .hero,
.dark body[data-route="/payment"] .hero,
.dark body[data-route="/register"] #auth-form.register-form,
.dark body[data-route="/signup"] .hero {
  color: var(--card-foreground);
}

/* 原中灰文字 → 次级文字 —— 共 115 个选择器 */
.dark #auth-form.register-form button[type="submit"]:disabled,
.dark #main-content input::placeholder,
.dark #main-content textarea::placeholder,
.dark #native-payment-status,
.dark #payment-modal .payment-action:not(.payment-action-primary),
.dark #payment-modal .payment-close,
.dark .account-dialog .dialog-actions .secondary,
.dark .account-dialog .form input::placeholder,
.dark .account-dialog .form textarea::placeholder,
.dark .account-dialog .refund-intro,
.dark .account-dialog-close,
.dark .account-heading small,
.dark .account-invitations p,
.dark .account-row small {
  color: var(--muted-foreground);
}
.dark .action-card .detail-btn.disabled,
.dark .article-content p,
.dark .article-content ul,
.dark .card .cover:not(:has(img)),
.dark .card-org-copy strong,
.dark .card-org-proof,
.dark .category-grid small,
.dark .category-pill,
.dark .clinic-appointment p,
.dark .clinic-doctor-info p,
.dark .credential-close,
.dark .credential-eyebrow,
.dark .credential-intro,
.dark .credential-manual-label {
  color: var(--muted-foreground);
}
.dark .credential-meta dt,
.dark .credential-note,
.dark .credential-raw,
.dark .credential-unavailable,
.dark .detail-audience,
.dark .detail-badge.closed,
.dark .detail-breadcrumb,
.dark .detail-copy blockquote,
.dark .detail-cover:not(img),
.dark .detail-facts b,
.dark .detail-help p,
.dark .detail-meta-icon,
.dark .detail-meta-label,
.dark .detail-meta-list {
  color: var(--muted-foreground);
}
.dark .detail-topbar .detail-btn.disabled,
.dark .detail-topbar-links,
.dark .event-card .card-org-copy strong,
.dark .event-card .card-org-proof,
.dark .event-card .event-meta,
.dark .event-card .event-price,
.dark .event-favorite,
.dark .event-meta,
.dark .ghost-btn,
.dark .header-auth,
.dark .header-menu-name,
.dark .home-float-btn,
.dark .hospital-assurance li,
.dark .hospital-main p {
  color: var(--muted-foreground);
}
.dark .hospital-overview,
.dark .hospital-shell .merchant-empty,
.dark .list-empty,
.dark .list-foot,
.dark .list-meta,
.dark .list-org-copy > strong,
.dark .list-org-proof,
.dark .listing-pagination span,
.dark .merchant-lede,
.dark .merchant-rich-text blockquote,
.dark .merchant-service-meta,
.dark .merchant-service-org-copy strong,
.dark .merchant-tags span,
.dark .order-card > p {
  color: var(--muted-foreground);
}
.dark .org-note,
.dark .org-stats small,
.dark .organizer-address,
.dark .organizer-intro p,
.dark .organizer-intro p + p,
.dark .organizer-meta,
.dark .organizer-muted,
.dark .organizer-profile-address,
.dark .organizer-profile-stats span,
.dark .organizer-stats > div,
.dark .organizer-stats span,
.dark .organizer-unavailable,
.dark .payment-amount-row,
.dark .payment-close {
  color: var(--muted-foreground);
}
.dark .payment-eyebrow,
.dark .payment-security,
.dark .payment-state-icon,
.dark .poster-caption,
.dark .promo-panel span,
.dark .refund-caption,
.dark .refund-dialog .refund-cancel,
.dark .region-count,
.dark .region-empty,
.dark .region-eyebrow,
.dark .region-muted,
.dark .region-nationwide:after,
.dark .section-row .section-more,
.dark .service-meta {
  color: var(--muted-foreground);
}
.dark .side-card-kicker,
.dark .sidebar-profile>a,
.dark .signup-auth-state,
.dark .signup-stepper button:disabled,
.dark .site-header .top-search button,
.dark .site-header > nav,
.dark .ticket-option-main small,
.dark .yw-select .yw-select-trigger:disabled,
.dark body select option:disabled,
.dark body select:disabled:not([multiple]):not([size]),
.dark body select[size="1"]:disabled,
.dark body[data-route="/order-confirm"] .hero p,
.dark body[data-route="/order-success"] .hero p,
.dark body[data-route="/payment"] .hero p {
  color: var(--muted-foreground);
}
.dark body[data-route="/signup"] .hero p,
.dark dialog.account-dialog .account-dialog-close,
.dark dialog.credential-dialog .credential-close {
  color: var(--muted-foreground);
}

/* ============================================================================
 * 10. Public shell refinement
 * Keep navigation, page chrome and high-traffic marketing surfaces quiet and
 * consistent. These rules intentionally sit last because the retained templates
 * still contain Tailwind utility colors and a few body-level style blocks.
 *
 * 页头（body > header …）的规则已整体收拢到末尾的「页头工具栏」一节，
 * 这里不再重复，避免两处改一处漏一处。
 * ========================================================================== */

#mobileMenuPanel {
  border-color: var(--border);
  background: var(--card);
}

#mobileMenuPanel nav a,
#mobileMenuPanel button,
#mobileMenuPanel a[href="/cart"] {
  border-color: var(--border);
  background: var(--card);
  color: var(--foreground);
}

#mobileMenuPanel nav a[aria-current="page"] {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

#regionModal > div[role],
#regionModal > .relative {
  border-color: var(--border);
  background: var(--popover);
  color: var(--popover-foreground);
}

body > footer {
  border-top: 1px solid var(--surface-strong-border);
  background: var(--surface-strong);
  color: var(--surface-strong-muted);
}

body > footer > .max-w-6xl {
  max-width: var(--yw-container);
}

body > footer h3,
body > footer h4,
body > footer a[href="/"] {
  color: var(--surface-strong-foreground);
}

body > footer a:not([href="/"]):hover {
  color: color-mix(in srgb, var(--primary) 78%, white);
}

body > footer .mb-10 > div > div:first-child {
  color: color-mix(in srgb, var(--primary) 70%, white);
}

body > footer .mb-10 > a {
  background: var(--primary);
  color: var(--primary-foreground);
}

body > footer .mb-10 > a:hover {
  background: var(--primary-hover);
  color: var(--primary-foreground);
}

/* The list-page hero used translucent mint copy over cyan/green gradients.
 * Give all informative copy a stable high-contrast color. */
.list-hero-card .hero-kicker,
.list-hero-card .list-hero-title,
.list-hero-card .list-hero-summary,
.list-hero-card .list-hero-panel strong,
.list-hero-card .list-hero-panel > span,
.list-hero-card .hero-panel-grid b,
.list-hero-card .hero-panel-grid em {
  color: #fff;
}

.list-hero-card {
  min-height: 300px;
  padding: var(--yw-space-10);
  border-radius: var(--yw-radius-xl);
}

.list-hero-card .list-hero-title {
  font-size: clamp(36px, 4.4vw, 50px);
  font-weight: var(--yw-fw-bold);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.list-hero-card .list-hero-summary {
  max-width: 620px;
  font-size: var(--yw-text-md);
  line-height: var(--yw-lh-relaxed);
}

.list-hero-card .list-hero-actions a:first-child {
  background: #fff;
  color: #075c45;
}

.list-hero-card .list-hero-actions a:first-child:hover {
  background: #e7fff5;
}

.list-hero-card .hero-kicker {
  border-color: rgb(255 255 255 / .34);
  background: rgb(0 0 0 / .16);
}

.list-hero-card .list-hero-panel {
  background: rgb(0 0 0 / .16);
}

.detail-fallback-service {
  color: var(--primary-text);
}

.detail-app-title {
  color: var(--surface-strong-foreground);
}

@media (max-width: 767px) {
  body > header > div > div {
    gap: var(--yw-space-2);
  }

  body > header a[href="/"] {
    font-size: 24px;
  }

  #mobileMenuPanel nav {
    grid-template-columns: 1fr 1fr;
  }

  body > footer > div {
    padding-top: var(--yw-space-10);
    padding-bottom: var(--yw-space-8);
  }

  .list-hero-card {
    min-height: 0;
    padding: var(--yw-space-6);
  }

  .list-hero-card .list-hero-title {
    font-size: 34px;
  }
}

/* Home hero remains an intentionally dark brand surface in both themes. */
.dark body[data-original-page="home"] .hero-action,
.dark body[data-original-page="home"] .hero-action:hover {
  background: #fff;
  color: #075c45;
}

.dark body[data-original-page="home"] .hero-kicker {
  background: rgb(255 255 255 / .1);
  color: #eafff6;
}

.dark body[data-original-page="home"] .hero-slide[data-has-image="false"]::before {
  background: rgb(255 255 255 / .04);
}

.dark body[data-original-page="home"] .hero-controls button:hover {
  background: rgb(255 255 255 / .14);
}

.dark body[data-original-page="home"] .hero-controls .hero-indicator::after {
  background: rgb(255 255 255 / .52);
}

.dark body[data-original-page="home"] .hero-controls .hero-indicator.active::after {
  background: #7df0c4;
}

/* ============================================================================
 * 11. 主办方：/organizer 目录与主页
 * ----------------------------------------------------------------------------
 * 这两页由 maud 渲染（render_organizer_directory / render_organizer），不再
 * 依赖 original-bridge.css 里的历史写法。所有规则都以
 * `body[data-route="/organizer"]` 收口，原因有两个：
 *   1. 首页弹层里也有一个 a.organizer-profile（"查看主页"按钮），不收口两边
 *      会互相污染；本文件注入在文档最后，不收口就会压掉首页的样式。
 *   2. 目录页与主页共用同一个 route 值，收口后不会漏到其他页面。
 * 颜色与尺度全部消费 tokens.css，亮/暗色自动生效，无需再写 .dark 覆盖。
 * ========================================================================== */

body[data-route="/organizer"] .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--yw-space-2);
  margin-bottom: var(--yw-space-4);
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

body[data-route="/organizer"] .breadcrumb a {
  color: var(--muted-foreground);
}

body[data-route="/organizer"] .breadcrumb a:hover {
  color: var(--primary-text);
}

body[data-route="/organizer"] .breadcrumb span[aria-current="page"] {
  color: var(--foreground);
  font-weight: var(--yw-fw-medium);
}

/* --- 目录页 --- */

body[data-route="/organizer"] .organizer-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--yw-space-4);
}

body[data-route="/organizer"] .organizer-directory-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--yw-space-4);
  padding: var(--yw-space-5);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  background: var(--card);
  box-shadow: var(--yw-shadow-xs);
  transition: border-color var(--yw-dur-fast) var(--yw-ease),
    box-shadow var(--yw-dur-fast) var(--yw-ease);
}

body[data-route="/organizer"] .organizer-directory-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--yw-shadow-md);
}

body[data-route="/organizer"] .organizer-directory-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--yw-radius-md);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--yw-text-xl);
  font-weight: var(--yw-fw-bold);
}

body[data-route="/organizer"] .organizer-directory-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-route="/organizer"] .organizer-directory-body {
  display: grid;
  gap: var(--yw-space-2);
  min-width: 0;
}

body[data-route="/organizer"] .organizer-directory-title {
  display: flex;
  align-items: center;
  gap: var(--yw-space-2);
  flex-wrap: wrap;
}

body[data-route="/organizer"] .organizer-directory-title h2 {
  margin: 0;
  font-size: var(--yw-text-lg);
  line-height: var(--yw-lh-snug);
  overflow-wrap: anywhere;
}

body[data-route="/organizer"] .organizer-directory-title a {
  color: var(--foreground);
}

body[data-route="/organizer"] .organizer-directory-title a:hover {
  color: var(--primary-text);
}

body[data-route="/organizer"] .organizer-directory-desc {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
  line-height: var(--yw-lh-normal);
  overflow-wrap: anywhere;
}

body[data-route="/organizer"] .organizer-directory-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--yw-space-2) var(--yw-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-foreground);
  font-size: var(--yw-text-2xs);
}

body[data-route="/organizer"] .organizer-directory-facts li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--yw-space-1);
}

body[data-route="/organizer"] .organizer-directory-facts strong {
  color: var(--primary-text);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-semibold);
}

body[data-route="/organizer"] .organizer-directory-place {
  flex-basis: 100%;
  color: var(--text-tertiary);
}

body[data-route="/organizer"] .organizer-directory-place span {
  overflow-wrap: anywhere;
}

body[data-route="/organizer"] .organizer-directory-link {
  grid-column: 2;
  justify-self: start;
}

body[data-route="/organizer"] .organizer-directory-note {
  margin: var(--yw-space-4) 0 0;
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

body[data-route="/organizer"] .section-head > span {
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

/* --- 主页：机构名片 --- */

body[data-route="/organizer"] .organizer-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yw-space-5);
  padding: var(--yw-space-6);
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-lg);
  background: var(--card);
  box-shadow: var(--yw-shadow-xs);
}

body[data-route="/organizer"] .organizer-profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--yw-radius-lg);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--yw-text-4xl);
  font-weight: var(--yw-fw-bold);
}

body[data-route="/organizer"] .organizer-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-route="/organizer"] .organizer-profile-main {
  display: grid;
  gap: var(--yw-space-2);
  flex: 1 1 260px;
  min-width: 0;
}

body[data-route="/organizer"] .organizer-profile-title {
  display: flex;
  align-items: center;
  gap: var(--yw-space-3);
  flex-wrap: wrap;
}

body[data-route="/organizer"] .organizer-profile-title h1 {
  margin: 0;
  font-size: var(--yw-text-3xl);
  line-height: var(--yw-lh-tight);
  overflow-wrap: anywhere;
}

body[data-route="/organizer"] .organizer-profile-address {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

body[data-route="/organizer"] .organizer-profile-side {
  display: grid;
  gap: var(--yw-space-3);
  justify-items: end;
  flex: 0 0 auto;
}

body[data-route="/organizer"] .organizer-profile-stats {
  display: flex;
  gap: var(--yw-space-6);
  text-align: center;
}

body[data-route="/organizer"] .organizer-profile-stats div {
  display: grid;
  gap: 2px;
  min-width: 56px;
}

body[data-route="/organizer"] .organizer-profile-stats strong {
  color: var(--primary-text);
  font-size: var(--yw-text-2xl);
  line-height: var(--yw-lh-tight);
}

body[data-route="/organizer"] .organizer-profile-stats span {
  color: var(--muted-foreground);
  font-size: var(--yw-text-2xs);
}

/* --- 主页：分节 --- */

body[data-route="/organizer"] .organizer-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yw-space-4);
  margin: var(--yw-space-10) 0 var(--yw-space-4);
}

body[data-route="/organizer"] .organizer-section h2 {
  margin: 0;
  font-size: var(--yw-text-2xl);
}

body[data-route="/organizer"] .organizer-intro {
  display: grid;
  gap: var(--yw-space-2);
}

body[data-route="/organizer"] .organizer-intro p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: var(--yw-lh-relaxed);
  overflow-wrap: anywhere;
}

/* 第一段是机构简介正文，其余是地址/时间/联系方式等附属信息。 */
body[data-route="/organizer"] .organizer-intro p:first-child {
  color: var(--foreground);
  font-size: var(--yw-text-md);
}

body[data-route="/organizer"] .organizer-intro a {
  color: var(--primary-text);
}

body[data-route="/organizer"] .organizer-intro a:hover {
  text-decoration: underline;
}

body[data-route="/organizer"] .organizer-business {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yw-space-2);
}

body[data-route="/organizer"] .organizer-business span {
  display: inline-flex;
  align-items: center;
  gap: var(--yw-space-2);
  padding: var(--yw-space-2) var(--yw-space-4);
  border-radius: var(--yw-radius-full);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
}

body[data-route="/organizer"] .organizer-business b {
  color: var(--primary-text);
  font-weight: var(--yw-fw-bold);
}

body[data-route="/organizer"] .organizer-muted {
  margin: var(--yw-space-3) 0 0;
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
  line-height: var(--yw-lh-normal);
}

body[data-route="/organizer"] .organizer-more {
  display: flex;
  justify-content: center;
  margin-top: var(--yw-space-6);
}

/* --- 主页：活动卡片 ---
 * 卡片本体复用全局 .list-card / .list-grid（与活动列表页一致），这里只补
 * 状态角标与网格密度。角标的五种色调全部消费 tokens.css，亮/暗色自动生效。 */

body[data-route="/organizer"] .organizer-activity-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

body[data-route="/organizer"] .list-cover-badge {
  position: absolute;
  top: var(--yw-space-3);
  left: var(--yw-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--yw-space-3);
  border-radius: var(--yw-radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--yw-text-2xs);
  font-weight: var(--yw-fw-bold);
  line-height: 1;
}

body[data-route="/organizer"] .list-cover-badge.tone-open,
body[data-route="/organizer"] .list-cover-badge.tone-soon {
  background: var(--success-bg);
  color: var(--success);
}

body[data-route="/organizer"] .list-cover-badge.tone-live {
  background: var(--warning-bg);
  color: var(--warning);
}

/* 已结束 / 名额已满回到中性色，不跟可参加的活动抢视线。 */
body[data-route="/organizer"] .list-cover-badge.tone-full,
body[data-route="/organizer"] .list-cover-badge.tone-ended {
  background: var(--muted);
  color: var(--muted-foreground);
}

body[data-route="/organizer"] .list-card:has(.list-cover-badge.tone-ended) {
  opacity: 0.86;
}

/* 分节右侧的口径说明，例如「共 3 场未结束」。 */
body[data-route="/organizer"] .organizer-section-note {
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
}

@media (max-width: 720px) {
  body[data-route="/organizer"] .organizer-directory {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="/organizer"] .organizer-profile {
    padding: var(--yw-space-5);
  }

  body[data-route="/organizer"] .organizer-profile-side {
    justify-items: start;
    width: 100%;
  }

  body[data-route="/organizer"] .organizer-profile-stats {
    text-align: left;
  }

  body[data-route="/organizer"] .organizer-more .btn {
    width: 100%;
  }
}

/* ============================================================================
 * 12. 页头工具栏
 * ----------------------------------------------------------------------------
 * 页头只要解一件事：让"这是哪个站、能去哪、能做什么"在一眼之内成立。
 *
 * 改造前右侧是六个等距平铺的要素（发布活动 / 购物车 / 消息 / 账户 /
 * 调色板 / 月亮），其中"调色板"和"月亮"两个按钮同时带描边和底色，
 * 是整排里唯一的两个方块——看起来像被顺手粘上去的补丁；同时内层那行
 * 被 user-ui.css 压到 52px，而页头自己是 64px，整行内容偏上 6px；
 * 搜索框被压回 32px，跟同排的 36px 控件对不齐。
 *
 * 现在三条规则：
 *   1. 整条只有「发布活动」一处实心色块，其余全部是安静图标按钮：
 *      无描边、无底色，只有悬停 / 聚焦 / 展开时才浮出一层浅底；
 *   2. 所有可点区域同高（--yw-control-md，跟密度设置联动），购物车、
 *      消息、调色板、月亮因此读起来是同一套工具，而不是四种样式；
 *   3. 组内 4–8px、组间 8px，账户簇与外观簇分得开。
 *
 * 颜色一律走语义令牌：十套主题色 × 亮暗自动成立，不再需要 .dark 覆盖，
 * 也不会再出现"切了主题色但发布活动还是原绿"的情况。
 *
 * 注意两个作用域陷阱，下面的选择器都绕开了：
 *   1. `#mobileMenuPanel` 是 <header> 的第二个直接子元素（不在 .max-w-6xl
 *      里），里面另有一套导航与搜索。因此工具栏的规则一律以
 *      `body > header.fixed > .max-w-6xl` 打头，避免把移动面板也染上；
 *   2. 页头里共有 3 个 `a[href="/merchant/apply"]`（工具栏的发布活动、
 *      用户下拉里的"商户申请"、移动面板里的"发布活动"）。所以 CTA 用
 *      完整的子级选择器锁定工具栏那一处，而不是只按 href 匹配。
 *
 * 另外刻意**不写 display**。模板上有三个元素带响应式显示类（发布活动
 * `hidden md:inline-flex`、注册 `hidden sm:inline`、汉堡 `md:hidden`），
 * 而未分层的声明永远压过 Tailwind 所在的 @layer——一旦写上 display，
 * 汉堡和"发布活动"就会在桌面/移动端同时出现。
 * ========================================================================== */

/* --- 外壳 --- */
body > header {
  border-color: var(--border);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  color: var(--foreground);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent);
}

body > header.fixed {
  height: var(--yw-header-height);
}

body > header > .max-w-6xl {
  max-width: var(--yw-container);
}

/* 固定页头下方的占位块必须与页头等高。两者此前是 52px / 64px，
   首屏内容的上边缘因此整体被页头压住 12px——首页 hero 直接顶在
   页头下沿。改读同一个 --yw-header-height，之后不会再各自漂移。 */
body > .h-14 {
  height: var(--yw-header-height);
}

/* --- 品牌 --- */
body > header.fixed > .max-w-6xl a[href="/"] {
  color: var(--primary-text);
  letter-spacing: -.02em;
}

/* --- 主导航：安静的文字按钮，悬停/当前页才浮出浅底 ---
   原来的"当前页下划线"靠 bottom: -18px 手工对齐；换到满行高之后它会掉到
   页头外面，改用浅底药丸表达当前页，与悬停态共用同一套语言。 */
body > header.fixed > .max-w-6xl nav {
  gap: var(--yw-space-2) !important;
  align-items: center;
  min-width: 0;
}

/* 区域按钮是导航里唯一长度不定的元素（真实取值形如"河北省保定市定兴县"，
   "内蒙古自治区锡林郭勒盟"还要更长）。让它在空间不足时先收缩、以省略号
   收尾，而不是把整条导航撑宽、把右侧动作区推出视口。 */
body > header.fixed > .max-w-6xl nav button {
  flex: 0 1 auto;
  min-width: 0;
}

body > header.fixed > .max-w-6xl nav button > svg {
  flex: none;
}

body > header.fixed > .max-w-6xl nav button #currentRegion {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body > header.fixed > .max-w-6xl nav a,
body > header.fixed > .max-w-6xl nav button {
  display: inline-flex;
  align-items: center;
  height: var(--yw-control-md);
  padding-inline: var(--yw-space-3);
  border-radius: var(--yw-radius-md);
  color: var(--muted-foreground);
  font-size: var(--yw-text-sm);
  font-weight: var(--yw-fw-medium);
  white-space: nowrap;
  transition: background-color var(--yw-dur-fast) var(--yw-ease),
    color var(--yw-dur-fast) var(--yw-ease);
}

/* 三个文字导航项保持原形，收缩只发生在区域按钮上 */
body > header.fixed > .max-w-6xl nav a {
  flex: none;
}

body > header.fixed > .max-w-6xl nav a:hover,
body > header.fixed > .max-w-6xl nav button:hover {
  background: var(--muted);
  color: var(--primary-text);
}

body > header.fixed > .max-w-6xl nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: var(--yw-fw-semibold);
}

/* --- 搜索：静息是一枚浅底胶囊，悬停出描边，聚焦描主色 ---
   全站输入归一（user-ui.css）先给了它描边 + --input 底色，这里以更高
   特异性把它改回胶囊。那几处 !important 是与归一规则对齐后的取值，不是
   为了压别的页头规则。 */
body > header.fixed > .max-w-6xl form[data-activity-search-form] input[type="text"] {
  height: var(--yw-control-md) !important;
  padding-inline: var(--yw-space-10) var(--yw-space-3);
  border-color: transparent !important;
  border-radius: var(--yw-radius-full) !important;
  background: var(--muted) !important;
  color: var(--foreground);
  font-size: var(--yw-text-xs);
  box-shadow: none;
}

body > header.fixed > .max-w-6xl form[data-activity-search-form] input[type="text"]:hover {
  border-color: var(--border) !important;
}

body > header.fixed > .max-w-6xl form[data-activity-search-form] input[type="text"]:focus {
  border-color: var(--primary) !important;
  background: var(--card) !important;
}

body > header.fixed > .max-w-6xl input::placeholder {
  color: var(--text-tertiary);
}

/* --- 右侧动作区：整条只有一处实心 --- */
body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child {
  gap: var(--yw-space-2);
}

/* 「发布活动」：唯一的实心按钮。背景跟 --primary，因此切主题色会一起变；
   暗色下 --primary 提亮、--primary-foreground 翻成深色，白字不再失效。
   选择器必须锁定工具栏里那一处——页头内另有 2 个指向同一 href 的下拉项。 */
body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child > a[href="/merchant/apply"] {
  align-items: center;
  height: var(--yw-control-md);
  padding-inline: var(--yw-space-5);
  border-radius: var(--yw-radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-bold);
  white-space: nowrap;
  transition: background-color var(--yw-dur-fast) var(--yw-ease);
}

body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child > a[href="/merchant/apply"]:hover {
  background: var(--primary-hover);
  color: var(--primary-foreground);
}

/* 页头里的图标按钮同形：购物车、消息、调色板、月亮、汉堡。
   一律无描边无底色，只有状态才浮底，于是它们读起来是同一套工具，
   而不是"两个裸图标 + 两个方块"。 */
body > header #headerUserLoggedIn > a,
body > header #mobileMenuToggle,
body > header .yw-theme-toggle {
  align-items: center;
  justify-content: center;
  width: var(--yw-control-md);
  height: var(--yw-control-md);
  padding: 0;
  border: 0;
  border-radius: var(--yw-radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color var(--yw-dur-fast) var(--yw-ease),
    color var(--yw-dur-fast) var(--yw-ease);
}

body > header #headerUserLoggedIn > a:hover,
body > header #mobileMenuToggle:hover,
body > header .yw-theme-toggle:hover {
  background: var(--muted);
  color: var(--primary-text);
}

body > header #headerUserLoggedIn > a:focus-visible,
body > header #mobileMenuToggle:focus-visible,
body > header .yw-theme-toggle:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* 购物车与消息要能被撑成方块（它们默认是行内元素，没有响应式显示类） */
body > header #headerUserLoggedIn > a {
  display: inline-flex;
}

body > header .yw-theme-toggle {
  display: inline-flex;
}

body > header .yw-theme-toggle > svg {
  width: 17px;
  height: 17px;
}

/* 主题面板入口的调色板图标笔画多，17px 下发虚：放大一档；描边压到 1.8，
   与购物车/消息/月亮（20px、stroke 2）的光学粗细对齐。 */
body > header .ya-ts-trigger > svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

/* 面板展开时入口保持"已选中"，否则面板一关就看不出自己点的是哪儿 */
body > header .ya-ts-trigger[aria-expanded="true"] {
  border: 0;
  background: var(--primary-soft);
  color: var(--primary-text);
}

/* 「外观」是一簇独立的功能（面板 + 一键明暗），与前一组（发布活动 /
   购物车 / 消息 / 账户）再空开一点：holder 的 8px 之外再加 8px。
   这样右侧读起来是三簇——主操作、账户、外观，而不是一条等距的长带。 */
body > header .ya-ts-trigger {
  margin-left: var(--yw-space-2);
}

/* --- 账户：头像 + 昵称 + 折角做一颗幽灵药丸 --- */
/* Tailwind 的 space-x-4 用的是 margin 而不是 gap，只改 gap 无效 */
body > header #headerUserLoggedIn > * {
  margin-inline: 0;
}

body > header #headerUserLoggedIn {
  gap: var(--yw-space-1);
}

/* 账户簇与前面的图标簇之间再空开一点，读起来是两组 */
body > header #headerUserLoggedIn > div {
  margin-left: var(--yw-space-2);
}

body > header #headerUserLoggedIn > div > button {
  display: inline-flex;
  align-items: center;
  height: var(--yw-control-md);
  padding: 0 var(--yw-space-2) 0 var(--yw-space-1);
  border: 0;
  border-radius: var(--yw-radius-full);
  background: transparent;
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-medium);
  cursor: pointer;
  transition: background-color var(--yw-dur-fast) var(--yw-ease),
    color var(--yw-dur-fast) var(--yw-ease);
}

body > header #headerUserLoggedIn > div > button:hover,
body > header #headerUserLoggedIn > div:focus-within > button {
  background: var(--muted);
  color: var(--primary-text);
}

/* --- 未登录：两个纯文字入口，保持次一级权重，不跟「发布活动」抢 --- */
body > header #headerUserNotLogin {
  gap: var(--yw-space-2);
}

body > header #headerUserNotLogin a {
  color: var(--muted-foreground);
  font-size: var(--yw-text-xs);
  font-weight: var(--yw-fw-semibold);
  transition: color var(--yw-dur-fast) var(--yw-ease);
}

body > header #headerUserNotLogin a:hover {
  color: var(--primary-text);
}

/* --- 圆角偏好选「直角」时，页头这三处跟着收方，
       别让它成为全站唯一不听话的地方（--yw-radius-full 不随档位变）。 --- */
[data-radius="square"] body > header.fixed > .max-w-6xl form[data-activity-search-form] input[type="text"],
[data-radius="square"] body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child > a[href="/merchant/apply"],
[data-radius="square"] body > header #headerUserLoggedIn > div > button {
  border-radius: 0 !important;
}

/* --- 触控目标：窄屏把图标按钮抬到 --yw-control-lg（默认 44px） --- */
@media (max-width: 767px) {
  body > header #headerUserLoggedIn > a,
  body > header #mobileMenuToggle,
  body > header .yw-theme-toggle {
    width: var(--yw-control-lg);
    height: var(--yw-control-lg);
  }

  body > header #headerUserLoggedIn > div > button {
    height: var(--yw-control-lg);
  }

  body > header.fixed > .max-w-6xl > .flex.items-center.justify-between > div:last-child > a[href="/merchant/apply"] {
    height: var(--yw-control-lg);
  }
}

/* --- 未登录文字链的触控面积 ---
 * 「登录 / 注册」是纯文字链（text-xs，实测 26×17px），远低于 44px 的
 * 移动端最低触控标准。padding 撑大命中区、负 margin 原位抵消，
 * 桌面与移动端视觉位置都不变，只有可点面积变大。 */
body > header.fixed > .max-w-6xl a.text-xs[href="/login"],
body > header.fixed > .max-w-6xl a.text-xs[href="/register"] {
  padding: 8px 6px;
  margin: -8px -6px;
}

/* ============================================================================
 * 13. 原生控件主题色（radio / checkbox / progress / range）
 * ----------------------------------------------------------------------------
 * 这几类控件的选中色由浏览器绘制，既不受 border 也不受 background 影响，
 * 只能靠 `accent-color`。此前的做法是在各页面 CSS 里逐处指定，于是长出了
 * 六套互不相干的变量名：--green（flows / original-bridge）、--account-ink
 * （account-ui）、--dialog-primary（dialogs）、--register-accent（register）、
 * --signup-accent（signup）、--select-accent（select）。
 *
 * 碎片化的代价很直接：**没被写到的那些页面就退回浏览器默认蓝**。实测支付页
 * 「微信支付」的单选圆点是 rgb(0,117,255)——在一整片品牌绿里点出一个蓝色圆点，
 * 而且十套主题色都改不动它。
 *
 * accent-color 是可继承属性，所以在根节点声明一次即可覆盖所有原生控件。
 * 这里刻意只用元素选择器（最低特异性）：任何页面级规则都仍然优先，
 * 所以"页面特意指定过的"不会被夺走，这条只负责兜住没人管的那部分。
 * ========================================================================== */

html {
  accent-color: var(--primary);
}