/* 源诚物业 · 老板端 H5（1:1 对齐 iOS BossTheme：微信绿 #07c160 · 沉浸式固定壳） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 关键兜底：hidden 属性优先于任何 display 规则（否则弹窗/页面切换会常显） */
[hidden] { display: none !important; }
html { font-size: 16px; height: 100%; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  /* BossTheme.bg #f2f3f7 */
  background: #f2f3f7; color: #1c1c1e;
  /* App 壳关键：文档不滚动（地址栏不收放、无橡皮筋），只有内容区滚 */
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  height: 100%; width: 100%; overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation; /* 禁双击缩放（iOS 无视 user-scalable 时的兜底） */
  text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
input { -webkit-user-select: text; user-select: text; font-family: inherit; }
b { font-weight: 600; }
.muted { color: #86868b; font-size: 12px; font-weight: 600; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; touch-action: manipulation; }

/* ---------- 语义色（BossTheme） ---------- */
.c-brand { color: #07c160; } .c-red { color: #fa5151; }
.c-info { color: #10aeff; } .c-amber { color: #ff9500; }

/* ---------- 登录（iOS 原生：灰底 + 居中图标 + 独立圆角输入框） ---------- */
.auth-view {
  height: 100%; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; background: #f2f3f7; padding: 0 28px;
}
.auth-scroll { margin: auto; width: 100%; max-width: 400px; padding: 52px 0 40px; }
.auth-logo {
  width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 22px;
  background: #07c160; color: #fff; font-size: 34px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.auth-title { text-align: center; font-size: 23px; font-weight: 700; color: #1c1c1e; }
.auth-sub { text-align: center; font-size: 13.5px; color: #86868b; margin-top: 5px; }
.auth-role { text-align: center; font-size: 11.5px; color: #b5b5ba; margin-top: 2px; }
.auth-src { text-align: center; font-size: 12.5px; color: #86868b; margin: 30px 0 14px; }

.field { position: relative; margin-bottom: 12px; }
.field.flex { flex: 1; margin-bottom: 0; }
.field input {
  width: 100%; height: 48px; border: none; outline: none; border-radius: 12px;
  background: #efeff1; padding: 0 14px; font-size: 16px; color: #1c1c1e;
  transition: background .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: #b5b5ba; font-size: 15px; }
#loginPassword, #fgPass, #knPass { padding-right: 46px; }
.field input:focus { background: #fff; box-shadow: 0 0 0 1.5px #07c160; }
.eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #b5b5ba; transition: .15s;
}
.eye.on { color: #07c160; }
.eye:active { transform: translateY(-50%) scale(.9); }
.eye svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.captcha-line { display: flex; gap: 10px; margin-bottom: 12px; }
.captcha-chip {
  width: 104px; height: 48px; flex-shrink: 0; border-radius: 12px;
  background: rgba(7,193,96,.09); color: #069a4d;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; transition: .15s;
}
.captcha-chip:active { transform: scale(.95); }

.btn-primary {
  width: 100%; height: 50px; border-radius: 12px; margin-top: 10px;
  background: #07c160; color: #fff; font-size: 17px; font-weight: 600;
  transition: .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:active { transform: scale(.98); opacity: .92; }
.btn-primary[disabled] { background: rgba(7,193,96,.55); }
.spin {
  display: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: rotate .7s linear infinite;
}
.btn-primary.loading .spin { display: inline-block; }
.btn-primary:active { transform: scale(.98); }
@keyframes rotate { to { transform: rotate(360deg); } }
.auth-tip { text-align: center; color: #b5b5ba; font-size: 12px; margin-top: 16px; line-height: 1.7; }

/* 登录按钮下方入口行：左「重置密码」右「忘记密码」 */
.auth-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.foot-link {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: #07c160; padding: 6px 4px;
  transition: opacity .15s ease;
}
.foot-link:active { opacity: .6; }

/* 忘记密码页：左上返回（iOS 导航栏样式） */
.auth-back {
  display: inline-flex; align-items: center; gap: 2px;
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 15px; color: #07c160; padding: 6px 8px 6px 0; margin-bottom: 2px;
}
.auth-back svg { width: 20px; height: 20px; }
.auth-back:active { opacity: .6; }

/* 短信验证码发送按钮（输入框内右侧，同小眼睛定位体系） */
.code-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #07c160;
  background: rgba(7,193,96,.1);
  border-radius: 9px; padding: 7px 12px; white-space: nowrap;
  min-width: 88px; text-align: center; box-sizing: border-box;
  transition: opacity .15s ease;
}
.code-btn:disabled { color: #b5b5ba; background: rgba(142,142,147,.12); }
.code-btn:not(:disabled):active { opacity: .65; }
/* 验证码输入避开发按钮 */
#fgCode { padding-right: 106px; }

/* ---------- 应用壳（固定布局：顶栏/内容滚动区/tabbar 三段式） ---------- */
#view-app { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.top-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  /* 与页面同底色融为一体（iOS 设置页顶栏观感）：不再用白色毛玻璃，避免与状态栏/灰底割裂 */
  background: #f2f3f7;
}
.top-project { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0; text-align: left; }
.tp-row { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 46vw; }
.tp-row b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-count {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #86868b;
  background: #fff; box-shadow: 0 1px 3px rgba(23,55,105,.06); border-radius: 99px; padding: 1.5px 6px;
}
.top-project:not(.multi) .tp-chev { display: none; }
.tp-chev { width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: #86868b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.top-project:active .tp-row b { opacity: .6; }
/* 黑金身份 chip（iOS 顶栏同款） */
.top-chip {
  font-size: 10px; font-weight: 700; color: #f5d78e; letter-spacing: .2px;
  background: linear-gradient(135deg, #2f3542, #111418);
  border-radius: 99px; padding: 2.5px 9px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-me { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.top-user {
  font-size: 13px; color: #86868b; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 2px;
}
.top-user:active { opacity: .5; }
.top-quit {
  font-size: 13px; font-weight: 700; color: #07c160;
  background: rgba(7,193,96,.07);
  box-shadow: inset 0 0 0 1px rgba(7,193,96,.35);
  border-radius: 99px; padding: 6px 13px; transition: .15s;
}
.top-quit:active { transform: scale(.94); }

#appMain {
  flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px 14px 16px;
}
.page { opacity: 1; }
.page.page-in { animation: fade .28s cubic-bezier(.22,.8,.32,1); }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- 白卡容器（1:1 BossCard：16 圆角 + 双层柔和阴影） ---------- */
.card {
  background: #fff; border-radius: 16px; padding: 15px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(23,55,105,.05), 0 6px 9px rgba(23,55,105,.04);
  position: relative; transition: box-shadow .18s ease, transform .15s ease;
}
/* 顶部色条卡（概况双列卡） */
.card.tline { overflow: hidden; padding-top: 18px; }
.card.tline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.card.tline.red::before { background: #fa5151; }
.card.tline.brand::before { background: #07c160; }

/* 卡片标题（1:1 CardTitle：15pt heavy + 灰色小注） */
.card h3 {
  font-size: 15px; font-weight: 700; color: #1c1c1e; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 4px; min-width: 0;
}
.card h3 .muted { font-weight: 600; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h3-r { margin-left: auto; font-size: 12px; font-weight: 400; color: #86868b; flex-shrink: 0; }
.h3-row { display: flex; align-items: baseline; }
.h3-row .peak { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #07c160; }

/* 说明小字 / 空态 / 页脚 */
.note { font-size: 12.5px; color: #86868b; line-height: 1.7; margin-top: 4px; }
.empty { text-align: center; color: #b5b5ba; font-size: 13.5px; padding: 18px 8px 20px; line-height: 1.55; }
.empty .muted { color: #c7c7cc; font-size: 12px; }
.foot-note { text-align: center; color: #b5b5ba; font-size: 11.5px; margin-top: 8px; }
.link { display: block; width: 100%; text-align: left; font-size: 13.5px; font-weight: 700; color: #07c160; padding-top: 10px; }
.link:active { opacity: .5; }

/* 加载中 / 加载失败重试卡（1:1 ErrorRetryCard） */
.loadbox { display: flex; justify-content: center; padding: 80px 0; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.4px solid #dddfe4; border-top-color: #86868b;
  animation: rotate .7s linear infinite;
}
.err-card { text-align: center; padding: 30px 20px 26px; }
.err-card b { font-size: 15px; font-weight: 600; color: #1c1c1e; display: block; }
.err-card p { font-size: 12.5px; color: #86868b; margin: 10px 0 16px; line-height: 1.7; }
.err-retry {
  display: inline-block; padding: 8px 26px; border-radius: 99px;
  background: rgba(7,193,96,.1); color: #07c160; font-size: 14px; font-weight: 600; transition: .15s;
}
.err-retry:active { transform: scale(.95); }

/* ---------- 英雄卡（1:1 BossHero：微信绿渐变 / 红渐变 + 右上装饰圆） ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 18px 18px 16px; margin-bottom: 12px; color: #fff;
  background: linear-gradient(160deg, #10cd6e 0%, #06ad56 100%);
  box-shadow: 0 7px 15px rgba(6,173,86,.27);
}
.hero::after {
  content: ""; position: absolute; right: -46px; top: -62px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none;
}
.hero.red { background: linear-gradient(160deg, #ff6a5c 0%, #e03430 100%); box-shadow: 0 7px 15px rgba(224,52,48,.27); }
.hero.red::after { background: rgba(255,255,255,.12); }
.hero.compact { padding: 15px 18px 14px; }
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
.hero-head > span:first-child { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.hero-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; flex-shrink: 0; }
.hero-pill.ok { background: rgba(255,255,255,.22); color: #ebfff4; }
.hero-pill.no { background: rgba(0,0,0,.22); color: #ffe9c2; }
.hero-amt { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; position: relative; z-index: 1; }
.hero-amt b {
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  text-shadow: 0 2px 6px rgba(0,40,100,.18); line-height: 1.15;
}
.hero-amt i { font-style: normal; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.82); }
.hero-meta { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.6; position: relative; z-index: 1; }

/* ---------- 统计网格（1:1 StatGrid：2x2 / 3 列灰底圆角块） ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: #efeff1; border-radius: 13px; padding: 11px 12px; min-width: 0; }
.stat em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #86868b; margin-bottom: 3px; white-space: nowrap; }
.stat b { font-size: 17.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-grid.cols3 .stat b { font-size: 16px; }
.stat b i { font-style: normal; font-size: 11px; font-weight: 600; color: #86868b; margin-left: 2px; }

/* ---------- 收款方式列表（1:1 MethodList） ---------- */
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: .5px solid #ededee; }
.m-row:last-child { border-bottom: none; }
.m-row .l { min-width: 0; }
.m-row .l b { font-size: 14.5px; font-weight: 700; display: block; }
.m-row .l span { font-size: 11.5px; font-weight: 500; color: #b5b5ba; display: block; margin-top: 1px; }
.m-row .r { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.m-row .r b { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-row .r i { font-style: normal; font-size: 11px; font-weight: 600; color: #86868b; }

/* ---------- 流水明细（1:1 PayList：金额深绿 #069a4d） ---------- */
.p-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: .5px solid #ededee; }
.p-row:last-child { border-bottom: none; }
.p-row .pl { min-width: 0; flex: 1; }
.p-row .pl b { font-size: 14.5px; font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.p-row .pl .s2 { font-size: 12px; color: #86868b; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .pl .s3 { font-size: 11px; color: #b5b5ba; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .pr { text-align: right; flex-shrink: 0; }
.p-row .pr b { font-size: 16.5px; font-weight: 700; color: #069a4d; font-variant-numeric: tabular-nums; display: block; }
.p-row .pr i { font-style: normal; font-size: 10.5px; color: #b5b5ba; }

/* ---------- 日期导航（1:1 DayBar / MonthBar） ---------- */
.daybar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.db-label { font-size: 13px; font-weight: 700; color: #86868b; flex-shrink: 0; }
.db-arrow {
  width: 34px; height: 34px; border-radius: 10px; background: #e5e5e8;
  color: #07c160; font-size: 21px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .15s;
}
.db-arrow:active { transform: scale(.9); }
.db-arrow.off { color: rgba(60,60,67,.22); background: #efeff1; }
.db-date {
  flex: 1; min-width: 0; height: 38px; border-radius: 11px;
  background: #efeff1; box-shadow: inset 0 0 0 .5px #e1e1e2;
  font-size: 15.5px; font-weight: 600; color: #1c1c1e; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: .15s;
}
.db-date:active { transform: scale(.97); }
.db-today { font-size: 12.5px; font-weight: 700; color: #07c160; flex-shrink: 0; padding: 4px 2px; }
.db-today:active { opacity: .5; }

/* ---------- 分段控件（1:1 BillTabs） ---------- */
.seg { display: flex; gap: 4px; background: #e5e5e8; border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.seg button {
  flex: 1; height: 32px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: #86868b; transition: .18s;
}
.seg button.on { background: #fff; color: #1c1c1e; box-shadow: 0 2px 4px rgba(23,55,105,.10); }

/* ---------- 概况双列卡 / 快捷看账宫格 ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
.duo .card { padding: 13px 14px 12px; }
.duo .card h3 { margin-bottom: 8px; }
.duo-amt { display: flex; align-items: baseline; gap: 2px; }
.duo-amt b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.duo-amt i { font-style: normal; font-size: 11px; color: #86868b; }
.duo-sub { font-size: 11.5px; color: #86868b; margin-top: 2px; }
.duo .link { padding-top: 8px; font-size: 12.5px; }

.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-item {
  text-align: left; background: rgba(120,120,128,.07); border-radius: 13px;
  padding: 12px 13px; transition: .15s;
}
.q-item:active { transform: scale(.97); }
.q-item b { font-size: 14.5px; font-weight: 700; display: block; }
.q-item span { font-size: 11.5px; color: #86868b; display: block; margin-top: 2px; }

/* ---------- 欠费户搜索 / 明细 ---------- */
.search-box {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  padding: 9px 12px; background: #efeff1; border-radius: 11px;
}
.search-box svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: #b5b5ba; stroke-width: 2; stroke-linecap: round; }
.search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 15px; color: #1c1c1e; -webkit-appearance: none; appearance: none;
}
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box input::placeholder { color: #b5b5ba; }
.search-box .clear { border: 0; background: transparent; padding: 4px; color: #b5b5ba; font-size: 14px; line-height: 1; flex-shrink: 0; }

.ar-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: .5px solid #ededee; }
.ar-row:last-of-type { border-bottom: none; }
.ar-row .l { min-width: 0; flex: 1; }
.ar-row .l .r1 { display: flex; align-items: center; gap: 6px; }
.ar-row .l b { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ar-row .l .owner { font-size: 12px; color: #86868b; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-row .r { text-align: right; flex-shrink: 0; }
.ar-row .r b { font-size: 15px; font-weight: 700; color: #fa5151; font-variant-numeric: tabular-nums; display: block; }
.ar-row .r span { font-size: 11px; font-weight: 600; color: #86868b; display: block; margin-top: 2px; }
.ar-row .r span.over { color: #fa5151; }
/* 资产类型徽章（住宅绿 / 车库蓝 / 商铺橙 / 其他灰） */
.kbadge { font-size: 10px; font-weight: 700; padding: 1.5px 6px; border-radius: 99px; flex-shrink: 0; font-style: normal; }
.kbadge.kz { background: rgba(7,193,96,.10); color: #07c160; }
.kbadge.kc { background: rgba(16,174,255,.10); color: #0a8cd0; }
.kbadge.ks { background: rgba(255,149,0,.12); color: #c77700; }
.kbadge.kq { background: #efeff1; color: #86868b; }

.more-btn {
  width: 100%; margin-top: 10px; height: 38px; border-radius: 11px;
  background: rgba(7,193,96,.07);
  box-shadow: inset 0 0 0 1px rgba(7,193,96,.28);
  color: #07c160; font-size: 13px; font-weight: 700; transition: .15s;
}
.more-btn:active { transform: scale(.97); }
.shown-count { text-align: center; color: #b5b5ba; font-size: 11.5px; margin-top: 8px; }

/* ---------- 报表条形图 ---------- */
.trend { margin-top: 2px; }
.trend-bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; margin-top: 6px; }
.tb { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.tb i { width: 100%; border-radius: 3px; background: rgba(7,193,96,.22); height: var(--h, 3px); transform-origin: bottom; animation: growY .6s ease-out; }
.tb.on i { background: #07c160; }
.tb span { font-size: 9.5px; color: #b5b5ba; line-height: 1; white-space: nowrap; }
.tb.on span { color: #07c160; font-weight: 700; }
@keyframes growY { from { transform: scaleY(0); } }
.trend-info { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; font-size: 11.5px; flex-wrap: wrap; }
.trend-info b { color: #07c160; font-weight: 700; }
.trend-info span { font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-info em { font-style: normal; color: #86868b; }

.dtr { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dtr-l { width: 44px; font-size: 12.5px; color: #86868b; font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
.dtr-l.on { color: #07c160; font-weight: 700; }
.dtr-bar { flex: 1; height: 8px; border-radius: 4px; background: #efeff1; overflow: hidden; }
.dtr-bar i { display: block; height: 100%; border-radius: 4px; background: rgba(7,193,96,.3); transform-origin: left; animation: growX .55s ease-out; }
.dtr-bar i.on { background: #07c160; }
.dtr-v { width: 64px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dtr-v.on { color: #07c160; }
@keyframes growX { from { transform: scaleX(0); } }

.mb-row { margin-top: 11px; }
.mb-row:first-child { margin-top: 2px; }
.mb-head { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.mb-head .lab { font-size: 13.5px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-head .pct { font-size: 11.5px; font-weight: 700; color: #86868b; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.mb-head .amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.mb-head .unit { font-size: 11px; color: #86868b; flex-shrink: 0; }
.mb-bar { height: 7px; border-radius: 4px; background: #efeff1; margin-top: 5px; overflow: hidden; }
.mb-bar i { display: block; height: 100%; border-radius: 4px; background: rgba(7,193,96,.85); transform-origin: left; animation: growX .55s ease-out; }

/* ---------- 通用行（事项统计等） ---------- */
.line-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: .5px solid #ededee; }
.line-row:last-child { border-bottom: none; }
.line-row .l { min-width: 0; }
.line-row .l b { font-size: 14.5px; font-weight: 700; display: block; }
.line-row .l .muted { display: block; margin-top: 2px; }
.line-row .r { text-align: right; flex-shrink: 0; }
.line-row .r b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
  background: #efeff1; color: #86868b; margin-left: 6px; vertical-align: 1px;
}
.badge.red { background: rgba(250,81,81,.10); color: #fa5151; }
.badge.green { background: rgba(7,193,96,.10); color: #07c160; }
.badge.orange { background: rgba(255,149,0,.12); color: #c77700; }
.badge.blue { background: rgba(16,174,255,.10); color: #0a8cd0; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; height: 32px; padding: 0 15px; border-radius: 99px;
  background: #fff; color: #86868b; font-size: 13px;
  box-shadow: 0 1px 4px rgba(23,55,105,.06); transition: .15s;
}
.chip.on { background: #07c160; color: #fff; font-weight: 600; }
.chip:active { transform: scale(.95); }

/* ---------- tabbar（1:1 iOS：毛玻璃 + 微信绿高亮） ---------- */
.tabbar {
  flex-shrink: 0; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: .5px solid rgba(0,0,0,.06);
  box-shadow: 0 -4px 18px rgba(23,55,105,.04);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px; color: #b5b5ba; text-decoration: none; transition: .15s;
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.tab svg circle[fill], .tab svg path[fill] { stroke: none; }
.tab span { font-size: 10.5px; font-weight: 600; }
.tab.on { color: #07c160; }
.tab.on svg { transform: scale(1.04); }
.tab:active { transform: scale(.92); opacity: .75; }
.tab.on span { font-weight: 700; }

/* ---------- toast（1:1 iOS 胶囊：成功绿 / 失败红） ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 99;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  max-width: 86vw; padding: 11px 16px; border-radius: 99px;
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 5px 16px rgba(0,0,0,.12), inset 0 0 0 .5px rgba(0,0,0,.06);
  animation: toastIn .32s cubic-bezier(.34,1.3,.5,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }
.toast.ok { background: #f0faf2; color: #1e6b34; }
.toast.bad { background: #fff1f0; color: #b3261e; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 底部 sheet（切换项目 / 账号信息） ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.32);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .24s ease;
}
.sheet-mask.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 520px; max-height: 78%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 44px rgba(0,0,0,.14);
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 14px);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,.24,1);
}
.sheet-mask.show .sheet { transform: translateY(0); }
.sh-grab { width: 36px; height: 5px; border-radius: 3px; background: #e1e1e2; margin: 6px auto 4px; }
/* 欠费户详情 sheet */
.sheet-pad { padding: 4px 16px 2px; }
.sheet-grip { width: 36px; height: 5px; border-radius: 3px; background: #e1e1e2; margin: 6px auto 10px; }
.sh-spin.big { width: 26px; height: 26px; margin: 26px auto; }
.ar-row.tap { cursor: pointer; transition: background .15s, transform .12s; }
.ar-row.tap:active { transform: scale(.985); background: #f7f8fa; }
.ar-chev { width: 14px; height: 14px; flex-shrink: 0; color: #c7c7cc; margin-left: 2px; }
.ard .card { margin-top: 10px; padding: 12px 14px; }
.ard-head { text-align: center; padding: 4px 0 2px; }
.ard-t { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ard-t b { font-size: 17px; font-weight: 700; }
.ard-sub { font-size: 12px; color: #86868b; margin-top: 3px; }
.ard-amt { margin-top: 8px; }
.ard-amt b { font-size: 34px; font-weight: 700; color: #fa5151; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ard-amt i { font-size: 12px; font-style: normal; color: #86868b; margin-left: 4px; }
.ard-meta { font-size: 11.5px; color: #86868b; margin-top: 3px; }
.ard-item, .ard-asset, .ard-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: .5px solid #ededee; }
.ard-item:last-child, .ard-asset:last-child, .ard-pay:last-child { border-bottom: none; }
.ard-item .n, .ard-asset .n, .ard-pay .n { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ard-item .n b, .ard-asset .n b, .ard-pay .n b { font-size: 13.5px; font-weight: 700; }
.ard-item .n i, .ard-asset .n i, .ard-pay .n i { font-size: 11px; font-style: normal; color: #b5b5ba; }
.ard-item .v, .ard-asset .v, .ard-pay .v { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.ard-item .v b { font-size: 14px; font-weight: 700; color: #fa5151; font-variant-numeric: tabular-nums; }
.ard-item .v i, .ard-asset .v i, .ard-pay .v i { font-size: 11px; font-style: normal; color: #b5b5ba; }
.ard-asset .n { flex-direction: row; align-items: center; gap: 6px; }
.ard-asset.cur .n b::after { content: "本单"; font-size: 9.5px; font-weight: 700; color: #0a8cd0; background: rgba(16,174,255,.10); border-radius: 99px; padding: 1.5px 6px; margin-left: 6px; }
.ard-asset .v b.ok { font-size: 13px; color: #06ad56; font-weight: 700; }
.ard-asset .v b.bad { font-size: 14px; color: #fa5151; font-weight: 700; font-variant-numeric: tabular-nums; }
.ard-pay .v b { font-size: 13.5px; font-weight: 700; color: #069a4d; font-variant-numeric: tabular-nums; }
.ard-pay.voided .n b, .ard-pay.voided .v b { opacity: .55; text-decoration: line-through; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 10px; }
.sh-title b { display: block; font-size: 17px; font-weight: 700; color: #1c1c1e; }
.sh-title span { display: block; font-size: 12px; color: #86868b; margin-top: 2px; }
.sh-spin {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #e5e5e8; border-top-color: #07c160; animation: rotate .7s linear infinite;
}
/* 项目行 */
.ps-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 20px; text-align: left; transition: .15s;
}
.ps-row:active { background: #f7f7f8; }
.ps-row:disabled { opacity: .55; }
.ps-row + .ps-row { border-top: .5px solid #ededee; }
.ps-l { min-width: 0; }
.ps-name { font-size: 15.5px; font-weight: 700; color: #1c1c1e; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-badge { font-size: 10px; font-weight: 700; color: #07c160; background: rgba(7,193,96,.1); border-radius: 99px; padding: 1.5px 6px; font-style: normal; flex-shrink: 0; }
.ps-slug { font-size: 12px; color: #b5b5ba; display: block; margin-top: 2px; }
.ps-check { width: 20px; height: 20px; color: #07c160; flex-shrink: 0; }
/* 账号信息 */
.pf-head { display: flex; flex-direction: column; align-items: center; padding: 14px 20px 16px; }
.pf-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(145deg, #22d372, #06ad56); color: #fff;
  font-size: 23px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(6,173,86,.25);
}
.pf-head b { display: block; font-size: 17px; font-weight: 700; margin-top: 10px; }
.pf-head span { display: block; font-size: 13px; color: #86868b; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pf-rows { padding: 0 20px; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: .5px solid #ededee; font-size: 14px; }
.pf-row:last-child { border-bottom: none; }
.pf-row span { color: #86868b; flex-shrink: 0; }
.pf-row b { font-weight: 600; text-align: right; min-width: 0; }
.pf-quit {
  display: block; width: calc(100% - 40px); margin: 14px 20px 0; height: 48px;
  border-radius: 13px; background: #fff1f0; color: #fa5151;
  font-size: 15px; font-weight: 700; transition: .15s;
  box-shadow: inset 0 0 0 .5px rgba(250,81,81,.18);
}
.pf-quit:active { transform: scale(.98); }

/* ---------- 下拉刷新指示（毛玻璃胶囊） ---------- */
.pull-tip {
  position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%;
  transform: translate(-50%, 0); z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 99px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1); border: .5px solid rgba(0,0,0,.05);
  font-size: 12.5px; color: #86868b; white-space: nowrap;
  transition: opacity .2s ease; pointer-events: none; opacity: 0;
}
.pull-tip.show { opacity: 1; }
.pull-spin {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #e5e5e8; border-top-color: #86868b;
  transform: rotate(0deg);
}
.pull-tip.ready .pull-spin { border-top-color: #07c160; }
.pull-tip.ready { color: #07c160; font-weight: 600; }
.pull-tip.loading .pull-spin { animation: rotate .7s linear infinite; border-top-color: #07c160; }

/* ---------- iOS 风格确认弹窗 ---------- */
.ios-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300;
  background: rgba(0,0,0,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: maskIn .2s ease;
}
/* 弹窗打开时锁定内容区滚动（App 行为） */
body.modal-open #appMain, body.modal-open .auth-view { overflow: hidden; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.ios-alert {
  width: 100%; max-width: 290px; background: rgba(255,255,255,.96);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: alertIn .22s cubic-bezier(.2, 1.1, .4, 1);
}
@keyframes alertIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.ia-body { padding: 22px 20px 20px; text-align: center; }
.ia-body b { display: block; font-size: 16px; color: #1c1c1e; font-weight: 700; }
.ia-body p { margin-top: 7px; font-size: 13.5px; color: #515154; line-height: 1.5; }
.ia-btns { display: flex; border-top: .5px solid rgba(0,0,0,.1); }
.ia-btn { flex: 1; height: 48px; font-size: 16px; color: #007aff; transition: background .12s; }
.ia-btn:first-child { border-right: .5px solid rgba(0,0,0,.1); }
.ia-btn:active { background: rgba(0,0,0,.05); }
.ia-btn.danger { color: #ff3b30; font-weight: 600; }

/* ---------- iOS 滚轮日期选择器（液态玻璃抽屉） ---------- */
.wheel-mask {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0,0,0,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s ease;
  display: flex; align-items: flex-end; justify-content: center;
}
.wheel-mask.show { opacity: 1; }
.wheel-sheet {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.96) 26%);
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border-radius: 26px 26px 0 0;
  border: .5px solid rgba(255,255,255,.9);
  box-shadow: 0 -8px 44px rgba(0,0,0,.16);
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 14px);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,.24,1);
}
.wheel-mask.show .wheel-sheet { transform: translateY(0); }
.ws-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 6px; }
.ws-head button { border: none; background: none; font-size: 15.5px; padding: 6px 10px; }
.ws-cancel { color: #86868b; }
.ws-ok { color: #07c160; font-weight: 700; }
.ws-ok:active, .ws-cancel:active { opacity: .5; }
.ws-title b { font-size: 15px; font-weight: 600; color: #1c1c1e; }
.wheel-box { position: relative; display: flex; height: 220px; margin: 2px 0 6px; }
.wheel-col { flex: 1; height: 100%; overflow: hidden; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.wheel-col:active { cursor: grabbing; }
.wheel {
  position: absolute; left: 0; right: 0; top: 0; will-change: transform;
  -webkit-mask-image: linear-gradient(transparent 2%, #000 24%, #000 76%, transparent 98%);
  mask-image: linear-gradient(transparent 2%, #000 24%, #000 76%, transparent 98%);
}
.w-item {
  height: 44px; line-height: 44px; text-align: center;
  font-size: 19px; font-weight: 500; color: #1c1c1e;
  font-variant-numeric: tabular-nums; transform-origin: center center;
}
.ws-highlight {
  position: absolute; left: 6px; right: 6px; top: calc(50% - 23px); height: 46px;
  border-radius: 13px; pointer-events: none; z-index: 5;
  background: rgba(120,120,128,.1);
  border: .5px solid rgba(255,255,255,.75);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.55), 0 1px 4px rgba(0,0,0,.05);
}
.ws-today {
  width: 100%; height: 44px; border: none; border-radius: 14px;
  background: rgba(7,193,96,.09); color: #07c160;
  font-size: 15px; font-weight: 600; transition: transform .15s ease, opacity .15s;
}
.ws-today:active { transform: scale(.97); opacity: .7; }

/* ---------- 横屏刘海安全区 ---------- */
@media (orientation: landscape) {
  #appMain {
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  .tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .top-bar {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}

/* ---------- 桌面端居中 ---------- */
@media (min-width: 600px) {
  .auth-view { align-items: flex-start; }
  .auth-scroll { padding-top: 72px; }
  .tabbar { border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.06); }
}

/* ===== 免物业费列表（0 元免单事项）===== */
.stat-waive { cursor: pointer; }
.waive-card {
  background: #fff;
  border: 1px solid #ffd4d0;
  border-left: 4px solid #fa5151;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  transition: box-shadow .15s ease;
}
.waive-card:active { transform: scale(.985); }
.waive-card.read { border-left-color: #c8c8cd; border-color: #ededee; opacity: .82; }
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wc-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-t b { font-size: 14.5px; }
.wc-detail {
  margin: 8px 0 0;
  font-size: 13px;
  color: #555;
  line-height: 1.55;
  background: #faf7f6;
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
}
.wc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.wc-foot .muted { font-size: 12px; }
.wc-readat { font-size: 12px; color: #07c160; font-weight: 600; white-space: nowrap; }
.wc-read-btn {
  border: none;
  background: linear-gradient(135deg, #0ac26a, #07c160);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(7, 193, 96, .28);
  white-space: nowrap;
  cursor: pointer;
}
.wc-read-btn:active { transform: scale(.94); }
.wc-read-btn:disabled { opacity: .55; }

/* 备案页脚（流内版）：每页内容底部、tabbar 上方 */
.beian-inline {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; margin-top: 18px; padding: 8px 12px 6px;
  font-size: 11px; line-height: 1.6; color: rgba(60,60,67,.42);
}
.beian-inline .bi-dot { color: rgba(60,60,67,.22); margin: 0 1px; }
.beian-inline a {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(60,60,67,.42); text-decoration: none;
}
.beian-inline a:active { color: rgba(60,60,67,.72); }
.beian-inline .bi-ico { flex: none; display: block; }

/* ===== v17 缴费到期分布（概况卡 + 点击年份展开逐月） ===== */
.exp-rows { display: grid; gap: 8px; }
.exp-year {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center;
  background: #fff; border: 1px solid #ececf0; border-radius: 14px;
  padding: 11px 13px 13px; cursor: pointer; text-align: left; width: 100%; transition: .15s ease;
}
.exp-year:active { transform: scale(.985); }
.exp-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.exp-line b { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.exp-b { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.exp-b.is-cur { background: #e8f1ff; color: #1677ff; }
.exp-b.is-top { background: #e7f9ee; color: #07c160; }
.exp-b.is-past { background: #f5f5f7; color: #86868b; }
.exp-amt { font-size: 14.5px; font-weight: 700; color: #1d1d1f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-sub { grid-column: 1 / -1; font-size: 11.5px; color: #86868b; }
.exp-bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: #f0f0f3; overflow: hidden; }
.exp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #07c160, #06ad56); }
.exp-months { display: grid; gap: 6px; margin: 2px 0 4px; animation: expIn .18s ease; }
@keyframes expIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.exp-m {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  background: #f7fcf9; border: 1px solid #e3f4ea; border-radius: 12px; padding: 9px 12px 11px;
}
.exp-m .exp-line b { font-size: 13.5px; font-weight: 700; }
.exp-m .exp-amt { font-size: 13px; font-weight: 700; }
.exp-m .exp-sub { font-size: 11px; }
.exp-m .exp-bar { height: 4px; }

/* ===== v19 稳重版内容升级（布局不变，只调卡内信息与到期分布进度条/标签） ===== */
.duo-sub b { color: #1c1c1e; font-weight: 700; }
.duo-rate { height: 4px; border-radius: 99px; background: #eef0f3; margin-top: 6px; overflow: hidden; }
.duo-rate i { display: block; height: 100%; border-radius: 99px; background: #07a654; }
/* 到期分布：合计行 / 标签统一灰绿 / 进度条单色 / 已过期提示行 */
.exp-sum { display: flex; align-items: baseline; gap: 8px; background: #f6f7f9; border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; font-size: 12px; color: #86868b; }
.exp-sum b { font-size: 17px; font-weight: 700; color: #1c1c1e; font-variant-numeric: tabular-nums; }
.exp-sum-hh { margin-left: auto; }
.exp-b { font-weight: 600; border-radius: 6px; padding: 1.5px 6px; }
.exp-b.is-cur { background: #eef1f5; color: #4a5566; }
.exp-b.is-top { background: #e9f6ee; color: #0a8a47; }
.exp-b.is-past { background: #f3f3f5; color: #8e8e93; }
.exp-bar { height: 6px; background: #f0f1f4; }
.exp-bar i { background: #3fb877; }
.exp-year.open { border-color: #cfe9da; }
.exp-sub { display: flex; align-items: center; gap: 4px; }
.exp-more { margin-left: auto; color: #8e8e93; font-weight: 600; }
.exp-m { width: 100%; text-align: left; cursor: pointer; background: #fafbfc; border-color: #eceef1; }
.exp-m:active { background: #f2f4f6; }
.exp-m .exp-bar i { background: #8fd1ad; }
.exp-od { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fdf5f4; font-size: 12px; color: #6e4a46; line-height: 1.5; }
.exp-od b { color: #c0392b; font-weight: 700; }
.exp-note { font-size: 11px; color: #a1a1a6; margin-top: 10px; }
/* 名单 sheet */
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; position: sticky; top: -6px; background: #fff; z-index: 1; }
.sheet-head b { font-size: 16px; font-weight: 700; }
.sheet-x { width: 36px; height: 36px; border-radius: 50%; background: #f2f3f7; color: #86868b; font-size: 14px; }
.exp-list { padding: 0 16px 6px; }
.exp-list-sum { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #86868b; background: #f6f7f9; border-radius: 11px; padding: 9px 12px; margin-bottom: 4px; }
.exp-list-sum b { color: #1c1c1e; font-size: 13px; }
.exp-li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: .5px solid #ededee; }
.exp-li .l { min-width: 0; }
.exp-li .l b { display: block; font-size: 14.5px; font-weight: 700; }
.exp-li .l span, .exp-li .r span { display: block; font-size: 11.5px; color: #a1a1a6; margin-top: 1px; }
.exp-li .r { text-align: right; flex-shrink: 0; }
.exp-li .r b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-li .r b i { font-style: normal; font-size: 10.5px; color: #86868b; margin-left: 1px; }
.exp-li .r span.c-red { color: #c0392b; font-weight: 700; } .exp-li .r span.c-amber { color: #b26a00; font-weight: 700; }

/* ===== v20 数字字体与标题间距（仅样式，布局不变） ===== */
:root { --num-font: -apple-system, "SF Pro Display", "SF Pro Text", "DIN Alternate", "Helvetica Neue", "Roboto", "PingFang SC", sans-serif; }
.hero-amt b, .duo-amt b, .m-row .r b, .stat b, .exp-amt, .exp-sum b, .exp-li .r b, .exp-sub, .duo-sub,
.hero-meta, .db-date, .tp-count, .exp-list-sum, .note, .h3-r {
  font-family: var(--num-font); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
#appMain b, #appMain td { font-variant-numeric: tabular-nums; }
/* 卡片标题与数字间距统一收紧 */
.card h3 { margin-bottom: 8px; }
.duo .card h3 { margin-bottom: 6px; }
.hero-amt { margin-top: 6px; }

/* ===== 字体品质（仅排版：系统字体栈 / 抗锯齿 / 等宽数字；不改布局、颜色、间距） ===== */
:root { --yc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
html body, html body.theme-work { font-family: var(--yc-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }
table, th, td, input[type="number"], [class*="amount"], [class*="money"], [class*="amt"], [class*="num"], [class*="total"], [class*="price"] { font-variant-numeric: tabular-nums; }

/* ===== v23 价格审批（折扣 / 免单）：首页独立卡片（缴费到期分布上方） ===== */
/* 卡片本体：白卡 + 红顶条（价格审批 = 钱上的事，红色警示） */
.card.dch { overflow: hidden; padding-top: 16px; }
.card.dch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #fa5151; }
/* 卡头：标题（含待审批红徽章）+ 折扣设定胶囊按钮 */
.dch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dch-head h3 { margin: 0; flex: 1; min-width: 0; }
.dch-badge {
  display: inline-block; vertical-align: 2px; margin-left: 7px;
  background: #fa5151; color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; letter-spacing: .2px;
  animation: dcPulse 2.4s ease-in-out infinite;
}
@keyframes dcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 81, 81, .30); } 50% { box-shadow: 0 0 0 5px rgba(250, 81, 81, 0); } }
.dch-rate-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  background: #efeff1; color: #1c1c1e; border: none; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; transition: transform .13s ease, opacity .13s;
}
.dch-rate-btn svg { width: 14px; height: 14px; color: #07c160; }
.dch-rate-btn:active { transform: scale(.94); opacity: .75; }
/* 免审线说明行 */
.dc-sub { margin: -2px 0 10px; font-size: 12px; color: #86868b; line-height: 1.6; }
.dc-sub b { color: #1c1c1e; font-weight: 650; }
/* 空态：浅灰圆角框居中灰字（卡内嵌套，不用白卡套白卡） */
.dch-empty {
  background: #f7f8fa; border-radius: 12px; padding: 14px 12px;
  text-align: center; font-size: 12.5px; color: #b5b5ba; margin: 10px 0;
}
.dch-empty span { display: block; font-size: 11.5px; margin-top: 3px; color: #c8c8cd; }
/* 审批历史小节头：虚线分隔 + 左标题右计数 */
.dch-hist-head {
  display: flex; align-items: baseline; gap: 6px;
  border-top: 1px dashed #e5e5ea; margin-top: 14px; padding-top: 12px;
  font-size: 13.5px; font-weight: 700; color: #1c1c1e;
}
.dch-hist-head .h3-r { margin-left: auto; }
/* 待审批红卡 / 历史灰卡（白卡内浅色嵌套，iOS 分组列表感） */
.dc-card {
  background: #fff5f4; border: 1px solid #ffd4d0; border-left: 4px solid #fa5151;
  border-radius: 14px; padding: 13px 14px; margin: 10px 0;
  transition: transform .15s ease;
}
.dc-card:active { transform: scale(.985); }
.dc-card.history { background: #f7f8fa; border-color: #ececf0; border-left-color: #c8c8cd; margin: 0 0 10px; }
.dc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dc-top b { font-size: 14.5px; line-height: 1.45; }
.dc-amts {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  background: rgba(255, 255, 255, .8); border-radius: 11px; padding: 10px 12px; margin-top: 10px;
}
.dc-amts > div { min-width: 0; }
.dc-amts em { display: block; font-style: normal; font-size: 11px; color: #a1a1a6; }
.dc-amts b {
  display: block; font-size: 15.5px; font-weight: 700; color: #1c1c1e; margin-top: 1px;
  font-family: var(--num-font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dc-card.history .dc-amts { background: #fff; }
.dc-line { margin: 9px 0 0; font-size: 12.5px; color: #555; }
.dc-reason {
  margin: 8px 0 0; font-size: 13px; color: #555; line-height: 1.55;
  background: #fff; border-radius: 8px; padding: 8px 10px; word-break: break-all;
}
.dc-card.history .dc-reason { background: #fff; }
.dc-reject-note {
  margin: 6px 0 0; font-size: 12.5px; color: #d0453f; line-height: 1.5;
  background: rgba(250, 81, 81, .07); border-radius: 8px; padding: 7px 10px; word-break: break-all;
}
.dc-meta { margin: 8px 0 0; font-size: 11.5px; color: #a1a1a6; line-height: 1.55; }
.dc-btns { display: flex; gap: 10px; margin-top: 11px; }
.dc-ok, .dc-no {
  flex: 1; border: none; border-radius: 11px; padding: 10px 0;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .12s ease, opacity .12s;
}
.dc-ok {
  background: linear-gradient(135deg, #0ac26a, #07c160); color: #fff;
  box-shadow: 0 4px 12px rgba(7, 193, 96, .28);
}
.dc-no { background: #fff; color: #fa5151; border: 1px solid #ffd4d0; }
.dc-ok:active, .dc-no:active { transform: scale(.96); }
.dc-ok:disabled, .dc-no:disabled { opacity: .55; }

/* 驳回理由 sheet */
.rj-body { padding: 4px 20px 22px; }
.rj-note {
  width: 100%; box-sizing: border-box; border: 1px solid #dcdce0; border-radius: 12px;
  padding: 11px 13px; font-size: 14px; line-height: 1.55; resize: none; background: #fafafa;
}
.rj-note:focus { border-color: #07c160; background: #fff; outline: none; }
.rj-count { text-align: right; font-size: 11.5px; color: #a1a1a6; margin-top: 5px; }
.rj-save {
  width: 100%; border: none; border-radius: 13px; padding: 13px 0; margin-top: 12px;
  background: linear-gradient(135deg, #ff6a5c, #e03430); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 14px rgba(224, 52, 48, .26);
  transition: transform .12s ease;
}
.rj-save:active { transform: scale(.97); }
.rj-save:disabled { opacity: .55; }

/* 免审折扣线 sheet */
.rt-body { padding: 4px 20px 22px; }
.rt-note { font-size: 12.5px; color: #86868b; line-height: 1.65; margin: 0 0 12px; }
.rt-note b { color: #07c160; }
.rt-input {
  display: flex; align-items: center; gap: 8px;
  background: #fafafa; border: 1px solid #dcdce0; border-radius: 13px; padding: 12px 15px;
}
.rt-input:focus-within { border-color: #07c160; background: #fff; }
.rt-input input {
  flex: 1; min-width: 0; border: 0; background: transparent; font-size: 22px; font-weight: 700;
  font-family: var(--num-font); font-variant-numeric: tabular-nums; outline: none; color: #1c1c1e;
}
.rt-input input::placeholder { color: #c8c8cd; font-weight: 600; }
.rt-unit { font-size: 15px; font-weight: 700; color: #86868b; flex-shrink: 0; }
.rt-tip { font-size: 12px; color: #07c160; margin: 8px 2px 0; line-height: 1.55; min-height: 18px; }
.rt-save {
  width: 100%; border: none; border-radius: 13px; padding: 13px 0; margin-top: 12px;
  background: linear-gradient(135deg, #0ac26a, #07c160); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 14px rgba(7, 193, 96, .26);
  transition: transform .12s ease;
}
.rt-save:active { transform: scale(.97); }
.rt-save:disabled { opacity: .55; }
.rt-clear-wrap { text-align: center; margin: 10px 0 0; }
.rt-clear {
  border: 0; background: none; color: #a1a1a6; font-size: 12.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer; padding: 6px 8px;
}
.rt-clear:active { color: #fa5151; }

/* ===== 价格审批卡 v2（与工作台价格申请同语言） ===== */
/* 类型徽章：免单红 / 折扣橙 */
.dc-kind {
  flex-shrink: 0; display: inline-flex; align-items: center;
  border-radius: 99px; padding: 3px 9px; font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: .2px; white-space: nowrap;
}
.dc-kind.waive { background: linear-gradient(135deg, #ff6a5c, #fa5151); }
.dc-kind.disc { background: linear-gradient(135deg, #ff9f40, #ff7a00); }
/* 少收金额红色 */
.dc-amts b.dc-save { color: #fa5151; }
/* 原因块小标签 */
.dc-reason em {
  display: block; font-style: normal; font-size: 10.5px; color: #b5b5ba;
  letter-spacing: .5px; margin-bottom: 2px;
}
/* 挂起说明条 */
.dc-hang {
  margin: 8px 0 0; font-size: 11.5px; color: #9a5a00; line-height: 1.55;
  background: #fff7ec; border-radius: 8px; padding: 6px 10px;
}
/* 免审线状态行：可点击 */
.dc-sub[data-rate] { cursor: pointer; transition: opacity .12s; }
.dc-sub[data-rate]:active { opacity: .55; }
.dc-rl-chip {
  display: inline-block; vertical-align: 1px; margin-right: 6px;
  border-radius: 99px; padding: 2px 8px; font-size: 11px; font-weight: 700;
  background: #efeff1; color: #86868b;
}
.dc-rl-chip.ok { background: #e8f8ed; color: #07c160; }
/* 待审批卡按钮：驳回左（次要）、同意右（主要） */
.dc-btns .dc-ok { order: 2; }
.dc-btns .dc-no { order: 1; }

/* 折扣设定 sheet v2：规则三行卡 + 快捷档位 chips */
.rt-rules { margin: 0 0 14px; display: grid; gap: 8px; }
.rt-rule {
  display: flex; gap: 9px; align-items: flex-start;
  background: #f7f8fa; border-radius: 12px; padding: 10px 12px;
  font-size: 12px; color: #555; line-height: 1.6;
}
.rt-rule i {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 700;
  color: #86868b; background: #efeff1; margin-top: 1px;
}
.rt-rule.ok i { background: #e8f8ed; color: #07c160; }
.rt-rule.no i { background: #fff0ef; color: #fa5151; }
.rt-rule span { flex: 1; min-width: 0; }
.rt-rule b { color: #1c1c1e; font-weight: 650; }
.rt-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rt-chip {
  border: 1px solid #e5e5ea; background: #fff; color: #555;
  border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  transition: transform .12s ease, opacity .12s;
}
.rt-chip:active { transform: scale(.94); opacity: .75; }
.rt-chip.on { background: #07c160; border-color: #07c160; color: #fff; }

/* ===== 价格审批 v3：已处理收进「审批记录」入口（首页一行，点开 sheet） ===== */
.dch-hist-entry {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 12px 0 2px; padding: 11px 13px;
  background: #f7f8fa; border: 1px solid #ececf0; border-radius: 12px;
  font: inherit; text-align: left; cursor: pointer;
  transition: transform .12s ease, opacity .12s;
}
.dch-hist-entry:active { transform: scale(.98); opacity: .7; }
.dch-hist-entry .dhe-l { min-width: 0; }
.dch-hist-entry .dhe-l b { display: block; font-size: 13.5px; font-weight: 700; color: #1c1c1e; }
.dch-hist-entry .dhe-l em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 11.5px; color: #a1a1a6; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dch-hist-entry .dhe-r { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: #07c160; }
.dch-hist-none {
  margin: 12px 0 2px; padding: 11px 13px; text-align: center;
  background: #f7f8fa; border-radius: 12px;
  font-size: 12px; color: #b5b5ba;
}
/* 审批记录 sheet：内容区限高滚动 */
.dh-body { padding: 4px 16px 18px; max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dh-body .dh-list { padding-bottom: 2px; }
.dh-body .dc-card.history { margin: 0 0 10px; }
.dh-body .more-btn { margin: 2px auto 4px; }
/* 记录卡内状态徽章行 */
.dc-hist-st { margin: 8px 0 0; }
.dc-hist-st .badge { margin-right: 6px; }

/* ===== 审批记录详情：卡内入口按钮 + 详情 sheet 行式排版 ===== */
.dc-detail-btn {
  display: block; width: 100%; margin-top: 10px; padding: 8px 0;
  border: 1px solid #e5e5ea; border-radius: 10px; background: #fff;
  color: #07c160; font-size: 13px; font-weight: 600;
  transition: transform .12s ease, opacity .12s;
}
.dc-detail-btn:active { transform: scale(.97); opacity: .75; }
.hd-body { padding: 4px 18px 22px; max-height: 68vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hd-state {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; text-align: center;
}
.hd-state.ok { background: #e8f8ed; color: #07c160; }
.hd-state.wait { background: #fff7ec; color: #9a5a00; }
.hd-state.no { background: #fff0ef; color: #fa5151; }
.hd-sec {
  background: #f7f8fa; border-radius: 12px; padding: 10px 14px;
  margin: 0 0 12px;
}
.hd-sec > em {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  color: #a1a1a6; letter-spacing: 1px; margin-bottom: 6px;
}
.hd-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.hd-row:last-child { border-bottom: 0; }
.hd-row em { flex-shrink: 0; font-style: normal; font-size: 12.5px; color: #86868b; }
.hd-row b { flex: 1; min-width: 0; text-align: right; font-size: 13px; font-weight: 600; color: #1c1c1e; word-break: break-all; }


/* ===== v27 文案/交互/反馈 ===== */
.boss-foot {
  margin-top: 20px; padding: 4px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.boss-slogan {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: #6e6e73; text-align: center;
}
.boss-fb {
  appearance: none; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #07c160;
  background: rgba(7,193,96,.08);
  box-shadow: inset 0 0 0 1px rgba(7,193,96,.28);
  border-radius: 99px; padding: 7px 16px;
  transition: transform .15s ease, opacity .15s ease;
}
.boss-fb:active { transform: scale(.94); opacity: .8; }
.beian-inline { margin-top: 2px; padding-top: 2px; }

/* 账号页反馈按钮 */
.pf-pw {
  display: block; width: calc(100% - 32px); margin: 14px 16px 4px;
  appearance: none; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #07c160;
  background: rgba(7,193,96,.08);
  box-shadow: inset 0 0 0 1px rgba(7,193,96,.28);
  border-radius: 14px; padding: 13px 16px;
  transition: transform .15s ease;
}
.pf-pw:active { transform: scale(.98); }

/* 修改密码 sheet 表单 */
#cpForm { padding: 4px 16px 22px; }
#cpForm .btn-primary { margin-top: 6px; }

.pf-fb {
  display: block; width: calc(100% - 32px); margin: 4px 16px 10px;
  appearance: none; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #07c160;
  background: rgba(7,193,96,.08);
  box-shadow: inset 0 0 0 1px rgba(7,193,96,.28);
  border-radius: 14px; padding: 13px 16px;
  transition: transform .15s ease;
}
.pf-fb:active { transform: scale(.98); }

/* 反馈 sheet */
.fb-body { padding: 4px 16px 22px; }
.fb-lead { margin: 0 0 12px; font-size: 13.5px; color: #86868b; line-height: 1.5; }
.fb-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: .5px solid #ededee;
  text-decoration: none; color: inherit;
}
.fb-row:active { opacity: .65; }
.fb-row span { font-size: 13.5px; color: #86868b; }
.fb-row b { font-size: 15px; font-weight: 700; color: #1c1c1e; font-variant-numeric: tabular-nums; }
.fb-copy {
  display: block; width: 100%; margin-top: 14px;
  appearance: none; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff;
  background: #07c160; border-radius: 14px; padding: 13px 16px;
  transition: transform .15s ease, opacity .15s ease;
}
.fb-copy:active { transform: scale(.98); opacity: .9; }
.fb-tip { margin: 12px 0 0; font-size: 11.5px; color: #a1a1a6; text-align: center; line-height: 1.5; }

/* 登录身份行：与新 slogan 对齐 */
.auth-role {
  text-align: center; font-size: 12px; font-weight: 700;
  color: #07c160; margin-top: 6px; letter-spacing: .2px;
}

/* 轻量按压反馈：可点行 */
.m-row:active, .ar-row:active, .p-row:active, .line-row:active {
  background: rgba(0,0,0,.025);
}