/* ============================================================
   iOS 原生组件库 v2.0（设计稿定稿版 · 唯一样式文件）
   Apple HIG：大标题导航 / Inset Grouped / 原生控件 / 毛玻璃
   仅依赖 assets/js/core.js 与 assets/js/ios.js
   ============================================================ */
:root {
  --bg:#F2F2F7; --card:#FFFFFF; --sep:rgba(60,60,67,.29); --sep2:rgba(60,60,67,.08);
  --t1:#1C1C1E; --t2:rgba(60,60,67,.62); --t3:rgba(60,60,67,.32);
  --blue:#007AFF; --green:#34C759; --orange:#FF9500; --red:#FF3B30;
  --purple:#AF52DE; --teal:#32ADE6; --pink:#FF2D55; --gold:#FFCC00;
  --gray:#8E8E93; --green-d:#1D7A38; --orange-d:#B25000; --red-d:#C01C28;
  --nav-blur:rgba(249,249,249,.86); --tab-blur:rgba(249,249,249,.92);
  /* UOYU 品牌色（2026-09-17：头部品牌条改为黑黄，源自 UOYU游寓 OMS 原型 DS） */
  --brand-yellow:#FFD100; --brand-ink:#0B0B0C;
  /* 「墨黑英雄卡」底色（.balance-card）。
     ⚠️ 不能直接写 var(--brand-ink) 当背景 —— 深色模式下 --bg 是纯黑，墨黑卡会跟页面糊在一起、看不出卡片边界。
     浅色用品牌墨 #0B0B0C，深色改用与 --card 同档的深灰面 #1C1C1E（靠 #FFD100 大数字来立住「英雄卡」的身份）。 */
  --card-ink:#0B0B0C;
  /* 「墨色文字」——--brand-ink 在深色模式下**不会**被覆盖（顶栏恒为品牌黄，墨字永远安全），
     所以直接把 --brand-ink 当正文色用在卡片上，深色模式就是「黑字压深灰卡」= 看不见。
     需要墨色正文时用本变量：浅色 #0B0B0C / 深色 #F2F2F7。（当前用于房态盘 .rc-no） */
  --ink-strong:#0B0B0C;
  /* Safari 26 底栏「取样条」的颜色（= .tabbar 压在 --bg 上的实际观感色，必须不透明） */
  --chrome-bottom:#F9F9F9;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
/* 文档层不许回弹/链式滚动：`.scr` 是内层滚动容器，它滚到底后 iOS 会把滚动链传给文档，
   于是「整页被拉动」——用户 2026-09-17 报的「上拉整个页面」。见下方「浏览器画布」一节。
   ⚠️ 副作用：iOS Safari 的下拉刷新手势会一并失效（本项目移动端是 App 形态，通常正是想要的）。 */
html,body { overscroll-behavior:none; }
/* 🔴 `html` 必须有背景色：`html` 透明时 body 的背景会「传播到画布」（Safari 的规范行为），
   而 body 的 background-color 是品牌黄（为了喂浏览器顶栏）—— 一旦整页回弹/任何情况露出 body 盒子之外的画布，
   露出的就是纯黄。让 html 自己接管画布 = 画布恒为 --bg，与 `.phone` 一致，露出来也看不出来。
   ⚠️ 必须给 `body.dark` 单独一条：`--bg` 是在 `body.dark` 上被覆盖的，html 只会拿到 `:root` 那份（深色下仍 #F2F2F7）。
   用 `:has()`（Safari 15.4+）而不是给 html 加类，可以做到纯 CSS、不动 core.js/ios.js。 */
html { background-color:var(--bg); }
html:has(body.dark) { background-color:#000000; }
/* 防闪白兜底（2026-09-23）：各页 <body> 顶的防闪脚本会把 dark 同步挂到 html 上，
   老内核不支持 :has() 时靠这条保证深色下画布也是黑的（回弹/过滚动不露白）。 */
html.dark { background-color:#000000; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif; background:var(--bg); color:var(--t1); font-size:14px; }

/* ================= 手机框架 ================= */
.phone { max-width:440px; margin:0 auto; height:100vh; height:100dvh; background:var(--bg); position:relative; display:flex; flex-direction:column; overflow:hidden; }
.phone.pb-bar, .phone.pb-none { padding-bottom:0; }
.phone.pb-none { padding-bottom:0; }

/* ================= 状态栏 ================= */
.sb { flex:none; height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; padding-top:6px; font-size:13px; font-weight:700; color:var(--t1); z-index:10; }
.sb .sv { display:flex; gap:4px; align-items:center; }
.sb .sv svg { width:14px; height:14px; fill:currentColor; }

/* ================= 顶部导航 ================= */
.ln-bar { display:flex; align-items:center; gap:8px; }
.ln-ico { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:34px; height:34px; border-radius:50%; background:rgba(118,118,128,.12); border:1px solid rgba(60,60,67,.07); box-shadow:0 1px 4px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); cursor:pointer; position:relative; color:var(--blue); text-decoration:none; font-size:12px; font-weight:600; flex:none; }
.ln-ico svg { width:16px; height:16px; stroke:var(--blue); stroke-width:2.2; }
.ln-ico .rd { position:absolute; top:2px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--red); border:2px solid #fff; }

/* ================= 小标题导航（二级页 · 2026-09-17 起与工作台 .tbar 同为品牌黄） =================
   用户口径：「所有页面的顶部都定工作台的顶部的背景色」→ 21 个二级页的 .ios-topnav 由浅灰改品牌黄，
   与 6 个主页面的 .tbar 统一。
   🔴 黄底上的文字/图标一律写**墨色**（--brand-ink），**不要用 var(--t1)** ——
   `--t1` 会在 `body.dark` 下翻成近白色，黄底上直接看不见（这是最容易漏的一条）。
   🔴 底色与 `.tbar` 一样不分主题：深色模式下头部也是黄的（`.tbar` 就是这么做的）。 */
.ios-topnav { flex:none; position:sticky; top:0; z-index:90; display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:48px; background:var(--brand-yellow); border-bottom:.5px solid rgba(11,11,12,.08); color:var(--brand-ink); }
.ios-topnav .back { width:32px; height:32px; border-radius:50%; background:rgba(11,11,12,.1); border:none; display:grid; place-items:center; cursor:pointer; flex:none; }
.ios-topnav .back svg { width:16px; height:16px; stroke:var(--brand-ink); stroke-width:2.6; }
/* 标题绝对居中（不再被返回键挤偏） */
.ios-topnav .tt { position:absolute; left:50%; transform:translateX(-50%); font-size:17px; font-weight:600; letter-spacing:-.2px; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--brand-ink); }
.ios-topnav .ghost { margin-left:auto; border:none; background:rgba(11,11,12,.1); color:var(--brand-ink); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; padding:6px 13px; border-radius:16px; flex:none; }
.ios-topnav .ghost:active { background:rgba(11,11,12,.18); }
/* 顶栏右侧有多个控件时：**只有第一个**吃 margin-left:auto，其余跟在后面（靠 gap:8px 排）。
   ⚠️ 否则多个 auto 会把剩余空间平分 → 控件被顶到导航栏中间（2026-09-17 fees/expenses 实测「全站」距右 58px）。
   2026-09-17 统一口径：右侧组固定为「图标按钮在前、分店胶囊「全站」在最右」，与工作台 .tbar .acts 一致。 */
.ios-topnav .ghost ~ .ghost,
.ios-topnav .act-pill ~ .act-pill,
.ios-topnav .ghost ~ .act-pill,
.ios-topnav .act-pill ~ .ghost { margin-left:0; }
/* ================= 顶栏圆形图标按钮（＋ / 删除 / 编辑…） =================
   全站统一成「工作台右上角圆形 ＋」#navAddRoom 的规格（2026-09-17 用户口径）：
   34px 正圆 + 半透明墨底 + 墨色图标 17px + 描边 2.6。
   ⚠️ 各页曾各自抄一份 16px/2 的版本（orders/contacts/users/user_detail），已全部删掉改走本条。 */
.act-pill { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(11,11,12,.1); color:var(--brand-ink); cursor:pointer; flex:none; -webkit-tap-highlight-color:transparent; }
.act-pill:active { background:rgba(11,11,12,.22); }
.act-pill svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
/* 顶栏里只有图标、没有文字的 .ghost（如 fees/expenses/withdrawals 的「＋」）→ 也按同一颗圆钮渲染 */
.ios-topnav .ghost:has(> svg:only-child) { width:34px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.ios-topnav .ghost:has(> svg:only-child) svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
/* 黄底内的圆钮 / 搜索框：跟着改墨色系（search.html 把 .ios-search 塞进了顶栏） */
.ios-topnav .ln-ico { background:rgba(11,11,12,.1); border:none; box-shadow:none; color:var(--brand-ink); }
.ios-topnav .ln-ico svg { stroke:var(--brand-ink); }
.ios-topnav .ios-search { background:rgba(11,11,12,.1); }
.ios-topnav .ios-search svg { stroke:rgba(11,11,12,.55); }
.ios-topnav .ios-search input { color:var(--brand-ink); }
.ios-topnav .ios-search input::placeholder { color:rgba(11,11,12,.45); }

/* ================= 滚动内容区 ================= */
.scr { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; scrollbar-width:none; -ms-overflow-style:none; }
/* 🔴 `height:0` 不能省：原来这里只写了 `width:0`，而 `.scr` 是 `overflow-y:auto`
   → overflow-x 按规范会从 visible 计算成 auto，内容一旦横向溢出，滚动区**底部**就会冒出一条
   **横向**滚动条，`width` 根本管不到它。2026-09-18 用户报「能隐藏滚动条吗」时发现的这条漏网。 */
.scr::-webkit-scrollbar { width:0; height:0; display:none; }

/* ================= 隐藏滚动条（移动端 / 平板 ≤1279px，2026-09-18） =================
   用户口径：「移动端和平板端可以隐藏那个浏览器的滚动条吗」—— 可以，三个内核各一条兜底：
     ① `scrollbar-width:none`      Firefox 64+ / Chrome·Edge 121+ / Safari 18.2+
     ② `::-webkit-scrollbar`       所有 WebKit/Blink：iOS Safari、安卓 Chrome、APK 里的安卓 WebView、旧版 Chrome
     ③ `-ms-overflow-style:none`    IE11 / 旧 Edge
   手机/平板上滚动条本来就是**临时浮层**（滚动时闪一下、不占宽度），隐藏后是纯原生 App 观感。
   ⚠️ 为什么选择器用 `*` 而不是逐个列：本项目有 **20 个页面级滚动容器**（弹层列表 / 横向 tab /
      座位网格 / 分类条…）散在 15 个页面里，逐个维护必漏；`*` 连以后新增的容器一起覆盖。
   ⚠️ 为什么只给 ≤1279：电脑端保留原生滚动条做「滚动位置提示」（那边是经典滚动条、占 ~15px 宽，
      一并隐藏会改变内容宽度）。≥1280 的行为与改动前**逐像素一致**。
   ⚠️ 用整数 1279 而不是 1279.98：与 `min-width:1280px` 正好互补，不依赖小数媒体查询的老内核支持。 */
@media (max-width:1279px) {
  * { scrollbar-width:none; -ms-overflow-style:none; }
  *::-webkit-scrollbar { width:0; height:0; display:none; }
}
.pg { padding:2px 16px 20px; }

/* ================= 顶部间距统一（2026-09-17） =================
   口径：**每个页面「顶栏底 → 首个可见内容」一律 14px** —— 以首页收入卡（#bedFeeCard）与顶栏的间距为准。
   算法：`.pg` 的 padding-top 2px + 首个块自身 margin-top 12px = 14px。

   ⚠️ 三类例外必须单独处理，否则会叠加或落空（都是实测出来的，改前先看 px17 探针）：
     ① **视图壳**：dashboard 的 `#viewOrder` 自己不能吃 12px，间距由里面的卡给（`.balance-card` 自带 margin-top:12px）。
     ② **零高度空壳**：`#listWrap` / `#permWrap` 这类「只有 JS 填充后才有内容」的容器，它是 `:first-child`
        却看不见 —— 12px 会跟下一个块的 margin 叠加成 24px+，必须归零。
     ③ **靠 padding-top 撑开文字的块**：`.ios-sec` / `#tip` / `.note` / `.pd-hero` 这类没有底色、
        用 padding 把文字顶下去的容器，只加 margin 会把文字再往下推十几 px → 首个时把 padding-top 收掉/收到 12px。 */
.pg > *:first-child { margin-top: 12px; }
/* ① 视图壳 */
.pg > #viewOrder:first-child { margin-top: 0; }
/* ② 零高度空壳 */
.pg > #listWrap:first-child,
.pg > #permWrap:first-child,
.pg > #hintBox:first-child { margin-top: 0; }
/* ②b 空壳被 JS 填满后，真正露出来的是壳里的第一个块 —— 12px 要落到它身上 */
.pg > #listWrap:first-child > *:first-child,
.pg > #permWrap:first-child > *:first-child,
.pg > #hintBox:first-child > *:first-child { margin-top: 12px; }
/* ③ 靠 padding 撑开文字的块（直接子块 / 嵌一层壳的两种写法都要覆盖） */
.pg > .ios-sec:first-child,
.pg > *:first-child > .ios-sec:first-child,
.pg > *:first-child > *:first-child > .ios-sec:first-child { padding-top: 0; }
.pg > #tip:first-child,
.pg > *:first-child + #tip { margin-top: 0; padding-top: 12px; }
.pg > .note:first-child,
.pg > *:first-child + .note { margin-top: 0; padding-top: 12px; }
.pg > .pd-hero:first-child { padding-top: 0; }
/* ②c 壳里第一个块自带 padding 的，12px 要减掉那部分（实测值，改前先看 px19）：
   · role_permissions：`#permWrap > .pg-row` 的格子是 `padding:10px 2px` → 12-10=2
   · search：`#hintBox > .sr-tip` 是 `padding:34px 16px 6px` 的居中空态提示 → 直接把上 padding 收到 12px */
.pg > #permWrap:first-child > .pg-row:first-child { margin-top: 2px; }
.pg > #hintBox:first-child > .sr-tip:first-child { margin-top: 0; padding-top: 12px; }
/* 电竞版数据页：`.fin-head` 是 flex + align-items:flex-end（月份选择器比标题高），
   标题被压到行底、距 .fin-head 顶边还有 5px —— 12 - 5 = 7px 才能落到 14px 基准上。 */
.pg > .fin-head:first-child { margin-top: 7px; }

/* 房间小卡片（工作台 · 2026-09-17 按 UOYU游寓 OMS 原型对齐：白卡片 + **墨色**房间号 + 状态圆点）
   🔴 对齐点只有两处是「看得见」的：① 房间号由**主蓝改为墨色**（原型 rc-no 是黑的）② 字重 700→800。
   几何值（圆角/内边距/gap）原型是 r13/gap8/padding 11-4-9；但**房态盘 6 列布局下由 dashboard 页级样式接管**
   （那里写的是 r10 / padding 8-4-7 / rc-no 13px），所以这两条主要作用在 partner_detail 等 4 列场景。 */
.room-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.room-cell { background:var(--card); border-radius:13px; padding:11px 4px 9px; text-align:center; border:.5px solid var(--sep2); cursor:pointer; box-shadow:0 1px 3px rgba(11,11,12,.04); }
.room-cell:active { background:rgba(118,118,128,.1); }
.room-cell .rc-no { font-size:14px; font-weight:800; color:var(--ink-strong); font-variant-numeric:tabular-nums; }
.room-cell .rc-mid { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:5px; }
.room-cell .rc-dot { width:6px; height:6px; border-radius:50%; flex:none; }
.room-cell .rc-cnt { font-size:10px; color:var(--t2); font-variant-numeric:tabular-nums; }
.room-cell .rc-stt { margin-top:5px; font-size:10px; font-weight:700; }
/* 状态色：空房=绿 / 入住中=橙 / 满员=红（圆点 + 文字同色） */
.room-cell.empty .rc-dot { background:#34C759; }
.room-cell.empty .rc-stt { color:#1D7A38; }
.room-cell.part .rc-dot { background:#FF9500; }
.room-cell.part .rc-stt { color:#B25000; }
.room-cell.full .rc-dot { background:#FF3B30; }
.room-cell.full .rc-stt { color:#C01C28; }
/* 房间详情模态框（iOS17：紧凑标题 + 分组圆角列表） */
.rm-modal { position:fixed; inset:0; z-index:960; display:none; align-items:center; justify-content:center; padding:36px 20px; }
.rm-modal.show { display:flex; }
.rm-modal .rm-mask { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.rm-modal .rm-box { position:relative; width:100%; max-width:360px; max-height:64vh; background:var(--card); border-radius:16px; padding:16px 14px calc(12px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; overflow:hidden; animation:ios-al .25s cubic-bezier(.22,1.4,.36,1); box-sizing:border-box; }
.rm-modal .rm-x { position:absolute; right:10px; top:10px; width:26px; height:26px; border-radius:50%; background:rgba(118,118,128,.14); color:var(--t2); display:grid; place-items:center; cursor:pointer; border:none; font-family:inherit; z-index:2; }
.rm-modal .rm-x svg { width:11px; height:11px; stroke-width:2.4; }
.rm-modal .rm-title { font-size:17px; font-weight:800; letter-spacing:-.2px; color:var(--t1); padding-right:36px; }
.rm-modal .rm-sub { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--t2); margin:3px 0 8px; }
.rm-modal .rm-st-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.rm-modal .rm-st-dot.empty { background:#34C759; }
.rm-modal .rm-st-dot.part { background:#FF9500; }
.rm-modal .rm-st-dot.full { background:#FF3B30; }
.rm-modal .rm-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; margin:0 -14px; padding:0 14px; }
.rm-modal .rm-body .cell { min-height:44px; padding:9px 12px; }
.rm-modal .rm-body .cell .avbox { width:36px; height:36px; font-size:13px; }
.rm-modal .rm-body .cell .t1 { font-size:14px; }
.rm-modal .rm-empty { text-align:center; color:var(--t3); padding:20px 0; font-size:13px; }
.rm-modal .rm-tip { text-align:center; color:var(--t3); font-size:11px; padding:8px 0 2px; }
.rm-modal .rm-tip b { color:var(--blue); font-weight:700; }

/* ================= Inset Grouped 分组列表 ================= */
/* 分组小标题（2026-09-17 按原型对齐：字重 600→700、上间距 22→18px，更紧凑、层级更明确） */
.ios-sec { font-size:12px; font-weight:700; color:var(--t3); letter-spacing:.04em; padding:18px 4px 8px; }
.ios-sec:first-of-type { padding-top:14px; }
.ios-list { background:var(--card); border-radius:12px; overflow:hidden; }
.ios-list .cell { display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--card); min-height:44px; cursor:pointer; position:relative; text-decoration:none; color:var(--t1); }
.ios-list .cell + .cell::before { content:""; position:absolute; top:0; left:56px; right:0; height:.5px; background:var(--sep2); }
.ios-list .cell.plain + .cell.plain::before { left:14px; }
.ios-list .cell:active { background:rgba(118,118,128,.1); }
.ios-list .cell .ic { width:29px; height:29px; border-radius:8px; display:grid; place-items:center; flex:none; }
.ios-list .cell .ic svg { width:15px; height:15px; stroke-width:2.1; }
.ios-list .cell .ct { flex:1; min-width:0; }
/* 2026-09-17 按 UOYU游寓 OMS 原型对齐 cell 密度：t1 16→15px、t2 12→11.5px、cs 14→13px、箭头 14→13px。
   🔴 行高**保持 min-height:44px，不跟原型放到 46px** —— 全站 25 个页面都拿 .cell 当列表行，
      每行 +2px 会让所有列表变长、首屏可视条数变少；44px 又是 iOS 的最小触控高度（本来就在下限）。
      取「文字对齐原型 + 行高不动」这组，是唯一不牺牲信息密度的组合。 */
.ios-list .cell .ct .t1 { font-size:15px; }
.ios-list .cell .ct .t2 { font-size:11.5px; color:var(--t2); margin-top:2px; }
.ios-list .cell .cs { font-size:13px; color:var(--t3); }
.ios-list .cell .arr { display:grid; place-items:center; }
.ios-list .cell .arr svg { width:13px; height:13px; stroke:var(--t3); stroke-width:2; }

/* ================= iOS 控件 ================= */
/* Segmented */
.seg { display:flex; background:rgba(118,118,128,.14); border-radius:9px; padding:2px; margin:6px 0 8px; }
.seg i { flex:1; text-align:center; font-style:normal; font-size:13px; font-weight:500; color:var(--t1); padding:6px 0; border-radius:7px; cursor:pointer; transition:.18s; white-space:nowrap; }
.seg i.on { background:var(--card); box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04); font-weight:600; }
/* Switch */
.ios-sw { width:51px; height:31px; border-radius:16px; background:#E9E9EA; position:relative; cursor:pointer; transition:background .25s; flex:none; display:inline-block; }
.ios-sw::after { content:""; position:absolute; width:27px; height:27px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16); transition:left .28s cubic-bezier(.3,1.6,.4,1); }
.ios-sw.on { background:var(--green); }
.ios-sw.on::after { left:22px; }
/* 设置行内的开关一律靠右（iOS 设置行惯例：标签左、开关推到行尾） */
.input-cell .ios-sw { margin-left:auto; }
/* 搜索栏 */
.ios-search { display:flex; align-items:center; gap:8px; background:rgba(118,118,128,.12); border-radius:10px; padding:0 12px; height:36px; margin-bottom:10px; }
.ios-search svg { width:15px; height:15px; stroke:var(--gray); stroke-width:2; flex:none; }
.ios-search input { flex:1; background:none; border:none; outline:none; color:var(--t1); font-size:16px; font-family:inherit; }
.ios-search input::placeholder { color:var(--t3); }
/* 主按钮 —— 2026-09-17 对齐 `prototypes/UOYU游寓_OMS可操作原型_20260917.html`：
   顶部是「黄底墨字」，主按钮反过来「**墨底黄字**」，同一套品牌语言的阴阳两面。
   底色走 --card-ink（浅 #0B0B0C / 深 #1C1C1E）而不是 var(--brand-ink)：
   黄字在两种主题下都是 #FFD100，但深色下若用纯 --brand-ink 当底会跟 --bg(#000) 糊在一起。 */
.ios-btn { width:100%; border:none; border-radius:12px; height:44px; background:var(--card-ink); color:var(--brand-yellow); font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; }
.ios-btn:active { opacity:.82; }
/* 次按钮：原来只在 .obar 里生效 → 全站 33 处 .ios-btn.plain 落在 .obar 之外时
   会退化成主按钮的蓝底，看着像主操作。改成全局生效。 */
.ios-btn.plain { background:var(--card); color:var(--t2); border:1px solid var(--sep2); }
/* 语义色（原型同样保留这三个变体）：成功绿 / 危险红 / 信息蓝，一律白字 */
.ios-btn.g { background:var(--green); color:#fff; }
.ios-btn.red,
.ios-btn.danger { background:var(--red); color:#fff; }
.ios-btn.blue { background:var(--blue); color:#fff; }
.ios-btn .spin { width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:ios-rot .7s linear infinite; }
@keyframes ios-rot { to { transform:rotate(360deg); } }

/* ================= 数据卡（英雄卡） =================
   2026-09-17 按 UOYU游寓_OMS可操作原型_20260917.html 的 `.balance-card` 对齐：
     蓝渐变卡 → **墨黑卡**；大数字 白 32px/700 → **品牌黄 33px/900**；圆角 16→18、内边距 16→17/18；
     内嵌小格 `.bi` 底 16% → 10%、圆角 10→11、字重 600→800。灰白文字透明度 .82 → .72。
   🔴 底色走 `--card-ink`（浅色=#0B0B0C / 深色=#1C1C1E），**不要写死 var(--brand-ink)**：深色模式 --bg 是纯黑，
      墨黑卡会跟页面糊在一起看不出边界。
   🔴 `.green` 变体保留，但**不再是绿渐变**（那会跟墨黑卡并存显得杂乱）——改成「同款墨黑卡 + 绿色大数字」，
      语义（正向 / 可提现）由数字颜色承载，也就是原型里 `.b-v.up` 的做法。 */
.balance-card { background:var(--card-ink); border-radius:18px; padding:17px 18px; color:#fff; margin-top:12px; box-shadow:0 10px 30px -12px rgba(11,11,12,.55); }
.balance-card .b-l { font-size:12px; color:rgba(255,255,255,.72); font-weight:500; }
.balance-card .b-v { font-size:33px; font-weight:900; letter-spacing:-1px; margin-top:5px; font-variant-numeric:tabular-nums; color:var(--brand-yellow); }
.balance-card .b-v small { font-size:15px; font-weight:600; margin-right:2px; }
.balance-card .b-v.up { color:#6DE09B; }
.balance-card .b-row { display:flex; gap:8px; margin-top:12px; }
.balance-card .b-row .bi { flex:1; background:rgba(255,255,255,.1); border-radius:11px; padding:9px 10px; }
.balance-card .b-row .bi .a { font-size:15px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.balance-card .b-row .bi .b { font-size:9.5px; color:rgba(255,255,255,.62); margin-top:2px; }
.balance-card.green { background:var(--card-ink); box-shadow:0 10px 30px -12px rgba(11,11,12,.55); }
.balance-card.green .b-v { color:#6DE09B; }
/* KPI 2×2 */
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.kpi { background:var(--card); border-radius:12px; padding:13px 14px; position:relative; min-height:84px; }
.kpi .k-l { font-size:12px; color:var(--t2); padding-right:32px; }
.kpi .k-v { font-size:22px; font-weight:700; margin-top:7px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.kpi .k-s { font-size:10px; color:var(--t3); margin-top:3px; }
.kpi .k-ico { width:26px; height:26px; border-radius:8px; background:rgba(0,122,255,.1); display:grid; place-items:center; position:absolute; top:13px; right:14px; }
.kpi .k-ico svg { width:13px; height:13px; stroke:var(--blue); stroke-width:2.2; }
.kpi .k-v.up { color:var(--green-d); }
.kpi .k-v.bad { color:var(--red); }

/* ================= 订单卡 ================= */
.ocard { background:var(--card); border-radius:12px; padding:13px 14px; margin-bottom:9px; cursor:pointer; }
.ocard.gold { border:1px solid rgba(245,177,1,.5); background:linear-gradient(135deg,#FFFDF5,#FFF6E0); }
.ocard .g-tag { display:inline-flex; align-items:center; font-size:9px; font-weight:700; color:#8A6100; background:var(--gold); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:2px; }
.ocard .o-top { display:flex; align-items:flex-start; gap:9px; }
.ocard .o-md { flex:1; min-width:0; }
.ocard .o-t1 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
.ocard .o-t2 { font-size:12px; color:var(--t3); margin-top:3px; }
.ocard .o-r { text-align:right; flex:none; }
.ocard .o-amt { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.ocard .o-amt small { font-size:10px; font-weight:500; color:var(--t3); }
.ocard .o-chip { display:inline-block; font-size:10px; font-weight:600; padding:2px 8px; border-radius:6px; margin-top:4px; }
.chip-blue { color:#0062CC; background:rgba(0,122,255,.12); }
.chip-orange { color:var(--orange-d); background:rgba(255,149,0,.15); }
.chip-green { color:var(--green-d); background:rgba(52,199,89,.14); }
.chip-red { color:var(--red-d); background:rgba(255,59,48,.12); }
.chip-gray { color:#6B6B70; background:rgba(118,118,128,.14); }
.chip-purple { color:#8E2A9E; background:rgba(175,82,222,.13); }
.o-foot { display:flex; gap:8px; margin-top:11px; }
.o-foot .ob { flex:1; text-align:center; font-size:13px; font-weight:500; padding:8px 0; border-radius:9px; cursor:pointer; border:none; font-family:inherit; background:rgba(118,118,128,.12); color:var(--t1); }
.o-foot .ob.primary { background:var(--blue); color:#fff; }
.o-foot .ob.green { background:rgba(52,199,89,.15); color:var(--green-d); }
.o-foot .ob.red { background:rgba(255,59,48,.12); color:var(--red-d); }
.o-foot .ob.orange { background:rgba(255,149,0,.15); color:var(--orange-d); }
/* 进度条 */
.ios-pbar { height:6px; border-radius:3px; background:rgba(118,118,128,.14); overflow:hidden; position:relative; }
.ios-pbar i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:linear-gradient(90deg,#0A84FF,#5AC8FA); transition:width .6s cubic-bezier(.25,.8,.3,1); }

/* ================= 底部 Tab Bar（流内布局，不遮内容） ================= */
.tabbar { flex:none; display:flex; width:100%; padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--tab-blur); backdrop-filter:blur(30px) saturate(1.8); -webkit-backdrop-filter:blur(30px) saturate(1.8); border-top:.5px solid var(--sep2); z-index:160; }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:9.5px; color:var(--gray); font-weight:500; text-decoration:none; cursor:pointer; padding:5px 0 4px; border-radius:16px; transition:background .18s; }
.tabbar a svg { width:23px; height:23px; stroke:var(--gray); stroke-width:1.7; }
/* 选中态「椭圆」跟随顶部背景色 = 品牌黄（2026-09-17）：底栏高亮与顶栏同一套色，
   文字/图标用 --brand-ink（墨色）—— 这里是**恒黄底**，所以 --brand-ink 不受深色模式影响，安全。
   ⚠️ 别写 var(--t1)：它在 body.dark 下翻成近白，黄底上直接看不见。 */
/* 选中态 = iOS 微信式（2026-09-22）：无背景色块，仅变色+加粗——
   浅色=墨色（黄在浅底上看不清，故用 --brand-ink，同顶栏墨字）；深色=品牌黄（同顶栏深色反转约定） */
.tabbar a.on { color:var(--brand-ink); font-weight:700; }
.tabbar a.on svg { stroke:var(--brand-ink); stroke-width:2.1; }
body.dark .tabbar a.on { color:var(--brand-yellow); }
body.dark .tabbar a.on svg { stroke:var(--brand-yellow); }

/* ================= Alert / Sheet / Toast ================= */
.ios-alert { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; padding:40px; }
.ios-alert.show { display:flex; }
.ios-alert .al { width:270px; background:rgba(249,249,249,.96); backdrop-filter:blur(30px); border-radius:14px; overflow:hidden; text-align:center; animation:ios-al .25s cubic-bezier(.22,1.4,.36,1); }
@keyframes ios-al { from { transform:scale(1.15); opacity:0; } to { transform:none; opacity:1; } }
.ios-alert .al .al-t { font-size:17px; font-weight:600; padding:18px 16px 4px; }
.ios-alert .al .al-m { font-size:13px; color:var(--t2); padding:4px 16px 14px; line-height:1.45; }
.ios-alert .al .al-btns { display:flex; border-top:.5px solid var(--sep2); }
.ios-alert .al .al-btns button { flex:1; border:none; background:none; font-size:17px; padding:11px 0; cursor:pointer; font-family:inherit; color:var(--blue); }
.ios-alert .al .al-btns button + button { border-left:.5px solid var(--sep2); }
.ios-alert .al .al-btns button.dest { color:var(--red); font-weight:600; }
.ios-alert .al .al-btns.one button { border-left:none; }
.ios-sheet { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background:rgba(0,0,0,.4); display:none; align-items:flex-end; padding:12px; }
.ios-sheet.show { display:flex; }
.ios-sheet .sh-wrap { width:100%; max-width:440px; margin:0 auto; animation:ios-sh .3s cubic-bezier(.22,1.4,.36,1); }
@keyframes ios-sh { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.ios-sheet .sh-list { background:rgba(249,249,249,.96); backdrop-filter:blur(30px); border-radius:14px; overflow:hidden; }
.ios-sheet .sh-list .sh-title { text-align:center; font-size:12px; font-weight:600; color:var(--t3); padding:12px 16px 2px; }
.ios-sheet .sh-list button { display:flex; align-items:center; gap:11px; width:100%; border:none; background:none; font-size:16px; padding:13px 18px; cursor:pointer; font-family:inherit; color:var(--t1); text-align:left; }
.ios-sheet .sh-list button + button { border-top:.5px solid var(--sep2); }
.ios-sheet .sh-list .sh-thumb { width:22px; height:22px; object-fit:contain; flex:none; }
.ios-sheet .sh-list .sh-ico { width:30px; height:30px; border-radius:8px; background:rgba(0,122,255,.12); color:#007AFF; display:grid; place-items:center; flex:none; }
.ios-sheet .sh-list .sh-ico svg { width:17px; height:17px; }
.ios-sheet .sh-list button .sh-txt { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; flex:1; }
.ios-sheet .sh-list button .sh-lb { color:var(--t1); }
.ios-sheet .sh-list button[data-on] .sh-lb { color:var(--blue); font-weight:600; }
.ios-sheet .sh-list button .sh-sub { font-size:13px; color:var(--t2); font-weight:500; }
.ios-sheet .sh-list button .sh-ok { width:18px; height:18px; color:var(--blue); flex:none; }
.ios-sheet .sh-list button .sh-ok svg { width:18px; height:18px; }
.ios-sheet .sh-list button.dest { color:var(--red); font-weight:600; }
/* 下拉小菜单（IOS.dropMenu · 参考电脑端 UI.menu，紧凑不遮全屏） */
.dm-mask { position:fixed; inset:0; z-index:1090; background:transparent; }
.dm-drop { position:fixed; z-index:1100; min-width:180px; max-width:calc(100vw - 24px);
  background:var(--card); border-radius:13px; padding:5px; box-shadow:0 14px 40px -8px rgba(0,0,0,.28), 0 0 0 .5px var(--sep2);
  opacity:0; transform:scale(.94) translateY(-3px); transform-origin:top right; transition:.14s ease; pointer-events:none; }
.dm-drop.show { opacity:1; transform:none; pointer-events:auto; }
.dm-drop button { display:flex; align-items:center; gap:9px; width:100%; min-height:40px; padding:0 14px;
  border:none; background:none; font-size:14px; color:var(--t1); text-align:left; cursor:pointer;
  font-family:inherit; border-radius:10px; }
.dm-drop button + button { margin-top:1px; }
.dm-drop button:hover, .dm-drop button:active { background:var(--bg); }
.dm-drop .dm-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dm-drop .dm-lb { color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-drop button[data-on] .dm-lb { color:var(--blue); font-weight:600; }
.dm-drop .dm-sub { font-size:11px; color:var(--t3); }
.dm-drop .dm-ok { width:16px; height:16px; color:var(--blue); flex:none; }
.dm-drop .dm-ok svg { width:16px; height:16px; }
.ios-sheet .sh-cancel { width:100%; margin-top:8px; background:rgba(249,249,249,.96); backdrop-filter:blur(30px); border-radius:14px; border:none; font-size:15px; font-weight:600; padding:12px 0; cursor:pointer; font-family:inherit; color:var(--blue); }
.ios-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:120px; z-index:1200; background:rgba(28,28,30,.88); color:#fff; font-size:13px; font-weight:500; padding:9px 20px; border-radius:20px; box-shadow:0 10px 30px -8px rgba(0,0,0,.4); animation:ios-tin .3s cubic-bezier(.22,1.2,.36,1); pointer-events:none; white-space:nowrap; }
@keyframes ios-tin { from { opacity:0; transform:translateX(-50%) scale(.9); } to { opacity:1; transform:translateX(-50%); } }
.ios-toast.bye { transition:.25s; opacity:0; transform:translateX(-50%) scale(.9); }

/* ================= 空态 / Badge ================= */
.empty { text-align:center; padding:46px 0 26px; }
.empty .e-ico { width:58px; height:58px; border-radius:50%; background:rgba(118,118,128,.14); display:grid; place-items:center; margin:0 auto 12px; }
.empty .e-ico svg { width:25px; height:25px; stroke:var(--t3); stroke-width:1.5; }
.empty .e-t { font-size:15px; color:var(--t2); font-weight:600; }
.empty .e-s { font-size:12px; color:var(--t3); margin-top:4px; }
.badge { min-width:20px; height:20px; border-radius:10px; background:var(--red); color:#fff; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
/* 工作台「待审数」角标：2026-09-17 用户口径「用顶部背景黄色」 */
.badge.blue { background:var(--brand-yellow); color:var(--brand-ink); font-weight:700; }
.badge.green { background:var(--green); }
.badge.gray { background:var(--gray); }

/* ================= 登录页 ================= */
.lg-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 32px 70px; min-height:100%; }
.lg-logo { width:76px; height:76px; border-radius:19px; background:linear-gradient(135deg,#007AFF,#5856D6); display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(0,122,255,.55); margin-bottom:16px; }
.lg-logo svg { width:38px; height:38px; stroke:#fff; stroke-width:1.8; }
.lg-t { font-size:26px; font-weight:700; letter-spacing:-.4px; }
.lg-s { font-size:13px; color:var(--t3); margin-top:5px; }
.lg-card { width:100%; margin-top:34px; background:var(--card); border-radius:14px; padding:20px 16px; box-shadow:0 4px 20px -8px rgba(0,0,0,.1); }
.lg-f { margin-bottom:13px; }
.lg-f label { display:block; font-size:12px; color:var(--t3); font-weight:500; margin-bottom:6px; }
.lg-f .in { display:flex; align-items:center; gap:9px; background:var(--bg); border-radius:10px; padding:0 12px; height:46px; border:1px solid transparent; transition:.2s; }
.lg-f .in:focus-within { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,122,255,.14); }
.lg-f .in svg { width:16px; height:16px; stroke:var(--gray); stroke-width:2; flex:none; }
.lg-f .in input { flex:1; background:none; border:none; outline:none; color:var(--t1); font-size:16px; font-family:inherit; }
.lg-f .eye { background:none; border:none; cursor:pointer; padding:4px; }
.lg-f .eye svg { stroke:var(--gray); }
.lg-fp { text-align:center; font-size:12px; color:var(--t3); margin-top:16px; }
.lg-fp b { color:var(--blue); font-weight:600; }

/* ================= 老 Safari 兜底（iOS<14.5 无 flex gap） ================= */
@supports not (gap: 1px) {
  .ln-bar > * { margin-right: 8px; }
  .ln-bar > *:last-child { margin-right: 0; }
  .ios-list .cell > * + * { margin-left: 11px; }
  .balance-card .b-row .bi + .bi { margin-left: 10px; }
  .o-foot .ob + .ob { margin-left: 8px; }
  .seg i + i { margin-left: 2px; }
  .kpis { gap:0; }
  .kpi:nth-child(odd) { margin-right:10px; margin-bottom:10px; }
  .kpi:nth-child(even) { margin-bottom:10px; }
}

/* ================= 订单详情页组件 ================= */
/* 顶部金额卡：与工作台的「收入卡片」(.balance-card) 同款墨黑英雄卡（2026-09-17 用户口径：订单详情最上卡片参考工作台收入卡） */
.amt-card { background:var(--card-ink); border-radius:18px; padding:17px 18px; color:#fff; margin-top:14px; box-shadow:0 10px 30px -12px rgba(11,11,12,.55); }
.amt-card .ac-l { font-size:12px; color:rgba(255,255,255,.72); font-weight:500; }
.amt-card .ac-v { font-size:33px; font-weight:900; letter-spacing:-1px; margin-top:5px; font-variant-numeric:tabular-nums; color:var(--brand-yellow); }
.amt-card .ac-v small { font-size:15px; font-weight:600; margin-right:2px; }
.amt-card .ac-meta { display:flex; gap:16px; margin-top:12px; font-size:11px; color:rgba(255,255,255,.75); flex-wrap:wrap; }
.amt-card .ac-meta b { color:#fff; font-variant-numeric:tabular-nums; font-weight:600; }
/* 时间线 */
.tl-item { display:flex; gap:12px; position:relative; padding:10px 0; }
.tl-item::before { content:""; position:absolute; left:9px; top:34px; bottom:-4px; width:2px; background:var(--sep2); }
.tl-item:last-child::before { display:none; }
.tl-item .tdot { width:20px; height:20px; border-radius:50%; flex:none; margin-top:1px; display:grid; place-items:center; background:rgba(118,118,128,.14); }
.tl-item .tdot svg { width:10px; height:10px; stroke:var(--t3); stroke-width:3; }
.tl-item.done .tdot { background:var(--blue); }
.tl-item.done .tdot svg { stroke:#fff; }
.tl-item .tt { flex:1; }
.tl-item .tt .a { font-size:14px; font-weight:500; color:var(--t3); }
.tl-item.done .tt .a { color:var(--t1); font-weight:600; }
.tl-item .tt .b { font-size:11px; color:var(--t3); margin-top:1px; }
.tl-item .tm { font-size:11px; color:var(--t3); font-variant-numeric:tabular-nums; }
/* 交图核验 */
.photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.photo { border-radius:12px; padding:11px; background:var(--card); }
.photo .ph-t { font-size:11px; color:var(--t3); font-weight:500; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.photo .ph-t svg { width:12px; height:12px; stroke:var(--t3); stroke-width:2; }
.photo .ph-img { height:82px; border-radius:9px; display:grid; place-items:center; position:relative; overflow:hidden; background:rgba(118,118,128,.08); }
.photo .ph-img svg { width:26px; height:26px; stroke:var(--t3); stroke-width:1.5; }
.photo .ph-img .zoom { position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:7px; background:rgba(0,0,0,.55); display:grid; place-items:center; }
.photo .ph-img .zoom svg { width:11px; height:11px; stroke:#fff; stroke-width:2; }
.photo.ok .ph-img { background:rgba(52,199,89,.1); border:1px solid rgba(52,199,89,.3); }
.photo.wait .ph-img { border:1px dashed var(--sep); }
.photo .ph-s { font-size:10px; margin-top:6px; text-align:center; font-weight:500; color:var(--t3); }
.photo.ok .ph-s { color:var(--green-d); }
/* 图片预览 */
.viewer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:900; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.viewer.show { display:flex; }
.viewer .v-big { width:220px; height:220px; border-radius:20px; background:rgba(118,118,128,.2); display:grid; place-items:center; overflow:hidden; }
.viewer .v-big img { width:100%; height:100%; object-fit:contain; }
.viewer .v-big svg { width:66px; height:66px; stroke:var(--t3); stroke-width:1.2; }
.viewer .v-t { font-size:14px; color:#fff; opacity:.85; }
.viewer .v-x { width:128px; border:none; border-radius:12px; padding:11px 0; background:rgba(255,255,255,.16); color:#fff; font-size:15px; font-weight:500; cursor:pointer; font-family:inherit; }

/* ================= 设计稿 v2 新增组件（20260820b） ================= */
/* 通用头像 */
.av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:700; flex:none; }
.av.lg { width:54px; height:54px; font-size:20px; }
.av.sm { width:30px; height:30px; font-size:11px; }
/* 双按钮行（审批 / 详情底部） */
/* 模态按钮行统一（2026-09-25 方案A 用户定）：等宽并排铺满，顺序铁律 取消→删除→主操作 */
.btn-row { display:flex; gap:10px; margin:14px 0 4px; }
.btn-row .ios-btn { flex:1; width:auto; margin:0; height:44px; padding:0; font-size:15px; border-radius:12px; }
.btn-row .ios-btn.plain { background:rgba(118,118,128,.12); border-color:transparent; color:var(--t1); }
body.dark .btn-row .ios-btn.plain { background:rgba(118,118,128,.24); color:#F2F2F7; }
/* 删除键：描边红字不用实心红（避免抢主操作焦点）；#C01C28 深色对比不足 → 翻品牌红 */
.btn-row .ios-btn.del { background:transparent; color:#C01C28; border:.5px solid var(--sep2); }
body.dark .btn-row .ios-btn.del { color:var(--red); border-color:rgba(255,255,255,.16); }
/* 表单输入行（新建订单等） */
.input-cell { position:relative; display:flex; align-items:center; gap:11px; padding:11px 14px; min-height:48px; background:var(--card); }
.input-cell + .input-cell::before { content:""; position:absolute; top:0; left:56px; right:0; height:.5px; background:var(--sep2); }
.input-cell .ic { width:29px; height:29px; border-radius:8px; display:grid; place-items:center; flex:none; }
.input-cell .ic svg { width:15px; height:15px; stroke:#fff; stroke-width:2.1; }
.input-cell .tt { font-size:15px; flex:none; width:70px; }
.input-cell .val, .input-cell input, .input-cell select, .input-cell textarea { flex:1; border:none; outline:none; background:transparent; font-size:15px; color:var(--t1); text-align:right; font-family:inherit; resize:none; }
.input-cell input::placeholder, .input-cell textarea::placeholder { color:var(--t3); }
.input-cell .arr { display:grid; place-items:center; }
.input-cell .arr svg { width:14px; height:14px; stroke:var(--t3); stroke-width:2; }
/* 状态胶囊（列表行右侧） */
.stt { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:14px; flex:none; }
.stt.orange { color:var(--orange-d); background:rgba(255,149,0,.15); }
.stt.green { color:var(--green-d); background:rgba(52,199,89,.14); }
.stt.red { color:var(--red-d); background:rgba(255,59,48,.12); }
.stt.blue { color:#0062CC; background:rgba(0,122,255,.12); }
.stt.purple { color:#8E2A9E; background:rgba(175,82,222,.13); }
.stt.gray { color:#6B6B70; background:rgba(118,118,128,.14); }
/* 底部操作栏（订单详情，流内布局不遮内容） */
.obar { flex:none; display:flex; gap:10px; width:100%; padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--tab-blur); backdrop-filter:blur(30px) saturate(1.8); -webkit-backdrop-filter:blur(30px) saturate(1.8); border-top:.5px solid var(--sep2); z-index:150; }
.obar .ios-btn { flex:1; }
.obar .ios-btn.plain { background:rgba(118,118,128,.14); color:var(--t1); }
.obar .ios-btn.danger { background:var(--red); }
/* 品牌顶栏（主页面统一头部 · UOYU 黑黄头部品牌条 · sticky 吸顶）
   2026-09-17：照搬 UOYU游寓 OMS 原型「头部品牌条（YOU+）」——亮黄底 + 黑字标 + 黑胶囊；
   2026-09-17 二次调整（用户口径）：
     ① 移动端**不要 logo** —— 原 28px 白色芯片 + 站点图标已整体移除（DOM 与 JS 都不再生成）；
     ② 标题里若含字母，**字母后面的文字**按原型 UOYU游寓_OMS可操作原型_20260917.html
        的字标写法处理：原型把字标拆成「粗黑字母 + 小一号灰字后缀」两段
        （`UOYU<span style="color:#8a8f96;font-size:15px;font-weight:700;letter-spacing:2px">游寓</span>`），
        这里取**同一原型头部条的比例**（17px/900 字母 → 11px/#5a5f66 后缀）落成 .sfx。
   品牌内容仍由后台配置驱动（ios.js brandLogo：读站点标题回填，并做「字母段 / 后缀段」拆写）。 */
/* 🔴 2026-09-18 结构变更（用户口径：「移动端/平板端，一级顶部要跟二级顶部一样固定，不管上拉下拉都不影响顶部」）：
   `.tbar` 已从 `.scr` **里面**整体搬出来，成为 `.phone` 的直接子元素 —— 与二级页 `.ios-topnav` 结构完全一致。
   原因：`.scr` 才是滚动容器（`overflow-y:auto` + `overscroll-behavior-y:contain`），
   原来 `.tbar` 在它里面靠 sticky 吸顶，一旦在触屏上「下拉回弹」，整条黄条会跟着橡皮筋一起位移；
   挪到滚动容器**外面**后，它是普通的 flex 流内元素，怎么拉都不动 —— 这是二级页一直以来的行为。
   —— 保留 `position:sticky; top:0` 不是为了吸顶（现在它没有滚动祖先，等价于普通流内元素），
      而是留给 iOS Safari 顶栏取样：Safari 顶栏只认「贴视口边缘的 fixed / sticky 元素」，
      详见下方「Safari 26 顶栏取样条」那段注释。
   `flex:none`：`.phone` 是 flex 纵向容器，明确不参与伸缩，高度恒等于自身内容高（`.scr` 用 flex:1 吃掉剩下的）。 */
.tbar { flex:none; position:sticky; top:0; z-index:90; background:var(--brand-yellow); padding:12px 16px 10px; border-bottom:.5px solid rgba(11,11,12,.08); }
.tbar .brand-row { display:flex; align-items:center; gap:10px; }
.tbar .brand { display:flex; align-items:center; gap:8px; min-width:0; }
.tbar .brand .nm { font-size:17px; font-weight:900; color:var(--brand-ink); letter-spacing:-.3px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 「字母后面的文字」——例：UOYU|游寓社群公益平台，竖线右侧这截走本条。
   取原型头部条里跟字标同行的那截小字的规格（#5a5f66 那一路），并按原型字标的做法补一点字距，
   让「字母段」和「后缀段」在视觉上分成两层。
   字号 12px：用户口径「可以稍微大一点点，但不能大过字母」—— 字母 17px，12px 是「稍微大」这一档；
   ⚠️ 上限是 17px，不能到（到了两层就糊成一层，字标就没层次了）。13px 也验过不溢出，要再大说一声。
   原型 splash 的 15px/#8a8f96/2px 挂在 42px 字母下（0.36×），照搬到 17px 头部会跟字母几乎一样高，所以不照抄。 */
.tbar .brand .nm .sfx { font-size:12px; font-weight:700; color:#5a5f66; letter-spacing:1px; margin-left:5px;
  /* 与字母段「上下居中」（2026-09-17 用户口径）：默认基线对齐会让 12px 后缀明显下沉。
     -1.6px 不是拍脑袋：用 canvas measureText 量实际字形墨迹中心 —— 17px/900 字母段中心在基线上 5.99px，
     12px/700 后缀段中心只在 4.37px，差 1.62px，所以上移 1.6px 让两段墨迹中线重合。
     ⚠️ 这是跟「17px 字母 + 12px 后缀」这一对字号绑定的，改任一个字号都要重新量（不是 (17-12)/2 那种算法）。 */
  position:relative; top:-1.6px; }
.tbar .acts { margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }
.tbar .pill { display:inline-flex; align-items:center; height:34px; max-width:110px; padding:0 13px; font-size:12px; font-weight:700; color:var(--brand-yellow); background:var(--brand-ink); border:none; border-radius:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbar .pill:active { background:#2A2A2C; }
.tbar .ln-ico { width:32px; height:32px; }
.tbar .title { font-size:28px; font-weight:800; letter-spacing:-.8px; margin-top:8px; line-height:1.2; }

/* 手机浏览器顶部那条（iOS 状态栏 / 地址栏区域）的配色
   ============================================================
   2026-09-17 定：iOS Safari（含 iOS 26 / Safari 26）**完全不解析 meta theme-color**，
   它的浏览器顶栏颜色改为「取页面顶部元素的背景色」，实测按 body 背景色取。
   项目里 body 背景是 var(--bg)，会随 body.dark 在 #F2F2F7 / #000000 之间翻转 ——
   于是顶栏跟着白天/夜间变色，却永远不跟品牌黄顶栏走（用户 2026-09-17 报的就是这个）。
   限 ≤520px：超过这个宽度 .phone 两侧会露底（平板/桌面），避免出现黄色边框。
   ⚠️ 改这里要顺手确认 .phone 的 background 仍是 var(--bg)，否则整个页面会变黄。

   2026-09-17 补：一开始图省事把 html+body 整块刷黄，结果底部也黄了
   （`.phone` 之外的缝隙 / 浏览器底栏 / 底部 `.tabbar` 毛玻璃取色都会吃到 body 底色）。
   现在拆成两层：
   · `background-color` 必须仍是**品牌黄** —— Safari 读的是这个**计算值**，改掉顶栏就不黄了；
   · 但实际只画**顶部 320px 一条黄**，往下用 `--bg` 的渐变盖满，
     所以底部缝隙、浏览器底栏、`.tabbar` 毛玻璃取色都看不到黄。
   ⚠️ 不要给 `html` 单独设 background-color：`--bg` 是在 `body.dark` 上被覆盖的，
     `html` 拿到的是 `:root` 那份（深色下仍是 #F2F2F7），会变成浅灰画布；
     现在靠「html 无背景 → body 背景传播到画布」，深色下自动跟着变 #000000（已实测）。

   2026-09-17 再补（用户第 3 轮：「上拉整个页面还是能看到底部的黄色」）：
   ⚠️ 上面那条「html 无背景」的写法**本身就是坑**，已废弃 —— 改成 `html` 带背景（见文件顶部）
   + `html:has(body.dark)` 单独给深色值。原因：
   `html` 透明时 body 的背景会**传播到画布**，而 body 的 `background-color` 是品牌黄；
   下面这条渐变用的是 `no-repeat`、只覆盖 `[320px, body 高度]`，
   **body 盒子之外（也就是画布的下半部分）没有任何东西覆盖背景色 → 纯黄**。
   平时看不见，但 iOS 在 `.scr` 滚到底后会把滚动链传给文档、整页回弹，
   这时露出来的正是那块画布 —— 就是用户看到的「上拉整页能看见底部黄色」。
   实测复现：人为给文档加 400px 溢出、滚到底后采样 body 盒子以下 → `255,209,0`（浅/深色都一样）；
   给 `html` 加上 `--bg` 背景色后 → 浅色 `242,242,247`、深色 `0,0,0`。
   所以现在是三层配合：① `html,body{overscroll-behavior:none}` + `.scr{overscroll-behavior-y:contain}`
   从根上减少整页回弹；② `html` 接管画布底色，露出来也是 `--bg`；③ 下面这条渐变负责盖住 body 自己盒子里的下半部分。

   2026-09-24 终版（用户报「iPhone Safari 刚进工作台/页面切换时底部闪一下黄」）：
   上面 ③ 的渐变方案**废弃**。原因：`background-color`（黄）与 `background-image`（盖黄渐变）是两个绘制层，
   iPhone Safari 在整页跳转（每页都是 index.php?p=… 真加载）换帧的那一瞬先画底色层、渐变晚一帧才铺上
   → 那一帧整个视口纯黄，就是「闪一下黄」；桌面 Chrome 时序不同复现不了（playwright 逐帧采样底部恒 rgba(249,249,249,.92)）。
   现在把「取样色」和「实际画出来的颜色」彻底解耦：body 的 `background-color` 仍是品牌黄
   （Safari 顶栏取的是这个计算值，机制不动），但视觉底色改由 `body::before` 一层
   `position:fixed` 铺满视口画 `--bg`（随 body.dark 自动翻 #000）——随样式第一帧生效，黄色永远被盖住闪不出来。
   注意：老内核不支持 `inset` 简写，必须写 top/left/right/bottom 四边。
   回弹露黄的防护不变：`html` 画布仍是 `--bg`（37-38 行）+ overscroll 三层配合。 */
@media (max-width:520px) {
  html[data-tbar] body {
    /* Safari 顶栏取样的计算值，必须保持品牌黄；实际视觉由 ::before 盖住 */
    background-color: var(--brand-yellow);
  }
  html[data-tbar] body::before {
    content:''; position:fixed; top:0; left:0; right:0; bottom:0;
    background-color: var(--bg); z-index:-1; pointer-events:none;
  }
  /* 深色模式：顶栏反转成纯黑（--bg，2026-10-05 起，原墨底 #0B0B0C 与纯黑页面有色差），
     Safari 顶栏取样跟着翻（否则浏览器条仍是黄的）；
     ::before 的 --bg 在 body.dark 上自动解析为 #000，无需单独写 */
  html[data-tbar] body.dark { background-color: var(--bg); }
}

/* Safari 26 底栏取样的「贴底固定条」（默认不渲染，只在 <html data-tbar> 的主页面启用）
   ============================================================
   机制（2026-09-17 查证并定论）：Safari 26 的**顶栏和底栏各自**向「贴着视口边缘的 fixed / sticky 元素」
   取 background-color —— 顶部要求贴边 ≤4px、底部 ≤3px，宽度都要 ≥80%、高度 >3px；
   **一个合格元素都没有时才回落到根 / body 底色**。
   本项目 `.tbar` 是 sticky 贴顶、且几何上就贴在视口最上沿（供顶栏取样）；底部却没有任何合格元素（`.tabbar` 是 flex 流内元素，不算），
   于是底栏回落成 body 底色 —— 顶栏改成品牌黄之后，底栏就跟着一起黄了
   （用户 2026-09-17 报的「底部导航下面没必要也弄这个效果」）。
   这里补一条 8px 高、贴底的固定条专门喂底栏：颜色取 `.tabbar` 压在 --bg 上的**实际观感色且不透明**
   （半透明取样会得到半透明的底栏，所以必须写不透明色）。
   ⚠️ 别用 ::after 之类的伪元素代替 —— Safari 明确不采样 fixed/sticky 元素上的伪元素；
     也必须是 position:fixed 本身，absolute 子元素同样不被采样。

   2026-09-17 补丁（盖在 .tabbar 之上这件事）：
   `.tabbar` 是 `flex:none` 的**流内元素**（没有 position），它写的 `z-index:160` 对静态元素**不生效**，
   而本条的 `z-index:1` 是定位元素 → 本条实际是**画在 .tabbar 最底部 8px 之上**的（不是被它盖住）。
   所以颜色必须和 `.tabbar` 的**合成色**对齐，实测：
     · 浅色 `--tab-blur:rgba(249,249,249,.92)` 压在 `--bg:#F2F2F7` 上 ≈ rgb(248,248,249)，本条 #F9F9F9 → Δ1；
     · 深色 `--tab-blur:rgba(20,20,22,.92)` 压在 `--bg:#000000` 上 ≈ rgb(18,18,20)，本条 #141416 → Δ2。
   均在不可见范围内。另外这 8px 落在 `.tabbar` 的底部内边距里（padding-bottom:6px+safe-area，
   再叠 `.tabbar a` 的 4px，文字底边在视口底往上 10px），所以不会压到导航文字。
   门限与上面顶栏那条保持一致：只在小屏（≤520px）启用，宽屏下 .phone 两侧会露底，不启用。 */
/* 基础态永不渲染；只有小屏主页面（html[data-tbar]）才点亮 */
.chrome-bottom { display:none; }
@media (max-width:520px) {
  html[data-tbar] .chrome-bottom {
    display:block; position:fixed; left:0; right:0; bottom:0; height:8px;
    background-color: var(--chrome-bottom); pointer-events:none; z-index:1;
  }
}

/* Safari 26 顶栏取样条（二级页专用 · 2026-09-17）
   ============================================================
   二级页顶栏改品牌黄后，浏览器**顶栏**也必须跟着黄，否则又变成「页面顶黄、状态栏灰」。
   主页面走的是「body 底色 = 品牌黄 → 顶栏回落取 body」那条路（见上方注释）；
   二级页**不能照抄**：那样 body 也变黄 → 底栏回落到 body → 底部又黄（且二级页没有 .tabbar 遮挡，
   贴底条会直接压在内容上）。所以二级页改用这条**贴顶固定取样条**：
   它盖在 `.ios-topnav` 最顶部 8px 之上——而顶栏 `padding:8px 12px` 的上边距正好 8px，
   所以盖的是空白 padding，**肉眼完全看不见**。
   因为没有把 body 刷黄，二级页的底栏自然回落成 `--bg`（正好等于页面底色）→ 底部无需任何处理。

   门限与其它取样条一致（≤520px）；z-index 必须高于 `.ios-topnav` 的 90 才不会被它压住（被遮住可能就不被采样）。 */
.chrome-top { display:none; }
@media (max-width:520px) {
  html[data-yellowtop] .chrome-top {
    display:block; position:fixed; top:0; left:0; right:0; height:8px;
    background-color: var(--brand-yellow); pointer-events:none; z-index:95;
  }
  /* 深色模式：二级页顶栏反转成纯黑底，Safari 顶栏取样条同步翻（--bg=页面同色） */
  html[data-yellowtop] body.dark .chrome-top { background-color: var(--bg); }
}

/* 大标题（主页面 · 滚动收缩） */
.large-nav { display:flex; align-items:flex-end; gap:8px; padding:6px 16px 6px; position:sticky; top:0; z-index:80; background:var(--bg); }
.large-nav .ln-t { flex:1; font-size:30px; font-weight:800; letter-spacing:-.8px; line-height:1.2; transition:font-size .25s; }
.large-nav .ln-bar { margin-bottom:5px; }
.large-nav.scrolled { align-items:center; padding:8px 16px 6px; }
.large-nav.scrolled .ln-t { font-size:17px; font-weight:700; letter-spacing:-.3px; }
/* 在线状态点 */
.dot { width:9px; height:9px; border-radius:50%; flex:none; }
/* 页面说明 */
.note { font-size:12px; color:var(--t3); line-height:1.8; padding:14px 4px 6px; }

/* ================= 合伙人头像 / 类型徽章（iOS17） ================= */
.avbox { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; font-weight:700; flex:none; background:#C7C7CC; overflow:hidden; }
.avbox.big { width:64px; height:64px; font-size:24px; }
.avimg { width:100%; height:100%; object-fit:cover; display:block; }
.tbadge { display:inline-block; font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:5px; margin-left:6px; vertical-align:2px; }

/* ================= 合伙人详情 hero ================= */
.pd-hero { display:flex; align-items:center; gap:14px; padding:22px 4px 18px; }
.pd-hd { flex:1; min-width:0; }
.pd-name { font-size:22px; font-weight:800; letter-spacing:-.4px; line-height:1.2; }
.pd-sub { font-size:13px; color:var(--t2); margin-top:5px; }

/* 财务网格 */
.fin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:16px; }
.fin-grid .fin-box { background:var(--card); border-radius:14px; padding:13px 8px 11px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.04); border:.5px solid var(--sep2); }
.fin-grid .fin-box.key { grid-column:1/-1; background:linear-gradient(135deg,rgba(52,199,89,.13),rgba(0,122,255,.07)); border-color:rgba(52,199,89,.25); }
.fin-grid .fb-v { font-size:16px; font-weight:800; color:var(--t1); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-grid .fb-l { font-size:10px; color:var(--t3); margin-top:3px; }

/* ================= 深色模式（localStorage: iosDark） ================= */
body.dark { --bg:#000000; --card:#1C1C1E; --sep:rgba(255,255,255,.22); --sep2:rgba(255,255,255,.12);
  --chrome-bottom:#141416; --card-ink:#1C1C1E;
  --ink-strong:#F2F2F7;
  --t1:#F2F2F7; --t2:rgba(235,235,245,.62); --t3:rgba(235,235,245,.34);
  --nav-blur:rgba(20,20,22,.86); --tab-blur:rgba(20,20,22,.92); }
body.dark .ln-ico { border-color:rgba(255,255,255,.08); box-shadow:0 1px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }

/* ================= 深色模式：顶栏反转（2026-09-21 用户口径；2026-10-05 二次修订） =================
   浅色：品牌黄底 + 墨字（顶栏恒黄、不参与深色）；深色：底色翻**纯黑 var(--bg)**
   → 与页面底色完全一致（2026-10-05 用户报「夜间模式下顶部是深灰、跟夜间页面颜色不一致」：
   原来翻的是 --brand-ink #0B0B0C，比纯黑页面亮一档，Safari 顶栏取样 / PWA 状态栏下
   都看成一条发灰的带子 → 统一改纯黑）。黄字压纯黑对比度更高，可读性不受影响。
   原本压在黄底上的「墨色半透明」交互底色改成「白色半透明」，否则在黑底上会看不见。 */
/* 主页面 .tbar */
body.dark .tbar { background:var(--bg); border-bottom-color:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .tbar .brand .nm { color:var(--brand-yellow); }
body.dark .tbar .brand .nm .sfx { color:rgba(255,209,0,.62); }
body.dark .tbar .title { color:var(--brand-yellow); }
/* 分店/店胶囊：浅=黄字墨底，深=墨字黄底（整组互换） */
body.dark .tbar .pill { color:var(--brand-ink); background:var(--brand-yellow); }
body.dark .tbar .pill:active { background:#E6BD00; }
/* 顶部图标按钮：浅=墨色圆底，深=白色半透明圆底 + 黄图标 */
body.dark .tbar .ln-ico { background:rgba(255,255,255,.14); color:var(--brand-yellow); border-color:transparent; box-shadow:none; }
body.dark .tbar .ln-ico svg { stroke:var(--brand-yellow); }
/* 二级页 .ios-topnav */
body.dark .ios-topnav { background:var(--bg); border-bottom-color:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .ios-topnav .tt { color:var(--brand-yellow); }
body.dark .ios-topnav .back { background:rgba(255,255,255,.14); }
body.dark .ios-topnav .back svg { stroke:var(--brand-yellow); }
body.dark .ios-topnav .ghost { background:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .ios-topnav .ghost:active { background:rgba(255,255,255,.22); }
body.dark .ios-topnav .act-pill { background:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .ios-topnav .ln-ico { background:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .ios-topnav .ln-ico svg { stroke:var(--brand-yellow); }
body.dark .ios-topnav .ios-search { background:rgba(255,255,255,.14); }
body.dark .ios-topnav .ios-search svg { stroke:rgba(255,209,0,.55); }
body.dark .ios-topnav .ios-search input { color:var(--brand-yellow); }
body.dark .ios-topnav .ios-search input::placeholder { color:rgba(255,209,0,.45); }
/* 顶栏圆形「＋」/ 回收站等 act-pill：浅=墨色圆底，深=白色半透明圆底 + 黄图标（主页面 .tbar 也用得到，orders/users 的加号+删除） */
body.dark .tbar .act-pill { background:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark .tbar .act-pill:active { background:rgba(255,255,255,.22); }
/* 分店 / 全站切换胶囊 #branchPill（每页按 id 重定义「墨底黄字」，优先级高过通用 .pill）：深色翻成「黄底墨字」 */
body.dark #branchPill { color:var(--brand-ink); background:var(--brand-yellow); }
body.dark #branchPill:active { background:#E6BD00; }
/* 右上角「＋」建房间 / 加打手（#navAddRoom / #navAddPartner，按 id 重定义墨色）：深色翻成白色半透明圆底 + 黄图标 */
body.dark #navAddRoom, body.dark #navAddPartner { background:rgba(255,255,255,.14); color:var(--brand-yellow); }
body.dark #navAddRoom:active, body.dark #navAddPartner:active { background:rgba(255,255,255,.22); }
/* 桌面端恒定字标（盖在 dock 上方那一截） */
body.dark.desktop .ios-topnav .dt-brand .nm { color:var(--brand-yellow); }
body.dark.desktop .ios-topnav .dt-brand .nm .sfx { color:rgba(255,209,0,.62); }
body.dark .fin-grid .fin-box { box-shadow:0 1px 2px rgba(0,0,0,.25); }

/* ================= 审批胶囊按钮（通过/拒绝） ================= */
.obtn { border:none; font-size:11px; font-weight:700; padding:5px 13px; border-radius:14px; cursor:pointer; font-family:inherit; line-height:1.2; }
.obtn:active { opacity:.75; }
.obtn.ok { color:#1D7A38; background:rgba(52,199,89,.14); }
.obtn.no { color:#C01C28; background:rgba(255,59,48,.11); }
body.dark .obtn.ok { color:#34C759; background:rgba(52,199,89,.18); }
body.dark .obtn.no { color:#FF453A; background:rgba(255,69,58,.16); }

/* ================= 品牌字标后缀（.tbar .brand .nm .sfx） =================
   2026-09-17：移动端头部**不再放 logo**（用户口径），原 `.tbar .brand .logo` / `.logo-img` /
   `.logo.has-img` 三条规则已整体删除。头部品牌区现在只有「字母字标 + 后缀小字」两段纯文字。 */

/* 离店打手：名字删除线 */
.cell .t1.del { text-decoration:line-through; text-decoration-color:var(--t3); }
/* 订单列表：项目分类小徽章 */
.o-proj { display:inline-block; font-size:10px; font-weight:600; line-height:1; padding:3px 7px; border-radius:6px; margin-left:7px; vertical-align:2px; color:#0062CC; background:rgba(0,122,255,.1); }
body.dark .o-proj { color:#409CFF; background:rgba(10,132,255,.14); }

/* 品牌字标：站点标题未配置时隐藏（后台配置后才显示） */
.tbar .brand .nm:empty { display:none; }

/* 订单详情：金额卡上的状态徽章 + 进度条 + 复制按钮 */
.amt-card .ac-st { margin-top:10px; }
.amt-card .ac-st .stt { background:rgba(255,255,255,.22); color:#fff; font-weight:700; }
.amt-card .ac-bar { height:8px; border-radius:4px; background:rgba(255,255,255,.25); margin-top:12px; overflow:hidden; }
.amt-card .ac-bar i { display:block; height:100%; border-radius:4px; background:#fff; font-size:0; transition:width .5s ease; }
.copy-btn { font-size:11px; font-weight:600; color:var(--blue); background:rgba(0,122,255,.1); padding:3px 9px; border-radius:10px; cursor:pointer; flex:none; }

/* ================= 交图核验照片网格 ================= */
.photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px; }
.photo-grid .pg-item { position:relative; border-radius:14px; overflow:hidden; background:var(--card); border:.5px solid var(--sep2); min-height:96px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.photo-grid .pg-item img { width:100%; height:120px; object-fit:cover; display:block; }
.photo-grid .pg-tag { position:absolute; left:0; right:0; bottom:0; font-size:10px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.62)); padding:14px 8px 5px; text-align:center; }
.photo-grid .pg-item.empty b { font-size:13px; color:var(--t2); }
.photo-grid .pg-item.empty span { font-size:11px; color:var(--t3); }
/* 图片放大预览 */
.imgview { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.imgview.show { opacity:1; }
.imgview img { max-width:94%; max-height:88%; border-radius:8px; }

/* ================= 深色模式：弹层背景修复（原固定浅色 -> 深色） ================= */
body.dark .ios-alert .al,
body.dark .ios-sheet .sh-list,
body.dark .ios-sheet .sh-cancel { background:rgba(28,28,30,.96); }

/* ============================================================
   平板 / 宽屏适配（2026-09-18 · 方案 2「全屏多列 + 底部 Tab 居中」）
   ============================================================
   背景：`.phone{max-width:440px;margin:0 auto}` 把 29 个页面锁成手机宽度，
   平板打开就是中间一条、两侧空白。现在分两档放开：
     · ≥768px（平板竖屏 / 折叠屏合盖）→ 外壳铺满，宫格上 3 列
     · ≥1024px（平板横屏 / iPad 12.9） → 内容最大 1440 居中，宫格 4 列

   🔴 为什么所有规则都带 `.phone` 前缀：每个页面的元素是写在**页面自己的 `<style>`** 里，
   而页面 `<style>` 在 ios.css **之后**加载 —— 同权重时后写的页面规则会赢，
   `@media` 本身**不增加权重**。套一层 `.phone` 把权重抬到 (0,2,0)，
   才能压过 `.room-grid{grid-template-columns:repeat(6,1fr)}`（dashboard.html）这类页面规则。
   🔴 房态盘铁律不变：`.room-grid` **任何宽度都保持每行 6 格**，只限最大宽度，不改列数、不写死格子高度。 */


/* ---------- ≥768px：平板竖屏 / 折叠屏合盖 / 手机横屏 ---------- */
@media (min-width:768px) {
  /* 外壳：去掉 440 的锁，整个视口就是应用宽度 */
  .phone { max-width:100%; }
  .pg { padding:2px 24px 26px; }
  /* 顶部品牌条 / 二级页顶栏：左右留白同步放大，避免文字贴边 */
  .tbar { padding:14px 24px 11px; }
  .ios-topnav { padding:8px 20px; min-height:52px; }
  /* 底部 Tab：条本身仍满宽，但每个 tab 限宽居中，别让四个图标横跨全屏 */
  .tabbar { padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px)); justify-content:center; gap:8px; }
  .tabbar a { flex:0 1 168px; max-width:168px; font-size:10px; padding:6px 0 5px; }
  /* 宫格：2 列 → 自适应多列（auto-fit 按卡片数均分，4 张卡不会留孤儿位） */
  .phone .kpis { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
  .phone .photo-grid,
  .phone .photos { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
  /* 九宫格（esports / rooms / room_detail 的 .ha-grid）：列数保持 3 列铺满宽度，
     但格子内的字号跟着放大，否则宽屏下就变成「一行小字躺在一条宽白带里」 */
  .phone .ha-cell { min-height:100px; padding:15px 13px 13px; }
  .phone .ha-cell b { font-size:21px; }
  .phone .ha-cell span { font-size:12px; margin-top:5px; }
  .phone .ha-cell em { font-size:12px; margin-top:8px; }
  /* 房态盘：中档屏先小步放大（≥4 字房号的 .rc-long 也同步抬一档） */
  .phone .room-cell { padding:10px 5px 9px; }
  .phone .room-cell .rc-no { font-size:14px; line-height:18px; }
  .phone .room-cell .rc-no.rc-long { font-size:12px; }
  /* 双栏汇总（rooms .rp-sum / partner_detail .pd-fin）：铺满后两个盒子各自撑开 */
  .phone .rp-sum,
  .phone .pd-fin { gap:12px; }
  /* 登录：卡片限宽居中，输入框不被拉伸 */
  .lg-wrap { padding:0 40px 70px; }
  .lg-card { max-width:440px; }
  /* 各类浮层/弹层：随屏略放宽，别在 1194px 的屏幕上还是 360~440 的小卡 */
  .phone .fm-card,
  .phone .ios-sheet .sh-wrap { max-width:520px; }
  .phone .rm-box,
  .phone .wd-box,
  .phone .rv-box,
  .phone .pck-box,
  .phone .rpk-box,
  .phone .aw-box,
  .phone .trash-box { max-width:520px; }
  .rm-modal .rm-box { max-height:74vh; }
  .empty { padding:60px 0 34px; }
  /* 列表行：touch 目标随屏幕略放大 */
  .ios-list .cell { min-height:48px; }
}

/* ---------- ≥1024px：平板横屏 ---------- */
@media (min-width:1024px) {
  /* 内容最大 1440 居中：iPad 12.9 横屏逻辑宽 1366 → 实测仍是满屏铺满；
     只有在更宽的桌面浏览器里才留边距（一行 1900px 的字没有意义）。
     ⚠️ `.tbar` / `.ios-topnav` 不参与居中：它们是贴顶全宽品牌条（宽 = .phone 宽），
     Safari 顶栏取样要求取样元素宽度 ≥ 视口 80%，居中后会掉到 75% 让取样失效。 */
  .phone .pg { max-width:1440px; margin-left:auto; margin-right:auto; padding:2px 32px 32px; }
  /* 宫格：自适应列的下限随屏宽放大，宽屏自然收敛到 4 列 */
  .phone .kpis { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
  .phone .photo-grid,
  .phone .photos { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  /* 收入卡 / 金额卡：不再限宽，铺满内容列，并改成「左金额 + 右指标」两段式
     —— 单纯拉宽会让「¥12,480」孤零零躺在一条墨色长带里。
     ⚠️ 用 :has(.b-row) 精确命中「标准英雄卡」，避免误伤 profile 的 .me-hero（头像+姓名+箭头） */
  .phone .balance-card:has(.b-row) { display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:28px; padding:20px 24px; }
  .phone .balance-card:has(.b-row) > .b-l { flex:0 0 100%; }
  .phone .balance-card:has(.b-row) > .b-v { flex:1 1 auto; margin:5px 0 0; }
  .phone .balance-card:has(.b-row) > .b-row { flex:1 1 460px; margin-top:0; }
  .phone .balance-card .b-v { font-size:40px; }
  .phone .balance-card .b-l { font-size:13px; }
  .phone .bi { padding:11px 13px; }
  .phone .bi .a { font-size:19px; }
  .phone .bi .b { font-size:11px; }
  /* 订单详情金额卡：同样的两段式 —— 左「订单号+金额」，右补充信息，状态/进度条独占一行 */
  .phone .amt-card { display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:28px; padding:20px 24px; }
  .phone .amt-card > .ac-l { flex:0 0 100%; }
  .phone .amt-card > .ac-v { flex:1 1 auto; margin-top:5px; }
  .phone .amt-card > .ac-meta { flex:1 1 320px; margin-top:0; }
  .phone .amt-card > .ac-st { flex:0 0 100%; margin-top:14px; }
  .phone .amt-card .ac-v { font-size:36px; }
  /* 房态盘：每行恒 6 格（铁律）且铺满内容列 —— 格子尺寸与字号同步放大才不显空 */
  .phone .room-cell { padding:13px 6px 12px; border-radius:12px; }
  .phone .room-cell .rc-no { font-size:16px; line-height:20px; }
  .phone .room-cell .rc-no.rc-long { font-size:13px; }
  .phone .room-cell .rc-mid { gap:4px; margin-top:4px; }
  .phone .room-cell .rc-dot { width:7px; height:7px; }
  .phone .room-cell .rc-cnt,
  .phone .room-cell .rc-stt { font-size:11.5px; }
  /* 九宫格字号再放大一档 */
  .phone .ha-cell { min-height:112px; padding:17px 15px 15px; }
  .phone .ha-cell b { font-size:25px; }
  .phone .ha-cell span { font-size:13px; }
  .phone .ha-cell em { font-size:13px; margin-top:10px; }
  .phone .fin-grid .fb-v { font-size:19px; }
  .tabbar a { flex:0 1 200px; max-width:200px; }
  .empty { padding:72px 0 40px; }
}

/* ============================================================
   桌面端（≥1280px）：左侧浅色 dock 取代底部 tabbar（方案 A · 2026-09-18）
   ============================================================
   背景：手机 `.tabbar` 是流内底栏，桌面端（≥1280）改为左侧固定竖 dock：
   浅色面 + 黄色选中椭圆 + 底部用户区（头像 / 姓名 / 角色·分店 / 退出登录）。
   顶栏（.tbar / .ios-topnav）仍是品牌黄；窄屏/平板是 .phone 里贴顶的流内条，
   桌面态（≥1280）由下方媒体查询改成 fixed 拉通整屏、压在 dock 之上（含 dock 上方那一截）。
   ⚠️ dock 由 desktop.js 在「宽屏且存在 .tabbar」时注入 <aside class="dock"> 并给 body 加 .desktop；
   这里只负责桌面态的样式。窄屏 / 无 tabbar 页面不会出现 .dock（JS 不生成）。 */

/* 桌面顶栏统一的「恒定品牌字标」容器（由 desktop.js 注入到二级页 .ios-topnav）。
   默认隐藏：窄屏下 desktop.js 不生效，避免出现一段无样式文字；仅 ≥1280 桌面态由下方媒体查询打开。 */
.dt-brand { display:none; }

@media (min-width:1280px) {
  /* 外壳左移给 dock 让位（.phone 已在 ≥768 放开 max-width，≥1024 内容居中 1440）
     🔴 与「头部强制固定」同理：这里也必须由**页面结构**判定（有 .tabbar / .ios-topnav 就一定会出 dock），
        不能等 desktop.js 的 body.desktop —— 否则刷新时内容先贴左边、等会话接口回来再整块右移 248px
        （实测第 41 帧 / ~720ms 那一下横跳，比头部跳动更显眼）。
        登录 / 维护等全屏页既没有 .tabbar 也没有 .ios-topnav，不会被命中，布局完全不受影响。 */
  .phone:has(.tabbar), .phone:has(> .ios-topnav) { padding-left:248px; max-width:100%; }
  /* 移动端底栏在桌面态隐藏（由 dock 取代）——同样改由结构判定，
     避免刷新时底部先闪一下底栏、720ms 后再消失。 */
  .phone:has(.tabbar) .tabbar { display:none; }

  .dock {
    position:fixed; left:0; top:56px; bottom:0; width:248px;
    background:var(--card);
    border-right:.5px solid var(--sep2);
    display:flex; flex-direction:column;
    z-index:200; box-sizing:border-box;
    padding:18px 14px calc(16px + env(safe-area-inset-bottom,0px));
  }
  /* ===== 🔴 头部强制固定（用户 2026-09-18 口径：「所有一级头部强制固定，哪怕刷新也不影响他」）=====
     顶部黄条拉通整屏：脱离滚动容器固定全宽，压在 dock 之上（含 dock 上方那一截）。
     ⚠️ 这条原来挂在 `body.desktop` 上，而 `body.desktop` 是 desktop.js 的 buildDock() 才加的，
        且 buildDock() 要等 ND.Session.user 就绪（whenSession 最长轮询 50×80ms=4s）——
        于是**刷新时第一帧**黄条还是窄屏那套「.tbar 在 .scr 里 sticky」：
        既不拉通全屏、也不覆盖 dock 上方那一截，等会话接口回来才「啪」地跳成全宽 fixed。
        现在改挂纯 CSS（只有媒体查询、不依赖任何 JS 类名）→ 首帧即全宽 fixed，刷新不再跳。
     移动端/平板不受影响：本规则整段都在 ≥1280 媒体查询内。 */
  .tbar, .ios-topnav {
    position:fixed; top:0; left:0; right:0; width:100%; z-index:220;
  }
  /* 头部脱离文档流后，滚动容器补上等高留白。
     兜底高度按**实测**取：一级页 .tbar = 60px、二级页 .ios-topnav = 52px
     （2026-09-18 用逐帧探针量出来的，原来统一写 56px → 一级页差 4px 内容被压在黄条下、二级页多空 4px）。
     desktop.js 拿到实测高度后还会写成行内 style 精修，行内优先；这里只保证「会话接口还没回来」时也对齐。
     🔴 必须用 :has() 框定「真有头部的页面」，不能无脑写 `.scr { padding-top:60px }`：
        2026-09-18 起 `.tbar` 与二级页 `.ios-topnav` 一样，都是 `.phone` 的直接子元素、`.scr` 的**兄弟**；
        而登录页这两个都没有，无脑加会把它整页顶出一条空白（实测 scrPt 会从 0px 变 60px）。 */
  .phone:has(> .tbar) > .scr { padding-top:60px; overflow-x:hidden; }
  .phone:has(> .ios-topnav) > .scr { padding-top:52px; overflow-x:hidden; }
  /* ===== 顶栏统一（用户 2026-09-18 口径：标题不随页面变；返回放「交界线右边、右侧最左」）=====
     ① 隐藏二级页随页面变化的页面标题 .tt，改由 .dt-brand 显示恒定站点标题（与主页面同一套字标）
     ② 内容区整体右移到 dock 右缘之后 → 流内最左的 .back 自然落在「交界线右边、右侧内容区最左边」
        （264 = dock 248 + 内容左内边距 16，与下方 .pg 的左沿对齐） */
  /* 🔴 同「头部强制固定」：这两条也是纯布局、且最终态与 JS 版本完全一致，一并脱离 body.desktop
     —— 否则二级页头部第一帧还是「标题居中 + 无左内距」，等 JS 跑完内容再横跳 264px。
     .dt-brand 元素本身仍由 desktop.js 注入（那份 CSS 保持 body.desktop 门控，与注入同时生效）。 */
  .ios-topnav .tt { display:none; }
  .ios-topnav { padding-left:264px; }
  /* 站点标题绝对定位在黄条最左（dock 上方那一截），不参与右侧内容排版 */
  body.desktop .ios-topnav .dt-brand { position:absolute; left:16px; top:0; bottom:0; display:flex; align-items:center; min-width:0; }
  body.desktop .ios-topnav .dt-brand .nm { font-size:17px; font-weight:900; color:var(--brand-ink); letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 后缀段与主页面 .tbar 字标完全同一套参数（灰 #5a5f66 + 上移 1.6px 对齐墨迹中线） */
  body.desktop .ios-topnav .dt-brand .nm .sfx { font-size:12px; font-weight:700; color:#5a5f66; letter-spacing:1px; margin-left:5px; position:relative; top:-1.6px; }
  /* dock 顶部不再放 logo / 标题 */
  .dock .dock-brand { display:none; }
  /* 导航区（撑满中间，可滚动） */
  .dock .dock-nav { display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto; }
  .dock .dock-nav a {
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:11px;
    color:var(--t1); text-decoration:none;
    font-size:15px; font-weight:500;
    -webkit-tap-highlight-color:transparent;
  }
  .dock .dock-nav a svg { width:22px; height:22px; stroke:var(--t2); stroke-width:1.8; flex:none; }
  .dock .dock-nav a .lab { flex:1; min-width:0; }
  /* 选中态：黄色椭圆（与移动端底栏同一套语言；.on 由克隆底栏的 .on 带来） */
  .dock .dock-nav a.on { background:var(--brand-yellow); color:var(--brand-ink); font-weight:700; }
  .dock .dock-nav a.on svg { stroke:var(--brand-ink); stroke-width:2.1; }
  .dock .dock-nav a:not(.on):hover { background:var(--bg); }
  /* 底部用户区 */
  .dock .dock-user {
    display:flex; align-items:center; gap:10px;
    padding:12px 8px 0; margin-top:8px;
    border-top:.5px solid var(--sep2);
  }
  .dock .dock-user .av {
    position:relative; overflow:hidden;
    width:38px; height:38px; font-size:14px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--card-ink); color:var(--brand-yellow);
  }
  .dock .dock-user .av .av-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; border-radius:50%;
  }
  .dock .dock-user .du-meta { flex:1; min-width:0; }
  .dock .dock-user .du-name { font-size:14px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dock .dock-user .du-sub { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dock .dock-logout {
    flex:none; width:38px; height:38px; border-radius:11px;
    border:none; background:rgba(118,118,128,.12); color:var(--t2);
    display:grid; place-items:center; cursor:pointer; font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .dock .dock-logout svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; }
  .dock .dock-logout:active { background:rgba(118,118,128,.22); }
}


/* ============================================================
   模态内容样式统一（2026-09-25 方案A 原型）：浮层标题居中；
   输入行=独立圆角描边卡（行距 8）。组容器 .ios-list 内的输入行
   还原分隔线式（避免双重圆角）。页面级未定义这些属性的照此生效。
   ============================================================ */
.fmodal .fm-t { font-size:17px; font-weight:700; text-align:center; padding:2px 0 12px; }
.fmodal .input-cell { border:.5px solid var(--sep2); border-radius:12px; }
.fmodal .input-cell + .input-cell { margin-top:8px; }
/* 浮层内的 .ios-list 组容器透明化：输入行本身已是独立圆角卡（页面级组容器同特异性会赢，用 !important）。
   ⚠️ 不能加 overflow:visible !important（2026-09-27 修）：会打死页面级「列表内滚」规则
   （room_detail 新增打手 / branches / orders·users·contacts 回收站），长列表溢出卡片、
   尾部行叠在取消/保存按钮上拦截点击。透明化只需 background/border/border-radius。 */
.fmodal .ios-list { background:transparent !important; border:none !important; border-radius:0 !important; }
.fmodal .ios-list .input-cell { margin-top:8px; }
.fmodal .ios-list .input-cell:first-child { margin-top:0; }
/* ============================================================
   模态电脑端居中（2026-09-25 用户定）：≥768px 全部模态上下左右居中。
   页面级 .fmodal 定义 align-items:flex-end，同特异性页面样式后加载会赢 → 用 !important 压制。
   全屏层不参与：cam-modal（相机）、imgview（图片查看）本来就是 inset:0。
   ============================================================ */
@media (min-width:768px){
  .fmodal { align-items:center !important; padding:28px; }
  .fmodal .fm-card { border-radius:18px !important; box-shadow:0 24px 70px rgba(0,0,0,.28); }
  .ios-sheet { align-items:center; padding:28px; }
}

/* ============================================================
   PWA / iOS 独立 App 模式（2026-10-04）
   ------------------------------------------------------------
   加到主屏后（display-mode:standalone）Safari 顶/底浏览器条消失，
   页面变成真正的全屏 App，需要额外处理三件事：

   ① 顶部安全区：刘海/灵动岛会压住顶栏。
      `.tbar`/`.ios-topnav` 加 padding-top = 原值 + safe-area-inset-top。
      ⚠️ 必须写成「加法」而不是直接 `padding-top:env(...)`：
         两者的 padding-top 基准不同（.tbar 是 12px、.ios-topnav 是 8px），
         直接覆盖会把品牌条的原始内距吃掉。变量不存在时 env() 回落 0，
         所以浏览器里跑（非 standalone）这条整体不生效，零副作用。
      ⚠️ dashboard 的 `.tbar` 有 `padding-bottom:68px`（首卡叠压用），
         这里只动 padding-top，不碰 bottom。
      ⚠️ 用 `@supports` + 媒体查询双保险，老内核不认 env() 时整块丢弃。

   ② 底 tabbar：本来就有 `env(safe-area-inset-bottom)`，standalone 下 Home Indicator
      比浏览器模式更高一点，追加 6px 让拇指区更舒服（非 standalone 不生效）。

   ③ 长按菜单 / 选中 / 拖拽：独立 App 里长按图片或文字弹出系统菜单很出戏，
      统一禁掉；但 `<input>/<textarea>` 必须保留可选中（表单要能复制粘贴）。

   ④ `.phone` 在 standalone 下要吃掉整屏：standalone 时 100dvh 已是全屏，
      但 iOS 15 之前的 Safari 没有 dvh → 已有 vh 兜底，这里只补 overflow。
   ============================================================ */
@media (display-mode:standalone) {
  @supports (padding-top:env(safe-area-inset-top)) {
    /* 🔴 必须 !important：各页 <style> 在 ios.css 之后加载，同特异性下页面级会赢
       （dashboard 的 .tbar 就自定义了一整套 padding/background）。 */
    .tbar { padding-top:calc(12px + env(safe-area-inset-top, 0px)) !important; }
    .ios-topnav { padding-top:calc(8px + env(safe-area-inset-top, 0px)) !important; }
    .tabbar { padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px) + 6px) !important; }
  }
}
/* 非 standalone 但同样要禁的（独立 App 之外，浏览器里长按图片弹出「保存图片」也出戏） */
img, .cat-icon, svg { -webkit-touch-callout:none; }
.phone, .tbar, .ios-topnav, .scr, .pg, .ios-list, .ios-card { -webkit-user-select:none; -webkit-user-drag:none; }
input, textarea, select, [contenteditable="true"], .ios-input, .input-cell input { -webkit-user-select:text; -webkit-user-drag:auto; }
/* 独立 App 下禁止 overscroll 露出画布底色之外的东西（ios.css 已有 overscroll-behavior:none，这里只兜 iOS 的橡皮筋白边） */
@media (display-mode:standalone) { body { -webkit-touch-callout:none; } }