/* ==========================================================================
   网页版主题（v3 · 与 Android App 同一套 TapTap 风格）
   令牌与 Android core/designsystem/Theme.kt 的 XmColors/XmShapes 一一对应，改值两边一起改。
   规范：Android/docs/06-UI设计规范.md §0

   加载顺序：static/index.css → web/css/app.css → 本文件 → 页面 CSS（按页懒加载，排在最后）。
   本文件只放两类东西：
     1. :root 令牌 + xm- 前缀的工具类（原站没有的类名，不会和页面 CSS 撞名）；
     2. 全局外壳（uni-page-head、原生 toast/modal/loading）的换肤——这些规则原站在 index.css 里，
        不在任何页面 CSS 里，所以在这里覆盖不会出现「A 页样式压 B 页」的问题。
   页面自己的换肤写在各自的 web/css/pages/*.css 里，用这里的变量。
   ========================================================================== */

:root {
  --tap: #00D9C5;          /* 主色：只做填充（主按钮、荧光条、勾选、发送键） */
  --tap-deep: #00A99A;     /* 白底上的强调文字：链接、选中文字 */
  --tap-tint: #E0F8F5;     /* 浅青绿底：QQ 标签、保障徽标、自己的气泡 */
  --ink: #16202A;          /* 墨色：主要文字、选中的分类胶囊 */
  --brand: #0B1F44;        /* 品牌深蓝：「我的」头部 */
  --price: #F04D23;        /* 只用于价格与金额 */
  --success: #12A150;
  --warning: #F59E0B;
  --danger: #E5484D;

  --t1: #16202A;
  --t2: #6B717A;
  --t3: #A3A8B0;
  --t-dis: #C8CCD2;

  --bg: #F5F6F8;           /* 区块之间的分隔带 / 列表页底色 */
  --surface: #FFFFFF;
  --muted: #F4F6F8;        /* 浅灰块、搜索框、未选中胶囊 */
  --line: #F0F1F3;
  --outline: #E3E6EA;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;
  --gutter: 16px;

  /* 派生值：页面分支可直接用 */
  --tap-hl: rgba(0, 217, 197, .85);
  --scrim: rgba(0, 0, 0, .6);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- 工具类 */

/* 荧光笔：文字下半截垫一条 6px 高的青绿圆角条，只垫文字宽度。
   用 inline-block + 伪元素，换行、字号怎么变都贴着文字走 */
.xm-hl { position: relative; display: inline-block; z-index: 0; font-weight: 700; color: var(--t1); }
.xm-hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 6px;
  border-radius: var(--r-full); background: var(--tap-hl); z-index: -1;
}

.xm-section-title { display: flex; align-items: center; justify-content: space-between; }
.xm-section-title > .xm-hl,
.xm-section-title__text { position: relative; display: inline-block; z-index: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--t1); }
.xm-section-title__text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 6px;
  border-radius: var(--r-full); background: var(--tap-hl); z-index: -1;
}
.xm-section-title__more { font-size: 12px; color: var(--t3); }

.xm-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  background: var(--tap); color: #fff; transition: opacity .15s;
}
.xm-btn:active { opacity: .85; }
.xm-btn[disabled], .xm-btn.is-disabled { opacity: .4; pointer-events: none; }
.xm-btn--primary { background: var(--tap); color: #fff; }
.xm-btn--secondary { background: var(--muted); color: var(--t1); }
.xm-btn--outline { background: var(--surface); color: var(--t1); border-color: var(--outline); }
.xm-btn--danger { background: #FDECEC; color: var(--danger); }
.xm-btn--md { height: 40px; padding: 0 16px; font-size: 14px; }
.xm-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }
.xm-btn--block { display: flex; width: 100%; }

.xm-tag {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 20px; padding: 0 7px;
  border-radius: var(--r-full); background: var(--muted); color: var(--t2);
  font-size: 11px; line-height: 1; white-space: nowrap;
}
.xm-tag--tap { background: var(--tap-tint); color: var(--tap-deep); }
.xm-tag--green { background: #E5F5EB; color: var(--success); }
.xm-tag--gold { background: #FCF2DC; color: #B27A00; }
.xm-tag--warning { background: #FEF3E2; color: #B45309; }
.xm-tag--danger { background: #FDECEC; color: var(--danger); }
.xm-tag--ink { background: var(--ink); color: #fff; }

.xm-chip {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 30px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid transparent;
  background: var(--muted); color: var(--t2); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.xm-chip--outline { background: var(--surface); border-color: var(--outline); }
.xm-chip--on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }

.xm-gap { display: block; width: 100%; height: 8px; background: var(--bg); }

.xm-block { display: block; box-sizing: border-box; border-radius: var(--r-md); background: var(--muted); padding: 12px 14px; }

.xm-card { display: block; box-sizing: border-box; background: var(--surface); border-radius: var(--r-md); }

.xm-search {
  display: flex; align-items: center; box-sizing: border-box; height: 36px; padding: 0 12px; gap: 6px;
  border-radius: var(--r-full); background: var(--muted); color: var(--t1); font-size: 14px;
}
.xm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--t1); }
.xm-search input::placeholder { color: var(--t3); }

.xm-price { display: inline-flex; align-items: baseline; color: var(--price); font-weight: 700; font-variant-numeric: tabular-nums; }
.xm-price__sym { font-size: .66em; font-weight: 600; margin-right: 1px; }
.xm-price__suffix { font-size: 12px; font-weight: 400; color: var(--t3); margin-left: 2px; }

.xm-divider { height: 0; border-bottom: .5px solid var(--line); }
.xm-empty { padding: 60px 24px; text-align: center; color: var(--t3); font-size: 14px; }

/* ---------------------------------------------------------------- 顶栏
   与 App 的 XmTopBar 一致：白底、无分隔线、返回箭头 + 标题左对齐、右侧操作。
   原站的 .uni-page-head-bd 是 left/right 各 70px 的居中标题区，这里改成紧贴返回键 */
uni-page-head .uni-page-head {
  background-color: var(--surface) !important; color: var(--t1) !important;
  box-shadow: none; border-bottom: 0;
}
uni-page-head .uni-page-head-bd { left: 44px; right: 56px; }
uni-page-head .uni-page-head__title {
  text-align: left; font-size: 17px !important; font-weight: 600; color: var(--t1);
}
uni-page-head .uni-page-head-hd .uni-page-head-btn { width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; }
uni-page-head .uni-page-head-hd .uni-btn-icon { color: var(--t1) !important; font-size: 24px !important; }

/* ---------------------------------------------------------------- 原生 toast / loading / modal
   （类名在 app.css 里定义，外观在这里统一换肤；app.css 保持结构） */
.native-toast { background: rgba(22, 32, 42, .88); border-radius: var(--r-full); padding: 10px 18px; font-size: 14px; }
.native-loading { background: rgba(0, 0, 0, .2); }
.native-loading__box { background: rgba(22, 32, 42, .9); border-radius: var(--r-md); padding: 20px 28px; }
.native-loading__spin { border-color: rgba(255, 255, 255, .25); border-top-color: var(--tap); }

.native-modal { background: var(--scrim); }
.native-modal.is-show .native-modal__box { animation: xm-pop .2s var(--ease) both; }
.native-modal__box { width: 300px; max-width: calc(100vw - 48px); border-radius: var(--r-lg); padding: 24px 20px 20px; box-sizing: border-box; }
.native-modal__title { padding: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--t1); }
.native-modal__content { padding: 0 0 22px; font-size: 14px; color: var(--t2); line-height: 1.6; }
.native-modal__btns { border-top: 0; gap: 12px; }
.native-modal__btn {
  display: flex; align-items: center; justify-content: center; height: 40px; padding: 0;
  border-radius: var(--r-full); background: var(--muted); color: var(--t1); font-size: 14px; font-weight: 500;
}
.native-modal__btn + .native-modal__btn { border-left: 0; }
.native-modal__btn--primary { background: var(--tap); color: #fff; }

/* 空态「返回」按钮等原生补的控件 */
.detail-empty__btn { background: var(--tap); border-radius: var(--r-full); }
.native-404-btn { background: var(--tap) !important; border-radius: var(--r-full) !important; }

/* ---------------------------------------------------------------- 弹层（ui/popup.js）
   页面 CSS 里 u-popup 的外观规则只管内容，关闭键与遮罩在这里统一 */
body > .u-popup > .u-popup__overlay { background: var(--scrim); animation: xm-fade .2s ease both; }
body > .u-popup.u-popup--center > .u-popup__content { animation: xm-pop .22s var(--ease) both; }
body > .u-popup.u-popup--bottom > .u-popup__content { animation: xm-up .26s var(--ease) both; }
.u-popup__content__close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--t3); cursor: pointer;
}

/* ---------------------------------------------------------------- 选择器（ui/picker.js） */
/* 基础外观：页面 CSS 里有 yd-picker 规则的页（首页、发布页）会以同优先级、更晚加载的规则覆盖这里；
   其它页用到 picker 时至少是一张可用的列表，不会是一列裸文字 */
.yd-picker-content .yd-picker__list { max-height: 50vh; }
.yd-picker-content .yd-picker__item {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px;
  border-bottom: .5px solid var(--line); font-size: 15px; color: var(--t1); cursor: pointer;
}
.yd-picker-content .yd-picker__checkbox { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--t-dis); box-sizing: border-box; }
.yd-picker-content .yd-picker__item--selected .yd-picker__item-text,
.yd-picker-content .yd-picker__item-text--selected { color: var(--tap-deep) !important; font-weight: 600; }
.yd-picker-content .yd-picker__checkbox--checked { background: var(--tap) !important; border-color: var(--tap) !important; }
.yd-picker-content .yd-picker__drag { width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--r-full); background: var(--outline); }

/* ---------------------------------------------------------------- uni 原生控件换色 */
uni-checkbox .uni-checkbox-input-checked { border-color: var(--tap) !important; background-color: var(--tap) !important; color: #fff !important; }
uni-radio .uni-radio-input-checked { border-color: var(--tap) !important; background-color: var(--tap) !important; }
.uni-input-input { caret-color: var(--tap); }

/* ---------------------------------------------------------------- 页面切换动画
   用 View Transitions：整屏快照做位移，不给页面节点加 transform——
   否则 transform 会成为 position:fixed 的包含块，底部导航栏、吸顶筛选条会在动画期间跳位。
   不支持的浏览器直接换页，没有动画也不影响功能。 */
@keyframes xm-in-right { from { transform: translateX(100%); } }
@keyframes xm-out-left { to { transform: translateX(-25%); opacity: .6; } }
@keyframes xm-in-left { from { transform: translateX(-25%); opacity: .6; } }
@keyframes xm-out-right { to { transform: translateX(100%); } }
@keyframes xm-fade { from { opacity: 0; } }
@keyframes xm-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes xm-up { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: no-preference) {
  html[data-xm-nav] { view-transition-name: root; }
  html[data-xm-nav="forward"]::view-transition-old(root) { animation: 280ms var(--ease) both xm-out-left; }
  html[data-xm-nav="forward"]::view-transition-new(root) { animation: 280ms var(--ease) both xm-in-right; z-index: 1; }
  html[data-xm-nav="back"]::view-transition-old(root) { animation: 280ms var(--ease) both xm-out-right; z-index: 1; }
  html[data-xm-nav="back"]::view-transition-new(root) { animation: 280ms var(--ease) both xm-in-left; }
  html[data-xm-nav="fade"]::view-transition-old(root) { animation: 150ms ease both xm-fade reverse; }
  html[data-xm-nav="fade"]::view-transition-new(root) { animation: 150ms ease both xm-fade; }
}
@media (prefers-reduced-motion: reduce) {
  body > .u-popup > .u-popup__content, body > .u-popup > .u-popup__overlay, .native-modal__box { animation: none !important; }
}