/* ============================================================================
   odx.css —— 「户外版」主题 · 手机端专属（2026-09-23 od1）
   ----------------------------------------------------------------------------
   依据：《ui整改.md》设计规范 + 基准稿《宜宇_全站_户外版主题_设计稿.html》。
   主题 key：odx（outdoor 被 2026-09-20 的 /track /route /camp 模块样式
   outdoor.css / .od- 前缀占用，避免混淆另起 odx）。

   ── 用户指令（2026-09-23）────────────────────────────────────────────────
     · 小清新（fresh）删除，由本主题替换；山野手机版（wildm）一并下线选项
       （文件保留在服务器，未删除）。
     · 广场**不能动**：本文件不含任何全局 .yq-post / .yq-water 规则，
       图文卡片重绘只命中活动卡（:has(.yq-ev__st) —— 该类只存在于 EventCard）。
     · 活动页结构/功能不动，只改图文样式（ui整改.md 第 5 节）。
     · 原主题文件（app.css / app2026.css / fresh.css / wild.css / wildm.css）零改动。

   ── 红线自查（ui整改.md 第 3 节）──────────────────────────────────────────
     1. 无 emoji，图标全部线性 SVG（本文件不含 content 字符图标）
     2. 无渐变：--grad-* 一律拉成同色两端实色；唯一保留 .f-hero .veil
        遮罩渐变（工单 A5 豁免：功能性可读性遮罩，非装饰）
     3. 无假状态栏
     4. 对比度 AA：主绿白字 4.88、橙字白底 4.75、三级字 4.58（规范第 2 节实测值）
     5. 只改 token 值不改 token 名；新增令牌用规范原名（--g600 等）
     6. 触控：整卡是链接（≥44px）；卡内「详情」药丸 30px + 整卡兜底
     7. 无动画新增
     8. 纯增量：删掉 layout.php / nuxt.config.ts 里一行 <link> 即整体回滚

   ── 生效链路 ─────────────────────────────────────────────────────────────
     后台「站点设置 → 主题外观 → 手机端主题」选「户外版」
       → yiyu_setting(mobile_theme=odx) + static/theme.json
       → PHP tpl/layout.php 与 Nuxt SSR 同时输出 <html data-theme="odx">
       → 手机端（<1024px）命中本文件；PC 端整份不生效。
   ============================================================================ */

/* ── 0. PC 端兜底：设计稿版式的新首页区块在 PC 上整块不显示 ──────────────
   与 wildm.css 同口径：先默认隐藏、手机端断点内放出。
   新增首页区块时必须同时登记在这里和断点里，漏登记 = PC 首页漏出手机结构。 */
html[data-theme="odx"] .f-hero,
html[data-theme="odx"] .f-dock,
html[data-theme="odx"] .f-chips-row {
  display: none;
}

@media (max-width: 1023.98px) {

  /* ── 1. 设计令牌覆写（ui整改.md 第 2 节令牌，照抄不改值）───────────── */
  html[data-theme="odx"][data-theme] {
    /* 规范令牌原名（新增 token 名，红线 5 允许）——第 5 节活动卡规则引用 */
    --bg:    #FAFCFA;
    --card:  #FFFFFF;
    --soft:  #F4F8F5;
    --ink:   #1F2A24;
    --ink2:  #4A5A51;
    --ink3:  #64786D;
    --ink4:  #8C9A92;
    --line2: #EDF2EE;
    --g600:  #3F7D5C;
    --g500:  #4C8F6B;
    --g100:  #E7F1EA;
    --g50:   #F2F8F4;
    --a700:  #A9603A;
    --a600:  #B96C43;
    --a100:  #FBEDE2;
    --a50:   #FDF6EF;

    /* 站点既有令牌 → 换值不改名 */
    --brand-50:  #F2F8F4;
    --brand-100: #E7F1EA;
    --brand-200: #CFE3D8;
    --brand-300: #A9CDB9;
    --brand-400: #4C8F6B;
    --brand-500: #3F7D5C;
    --brand-600: #3F7D5C;
    --brand-700: #37714F;
    --brand-800: #2C5B40;
    --brand-900: #224732;

    --accent-gold: #B96C43;
    --accent-lime: #A9CDB9;
    /* --accent-xhs 点赞红是功能语义色，不动 */

    /* 渐变 → 实色（红线 2）。变量名不动，引用处自动变实色 */
    --grad-brand:      linear-gradient(135deg, #3F7D5C 0%, #3F7D5C 100%);
    --grad-brand-soft: linear-gradient(128deg, rgba(63,125,92,.10), rgba(63,125,92,.06));
    --grad-warm:       linear-gradient(135deg, #A9603A 0%, #A9603A 100%);

    /* 薄荷族并回主绿族（商城/闲置边框、广场卡边框取自这一族） */
    --mint-50:  #F2F8F4;
    --mint-100: #E7F1EA;
    --mint-200: #CFE3D8;
    --mint-300: #A9CDB9;
    --mint-400: #4C8F6B;
    --mint-500: #3F7D5C;
    --mint-600: #3F7D5C;
    --mint-700: #37714F;
    --grad-mint:      linear-gradient(135deg, #3F7D5C 0%, #3F7D5C 100%);
    --grad-mint-soft: linear-gradient(128deg, rgba(63,125,92,.10), rgba(63,125,92,.06));

    /* 背景层次 */
    --bg-base:    #FAFCFA;
    --bg-raise:   #FFFFFF;
    --bg-raise-2: #F4F8F5;
    --bg-sunken:  #F4F8F5;
    --bg-glass:   rgba(250,252,250,.85);

    /* 文字 */
    --text-primary: #1F2A24;
    --text-second:  #4A5A51;
    --text-third:   #64786D;
    --text-invert:  #FFFFFF;

    /* 描边 */
    --border-1: #E2EBE4;
    --border-2: #CFDCD4;
    --line:        #E2EBE4;
    --line-strong: #CFDCD4;

    /* 圆角（规范：--r 16 / --r2 20 / --r3 12 / --r4 8） */
    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px;

    /* 阴影：只有两档（红线 2）—— sh / sh2，其余变量对齐这两档 */
    --sh-1: 0 1px 2px rgba(31,42,36,.05);
    --sh-2: 0 2px 8px rgba(31,42,36,.06);
    --sh-3: 0 2px 8px rgba(31,42,36,.06);
    --sh-brand: 0 2px 8px rgba(63,125,92,.16);
  }

  /* ── 2. 分区兜底：进了商城/闲置/公益也保持同一套令牌 ─────────────────── */
  html[data-theme="odx"][data-zone="idle"],
  html[data-theme="odx"][data-zone="welfare"],
  html[data-theme="odx"][data-zone="mall"],
  html[data-theme="odx"][data-zone="shop"] {
    --brand-50:  #F2F8F4;
    --brand-100: #E7F1EA;
    --brand-200: #CFE3D8;
    --brand-300: #A9CDB9;
    --brand-400: #4C8F6B;
    --brand-500: #3F7D5C;
    --brand-600: #3F7D5C;
    --brand-700: #37714F;
    --brand-800: #2C5B40;
    --brand-900: #224732;
    --grad-brand: linear-gradient(135deg, #3F7D5C 0%, #3F7D5C 100%);
    --grad-warm:  linear-gradient(135deg, #A9603A 0%, #A9603A 100%);
    --bg-base:    #FAFCFA;
    --bg-raise-2: #F4F8F5;
    --bg-sunken:  #F4F8F5;
    --text-primary: #1F2A24;
    --text-second:  #4A5A51;
    --text-third:   #64786D;
    --line:        #E2EBE4;
    --line-strong: #CFDCD4;
    --r-sm: 12px; --r-md: 16px; --r-lg: 20px;
  }

  /* ── 3. 组件收口：写死的渐变/品牌绿 → 规范色 ─────────────────────────── */

  /* ① 顶栏去渐变（工单 A2 同款问题：渐变亮端白字对比度不足） */
  html[data-theme="odx"] .yq-hd,
  html[data-theme="odx"] .il-hd,
  html[data-theme="odx"] .wf-hd,
  html[data-theme="odx"] .ms-tabs {
    background-image: none;
  }

  /* ② 主行动按钮：实色主绿，白字 4.88:1 */
  html[data-theme="odx"] .yq-btn--primary,
  html[data-theme="odx"] .yq-btn--brand,
  html[data-theme="odx"] .il-pub,
  html[data-theme="odx"] .wf-btn--primary {
    background-image: none;
    background-color: #3F7D5C;
    color: #FFFFFF;
  }

  /* ③ 次级强调（价格/积分/缺人）：落日橙，白底橙字 4.75:1 */
  html[data-theme="odx"] .f-price,
  html[data-theme="odx"] .il-price,
  html[data-theme="odx"] .mall-price {
    color: #A9603A;
  }
  html[data-theme="odx"] .yq-btn--warn,
  html[data-theme="odx"] .yq-btn--accent {
    background-image: none;
    background-color: #A9603A;
    color: #FFFFFF;
  }

  /* ④ 幽灵/次按钮：淡描边 + 主绿深档字 */
  html[data-theme="odx"] .yq-btn--ghost,
  html[data-theme="odx"] .yq-btn--outline {
    border-color: #CFDCD4;
    color: #37714F;
  }

  /* ⑤ 标签三态：绿 / 橙 / 灰（对比度见规范第 2 节表格） */
  html[data-theme="odx"] .yq-tag,
  html[data-theme="odx"] .il-tag,
  html[data-theme="odx"] .wf-tag {
    background: #E7F1EA;
    color: #37714F;
  }
  html[data-theme="odx"] .yq-tag--warn,
  html[data-theme="odx"] .yq-tag--accent,
  html[data-theme="odx"] .il-tag--a,
  html[data-theme="odx"] .wf-tag--a {
    background: #FBEDE2;
    color: #A9603A;
  }
  html[data-theme="odx"] .yq-tag--mute,
  html[data-theme="odx"] .il-tag--n,
  html[data-theme="odx"] .wf-tag--n {
    background: #F4F8F5;
    color: #64786D;
  }

  /* ⑥ 底部 tabbar / 页脚 */
  html[data-theme="odx"] .yq-tb,
  html[data-theme="odx"] .il-tb {
    background: rgba(255,255,255,.96);
    border-top-color: #E2EBE4;
  }
  html[data-theme="odx"] .yq-tb__i.is-on,
  html[data-theme="odx"] .il-tb__i.is-on {
    color: #3F7D5C;
  }

  /* ⑦ 通用卡片：白卡 / 圆角 16 / 两档阴影里的轻档 */
  html[data-theme="odx"] .yq-card,
  html[data-theme="odx"] .il-card,
  html[data-theme="odx"] .wf-card,
  html[data-theme="odx"] .zl-card,
  html[data-theme="odx"] .mall-card {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(31,42,36,.05);
  }

  /* ⑧ 输入/搜索 */
  html[data-theme="odx"] input,
  html[data-theme="odx"] textarea,
  html[data-theme="odx"] select,
  html[data-theme="odx"] .yq-search,
  html[data-theme="odx"] .il-search {
    border-color: #E2EBE4;
    border-radius: 12px;
  }

  /* ── 4. 首页设计稿区块（f-hero / f-dock / f-chips-row）────────────────── */
  html[data-theme="odx"] .f-hero { display: block; }
  html[data-theme="odx"] .f-dock,
  html[data-theme="odx"] .f-chips-row { display: flex; }
  html[data-theme="odx"] .f-hide-mobile { display: none !important; }

  /* f-hero：236px 大图 + 底部玻璃信息卡（≤256px，符合规范 bug 清单第 3 条） */
  html[data-theme="odx"] .f-hero {
    position: relative;
    height: 236px;
    overflow: hidden;
  }
  html[data-theme="odx"] .f-hero > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* 工单 A5 豁免：功能性可读遮罩（保证封面文字可读），非装饰性渐变 */
  html[data-theme="odx"] .f-hero .veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,35,27,.10) 0%, rgba(20,35,27,0) 34%,
                                        rgba(20,35,27,0) 52%, rgba(20,35,27,.26) 100%);
  }
  html[data-theme="odx"] .f-hero .gb {
    position: absolute; left: 13px; right: 13px; bottom: 12px;
    background: rgba(255,255,255,.94);
    border-radius: 16px;
    padding: 11px 13px;
    box-shadow: 0 2px 8px rgba(31,42,36,.06);
  }
  html[data-theme="odx"] .f-hero .r1 {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
  }
  html[data-theme="odx"] .f-hero .loc {
    display: inline-flex; align-items: center; gap: 3px;
    color: #37714F; font-weight: 600;
  }
  html[data-theme="odx"] .f-hero .tm { margin-left: auto; color: #64786D; }
  html[data-theme="odx"] .f-hero .r2 {
    display: flex; align-items: center; gap: 9px; margin-top: 5px;
  }
  html[data-theme="odx"] .f-hero .t {
    flex: 1; font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #1F2A24;
  }
  html[data-theme="odx"] .f-hero .f-pill {
    display: inline-flex; align-items: center; height: 18px; padding: 0 8px;
    border-radius: 6px; font-size: 11px; font-weight: 500;
    background: #E7F1EA; color: #37714F;
  }
  html[data-theme="odx"] .f-hero .f-btn {
    flex: none; height: 28px; padding: 0 13px; border-radius: 999px;
    background: #3F7D5C; color: #fff; font-size: 12.5px; font-weight: 500;
    text-decoration: none; display: inline-flex; align-items: center;
  }

  /* f-dock：七个业务入口 */
  html[data-theme="odx"] .f-dock {
    gap: 5px; overflow-x: auto; padding: 4px 14px 2px;
    scrollbar-width: none;
  }
  html[data-theme="odx"] .f-dock::-webkit-scrollbar { display: none; }
  html[data-theme="odx"] .f-dock > a {
    flex: none; width: 56px; display: flex; flex-direction: column;
    align-items: center; gap: 5px; text-decoration: none; color: #1F2A24;
  }
  html[data-theme="odx"] .f-dock .ic {
    width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center;
    background: #E7F1EA; color: #37714F;
  }
  html[data-theme="odx"] .f-dock > a:nth-child(3) .ic { background: #FBEDE2; color: #A9603A; }
  html[data-theme="odx"] .f-dock .t { font-size: 11px; color: #4A5A51; }

  /* f-chips-row：话题条 */
  html[data-theme="odx"] .f-chips-row {
    gap: 7px; overflow-x: auto; padding: 10px 14px;
    scrollbar-width: none;
  }
  html[data-theme="odx"] .f-chips-row::-webkit-scrollbar { display: none; }
  html[data-theme="odx"] .f-chips-row > a {
    flex: none; height: 28px; padding: 0 13px; border-radius: 999px;
    background: #fff; border: 1px solid #E2EBE4;
    font-size: 12.5px; color: #4A5A51;
    display: flex; align-items: center; text-decoration: none;
  }
  html[data-theme="odx"] .f-chips-row > a.is-on {
    background: #3F7D5C; border-color: #3F7D5C; color: #fff; font-weight: 500;
  }

  /* ── 5. 顶栏 / 底栏：白玻璃 + 深墨字（基准稿 .m-hd / .m-tab）──────────── */
  html[data-theme="odx"] .yq-hd,
  html[data-theme="odx"] .il-hd,
  html[data-theme="odx"] .wf-hd {
    background-color: rgba(250,252,250,.93);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #E2EBE4;
  }
  html[data-theme="odx"] .yq-hd,
  html[data-theme="odx"] .yq-hd *:not(.yq-btn--primary):not(.yq-btn--brand):not(.yq-btn--accent):not(.yq-btn--warn) {
    color: #1F2A24;
  }
  html[data-theme="odx"] .yq-ft,
  html[data-theme="odx"] .yq-tb,
  html[data-theme="odx"] .il-tb {
    background-color: rgba(255,255,255,.96);
    border-top-color: #E2EBE4;
  }

  /* ==========================================================================
     6. 活动页 · 图文卡片（ui整改.md 第 5 节，本轮重点）
     --------------------------------------------------------------------------
     ★ 范围红线：结构/字段/接口不动（规范第 4 节 + 用户「活动页面不做更改」），
       以下是纯 CSS 重绘。
     ★ 广场保护：所有规则都挂在 :has(.yq-ev__st) 上 —— 该类只存在于
       EventCard.vue（活动卡），广场 PostCard / 闲置 / 首页瀑布流零命中。
     ========================================================================== */

  /* 6.1 卡片本体：白卡 / 圆角 16 / 轻阴影 / 无描边 */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) {
    background: #FFFFFF;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(31,42,36,.05);
    overflow: hidden;
  }

  /* 6.2 封面比例锁（规范 5.1，线上最大 bug：比例失控 + 拉伸） */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__cover {
    container-type: inline-size;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    background: #F4F8F5;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__cover img {
    display: block;
    width: 100%;
    min-height: 75cqi;      /* 3:4 下限 */
    max-height: 133cqi;     /* 4:3 上限 */
    object-fit: cover;      /* 禁止拉伸 */
    aspect-ratio: auto;     /* 显式覆盖 --ph-ratio */
  }

  /* 6.3 封面上元素（规范 5.2）：状态角标右上 · 橙底白字 */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__badge.yq-ev__st {
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    height: auto;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    background: #A9603A;
  }
  /* 费用角标：左上 · 白底 94%（规范「日期/天数角标」位）
     ★ 基样式带 right/bottom 定位 —— 覆盖必须同时关掉 bottom，
       否则 top+bottom 同时生效会被竖向拉成一条（od2 实测踩坑） */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__fee {
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;
    height: auto;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #1F2A24;
    background: rgba(255,255,255,.94);
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__fee--free {
    color: #37714F;
  }

  /* 6.4 信息层级（规范 5.3）：封面→标题12 →(标签省)→元信息10→行动11 */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__body {
    padding: 12px 14px 12px;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__t {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    color: #1F2A24;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__meta {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #64786D;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-post__foot {
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__join {
    font-size: 12px;
    color: #64786D;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 行动按钮：主要动作右置为实色药丸（卡片整卡是链接，触控 ≥44px 由整卡兜底） */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #3F7D5C;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* 6.5 无封面文字笔记卡：内嵌浅底（--soft），不再出现「第二套白」 */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-note {
    background: #F4F8F5;
    color: #1F2A24;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-note__tag {
    background: #FBEDE2;
    color: #A9603A;
    border-radius: 8px;
    font-weight: 600;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-note__ft {
    color: #64786D;
  }

  /* 6.6 活动页工具胶囊行 / 分段器：白底描边，选中实色主绿 */
  html[data-theme="odx"] .yq-tools__i {
    background: #FFFFFF;
    border: 1px solid #E2EBE4;
    color: #4A5A51;
  }
  html[data-theme="odx"] .yq-tools__i.is-soon { color: #8C9A92; }
  html[data-theme="odx"] .yq-seg {
    background: #F4F8F5;
    border-radius: 10px;
  }
  html[data-theme="odx"] .yq-seg__i.is-on {
    background: #FFFFFF;
    color: #3F7D5C;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(31,42,36,.05);
  }


  /* B2 · 活动卡「详情」药丸热区 30px → 46px（纯 CSS 增量，不动 DOM） */
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__go {
    position: relative;
  }
  html[data-theme="odx"] .yq-post:has(.yq-ev__st) .yq-ev__go::after {
    content: ''; position: absolute; inset: -8px;
  }
} /* ← @media (max-width: 1023.98px)：PC 端整份不生效 */