/* --------------------------------------------------------------------------
   热处理运营控制台 · 独立样式
   与客户 ERP 的 app.css 不共用 —— 这是另一套部署（云端），不该被业务样式牵连。
   -------------------------------------------------------------------------- */
:root {
    --brand: #1f6fbd;
    --brand-2: #155a9c;
    --brand-soft: #eef5fd;
    --ink: #1b2a3a;
    --ink-2: #46596d;
    --ink-3: #7c8c9d;
    --line: #e2e8f0;
    --line-2: #eef2f7;
    --panel: #ffffff;
    --panel-2: #f6f8fb;
    --bg: #f3f6fa;
    --ok: #12795f;
    --ok-soft: #e8f6f1;
    --warn: #b45309;
    --warn-soft: #fdf3e2;
    --warn-line: #f4dfb8;
    --danger: #bf3a2b;
    --danger-soft: #fdeeec;
    --r: 10px;
    --r-sm: 7px;
    --shadow: 0 1px 2px rgba(20, 40, 70, .05), 0 8px 24px -18px rgba(20, 40, 70, .35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
}

body {
    font: 13.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
          "PingFang SC", "Hiragino Sans GB", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: .94em;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.hide { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------------------------- 登录 --------------------------------- */
#login {
    min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 20px;
    background:
        radial-gradient(1100px 520px at 18% -12%, #e4eefb 0%, rgba(228, 238, 251, 0) 62%),
        radial-gradient(820px 420px at 92% 8%, #eaf2fb 0%, rgba(234, 242, 251, 0) 58%),
        var(--bg);
}

.login-card {
    width: 392px; max-width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 40, 70, .05), 0 24px 60px -34px rgba(20, 40, 70, .45);
    padding: 30px 30px 24px;
}

.brand-row { display: flex; align-items: center; gap: 11px; }
.brand-mark {
    width: 38px; height: 38px; flex: none;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #2f7fcb, #185a97);
    color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
    box-shadow: 0 4px 12px -6px rgba(24, 90, 151, .9);
}
.brand-name { font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); letter-spacing: .3px; }

.login-card h1 { font-size: 17px; margin: 22px 0 4px; font-weight: 650; }
.login-card .lead { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-3); }

.fld { margin-bottom: 13px; }
.fld > label {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.fld .hint { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

input.ipt, select.ipt, textarea.ipt {
    width: 100%; height: 38px; padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff; color: var(--ink);
    font: inherit; font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
textarea.ipt { height: auto; padding: 9px 11px; line-height: 1.6; resize: vertical; }
input.ipt:focus, select.ipt:focus, textarea.ipt:focus {
    outline: none; border-color: #8fb9e2;
    box-shadow: 0 0 0 3px rgba(31, 111, 189, .13);
}
input.ipt:disabled { background: var(--panel-2); color: var(--ink-3); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff; color: var(--ink);
    font: inherit; font-size: 12.5px; font-weight: 550;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, border-color .14s, box-shadow .14s, transform .04s;
}
.btn:hover { border-color: #cbd8e6; background: #fafcfe; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.primary {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 4px 12px -8px rgba(31, 111, 189, .95);
}
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: #f0c8c2; }
.btn.sm { height: 27px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn.wide { width: 100%; height: 40px; font-size: 13.5px; margin-top: 6px; }

.alert {
    display: none; margin-bottom: 12px; padding: 8px 11px;
    border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.6;
    background: var(--danger-soft); color: var(--danger);
    border: 1px solid #f3d2cd;
}
.alert.on { display: block; }

.login-foot {
    margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-2);
    font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}

/* ---------------------------------- 框架 --------------------------------- */
#app { display: flex; min-height: 100vh; }

.side {
    width: 210px; flex: none;
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.side .brand-row { padding: 18px 16px 14px; border-bottom: 1px solid var(--line-2); }
.side nav { padding: 10px 8px; flex: 1; }
.nav-item {
    display: flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 10px; margin-bottom: 2px;
    border-radius: 8px; color: var(--ink-2);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.on { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav-item .dot {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 20px; background: var(--warn); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.side-foot {
    padding: 10px 14px 14px; border-top: 1px solid var(--line-2);
    font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}
.side-foot b { color: var(--ink-2); font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 56px; flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 0 22px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 20;
}
.topbar h2 { margin: 0; font-size: 15px; font-weight: 650; }
.topbar .desc { font-size: 12px; color: var(--ink-3); }
.topbar .spacer { flex: 1; }
.who { font-size: 12.5px; color: var(--ink-2); }

.view { padding: 20px 22px 40px; flex: 1; }

/* ---------------------------------- 卡片 --------------------------------- */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.card-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 0 16px;
    border-bottom: 1px solid var(--line-2);
}
.card-head h3 {
    margin: 0; font-size: 13.5px; font-weight: 650;
    display: flex; align-items: center; gap: 7px;
}
.card-head h3 svg { width: 15px; height: 15px; color: var(--brand); }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

/* ---------------------------------- KPI --------------------------------- */
.kpi-row {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.kpi {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); padding: 13px 15px 12px;
    box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.kpi::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand); opacity: .8;
}
.kpi.warn::after { background: #e0a33a; }
.kpi.danger::after { background: var(--danger); }
.kpi.ok::after { background: #2fa37f; }
.kpi .lbl { font-size: 12px; color: var(--ink-3); }
.kpi .val {
    font-size: 25px; font-weight: 650; line-height: 1.25; letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
}
.kpi .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.kpi.warn .val { color: var(--warn); }
.kpi.danger .val { color: var(--danger); }

/* ---------------------------------- 表格 --------------------------------- */
.tb-wrap { overflow-x: auto; }
table.tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tb th {
    height: 38px; padding: 0 12px;
    text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-3);
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.tb td {
    height: 44px; padding: 0 12px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}
table.tb tbody tr:last-child td { border-bottom: 0; }
table.tb tbody tr:hover { background: #fafcff; }
table.tb .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tb .ops { text-align: right; white-space: nowrap; }
table.tb .ops .btn { margin-left: 3px; }
.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty {
    padding: 34px 16px; text-align: center; color: var(--ink-3); font-size: 12.5px;
    line-height: 1.9;
}
.empty svg { width: 24px; height: 24px; opacity: .45; display: block; margin: 0 auto 8px; }

/* ---------------------------------- 徽标 --------------------------------- */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 21px; padding: 0 8px; border-radius: 20px;
    font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.tag i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag.green { background: var(--ok-soft); color: var(--ok); }
.tag.amber { background: var(--warn-soft); color: var(--warn); }
.tag.red { background: var(--danger-soft); color: var(--danger); }
.tag.gray { background: #eef1f5; color: #64748b; }
.tag.blue { background: var(--brand-soft); color: var(--brand-2); }
.chip {
    display: inline-block; padding: 0 6px; border-radius: 5px;
    background: var(--panel-2); color: var(--ink-2);
    font-size: 11px; line-height: 18px; margin: 1px 3px 1px 0;
    border: 1px solid var(--line-2);
}

/* ---------------------------------- 工具条 --------------------------------- */
.toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.toolbar .grow { flex: 1; }
.toolbar input.ipt { width: 230px; height: 34px; }
.toolbar select.ipt { width: 128px; height: 34px; }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line);
       border-radius: 8px; padding: 2px; }
.seg button {
    height: 28px; padding: 0 11px; border: 0; background: transparent;
    border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--ink-2);
    cursor: pointer;
}
.seg button.on { background: #fff; color: var(--brand-2); font-weight: 600;
                 box-shadow: 0 1px 2px rgba(20, 40, 70, .1); }

/* ---------------------------------- 提示条 --------------------------------- */
.banner {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px; margin-bottom: 14px;
    border-radius: var(--r);
    font-size: 12.5px; line-height: 1.7;
    border: 1px solid var(--line);
    background: var(--panel);
}
.banner svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.banner.warn { background: var(--warn-soft); border-color: var(--warn-line); color: #7a4a0d; }
.banner.warn svg { color: var(--warn); }
.banner.danger { background: var(--danger-soft); border-color: #f3d2cd; color: #8c2b1f; }
.banner.danger svg { color: var(--danger); }
.banner.info { background: var(--brand-soft); border-color: #d5e5f7; color: #1b4a72; }
.banner.info svg { color: var(--brand); }
.banner b { font-weight: 650; }
.banner .acts { margin-left: auto; display: flex; gap: 6px; }

/* ---------------------------------- 两栏 --------------------------------- */
/* 两栏等高：默认 start 会让「到期提醒」只有一行时矮一截，看着像没加载完 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
.split > .card + .card { margin-top: 0; }
@media (max-width: 1180px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------- 分组页 --------------------------------- */
/* 系统页原先九张卡片平铺，要滚三四屏才找得到「改密码」。按用途分组后
   一次只显示一组；切换只改 class，不重建 DOM —— 重建会丢表单里已填的内容。 */
.sysbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 13px;
}
.sysbar .seg button { display: inline-flex; align-items: center; gap: 5px; }
.sysbar .seg button svg { width: 13px; height: 13px; }
.sys-pane { display: none; }
.sys-pane.on { display: block; }
@media (max-width: 860px) {
    .side { display: none; }
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .view { padding: 14px; }
}

/* ---------------------------------- 表单栅格 --------------------------------- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fgrid .full { grid-column: 1 / -1; }
.packs { display: flex; flex-wrap: wrap; gap: 6px; }
.pack {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px;
    font-size: 12.5px; cursor: pointer; user-select: none;
    background: #fff; transition: background .14s, border-color .14s, color .14s;
}
.pack:hover { border-color: #cfdbe8; background: var(--panel-2); }
.pack.on { background: var(--brand-soft); border-color: #b9d4ef; color: var(--brand-2); font-weight: 600; }
.pack em { font-style: normal; font-size: 10.5px; opacity: .6; }

/* ---------------------------------- 弹窗 --------------------------------- */
#mask {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(18, 32, 48, .38);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 46px 16px; overflow: auto;
    backdrop-filter: blur(2px);
}
.modal {
    width: 560px; max-width: 100%;
    background: var(--panel); border-radius: 12px;
    box-shadow: 0 24px 70px -20px rgba(12, 26, 44, .5);
    overflow: hidden;
}
.modal.wide { width: 720px; }
.modal-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid var(--line-2);
}
.modal-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.modal-head .spacer { flex: 1; }
.modal-head .x {
    width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px;
    cursor: pointer; color: var(--ink-3); font-size: 17px; line-height: 1;
}
.modal-head .x:hover { background: var(--panel-2); color: var(--ink); }
.modal-body { padding: 16px 18px; max-height: 62vh; overflow: auto; }
.modal-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--line-2);
    background: var(--panel-2);
}
.modal-foot .spacer { flex: 1; }

pre.json {
    margin: 0; padding: 12px; max-height: 260px; overflow: auto;
    background: #0f1c2b; color: #cfe2f5;
    border-radius: var(--r-sm); font-size: 11.5px; line-height: 1.6;
}

/* ---------------------------------- toast --------------------------------- */
#toast {
    position: fixed; z-index: 90; left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(12px);
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.toast {
    padding: 9px 15px; border-radius: 8px;
    background: #1d2c3c; color: #fff; font-size: 12.5px;
    box-shadow: 0 10px 30px -12px rgba(10, 20, 34, .8);
    opacity: 0; transform: translateY(8px);
    transition: opacity .22s, transform .22s;
    max-width: 520px; line-height: 1.6;
}
.toast.on { opacity: 1; transform: none; }
.toast.err { background: #a83224; }
.toast.ok { background: #146a54; }

/* ---------------------------------- 详情 KV --------------------------------- */
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-all; }
.sect { margin: 16px 0 8px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.sect:first-child { margin-top: 0; }

/* 功能包的勾选框隐藏（靠 .on 高亮），否则一排方框很吵 */
.pack input { display: none; }

/* 普通勾选行（「强制重算有效期」这类），与 .pack 区分：这里要看得见方框 */
.check-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--panel-2);
    font-size: 12.5px; color: var(--ink-2); cursor: pointer;
    transition: border-color .14s, background .14s;
}
.check-row:hover { border-color: #cfdbe8; }
.check-row input { margin: 0; accent-color: var(--brand); cursor: pointer; }
.check-row em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* 到期提醒卡底部的状态分布：只有一两行时不留一大片空白 */
.split > .card { display: flex; flex-direction: column; }
.split > .card > .card-body { flex: 1; display: flex; flex-direction: column; }
/* 并排两卡内容量差很多时（账号表 2 行 vs 推送设置 8 个字段），强制等高会把短的
   那张拉出半屏空白。`.split.top` 让每张卡按自身内容高度、顶端对齐。
   ★ 只给「两卡内容量明显不等」的地方用；内容相当的（如到期提醒 / 最近心跳）仍用等高，
     那时等高看起来才整齐。 */
.split.top { align-items: start; }
.split.top > .card { display: block; }
.split.top > .card > .card-body { flex: none; display: block; }
.statbar {
    display: flex; align-items: flex-end; gap: 22px;
    margin-top: auto; padding: 14px 16px 16px;
    border-top: 1px solid var(--line-2);
    background: linear-gradient(#fff, var(--panel-2));
}
.statbar .v {
    display: block; font-size: 19px; font-weight: 650; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.statbar .k { display: block; font-size: 11.5px; color: var(--ink-3); }
.statbar .sp { flex: 1; }
.statbar .hint { font-size: 11.5px; color: var(--ink-3); text-align: right; line-height: 1.6; }

/* 长串（公钥、路径）在窄容器里要能折行，否则右边被裁掉一截 */
pre.json.wrap { white-space: pre-wrap; word-break: break-all; }

/* ---------------------------------------------------------------------------
   2026-11-05 功能扩展
   --------------------------------------------------------------------------- */

/* 概览改成 8 张指标卡（多了 ARR 与待收）；4 列 × 2 行，比 6 列挤一行更好读。
   合同收款页正好 4 张 = 一行。窄屏退回 3 列再 2 列，否则标题会折行 */
.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1320px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 工具条里的小号输入框/下拉（日志筛选、心跳筛选） */
.toolbar select.ipt.sm, .toolbar input.ipt.sm { width: auto; height: 34px; }
.ipt.sm { height: 30px; padding: 0 9px; font-size: 12px; }

/* 近 30 天心跳格子：一行 15 格、两行铺满 30 天。
   用 repeat(15, 1fr) 而不是固定像素，卡片宽度变化时不会掉行。 */
.beat-wrap { margin: 2px 0 4px; }
.beat-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.beat-grid i {
    height: 15px; border-radius: 3px;
    background: #eef1f5; border: 1px solid #e4e9f0;
}
.beat-grid i.on { background: #2fa37f; border-color: #2fa37f; }
.beat-wrap .small { margin-top: 6px; }

/* 许可校验结果条：绿=通过 / 红=不通过，图标与文字左对齐 */
.vres {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 12px; border-radius: var(--r-sm);
    font-size: 12.5px; line-height: 1.6;
}
.vres svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.vres b { display: block; font-size: 13px; margin-bottom: 1px; }
.vres.ok { background: var(--ok-soft); color: var(--ok); }
.vres.bad { background: var(--danger-soft); color: var(--danger); }
.vres .small { color: inherit; opacity: .85; }

/* 校验卡里的多行粘贴框：等宽、能竖拉 */
#v-text { font-size: 11.5px; line-height: 1.55; min-height: 96px; }

/* ---------------------------------------------------------------------------
   2026-11-05 第二批：趋势图 / 到期分布 / 批量选择
   --------------------------------------------------------------------------- */

/* 折线图：viewBox 620×158 等比缩放。不用 preserveAspectRatio="none" ——
   那样横向拉满，刻度数字会跟着变形。 */
svg.trend { width: 100%; height: auto; display: block; }

/* 到期分布：12 根柱子。用 grid 而不是绝对定位，卡片变窄时按比例压缩。 */
.mbars {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5px; align-items: end; margin-top: 6px;
}
.mbar { display: flex; flex-direction: column; justify-content: flex-end;
        align-items: center; gap: 3px; }
.mbar b { font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1; }
.mbar i { display: block; width: 100%; border-radius: 3px 3px 0 0;
          background: linear-gradient(#7cb4e8, #2f7fcb); }
.mbar.zero i { background: #e8edf4; }
.mbar span { font-size: 10px; color: var(--ink-3); }

/* 客户画像里的横条 */
.mrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.mrow .nm { width: 52px; flex: none; font-size: 11.5px; color: var(--ink-2); }
.mrow .tk { flex: 1; height: 6px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.mrow .tk i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.mrow .n { width: 20px; flex: none; text-align: right; font-size: 11.5px;
           color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip b { font-weight: 650; color: var(--brand-2); }

/* 批量续期的站点勾选列表 */
.pickbar {
    display: flex; align-items: center; gap: 14px;
    margin: 8px 0; padding: 7px 11px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); font-size: 12.5px;
}
.pickbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.picklist { max-height: 228px; overflow: auto;
            border: 1px solid var(--line); border-radius: var(--r-sm); }
.pick {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; border-bottom: 1px solid var(--line-2);
    font-size: 12.5px; cursor: pointer;
}
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--panel-2); }
.pick input { margin: 0; accent-color: var(--brand); cursor: pointer; }
.pick .nm { flex: 1; min-width: 0; }
.pick em { font-style: normal; font-size: 11.5px; color: var(--ink-3); flex: none; }

/* 合同金额摘要条：标准价 + 模块 + 折扣 → 应付。放在表单下面当结果，不做成输入框，
   免得有人以为能直接改（改要改上面的合同价/折扣）。 */
.priceline {
    margin-top: 4px; padding: 10px 12px; border-radius: 8px;
    background: var(--panel-2); border: 1px solid var(--line-2);
    line-height: 1.8; font-size: 12.5px;
}

/* 试用转化卡（概览右栏）：4 个小数字 + 每家试用站点一行。
   试用站点是「没人催也会自己消失」的一类，单独成卡比塞进客户画像更好扫。
   ★ 别用 .kpi 那套：那是整行的大卡，塞进 360px 右栏会把标题挤成两行。 */
.tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tstats > div {
    text-align: center; padding: 7px 3px; border-radius: 7px;
    background: var(--panel-2); border: 1px solid var(--line-2);
}
.tstats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tstats span { font-size: 10.5px; color: var(--ink-3); }
.trow {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px dashed var(--line-2);
}
.trow:last-of-type { border-bottom: 0; }
.trow .nm { flex: 1; min-width: 0; }
.trow .nm b {
    display: block; font-size: 12px; font-weight: 550; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trow .nm span { font-size: 10.5px; color: var(--ink-3); }
/* 4 个汉字的标签（疑似弃用）在 360px 右栏里会把名字挤没，收一点内边距 */
.trow .tag { height: 19px; padding: 0 7px; font-size: 11px; }

/* 更新说明弹窗（1.7.0）：标题 + 条目 + 一句「只讲控制台」的说明。
   ★ 列表用上标圆点而不是默认 disc：中文条目一长就折行，disc 会挂在行尾不好看。 */
.nt-title { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.nt-list { margin: 0; padding-left: 16px; }
.nt-list li {
    font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
    margin-bottom: 2px;
}
.nt-list li::marker { color: var(--ink-3); }
.nt-foot {
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2);
    font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}
/* 侧栏版本号：点一下重看本版说明，给个手型 + 悬停反馈，否则没人知道能点 */
#ver-tag { cursor: pointer; }
#ver-tag:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }