/* =========================================================================
   base.css —— 重置 + WebView/手机端适配
   这一层是「像 App 不像网页」的关键，别删。
   ========================================================================= */

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

/* ⚠️ 这条兜底**不能删**。
   HTML 的 `hidden` 属性靠浏览器默认样式表里的 `[hidden] { display: none }` 生效，
   但**作者样式永远压过默认样式表**（跟特异性无关）。所以只要某个元素自己写了
   `display`（比如 `.tabbar { display: grid }`），`el.hidden = true` 就**在视觉上
   完全没作用** —— 元素还在，只是没内容，于是二级页底部留下一条空白的白色圆角条。
   项目里有 13 处在用 `hidden` 切显示（tab 栏 / 分段页 pane / 弹窗遮罩 / toast），
   这里加 `!important` 一次挡住，别指望每处都记得补 `[hidden]` 规则。 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  /* 桌面预览时 App 两侧的留白。真机上 App 铺满，看不到这个色。
     注意别在这里写 var(--bg) 之类不存在的变量 —— 上一版就是踩了这个坑：
     #app 的 background 解析失败变成透明，露出这里的黑底，整个 App 变黑。 */
  background: #2A2B33;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- 像 App 不像网页：禁缩放、禁选中、禁长按菜单、禁橡皮筋 ---- */
html {
  touch-action: manipulation;           /* 干掉双击放大 */
  overscroll-behavior: none;            /* 干掉下拉刷新 / 橡皮筋 */
}
body {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* 长按不弹系统菜单 */
  -webkit-tap-highlight-color: transparent;
}
input, textarea {
  -webkit-user-select: text;            /* 输入框要能选、能粘贴 */
  user-select: text;
  -webkit-touch-callout: default;
}

img { display: block; max-width: 100%; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* 通用图标 */
.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---- 桌面浏览器预览：当成手机屏 ---- */
body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  height: 100vh;            /* 老内核兜底 */
  height: 100dvh;           /* 现代内核：跟地址栏收缩走 */
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 状态栏配色（WebView 壳里读 theme-color 也行） */
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.6);
}

/* 滚动容器：底部留出 tab 栏 + 安全区。
   extra 那 38px 是给底部 tab 中间那个「开盒」悬浮球的 —— 它高出 tab 栏约 26px，
   不留的话会压住页面最后一屏的内容。

   ⚠️ 拆成两个变量，是因为**首页要把 extra 压成 0**：
      首页最后一块是深色商品带，这段留白露出来是纸色 —— 深色带、一条纸色、
      tab 栏，中间一条亮边。首页自己那份余量够（商品带有 34px 下内边距），
      所以 app.css 里用 `html[data-page="home"] .view { --foot-extra: 0px }`
      把这段空间**去掉**（不是改它的颜色）。
      拆开之后改 extra 只需要动这一个数，两个地方不会走偏。 */
:root {
  --foot-extra: 38px;
  --view-pad-b: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--foot-extra));
}
.view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--paper);
  padding-bottom: var(--view-pad-b);
}
#app.no-tab .view { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }

/* 极细滚动条（桌面预览时不碍眼） */
.view::-webkit-scrollbar { width: 0; }

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}