/* 华哥AI维保系统 · UI 对齐「活动现场签到系统」风格
   特征：白卡细边框 / 中英双语小标签 / 左侧色条大数字 / 表格式工作台 / 顶部场次胶囊 / 蓝色主按钮 */
:root {
  --accent: #2B59D8;
  --accent-hover: #2349B8;
  --accent-soft: #F2F5FD;
  --ink: #111827;
  --ink-2: #4B5563;
  --ink-3: #6B7280;
  --ink-4: #9CA3AF;
  --bg: #FBFBFC;
  --card: #FFFFFF;
  --line: #EDEFF2;
  --line-strong: #E1E4E9;
  --green: #16A34A;
  --green-soft: #E8F6ED;
  --amber: #D97706;
  --amber-soft: #FDF2E2;
  --red: #DC2626;
  --red-soft: #FDECEC;
  --blue-soft: #EEF2FD;
  --gold: #B5852E;
  --teal: #0E7490;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: #DDE4F7; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 双语小标签 */
.en { display: block; font-size: 10.5px; color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; line-height: 1.5; }

/* ===== 布局 ===== */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 208px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 20px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.brand-mark .ic { width: 15px; height: 15px; stroke-width: 1.9; }
.brand-name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.brand-name .en { letter-spacing: .04em; font-size: 9.5px; }
.nav-group-title { font-size: 10.5px; color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase; padding: 16px 18px 6px; font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 1px 10px; font-size: 13.5px; color: var(--ink-2); border-radius: 7px; cursor: pointer; user-select: none; }
.nav-item .ic { color: var(--ink-4); }
.nav-item:hover { background: #F7F8FA; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.active .ic { color: #fff; }
.nav-item.active .badge { background: #fff; color: var(--accent); }
.nav-item .badge { margin-left: auto; font-size: 11px; color: #fff; background: var(--red); border-radius: 9px; padding: 0 6px; font-weight: 500; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.side-user .avatar { width: 32px; height: 32px; border-radius: 8px; background: #F3F4F6; color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.side-user b { font-size: 13px; font-weight: 500; display: block; }
.side-user span.role { font-size: 11px; color: var(--ink-4); }
.main { flex: 1; min-width: 0; margin-left: 208px; padding: 24px 28px 96px; max-width: 1240px; }

/* ===== 移动端顶栏 ===== */
.topbar { display: none; position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 16px; align-items: center; gap: 9px; }
.topbar .brand-mark { width: 24px; height: 24px; }
.topbar b { font-size: 14px; font-weight: 600; }

/* ===== 页面头 ===== */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.page-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: flex-start; gap: 10px; }
.page-head h2 .en { margin-top: 1px; }
.page-head .back { color: var(--ink-4); cursor: pointer; display: flex; align-items: center; margin-top: 2px; }
.page-head .back:hover { color: var(--ink-2); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== 卡片 ===== */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.card-pad { padding: 18px 20px; }
.card-title { font-size: 14px; font-weight: 600; padding: 16px 20px 0; display: flex; align-items: flex-start; gap: 10px; }
.card-title .card-sub { margin-left: auto; font-size: 12.5px; color: var(--ink-4); font-weight: 400; }
.card-body { padding: 14px 20px 18px; }
.card-note { font-size: 13px; color: var(--ink-3); line-height: 1.9; }

/* ===== 统计（左色条大数字，双语标签） ===== */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.stat-bar { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 16px 24px; cursor: pointer; overflow: hidden; }
.stat-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink-4); }
.stat-bar:hover { border-color: #DDE1E8; }
.stat-bar .sb-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.stat-bar .sb-num { font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; margin-top: 4px; color: var(--ink); }
.stat-bar .sb-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--ink-4); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; display: inline-block; }
.dot.green { background: var(--green); } .dot.amber { background: var(--amber); }
.dot.red { background: var(--red); } .dot.blue { background: var(--accent); }
.stat-bar.blue::before { background: var(--accent); }
.stat-bar.yellow::before { background: var(--amber); }
.stat-bar.red::before { background: var(--red); }
.stat-bar.green::before { background: var(--green); }
.stat-bar.blue .dot { background: var(--accent); }
.stat-bar.yellow .dot { background: var(--amber); }
.stat-bar.red .dot { background: var(--red); }
.stat-bar.green .dot { background: var(--green); }

/* ===== 看板顶部金额汇总（总年维保费用 / 维保员提成总计） ===== */
.money-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.money-row .stat-bar { cursor: default; padding: 16px 20px 15px 24px; }
.stat-bar.money.fee::before { background: var(--gold); }
.stat-bar.money.comm::before { background: var(--teal); }
.stat-bar.money.fee .dot { background: var(--gold); }
.stat-bar.money.comm .dot { background: var(--teal); }
.stat-bar.money .sb-num { font-size: 32px; display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.stat-bar.money .sb-num .cur { font-size: 20px; font-weight: 600; margin-right: 1px; }
.stat-bar.money.fee .sb-num .cur { color: var(--gold); }
.stat-bar.money.comm .sb-num .cur { color: var(--teal); }
.stat-bar.money .sb-unit { font-size: 12.5px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; margin-left: 6px; }
.stat-bar.money .sb-foot { flex-wrap: wrap; line-height: 1.5; }

/* 胶囊统计条（物品发放 那一条） */
.strip { padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.strip-title { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); background: #fff; }
.chip b { font-weight: 600; }

/* ===== 看板版本切换（内部版 / 客户展示版） ===== */
.page-head h2 .seg { display: inline-flex; align-items: center; gap: 2px; background: #F2F4F8; border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin-left: 2px; align-self: center; flex: none; }
.seg .seg-btn { border: 0; background: transparent; font-family: inherit; font-size: 12px; line-height: 1.5; color: var(--ink-3); padding: 3px 11px; border-radius: 6px; cursor: pointer; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.seg .seg-btn:hover { color: var(--ink-2); }
.seg .seg-btn.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .09); }

/* ===== 客户展示版：顶部提示条 / 底部展厅信息 ===== */
.cli-foot { margin-top: 22px; padding: 18px 16px 8px; border-top: 1px solid var(--line); text-align: center; }
.cli-foot .cf-name { font-size: 13.5px; font-weight: 600; }
.cli-foot .cf-line { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.cli-foot .cf-line a { color: var(--accent); text-decoration: none; font-weight: 600; }
.cli-foot .cf-tip { font-size: 11px; color: var(--ink-4); margin-top: 12px; }
.todo-row.cli { cursor: default; }
.todo-row.cli:hover { background: #fff; }
.c-blue { color: var(--accent); } .c-green { color: var(--green); }
.c-amber { color: var(--amber); } .c-red { color: var(--red); }

/* ===== 场次胶囊（顶部筛选） ===== */
.session-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stab { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.stab:hover { border-color: #CFD6E0; }
.stab.active { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.stab b { font-weight: 600; }
.stab .stab-count { font-weight: 700; color: var(--ink); font-size: 14px; }
.stab .stab-state { color: var(--ink-4); font-size: 12px; }

/* ===== 工具条 ===== */
/* 电梯管理：状态行右侧的「品牌 / 维保员」筛选下拉 */
.tab-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.tab-filters select { width: auto; min-width: 116px; padding: 8px 10px; font-size: 13px; border-radius: 999px; background: #fff; color: var(--ink-2); }
.tab-filters select.on { border-color: var(--ink); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--ink); }
@media (max-width: 768px) {
  .tab-filters { margin-left: 0; width: 100%; }
  .tab-filters select { flex: 1; min-width: 0; }
}

.toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.search-wrap .ic { position: absolute; left: 11px; color: var(--ink-4); pointer-events: none; }
.search-wrap input { padding-left: 34px; }
.toolbar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.rp-count { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.filter-tabs { display: inline-flex; gap: 2px; padding: 2px; background: #F4F5F7; border-radius: 8px; }
.ftab { padding: 5px 14px; border-radius: 6px; font-size: 13px; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.ftab:hover { color: var(--ink); }
.ftab.active { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(17,24,39,.07); }

/* ===== 表格 ===== */
.tbl-wrap { overflow-x: auto; max-width: 100%; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-weight: 500; color: var(--ink-4); padding: 11px 14px; background: #FAFAFB; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 12px; }
table.tbl th .en { font-size: 9.5px; margin-top: 1px; }
table.tbl th:first-child, table.tbl td:first-child { padding-left: 20px; }
table.tbl th:last-child, table.tbl td:last-child { padding-right: 20px; text-align: right; }
table.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
/* 电梯管理列表（8 列）：数据列不折行，仅地址列允许折行并限宽，操作按钮强制横排 */
table.tbl.tbl-dev td { white-space: nowrap; padding: 12px 13px; }
table.tbl.tbl-dev td.td-addr { white-space: normal; min-width: 100px; max-width: 112px; }
/* 列多时操作按钮必须横排（外面 .tbl-actions 是 flex-wrap:wrap，会被挤成竖排 3 行），并收紧内距 */
table.tbl.tbl-dev .tbl-actions { flex-wrap: nowrap; gap: 4px; }
table.tbl.tbl-dev .tbl-actions .btn { padding: 5px 9px; }
table.tbl tbody tr:hover { background: #FAFBFC; }
/* 整行可点进详情（2026-09-12 去掉「详情」按钮）：光标 + hover 加深一档作为可点暗示 */
table.tbl tbody tr.row-link { cursor: pointer; }
table.tbl tbody tr.row-link:hover { background: #F4F6F9; }
table.tbl tbody tr:last-child td { border-bottom: none; }
.tbl-strong { font-weight: 600; }
.tbl-sub { color: var(--ink-4); font-size: 12px; }
.tbl-sub.c-red { color: var(--red); font-weight: 500; }
.tbl-sub.c-amber { color: var(--amber); font-weight: 500; }
.tbl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mobile-only { display: none; }

/* 状态（点 + 文字） */
.pill { font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.pill.normal { color: var(--green); } .pill.normal::before { background: var(--green); }
.pill.due { color: var(--amber); } .pill.due::before { background: var(--amber); }
.pill.overdue { color: var(--red); } .pill.overdue::before { background: var(--red); }
.pill.none, .pill.gray { color: var(--ink-4); }
.pill.blue { color: var(--accent); } .pill.blue::before { background: var(--accent); }
.pill.red { color: var(--red); } .pill.red::before { background: var(--red); }
.pill.plain::before { display: none; }

/* 移动端设备卡片（桌面端用表格，移动端用卡片） */
.device-card { padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.device-card:last-child { border-bottom: none; }
.dc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dc-name { font-size: 14px; font-weight: 600; line-height: 1.45; }
.dc-name-addr { font-weight: 400; color: var(--ink-3); }
.dc-sub { color: var(--ink-4); font-size: 12.5px; margin-top: 3px; line-height: 1.6; }

/* ===== 看板待办卡（已过期 / 即将到期） ===== */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.ch-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.ch-t .en { display: inline-block; margin-left: 2px; font-size: 10px; font-weight: 500; }
.todo-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: #FAFBFC; }
.tr-main { flex: 1; min-width: 0; }
.tr-title { font-size: 13px; font-weight: 500; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-no { font-size: 11px; color: var(--ink-4); font-weight: 400; flex: none; }
.tr-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-right { text-align: right; flex: none; }
.tr-days { font-size: 12.5px; font-weight: 600; }
.tr-days.red { color: var(--red); } .tr-days.amber { color: var(--amber); }
.tr-date { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.tr-btn { flex: none; }
.todo-empty { padding: 24px 18px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ===== 表单 ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-item { display: flex; flex-direction: column; gap: 6px; }
.f-item.full { grid-column: 1 / -1; }
.f-item label { font-size: 12.5px; color: var(--ink-3); }
.f-item label .req { color: var(--red); }
.f-tip { font-size: 12px; color: var(--ink-3); background: #F8F9FB; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.f-tip.ok { color: var(--green); background: #F4FBF7; border-color: #D8EDE1; }
.f-tip.amber { color: var(--amber); background: #FDF8EF; border-color: #F3E2C6; }
.f-tip.red { color: var(--red); background: #FDF5F5; border-color: #F6DADA; }
input, select, textarea { border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #D3D8E0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,89,216,.1); }
textarea { resize: vertical; min-height: 88px; line-height: 1.7; }

/* ===== 按钮 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 8px 15px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); font-family: inherit; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: #FAFAFB; border-color: #CFD6E0; }
.btn .ic { width: 15px; height: 15px; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:disabled { background: #B9C6EC; border-color: #B9C6EC; cursor: not-allowed; }
.btn.danger { color: var(--red); border-color: #EBD2D2; }
.btn.danger:hover { background: #FDF6F6; }
.btn.danger-solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn.success { background: var(--green); color: #fff; border-color: var(--green); }
.btn.warn { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn.lg { width: 100%; padding: 11px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ===== 作业与记录 ===== */
.job-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.job-panel.live { border-color: #C6D3F2; background: #FBFCFF; }
.job-inner { padding: 16px 20px 18px; }
.mt-item { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mt-item:last-child { border-bottom: none; }
.mt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-head b { font-weight: 600; font-size: 13.5px; }
.mt-info { font-size: 12.5px; color: var(--ink-4); line-height: 1.9; margin: 6px 0; }
.mt-content { background: #FAFAFB; border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.75; margin: 10px 0; white-space: pre-wrap; color: var(--ink-2); }
.mt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* 照片 */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.photo-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #F4F5F7; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.photo-del { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(17,24,39,.6); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; }
.photo-add { aspect-ratio: 1; border: 1px dashed var(--line-strong); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-4); font-size: 12px; cursor: pointer; gap: 5px; background: #fff; }
.photo-add:hover { border-color: var(--accent); color: var(--accent); }

/* ===== 键值行 ===== */
.kv { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 0 32px; }
.kv .kv-row { display: flex; justify-content: space-between; align-items: baseline; min-width: 0; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv .kv-row:nth-last-child(2), .kv .kv-row:last-child { border-bottom: none; }
.kv .k { color: var(--ink-4); font-size: 12.5px; flex: none; white-space: nowrap; }
.kv .v { color: var(--ink); text-align: right; font-weight: 500; word-break: break-all; }
.kv .v .kv-sub { color: var(--ink-4); font-weight: 400; font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.kv .kv-row.full { grid-column: 1 / -1; }
.kv .kv-row.full .v { text-align: left; flex: 1; }
/* 跨整行但值保持右对齐：用于奇数个普通项时避免半格空洞（见 SKILL「.kv 对齐铁律」） */
.kv .kv-row.wide { grid-column: 1 / -1; }

/* ===== 二维码 ===== */
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 2px; }
.qr-box canvas, .qr-box img { width: 186px; height: 186px; }
.qr-code-text { font-size: 12px; color: var(--ink-4); word-break: break-all; text-align: center; line-height: 1.7; }

/* ===== 客户端 ===== */
.c-wrap { max-width: 620px; margin: 0 auto; padding: 18px 16px 48px; }
/* 展厅信息（客户端顶部卡 + 底部页脚） */
.c-shop { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; }
.c-shop .cs-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.c-shop .cs-mark .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.c-shop .cs-l { flex: 1; min-width: 0; }
.c-shop .cs-name { font-size: 14.5px; font-weight: 600; }
.c-shop .cs-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.c-shop .cs-tel { flex: none; font-size: 16.5px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: .01em; }
.c-foot { margin-top: 26px; padding: 18px 16px 8px; border-top: 1px solid var(--line); text-align: center; }
.c-foot .cf-name { font-size: 13.5px; font-weight: 600; }
.c-foot .cf-line { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.c-foot .cf-line a { color: var(--accent); text-decoration: none; font-weight: 600; }
.c-foot .cf-tip { font-size: 11px; color: var(--ink-4); margin-top: 12px; }
.tel-link { color: var(--accent); text-decoration: none; }
.c-hero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; position: relative; overflow: hidden; }
.c-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.c-hero .t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.c-hero .s { font-size: 12.5px; color: var(--ink-4); margin-top: 5px; }
.c-device { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.record-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; }
.ri-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; }
.ri-date { font-weight: 600; font-size: 14px; }
.ri-meta { font-size: 12.5px; color: var(--ink-4); line-height: 1.9; }

/* 评分 */
.stars { display: flex; gap: 4px; justify-content: center; font-size: 32px; cursor: pointer; user-select: none; }
.star { color: #E4E6EA; transition: .1s; }
.star.on { color: #E0A82E; }
/* 客户留言（客户扫码报告页：位置在报告卡片最底部、「客户确认」区下方，紧接页脚之上） */
.msg-block { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.msg-title { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.msg-at { font-size: 12.5px; color: var(--ink-4); }
.confirm-done { text-align: center; padding: 16px 0 4px; }
.confirm-done .big { color: var(--green); display: flex; justify-content: center; margin-bottom: 8px; }
.confirm-done .big .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.rating-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.rating-line .star-mini { color: #E0A82E; letter-spacing: 1px; }

/* ===== 弹窗 ===== */
.mask { position: fixed; inset: 0; background: rgba(17,24,39,.34); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 660px; max-height: 88vh; overflow-y: auto; padding: 24px; box-shadow: 0 10px 40px rgba(17,24,39,.16); }
.modal.confirm-modal { max-width: 380px; text-align: center; padding: 26px 24px; }
.modal h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 14px; }
.modal .m-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal .m-actions .btn { flex: 1; }
.confirm-text { color: var(--ink-3); font-size: 13.5px; line-height: 1.8; }

.viewer { position: fixed; inset: 0; background: rgba(17,24,39,.9); z-index: 200; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.viewer img { max-width: 96vw; max-height: 92vh; border-radius: 6px; }

#toast { position: fixed; top: 16%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13.5px; z-index: 300; max-width: 80vw; text-align: center; display: none; box-shadow: 0 6px 20px rgba(17,24,39,.18); }
#toast.err { background: var(--red); }
.offline-tip { background: var(--amber-soft); border: 1px solid #F2E0C0; color: #92400E; font-size: 12.5px; padding: 9px 14px; border-radius: 8px; margin-bottom: 14px; display: none; }
.empty { text-align: center; color: var(--ink-4); padding: 48px 0; font-size: 13.5px; }
.empty .e-ico { display: flex; justify-content: center; margin-bottom: 12px; color: #D3D8E0; }
.empty .e-ico .ic { width: 30px; height: 30px; stroke-width: 1.3; }

/* ===== 移动端 ===== */
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-bar .sb-num { font-size: 28px; }
  .money-row { gap: 12px; }
}
@media (max-width: 768px) {
  .money-row { grid-template-columns: 1fr; gap: 12px; }
  .stat-bar.money .sb-num { font-size: 27px; }
  .stat-bar.money .sb-num .cur { font-size: 17px; }
  .layout { flex-direction: column; }
  .sidebar { display: none; }
  .topbar { display: flex; width: 100%; }
  .main { margin-left: 0; padding: 16px 14px 88px; max-width: 100%; }
  .card-title, .card-body, .toolbar, .mt-item, .job-inner { padding-left: 16px; padding-right: 16px; }
  .tbl-wrap { display: none; }
  .mobile-only { display: block; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .kv { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .strip { gap: 10px; padding: 12px 16px; }
  .page-head h2 { flex-wrap: wrap; }
  .page-head h2 .seg { order: 3; margin: 8px 0 0; }
  .card-head-row { padding: 12px 14px; }
  .c-shop { flex-wrap: wrap; padding: 12px 14px; }
  .c-shop .cs-tel { flex: 1 1 100%; text-align: left; font-size: 18px; padding-left: 46px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
  .todo-row { padding: 11px 14px; gap: 8px; flex-wrap: wrap; }
  .tr-main { flex: 1 1 100%; }
  .tr-right { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .tr-days { order: 1; }
  .tr-date { order: 2; margin-top: 0; }
  .tr-btn { padding: 4px 10px; font-size: 11.5px; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
  .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-4); cursor: pointer; position: relative; }
  .bn-item .ic { width: 19px; height: 19px; }
  .bn-item.active { color: var(--accent); font-weight: 500; }
  .bn-item .badge { position: absolute; top: -2px; right: 26%; background: var(--red); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; }
}
/* 桌面端隐藏底部导航（用 min-width 避免覆盖移动端规则） */
@media (min-width: 769px) {
  .bottom-nav { display: none; }
}

/* ===== 按钮尺寸 ===== */
.btn.lg { padding: 10px 18px; font-size: 14px; }

/* ===== 登录页 ===== */
#loginView { display: none; min-height: 100vh; width: 100%; background: var(--bg); align-items: center; justify-content: center; padding: 24px 16px; }
.login-wrap { width: 100%; max-width: 384px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lg-head { display: flex; align-items: center; gap: 11px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.lg-title b { display: block; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.lg-title span { display: block; font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.lg-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.lg-body .f-item { display: flex; flex-direction: column; gap: 6px; }
.lg-body .f-item label { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: baseline; gap: 6px; }
.lg-body .btn { width: 100%; justify-content: center; margin-top: 2px; }
.lg-tip { min-height: 17px; font-size: 12.5px; color: var(--red); text-align: center; }
.lg-foot { padding: 11px 24px 15px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-4); text-align: center; background: #FCFCFD; }

/* ===== 侧边栏用户卡 / 顶栏用户 ===== */
.side-user { cursor: pointer; transition: background .15s; }
.side-user:hover { background: #FAFAFB; }
.side-logout { margin-left: auto; background: none; border: none; padding: 6px; border-radius: 6px; color: var(--ink-4); cursor: pointer; display: flex; align-items: center; }
.side-logout:hover { background: #F3F4F6; color: var(--red); }
.side-logout .ic { width: 16px; height: 16px; }
.topbar-user { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* ===== 人员设置行内角色标签对齐 ===== */
.tbl-actions { flex-wrap: wrap; }

/* ===== 维保收费记录（设备详情页） ===== */
.fee-tbl th.ta-r, .fee-tbl td.ta-r { text-align: right; }
.fee-tbl tfoot td { background: #FAFAFB; border-top: 1px solid var(--line-strong); border-bottom: none; font-weight: 600; }
.fee-tbl tfoot td:first-child { color: var(--ink-3); font-weight: 500; }
.card-foot { padding: 12px 20px 16px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-4); line-height: 1.75; }
.fee-row { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.fee-row:last-of-type { border-bottom: none; }
.fr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.fr-amt { font-weight: 700; }
.fr-sub { margin-top: 3px; font-size: 12px; color: var(--ink-4); }
.fr-note { margin-top: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.fee-total { padding: 11px 16px; background: #FAFAFB; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
/* 移动端：上面这块走 .mobile-only，随全局规则显示 */

/* ===== 设备导入 ===== */
.modal.modal-imp { max-width: 860px; }
.imp-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.imp-bar label.btn { cursor: pointer; }
#impText { min-height: 124px; font-size: 12.5px; line-height: 1.65; white-space: pre; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, "PingFang SC", monospace; }
.imp-prev { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.imp-prev-head { padding: 8px 12px; background: #FAFAFB; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.tbl.imp-tbl { min-width: 800px; }
.tbl.imp-tbl th, .tbl.imp-tbl td { white-space: nowrap; font-size: 12px; padding: 7px 10px; }
.tbl.imp-tbl td:nth-child(5) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tbl.imp-tbl td:nth-child(3) { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.imp-tbl tr.imp-bad td { background: #FFF7F7; }
.imp-tbl tr.imp-bad td:nth-child(4), .imp-tbl tr.imp-bad td:nth-child(5) { color: var(--red); }
.imp-more { padding: 8px 12px; font-size: 12px; color: var(--ink-3); }
.imp-done { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid #BBF7D0; background: #F0FDF4; border-radius: 10px; color: var(--green); font-size: 13.5px; }
.imp-done .ic { width: 18px; height: 18px; flex: none; }
.imp-fail { margin-top: 10px; border: 1px solid #FECACA; background: #FEF2F2; border-radius: 10px; overflow: hidden; }
.imp-fail-head { padding: 8px 12px; font-size: 12.5px; font-weight: 500; color: var(--red); border-bottom: 1px solid #FECACA; }
.imp-fail-row { padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid #FEE2E2; }
.imp-fail-row:last-child { border-bottom: none; }
@media (max-width: 768px) {
  #impText { min-height: 100px; font-size: 12px; }
}
@media (max-width: 768px) {
  .lg-head { padding: 18px 18px 15px; }
  .lg-body { padding: 16px 18px 18px; }
  .lg-foot { padding: 10px 18px 13px; }
  .topbar-user { font-size: 12px; }
}

/* ===== 未填写字段的占位文字（浅灰，跟随键值行字号） ===== */
.kv .v .muted { color: var(--ink-4); font-weight: 400; }

/* ===== 客户展示版（body.dash-client）：整页去后台化，只留看板内容 =====
   由 app.js 的 applyDashChrome() 按 dashMode 切换；离开看板自动移除（导航恢复） */
body.dash-client .sidebar,
body.dash-client .topbar,
body.dash-client .bottom-nav { display: none; }
body.dash-client .main { margin-left: 0; padding: 24px 28px 32px; max-width: 1240px; }
@media (max-width: 768px) {
  body.dash-client .main { padding: 14px 14px 26px; max-width: 100%; }
}

/* ===== 售后管理（2026-09-15 新增，字段参考 sh.huage.link） =====
   配色沿用维保系统：白卡细边框 + 浅底彩字小标签 */
.tk-stats .stat-bar { cursor: default; }
.tk-stats .stat-bar:hover { border-color: var(--line); }
.tk-sel { width: auto; min-width: 118px; padding: 8px 10px; font-size: 13px; border-radius: 999px; background: #fff; color: var(--ink-2); }
.tk-sel.on { border-color: var(--ink); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--ink); }

/* 状态 / 优先级标签 */
.tk-st { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 6px; white-space: nowrap; font-weight: 500; }
.tk-st.wait { background: #FEF3C7; color: #B45309; }
.tk-st.confirm { background: #EDE9FE; color: #6D28D9; }
.tk-st.ship { background: #CFFAFE; color: #0E7490; }
.tk-st.gofix { background: #FFEDD5; color: #C2410C; }
.tk-st.fixing, .tk-st.doing { background: #DBEAFE; color: #1D4ED8; }
.tk-st.done { background: #DCFCE7; color: #15803D; }
.tk-st.delay { background: #FEE2E2; color: #B91C1C; }
.tk-pri { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 6px; white-space: nowrap; font-weight: 500; }
.tk-pri.p-high { background: #FEE2E2; color: #DC2626; }
.tk-pri.p-mid { background: #FEF9C3; color: #A16207; }
.tk-pri.p-low { background: #E0F2FE; color: #0369A1; }
.tk-od { display: inline-block; font-size: 11.5px; color: #B91C1C; background: #FEE2E2; border-radius: 5px; padding: 1px 6px; white-space: nowrap; margin-left: 6px; }
.tk-prob { max-width: 320px; color: var(--ink-2); }

/* 移动端工单卡片 */
.tk-card { border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer; background: #fff; }
.tk-card:active { background: #FAFAFB; }
.tk-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tk-card-top b { font-size: 14px; font-weight: 600; color: var(--ink); }
.tk-card-sub { font-size: 12.5px; color: var(--ink-4); margin-bottom: 6px; }
.tk-card-prob { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-bottom: 8px; }
.tk-card-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-4); flex-wrap: wrap; }
.tk-card-foot .tk-cf { color: var(--ink-4); }

/* 详情字段网格 */
.tk-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; }
.tk-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tk-f.full { grid-column: 1 / -1; }
.tk-f > span { font-size: 12px; color: var(--ink-4); }
.tk-f > b { font-size: 13.5px; font-weight: 500; color: var(--ink); word-break: break-word; }
.tk-f > b.tk-pre { font-weight: 400; line-height: 1.75; white-space: pre-wrap; }
.tk-f a { color: var(--accent); text-decoration: none; }

/* 处理进度步骤条 */
.tk-steps { display: flex; align-items: flex-start; padding: 4px 0 2px; }
.tk-step { flex: 1; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.tk-step::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.tk-step:first-child::before { left: 50%; }
.tk-step:last-child::before { right: 50%; }
.tk-step .tk-sdot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); box-sizing: border-box; }
.tk-step.done .tk-sdot { background: var(--green); border-color: var(--green); }
.tk-step.done::before { background: var(--green); }
.tk-step.cur .tk-sdot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 89, 216, .16); }
.tk-step.cur .tk-slbl { color: var(--accent); font-weight: 600; }
.tk-slbl { font-size: 12px; color: var(--ink-4); white-space: nowrap; text-align: center; }

/* 现场图片 */
.tk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tk-ph { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: #F7F8FA; }
.tk-ph img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.tk-ph-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(17, 24, 39, .62); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }

/* 跟进记录 */
.tk-fuinput { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.tk-fuinput input { flex: 1; }
.tk-fu { border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-bottom: 9px; background: #FCFCFD; }
.tk-fu-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 5px; }
.tk-fu-head b { color: var(--ink); font-weight: 500; }
.tk-fu-head span { color: var(--ink-4); }
.tk-fu-del { margin-left: auto; background: none; border: 0; color: var(--ink-4); cursor: pointer; padding: 2px; display: flex; }
.tk-fu-del:hover { color: var(--red); }
.tk-fu-del .ic { width: 14px; height: 14px; }
.tk-fu-text { font-size: 13.5px; color: var(--ink); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.tk-mini-empty { font-size: 13px; color: var(--ink-4); padding: 6px 0; }

/* 流转历史时间轴 */
.tk-tl { border-left: 2px solid var(--line); padding-left: 16px; margin-left: 5px; }
.tk-tl-row { position: relative; padding-bottom: 14px; }
.tk-tl-row:last-child { padding-bottom: 0; }
.tk-tl-dot { position: absolute; left: -24px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-sizing: content-box; box-shadow: 0 0 0 1px var(--line-strong); }
.tk-tl-body { display: flex; flex-direction: column; gap: 3px; }
.tk-tl-body b { font-size: 13px; color: var(--ink); font-weight: 500; }
.tk-tl-note { font-size: 12.5px; color: var(--ink-3); }
.tk-tl-at { font-size: 11.5px; color: var(--ink-4); }

@media (max-width: 768px) {
  .tk-fields { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .tk-f.full { grid-column: 1 / -1; }
  .tk-sel { flex: 1; min-width: 0; }
  .tk-steps { overflow-x: auto; padding-bottom: 6px; }
  .tk-step { min-width: 70px; }
  .tk-photos { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}