/* ============================================================
   深圳目标行动 · 自驾游俱乐部 H5 设计稿
   设计语言「路书」：国道盾牌 / 里程数字 / 海拔剖面 / 车道中线
   本文件为全站共享样式（设计稿阶段，非生产代码）
   ============================================================ */

/* 字体自托管（按设计稿实际用字子集化，零外链依赖） */
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/serif-900.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700.woff2") format("woff2");
}

:root {
  /* 色板 —— 山海路书 */
  --paper: #F3F0E7;        /* 纸沙：页面底色，路书纸张 */
  --card: #FCFBF6;         /* 卡片面 */
  --ink: #152521;          /* 墨青：正文/标题 */
  --ink-2: #5F6E66;        /* 雾绿灰：次级文字 */
  --pine: #1E5F4B;         /* 松绿：品牌主色（指示牌绿倾向） */
  --pine-deep: #0F3328;    /* 深松：深色区块底 */
  --signal: #E2621B;       /* 信号橙：主 CTA，克制使用 */
  --signal-ink: #C24E12;   /* 深一档橙：文字用 */
  --lane: #F2B33D;         /* 中线黄：点缀（评分/小标） */
  --line: rgba(21, 37, 33, 0.14);
  --shadow-card: 0 10px 28px -14px rgba(15, 51, 40, 0.35);

  /* 字体 */
  --f-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "Microsoft YaHei", "Segoe UI", sans-serif;
  --f-num: "Barlow Condensed", "Arial Narrow", "PingFang SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--f-body);
  background: #0D1412;          /* 桌面观感：深色工作台 */
  color: var(--ink);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* 手机画布：桌面居中 390px，真机全宽 */
.phone {
  width: min(390px, 100vw);
  background: var(--paper);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 通用原子 ---------- */

.eyebrow {
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pine);
}

.num { font-family: var(--f-num); font-weight: 700; letter-spacing: 0.01em; }

/* 国道盾牌编号 */
.shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--pine);
  border-radius: 6px;
  padding: 2px 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px var(--pine);
}
.shield.is-orange { background: var(--signal); box-shadow: 0 0 0 2px var(--signal); }

/* 元信息小胶囊（里程 / 天数 / 海拔） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #EAF2EC;
  background: rgba(9, 26, 21, 0.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
}

/* 状态标签 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.06em;
}
.tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.tag-open    { color: #0F5A3C; background: rgba(30, 178, 121, 0.16); }   /* 报名中 */
.tag-set     { color: #7A5A12; background: rgba(242, 179, 61, 0.22); }   /* 已成行 */
.tag-running { color: #8A3410; background: rgba(226, 98, 27, 0.16); }    /* 已出发 */
.tag-past    { color: var(--ink-2); background: rgba(21, 37, 33, 0.08); } /* 往期 */

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-signal {
  color: #fff;
  background: linear-gradient(180deg, #EC7430, var(--signal));
  box-shadow: 0 8px 20px -8px rgba(226, 98, 27, 0.65);
}
.btn-ghost-light { color: #F3F0E7; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.45); }
.btn-pine { color: #fff; background: var(--pine); }
.btn-block { width: 100%; }

:focus-visible { outline: 2px solid var(--lane); outline-offset: 2px; border-radius: 4px; }

/* ---------- 车道中线分隔（页面签名元素之一） ---------- */
.lane-divider {
  height: 14px;
  background-image: linear-gradient(90deg, var(--lane) 55%, transparent 45%);
  background-size: 26px 3px;
  background-repeat: repeat-x;
  background-position: center;
}

/* ---------- 区块 ---------- */
.section { padding: 26px 16px 8px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--signal);
  flex: none;
}
.section-more {
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(390px, 100vw);
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(15, 37, 30, 0.96);
  backdrop-filter: blur(10px);
  display: flex;
  z-index: 50;
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: rgba(243, 240, 231, 0.55);
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
.tabbar a svg { width: 23px; height: 23px; }
.tabbar a.on { color: var(--lane); }

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   子页通用组件（活动/商城/我的 相关页面）
   ============================================================ */

/* 子页头：返回 + 标题 */
.subhead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(243, 240, 231, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.subhead .back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.subhead h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0;
}
.subhead .spacer { flex: 1; }

/* 横向筛选条 */
.filter-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px 4px;
  scrollbar-width: none;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
.filter-pill.on {
  color: #fff;
  background: var(--pine);
  border-color: var(--pine);
}

/* 记录行（团队/佣金/提现记录） */
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.row-item:last-child { border-bottom: none; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pine);
  color: #F3F0E7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  flex: none;
}
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; font-weight: 600; }
.row-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.row-amt { font-family: var(--f-num); font-weight: 700; font-size: 17px; text-align: right; }
.row-amt.in { color: var(--pine); }
.row-amt.out { color: var(--ink-2); }

/* 等级小徽标 */
.lv {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pine);
  background: rgba(30, 95, 75, 0.1);
  border-radius: 3px;
  padding: 1px 6px;
}
.lv-gold { color: #8A5A12; background: rgba(242, 179, 61, 0.22); }
.lv-silver { color: #5C6B73; background: rgba(92, 107, 115, 0.14); }
.lv-patron { color: #8A3410; background: rgba(226, 98, 27, 0.14); }

/* 提现状态标签 */
.tag-review { color: #7A5A12; background: rgba(242, 179, 61, 0.22); }   /* 待审核 */
.tag-paid { color: #0F5A3C; background: rgba(30, 178, 121, 0.16); }     /* 已打款 */
.tag-refuse { color: #8A2E12; background: rgba(190, 60, 26, 0.13); }   /* 已驳回 */

/* 详情页底部操作条 */
.actionbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(390px, 100vw);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 240, 231, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  z-index: 50;
}
.actionbar .btn { flex: 1; padding-top: 12px; padding-bottom: 12px; }

/* 卡片容器 */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin: 0 16px 14px;
}

/* 空态 */
.empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--ink-2);
  font-size: 13px;
}
.empty svg { width: 44px; height: 44px; opacity: 0.5; margin-bottom: 10px; }

/* ============================================================
   活动/商品卡片（首页与列表页共用）
   ============================================================ */

.trip-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  transition: transform 0.15s ease;
}
.trip-card:active { transform: scale(0.985); }
.trip-cover { position: relative; height: 158px; }
.trip-cover svg.scene { width: 100%; height: 100%; display: block; }
.trip-cover .tag { position: absolute; top: 10px; right: 10px; }
.trip-cover .shield { position: absolute; top: 10px; left: 10px; }
.trip-body { padding: 13px 14px 14px; }
.trip-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 17.5px;
  line-height: 1.3;
  margin-bottom: 7px;
}
.trip-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.trip-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-2); }
.profile { margin: 0 0 10px; }
.profile svg { width: 100%; height: 34px; display: block; }
.profile-lab {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-num);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-top: -30px;
  margin-bottom: 14px;
  opacity: 0.9;
}
.trip-price { display: flex; align-items: baseline; gap: 8px; }
.trip-price .cur { font-size: 13px; font-weight: 700; color: var(--signal-ink); }
.trip-price .val { font-family: var(--f-num); font-weight: 700; font-size: 23px; color: var(--signal-ink); }
.trip-price .vip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pine);
  background: rgba(30, 95, 75, 0.1);
  border-radius: 4px;
  padding: 2px 7px;
}
.trip-price .per { font-size: 11px; color: var(--ink-2); margin-left: auto; }
.trip-card.is-past .trip-cover { filter: saturate(0.45) brightness(0.94); }
.trip-card.is-past .trip-title, .trip-card.is-past .trip-price { opacity: 0.62; }

/* 商品网格 */
.goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.goods {
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease;
}
.goods:active { transform: scale(0.98); }
.goods-cover {
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #E7E3D6, #D8DDD2);
}
.goods-cover svg { width: 52px; height: 52px; opacity: 0.85; }
.goods-body { padding: 10px 11px 12px; }
.goods-name { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }
.goods-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.goods-price .cur { font-size: 11px; font-weight: 700; color: var(--signal-ink); }
.goods-price .val { font-family: var(--f-num); font-weight: 700; font-size: 18px; color: var(--signal-ink); }
.goods-price .vip { font-size: 10px; font-weight: 600; color: var(--pine); background: rgba(30, 95, 75, 0.1); border-radius: 3px; padding: 1px 5px; }
.goods-ori {
  position: relative;
}
.goods-ori .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(15, 51, 40, 0.78);
  border-radius: 4px;
  padding: 2px 7px;
}