/*
 * skin-j.css —— 业主 2026-10-17 最后定的 **J2 + J3 跟手机深浅换**（中间说过 J1 + J2、J1 + J3，同天改两次）：
 *   深色 → 每一屏 J2；浅色 → 每一屏 J3。J1 玻璃那几块留着（没屏再说 skin:'j1'），想换回去在首页写回 skin:'j1'（风格档案「J 简约版」· 排版初稿 https://claude.ai/artifact/5jzzsbyZARFwTzxhdx7EXR）
 *
 *   J1 安静玻璃：首页那几屏（<html data-skin="j1">）—— 深底两团静的柔光，卡是薄玻璃，只有主键亮青
 *   J2 纯净深色：其余每一屏（<html data-skin="j2">，屏不说就穿这身）—— 纯色底，没有光团，只有主键一个颜色
 *
 *   J3 纯净浅色：手机是浅色模式（或「我的」里选了浅）→ 每一屏都穿这身：白底深字，太阳底下、工地上看得清
 *   深 / 浅跟 App 原来那套 theme 一样认：data-theme 明说的优先，没说就照手机（prefers-color-scheme）
 *
 * 只改 token 和少数几样外观；排版、大小、算数一样不动。旧的 skin-cyber.css 留着（风格档案记着，想换回去改屏上那个名字）。
 */
/* ── 深色：J2（其余屏）· J1（首页）── */
:root[data-theme="dark"][data-skin] {
  --bg:   #0c0f14;
  --s1:   #151a21;
  --s2:   #1b2129;
  --s3:   #232a33;
  --line: #222932;
  --line-soft: #1a2028;
  --fg:   #eef1f4;
  --fg2:  #97a2ae;
  --fg3:  #6b7581;
  --brand:      #5fd8e6;
  --brand-dim:  #3a9fab;
  --brand-ink:  #00242a;
  --brand-wash: #5fd8e61f;
  --ok:   #5fd8e6;
  --bar-bg: #0c0f14eb; --tabbar-bg: #0c0f14f2;
  background: var(--bg); color-scheme: dark;
}
:root[data-theme="dark"][data-skin="j1"] {
  --bg:   #070b14;
  --s1:   #ffffff10;
  --s2:   #ffffff18;
  --s3:   #ffffff22;
  --line: #ffffff1c;
  --line-soft: #ffffff12;
  --fg:   #eef3ff;
  --fg2:  #a5b2cc;
  --brand:      #7ff0ff;
  --brand-dim:  #4fb9c6;
  --brand-wash: #7ff0ff1f;
  --bar-bg: #070b14b3; --tabbar-bg: #070b14cc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin] {
  --bg:   #0c0f14;
  --s1:   #151a21;
  --s2:   #1b2129;
  --s3:   #232a33;
  --line: #222932;
  --line-soft: #1a2028;
  --fg:   #eef1f4;
  --fg2:  #97a2ae;
  --fg3:  #6b7581;
  --brand:      #5fd8e6;
  --brand-dim:  #3a9fab;
  --brand-ink:  #00242a;
  --brand-wash: #5fd8e61f;
  --ok:   #5fd8e6;
  --bar-bg: #0c0f14eb; --tabbar-bg: #0c0f14f2;
  background: var(--bg); color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-skin="j1"] {
  --bg:   #070b14;
  --s1:   #ffffff10;
  --s2:   #ffffff18;
  --s3:   #ffffff22;
  --line: #ffffff1c;
  --line-soft: #ffffff12;
  --fg:   #eef3ff;
  --fg2:  #a5b2cc;
  --brand:      #7ff0ff;
  --brand-dim:  #4fb9c6;
  --brand-wash: #7ff0ff1f;
  --bar-bg: #070b14b3; --tabbar-bg: #070b14cc;
  }
}
:root[data-theme="dark"][data-skin="j1"] body {
  background:
    radial-gradient(50% 35% at 25% 10%, #1fb6c966, transparent 70%) fixed,
    radial-gradient(50% 40% at 85% 75%, #2a6bff55, transparent 70%) fixed,
    var(--bg);
}
:root[data-theme="dark"][data-skin="j1"] .card, :root[data-theme="dark"][data-skin="j1"] .tabbar, :root[data-theme="dark"][data-skin="j1"] .topbar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
:root[data-theme="dark"][data-skin="j1"] .card { box-shadow: inset 0 1px 0 #ffffff33; }
:root[data-theme="dark"][data-skin="j1"] .btn.primary { box-shadow: inset 0 1px 0 #ffffffaa, 0 10px 18px -10px #7ff0ff99; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin="j1"] body {
  background:
    radial-gradient(50% 35% at 25% 10%, #1fb6c966, transparent 70%) fixed,
    radial-gradient(50% 40% at 85% 75%, #2a6bff55, transparent 70%) fixed,
    var(--bg);
  }
  :root:not([data-theme="light"])[data-skin="j1"] .card, :root:not([data-theme="light"])[data-skin="j1"] .tabbar, :root:not([data-theme="light"])[data-skin="j1"] .topbar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  }
  :root:not([data-theme="light"])[data-skin="j1"] .card { box-shadow: inset 0 1px 0 #ffffff33; }
  :root:not([data-theme="light"])[data-skin="j1"] .btn.primary { box-shadow: inset 0 1px 0 #ffffffaa, 0 10px 18px -10px #7ff0ff99; }
}
/* ── 浅色：J3（每一屏都是，首页也是）── */
:root[data-skin][data-theme="light"] {
  --bg:   #f6f8f9;
  --s1:   #ffffff;
  --s2:   #eef1f3;
  --s3:   #e4e8eb;
  --line: #dfe4e7;
  --line-soft: #eceff1;
  --fg:   #13222c;
  --fg2:  #4f5d66;
  --fg3:  #7d8a94;
  --brand:      #0a6875;
  --brand-dim:  #0b6572;
  --brand-ink:  #ffffff;
  --brand-wash: #0e7c8c1a;
  --ok:   #0a6875;
  --warn: #8a5300; --danger: #a8370a; --warn-wash: #a865001a; --danger-wash: #c2410c14;
  --glass: #ffffffcc; --glass-thin: #ffffff99; --brand-line: #a8d6dc; --warn-line: #ecd3a5; --danger-line: #f1c2b0; --floor: #eceff1;
  --bar-bg: #f6f8f9eb; --tabbar-bg: #fffffff2;
  background: var(--bg); color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin]:not([data-theme="dark"]) {
  --bg:   #f6f8f9;
  --s1:   #ffffff;
  --s2:   #eef1f3;
  --s3:   #e4e8eb;
  --line: #dfe4e7;
  --line-soft: #eceff1;
  --fg:   #13222c;
  --fg2:  #4f5d66;
  --fg3:  #7d8a94;
  --brand:      #0a6875;
  --brand-dim:  #0b6572;
  --brand-ink:  #ffffff;
  --brand-wash: #0e7c8c1a;
  --ok:   #0a6875;
  --warn: #8a5300; --danger: #a8370a; --warn-wash: #a865001a; --danger-wash: #c2410c14;
  --glass: #ffffffcc; --glass-thin: #ffffff99; --brand-line: #a8d6dc; --warn-line: #ecd3a5; --danger-line: #f1c2b0; --floor: #eceff1;
  --bar-bg: #f6f8f9eb; --tabbar-bg: #fffffff2;
  background: var(--bg); color-scheme: light;
  }
}
[data-skin] .btn.primary:hover:not(:disabled) { background: var(--brand); filter: brightness(1.08); }

/* ── 首页（home.js）：大数 · 两颗大键 · 四个小键 · 等你处理 ── */
.home { display: grid; gap: var(--sp-3); }
.home .hero { padding: var(--sp-3) var(--sp-4); border-radius: 18px; background: var(--s1); border: 1px solid var(--line); display: grid; gap: 2px; }
.home .hero .k { font-size: var(--f-xs); color: var(--fg2); }
.home .hero .big { font: 600 var(--f-2xl)/1.1 var(--font-num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home .hero .big small { font-size: var(--f-md); color: var(--brand); margin-right: 6px; }
.home .keys { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.home .key { min-height: 92px; border-radius: 18px; padding: var(--sp-3); display: grid; align-content: space-between; gap: 6px; text-align: left; font: inherit; color: var(--fg); background: var(--s1); border: 1px solid var(--line); cursor: pointer; }
.home .key b { font-size: var(--f-lg); }
.home .key small { font-size: var(--f-xs); color: var(--fg2); }
.home .key.a { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.home .key.a small { color: inherit; opacity: .75; }
.home .key.big { min-height: 120px; }
.home .key:active { transform: scale(.98); }
.home .key:focus-visible, .home .mini button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.home .mini button { display: grid; justify-items: center; gap: 4px; background: none; border: 0; color: var(--fg2); font: inherit; font-size: var(--f-xs); cursor: pointer; padding: 0; position: relative; }
.home .mini .ic { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); color: var(--fg); }
.home .mini em { position: absolute; top: -4px; right: 8px; font: 600 10px var(--font-num); font-style: normal; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 5px; }
.home .lbl { font-size: var(--f-xs); color: var(--fg2); display: flex; justify-content: space-between; padding: 0 2px; }
.home .list { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 2px var(--sp-3); }
.home .li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.home .li:last-child { border-bottom: 0; }
.home .li .m { display: grid; line-height: 1.3; min-width: 0; }
.home .li .m small { color: var(--fg2); font-size: var(--f-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .tagp { font-size: var(--f-xs); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.home .tagp.w { color: var(--warn); } .home .tagp.b { color: var(--danger); } .home .tagp.o { color: var(--brand); }

/* 人事九格 */
.home .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.home .tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: var(--sp-3) var(--sp-1); border-radius: 16px; background: var(--s1); border: 1px solid var(--line); color: var(--fg); font: inherit; font-size: var(--f-sm); cursor: pointer; text-align: center; }
.home .tile:active { transform: scale(.97); }
.home .tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home .tile em { position: absolute; top: 6px; right: 8px; font: 600 10px var(--font-num); font-style: normal; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 5px; }

/* 底下正中间那颗「＋ 开单」 */
.tabbar button.plus .tabic { background: var(--brand); color: var(--brand-ink); border-radius: 14px; width: 40px; height: 40px; display: grid; place-items: center; margin-top: -10px; }
.tabbar button.plus .tabic svg { width: 22px; height: 22px; }

/* 开单那一张（从下面弹上来） */
.sheet-dlg { margin: auto auto 0; width: min(560px, 100%); max-width: 100%; border: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--fg); padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
.sheet-dlg::backdrop { background: #000a; }
.sheet-dlg .row1 { display: grid; gap: var(--sp-2); }
.sheet-dlg .opt { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); align-items: center; text-align: left; font: inherit; color: var(--fg); background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-3); cursor: pointer; }
.sheet-dlg .opt.a { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.sheet-dlg .opt .ic { width: 24px; height: 24px; grid-row: span 2; }
.sheet-dlg .opt small { font-size: var(--f-xs); opacity: .75; }

/* logo「在想」（业主 10-17 暂定 ③+）：报价在算 / 出 PDF 时浮在底下，回来就收；不挡手 */
.think { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; pointer-events: none;
  background: #070b14; border: 1px solid #ffffff2e; color: #eef3ff; font-size: var(--f-sm);
  box-shadow: 0 10px 30px #0008; opacity: 0; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.think.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .think { transition: none; } }

/* 开 App 的动画（业主 10-17）：全屏深底 + 大 logo 在想 + Aldora；准备好了淡出 */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(50% 35% at 30% 20%, #1fb6c955, transparent 70%), radial-gradient(50% 40% at 80% 80%, #2a6bff44, transparent 70%), #070b14;
  transition: opacity .6s ease, transform .6s ease; }
.intro.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
/* ALDORA 字标：跟 Facebook 封面同一个字（Michroma，宽身科技感 · OFL，vendor/michroma），全大写、字距拉开 */
@font-face { font-family: "Aldora Brand"; src: url("/vendor/michroma/michroma-latin.woff2") format("woff2"); font-display: block; unicode-range: U+0000-00FF; }
.intro-name { color: #eef3ff; font: 400 16px/1 "Aldora Brand", "Eurostile", "Segoe UI", sans-serif; letter-spacing: .3em; text-indent: .3em; text-shadow: 0 0 18px #7ff0ff55; }
@media (prefers-reduced-motion: reduce) { .intro { transition: opacity .3s ease; } .intro.out { transform: none; } }

/* 一条分段（工程页四段等）：每格允许缩，不然最右那格被挤出屏（10-17 浅色截图看到「钱」被切） */
.seg > .seg-b { min-width: 44px; }

/* 门面抬头（开场 / 登录 / 注册 / 忘记密码 / 邀请码）：39 号 logo + 大写 ALDORA（Michroma）—— 业主 10-17 */
.brand-head { display: grid; justify-items: center; gap: 14px; margin: 0 0 var(--sp-5); }
.brand-head .brand-mark { display: block; line-height: 0; filter: drop-shadow(0 8px 20px #0006); }
.brand-head .brand-mark svg { border-radius: 22%; }
.brand-word { font: 400 15px/1 "Aldora Brand", "Eurostile", "Segoe UI", sans-serif; letter-spacing: .32em; text-indent: .32em; color: var(--fg); }
.splash .brand-head { margin-bottom: var(--sp-3); }
.splash .brand-word { font-size: 20px; }
/* 业主 10-18「排版有点怪」：登录 / 注册上面那一块整个置中（logo · ALDORA · 标题 · 一句话），跟底下置中的链接对齐 */
.auth .brand-head { justify-items: center; }
/*
 * 一条分段里的字（业主 10-17：孟加拉文「超出了范围」）：中文短、一行就好；泰 / 越 / 孟加拉 / 缅甸长 →
 * 允许折成两行（不许互相盖住），窄屏再缩一号；格子高度跟着字走。
 */
.seg > .seg-b { min-width: 44px; height: auto; min-height: 44px; }
.seg > .seg-b .seg-t { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; text-align: center; }
@media (max-width: 400px) { .seg > .seg-b { padding-left: 4px; padding-right: 4px; } .seg > .seg-b .seg-t { font-size: var(--f-xs); } }

/* 底下页签的字只占一行：放不下就缩、再放不下就「…」，不许折成两行把页签撑高 */
.tabbar button > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
:root:is([lang="th"], [lang="vi"], [lang="bn"], [lang="my"]) .tabbar button > span:last-child { font-size: 10px; }

/* 报价单那一张（业主 10-17 排法）：摘要 · 三段 · 底下固定一条 */
.quote .qsum { padding: var(--sp-3) var(--sp-4); border-radius: 18px; background: var(--s1); border: 1px solid var(--line); display: grid; gap: 4px; }
.quote .qsum-no { font: 600 var(--f-xs) var(--font-num); color: var(--fg2); letter-spacing: .04em; }
.quote .qsum-cl { font-size: var(--f-lg); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .qsum-total { font: 600 var(--f-2xl)/1.1 var(--font-num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.quote .qsum-total small { font-size: var(--f-md); color: var(--brand); margin-right: 6px; }
.quote .tagp { font-size: var(--f-xs); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.quote .tagp.w { color: var(--warn); } .quote .tagp.o { color: var(--brand); } .quote .tagp.n { color: var(--fg2); }
.quote .qbar { position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 5; display: flex; gap: 8px; justify-content: flex-end;
  margin-top: var(--sp-4); padding: 8px; border-radius: 16px; background: var(--bar-bg); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px #0003; }
.quote .qbar .btn { flex: 1; }
@media (min-width: 900px) { .quote .qbar { bottom: 12px; } }

/* 我的：名片（圆头像 · 名字 · 公司 · 身份）—— 业主 10-17 */
.me-card { display: flex; gap: var(--sp-3); align-items: center; }
.me-ava { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 22px/1 var(--font); }
/* 工具：一行一样，图标放在小方块里 */
.home .tool-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line); }


/* 门面右上角那颗地球（业主 10-17：七个语言字太挤）—— 地球 + 现在是哪一种 */
.langbar .langglobe { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--s1); border: 1px solid var(--line); color: var(--fg); font: 600 var(--f-sm) var(--font); cursor: pointer; }
.langbar .langglobe:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 抽屉顶上 / 电脑版左栏的 ALDORA 字标（Michroma，同开屏、同封面） */
.dw-brand, .tabbar .brand { font-family: "Aldora Brand", "Eurostile", "Segoe UI", sans-serif; font-weight: 400; letter-spacing: .28em; }

/* 报价单的输入那一块（业主 10-17：简单一些）：大输入框 · 三颗小图标 · 一颗大键 */
.quote .qin { display: grid; gap: var(--sp-2); }
.quote .qin textarea { min-height: 110px; font-size: var(--f-md); }
.quote .qin-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.quote .qin-ic { display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: 6px 4px; }
.quote .qin-ic > span { font-size: 20px; line-height: 1; }
.quote .qin-ic > small { font-size: var(--f-xs); color: var(--fg2); }
.quote .qin-ic[aria-pressed="true"] { border-color: var(--danger); }
.quote .qin-go { display: flex; gap: var(--sp-2); align-items: center; }
.quote .qin-go .btn.primary { flex: 1; min-height: 52px; font-size: var(--f-md); }

/* 报价明细一行（业主 10-17「这个也太复杂」）：平时收着一行，点了才打开 */
.quote .qline { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); cursor: pointer; border-left: 3px solid var(--warn); padding: var(--sp-2) var(--sp-3); margin: 6px 0; }
.quote .qline:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.quote .qline-m { min-width: 0; display: grid; gap: 2px; }
.quote .qline-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .qline-m .why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .qline-r { display: grid; justify-items: end; gap: 3px; flex: none; }
.quote .qline-r strong { font: 600 var(--f-sm) var(--font-num); white-space: nowrap; }
/* 打开后：常用四格排成两行两格 */
.quote .qline-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.quote .qline-nums label { display: grid; gap: 4px; font-size: var(--f-xs); color: var(--fg2); }
.quote .qline-nums input, .quote .qline-nums select { width: 100%; min-width: 0; }
.quote .qline-amt { display: grid; gap: 4px; align-content: end; justify-items: end; }
.quote .qline-amt strong { font: 600 var(--f-lg) var(--font-num); }
.quote .qline-more { margin-top: var(--sp-2); }
.quote .qline-more > summary { color: var(--fg2); font-size: var(--f-sm); cursor: pointer; padding: 6px 0; }

/* ══ 业主 10-17「每个里面的排法太乱」：全站统一的几样排法 ══ */
/* 页头：标题一行 + 右边一颗「⋯」 */
.pg-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pg-head h2 { margin: 0; font-size: var(--f-xl); line-height: 1.2; }
.co-head > div:first-child { min-width: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.co-head h2 { font-size: var(--f-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.co-head .why { flex: none; }
.pg-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pg-row .tot { display: grid; justify-items: end; }
.pg-row .tot small { font-size: var(--f-xs); color: var(--fg2); }
.pg-row .tot b { font: 700 var(--f-lg) var(--font-num); }
.more-b { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 22px; line-height: 1; letter-spacing: 0; }
/* 一张卡里三格数 */
.sum3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: var(--sp-3) 0; margin: 0 0 var(--sp-3); }
.sum3 > * { display: grid; gap: 4px; padding: 0 var(--sp-3); min-width: 0; align-content: start; }
.sum3 > * + * { border-left: 1px solid var(--line); }
.sum3 small { font-size: var(--f-xs); color: var(--fg2); line-height: 1.25; }
.sum3 b { font: 700 var(--f-md) var(--font-num); overflow-wrap: anywhere; }
.sum3 input { width: 100%; min-width: 0; padding: 4px 2px; font-size: 12px; }
/* 组：等宽分段 */
.grp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); margin: var(--sp-3) 0 var(--sp-2); }
.grp-seg > button { font: inherit; font-weight: 600; color: var(--fg2); background: transparent; border: 0; border-radius: 10px; min-height: 40px; cursor: pointer; }
.grp-seg > button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
/* 页签：一行横滑 */
.tabchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 var(--sp-2); margin-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
.tabchips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: inherit; font-size: var(--f-sm); color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; min-height: 36px; white-space: nowrap; cursor: pointer; }
.chip[aria-checked="true"] { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); font-weight: 600; }
/* 页签内容：主键满宽，说明收成一行 */
.pane > div > div > .btn.primary:first-child, .pane > div > div > .btn2:first-child { margin-bottom: var(--sp-2); }
.pane > div > div > .btn.primary:first-child { width: 100%; min-height: 48px; }
.btn2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-2); }
.btn2 > .btn { width: 100%; min-height: 46px; }
.btn3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btn3 > .btn { width: 100%; white-space: normal; line-height: 1.2; }
.tip { margin: 0 0 var(--sp-2); }
.tip > summary { list-style: none; cursor: pointer; color: var(--fg2); font-size: var(--f-xs); padding: 4px 0; display: inline-block; }
.tip > summary::-webkit-details-marker { display: none; }
.tip > p { margin: 4px 0 var(--sp-2); font-size: var(--f-sm); color: var(--fg2); background: var(--s1); border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.warnbox { border-color: var(--warn) !important; }
.warnbox > summary { color: var(--warn); font-weight: 600; cursor: pointer; }
/* 可收的一段 */
.sect { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; margin: 0 0 var(--sp-2); }
.sect > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2); padding: var(--sp-3); align-items: center; }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary::after { content: '›'; grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: var(--fg2); transition: transform .2s; }
.sect[open] > summary::after { transform: rotate(90deg); }
.sect > summary b { font-size: var(--f-md); }
.sect > summary small { font-size: var(--f-xs); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect > .sect-b { padding: 0 var(--sp-3) var(--sp-3); }
.sect .card { background: var(--bg); }
/* 一行一项的列表 */
.li-list { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--s1); margin-bottom: var(--sp-3); }
.li-list > .li { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; font: inherit; color: var(--fg); background: transparent; border: 0; border-top: 1px solid var(--line); padding: var(--sp-3); min-height: 56px; cursor: pointer; justify-content: space-between; }
.li-list > .li:first-child { border-top: 0; }
.li-list > .li > small { color: var(--fg2); font-size: var(--f-xs); }
.li .ava { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.li .li-m { flex: 1; min-width: 0; display: grid; gap: 2px; }
.li .li-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .li-m small { font-size: var(--f-xs); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .li-m small.bad { color: var(--danger); }
.li .li-r { flex: none; display: grid; justify-items: end; gap: 3px; }
.li .li-r small { font-size: var(--f-xs); color: var(--fg2); }
.tagp { font-size: var(--f-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg2); white-space: nowrap; }
/* 菜单里的一项 */
.sheet-dlg .opt.opt-1 { grid-template-columns: 1fr; min-height: 52px; }
.sheet-dlg .opt.danger b { color: var(--danger); }
/* 工资：三格输入 */
.in3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.in3 label { display: grid; gap: 4px; font-size: var(--f-xs); color: var(--fg2); min-width: 0; }
.in3 input { width: 100%; min-width: 0; }
/* 人事设定：比例小表 */
.rate-tbl { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px; align-items: center; margin: var(--sp-2) 0; }
.rate-tbl > small { font-size: 11px; color: var(--fg2); line-height: 1.2; text-align: center; }
.rate-tbl .pct { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rate-tbl .pct input { width: 100%; min-width: 0; padding: 6px 4px; text-align: right; }
.rate-tbl .pct span { font-size: var(--f-xs); color: var(--fg2); }
/* 排工：天数加减 + 「⋯」 */
.task-ctl { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.stepper > button { font: inherit; font-size: 20px; width: 44px; height: 40px; background: transparent; color: var(--fg); border: 0; cursor: pointer; }
.stepper > button:disabled { opacity: .35; }
.stepper > b { min-width: 4.5em; text-align: center; font-size: var(--f-sm); }
.task-ctl .more-b { width: 40px; height: 40px; min-height: 40px; }

/* 一行一项（单子 / 收款 / 客户 / 工程 / 月结单） */
.lrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; text-align: left; font: inherit; color: var(--fg); background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: var(--sp-3); margin: 0 0 6px; min-height: 60px; }
button.lrow { cursor: pointer; }
button.lrow:active { transform: scale(.99); }
.lrow-m { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lrow-m b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-m small { font-size: var(--f-xs); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-r { flex: none; display: grid; justify-items: end; gap: 4px; max-width: 45%; }
.lrow-r > b { font: 700 var(--f-sm) var(--font-num); white-space: nowrap; }
.lrow-r > small { font-size: var(--f-xs); color: var(--fg2); white-space: nowrap; }
.lrow-r .pill { font-size: var(--f-xs); padding: 1px 8px; }
.lrow[data-tone="warn"] .lrow-r > b { color: var(--warn); }
.tagp.on { border-color: var(--brand); color: var(--brand); }
/* 两颗键 + 「⋯」一行 */
.btn-row { display: flex; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); }
.btn-row > .btn:not(.more-b) { flex: 1; min-height: 46px; }
/* 工程里面的「工期 / 工作群 / 钱」：上面「概况」已经有地址，不再重复 */
.in-hub .hub-dup { display: none; }
.in-hub .pg-head h2, .in-hub > div > div > h2 { font-size: var(--f-lg); }
/* 打卡那一段里一天一行 */
.sect .sect-b > div + div { border-top: 1px solid var(--line); }

/* 每天去哪：一天一个小标题 */
.day-h { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 6px; font-size: var(--f-sm); }
.day-blk .lrow { min-height: 56px; }
.day-blk .lrow .more-b { width: 40px; height: 40px; min-height: 40px; text-decoration: none; font-size: 18px; }
.tabchips.days .chip small { color: var(--fg2); font-size: var(--f-xs); }

/* 工人「我的」：两颗大打卡键，底下小字是今天几点打的 */
.punch2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.punch2 > .btn { display: grid; gap: 4px; justify-items: center; min-height: 84px; border-radius: 18px; }
.punch2 > .btn b { font-size: var(--f-lg); }
.punch2 > .btn small { font: 600 var(--f-sm) var(--font-num); opacity: .8; min-height: 1em; }

/* 报价明细头 · 分组头 · 金额汇总（业主 10-17「排法太乱」） */
.quote .qlines-h { margin-top: var(--sp-4); }
.quote .qlines-h > b { font-size: var(--f-lg); }
.quote .qgrp-row { display: flex; align-items: center; gap: 6px; margin: var(--sp-3) 0 6px; }
.quote .qgrp { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; text-align: left; font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 8px 2px; cursor: pointer; }
.quote .qgrp > span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .qgrp > small { font-size: var(--f-xs); color: var(--fg2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.quote .qgrp > b { font: 700 var(--f-sm) var(--font-num); }
.quote .qgrp-x { width: 36px; min-height: 36px; padding: 0; color: var(--fg2); }
.quote .qtot { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.quote .qtot > b { font: 600 var(--f-sm) var(--font-num); }
.quote .qtot-in { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); }
.quote .qtot-in small { color: var(--fg2); font-size: var(--f-xs); }
.quote .sfx { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--fg2); font-size: var(--f-sm); }
.quote .sfx input { flex: 1; min-width: 0; width: 100%; }
.quote .qgrand { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-2); border-top: 2px solid var(--line); }
.quote .qgrand > span { font-weight: 700; }
.quote .qgrand > b { font: 700 var(--f-lg) var(--font-num); color: var(--brand); }
.pane h3, #app main h3 { font-size: var(--f-md); margin: var(--sp-4) 0 var(--sp-2); }

/* 头像字（me.js data-i）*/
.me-ava::before { content: attr(data-i); }
/* 手机上每一颗都按得中（≥44px 宽；走查 10-18：靠墙 / 见光 36px、门洞 / 窗洞 34px、单柜屏 39px） */
.btn, .seg-b { min-width: 44px; }

/* 搜索框（ui.js findBox）*/
.findbox { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.findbox input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; }
.findbox small { color: var(--fg2); font-size: var(--f-xs); white-space: nowrap; }
.lrow[hidden], .li-list > .li[hidden], .list > .li[hidden] { display: none !important; }


/* 对话框里的说明照换行显示（邀请码 · 锁月提醒 用 
 分段）*/
dialog > p { white-space: pre-line; }

/* ── 量图纸（quoteplan）· 业主 10-18「这个排版要调一调」 ──
   顶上一行：名字 · 撤销 · 完成；下面一排三个模式等宽切换；提示小字两行；底下问话是一块浮起的面板 */
.qp { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.qp-top { display: flex; align-items: center; gap: var(--sp-2); padding: max(8px, env(safe-area-inset-top)) 12px 6px; }
.qp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--f-md, 15px); }
.qp-top .btn.sm { flex: 0 0 auto; }
.qp-modes { display: grid; margin-bottom: 8px !important; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 12px; padding: 4px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); }
.qp-mode { min-height: 40px; padding: 0 6px; border: 0; border-radius: calc(var(--r) - 3px); background: transparent; color: var(--fg2); font: inherit; font-size: var(--f-sm); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.qp-mode[aria-pressed="true"] { background: var(--brand-wash); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-dim); }
/* 提示浮在图左上角一小块（10-18「上下两排字很影响美观」）：不占一排，字数变了图也不跳 */
.qp-hint { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 5px 10px; border-radius: 999px; font-size: var(--f-xs, 12px); line-height: 1.35; color: #fff; background: rgba(12, 15, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; box-sizing: border-box; }
.qp-hint:empty { display: none; }
.qp-stage { flex: 1; min-height: 0; position: relative; margin: 0 8px; border-radius: var(--r); overflow: hidden; background: var(--s1, #000); }
.qp-sheet { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
.qp-sheet:not(:empty) { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); background: var(--s1, var(--bg)); }
.qp-sheet .why { font-size: var(--f-sm); color: var(--fg2); line-height: 1.5; }
.qp-sheet:empty { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* ── 改图标记（markplan · 规则 587，业主 10-24）：外壳同量图纸那一屏；工具条按钮至少 44px 高（笔、手指都按得中） ── */
.mkp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 12px 6px; padding: 4px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); }
.mkp-step { min-height: 36px; border: 0; border-radius: calc(var(--r) - 3px); background: transparent; color: var(--fg2); font: inherit; font-size: var(--f-sm); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-step[aria-pressed="true"] { background: var(--brand-wash); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-dim); }
.mkp-step:disabled { opacity: .55; }
.mkp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 8px; align-items: center; }
.mkp-tools, .mkp-opts { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; align-items: center; }
.mkp-tools::-webkit-scrollbar, .mkp-opts::-webkit-scrollbar { display: none; }
.mkp-tool { flex: 0 0 auto; min-height: 44px; min-width: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); color: var(--fg); font: inherit; font-size: var(--f-sm); font-weight: 550; cursor: pointer; white-space: nowrap; }
.mkp-tool[aria-pressed="true"] { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-dim); }
.mkp-tools .mkp-tool[data-tool="door"], .mkp-tools .mkp-tool[data-tool="glassdoor"], .mkp-tools .mkp-tool[data-tool="window"], .mkp-tools .mkp-tool[data-item] { touch-action: none; }
.mkp-lbl { color: var(--fg2); font-size: var(--f-xs); white-space: nowrap; padding-left: 4px; }
.mkp-input { min-height: 44px; max-width: 12em; }
.mkp .qp-sheet .row input { min-height: 44px; }
/* 587 出图结果卡（盖在画图那一屏上；体检图可以上下左右滑、双指放大） */
.mkp-out { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: rgba(12, 15, 20, .55); }
.mkp-out-card { display: flex; flex-direction: column; gap: 10px; width: min(960px, 100%); max-height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s1, var(--bg)); color: var(--fg); overflow: hidden; }
.mkp-out-card .why { font-size: var(--f-sm); color: var(--fg2); line-height: 1.5; }
.mkp-out-img { flex: 1 1 auto; min-height: 120px; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; border: 1px solid var(--line); border-radius: calc(var(--r) - 3px); background: #fff; }
.mkp-out-img img { display: block; max-width: 100%; height: auto; }
.mkp-out-card a.btn { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* 左滑删除（ui.js swipeDel · 业主 10-18）：整行往左移，红色垃圾桶贴在这一行右边外侧跟着进来 */
.swipe-row { position: relative; touch-action: pan-y; background: var(--s1); }
.swipe-del { position: absolute; top: 0; bottom: 0; left: 100%; width: 84px; padding-right: 24px !important; box-sizing: content-box; margin: 0; border: 0; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--danger, #e03131); color: #fff; font: inherit; font-size: var(--f-xs, 12px); font-weight: 600; opacity: 0; cursor: pointer; }
.swipe-del svg { stroke: currentColor; }
/* 拉开时这一行往左出界：装它的那一层把出界的剪掉（clip 不会变成能滚的框） */
:has(> .swipe-row) { overflow-x: clip; }

/* ── 工程赚亏（业主 10-18「一眼看到亏钱还是赚钱，清晰一些、美一些」）：绿 = 赚，红 = 亏 ── */
:root { --gain: #3ccf8e; --loss: #ff6b5b; }
:root[data-theme="light"], :root:not([data-theme]) { --gain: #138a52; --loss: #c2410c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --gain: #3ccf8e; --loss: #ff6b5b; } }
.pf-sum { border-radius: 18px; padding: var(--sp-4); background: var(--s1); border: 1px solid var(--line); position: relative; overflow: hidden; }
.pf-sum::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--gain); }
.pf-sum.loss::before { background: var(--loss); }
.pf-sum > small { color: var(--fg2); font-size: var(--f-xs); letter-spacing: .04em; }
.pf-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 var(--sp-3); }
.pf-big b { font: 700 30px/1.1 var(--font-num, inherit); color: var(--gain); letter-spacing: -.01em; }
.pf-sum.loss .pf-big b { color: var(--loss); }
.pf-big span { color: var(--fg2); font-size: var(--f-sm); }
.pf-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.pf-3 > div { display: grid; gap: 2px; min-width: 0; }
.pf-3 small { color: var(--fg2); font-size: 11px; }
.pf-3 b { font: 600 var(--f-sm) var(--font-num, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-3 .gain { color: var(--gain); } .pf-3 .loss { color: var(--loss); }
.pf-note { margin-top: var(--sp-2); font-size: var(--f-xs); line-height: 1.5; color: var(--warn); }
.pf-list { display: grid; gap: 8px; }
.pf-row { display: grid; gap: 8px; width: 100%; text-align: left; font: inherit; color: var(--fg); background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: var(--sp-3); cursor: pointer; }
.pf-row:active { transform: scale(.995); }
.pf-top { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.pf-m { display: grid; gap: 2px; min-width: 0; } .pf-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-m small, .pf-sub { color: var(--fg2); font-size: var(--f-xs); }
.pf-r { display: grid; justify-items: end; gap: 2px; flex: none; }
.pf-r b { font: 700 var(--f-md) var(--font-num, inherit); white-space: nowrap; }
.pf-r small { color: var(--fg2); font-size: var(--f-xs); }
.pf-row.gain .pf-r b { color: var(--gain); } .pf-row.loss .pf-r b { color: var(--loss); } .pf-row.flat .pf-r b { color: var(--fg2); }
.pf-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--gain) 22%, transparent); overflow: hidden; }
.pf-row.loss .pf-bar { background: color-mix(in srgb, var(--loss) 22%, transparent); }
.pf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--fg2); opacity: .55; }
.pf-row.loss .pf-bar i { background: var(--loss); opacity: 1; }
.pf-row.loss { border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); }

/* 按键反馈（业主 10-18）：按下去整颗暗一点 + 微缩，一眼看得出按到了；放开 0.12 秒回原样。
   用 filter 不用 transform：左滑那几行自己在动 transform，不抢 */
button, [role=button], a.btn, .li, .lrow, .tile, .key, .chip, .seg-b, .pf-row, .qline { -webkit-tap-highlight-color: transparent; transition: filter .12s ease, transform .12s ease, background-color .15s ease; }
button:active:not(:disabled), [role=button]:active, a.btn:active, .li:active, .lrow:active, .tile:active, .key:active, .chip:active, .seg-b:active:not(:disabled), .pf-row:active, .qline:active { filter: brightness(.82); }
.btn:active:not(:disabled), .seg-b:active:not(:disabled), .chip:active, .key:active, .tile:active { transform: scale(.96); }
:root[data-theme="light"] button:active:not(:disabled), :root[data-theme="light"] .li:active, :root[data-theme="light"] .lrow:active { filter: brightness(.9); }

/* 首页公司名一点就换公司（业主 10-18） */
.co-pick { all: unset; display: grid; gap: 2px; cursor: pointer; min-width: 0; padding: 4px 0; border-radius: 10px; }
.co-pick h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-pick .co-caret { color: var(--brand); font-size: .7em; vertical-align: middle; }
.co-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 抽屉顶上：logo + 公司名字（业主 10-18） */
.dw-brand { display: flex; align-items: center; gap: 10px; min-width: 0; letter-spacing: normal !important; font-family: inherit !important; }
.dw-brand canvas { flex: none; }
.dw-co { font-size: var(--f-md); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth h1, .auth > .sub { text-align: center; }
.auth .auth-forgot { display: flex; justify-content: flex-end; margin: -6px 0 20px; font-size: var(--f-sm); }
.auth .auth-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-4); font-size: var(--f-sm); }
.auth .auth-links > span { color: var(--fg3, var(--fg2)); }

/* 每月净赚（业主 10-18 Q-016 A）：收入 − 工程成本 = 毛利 − 公司杂费 = 净赚，一行一行往下减 */
.net-card { display: grid; gap: 2px; margin-top: var(--sp-3); }
.net-ln { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; font-size: var(--f-sm); }
.net-ln b { font: 600 var(--f-sm) var(--font-num, inherit); white-space: nowrap; }
.net-ln.big { font-size: var(--f-md); } .net-ln.big b { font-size: var(--f-md); }
.net-ln.eq { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.net-ln.total b { font-size: var(--f-lg); color: var(--gain); }
.net-sub { padding-left: var(--sp-3); color: var(--fg2); }
.net-sub .net-ln { padding: 2px 0; font-size: var(--f-xs); } .net-sub .net-ln b { font-size: var(--f-xs); font-weight: 500; }
.net-ln.total.loss b { color: var(--loss); }
.topbar .brandmark.bare { display: flex; align-items: center; flex: none; }
.brand-head .brand-mark.bare { filter: none; }
.qtrash .lrow small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.photo-review { width: min(560px, 96vw); max-width: none; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--s1); color: var(--fg); }
.photo-review::backdrop { background: rgba(0, 0, 0, .75); }
/* 「怎么用」教程短片（业主 10-18）：横着一排竖封面，点了全屏放 */
.tut-role { margin: 14px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 800; font-size: var(--f-md); }
.section-title + .tut-role { border-top: 0; padding-top: 0; margin-top: 4px; }
.tut-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 10px; scroll-snap-type: x mandatory; }
.tut-card { flex: none; width: 132px; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; scroll-snap-align: start; cursor: pointer; }
.tut-poster { position: relative; display: block; width: 132px; height: 235px; border-radius: 14px; background: #0b0f16 center / cover no-repeat; border: 1px solid var(--line); overflow: hidden; }
.tut-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; font-size: 20px; color: #06222a; background: var(--ac, #5fd9e6); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.tut-card:active .tut-poster { transform: scale(.97); }
.tut-t { font-weight: 700; font-size: 15px; line-height: 1.3; }
.tut-s { font-size: 12px; color: var(--fg2); }
.tut-player { background: #000; border-color: #000; }
.thumb-btn { all: unset; cursor: pointer; line-height: 0; border-radius: 6px; } .thumb-btn:focus-visible { outline: 2px solid var(--brand); }

/* 固定账单（业主 10-18）：左边一条颜色 —— 绿已付 · 黄快到期 · 红过期 */
.card.bill { border-left: 4px solid var(--line); }
.card.bill.gain { border-left-color: var(--gain); } .card.bill.warn { border-left-color: var(--warn); } .card.bill.loss { border-left-color: var(--loss); }
.bill-st { font-weight: 700; font-size: var(--f-sm); white-space: nowrap; }
.card.bill.gain .bill-st { color: var(--gain); } .card.bill.warn .bill-st { color: var(--warn); } .card.bill.loss .bill-st { color: var(--loss); }

/*
 * 业主 10-18「不要点击输入框等界面自动放大」：iPhone 碰到字小于 16px 的输入框会自动放大整页。
 * 手机（触屏）上所有输入框至少 16px；放在最后、压过各处的小字设定。index.html 另加 maximum-scale=1 当第二道。
 */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* 工程事项方块（业主 10-18 重新排版）：两列；要处理的左边一条色；展开的那格描边 */
.jt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--sp-2) 0; }
.jt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; background: var(--s1); color: var(--fg); cursor: pointer; }
.jt small { color: var(--fg2); font-size: 12px; }
.jt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jt[data-tone="warn"] { border-left-color: var(--warn); }
.jt[data-tone="bad"] { border-left-color: var(--bad, #c0392b); }
.jt[data-tone="bad"] b { color: var(--bad, #c0392b); }
.jt[aria-expanded="true"] { border-color: var(--brand, #0f766e); box-shadow: 0 0 0 1px var(--brand, #0f766e) inset; }
.jt:active { transform: scale(.98); }

/* 业主 10-19「按键反馈」：录音时语音键整颗变红、一直闪，一眼看得出正在听 */
.quote .qin-ic[aria-pressed="true"] { background: var(--danger); color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
.quote .qin-ic[aria-pressed="true"] > small { color: #fff; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .quote .qin-ic[aria-pressed="true"] { animation: none; } }

/* 报价明细三层（业主 10-19）：楼层（总额）→ 区域（小计）→ 明细 */
.quote .qarea-row { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.quote .qarea { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); text-align: left; font: inherit; font-size: var(--f-sm); color: var(--fg2); background: transparent; border: 0; padding: 4px 2px 4px 12px; cursor: pointer; }
.quote .qarea b { color: var(--fg); font-weight: 700; }
.quote .qarea > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .qarea > small { flex: none; font: var(--f-xs) var(--font-num); color: var(--fg2); }

/* 单据扫描（业主 10-19「拍账单要自动黑白、拉直」）：拍完看一眼 · 四个圆点拖角 */
.scan-dlg { width: min(96vw, 520px); }
.scan-dlg h2 { margin: 0 0 8px; font-size: var(--f-md); }
.scan-stage { display: grid; place-items: center; min-height: 200px; }
.scan-out { max-width: 100%; max-height: 62vh; border-radius: 8px; background: #fff; }
.scan-adj { position: relative; touch-action: none; line-height: 0; }
.scan-adj canvas { max-width: 100%; border-radius: 8px; }
.scan-dot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #5fd9e6; background: rgba(95, 217, 230, .25); touch-action: none; cursor: grab; }
.scan-tools { display: grid; gap: 8px; margin-top: 10px; }
.scan-row { display: flex; gap: 8px; }
.scan-row > .btn { flex: 1; }