/* Morimaiss CRM · 设计标准见 MRMCRMMASTER.md（改样式前先读）——这套风格只用在 CRM
   Stripe 风（用户 11-04 定，取代同日试过的 Apple 风）：借 Stripe 的设计语言，不用它的名字与 logo
   浅色 = 雾白底 + 白卡片 + 深海军蓝字 + 靛蓝主色；深色 = 深海军底 + 深蓝卡片 + 浅靛蓝字
   上方一条渐层彩带（只在页面顶端，往下淡掉）；标题与大数字用细体 300 + 负字距；数字一律等宽（tabular-nums）
   圆角：卡片 12px、弹出层 16px、输入框 6px、按钮与胶囊全圆角；阴影很轻、带一点蓝
   颜色全部是下面的变数；深色模式只改变数（html[data-theme=dark]），元件规则不分深浅 */
:root{
  color-scheme:light;
  --bg:#f6f9fc;
  --card:#fff;--edge:#e3e8ee;--edge-2:#d5dde6;
  --line:#ebeff4;--raise:#f6f9fc;--chip:#eef2f7;--chip-2:#e3e8ee;
  --text:#0d253d;--text-2:#273951;--text-3:#5b6b82;
  --accent:#533afd;--accent-2:#4434d4;--accent-press:#2e2b8c;--on-accent:#fff;
  --accent-ink:#533afd;--accent-ink-2:#4434d4;--accent-soft:rgba(83,58,253,.07);--accent-ring:rgba(83,58,253,.2);
  --mark:#d5dde6;--mark-2:#b3bfce;
  --good:#1a7f4b;--bad:#c0123c;--bad-ring:rgba(192,18,60,.35);--warn:#87561c;--warn-bg:#fcf3e3;
  --c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--c5:#e87ba4;--c6:#8e8e93;
  --input:#fff;--input-edge:#a8c3de;
  --bar-bg:rgba(255,255,255,.72);--bar-line:rgba(227,232,238,.8);--dock-bg:rgba(255,255,255,.9);--frost:rgba(255,255,255,.92);
  --tip:#1c1e54;--tip-text:#fff;--tip-kbd:#d4d2fd;--tip-kbd-edge:rgba(255,255,255,.35);
  --vvip:#1c1e54;--on-vvip:#fff;--vip:rgba(185,185,249,.45);--on-vip:#4434d4;
  --cream:#f5e9d4;
  --sb:rgba(13,37,61,.18);--sb-2:rgba(13,37,61,.35);
  --sh-1:0 1px 3px rgba(0,55,112,.08);
  --sh-2:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);
  --sh-3:0 24px 60px -12px rgba(0,55,112,.28);
  --backdrop:rgba(13,37,61,.32);
  --ribbon:1;
  --sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --bar-h:60px;
}
/* 深色：Stripe 后台那种深海军底；主色按钮不变，当文字用的靛蓝调亮才看得清 */
html[data-theme=dark]{
  color-scheme:dark;
  --bg:#0a1628;
  --card:#101e33;--edge:#22324a;--edge-2:#2e405a;
  --line:#1b2a40;--raise:#15253c;--chip:#1a2a42;--chip-2:#23354f;
  --text:#e6edf5;--text-2:#b6c2d1;--text-3:#8695aa;
  --accent:#533afd;--accent-2:#6352ff;--accent-press:#4434d4;
  --accent-ink:#aaa4ff;--accent-ink-2:#c4c0ff;--accent-soft:rgba(170,164,255,.12);--accent-ring:rgba(170,164,255,.3);
  --mark:#2a3b55;--mark-2:#3d5274;
  --good:#4cc38a;--bad:#ff7d95;--bad-ring:rgba(255,125,149,.4);--warn:#e3ad62;--warn-bg:#2b2316;
  --c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--c5:#d55181;--c6:#7d8796;
  --input:#0c192c;--input-edge:#34475f;
  --bar-bg:rgba(10,22,40,.75);--bar-line:rgba(34,50,74,.8);--dock-bg:rgba(16,30,51,.88);--frost:rgba(16,30,51,.92);
  --tip:#2a3d60;--tip-text:#fff;--tip-kbd:#d4d2fd;--tip-kbd-edge:rgba(255,255,255,.35);
  --vvip:#e6edf5;--on-vvip:#0d253d;--vip:rgba(170,164,255,.16);--on-vip:#c4c0ff;
  --cream:#15253c;
  --sb:rgba(230,237,245,.16);--sb-2:rgba(230,237,245,.32);
  --sh-1:0 0 0 1px #1b2a40;
  --sh-2:0 8px 24px rgba(0,0,0,.4);
  --sh-3:0 24px 60px -12px rgba(0,0,0,.65);
  --backdrop:rgba(0,0,0,.55);
  --ribbon:.22;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{position:relative;margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
/* 渐层彩带：奶油 → 橘 → 薰衣草 → 靛蓝 → 玫红，只铺在页面最上面，往下淡成底色；深色模式压暗 */
body::before{content:"";position:absolute;top:0;left:0;right:0;height:520px;z-index:-1;pointer-events:none;opacity:var(--ribbon);background:
  radial-gradient(40% 90% at 6% 10%,#f5e9d4,transparent 72%),
  radial-gradient(32% 90% at 28% 0%,rgba(255,163,102,.85),transparent 72%),
  radial-gradient(36% 100% at 52% -5%,rgba(185,185,249,1),transparent 72%),
  radial-gradient(30% 90% at 76% 5%,rgba(102,94,253,.75),transparent 72%),
  radial-gradient(30% 100% at 100% 0%,rgba(249,107,238,.6),transparent 72%),
  radial-gradient(24% 80% at 92% 30%,rgba(234,34,97,.45),transparent 72%);
  -webkit-mask:linear-gradient(#000 35%,transparent 95%);mask:linear-gradient(#000 35%,transparent 95%)}
h1,h2,h3,p,dl,dd{margin:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.4}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* 数字：同一套字，只换成等宽数字，上下才对得齐 */
.mono,.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ph{font-size:18px;line-height:1}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--edge-2);border-radius:6px;font:400 11px/1 var(--sans);color:var(--text-2)}
.muted{color:var(--text-2)}

/* 卷轴：细、圆角、透明轨道，灰色滑块；滑过变深 */
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:10px;background:var(--sb) padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-2) padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- 顶栏：半透明磨砂 + 底下一条细线，只放品牌、页面名称、深浅切换与账号 ---------- */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;height:var(--bar-h);padding:0 clamp(20px,3vw,40px);background:var(--bar-bg);border-bottom:1px solid var(--bar-line);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:.12em;font-size:14px}
.brand span{padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:500 11px/1.2 var(--sans);letter-spacing:.04em}
.bar .sp{flex:1}
.bar .page-name{font-size:15px;font-weight:500}
.who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-3)}
.who button{padding:0;border:0;background:none;color:var(--text-2)}
.who button:hover{color:var(--accent-ink)}
.who .theme{display:grid;place-items:center;width:36px;height:36px;border-radius:999px}
.who .theme:hover{background:var(--accent-soft)}

/* ---------- 底部磨砂停靠栏（像 iPhone 的 Dock）：只放图标，滑过放大（相邻也跟着放大），上方显示名称，当前页下方小圆点 ---------- */
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:flex-end;gap:14px;padding:10px 14px;transform:translateX(-50%);border:1px solid var(--edge);border-radius:24px;background:var(--dock-bg);box-shadow:var(--sh-2);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
/* 放大是真的改尺寸（--s 由 JS 依游标距离设定），停靠栏的框会跟着撑大，图标不会跑出框 */
.di{position:relative;display:grid;place-items:center;width:calc(46px * var(--s,1));height:calc(46px * var(--s,1));padding:0;border:0;border-radius:calc(14px * var(--s,1));background:none;color:var(--text-3);transition:color .15s}
.di .ph{font-size:calc(22px * var(--s,1))}
.dock.settle .di{transition:width .28s var(--ease),height .28s var(--ease),border-radius .28s var(--ease),color .15s}
.dock.settle .di .ph{transition:font-size .28s var(--ease)}
.di:hover,.di:focus-visible,.di[aria-current=page]{color:var(--accent-ink)}
.di[aria-current=page]::after{content:"";position:absolute;bottom:-7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent-ink)}
.di.rec{border-radius:999px;color:var(--on-accent);background:var(--accent)}
.di.rec:hover{background:var(--accent-2)}
/* 名称标签：深海军底白字；里面的快捷键框也是浅色字，深浅模式都看得到 */
.di .lab{position:absolute;bottom:calc(100% + 14px);left:50%;padding:6px 10px;border-radius:8px;background:var(--tip);color:var(--tip-text);font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s,transform .15s var(--ease)}
.di .lab kbd{margin-left:6px;height:18px;min-width:18px;border-color:var(--tip-kbd-edge);color:var(--tip-kbd)}
.di:hover .lab,.di:focus-visible .lab{opacity:1;transform:translate(-50%,0)}
/* 胶囊：垫在当前页图标下面，切换时滑过去（JS 负责拉长与回弹） */
.pill{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring);transform-origin:50% 50%}
.dock .pill{border-radius:14px}

/* ---------- 按钮与输入：主色实心胶囊只给主要动作；次要 = 卡片底 + 靛蓝字 + 靛蓝细框 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:500;white-space:nowrap;transition:transform .12s var(--ease),background .15s}
.btn:hover{background:var(--accent-2)}
.btn:active{background:var(--accent-press);transform:scale(.97)}
.btn.line{background:var(--card);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
.btn.line:hover{background:var(--accent-soft);color:var(--accent-ink-2)}
.btn.bad{background:var(--card);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-ring)}
.btn.bad:hover{background:var(--raise)}
.btn.big{height:44px}
.field{display:grid;gap:8px}
.field>span{font-size:13px;color:var(--text-2)}
input:not([type=checkbox]),select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--input-edge);border-radius:6px;background:var(--input);font-size:16px;transition:border-color .15s,box-shadow .15s}
select option{background:var(--card)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-ring)}
textarea{resize:vertical;line-height:1.6}
.seg{position:relative;display:inline-flex;padding:4px;border:1px solid var(--edge);border-radius:999px;background:var(--card)}
.seg button{position:relative;z-index:1;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--text-2);font-size:14px;transition:color .15s}
.seg button[aria-pressed=true]{color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);white-space:nowrap}
.tag i{width:8px;height:8px;border-radius:2px;background:var(--dot,var(--c6))}
.sure{margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--vip);font-size:11px;color:var(--on-vip)}

main{max-width:1600px;margin:0 auto;padding:20px clamp(20px,3vw,40px) calc(120px + env(safe-area-inset-bottom))}
.page{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;animation:in .3s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(4px)}}
.label{font-size:13px;letter-spacing:.04em;color:var(--text-3)}
.note{font-size:13px;color:var(--text-3)}

/* ---------- 卡片：白底、细框、很轻的蓝调阴影 ---------- */
.card{position:relative;padding:22px 26px;border-radius:12px;background:var(--card);box-shadow:var(--sh-1)}

/* ---------- 概览 ---------- */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:6px 4px 4px}
.hello h1{font-size:clamp(26px,2.6vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.2}
.hello p{margin-top:6px;font-size:14px;color:var(--text-2)}
.who-in{margin-left:14px;padding-left:14px;border-left:1px solid var(--edge-2);color:var(--text-3)}
.today-sum{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--text-3)}
.today-sum b{font-size:22px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--text)}
.tl-card{padding:18px 22px 14px}
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(40px,1fr);align-items:end;gap:8px;height:168px;padding-bottom:28px;overflow-x:auto;scrollbar-width:none}
.timeline::-webkit-scrollbar{display:none}
.mo{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;padding:0;border:0;border-radius:8px;background:none;transition:background .15s}
.mo:hover{background:var(--raise)}
.mo .b{display:block;width:100%;max-width:52px;min-height:2px;border-radius:4px 4px 2px 2px;background:var(--mark);transition:background .15s}
.mo:hover .b{background:var(--mark-2)}
.mo[aria-pressed=true] .b{background:var(--accent)}
.mo .t{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-3);white-space:nowrap}
.mo[aria-pressed=true] .t{color:var(--accent-ink);font-weight:500}
.mo .y{position:absolute;top:4px;left:4px;font-size:11px;line-height:1;color:var(--text-3)}
.mo.jan{box-shadow:inset 1px 0 0 var(--edge-2)}

.head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 40px}
.figure{font-size:clamp(48px,6.4vw,88px);font-weight:300;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.figure small{margin-right:12px;font-size:.34em;font-weight:400;letter-spacing:0;vertical-align:1em;color:var(--text-3)}
.delta{margin-top:14px;font-size:16px;color:var(--text-2)}
.delta b{font-weight:500}
.delta .up{color:var(--good)}
.delta .down{color:var(--bad)}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:8px 40px}
.facts div{display:grid;gap:4px}
.facts dt{font-size:13px;color:var(--text-3)}
.facts dd{font-size:28px;font-weight:400;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nav-mo{display:flex;gap:8px}
.nav-mo button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--edge);border-radius:999px;background:var(--card);color:var(--text-2)}
.nav-mo button:hover:not(:disabled){border-color:var(--accent-ink);color:var(--accent-ink)}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-h h2{font-size:17px;font-weight:500;letter-spacing:-.01em}

.band{display:flex;gap:2px;height:34px;margin-bottom:16px;border-radius:8px;overflow:hidden}
.band i{display:block;min-width:3px;transition:filter .15s}
.band i:hover,.band i:focus{filter:brightness(1.1)}
.rows{margin:0;padding:0;list-style:none}
.ch-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 130px;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.ch-row.h{border-top:0;padding-top:0;font-size:13px;color:var(--text-3)}
.ch-row .num{text-align:right}
.ch-row .num.s{font-weight:500}

.rank li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.rank li:first-child{border-top:0;padding-top:0}
.rank .n{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.rank .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .name small{margin-left:8px;color:var(--text-3);font-size:13px}
.rank .v{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.rank .b{grid-column:2 / -1;height:5px;border-radius:3px;background:var(--accent)}
.rank .b.other{background:var(--c6)}

.day{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 24px;padding:12px 0;border-top:1px solid var(--line)}
.day:first-of-type{border-top:0}
.day>.d{padding-top:12px;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--text-2)}
.day>.d b{display:block;font-size:26px;font-weight:300;color:var(--text)}
.tx{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:4px 20px;padding:12px 16px;margin:0 -16px;border-radius:10px;cursor:pointer;transition:background .12s}
.tx:hover{background:var(--raise)}
.tx b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .it{font-size:15px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .amt{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.tx small{grid-column:1 / 3;font-size:13px;color:var(--text-3)}
.amt.neg{color:var(--bad)}
.amt.zero{color:var(--text-3)}
.empty{padding:36px 8px;text-align:center;color:var(--text-2);font-size:15px}
.empty .ph{display:block;margin:0 auto 12px;font-size:28px;color:var(--text-3)}

.tip{position:fixed;z-index:40;pointer-events:none;padding:8px 12px;border-radius:8px;background:var(--tip);color:var(--tip-text);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:pre-line;box-shadow:var(--sh-2);transform:translate(-50%,calc(-100% - 10px))}

/* ---------- 客户：全屏（用户 11-04 定），左名单、右资料，中间一条细线，不再各包一张卡片 ---------- */
main:has(>#customers:not([hidden])){max-width:none;padding:0}
.cust{display:grid;grid-template-columns:minmax(380px,440px) minmax(0,1fr);height:calc(100dvh - var(--bar-h));min-height:480px;background:var(--card)}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.master{border-right:1px solid var(--edge)}
.m-head{display:grid;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.m-head .row{display:flex;align-items:center;gap:10px}
.m-head .row .sp{flex:1}
.m-head select{width:auto;min-height:40px;padding:6px 12px;font-size:14px}
.m-count{font-size:13px;color:var(--text-3)}
/* 底部留位置给停靠栏，最后一位客户不会被盖住 */
.m-list{flex:1;min-height:0;overflow:auto;margin:0;padding:8px 10px calc(110px + env(safe-area-inset-bottom));list-style:none}
.m-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 14px;border-radius:10px;cursor:pointer;transition:background .12s}
.m-list li:hover{background:var(--raise)}
.m-list li[aria-selected=true]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.m-list b{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;font-size:15px}
.m-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* VIP 图标：VVIP 深海军实心 + 皇冠，VIP 淡靛蓝 + 钻石；过期 = 灰掉变暗 */
.tier{display:inline-flex;align-items:center;gap:4px;flex:none;padding:1px 8px 1px 6px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.04em;vertical-align:middle}
.tier.vvip{background:var(--vvip);color:var(--on-vvip)}
.tier.vip{background:var(--vip);color:var(--on-vip)}
.tier.off{filter:grayscale(1);opacity:.4}
.d-top .tier{margin-left:6px;font-size:13px;vertical-align:4px}
.warn{color:var(--warn)}
.d-top .warn{margin-top:6px;font-size:13px}
.m-list .p{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.m-list .s{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.m-list .s.lead{font-size:13px;font-weight:400;color:var(--text-3)}
.m-list .tag{justify-self:end}
.m-more{display:block!important;padding:16px;text-align:center;color:var(--accent-ink)}

.d-scroll{flex:1;min-height:0;overflow:hidden auto;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.d-empty{display:grid;place-items:center;height:100%;color:var(--text-3);text-align:center}
.d-empty .ph{display:block;margin:0 auto 12px;font-size:36px}
.d-top{display:flex;align-items:flex-start;gap:14px;padding:24px 32px 18px;border-bottom:1px solid var(--line)}
.d-top h2{font-size:30px;font-weight:300;letter-spacing:-.025em;line-height:1.2}
.d-top p{margin-top:6px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.d-top .back{display:none}
.d-top .sp{flex:1}
/* 放不下就整格换到下一排；每格的左线、上线往外推 1px，排头那条被 overflow 裁掉 */
.kpis{display:flex;flex-wrap:wrap;overflow:hidden;border-bottom:1px solid var(--line)}
.kpis div{flex:1 1 auto;padding:16px 32px;margin:-1px 0 0 -1px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.kpis dt{font-size:13px;color:var(--text-3)}
.kpis dd{margin-top:4px;font-size:26px;font-weight:400;line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}  /* 金额宁可换行也不能被截掉，先在空格处换 */
.kpi-tap{cursor:pointer;transition:background .15s}
.kpi-tap:hover,.kpi-tap[aria-expanded=true]{background:var(--raise)}
.kpi-tap dt .ph{display:inline-block;transition:transform .2s var(--ease)}
.kpi-tap[aria-expanded=true] dt .ph{transform:rotate(180deg)}
.pts-detail{padding:18px 32px;border-bottom:1px solid var(--line);background:var(--cream)}
.pd-sum{margin-bottom:10px;font-size:14px;color:var(--text-2)}
.pd-sum b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.pd{width:100%;border-collapse:collapse;font-size:14px}
.pd th{padding:6px 12px 6px 0;border-bottom:1px solid var(--edge-2);font-size:12px;font-weight:400;color:var(--text-3);text-align:left}
.pd th:nth-child(2),.pd .n{text-align:right}
.pd td{padding:10px 12px 10px 0;border-bottom:1px solid var(--edge-2);vertical-align:top}
.pd tr:last-child td{border-bottom:0}
.pd td:first-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.pd .n{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:20px}
.pd small{display:block;margin-top:2px;font-size:12px;color:var(--text-3)}
.pd tr.gone{opacity:.5}
.d-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.d-sec{padding:22px 32px;border-bottom:1px solid var(--line)}
.d-sec:last-child{border-bottom:0}
.d-sec h3{margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--text-3)}
.src-q{margin-top:12px;padding:12px 16px;border-radius:8px;background:var(--raise);font-size:15px}
.cr-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:10px}
.cr-row .why{grid-column:2 / 4}
.cr-row .btn{grid-row:2;height:44px}
.cr-row .add{grid-column:1 / 3}
.msg{min-height:1.2em;margin-top:8px;font-size:13px;color:var(--bad)}
.ledger{margin:0;padding:0;list-style:none;font-size:15px}
.ledger li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.ledger li:first-child{border-top:0}
.ledger .dt{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.ledger .v{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.ledger .plus{color:var(--good)}
.ledger .minus{color:var(--bad)}
.ledger .tap{margin:0 -12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s}
.ledger .tap:hover{background:var(--raise)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.form{display:grid;gap:14px}
.kv{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:0 20px;font-size:14px}
.kv dt,.kv dd{padding:10px 0;border-top:1px solid var(--line)}
.kv dt{color:var(--text-3)}
.kv dd{font-variant-numeric:tabular-nums;word-break:break-word}
.kv :is(dt,dd):nth-child(-n+2){border-top:0}
@media (min-width:1280px){
  .d-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .d-grid>.d-col+.d-col{border-left:1px solid var(--line)}
}

/* ---------- 弹出层：卡片底、16px 圆角、蓝调阴影，背后变暗磨砂 ---------- */
dialog.sheet,dialog.cmd{padding:0;border:1px solid var(--edge);border-radius:16px;background:var(--card);color:var(--text);box-shadow:var(--sh-3)}
dialog.sheet{width:min(600px,calc(100vw - 32px));max-height:min(90dvh,900px);margin:auto}
dialog.sheet[open],dialog.cmd[open]{animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet form{display:flex;flex-direction:column;max-height:inherit}
.sh-head{display:flex;align-items:flex-start;gap:12px;padding:24px 28px 14px}
.sh-head h2{font-size:22px;font-weight:300;letter-spacing:-.02em}
.sh-head p{margin-top:4px;font-size:14px;color:var(--text-2)}
.x{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--edge);border-radius:999px;background:var(--card);color:var(--text-2)}
.x:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.sh-body{flex:1;overflow:auto;display:grid;gap:16px;align-content:start;padding:4px 28px 24px}
.sh-foot{display:flex;gap:12px;padding:16px 28px;border-top:1px solid var(--line)}
.sh-foot .btn{flex:1;height:44px}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;padding:6px 18px;border-radius:8px;background:var(--raise);font-size:15px}
.check dt,.check dd{padding:11px 0;border-top:1px solid var(--edge)}
.check dt{color:var(--text-3);font-size:14px}
.check dd{word-break:break-word}
.check :is(dt,dd):nth-child(-n+2){border-top:0}
.check-title{font-size:13px;color:var(--text-3)}
.flag{display:block;margin-top:3px;font-size:13px;color:var(--warn)}
.flag.bad{color:var(--bad)}
dialog.cmd{width:min(640px,calc(100vw - 24px));margin:12vh auto auto}
.cmd-in{display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line)}
.cmd-in input{border:0;min-height:60px;padding:0;background:none;font-size:17px;box-shadow:none!important}
.cmd-list{max-height:52vh;overflow:auto;margin:0;padding:8px;list-style:none}
.cmd-list .grp{padding:12px 12px 6px;font-size:12px;letter-spacing:.04em;color:var(--text-3)}
.cmd-list .opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:8px;cursor:pointer}
.cmd-list .opt[aria-selected=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring)}
.cmd-list .opt .ph{color:var(--accent-ink)}
.cmd-list .opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-list .opt small{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.cmd-foot{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}

/* ---------- 登入 / 载入 / 本机预览提示 ---------- */
.center{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login form{width:min(400px,100%);display:grid;gap:16px}
.login h1{font-size:30px;font-weight:300;letter-spacing:-.025em}
.login p{color:var(--text-2)}
.login form[hidden]{display:none}
.login .link{padding:0;border:0;background:none;color:var(--accent);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.loading{color:var(--text-3);font-size:13px}
.demo{padding:8px 16px;background:var(--warn-bg);color:var(--warn);font-size:13px;text-align:center}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dock,.bar{background:var(--card)}}
@media (max-width:1100px){
  .head{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .cust{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--bar-h:54px}
  .who span{display:none}
  main{padding:14px 12px calc(112px + env(safe-area-inset-bottom))}
  .card{padding:18px 16px}
  .tl-card{padding:14px 12px 10px}
  .timeline{height:140px;grid-auto-columns:38px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
  .facts dd{font-size:24px}
  .ch-row{grid-template-columns:minmax(0,1fr) 56px 104px;gap:10px}
  .day{grid-template-columns:minmax(0,1fr);gap:6px}
  .day>.d{padding-top:0}
  .day>.d b{display:inline;margin-right:6px;font-size:18px}
  .tx{grid-template-columns:minmax(0,1fr) auto}
  .tx .it{grid-column:1;grid-row:2}
  .tx .amt{grid-row:1 / span 2;grid-column:2}
  .tx small{grid-column:1}
  .btn{height:44px}
  .cust{display:block;height:auto;min-height:calc(100dvh - var(--bar-h))}
  .master{height:auto;overflow:visible;border-right:0}
  .m-head{padding:14px 12px}
  .m-list{overflow:visible;padding-left:4px;padding-right:4px}
  .detail{position:fixed;inset:0;z-index:35;background:var(--card);transform:translateX(100%);transition:transform .28s var(--ease)}
  .detail.open{transform:none}
  .d-top{padding:16px;position:sticky;top:0;background:var(--frost);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);z-index:2}
  .d-top h2{font-size:24px}
  .d-top .back{display:grid}
  .kpis div{flex-basis:40%;padding:14px 16px}
  .kpis dd{font-size:21px}
  .pts-detail{padding:16px}
  .d-sec{padding:20px 16px}
  .cr-row{grid-template-columns:96px minmax(0,1fr) minmax(0,1fr)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .dock{gap:10px;padding:8px 10px}
  .di{width:48px;height:48px}
  .di .lab{display:none}
  dialog.sheet{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:16px 16px 0 0}
  .sh-head,.sh-body,.sh-foot{padding-left:20px;padding-right:20px}
  .sh-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}  /* 手机从底部升起，要让开 iPhone 底部横条 */
  dialog.cmd{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 纪录太长：只显示最新 5 笔，按「查看全部」展开（Credit、Loyalty Points、消费纪录） ---------- */
.fold:not(.all)>.xtra{display:none}
.more{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:6px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--accent-ink);font-size:14px;font-weight:500}
.more:hover{background:var(--accent-soft)}

/* ---------- 提醒：顶栏铃铛 + 红点数字；提醒栏从右上角弹出，列出 Loyalty Points 快到期的客户 ---------- */
.bell{position:relative}
.badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font:500 11px/18px var(--sans);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 0 0 2px var(--bg)}
html[data-theme=dark] .badge{background:#e0294f}
.notif{position:fixed;top:calc(var(--bar-h) + 8px);right:clamp(12px,3vw,40px);z-index:32;display:flex;flex-direction:column;width:min(420px,calc(100vw - 24px));max-height:min(72dvh,640px);border:1px solid var(--edge);border-radius:16px;background:var(--card);box-shadow:var(--sh-3);animation:pop .2s var(--ease)}
.nf-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.nf-head h2{font-size:18px;font-weight:500;letter-spacing:-.01em}
.nf-head p{margin-top:4px;font-size:13px;color:var(--text-2)}
.nf-head b{font-weight:500;color:var(--text)}
.nf-list{flex:1;min-height:0;overflow:auto;margin:0;padding:6px;list-style:none}
.nf-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;padding:12px 14px;border:0;border-radius:10px;background:none;text-align:left;transition:background .12s}
.nf-list button:hover,.nf-list button:focus-visible{background:var(--raise)}
.nf-list .nm{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nf-list .v{font-size:15px;font-weight:500;text-align:right;white-space:nowrap}
.nf-list .v small{font-size:12px;font-weight:400;color:var(--text-3)}
.nf-list small{grid-column:1 / -1;font-size:13px;color:var(--text-3)}
.nf-list small.warn{color:var(--warn)}
.nf-foot{padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
@media (max-width:760px){.notif{right:12px;left:12px;width:auto}}

/* ---------- 广告面板（Meta 广告资料，只能看） ---------- */
.ads-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ads-ctl select{width:auto;min-height:40px;padding:6px 12px;font-size:14px}
.ads-custom{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 16px;color:var(--text-2);font-size:14px}.ads-custom[hidden]{display:none}
.ads-custom input{width:auto;min-height:40px;padding:6px 10px;font-size:14px}
.ads-facts{grid-template-columns:repeat(3,auto)}
.ads-facts small{font-size:12px}
.ad-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;gap:3px;height:180px;padding-bottom:22px}
.ad-days i{position:relative;display:flex;align-items:flex-end;height:100%;border-radius:4px;outline-offset:1px}
.ad-days i:hover{background:var(--raise)}
.ad-days b{display:block;width:100%;min-height:0;border-radius:4px 4px 1px 1px;background:var(--accent)}
.ad-days i:hover b,.ad-days i:focus-visible b{background:var(--accent-2)}
.ad-days span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-3);white-space:nowrap}
.tbl{overflow-x:auto;margin:0 -8px}
.adt{width:100%;min-width:720px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.adt th{padding:8px;border-bottom:1px solid var(--edge);font-size:12px;font-weight:400;color:var(--text-3);text-align:right;white-space:nowrap}
.adt td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.adt th:first-child,.adt td:first-child{text-align:left;white-space:normal}
.adt td:first-child b{display:block;font-weight:500}
.adt td:first-child small{font-size:12px;color:var(--text-3)}
.adt tr:last-child td{border-bottom:0}
@media (max-width:1100px){.ads-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .ads-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ads-ctl{width:100%}.ads-ctl .seg{overflow-x:auto;max-width:100%}
  .ad-days{gap:1px;height:150px}
}

/* 每支广告：创意图 + 数字（图在上、字在下；不另外包卡片） */
.ads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 20px;margin:0;padding:0;list-style:none}
.ad{display:flex;flex-direction:column;gap:12px;min-width:0}
.ad-img{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--raise);color:var(--text-3)}
.ad-img img{width:100%;height:100%;object-fit:cover}
.ad-img>.ph{font-size:32px}
.ad-st,.ad-kind{position:absolute;top:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:rgba(13,37,61,.78);color:#fff;font-size:12px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ad-st{right:10px}
.ad-kind{left:10px}
.ad-st.on{background:#1a7f4b}
.ad-st.warn{background:#87561c}
.ad-st.bad{background:#c0123c}
.ad-txt{display:grid;gap:3px;min-width:0}
.ad-txt b{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-txt small{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-txt p{margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding-top:12px;border-top:1px solid var(--line)}
.ad-num dt{font-size:11px;color:var(--text-3)}
.ad-num dd{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ad-go{display:flex;gap:16px;font-size:13px}
.ad-go a{display:inline-flex;align-items:center;gap:5px;min-height:32px;color:var(--accent-ink);text-decoration:none;font-weight:500}
.ad-go a:hover{text-decoration:underline}
.ads-grid+.more{margin-top:16px}

/* 含税花费：放在大数字下面，比大数字小、比说明大 */
.tax-line{margin-top:10px;font-size:18px;color:var(--text-2)}
.tax-line b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.ad-num dd small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--text-3)}