/* ══════════════════════════════════════════════════════════════════════════
AgiKoc 邀请人后台 · 设计系统
──────────────────────────────────────────────────────────────────────────
结构：① 设计令牌 ② 主题预设（深/金/浅） ③ 基础元件 ④ 布局 ⑤ 组件
⑥ 段位视觉 ⑦ App 外壳（顶栏/底栏） ⑧ 手机端媒体查询 + 折叠块
改样式只改这一层，页面里的类名一个都不动（partner / admin / login 三页共用）。
换皮肤： 或 "light"；不写就是默认的 midnight。
══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════ ① 设计令牌 ═══════════════ */
:root{
/* 表面：数字越大越靠前。分层是为了让"卡片浮在页面上"这件事看得出来 */
--bg:#0b0e13; /* 页面底 */
--bg2:#11151c; /* 顶栏 / 底栏 / 侧栏 / 表头 */
--card:#161b24; /* 卡片 */
--card-top:#1b212b; /* 卡片顶部 —— 给卡片一层极淡的竖向渐变，不然像贴纸 */
--card2:#1e242f; /* 卡内嵌块 / 按钮底 */
--card3:#252c38; /* 悬停 / 按下 */
--line:#232b36; /* 分隔线 */
--line2:#2f3947; /* 描边（比分隔线重一点才立得住）*/
/* 文字：四级就够，再多是自找麻烦 */
--fg:#eef2f7;
--fg2:#c6cfdc;
--mut:#8b97a8;
--dim:#5d6878;
/* 品牌色 + 语义色 */
--acc:#4f8cff; --acc2:#2f6fe4; --acc-soft:#4f8cff1f; --acc-glow:#4f8cff59;
--ok:#34d399; --warn:#fbbf24; --bad:#f87171;
--gold:#f5c451; --purple:#b98cff;
/* 语义色的"淡底/淡边"单独给 —— tag / infobox 要的是同色低透明度背景 */
--ok-bg:#34d3991a; --ok-bd:#34d39940;
--warn-bg:#fbbf241a; --warn-bd:#fbbf2440;
--bad-bg:#f871711a; --bad-bd:#f8717140;
--acc-bg:#4f8cff1a; --acc-bd:#4f8cff40;
--pur-bg:#b98cff1a; --pur-bd:#b98cff40;
--gold-bg:#f5c4511a; --gold-bd:#f5c45140;
/* 形状 */
--r:14px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
/* 阴影：三级。手机上光靠描边不够，要有一点影才有层次 */
--sh-1:0 1px 2px #00000059;
--sh-2:0 8px 24px -8px #000000a6;
--sh-3:0 22px 60px -16px #000000cc;
/* 动效 */
--e:.16s cubic-bezier(.4,0,.2,1);
--grad:linear-gradient(135deg,var(--acc),var(--purple));
--grad-gold:linear-gradient(90deg,var(--gold),var(--purple));
/* 毛玻璃：深色皮肤设为 none —— 底下是纯色，模糊了也看不出来，白花性能。
只有浅色皮肤才打开（见下面 html[data-theme="light"]）。 */
--glass:none;
--mesh:none;
}
/* ═══════════════ ② 主题预设 ═══════════════ */
/* 金 —— 深褐底 + 琥珀主色。佣金/段位这类"钱"的产品，金色比蓝色更对味 */
html[data-theme="amber"]{
--bg:#0c0a07; --bg2:#14110b; --card:#1a160e; --card-top:#211b11;
--card2:#241e13; --card3:#2e2617; --line:#2a2314; --line2:#392f1c;
--fg:#f8f2e6; --fg2:#dcd1bd; --mut:#9d9077; --dim:#6b6151;
--acc:#e6a93a; --acc2:#c98c1c; --acc-soft:#e6a93a1f; --acc-glow:#e6a93a59;
--ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --gold:#f5c451; --purple:#c9a4ff;
--ok-bg:#4ade801a; --ok-bd:#4ade8040;
--warn-bg:#fbbf241a; --warn-bd:#fbbf2440;
--bad-bg:#f871711a; --bad-bd:#f8717140;
--acc-bg:#e6a93a1a; --acc-bd:#e6a93a40;
--pur-bg:#c9a4ff1a; --pur-bd:#c9a4ff40;
--gold-bg:#f5c4511a; --gold-bd:#f5c45140;
--sh-1:0 1px 2px #00000066;
--sh-2:0 8px 24px -8px #000000b3;
--sh-3:0 22px 60px -16px #000000d9;
}
/* ★ 浅 · 白底毛玻璃（默认皮肤）
─────────────────────────────────────────────────────────────
毛玻璃的关键不是"半透明白"，是**背后得有点东西可模糊**。
纯白底 + 白卡片 = 什么都看不见。所以页面底铺一层很淡的彩色光晕
（--mesh），卡片半透明白 + blur 去"吃掉"它 —— 玻璃感就是这么来的。
光晕刻意压得很淡：远看还是白底，不会变成花里胡哨的渐变页。 */
html[data-theme="light"]{
--bg:#eef1f7;
--mesh:
radial-gradient(760px 520px at 6% -14%, #a8c4ff61, transparent 62%),
radial-gradient(660px 470px at 98% -4%, #ffd6a361, transparent 62%),
radial-gradient(820px 620px at 44% 110%, #b3f2d961, transparent 64%),
radial-gradient(500px 420px at 86% 58%, #d6c4ff4d, transparent 66%);
/* 表面全是半透明白 —— 数字是"白到什么程度"，不是"什么颜色" */
--bg2:rgba(255,255,255,.74);
--card:rgba(255,255,255,.62);
--card-top:rgba(255,255,255,.5);
--card2:rgba(255,255,255,.58);
--card3:rgba(255,255,255,.9);
--line:rgba(16,24,40,.075);
--line2:rgba(16,24,40,.13);
--fg:#0e1524; --fg2:#37415a; --mut:#68738a; --dim:#98a2b4;
--acc:#2f6fe4; --acc2:#1f57c4; --acc-soft:#2f6fe41f; --acc-glow:#2f6fe438;
--ok:#0b9c6b; --warn:#b8770c; --bad:#d92d20; --gold:#a9761a; --purple:#7c3aed;
--ok-bg:#0b9c6b1a; --ok-bd:#0b9c6b30;
--warn-bg:#b8770c1a; --warn-bd:#b8770c30;
--bad-bg:#d92d201a; --bad-bd:#d92d2030;
--acc-bg:#2f6fe41a; --acc-bd:#2f6fe430;
--pur-bg:#7c3aed1a; --pur-bd:#7c3aed30;
--gold-bg:#a9761a1a; --gold-bd:#a9761a30;
/* 玻璃的影要"散"，不能"硬" —— 硬影会把它从玻璃变成塑料 */
--sh-1:0 1px 1px #1018280a, 0 2px 6px -2px #1018280f;
--sh-2:0 4px 14px -4px #1018281a, 0 16px 40px -18px #10182826;
--sh-3:0 8px 24px -6px #1018281f, 0 28px 70px -24px #10182833;
/* ★ 玻璃本体：模糊 + 提饱和。饱和很重要 —— 只模糊不提饱和会发灰发脏 */
--glass:blur(22px) saturate(180%);
}
/* 页面底的光晕。fixed 让它不跟着滚动跑，玻璃擦过去才有"擦同一片背景"的感觉 */
html[data-theme="light"] body{
background-color:var(--bg);
background-image:var(--mesh);
background-attachment:fixed;
background-repeat:no-repeat;
}
/* ── 哪些东西是玻璃：大块表面才做，按钮/小药丸不做 ──
（小控件套在大玻璃里，各做一次 backdrop-filter 既贵又容易糊）*/
html[data-theme="light"] .side,
html[data-theme="light"] .appbar,
html[data-theme="light"] .tabbar,
html[data-theme="light"] .card,
html[data-theme="light"] .tw,
html[data-theme="light"] .menu,
html[data-theme="light"] details.fold,
html[data-theme="light"] .modal,
html[data-theme="light"] .login,
html[data-theme="light"] .toast > div,
html[data-theme="light"] .seg,
html[data-theme="light"] .hero .pgrid>div,
html[data-theme="light"] table th{
-webkit-backdrop-filter:var(--glass);
backdrop-filter:var(--glass);
}
/* 套在另一块玻璃里的表格不要再叠一层 —— 叠了会互相吃掉背景，反而糊 */
html[data-theme="light"] details.fold .tw,
html[data-theme="light"] .card .tw,
html[data-theme="light"] .fold-body .tw{
-webkit-backdrop-filter:none;
backdrop-filter:none;
background:transparent;
}
/* 玻璃的边：外圈一条白高光 + 内圈一条极淡深描边。
只有底色和阴影的话，白玻璃在白底上会"没有边"。 */
html[data-theme="light"] .side,
html[data-theme="light"] .card,
html[data-theme="light"] .tw,
html[data-theme="light"] .menu,
html[data-theme="light"] details.fold,
html[data-theme="light"] .modal,
html[data-theme="light"] .login{
border-color:#ffffffc4;
box-shadow:var(--sh-2), inset 0 1px 0 #ffffffcc, inset 0 0 0 1px #10182808;
}
html[data-theme="light"] .seg{border-color:#ffffffc4}
/* ═══════════════ ③ 基础元件 ═══════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg); color:var(--fg);
font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
"Microsoft YaHei",sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:var(--acc);text-decoration:none}
button,.btn{
font:inherit;font-weight:500;cursor:pointer;
background:var(--card2); border:1px solid var(--line2); color:var(--fg);
padding:9px 15px; border-radius:var(--r-sm);
transition:background var(--e),border-color var(--e),
transform var(--e),box-shadow var(--e);
white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
button:hover,.btn:hover{background:var(--card3)}
button:active,.btn:active{transform:scale(.975)}
button:disabled{opacity:.42;cursor:not-allowed;transform:none}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.primary{
background:linear-gradient(180deg,var(--acc),var(--acc2));
border-color:var(--acc2); color:#fff; font-weight:600;
box-shadow:0 6px 18px -8px var(--acc-glow);
}
button.primary:hover{background:linear-gradient(180deg,var(--acc2),var(--acc2))}
button.ok{background:#0e9f6e;border-color:#0e9f6e;color:#fff}
button.danger{background:#c81e1e;border-color:#c81e1e;color:#fff}
button.sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
input,select{
font:inherit;background:var(--card2);color:var(--fg);border:1px solid var(--line2);
border-radius:var(--r-sm);padding:10px 13px;outline:none;width:100%;
transition:border-color var(--e),box-shadow var(--e);
}
input::placeholder{color:var(--dim)}
/* 多行输入（后台发公告的正文）：和 input 同一套观感，只多一个可纵向拉伸 */
textarea{font:inherit;background:var(--card2);color:var(--fg);border:1px solid var(--line2);
border-radius:var(--r-sm);padding:10px 13px;outline:none;width:100%;line-height:1.7;
resize:vertical;transition:border-color var(--e),box-shadow var(--e)}
textarea::placeholder{color:var(--dim)}
textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
label{display:block;font-size:12.5px;color:var(--mut);margin:0 0 6px;font-weight:500}
code{background:var(--card2);padding:2px 7px;border-radius:6px;font-size:12.5px;
color:var(--fg2);font-family:ui-monospace,Consolas,monospace}
/* ═══════════════ ④ 布局 ═══════════════ */
.layout{display:flex;min-height:100vh}
.side{
width:214px;flex:0 0 214px;background:var(--bg2);
border-right:1px solid var(--line);
padding:20px 12px;position:sticky;top:0;height:100vh;overflow:auto;
}
.brand{font-size:15px;font-weight:650;padding:0 10px 18px;letter-spacing:.3px}
.brand small{display:block;color:var(--dim);font-size:11.5px;font-weight:400;margin-top:4px}
.nav a{
display:flex;justify-content:space-between;align-items:center;
padding:10px 12px;border-radius:var(--r-sm);color:var(--mut);
margin-bottom:2px;font-size:13.5px;font-weight:500;
transition:background var(--e),color var(--e);
}
.nav a:hover{background:var(--card);color:var(--fg)}
.nav a.on{
background:linear-gradient(180deg,var(--acc),var(--acc2));
color:#fff;box-shadow:0 6px 16px -8px var(--acc-glow);
}
/* ★ min-width:0 不是装饰：.main 是 flex 项，默认 min-width:auto = 「不小于内容的
min-content 宽」。后台 15 列的用户表 min-content 比可用宽度还宽，于是 .main
拒绝收缩、整个页面横向溢出（实测 1440 宽下右侧多出 18px）。
加了它，宽表由 .tw 自己的 overflow:auto 承担横滚，页面不再被撑出去。 */
.main{flex:1;min-width:0;padding:24px 28px 64px;max-width:1400px}
.head{display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:18px;gap:14px;flex-wrap:wrap}
.head h2{font-size:20px;font-weight:680;letter-spacing:-.3px}
.head p{color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.7}
.head .sub{color:var(--mut);font-size:12.5px;margin-top:5px;line-height:1.7}
/* ═══════════════ ⑤ 组件 ═══════════════ */
/* ── 卡片 ── */
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g4,.g3,.g2{grid-template-columns:1fr}
.layout{flex-direction:column}.side{width:auto;flex:none;height:auto;position:static}}
.card{
background:var(--card);
background-image:linear-gradient(180deg,var(--card-top),transparent 90px);
border:1px solid var(--line);border-radius:var(--r);
padding:16px;box-shadow:var(--sh-1);min-width:0;
}
.card h3{font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:12px;
letter-spacing:.2px}
.kpi{font-size:27px;font-weight:680;letter-spacing:-.7px;line-height:1.15;
font-variant-numeric:tabular-nums}
.kpi small{font-size:13px;color:var(--mut);font-weight:500;margin-left:3px;letter-spacing:0}
.sub{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.7}
.hl{color:var(--gold)}.ok{color:var(--ok)}.bad{color:var(--bad)}
.blue{color:var(--acc)}.pur{color:var(--purple)}
.hint{font-size:12px;color:var(--dim);line-height:1.75}
/* ── 表格 ── */
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r);
background:var(--card);box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);
white-space:nowrap}
th{background:var(--bg2);color:var(--mut);font-weight:600;font-size:11.5px;
letter-spacing:.4px;position:sticky;top:0;z-index:1}
tbody tr{transition:background var(--e)}
tbody tr:hover{background:var(--card2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{font-weight:500}
.empty{padding:44px 24px;text-align:center;color:var(--dim);font-size:13px}
/* ── 药丸标签 ── */
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
border:1px solid var(--line2);background:var(--card2);color:var(--mut)}
.tag.ok{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
.tag.warn{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.tag.bad{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.tag.blue{color:var(--acc);border-color:var(--acc-bd);background:var(--acc-bg)}
.tag.pur{color:var(--purple);border-color:var(--pur-bd);background:var(--pur-bg)}
.tag.gold{color:var(--gold);border-color:var(--gold-bd);background:var(--gold-bg)}
/* ── 分段控件（佣金 / 提现 这种"同一页两个视图"）── */
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);
background:var(--card2);border:1px solid var(--line);margin-bottom:12px}
/* ★ .seg 自带的 margin-bottom:12px 是为「独占一行」的分段控件写的。
放进工具栏或一行里时它会把整个容器撑高 12px，而且因为 align-items:center
是按含 margin 的外框居中，分段控件会**明显偏上**、和旁边的搜索框对不齐。
这两处一律清掉——间距交给容器。 */
.team-bar .seg,.line-row .seg{margin-bottom:0}
.seg-btn{
flex:1;min-height:0;padding:8px 12px;border:0;background:transparent;
color:var(--mut);font-weight:600;font-size:13.5px;border-radius:7px;box-shadow:none;
}
.seg-btn:hover{background:transparent;color:var(--fg2)}
.seg-btn.on,.seg-btn.on:hover{background:var(--card);color:var(--fg);box-shadow:var(--sh-1)}
/* ── 筛选小片 ── */
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.chip{
flex:none;min-height:0;padding:6px 14px;border-radius:var(--r-pill);
font-size:12.5px;font-weight:600;background:var(--card2);
border:1px solid var(--line2);color:var(--mut);box-shadow:none;
}
.chip:hover{color:var(--fg2)}
.chip.on,.chip.on:hover{background:var(--acc-bg);border-color:var(--acc-bd);color:var(--acc)}
/* ── 进度条 ── */
.bar{height:8px;background:var(--card2);border-radius:var(--r-pill);
overflow:hidden;margin:10px 0 7px}
.bar > i{display:block;height:100%;background:var(--grad);
border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1)}
/* ── 提示条 ── */
.toast{position:fixed;right:20px;bottom:20px;z-index:99;
display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast > div{
background:var(--card3);border:1px solid var(--line2);
border-left:3px solid var(--acc);
padding:12px 17px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
max-width:400px;box-shadow:var(--sh-3);animation:toast-in .22s var(--e);
}
.toast > div.err{border-left-color:var(--bad)}
.toast > div.suc{border-left-color:var(--ok)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
/* ── 弹层：桌面居中卡片，手机从底部升起 ── */
.mask{position:fixed;inset:0;background:#000000a6;backdrop-filter:blur(3px);
display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
/* 浅色皮肤下用浅一点的遮罩 —— 黑色蒙层会把整屏的玻璃感压死 */
html[data-theme="light"] .mask{background:#1018282e;backdrop-filter:blur(5px)}
.modal{
background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
padding:22px;width:100%;max-width:620px;max-height:88vh;overflow:auto;
box-shadow:var(--sh-3);
}
.modal h3{font-size:16px;font-weight:650;margin-bottom:16px;color:var(--fg)}
/* ── 行 / 表单行 ── */
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.row > *{flex:1;min-width:130px}
.row .fix{flex:none;min-width:0}
/* ── 提示框 ── */
.warnbox{background:var(--warn-bg);border:1px solid var(--warn-bd);
border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;
color:var(--warn);line-height:1.75;margin-bottom:16px}
.infobox{background:var(--acc-bg);border:1px solid var(--acc-bd);
border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;
color:var(--acc);line-height:1.75;margin-bottom:16px}
/* 提示框里的强调文字别跟着变成同色 —— 会糊成一片 */
.warnbox b,.infobox b{color:var(--fg)}
/* ── 标签页（运营后台用）── */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:transparent;border:1px solid transparent;color:var(--mut)}
.tabs button.on{background:var(--card);border-color:var(--line2);color:var(--fg)}
/* ── 登录页 ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:20px;background:
radial-gradient(900px 500px at 50% -10%,var(--acc-soft),transparent 70%),var(--bg)}
.login{width:100%;max-width:396px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);padding:32px 30px;box-shadow:var(--sh-3)}
.login h1{font-size:20px;font-weight:680;margin-bottom:7px;letter-spacing:-.3px}
.login p.s{color:var(--mut);font-size:12.5px;margin-bottom:24px;line-height:1.7}
.login .f{margin-bottom:15px}
/* ── 邀请码：等宽 + 字距，读起来才像"码"而不是"词" ── */
.invite-code{font-family:ui-monospace,Consolas,monospace;font-size:24px;
letter-spacing:4px;color:var(--gold);font-weight:700}
/* ═══════════════ ⑥ 段位视觉 ═══════════════ */
.rank{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* ── 段位图标：盾形勋章 + 代号 + 星级 ──
原来是 82×82 的方块里塞两行 23px 文字（像张头像图）；
换成图标后：视觉重量落在图形上，文字降成一行 12.5px 小标签。
颜色全部来自 .rank-v0..v5 的 color（currentColor），改色一处生效。 */
.rank-badge{flex:none;display:flex;flex-direction:column;align-items:center;
gap:3px;font-weight:800;text-align:center}
.rank-badge .rk-ic{width:50px;height:54px;display:block;
filter:drop-shadow(0 3px 7px #00000038)}
.rank-badge .rk-sh{/* 填充由 SVG 里的线性渐变给出（跟随 currentColor） */
/* ★ 这道细描边是必须的：段位色都是亮色，压在白色卡片上对比度只有 1.3~2.5，
光靠投影边界会发飘（白银 1.31 几乎看不见）。加一圈淡墨描边把轮廓钉住。 */
stroke:#000;stroke-opacity:.26;stroke-width:.9}
/* 圆形托盘：盾牌背后一层淡淡的段位色圆盘（原来是旧徽章留下的深色方块）。
用 currentColor + 低透明度，深浅两套皮肤都不用单独适配。 */
.rank-badge .rk-disc{fill:currentColor;fill-opacity:.13;
stroke:currentColor;stroke-opacity:.30;stroke-width:1}
/* 顶部一条高光，让盾牌有金属感而不是一块纯色 */
.rank-badge .rk-hl{fill:#fff;opacity:.24}
.rank-badge .rk-cd{font-size:15px;font-weight:800;fill:#14110c;
letter-spacing:.4px;font-family:inherit}
.rank-badge .rk-st circle{fill:#14110c;opacity:.62}
.rank-badge b{font-size:12.5px;line-height:1.2;letter-spacing:.4px;
color:currentColor;white-space:nowrap}
/* ── 段位色：只给 color，别的都不要 ──
★ 这里原来还有 background:linear-gradient(...) + border-color，那是给旧的
82×82 方块徽章用的。图标版把方块去掉后，这层深色渐变就变成盾牌背后一块
突兀的【深色方块】（浅色主题下尤其明显）。改色只需改这一个值。 */
.rank-v0{color:#d19a6a}
.rank-v1{color:#dbe2ea}
.rank-v2{color:#fcd34d}
.rank-v3{color:#5eead4}
.rank-v4{color:#a5c8ff}
.rank-v5{color:#f9a8d4}
.rank-ladder{display:flex;gap:5px;margin-top:10px;max-width:320px}
.rank-ladder i{flex:1;height:6px;border-radius:var(--r-pill);background:var(--card2)}
.rank-ladder i.on{background:var(--grad-gold);box-shadow:0 0 12px -2px var(--gold)}
.rank-tag{display:inline-block;padding:2px 10px;border-radius:8px;font-size:12px;
font-weight:700;border:1px solid var(--line2);background:var(--card2);color:var(--mut)}
.rank-tag.up{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
.rank-tag.down{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.rank-tag.keep{color:var(--mut)}
.rank-tag.new{color:var(--acc);border-color:var(--acc-bd);background:var(--acc-bg)}
.close-tag{font-size:12.5px;color:var(--mut);margin-top:7px;line-height:1.75}
/* ═══════════════ ⑦ App 外壳（顶栏 / 底栏）═══════════════
桌面端隐藏 —— 桌面用左侧栏。手机端才有：有顶栏和底部标签栏才叫 App。 */
.appbar,.tabbar{display:none}
/* 首页 hero 卡 */
.hero .hello{font-size:18px;font-weight:680;color:var(--fg);letter-spacing:-.2px}
/* ★ 首页只留一个"大数字"：可提现。其余都是小字配角 ——
一屏里最重要的东西只能有一个，多了就等于没有。 */
.hero .big{font-size:38px;font-weight:700;letter-spacing:-1.4px;line-height:1.08;
font-variant-numeric:tabular-nums;color:var(--ok);margin-top:2px}
.hero .metaline{display:flex;flex-wrap:wrap;gap:6px 15px;margin-top:10px;
font-size:12.5px;color:var(--dim)}
.hero .metaline b{color:var(--fg2);font-weight:600;font-variant-numeric:tabular-nums}
/* 段位那一行贴在钱包卡底部，一条分隔线隔开 —— 它是"钱包的注解"，不是独立一块 */
.hero .levelrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
font-size:13px;color:var(--fg2)}
.hero .levelrow .more{margin-left:auto;font-size:12.5px;color:var(--acc);cursor:pointer}
.hero .rankline{display:flex;align-items:center;gap:10px;margin-top:12px;
font-size:14px;color:var(--fg2)}
.hero .pgrid{display:grid;gap:8px;margin-top:13px}
.hero .pgrid.cols3{grid-template-columns:repeat(3,1fr)}
.hero .pgrid.cols2{grid-template-columns:repeat(2,1fr)}
.hero .pgrid>div{background:var(--card2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:10px 11px;min-width:0}
.hero .pgrid span{display:block;font-size:11.5px;color:var(--dim);
margin-bottom:4px;font-weight:500}
.hero .pgrid b{font-size:16.5px;font-weight:680;white-space:nowrap;
font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.hero .pgrid b.ok{color:var(--ok)}
.hero .pgrid b.blue{color:var(--acc)}
.hero .pgrid b.pur{color:var(--purple)}
/* 一行式卡片：邀请码这种"一行就够"的东西用，别为它开一张大卡 */
.line-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.line-row .grow{flex:1;min-width:0}
/* ══ 事实芯片：把"由于 A，所以 B，另外 C"这种整句拆成一排小标签 ══════
整句得读完才知道在说什么；芯片扫一眼就完了，长度还可控、不会折行折得难看。
凡是**说明性**的长句（规则注解、口径说明、状态解释）都用它，别再拿 .hint 铺一段话。
例："段位由上月直推团队的业绩决定，每月结算一次" → [上月直推业绩定级] [每月结算] */
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.facts.tight{margin-top:7px}
.facts.plain{margin-top:0}
.fact{display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px;line-height:1.6;
background:var(--card2);border:1px solid var(--line);color:var(--mut);
white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.fact b{color:var(--fg2);font-weight:700}
.fact.acc{background:var(--acc-bg);border-color:var(--acc-bd);color:var(--acc)}
.fact.acc b{color:var(--acc)}
.fact.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.fact.ok b{color:var(--ok)}
.fact.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.fact.warn b{color:var(--warn)}
.fact.bad{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad)}
.fact.bad b{color:var(--bad)}
.fact.gold{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)}
.fact.gold b{color:var(--gold)}
.fact.go{cursor:pointer}
.fact.go::after{content:'›';margin-left:1px;opacity:.75}
/* ══ 业绩概览：一个大数字 + 一根分层条 + 三个小格 ══════════════════
把 6 个数字平铺成 label/value 列表等于没设计 —— 眼睛分不出主次，
扫过去是一堆字。金额给大字号当主角，人数和单数降级成小格，
直推/间推的占比用一根条画出来（并排两个数字要心算，一根条不用）。 */
.stat-hero{margin:14px 0 0}
.stat-hero .lb{display:block;font-size:12px;color:var(--mut)}
.stat-hero .v{display:block;font-size:32px;font-weight:750;line-height:1.15;
color:var(--fg);letter-spacing:-.8px;font-variant-numeric:tabular-nums;
margin-top:2px}
.split{display:flex;height:9px;border-radius:99px;overflow:hidden;
background:var(--card3);margin:13px 0 9px}
.split>i{display:block;height:100%}
.split>i.a{background:var(--acc)}
.split>i.b{background:var(--purple)}
.split-lg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mut)}
.split-lg span{display:inline-flex;align-items:center;gap:6px}
.split-lg .dot{width:8px;height:8px;border-radius:99px;flex:none}
.split-lg .dot.a{background:var(--acc)}
.split-lg .dot.b{background:var(--purple)}
/* ── 收益趋势：近 N 个月佣金柱 ─────────────────────────────────────
为什么用柱子不用折线：只有 6 个点、手机上每列宽 50px 出头，
折线在这个间距里看起来只是一段斜线；柱子能同时表达「有」和「没有」。
★ 每个月都留一根【浅色轨道】，柱里是填充 —— 只画填充的话，读者分不清
「这个月没赚到」和「这里没画」，也不知道柱高是相对谁算的（比例条同理）。 */
.tr-chart{display:flex;align-items:flex-end;gap:7px;height:104px;margin-top:14px}
.tr-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.tr-col .v{height:14px;line-height:14px;font-size:10px;color:var(--mut);
text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ★ 轨道用 --line2，不能用 --card2：默认皮肤是浅色毛玻璃，--card2 是
「半透明白」，铺在同样半透明的白卡上 = 什么都看不见（踩过，量出来
backgroundColor 是 rgba(255,255,255,.58)，比卡片还白）。
--line2 在两个皮肤里都是「比表面重一点的中性色」，轨道才立得住。 */
.tr-track{width:100%;flex:1;display:flex;align-items:flex-end;overflow:hidden;
background:var(--line2);border-radius:5px}
.tr-track i{display:block;width:100%;height:0;border-radius:5px 5px 0 0;
background:linear-gradient(180deg,var(--acc),var(--acc2))}
/* 当月那根换成金色收尾 —— 一眼知道「现在到哪个月了」 */
.tr-col.now .tr-track i{background:linear-gradient(180deg,var(--gold),var(--purple))}
.tr-lbs{display:flex;gap:7px;margin-top:7px}
.tr-lbs span{flex:1;text-align:center;font-size:10.5px;color:var(--dim)}
.tr-lbs span.now{color:var(--fg2);font-weight:600}
/* ── 欠款态：退款冲正会把可提现余额扣成负数。
一个负号不够 —— 用户第一反应是「系统算错了」，所以整块换色 + 一句解释。 */
.card.debt{background:var(--bad-bg);border-color:var(--bad-bd)}
.card.debt .hint{color:var(--bad)}
/* ── 页头数字：一个大数字 + 一行小字 ──
原来 3 个数字平铺成 3 格，扫过去分不出主次（眼睛要先比大小才知道哪个是主角）。 */
.stat-hero .sub{display:block;margin-top:4px;font-size:12px;color:var(--mut);
font-variant-numeric:tabular-nums}
.stat-hero .sub b{color:var(--fg2);font-weight:650}
button.wide{width:100%;margin-top:14px;justify-content:center}
/* ── 一行参数：把「标签+数值」的芯片墙压成一行灰字 ──
5 个芯片就是一堵墙；参数放一行、字号降一级，才像 App 的页脚而不是公告栏。 */
.param-line{margin-top:10px;font-size:11px;line-height:1.65;color:var(--dim);
font-variant-numeric:tabular-nums}
/* ── 规格表：把「· 标签：值」的竖排清单变成两列表 ──
竖排清单只能一行一行读；两列表可以扫一眼直接找到要的那条。 */
table.spec{width:100%;border-collapse:collapse;font-size:12.5px}
table.spec td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;
line-height:1.55}
table.spec tr:last-child td{border-bottom:none}
table.spec td:first-child{color:var(--mut);width:72px;white-space:nowrap;
padding-right:10px}
table.spec td b{color:var(--fg);font-weight:700}
/* 值列必须能换行 —— 全局 th,td 是 white-space:nowrap，
不覆盖的话一个长句会把整张表顶到 545px（手机上就得横滚）。 */
table.spec td+td,table.spec td:last-child{white-space:normal}
.note{margin-top:11px;font-size:11px;line-height:1.65;color:var(--dim)}
/* ── PC 中控台的待办列表：**直接复用 App 的「提醒条」组件**（.todos > .todo）——
同一件事在两个端用同一套视觉，不另造一个长得差不多的东西（造了必分叉）。
只把它的外壳去掉：这里是嵌在卡片里的，卡片套卡片会脏。
★ 别再用 .todo / .todo-row 起名字：.todo 是 App 提醒条已有的类，
同名会被后一条规则覆盖（实测：自造的 .todo 容器被压成 flex 行，
三条待办的宽度变成 516/449/445px，跟标题对不齐）。 */
.card .todos{background:transparent;border:0;box-shadow:none;margin:0}
.card .todos .todo{padding:11px 2px}
.card .todos .todo:first-child{padding-top:6px}
/* ── 邀请页：多条链接一行一条 ──
原来每条链接一张卡、各带两个大按钮，两条链接 = 同一套动作在手机上写两遍。
一行一条、右侧只留小按钮，卡片从 2 张变 1 张。 */
.link-row{display:flex;align-items:center;gap:10px;margin-top:13px}
.link-row .fx{min-width:0;flex:1}
.link-row .fx b{display:block;font-size:13.5px;color:var(--fg);font-weight:650}
.link-row .fx span{display:block;font-size:11.5px;color:var(--mut);line-height:1.5;
margin-top:1px}
.link-row .btns{display:flex;gap:7px;flex:none}
.link-row .btns button{min-height:38px;padding:0 13px;font-size:13px}
/* ── 推广素材编辑（PC 中控）：海报文案两列 + 文案列表 ──
两列是「左边编辑右边预览」—— 改字就能看见海报变成什么样，不用去 App 里翻。 */
.mat-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(240px,340px);gap:20px;
margin-top:12px;align-items:start}
.mat-item{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;
margin-top:12px;background:var(--card2)}
.mat-item.off{opacity:.55}
.mat-top{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.mat-no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--card3);
color:var(--mut);font-size:11.5px;display:flex;align-items:center;justify-content:center}
.mat-on{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut);
white-space:nowrap;flex:none}
.mat-item textarea{width:100%;min-height:62px;resize:vertical}
.mat-pv{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.65}
.mat-item.off .mat-pv{color:var(--dim)}
/* 新消息页内横幅（App 开着时的"叫醒"）：顶部滑下来一条，6 秒自己收回。
★ 用 fixed 才不会被卡片挤走；点一下=已读并跳到消息页。 */
.msg-bar{position:fixed;left:12px;right:12px;top:12px;z-index:60;display:none;
align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r);
background:var(--acc);color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.34);
font-size:13.5px;cursor:pointer;border:0}
.msg-bar.on{display:flex;animation:msgIn .22s ease-out}
.msg-bar b{font-weight:700}
.msg-bar span{margin-left:auto;opacity:.85;font-size:12.5px}
.msg-bar .dot{background:#fff;opacity:.95}
@keyframes msgIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
/* 推广海报预览：宽固定、高自适应（1080×1350 的图在手机上占满一屏宽刚好） */
.qr-img{display:block;max-width:280px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r)}
.poster-img{display:block;width:100%;border-radius:var(--r);border:1px solid var(--line);
background:var(--card2)}
.urlbox{word-break:break-all;font-size:12px;background:var(--card2);padding:8px 10px;
border-radius:6px;font-family:ui-monospace,Consolas,monospace;color:var(--mut);
margin-top:6px}
/* ── 段位卡片：图标 + 代号 + 门槛 + 四个比例 ──
规则页和段位权益页共用（lvCard）。比例写法在上方给一行说明，
卡里只放数字，省掉「直推/间推」重复标签的宽度。 */
/* ★ 内边距对所有卡片一视同仁（含「当前」那张）。
之前只给 .on 加左右内边距，结果它整块的列都相对其它卡偏了 9px —— 量出来的。 */
.lv-card{display:flex;align-items:center;gap:12px;padding:11px 9px;
border-bottom:1px solid var(--line)}
.lv-card:last-child{border-bottom:none}
.lv-card.on{background:rgba(180,140,60,.09);border-radius:var(--r);
border-bottom-color:transparent}
.lv-card .rank-badge{flex:none}
.lv-card .rank-badge .rk-ic{width:44px;height:47px}
.lv-card .rank-badge b{font-size:11.5px}
.lvc-b{flex:1;min-width:0}
.lvc-top{display:flex;align-items:center;gap:8px}
.lvc-cd{font-size:13px;color:var(--fg);font-weight:750}
.lvc-need{margin-left:auto;font-size:11.5px;color:var(--mut);
font-variant-numeric:tabular-nums;white-space:nowrap}
.lvc-need b{color:var(--fg);font-weight:700}
.lvc-cur{font-size:11px;font-weight:750;color:var(--gold);white-space:nowrap}
/* 三列固定宽（标签 / 直推 / 间推）—— 用 grid 而不是 flex，
这样跨卡片的同一列一定落在同一条竖线上，方便上下对比。 */
/* 两列等宽弹性列（不是固定 px）：最宽的值是「直推 3.5%」≈56px，
固定 54px 会溢出去蹭到下一列。1fr 各占一半，跨卡片也一定对齐。 */
.lvc-r{display:grid;grid-template-columns:26px 1fr 1fr;gap:7px;align-items:baseline;
margin-top:5px;font-size:12.5px;font-variant-numeric:tabular-nums}
.lvc-r .k{font-size:10.5px;color:var(--dim)}
.lvc-r b{font-weight:700;white-space:nowrap}
/* 空的分段按钮：保留可见（0 本身是数据），但不可点（免得点进空页） */
.seg-btn:disabled,.seg-btn:disabled:hover{opacity:.42;cursor:default;
background:transparent;color:var(--mut);box-shadow:none}
.split-lg b{color:var(--fg2);font-variant-numeric:tabular-nums}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mini3>div{background:var(--card2);border-radius:var(--r-sm);padding:10px 12px}
/* 四格：人数 / 单数 / 已出单 / 未出单 —— 格子窄了，居中比左对齐好看 */
.mini4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.mini4>div{background:var(--card2);border-radius:var(--r-sm);padding:10px 6px;
text-align:center}
.mini4 b{display:block;font-size:19px;font-weight:700;color:var(--fg);
line-height:1.2;font-variant-numeric:tabular-nums}
.mini4 span{display:block;font-size:11px;color:var(--dim);margin-top:3px}
/* 成员行里的「带 N 人 / 未带人」：区分谁在帮我带人，谁拉了人没动 */
.tm-team{font-style:normal;font-weight:600;color:var(--purple)}
.tm-none-tag{font-style:normal;color:var(--dim)}
.mini3 b{display:block;font-size:19px;font-weight:700;color:var(--fg);
line-height:1.2;font-variant-numeric:tabular-nums}
.mini3 span{display:block;font-size:11px;color:var(--dim);margin-top:3px}
.stat-note{font-size:11.5px;color:var(--dim);margin-top:11px;line-height:1.7}
/* ══ 团队页：成员排名行 ══════════════════════════════════════════
一行一个成员：名次 / 是谁 / 金额。
排名靠**顺序**表达（按金额降序 + 名次号 + 前三名金色），不额外统计占比 ——
成员之间比的是绝对额，算一个「占本层级百分之几」既不指导行动、又要多一个要维护的数。 */
.tm-row{display:flex;align-items:center;gap:10px;padding:10px 0;
border-bottom:1px solid var(--line)}
.tm-row:last-child{border-bottom:0}
.tm-row .rk{width:22px;flex:0 0 22px;text-align:center;font-size:12.5px;
font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.tm-row .rk.top{color:var(--gold)}
.tm-row .who{flex:1;min-width:0}
.tm-row .who b{display:block;font-size:13.5px;font-weight:600;color:var(--fg);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-row .who span{display:block;font-size:11px;color:var(--dim);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-row.zero .who b{color:var(--mut)}
.tm-row .amt{text-align:right;flex:none}
.tm-row .amt b{display:block;font-size:13.5px;font-weight:700;color:var(--fg);
font-variant-numeric:tabular-nums}
/* 工具栏：分段控件 + 搜索框同一行，放不下就换行（窄屏很常见） */
.team-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.team-bar .seg{flex:none}
.team-bar input{flex:1;min-width:120px;margin:0}
/* 搜索框补个放大镜：光有占位文字，看着就是普通输入框，不像能搜东西。
data URI 里不能用 currentColor，用中性灰，三套皮肤下都不突兀。 */
#teamQ{padding-left:33px;background-repeat:no-repeat;background-position:11px center;
background-size:15px 15px;
background-image:url("data:image/svg+xml;utf8,")}
/* ══ 升级推进条：还差多少"一眼看到"，不用读数字 ══════════════════ */
.prog{height:8px;border-radius:99px;background:var(--card3);overflow:hidden;
margin:10px 0 8px}
.prog>i{display:block;height:100%;border-radius:99px;background:var(--acc);
transition:width var(--e)}
.prog.warn>i{background:var(--warn)}
.prog.ok>i{background:var(--ok)}
/* ══ 段位卡里的两行：本月业绩 / 下月预判 ══ */
.lv-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nx-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
padding-top:12px;border-top:1px solid var(--line)}
/* ══ 报单流（团队购买动态）═════════════════════════════════════
一行一件事。左边一个点表示层级：实心=直推，空心=间推。
时间走相对值（刚刚 / 10 分钟前）——"动态"要显得是刚发生的，
写成 10-12 16:04 就完全没有"刚刚有人购买"的感觉了。 */
.feed-row{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--line)}
.feed-row:last-child{border-bottom:0}
.feed-row .dot{width:8px;height:8px;flex:0 0 8px;border-radius:99px;
background:var(--acc)}
.feed-row .dot.ind2{background:transparent;border:2px solid var(--acc);opacity:.5}
.feed-row .fx{flex:1;min-width:0}
.feed-row .fx b{display:block;font-size:13.5px;font-weight:600;color:var(--fg);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-row .fx span{display:block;font-size:11px;color:var(--dim);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-row .fv{text-align:right;flex:none}
.feed-row .fv b{display:block;font-size:13.5px;font-weight:700;color:var(--ok);
font-variant-numeric:tabular-nums}
.feed-row .fv span{display:block;font-size:11px;color:var(--dim);margin-top:2px}
/* ── 站内消息行（复用 .feed-row 的骨架）──────────────────────────
和报单流的区别：这里正文是一句人话（佣金多少、为什么扣回），
不能像报单流那样单行截断 —— 放开换行，标题也不加省略号。
未读的整条高亮 + 左侧色带；读过的降一档（没读过的才值得看）。 */
.feed-row.msg{padding:11px 4px;cursor:pointer;align-items:flex-start;transition:var(--e)}
.feed-row.msg:hover{background:var(--card2)}
.feed-row.msg .dot{margin-top:6px}
.feed-row.msg .fx b,.feed-row.msg .fx span{white-space:normal;overflow:visible;
text-overflow:clip;line-height:1.55}
.feed-row.msg .fx span{margin-top:3px}
.feed-row.msg.unread{background:var(--acc-bg);border-left:3px solid var(--acc);
border-radius:var(--r-sm);padding-left:11px}
.feed-row.msg.read .fx b{color:var(--fg2)}
.feed-row.msg.read .dot{background:transparent;border:2px solid var(--line2)}
.feed-row.msg .fv{min-width:56px}
/* ══ 提醒条：图标 + 标题 + 数值右对齐 ══════════════════════════════
原来这里是三行整句（"可提现 ¥535.84，已够最低提现额"），
那是公告栏的写法：要读完整句才知道在说什么，而且三行一样重、没有主次。
改成 App 里通行的"图标 + 标题 + 右侧数值"：
眼睛扫左边图标和右边数字就够了，中间那行只是注解。 */
.todos{background:var(--card);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh-1)}
.todo{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
border-bottom:1px solid var(--line);transition:background var(--e)}
.todo:last-child{border-bottom:0}
.todo:hover{background:var(--card2)}
.todo:active{background:var(--card3)}
.todo .ic{width:28px;height:28px;flex:0 0 28px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:var(--acc-bg);color:var(--acc)}
.todo .ic svg{width:16px;height:16px;display:block}
.todo.ok .ic{background:var(--ok-bg);color:var(--ok)}
.todo.warn .ic{background:var(--warn-bg);color:var(--warn)}
.todo.bad .ic{background:var(--bad-bg);color:var(--bad)}
.todo .tx{flex:1;min-width:0}
.todo .tx b{display:block;font-size:13.5px;font-weight:600;color:var(--fg);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo .tx span{display:block;font-size:11px;color:var(--dim);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo .val{font-style:normal;font-size:13.5px;font-weight:700;flex:none;
font-variant-numeric:tabular-nums;color:var(--fg2);letter-spacing:-.2px}
.todo.ok .val{color:var(--ok)}
.todo.warn .val{color:var(--warn)}
/* ★ 补上「急件」色：原来只定义了 ok / warn 两种，急件行的数值会退回默认灰
（实测：同一条列表里黄行数值是琥珀、红行却是灰的，看着像漏了样式）。 */
.todo.bad .val{color:var(--bad)}
.todo .go{color:var(--dim);font-size:17px;line-height:1;flex:none}
/* 「我的」：头像卡 + 菜单 */
.me-card{display:flex;align-items:center;gap:14px}
.me-card .avatar{width:50px;height:50px;flex:0 0 50px;border-radius:50%;
background:var(--grad);color:#fff;display:flex;align-items:center;
justify-content:center;font-size:20px;font-weight:700;box-shadow:var(--sh-2)}
.me-card .me-name{font-size:16.5px;font-weight:650;color:var(--fg)}
.me-card .me-sub{font-size:12.5px;color:var(--dim);margin-top:4px}
.menu{margin-top:14px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 15px;cursor:pointer;border-bottom:1px solid var(--line);
transition:background var(--e)}
.menu a:last-child{border-bottom:0}
.menu a:hover{background:var(--card2)}
.menu a:active{background:var(--card3)}
.menu a b{display:block;font-size:14.5px;font-weight:600;color:var(--fg)}
.menu a span{display:block;font-size:12px;color:var(--dim);margin-top:3px}
.menu a i{font-style:normal;font-size:20px;color:var(--dim);flex:0 0 auto;
transition:transform var(--e)}
.menu a:active i{transform:translateX(2px)}
/* ═══════════════ 折叠块 ═══════════════
「点一下才展开」。原生 ：脚本报错时照样能展开，WebView 里不会白屏。 */
details.fold{
background:var(--card);border:1px solid var(--line);
border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:var(--sh-1);
}
details.fold>summary{
list-style:none;cursor:pointer;padding:15px 16px;
display:flex;align-items:center;gap:9px;
font-size:14px;font-weight:600;color:var(--fg);
user-select:none;-webkit-tap-highlight-color:transparent;
transition:background var(--e);
}
details.fold>summary::-webkit-details-marker{display:none}
/* 圆形小按钮 + 内嵌箭头：比一根光秃秃的 CSS 三角精致，也让"可点"更明显 */
details.fold>summary::after{
content:'';margin-left:auto;flex:0 0 22px;width:22px;height:22px;
border-radius:50%;background-color:var(--card2);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:12px 12px;
transition:transform var(--e),background-color var(--e);
}
details.fold[open]>summary::after{transform:rotate(180deg);background-color:var(--acc-soft)}
details.fold>summary:hover{background:var(--card2)}
details.fold>summary:active{background:var(--card3)}
details.fold>summary .cnt{font-size:12px;color:var(--dim);font-weight:500;
margin-left:auto;padding-right:2px}
details.fold>.fold-body{padding:0 16px 16px}
details.fold>.fold-body>.tw{border:0;box-shadow:none}
details.fold[open]{border-color:var(--line2)}
/* 迷你折叠：嵌在卡片里收一条长 URL，不抢视觉 */
details.fold.mini{background:transparent;border:0;border-radius:0;
margin:2px 0 10px;box-shadow:none}
details.fold.mini>summary{padding:6px 0;font-size:12px;color:var(--mut);font-weight:500}
details.fold.mini>summary::after{width:16px;height:16px;flex:0 0 16px;background-size:9px 9px}
details.fold.mini>summary:hover{background:transparent}
details.fold.mini>.fold-body{padding:0}
/* ═══════════════ ⑧ 手机端 ═══════════════ */
@media (max-width:700px){
html,body{overflow-x:hidden}
/* ── 表格：手机上把内边距收紧 ──
桌面用的 11px 14px，4 列表格光内边距就吃掉 112px（屏宽才 390）。
收成 8px 6px 能省下 ~64px —— 这是「一屏能不能放下」的关键余量。 */
.tw th,.tw td,table.compact th,table.compact td{padding:8px 6px}
.tw table,table.compact{font-size:12.5px}
body{padding-top:calc(56px + env(safe-area-inset-top));
padding-bottom:calc(66px + env(safe-area-inset-bottom))}
.side{display:none}
.layout{display:block;min-height:0}
.main{padding:14px 14px 22px;max-width:100%}
/* ── 顶部栏：半透明 + 毛玻璃，滚动时内容从下面透过去 ── */
.appbar{
display:flex;align-items:center;gap:2px;
position:fixed;top:0;left:0;right:0;z-index:60;
height:calc(56px + env(safe-area-inset-top));
padding:env(safe-area-inset-top) 8px 0;
background:var(--bg2);border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
.appbar{background:#0b0e13e0;backdrop-filter:blur(20px) saturate(180%)}
html[data-theme="amber"] .appbar{background:#0c0a07e0}
html[data-theme="light"] .appbar{background:#ffffffb8}
}
.appbar .apptitle{flex:1;text-align:center;font-size:16.5px;font-weight:650;
color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
letter-spacing:-.2px}
/* 顶栏品牌名：大写 + 拉开字距，一眼看出这是 App 名不是页面名 */
.appbar .apptitle.wm{font-size:14.5px;font-weight:750;letter-spacing:1.4px;
color:var(--fg)}
/* ── 正文标题：手机端藏掉 ─────────────────────────────────
顶栏已经写着页面名了，正文再写一遍 = 同一个词一屏出现两次。
★ 只在手机端藏 —— **桌面端没有顶栏**，正文 h2 是它唯一的标题。
从标记里删掉会把桌面端一起弄成没标题，那是拿手机端的毛病去罚桌面端。
dash 页的 h2 是用户姓名（不是页面名），没加 .ptitle，不受影响。 */
.head h2.ptitle{display:none}
.head.titleonly{display:none}
.appbar .back,.appbar .appspacer{width:44px;flex:0 0 44px}
.appbar .back{background:none;border:0;color:var(--fg);font-size:30px;
line-height:1;padding:0 0 6px;min-height:0;cursor:pointer;box-shadow:none}
.appbar .back:hover{background:transparent}
.appbar .back:active{opacity:.45;transform:none}
/* ── 底部标签栏 ── */
.tabbar{
display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
background:var(--bg2);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);
}
@supports (backdrop-filter:blur(1px)){
.tabbar{background:#0b0e13e0;backdrop-filter:blur(20px) saturate(180%)}
html[data-theme="amber"] .tabbar{background:#0c0a07e0}
html[data-theme="light"] .tabbar{background:#ffffffc2}
}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:4px;padding:8px 0 7px;cursor:pointer;
color:var(--dim);font-size:11px;font-weight:600;position:relative;
-webkit-tap-highlight-color:transparent;user-select:none;
transition:color var(--e)}
.tabbar a i{display:flex;align-items:center;justify-content:center;
width:24px;height:24px;font-style:normal}
.tabbar a i svg{width:24px;height:24px;display:block;transition:transform var(--e)}
.tabbar a span{line-height:1.1}
/* 选中：顶部一小段指示条 + 图标描重 + 上浮 —— 三处同时给信号 */
.tabbar a.on{color:var(--acc)}
.tabbar a.on::before{content:'';position:absolute;top:0;left:50%;
transform:translateX(-50%);width:22px;height:2.5px;border-radius:0 0 3px 3px;
background:var(--acc)}
.tabbar a.on i svg{stroke-width:2.3;transform:translateY(-1px)}
.tabbar a:active{opacity:.55}
/* 有未读消息：底部「我的」右上挂一个红点 ——
不点进去也能知道有东西，这是「消息」这个功能能不能被用起来的前提。 */
.tabbar a.has-dot::after{content:'';position:absolute;top:6px;left:calc(50% + 7px);
width:7px;height:7px;border-radius:99px;background:var(--bad);
box-shadow:0 0 0 2px var(--bg2);z-index:1}
/* ── 内容微调 ── */
.head{margin-bottom:14px}
.head h2{font-size:17.5px}
.head p,.head .sub{font-size:12.5px}
button{min-height:44px;font-size:14px}
button.sm{min-height:34px}
.seg-btn,.chip{min-height:0}
.row{gap:9px}
.row>button{min-width:0}
.card{padding:15px}
.kpi{font-size:25px}
/* 表格横向滚动，别把页面撑爆。
★ 但「已经按手机宽度重排过」的表必须豁免 —— 不豁免就会被强行拉到 520px，
重排白做（踩过：段位表压到 3 列了还是 520px，查了半天才发现是这条）。
lv-ladder=段位 3 列 · tt=团队明细 4 列 · spec=规则规格表 · compact=业绩/段位摘要。 */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:none}
.tw table{min-width:520px}
.tw table.compact,.tw table.tt,.tw table.lv-ladder,.tw table.spec{min-width:0}
.hide-sm{display:none !important}
/* ── 弹窗：手机上从底部升起，比居中弹窗顺手得多 ── */
.mask{padding:0;align-items:flex-end;z-index:100}
.modal{width:100%;max-width:100%;max-height:88vh;
border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
padding:20px 16px calc(20px + env(safe-area-inset-bottom));
animation:sheet-up .26s cubic-bezier(.2,.9,.25,1)}
.modal::before{content:'';display:block;width:38px;height:4px;
border-radius:var(--r-pill);background:var(--line2);margin:-8px auto 14px}
@keyframes sheet-up{from{transform:translateY(100%)}}
.hero .pgrid.cols3{gap:6px}
.hero .pgrid b{font-size:15.5px}
details.fold>summary{padding:14px 14px}
details.fold>.fold-body{padding:0 14px 14px}
/* toast：贴在底部标签栏上方，别被挡住 */
.toast{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom))}
.toast > div{max-width:none}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important}
}
/* ══ 段位行：名号 → 下一级（黄金 → 铂金），还差多少在右上角
颜色只用现有的 --dim，不引入新变量。 */
.lv-arrow{color:var(--dim);font-size:13px;margin:0 1px}
.lv-next{font-size:15px;font-weight:600;color:var(--dim)}
.lv-need{flex:none;text-align:right;font-size:10px;line-height:1.3;color:var(--dim);
white-space:nowrap;margin-left:auto}
.lv-need b{display:block;font-size:13.5px;color:inherit;opacity:.95;
font-variant-numeric:tabular-nums}
/* ══ 首页热卖爆款：名字 + 卖点 + 价格（价格由服务端给，不写死） */
.hot-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.hot-hd .link-row{margin-left:auto;font-size:12px}
.hot-row{display:flex;align-items:center;gap:10px;padding:9px 0;
border-top:1px solid var(--line)}
.hot-row:first-of-type{border-top:0;padding-top:2px}
.hot-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hot-info b{font-size:14.5px}
.hot-info .hint{font-size:11.5px}
.hot-tag{font-size:10px;padding:1px 5px;border-radius:4px;align-self:flex-start;
color:var(--gold);border:1px solid var(--gold-bd);background:var(--gold-bg)}
.hot-price{flex:none;font-size:15px;font-variant-numeric:tabular-nums}
/* ══════════════════════════════════════════════════════════════
商城 · 商品卡（390px 深色）
规格来源：实测京东/有赞/网易严选/苏宁/淘宝 商品卡几何（见决策记录）
★ 深色三条硬约束：
① --card 对 --bg 仅 1.12:1 → 卡片必须靠 1px --line 描边成型，阴影不可见
② --dim(3.06:1) 只用于 ≥13px 的次要文字，价格/按钮禁止用
③ 实心按钮用深字：白字在 --acc 上仅 3.22:1，--bg 深字 6.01:1
══════════════════════════════════════════════════════════════ */
.mall-head{position:sticky;top:0;z-index:20;height:48px;padding:0 16px;
display:flex;align-items:center;justify-content:space-between;
background:var(--bg);border-bottom:1px solid var(--line)}
.mall-head__t{font-size:17px;font-weight:600;color:var(--fg);letter-spacing:.2px}
.mall-head__n{font-size:12px;color:var(--dim)}
.mall-list{padding:14px 16px 0;display:flex;flex-direction:column;gap:14px}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);
border-radius:14px;overflow:hidden;-webkit-tap-highlight-color:transparent}
.pcard:active{transform:scale(.99);transition:transform .12s ease}
/* 主视觉 16:10（1:1 会占掉 358px 高、把价格和按钮挤出首屏） */
.pcard__hero{position:relative;aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.pcard__hero::after{content:'';position:absolute;inset:auto 0 0 0;height:40px;
background:linear-gradient(to top,var(--card),transparent);pointer-events:none}
.pcard__hero--empty::after{content:'主视觉待补';position:absolute;inset:0;height:auto;
background:none;display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--dim)}
.pcard__badge{position:absolute;left:12px;top:12px;z-index:2;height:24px;padding:0 10px;
display:inline-flex;align-items:center;border-radius:999px;
background:var(--gold-bg);border:1px solid var(--gold-bd);color:var(--gold);
font-size:12px;font-weight:600;line-height:1}
.pcard__body{padding:14px}
.pcard__name{font-size:20px;font-weight:600;line-height:27px;color:var(--fg)}
.pcard__sub{margin-top:3px;font-size:13px;line-height:18px;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard__tags{display:flex;gap:6px;margin-top:10px;height:22px;overflow:hidden}
.pcard__tag{height:22px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;
flex:0 0 auto;font-size:12px;font-weight:500;line-height:1;
background:var(--gold-bg);border:1px solid var(--gold-bd);color:var(--gold)}
.pcard__tag--n{background:transparent;border-color:var(--line);color:var(--dim)}
/* 价格分层：整数 32 / ¥与小数 19（实测 ¥:整数 = 0.60~0.69）*/
.pcard__price{display:flex;align-items:baseline;margin-top:10px;min-height:34px}
.pcard__cur{font-size:19px;font-weight:700;color:var(--gold)}
.pcard__int{font-size:32px;font-weight:700;color:var(--gold);line-height:1;
letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pcard__dec{font-size:19px;font-weight:700;color:var(--gold)}
/* 收益条：用本人段位费率真算（不是编的「已售」）*/
.pcard__earn{margin-top:10px;height:36px;padding:0 11px;border-radius:10px;
display:flex;align-items:center;gap:8px;
background:var(--gold-bg);border:1px solid var(--gold-bd)}
.pcard__earn b{font-size:16px;font-weight:700;color:var(--gold);margin-left:auto;
font-variant-numeric:tabular-nums}
.pcard__earn i{font-size:12px;font-style:normal;color:var(--gold);opacity:.8}
.pcard__acts{display:flex;gap:10px;margin-top:12px}
.pcard__cta,.pcard__alt{height:46px;border-radius:12px;font-size:15px;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;
padding:0 16px;border:0;font-family:inherit;-webkit-tap-highlight-color:transparent}
.pcard__cta{flex:1 1 auto;background:var(--grad-gold);color:var(--bg)}
.pcard__cta:active{filter:brightness(.93)}
.pcard__alt{flex:0 0 auto;min-width:92px;background:transparent;
border:1px solid var(--line);color:var(--fg)}
.pcard__alt:active{background:var(--bg2)}