/* ---------- 主布局：侧边栏 + 内容区 ---------- */
.app { display: flex; height: 100vh; }
.sidebar {
width: 200px; background: #182848; color: #c5d0e6; flex-shrink: 0;
display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-brand {
padding: 18px 16px; font-weight: 700; font-size: 15px; color: #fff;
border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 6px;
}
.sidebar-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.nav-item {
display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 13px;
color: #c5d0e6; cursor: pointer; border-left: 3px solid transparent; transition: .15s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: #3b82f6; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; background: #fff; border-bottom: 1px solid #e3e8ef; padding: 0 18px; height: 52px; }
.topbar-title { font-weight: 600; font-size: 15px; color: #182848; }
.page { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
/* ---------- 仪表盘 ---------- */
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 18px 0; }
.dash-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 14px 16px; }
.dash-card .dc-label { font-size: 12px; color: #889; margin-bottom: 4px; }
.dash-card .dc-value { font-size: 22px; font-weight: 700; color: #1f2d3d; }
.dash-card .dc-value.accent { color: #3b82f6; }
.dash-card .dc-value.warn { color: #d4380d; }
.dash-card .dc-sub { font-size: 11px; color: #aab; margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px; flex: 1; min-height: 0; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.dash-section { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 12px 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dash-sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dash-sec-header[data-goto] { cursor: pointer; }
.dash-sec-header[data-goto]:hover h4 { color: #2b5cd9; }
.dash-sec-header h4 { margin: 0; font-size: 15px; color: #1f2d3d; }
.dash-sec-header .link-cell { font-size: 12.5px; }
.dash-list { flex: 1; overflow-y: auto; }
.dash-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f3f7; font-size: 13px; }
.dash-row:last-child { border-bottom: none; }
.dash-row .dr-main { flex: 1; min-width: 0; }
.dash-row .dr-title { font-weight: 600; color: #1f2d3d; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row .dr-sub { color: #889; font-size: 12.5px; margin-top: 2px; }
.dash-row .dr-meta { flex-shrink: 0; text-align: right; font-size: 12px; color: #889; }
.dash-row .dr-badge { flex-shrink: 0; }
.dash-empty { color: #aab; font-size: 12px; text-align: center; padding: 18px 0; }
.dash-section .table-wrap { max-height: none; flex: 1; }
/* 待办事项内嵌的「已完结事项」子区块 */
.dash-subsec { margin-top: 12px; padding: 10px 12px; background: #fafbfc; border: 1px dashed #e3e8ef; border-radius: 8px; }
.dash-subsec .dash-sec-header { margin-bottom: 6px; }
.dash-subsec .dash-sec-header h4 { font-size: 12px; color: #5a6b7b; }
.dash-subsec .dash-empty { padding: 12px 0; }
/* 待办事项独立页面 */
#page-todos .dash-section { margin: 0 18px 18px; }
#todos-page-pending { max-height: 64vh; overflow-y: auto; }
#todos-page-done .dash-row { opacity: 0.92; }
/* 新增待办页（独立表单页） */
#page-todo-add { padding: 0; }
/* 新增待办：整页表单（非弹窗），与 .dash-section 一致 */
.todo-add-wrap { padding: 0; margin: 0; }
.todo-add-toolbar { margin-bottom: 0; }
.todo-add-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 16px 18px 18px; margin: 0 18px 18px; box-shadow: none; }
.todo-add-head h2 { margin: 0 0 4px; font-size: 19px; color: #1f2d3d; }
.todo-add-head .muted { margin: 0 0 4px; font-size: 12.5px; }
.req-star { color: #e74c3c; }
.form-group { border-top: 1px solid #f0f2f5; padding-top: 14px; margin-top: 16px; }
.form-group:first-of-type { border-top: none; padding-top: 0; margin-top: 6px; }
.form-group-title { font-size: 13px; font-weight: 600; color: #6b7785; margin-bottom: 10px; letter-spacing: .3px; }
.fr-stack { display: flex; flex-direction: column; gap: 8px; }
.quick-times { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #d7dce4; background: #f6f8fb; color: #34495e; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; font-family: inherit; }
.chip:hover { border-color: #3a8ffe; color: #2b6fe0; background: #eef5ff; }
.chip.ghost { background: #fff; color: #8a94a6; }
.file-name { font-size: 12.5px; }
.todo-add-card .form-actions { margin-top: 18px; display: flex; gap: 10px; }
.todo-add-card .form-msg { min-height: 18px; margin: 6px 0 4px; color: #c0392b; font-size: 13px; }
/* 已完结事项独立页面 */
#page-todo-done .dash-section { margin: 0 18px 18px; }
#todo-done-page { max-height: 70vh; overflow-y: auto; }
#todo-done-page .dash-row { opacity: 0.92; }
/* 待办行：复选框 / 主题链接 / 🗑 单删 */
.dr-cb { display: inline-flex; align-items: center; padding: 0 6px 0 0; margin-right: 4px; cursor: pointer; }
.dr-cb input { margin: 0; cursor: pointer; }
.todo-title-click { color: #2b5cd9; cursor: pointer; }
.todo-title-click:hover { text-decoration: underline; }
.todo-del-btn { color: #c0392b; border-color: #f0c4be; }
.todo-del-btn:hover { background: #fdf2f0; }
.batch-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: #5a6b7b; user-select: none; }
.batch-all input { cursor: pointer; }
/* 待办详情只读弹窗 */
.view-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.view-row > label { flex: 0 0 96px; font-size: 12px; color: #667; padding-top: 3px; }
.view-row.muted > label, .view-row.muted .view-val { color: #8a96a3; }
.view-val { flex: 1; color: #1f2d3d; font-size: 13px; word-break: break-all; }
.prewrap { white-space: pre-wrap; word-break: break-word; }
#tv-items.prewrap { max-height: 200px; overflow-y: auto; background: #fafbfc; padding: 8px 10px; border-radius: 6px; border: 1px solid #eef1f5; }
/* ===== 待办详情（新版：简洁直接，空字段不显示）===== */
.tv-statusbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f5f8ff; margin-bottom: 16px; }
.tv-dot { width: 10px; height: 10px; border-radius: 50%; background: #faad14; flex: 0 0 auto; }
.tv-dot.done { background: #52c41a; }
.tv-state { font-weight: 600; font-size: 14px; color: #1f2d3d; }
.tv-toggle-btn { margin-left: auto; }
.tv-subject { font-size: 19px; font-weight: 700; color: #1f2d3d; line-height: 1.4; margin-bottom: 12px; word-break: break-all; }
.tv-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f3f7; align-items: flex-start; }
.tv-k { flex: 0 0 84px; font-size: 13px; color: #889; padding-top: 1px; }
.tv-v { flex: 1; font-size: 14px; color: #1f2d3d; word-break: break-all; }
.tv-v.prewrap { white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; background: #fafbfc; padding: 10px 12px; border-radius: 8px; border: 1px solid #eef1f5; }
.tv-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: #aab4c0; }
/* ---------- 客户管理页（完整表格，直接展示所有客户） ---------- */
#page-clients { padding: 14px 18px 18px; }
#page-clients .clients-header { padding: 4px 0 10px; }
#page-clients .table-wrap { overflow: auto; }
#cli-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#cli-table th, #cli-table td { padding: 9px 10px; border-bottom: 1px solid #eef1f5; text-align: left; white-space: nowrap; }
#cli-table th { position: sticky; top: 0; background: #f4f6f9; color: #445; font-weight: 600; z-index: 1; }
#cli-table tbody tr:hover { background: #f6f9ff; }
#cli-table .cli-name { font-weight: 600; }
#cli-table .cli-ops { white-space: nowrap; }
#cli-table .cli-ops .btn-xs { padding: 3px 8px; font-size: 12px; margin-right: 4px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.cli-detail-scroll { max-height: 78vh; overflow: auto; padding-right: 4px; }
.cli-detail { padding: 4px 6px; }
/* ---------- 业务统计页 ---------- */
#page-stats { padding: 16px 18px; }
#page-stats .stats-summary { grid-template-columns: repeat(4, 1fr); }
/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
.dash-cards { grid-template-columns: repeat(2, 1fr); }
.dash-grid { grid-template-columns: 1fr; }
.stats-summary { grid-template-columns: repeat(2, 1fr) !important; }
}
/* 注：旧的 ≤760px「icon-rail」折叠侧边栏（.sidebar{width:56px} + brand/nav-item{font-size:0}）
会让手机端抽屉内的文字整体不可见，已移除；手机端抽屉统由下方 @media (max-width:768px) 处理 */
.btn {
border: 1px solid #c9d3df; background: #fff; color: #1f2d3d; padding: 7px 14px;
border-radius: 6px; cursor: pointer; font-size: 13px; transition: .15s;
}
.btn:hover { border-color: #3b82f6; color: #3b82f6; }
.btn.primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.btn.primary:hover { background: #2563eb; color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: #556; }
.btn.ghost:hover { background: #eef2f7; color: #333; }
.btn.danger { color: #d33; border-color: #f3c2c2; }
.btn.danger:hover { background: #fdeaea; }
.err { color: #d33; font-size: 12px; margin: 6px 0; min-height: 14px; }
.muted { color: #889; font-size: 12px; }
/* 登录 */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#4b6cb7,#182848); }
.login-card { background: #fff; padding: 38px 34px; border-radius: 12px; width: 320px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .sub { margin: 0 0 22px; color: #99a; font-size: 12px; }
.login-card input { width: 100%; padding: 11px 12px; margin-bottom: 12px; border: 1px solid #d4dbe4; border-radius: 7px; font-size: 14px; }
.login-card button { width: 100%; padding: 11px; font-size: 15px; }
.login-card .hint { margin-top: 14px; font-size: 11px; color: #aab; text-align: center; }
.captcha-row { display: flex; gap: 8px; margin-bottom: 12px; }
.captcha-row input { flex: 1; margin-bottom: 0; }
.captcha-img { height: 44px; border-radius: 7px; cursor: pointer; border: 1px solid #d4dbe4; flex: 0 0 auto; }
.col-sel { width: 36px; text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
th.col-sel { text-align: center; }
.batch-tools { display: inline-flex; gap: 8px; align-items: center; }
/* 顶栏 */
.topbar { display: flex; align-items: center; background: #fff; border-bottom: 1px solid #e3e8ef; padding: 0 18px; height: 56px; }
.brand { font-weight: 700; font-size: 16px; color: #182848; }
.spacer { flex: 1; }
.user-info { margin-right: 10px; color: #667; font-size: 13px; }
.user-info b { color: #182848; }
/* 工具条 */
.toolbar { display: flex; gap: 10px; align-items: center; padding: 14px 18px; flex-wrap: wrap; position: relative; }
.toolbar input { flex: 1; min-width: 240px; padding: 9px 12px; border: 1px solid #d4dbe4; border-radius: 7px; }
.count { color: #889; font-size: 12px; margin-left: auto; }
/* 表格 */
.table-wrap { margin: 0 18px; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; overflow: auto; max-height: calc(100vh - 220px); }
table { border-collapse: collapse; width: 100%; }
thead th {
position: sticky; top: 0; background: #f7f9fc; text-align: left; padding: 10px 12px;
border-bottom: 2px solid #e3e8ef; font-size: 13px; white-space: nowrap; cursor: pointer; user-select: none;
}
thead th .arrow { color: #3b82f6; margin-left: 4px; }
thead th.no-sort { cursor: default; }
tbody td { padding: 9px 12px; border-bottom: 1px solid #eef1f5; font-size: 13px; vertical-align: top; max-width: 260px; }
tbody tr:hover { background: #f9fbff; }
tbody tr.due-soon { background: #fff1f0; }
tbody tr.due-soon:hover { background: #ffe7e3; }
tbody tr.overdue { background: #ffe0de; }
tbody tr.overdue:hover { background: #ffd2cf; }
.days-badge { font-weight: 600; font-size: 12.5px; }
.days-badge.soon { color: #d4380d; }
.days-badge.expired { color: #cf1322; }
.days-badge.safe { color: #389e0d; }
.days-badge.urgent { color: #cf1322; background: #fff1f0; border: 1px solid #ffccc7; padding: 1px 6px; border-radius: 10px; }
.todo-urgent { background: #fff7f7; }
.todo-urgent .dr-title { color: #c0392b; }
/* 待办卡片：状态圈 + 主体 + 操作区 */
.todo-card { align-items: stretch; padding: 10px 2px; gap: 10px; }
.todo-card .tc-check {
flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
border: 2px solid #c4ccd6; background: #fff; color: #fff; cursor: pointer;
font-size: 13px; line-height: 18px; text-align: center; padding: 0; transition: .15s;
}
.todo-card .tc-check:hover { border-color: #2f9e6f; }
.todo-card .tc-check.on { background: #2f9e6f; border-color: #2f9e6f; }
.todo-card .tc-body { flex: 1; min-width: 0; }
.todo-card .tc-title { font-weight: 600; color: #1f2d3d; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-card .tc-title:hover { color: #2f6bff; }
.todo-card .tc-sub { color: #889; font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-card .tc-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: #aab; flex-wrap: wrap; }
.todo-card .tc-actions { flex-shrink: 0; display: flex; align-items: flex-start; gap: 4px; }
.todo-card.is-done .tc-title { text-decoration: line-through; color: #98a3b0; }
.todo-card.is-done { opacity: .82; }
.btn-ico { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e3e8ef; background: #fff; cursor: pointer; font-size: 14px; line-height: 1; transition: .15s; display: inline-flex; align-items: center; justify-content: center; }
.btn-ico:hover { background: #f2f6ff; border-color: #2f6bff; }
.btn-ico.todo-del-btn:hover { background: #fdecec; border-color: #e8a5a5; }
.sec-actions { display: flex; align-items: center; gap: 8px; }
.sec-actions .btn-xs { padding: 2px 8px; font-size: 12px; }
.done-tag { display: inline-block; font-size: 10px; color: #389e0d; background: #f6ffed; border: 1px solid #b7eb8e; border-radius: 8px; padding: 0 6px; vertical-align: middle; }
.todo-done-btn { margin-top: 2px; }
.cell-goods { max-height: 60px; overflow: hidden; }
.cell-dates { white-space: nowrap; }
.cell-dates .date-apply { color: #556; }
.cell-dates .date-sep { color: #b8c2cc; margin: 0 4px; }
.cell-dates .date-deadline { color: #1f2d3d; font-weight: 500; }
.row-actions button { margin-right: 6px; padding: 4px 9px; font-size: 12px; }
/* 剩余天数单元格（阿拉伯数字红色加粗） */
.days-cell { font-weight: 700; font-family: "Segoe UI", Tahoma, Arial, sans-serif; white-space: nowrap; }
.days-cell.soon { color: #d4380d; }
.days-cell.expired { color: #cf1322; }
.days-cell.safe { color: #389e0d; }
.days-cell.no-data { color: #b8c2cc; font-weight: 400; }
/* 行内可点击链接（保留 click 行为；不做颜色/下划线修饰） */
.link-cell { color: #3b82f6; text-decoration: none; cursor: pointer; }
.link-cell:hover { color: #1d4ed8; text-decoration: underline; }
/* 普通文本样式的可点击链接：颜色随上下文、鼠标变手型，hover 给一个淡淡反馈 */
.link-plain { color: inherit; text-decoration: none; cursor: pointer; padding: 1px 2px; border-radius: 3px; }
.link-plain:hover { background: #f0f5ff; }
/* 截止日期单元格（一行不换行） */
.cell-deadline { white-space: nowrap; }
/* 回收站 */
.recycle-batch { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; background: #f7f9fc; border-radius: 6px; }
.recycle-batch b { color: #d4380d; margin: 0 4px; }
/* 客户回收站：批量条常驻并吸底，避免列表很长时找不到批量删除 */
.recycle-batch-sticky { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 10px rgba(15, 30, 60, .08); }
.recycle-batch .btn[disabled] { opacity: .45; cursor: not-allowed; }
.recycle-head { display: flex; align-items: center; gap: 14px; padding: 2px 2px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.recycle-head .recycle-selall { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, #445); cursor: pointer; user-select: none; }
.recycle-head .recycle-selall input { cursor: pointer; }
/* 筛选面板 */
.filter-panel { margin: 0 18px; padding: 14px 16px; background: #fff; border: 1px solid #e3e8ef; border-top: none; border-radius: 0 0 8px 8px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; }
.filter-grid .ff { display: flex; flex-direction: column; }
.filter-grid .ff label { font-size: 11px; color: #889; margin-bottom: 3px; }
.filter-grid .ff input { padding: 6px 8px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 12px; }
.filter-extra { margin-top: 12px; display: flex; gap: 14px; align-items: center; }
.filter-extra select { padding: 6px 8px; border-radius: 6px; border: 1px solid #d4dbe4; }
/* 分页 */
.pager { display: flex; gap: 10px; align-items: center; padding: 14px 18px; }
.pager select { padding: 6px; border-radius: 6px; border: 1px solid #d4dbe4; }
/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(20,30,50,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
/* 客户详情弹窗作为"容器"层：其内打开的子弹窗（商标详情/商标编辑/业绩统计等默认 z-index:50）需显示在上层，故此处降到 49 */
#modal-client-detail { z-index: 49; }
/* 申请人名下商标弹窗同理作为"容器"层：其内点击商标名称打开的只读详情(#modal-tm-detail, z-index:50)需显示在上层 */
#modal-applicant { z-index: 49; }
.modal-box { position: relative; background: #fff; padding: 22px 24px; border-radius: 10px; width: 560px; max-width: 94vw; max-height: 90vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; line-height: 30px; text-align: center; border: none; background: transparent; color: #8a94a6; font-size: 24px; cursor: pointer; border-radius: 6px; }
.modal-close:hover { background: #f0f2f5; color: #333; }
.modal-box h3 { padding-right: 36px; }
.modal-box.wide { width: 720px; }
.modal-box h3 { margin: 0 0 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-grid input, .form-grid select { padding: 9px 11px; border: 1px solid #d4dbe4; border-radius: 7px; font-size: 13px; }
.form-grid label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #556; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.mini-table { width: 100%; margin-top: 14px; border-collapse: collapse; }
.mini-table th, .mini-table td { padding: 7px 8px; border-bottom: 1px solid #eef1f5; font-size: 12px; }
.mini-table th { background: #f7f9fc; }
/* toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #182848; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transition: .25s; pointer-events: none; z-index: 100; }
.toast.show { opacity: .95; }
/* 客户管理 */
.modal-box.wide.clients-modal { width: min(1100px, 96vw); }
.clients-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.clients-header h3 { margin: 0; flex: none; }
.clients-toolbar { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 360px; }
.clients-toolbar input { flex: 1; min-width: 200px; padding: 7px 10px; border-radius: 6px; border: 1px solid #d4dbe4; }
.clients-toolbar select { padding: 7px 8px; border-radius: 6px; border: 1px solid #d4dbe4; }
.cli-row { cursor: pointer; }
.cli-row:hover td { background: #f6f9ff; }
.cli-row.cli-row-active td { background: #e6eeff; }
.cli-name { font-weight: 600; }
.cli-sub { font-size: 11px; }
.cli-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.cli-detail-title { font-size: 18px; font-weight: 700; }
.cli-detail-actions { display: flex; gap: 6px; }
.cli-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 8px 0 4px; }
.cli-kv { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: #f8fafc; border-radius: 6px; }
.cli-kv-k { font-size: 11px; color: #889; text-transform: uppercase; letter-spacing: 0.5px; }
.cli-kv-v { font-size: 13px; color: #1f2d3d; word-break: break-all; }
.cli-track-tools, .cli-tm-tools { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.cli-track-tools input, .cli-track-tools select { padding: 6px 9px; border-radius: 6px; border: 1px solid #d4dbe4; font-size: 12px; }
.deal-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.deal-pill.deal-pending { background: #fff7e6; color: #d46b08; border: 1px solid #ffe7ba; }
.deal-pill.deal-won { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.deal-pill.deal-lost { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
.form-grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.two-col input, .form-grid.two-col select { padding: 9px 11px; border: 1px solid #d4dbe4; border-radius: 7px; font-size: 13px; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12px; color: #667; margin-bottom: 3px; }
.form-row input, .form-row textarea { width: 100%; padding: 9px 11px; border: 1px solid #d4dbe4; border-radius: 7px; font-size: 13px; font-family: inherit; }
/* 新增待办：自动提醒勾选框独占一行，与文字间隔两个字符 */
.form-row.checkbox { margin-bottom: 14px; }
.form-row.checkbox label { display: inline-flex; align-items: center; gap: 2em; font-size: 13px; color: #33424d; margin-bottom: 0; line-height: 1.5; }
.form-row.checkbox label input[type="checkbox"] { width: auto; margin: 0; }
/* 办理时间：紧凑选择框 + 万年历弹层 */
.due-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.due-display { flex: 1 1 180px; min-width: 0; max-width: 100%; padding: 9px 11px; border: 1px solid #d4dbe4; border-radius: 7px; font-size: 13px; font-family: inherit; background: #fff; color: #33424d; cursor: pointer; }
.due-display::placeholder { color: #aab3bd; }
.due-cal-btn { flex: none; padding: 8px 12px; line-height: 1; }
.due-cal { position: relative; z-index: 5; box-sizing: border-box; margin-top: 8px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; padding: 12px 14px; box-shadow: 0 8px 24px rgba(15,23,42,.08); width: 100%; max-width: 300px; }
.dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dc-title { font-size: 14px; font-weight: 600; color: #2b3a47; }
.dc-nav { flex: none; width: 30px; height: 30px; border: 1px solid #e3e8ef; background: #f7f9fc; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; color: #4a5a68; }
.dc-nav:hover { background: #eef2f7; }
.dc-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: #8a95a1; margin-bottom: 4px; }
.dc-week span { padding: 2px 0; }
.dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dc-day { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 7px; cursor: pointer; color: #33424d; }
.dc-day:hover { background: #eef4ff; }
.dc-empty { height: 36px; }
.dc-sel { background: #2f6fed; color: #fff; font-weight: 600; }
.dc-sel:hover { background: #2f6fed; }
.dc-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #4a5a68; }
.dc-time span { white-space: nowrap; }
.dc-time select { padding: 5px 6px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 13px; font-family: inherit; }
.dc-ok { margin-left: auto; padding: 6px 14px; }
@media (max-width: 880px) {
#cli-table { font-size: 12px; }
}
/* ---------- 业务统计 ---------- */
.modal-box.wide.stat-modal { width: min(960px, 96vw); }
.stats-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.stats-toolbar select { padding: 7px 10px; border-radius: 6px; border: 1px solid #d4dbe4; }
.stats-period { display: inline-flex; gap: 4px; }
.stat-period-btn { padding: 6px 16px; }
.stat-period-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat-card { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; padding: 12px 14px; }
.stat-card .sc-label { font-size: 12px; color: #889; margin-bottom: 4px; }
.stat-card .sc-value { font-size: 20px; font-weight: 700; color: #1f2d3d; }
.stat-card .sc-value.profit-pos { color: #d4380d; }
.stat-card .sc-value.profit-neg { color: #389e0d; }
/* 业绩数值隐私遮罩 + 眼睛开关 */
.stat-card .sc-value.masked { color: #fa541c; letter-spacing: 2px; }
.masked { letter-spacing: 1px; }
.stats-reveal-btn, .cs-reveal-btn { display: inline-flex; align-items: center; gap: 6px; }
.stats-reveal-btn svg, .cs-reveal-btn svg { display: block; }
.stats-reveal-btn.revealed, .cs-reveal-btn.revealed { color: #fa8c16; border-color: #fa8c16; }
.clickable { cursor: pointer; }
#user-info.clickable:hover { text-decoration: underline; }
.stats-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart-card { background: #fff; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px 12px; }
.chart-card h4 { margin: 0 0 8px; font-size: 13px; color: #556; }
.stats-table-wrap { margin-top: 8px; }
.stat-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: #667; }
.stat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.stat-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 640px) {
.stats-charts { grid-template-columns: 1fr; }
.stats-summary { grid-template-columns: 1fr 1fr; }
}
/* ---------- 其他业务 / 成交记录 ---------- */
.biz-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #eef1f5; }
.biz-row:hover { background: #f9fbff; }
.biz-info { flex: 1; }
.biz-info .bn { font-weight: 600; }
.biz-info .bs { font-size: 11px; color: #889; }
.biz-days { min-width: 110px; text-align: right; font-weight: 700; }
.biz-days.soon { color: #d4380d; }
.biz-days.expired { color: #cf1322; }
.biz-days.safe { color: #389e0d; }
/* 统计小框：客户详情里 */
.cli-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 4px; }
.cli-stat-box { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px 12px; }
.cli-stat-box .cs-k { font-size: 11px; color: #889; }
.cli-stat-box .cs-v { font-size: 17px; font-weight: 700; color: #1f2d3d; }
/* 客户回收站 / 详情内分节 */
.cli-sec-title { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: #1f2d3d; border-left: 3px solid #3b82f6; padding-left: 8px; }
.cli-sec-actions { margin: 4px 0 6px; }
/* 商标图样 */
.tm-image-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid #e3e8ef; border-radius: 6px; cursor: zoom-in; background: #fafbfd; }
.tm-image-upload { display: flex; gap: 10px; align-items: flex-start; }
.tm-image-upload img { width: 90px; height: 90px; object-fit: contain; border: 1px solid #e3e8ef; border-radius: 8px; }
/* 申请人证件（身份证 / 营业执照）上传区 */
.tm-cert-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tm-cert-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tm-cert-item {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 6px; padding: 6px 8px; font-size: 12px;
}
.tm-cert-type { background: #eef2ff; color: #3b5bdb; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.tm-cert-name { color: #1f6feb; font-weight: 600; text-decoration: none; cursor: pointer; }
.tm-cert-name:hover { text-decoration: underline; }
.tm-cert-nopreview { color: var(--ink-2, #445); cursor: default; }
.tm-cert-nopreview:hover { text-decoration: none; }
.tm-cert-ext { background: #f1f3f5; color: #667; border-radius: 3px; padding: 0 5px; font-size: 10px; letter-spacing: .3px; }
.tm-cert-meta { color: #8a94a6; }
.tm-cert-wrap { background: #fafbfc; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px 12px; }
.tm-cert-title { font-size: 13px; font-weight: 600; color: #33415a; margin-right: 4px; }
/* 导入表格的额外列（只读） */
.tm-extra-box { display: flex; flex-direction: column; gap: 4px; background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 6px; padding: 8px; }
.tm-extra-row { display: flex; gap: 8px; font-size: 12px; }
.tm-extra-k { color: #667; min-width: 100px; }
.tm-extra-v { color: #1f2d3d; word-break: break-all; }
/* 文件预览弹窗 */
.fp-body { max-height: 70vh; overflow: auto; background: #f4f6f9; border-radius: 8px; padding: 8px; }
.fp-frame { width: 100%; height: 70vh; border: none; background: #fff; }
.fp-image { max-width: 100%; display: block; margin: 0 auto; background: #fff; }
/* 用户头像 */
.user-avatar { display: inline-flex; align-items: center; cursor: pointer; }
.user-avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #e3e8ef; vertical-align: middle; }
.user-avatar .avatar-empty { font-size: 22px; line-height: 30px; }
.u-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
/* 个人账号信息页 */
.ac-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ac-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid #e3e8ef; background: #f4f6f9; }
.ac-role { display: inline-block; padding: 5px 12px; background: #eef2f7; border-radius: 8px; font-size: 13px; color: #4a5a68; }
/* 头像裁剪弹窗 */
.crop-stage { position: relative; width: 260px; height: 260px; margin: 10px auto; overflow: hidden; border-radius: 12px; background: #1f2733; border: 1px solid #e3e8ef; touch-action: none; }
.crop-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; cursor: grab; user-select: none; -webkit-user-drag: none; }
.crop-stage img:active { cursor: grabbing; }
.crop-ring { position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45) inset; pointer-events: none; }
.crop-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.crop-bar input[type=range] { flex: 1; }
/* ================= 商标管理页美化 ================= */
#page-trademarks { background: #f5f7fa; }
/* 工具条：卡片化 + 搜索框图标感 */
#page-trademarks .toolbar {
background: #fff; margin: 14px 18px 0; padding: 12px 14px;
border: 1px solid #e6eaf0; border-radius: 10px;
box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
#page-trademarks .toolbar #search {
border-radius: 8px; border: 1px solid #dfe4ec; padding: 9px 12px 9px 34px;
background: #fbfcfe url("data:image/svg+xml;utf8,") no-repeat 11px center;
transition: border-color .15s, box-shadow .15s;
}
#page-trademarks .toolbar #search:focus {
outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); background-color: #fff;
}
#page-trademarks .toolbar .btn { border-radius: 8px; padding: 8px 14px; font-size: 13px; }
#page-trademarks .toolbar .btn.primary { box-shadow: 0 1px 2px rgba(59,130,246,.25); }
/* 工具栏两行布局：搜索行 + 操作行，腾出纵向空间展示商标表格 */
#page-trademarks .toolbar { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#page-trademarks .tm-search-row { display: flex; gap: 8px; align-items: center; }
#page-trademarks .tm-search-row #search { flex: 1 1 auto; min-width: 0; }
#page-trademarks .tm-actions-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#page-trademarks .tm-actions-row #batch-tools { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#page-trademarks .pager #count-info {
background: #f1f5f9; color: #5a6678; padding: 5px 12px; border-radius: 999px; font-size: 12px; margin-left: auto;
}
/* 筛选面板与表格卡片衔接 */
#page-trademarks .filter-panel { margin: 0 18px; border-radius: 0 0 10px 10px; border-top: none; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
/* 表格容器 */
#page-trademarks .table-wrap {
margin: 12px 18px 0; border-radius: 10px; border: 1px solid #e6eaf0;
box-shadow: 0 1px 3px rgba(16,24,40,.06); background: #fff;
}
#page-trademarks thead th {
background: #f8fafc; color: #475569; font-weight: 600; font-size: 12px; letter-spacing: .02em;
padding: 11px 12px; border-bottom: 1px solid #e6eaf0;
}
#page-trademarks thead th:hover { color: #3b82f6; }
#page-trademarks tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #334155; }
#page-trademarks tbody tr:nth-child(even) { background: #fcfdfe; }
#page-trademarks tbody tr:hover td { background: #f0f6ff; }
#page-trademarks tbody tr:last-child td { border-bottom: none; }
/* 到期行：左侧色条 + 柔和底色 */
#page-trademarks tbody tr.due-soon td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
#page-trademarks tbody tr.due-soon td { background: #fffaf0; }
#page-trademarks tbody tr.due-soon:hover td { background: #fff5e0; }
#page-trademarks tbody tr.overdue td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
#page-trademarks tbody tr.overdue td { background: #fff5f5; }
#page-trademarks tbody tr.overdue:hover td { background: #ffecec; }
/* 商标名称 / 注册号 */
#page-trademarks .tm-name { font-weight: 600; color: #0f172a; }
#page-trademarks .tm-name:hover { background: #e8f1ff; }
#page-trademarks .tm-regno { color: #64748b; font-variant-numeric: tabular-nums; }
#page-trademarks .tm-regno:hover { background: #f1f5f9; }
/* 状态徽章 */
.tm-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.5; }
.tm-badge-ok { background: #e7f8ee; color: #0f8a4d; }
.tm-badge-doing { background: #e8f1ff; color: #1d5fd8; }
.tm-badge-bad { background: #fdecec; color: #c62a2a; }
.tm-badge-other { background: #f1f5f9; color: #64748b; }
/* 剩余天数胶囊 */
.tm-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-pill-safe { background: #e7f8ee; color: #0f8a4d; }
.tm-pill-soon { background: #fff4e0; color: #b45309; }
.tm-pill-expired { background: #fdecec; color: #c62a2a; }
.tm-pill-none { background: #f1f5f9; color: #94a3b8; font-weight: 400; }
.tm-pill-renew { background: #e7f8ee; color: #0f8a4d; } /* 可以续展（已进入续展窗口） */
.tm-pill-wait { background: #eef2ff; color: #3b5bdb; } /* 还有 X 天可以续展 */
.cell-canrenew { white-space: nowrap; }
/* 列显隐下拉面板 */
.col-vis-panel { position: absolute; right: 14px; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.12); padding: 12px 14px; z-index: 60; min-width: 320px; max-width: 92vw; }
.col-vis-panel .cv-title { font-size: 12px; color: #64748b; margin-bottom: 10px; font-weight: 600; }
.col-vis-panel .cv-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.col-vis-panel label { display: inline-flex; align-items: center; flex-direction: row; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; user-select: none; white-space: nowrap; }
.col-vis-panel label:hover { background: #f1f5f9; }
.col-vis-panel input { width: 15px; height: 15px; margin: 0; }
/* 类别小标签 */
.tm-chip { display: inline-block; padding: 2px 8px; border-radius: 5px; background: #f1f5f9; color: #475569; font-size: 12px; font-variant-numeric: tabular-nums; }
/* 一标多类：同一注册号包含多个类别时，在注册号旁标注 */
.tm-multiclass-badge { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; line-height: 16px; border-radius: 8px; background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; vertical-align: middle; white-space: nowrap; }
/* 邮箱弱化显示 */
.cell-mail .mail-text { color: #64748b; font-size: 12px; }
.cell-deadline { color: #334155; font-variant-numeric: tabular-nums; }
/* 操作列按钮 */
#page-trademarks .row-actions { white-space: nowrap; }
#page-trademarks .row-actions button {
margin-right: 6px; padding: 5px 11px; font-size: 12px; border-radius: 7px; transition: all .15s;
}
#page-trademarks .row-actions button:last-child { margin-right: 0; }
#page-trademarks .row-actions .btn.ghost { border: 1px solid #e2e8f0; color: #475569; background: #fff; }
#page-trademarks .row-actions .btn.ghost:hover { border-color: #3b82f6; color: #3b82f6; background: #f5f9ff; }
#page-trademarks .row-actions .btn.danger { border: 1px solid #f3c2c2; color: #c62a2a; background: #fff; }
#page-trademarks .row-actions .btn.danger:hover { background: #fdecec; }
#page-trademarks .row-actions .btn.primary { padding: 5px 11px; }
/* 分页 */
#page-trademarks .pager { padding: 12px 18px 18px; }
#page-trademarks .pager .btn { border-radius: 8px; padding: 7px 14px; }
#page-trademarks .pager #page-info { color: #64748b; font-size: 12px; }
#page-trademarks .pager select { border-radius: 8px; border: 1px solid #dfe4ec; padding: 7px 8px; }
/* =========================================================
全局界面重制：设计令牌 + 侧边栏 + 顶栏 + 仪表盘 + 表格 + 弹窗
========================================================= */
:root {
--brand: #2563eb;
--brand-dark: #1d4ed8;
--brand-soft: #eff6ff;
--ok: #0f8a4d;
--warn: #b45309;
--danger: #c62a2a;
--ink: #0f172a;
--ink-2: #334155;
--ink-3: #64748b;
--ink-4: #94a3b8;
--line: #e6eaf0;
--line-soft: #f1f5f9;
--bg: #f5f7fa;
--card: #ffffff;
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
--sh-1: 0 1px 2px rgba(16,24,40,.05);
--sh-2: 0 2px 8px rgba(16,24,40,.08);
--sh-3: 0 12px 40px rgba(16,24,40,.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
color: var(--ink-2); background: var(--bg);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* 细滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd7e3; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b6c2d3; background-clip: content-box; }
/* ---------- 登录页 ---------- */
.login-wrap {
background: radial-gradient(1200px 600px at 20% 10%, #3b6fd4 0%, transparent 60%),
linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}
.login-card {
width: 368px; max-width: calc(100vw - 32px); padding: 40px 36px 30px; border-radius: 16px;
box-shadow: var(--sh-3); border: 1px solid rgba(255,255,255,.08);
}
.login-card h1 { font-size: 21px; letter-spacing: .5px; color: var(--ink); }
.login-card .sub { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #9aa7bd; margin-bottom: 26px; }
.login-card input {
border-radius: 9px; padding: 11px 13px; border: 1px solid #dfe4ec; font-size: 14px; transition: .15s;
}
.login-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.login-card button {
border-radius: 9px; padding: 11px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.login-card button:hover { background: linear-gradient(180deg, #2f76ee, #1d4ed8); }
.login-card .hint { color: #9aa7bd; }
/* 手机端登录适配：避免标题被裁切、验证码行拥挤 */
@media (max-width: 480px) {
.login-card { width: 100%; max-width: calc(100vw - 24px); padding: 26px 18px 22px; }
.login-card h1 { font-size: 18px; line-height: 1.35; margin-bottom: 6px; }
.login-card h1 .sn-main, .login-card h1 .sn-suffix { white-space: normal; overflow: visible; font-size: 16px; }
.login-card .sub { margin-bottom: 18px; }
.captcha-row { flex-direction: column; align-items: stretch; }
.captcha-row input { flex: none; width: 100%; }
.captcha-img { align-self: center; height: 42px; }
.login-card input, .login-card button { font-size: 15px; padding: 12px; }
}
/* ---------- 侧边栏 ---------- */
.sidebar {
width: 208px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border-right: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.sidebar-brand {
padding: 16px 16px; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.brand-mark {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(37,99,235,.4);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b { font-size: 14px; color: #fff; white-space: nowrap; }
.brand-text span { font-size: 10px; color: #7c8aa3; letter-spacing: .6px; text-transform: uppercase; }
.sidebar-nav { padding: 12px 8px; gap: 2px; }
.nav-item {
padding: 10px 12px; border-radius: var(--r-md); border-left: none; gap: 10px;
font-size: 13.5px; margin-bottom: 2px; position: relative; color: #b8c4d9;
}
.nav-item .ni-icon {
width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; line-height: 1;
}
.nav-item .ni-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active {
background: linear-gradient(90deg, rgba(59,130,246,.28), rgba(59,130,246,.12));
color: #fff; font-weight: 600;
}
.nav-item.active::before {
content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #60a5fa;
}
.sidebar-foot {
padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08);
font-size: 11px; color: #6b7a93; text-align: center; flex-shrink: 0;
}
/* ---------- 顶栏 ---------- */
.topbar {
height: 60px; padding: 0 20px; gap: 12px;
box-shadow: 0 1px 0 rgba(16,24,40,.04); background: #fff; z-index: 5;
}
.tb-left { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.tb-sub { font-size: 11px; color: var(--ink-4); }
.tb-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: #f8fafc; border-radius: var(--r-pill); border: 1px solid var(--line-soft); }
.tb-user .user-info { font-size: 12px; color: var(--ink-3); margin-right: 0; }
.tb-user .user-info b { color: var(--ink); }
.topbar .btn.ghost { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 13px; font-size: 12.5px; color: var(--ink-3); background: #fff; }
.topbar .btn.ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
/* ---------- 通用页面底色 ---------- */
.page { background: var(--bg); }
/* ---------- 仪表盘 ---------- */
#page-home .toolbar { padding: 14px 18px 0; }
#page-home .toolbar .btn { border-radius: var(--r-md); padding: 8px 15px; box-shadow: var(--sh-1); }
.dash-cards { padding: 14px 18px 0; gap: 14px; }
.dash-card {
border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px;
background: var(--card); box-shadow: var(--sh-1); position: relative; overflow: hidden;
transition: transform .16s ease, box-shadow .16s ease;
}
.dash-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); opacity: .85; }
.dash-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.dash-card .dc-label { color: var(--ink-3); font-size: 12px; }
.dash-card .dc-value { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.dash-card .dc-value.accent { color: var(--brand); }
.dash-card .dc-value.warn { color: #d4380d; }
.dash-card .dc-sub { color: var(--ink-4); }
.dash-grid { padding: 14px 18px 18px; gap: 14px; }
.dash-col { gap: 14px; }
.dash-section {
border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
box-shadow: var(--sh-1); background: var(--card);
}
.dash-sec-header { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.dash-sec-header h4 { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.dash-row { padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.dash-row:last-child { border-bottom: none; }
.dash-row .dr-title { color: var(--ink); font-weight: 500; }
.dash-row .dr-sub { color: var(--ink-4); }
.dash-row .dr-meta { color: var(--ink-4); }
.dash-empty { color: var(--ink-4); }
/* ---------- 客户管理表（与商标表统一观感） ---------- */
#page-clients { background: var(--bg); padding: 0; }
#page-clients .toolbar {
background: #fff; margin: 14px 18px 0; padding: 12px 14px;
border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-1);
}
#page-clients .toolbar #cli-search {
border-radius: var(--r-md); border: 1px solid #dfe4ec; padding: 9px 12px 9px 34px;
background: #fbfcfe url("data:image/svg+xml;utf8,") no-repeat 11px center;
}
#page-clients .toolbar #cli-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background-color: #fff; }
#page-clients .toolbar .btn { border-radius: var(--r-md); padding: 8px 14px; }
#page-clients .toolbar #cli-count-info { background: #f1f5f9; color: var(--ink-3); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; margin-left: auto; }
#page-clients .table-wrap { margin: 12px 18px 0; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--sh-1); background: #fff; overflow: auto; }
#cli-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#cli-table th {
position: sticky; top: 0; z-index: 1; background: #f8fafc; color: #475569;
font-weight: 600; font-size: 12px; letter-spacing: .02em;
padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
#cli-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); white-space: nowrap; }
#cli-table tbody tr:nth-child(even) { background: #fcfdfe; }
#cli-table tbody tr:hover td { background: #f0f6ff; }
#cli-table tbody tr:last-child td { border-bottom: none; }
#cli-table .link-cell { font-weight: 600; color: var(--ink); }
#cli-table .link-cell:hover { color: var(--brand); }
#page-clients .pager { padding: 12px 18px 18px; }
#page-clients .pager .btn { border-radius: var(--r-md); padding: 7px 14px; }
#page-clients .pager #cli-page-info { color: var(--ink-3); font-size: 12px; }
/* 小按钮统一 */
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--ink-3); cursor: pointer; transition: .15s; }
.btn-xs:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-xs.danger { color: var(--danger); border-color: #f3c2c2; }
.btn-xs.danger:hover { background: #fdecec; border-color: #e8a5a5; }
/* 客户详情 */
.cli-detail-scroll { padding-right: 4px; }
.cli-kv { background: #f8fafc; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.cli-kv-k { color: var(--ink-4); font-size: 10.5px; }
.cli-kv-v { color: var(--ink); font-size: 13px; }
.cli-sec-title { border-left: 3px solid var(--brand); padding-left: 8px; color: var(--ink); }
/* ---------- 业务统计 ---------- */
#page-stats { background: var(--bg); padding: 14px 18px 18px; }
.stats-toolbar {
background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
box-shadow: var(--sh-1); margin-bottom: 12px;
}
.stats-toolbar select { border-radius: var(--r-md); border: 1px solid #dfe4ec; padding: 7px 10px; font-size: 13px; }
.stats-period { display: inline-flex; gap: 2px; background: #f1f5f9; padding: 3px; border-radius: var(--r-md); }
.stat-period-btn { border: 1px solid transparent; background: transparent; border-radius: var(--r-sm); padding: 6px 16px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; transition: .15s; }
.stat-period-btn:hover { color: var(--brand); }
.stat-period-btn.active { background: #fff; border-color: var(--line); color: var(--brand); font-weight: 600; box-shadow: var(--sh-1); }
.stats-custom-range { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 3px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.stats-custom-range label { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.stats-custom-range input[type="date"] { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; }
.home-tool-stack { display: inline-flex; flex-direction: column; gap: 6px; }
.dash-card.clickable { cursor: pointer; transition: .15s; }
.dash-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand); }
.stats-summary { gap: 12px; margin-bottom: 12px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-1); }
.stat-card .sc-label { color: var(--ink-3); font-size: 12px; }
.stat-card .sc-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.stats-charts { gap: 14px; }
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-1); }
.chart-card h4 { color: var(--ink); font-size: 13.5px; margin-bottom: 10px; }
.stats-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 4px 8px; box-shadow: var(--sh-1); overflow: hidden; }
.mini-table th { background: #f8fafc; color: #475569; font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.mini-table tbody tr:hover td { background: #f8fbff; }
.mini-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.mini-table th.sortable:hover { background: #eef3fb; color: #1d4ed8; }
.mini-table th .sort-ind { color: #2563eb; font-size: 11px; margin-left: 2px; }
.stat-legend { color: var(--ink-3); }
/* ---------- 弹窗 ---------- */
.modal { background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.modal-box {
border-radius: 14px; padding: 0; box-shadow: var(--sh-3); overflow: visible;
max-height: 88vh; display: flex; flex-direction: column;
}
.modal-box > h3 {
margin: 0; padding: 16px 20px 14px; font-size: 15px; font-weight: 600; color: var(--ink);
border-bottom: 1px solid var(--line-soft); background: #fcfdfe; border-radius: 14px 14px 0 0;
}
.modal-box > *:not(h3):not(.modal-close) { margin-left: 20px; margin-right: 20px; }
.modal-box > .form-grid, .modal-box > .form-row, .modal-box > #cd-body,
.modal-box > #cli-recycle-body, .modal-box > .mini-table, .modal-box > .cli-detail-scroll {
margin-left: 20px; margin-right: 20px;
}
.modal-box > .form-grid:first-of-type, .modal-box > .form-row:first-of-type { margin-top: 16px; }
.modal-box .modal-actions {
margin: 16px 0 0; padding: 12px 20px; border-top: 1px solid var(--line-soft);
background: #fcfdfe; border-radius: 0 0 14px 14px; justify-content: flex-end; gap: 8px;
}
.modal-close { top: 12px; right: 14px; width: 30px; height: 30px; line-height: 28px; font-size: 22px; color: var(--ink-4); }
.modal-close:hover { background: #f1f5f9; color: var(--ink); }
.modal-box .err { margin-left: 20px; margin-right: 20px; }
/* 表单控件 */
.form-grid { gap: 12px; }
.form-grid input, .form-grid select, .form-grid textarea,
.form-row input, .form-row textarea {
border: 1px solid #dfe4ec; border-radius: var(--r-md); padding: 9px 11px; font-size: 13px;
transition: border-color .15s, box-shadow .15s; background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.form-row input:focus, .form-row textarea:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-row label { color: var(--ink-3); font-size: 12px; margin-bottom: 5px; }
/* ---------- 通用按钮 ---------- */
.btn { border-radius: var(--r-md); padding: 8px 14px; font-size: 13px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: .15s; }
.btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.danger { color: var(--danger); border-color: #f3c2c2; background: #fff; }
.btn.danger:hover { background: #fdecec; border-color: #e8a5a5; color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { background: #f1f5f9; color: var(--ink); }
/* ---------- Toast ---------- */
.toast {
bottom: 32px; background: rgba(15,23,42,.94); color: #fff; padding: 11px 20px;
border-radius: var(--r-pill); font-size: 13px; box-shadow: var(--sh-3); backdrop-filter: blur(6px);
}
/* ---------- 筛选面板 ---------- */
.filter-panel { border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px; box-shadow: var(--sh-1); margin: 0 18px; background: #fff; }
.filter-grid .ff label { color: var(--ink-3); font-size: 11px; }
.filter-grid .ff input { border: 1px solid #dfe4ec; border-radius: var(--r-sm); padding: 7px 9px; }
.filter-grid .ff input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.filter-extra select { border: 1px solid #dfe4ec; border-radius: var(--r-sm); }
/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
.dash-cards { grid-template-columns: repeat(2, 1fr); }
.stats-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.sidebar { width: 64px; }
.brand-text, .nav-item .ni-label, .sidebar-foot span { display: none; }
.nav-item { justify-content: center; padding: 12px 0; }
.dash-grid { grid-template-columns: 1fr; }
.stats-charts { grid-template-columns: 1fr; }
}
/* 修正：弹窗保持可滚动（避免内容超出视口无法查看） */
.modal-box { overflow: auto; }
.modal-box > h3 { position: sticky; top: 0; z-index: 2; }
/* ---------- 商标表：列宽可拖拽 + 申请人省略 ---------- */
#tm-table { table-layout: fixed; width: max-content; }
#tm-table th, #tm-table td { overflow: hidden; }
/* 表头常驻：滚动列表时始终可见（原 position:relative 会覆盖基础 thead th 的 sticky，导致表头消失） */
#tm-table th { position: sticky; top: 0; z-index: 3; }
/* 右侧拖拽手柄（拖动列边框即可调整宽度） */
.col-resizer {
position: absolute; top: 0; right: 0; width: 6px; height: 100%;
cursor: col-resize; user-select: none; z-index: 3;
}
.col-resizer:hover { background: rgba(37, 99, 235, .18); }
/* 申请人名下商标表：列宽可拖拽——table-layout:fixed + colgroup 使各列独立，
拖动某一列只改变该列宽度（表格整体变宽、横向滚动），不挤压其他列 */
#modal-applicant .mini-table { table-layout: fixed; width: max-content; }
#modal-applicant .mini-table th { position: relative; overflow: hidden; }
/* 表头吸顶：商标较多需滚动查看时，表头始终固定在表格区顶部 */
#modal-applicant .mini-table thead th { position: sticky; top: 0; z-index: 3; background: #eef2f7; border-bottom: 1px solid #dbe2ea; }
#modal-applicant .mini-table td { overflow: hidden; }
#modal-applicant .mini-table th,
#modal-applicant .mini-table td { white-space: nowrap; text-overflow: ellipsis; }
#modal-applicant .mini-table th .col-resizer { right: 0; width: 10px; z-index: 5; }
#modal-applicant .mini-table th .col-resizer:hover { background: rgba(37, 99, 235, .28); }
/* 缩到极窄时仍保留可抓取的手柄区域，避免列被“锁死”在不可拖状态 */
#modal-applicant .mini-table col { min-width: 10px; }
/* 申请人名下商标：全屏显示，所有列（字段）默认完整展示，表格区自适应填满 */
#modal-applicant .modal-box {
width: auto; /* 由内容（表格实际宽度）决定，不强制全屏 */
max-width: 96vw; /* 仅在超出屏幕时收缩，避免横向溢出视口 */
height: auto; /* 高度由内容（行数）决定 */
max-height: 92vh; /* 行数过多时整体不超出屏幕，表格区内部滚动 */
display: flex;
flex-direction: column;
overflow: hidden;
padding: 18px 20px;
}
#modal-applicant .modal-box > h3 { flex: 0 0 auto; margin: 0 0 6px; padding-right: 36px; }
#modal-applicant #applicant-summary { flex: 0 0 auto; margin: 0 0 4px; }
#modal-applicant .applicant-tb-toolbar { flex: 0 0 auto; }
/* 列显隐按钮置于底部（申请人附件下方）时，面板改为向上弹出，避免被 modal-box 的 overflow:hidden 裁切 */
#modal-applicant .applicant-tb-toolbar.bottom .col-vis-panel { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; }
/* 表格区：行少时随内容变矮，行多时最多占 64vh 并内部滚动，不撑爆弹窗 */
#modal-applicant .table-wrap { flex: 0 1 auto; max-height: 64vh; min-height: 0; overflow: auto; }
#modal-applicant #applicant-docs { flex: 0 0 auto; }
#modal-applicant .modal-actions { flex: 0 0 auto; margin-top: 10px; }
/* 申请人：列宽不足时以…省略，拖动列边框变宽后自动显示完整 */
#tm-table .cell-applicant { overflow: hidden; }
#tm-table .tm-applicant {
display: block; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 状态徽章 / 类别 / 天数胶囊 / 邮箱 也做省略，避免撑破列宽 */
#tm-table td .tm-badge,
#tm-table td .tm-chip,
#tm-table td .tm-pill,
#tm-table td .mail-text {
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; display: inline-block; vertical-align: middle;
}
#tm-table td .mail-text { max-width: 180px; }
/* 删除确认弹窗输入框 */
#del-confirm-text {
width: 100%; padding: 9px 11px; border: 1px solid #d4dbe4; border-radius: 6px;
font-size: 14px; margin: 6px 0 2px;
}
#del-confirm-text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
/* ============================================================
商标注册申请书（modal-appform）
============================================================ */
#modal-appform .modal-box.appform-box {
width: 96vw; max-width: 1280px; height: 88vh;
display: flex; flex-direction: column;
}
.appform-grid {
display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.05fr);
gap: 16px; flex: 1; min-height: 0;
}
.appform-edit {
overflow-y: auto; padding-right: 6px;
border-right: 1px dashed #e2e8f0; padding-right: 16px;
}
.appform-edit .form-row { margin-bottom: 8px; }
.appform-edit label { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
.appform-edit input[type="text"],
.appform-edit input:not([type]) { /* default text */
width: 100%; padding: 8px 10px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
.appform-edit input[type="number"] {
padding: 7px 10px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 14px;
}
.appform-edit input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.appform-inline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 4px 0; }
.appform-inline label.cb { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px; }
.appform-up { display: flex; flex-direction: column; gap: 8px; }
#af-image { padding: 4px 0; }
.appform-image-preview {
min-height: 70px; padding: 10px; border: 1px dashed #cfd8e3; border-radius: 6px;
display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: flex-start; background: #fafbfc; color: #94a3b8;
text-align: center; font-size: 13px;
}
.appform-image-preview img { max-width: 100%; max-height: 220px; display: block; }
.af-img-hint { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.af-img-empty { color: #94a3b8; }
.af-img-thumb {
position: relative; width: 110px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; background: #fff;
display: flex; flex-direction: column; gap: 4px;
}
.af-img-thumb img { width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: 4px; }
.af-img-thumb .af-img-name {
font-size: 11px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.af-img-thumb .af-img-del {
position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border: none; border-radius: 50%;
background: #ef4444; color: #fff; cursor: pointer; font-size: 11px; line-height: 18px; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.af-img-thumb .af-img-del:hover { background: #dc2626; }
.appform-classes { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.af-class {
border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 8px;
}
.af-class-head {
display: flex; gap: 8px; align-items: center;
border-bottom: 1px dashed #e2e8f0; padding-bottom: 6px;
}
.af-class-head strong { font-size: 14px; color: #1e293b; }
.af-class-head .af-class-no {
background: var(--brand); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
}
.af-class-no-input {
width: 52px; padding: 3px 6px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 13px; text-align: center;
}
.af-class-items {
width: 100%;
border: 1px solid #d4dbe4; border-radius: 6px; padding: 8px 10px; font-size: 15px; line-height: 1.6;
resize: vertical; min-height: 96px; font-family: inherit; color: #111; background: #fff;
}
.af-class-items:focus { outline: 1px solid var(--brand); }
.af-class-remove {
border: none; background: #fff; color: #ef4444; cursor: pointer; padding: 4px 8px; font-size: 14px; border-radius: 4px;
}
.af-class-remove:hover { background: #fee2e2; }
.af-pages-hint { font-size: 12px; color: #94a3b8; margin: -6px 0 12px 0; }
#af-pages[readonly] { background: #f1f5f9; color: #475569; cursor: default; }
#af-pages[readonly]:focus { outline: none; border-color: #d4dbe4; box-shadow: none; }
/* 首页侧边栏 */
.home-main { display: flex; gap: 16px; align-items: flex-start; }
.home-sidebar { width: 200px; flex-shrink: 0; }
.home-content { flex: 1; min-width: 0; }
.home-quick-tools { display: flex; flex-direction: column; gap: 8px; }
.home-quick-btn { width: 100%; text-align: left; justify-content: flex-start; padding: 10px 14px; font-size: 14px; }
@media (max-width: 900px) {
.home-main { flex-direction: column; }
.home-sidebar { width: 100%; }
}
/* 预览区（右侧） */
.appform-preview {
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.appform-preview-scroll {
overflow: auto; padding: 16px; background: #eef1f5; border-radius: 8px; flex: 1;
display: flex; justify-content: center; align-items: flex-start;
}
.appform-canvas {
width: 595px; min-height: 740px; padding: 60px 70px;
background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08);
font-family: "SimSun", "宋体", "Microsoft YaHei", sans-serif; color: #111;
box-sizing: border-box;
}
.afp-title {
text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 8px;
margin: 8px 0 32px 0; color: #111;
font-family: "SimSun", "宋体", "Microsoft YaHei", serif;
}
.afp-sheet {
width: 100%; font-family: "SimSun", "宋体", "Microsoft YaHei", serif; color: #111;
position: relative; /* 供左下角「附页」定位 */
padding-bottom: 48px; /* 给左下角附页标注留出空间，避免与正文重叠 */
}
.afp-row {
font-size: 18px; line-height: 2.0; margin: 12px 0;
/* 让 html2canvas 在中文标点周围有合理换行点 */
word-break: break-all;
}
.afp-row-indent { padding-left: 2em; }
.afp-row-img-label { margin-bottom: 6px; }
.afp-ck {
font-size: 18px; margin-right: 28px; display: inline-block;
font-family: "SimSun", "宋体", monospace; white-space: nowrap;
}
.afp-blank { display: inline-block; min-width: 1em; }
.afp-image-zone {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
min-height: 180px; padding: 16px;
margin: 0 0 18px 0;
}
.afp-image-zone img { max-width: 300px; max-height: 200px; object-fit: contain; display: block; border: 1px solid #e5e7eb; padding: 6px; background: #fff; }
.afp-image-empty { color: #94a3b8; font-size: 16px; }
/* 商标文字叠加层 */
.afp-textmark-overlay {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 100%; min-height: 100px; padding: 16px;
text-align: center; line-height: 1.3;
font-weight: 400; letter-spacing: 4px;
text-shadow: 1px 1px 2px rgba(255,255,255,.6);
pointer-events: none; gap: 12px;
}
.afp-textmark-overlay .afp-textmark-item {
display: block;
}
.afp-textmark-overlay .afp-textmark-item.font-lishu {
font-weight: 400; /* 隶书不加粗 */
}
/* 商标文字录入区 */
.appform-textmark { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.af-textmark-row { display: flex; gap: 8px; align-items: center; }
.af-textmark-input {
flex: 1; padding: 8px 10px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
.af-textmark-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.af-textmark-font {
padding: 7px 10px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 13px; background: #fff; color: #33415c; min-width: 200px; max-width: 240px; flex: 0 0 auto;
}
.af-textmark-del { border: none; background: #fff; color: #ef4444; cursor: pointer; padding: 4px 8px; font-size: 16px; border-radius: 4px; }
.af-textmark-del:hover { background: #fee2e2; }
.afp-classes-line {
font-size: 18px; line-height: 2.0; margin: 18px 0 0 0;
text-align: justify; word-break: break-all;
/* 整体模仿官方文档：标签在前，长内容紧跟其后自然换行 */
}
.afp-classes-prefix { font-weight: 500; }
.afp-classes-content { display: inline; }
/* 多类别列表：每类一行，每页最多 4 类 */
.afp-classes-list {
display: inline;
}
.afp-classes-item {
display: block;
font-size: 18px; line-height: 2.0;
word-break: break-all;
margin: 4px 0;
}
/* 首页卡片「点击查看」提示 + 更多入口 */
.dc-hint { margin-top: 4px; font-size: 11px; color: #93a1b5; }
.dash-more { margin-top: 8px; text-align: right; }
.dash-more .btn-xs { cursor: pointer; }
.ml-scroll { max-height: 60vh; overflow: auto; }
.toolbar select {
padding: 7px 8px; border: 1px solid #d4dbe4; border-radius: 6px;
font-size: 13px; background: #fff; color: #33415c;
}
/* 「（附页： 页）」固定在整页左下角（官方样张位置） */
.afp-pages-corner {
position: absolute; left: 0; bottom: 0;
font-size: 16px; color: #111; white-space: nowrap;
font-family: "SimSun", "宋体", "Microsoft YaHei", serif;
}
@media (max-width: 980px) {
/* 移动端：整页滚动，避免「固定高度 + 内部嵌套滚动」把右侧预览（商品/服务项目、附页标注）截断，
从而导致手机上「显示不完整」且「生成出来的内容与预览看到的不一致」。 */
#modal-appform .modal-box.appform-box {
width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
border-radius: 0; padding: 16px 14px; overflow: auto;
}
.appform-grid { display: block; flex: none; min-height: 0; gap: 0; }
.appform-edit { overflow: visible; border-right: none; border-bottom: 1px dashed #e2e8f0; padding: 0 0 14px; }
.appform-preview { overflow: visible; }
.appform-preview-scroll { overflow: visible; padding: 14px 0 0; align-items: stretch; }
.appform-canvas { width: 100%; max-width: 595px; margin: 0 auto; min-height: 0; padding: 30px 20px; }
#af-close-btn { top: 10px; right: 12px; }
/* 避免移动端软键盘/缩放导致关闭按钮被顶出视口 */
#modal-appform .modal-close { position: fixed; }
/* 商标文字录入：UC 等浏览器对「flex 容器里的 input/select」有渲染 bug，
会把输入框算成极窄或横向挤占，导致文字看不见。手机端改纯 block 布局，
彻底避开 flex 计算，保证名称输入框整行铺满、字号 16px、文字完整可见 */
.af-textmark-row { display: block; }
.af-textmark-row > input,
.af-textmark-row > select {
display: block; width: 100%; box-sizing: border-box;
-webkit-appearance: none; appearance: none;
font-size: 16px; line-height: 1.4; margin: 0 0 6px 0;
}
.af-textmark-input {
min-height: 46px; padding: 12px; height: auto;
border: 1px solid #d4dbe4; border-radius: 6px; color: #111; background: #fff;
}
.af-textmark-font {
width: 100%; min-width: 0; max-width: none; padding: 12px;
border: 1px solid #d4dbe4; border-radius: 6px; background: #fff;
}
.af-textmark-del {
display: inline-block; width: auto; margin: 0 0 8px 0; padding: 6px 14px;
}
}
/* ---------- 用户管理 / 系统设置 占位页 ----------
这两个页面的内容由弹窗承载，占位容器只负责在弹窗被关闭后
给出明确提示和"重新打开"入口，避免主区域一片空白。 */
.empty-page-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 320px;
margin: 24px;
padding: 32px 24px;
text-align: center;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 12px;
}
.empty-page-hint .eph-icon { font-size: 40px; line-height: 1; }
.empty-page-hint .eph-title { font-size: 18px; font-weight: 600; color: #1f2d3d; }
.empty-page-hint .eph-sub { max-width: 460px; font-size: 13px; color: #7b8794; line-height: 1.6; }
.empty-page-hint .btn { margin-top: 6px; }
/* 商标文字区下方关于字体生效条件的说明 */
.af-font-hint { font-size: 12px; line-height: 1.6; margin-top: 8px; }
/* 侧边栏分组标题（如「常用工具」） */
.sidebar-sec-label {
padding: 14px 16px 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: #94a3b8;
text-transform: uppercase;
}
/* ---------- 商标详情（只读） ---------- */
.td-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e3e8ef; border: 1px solid #e3e8ef; border-radius: 8px; overflow: hidden; }
.td-row { display: flex; align-items: flex-start; gap: 8px; background: #fff; padding: 9px 12px; }
.td-label { flex: 0 0 96px; font-size: 12px; color: #889; line-height: 20px; }
.td-value { flex: 1; min-width: 0; font-size: 13px; color: #1f2d3d; line-height: 20px; word-break: break-all; white-space: pre-wrap; }
@media (max-width: 720px) { .td-grid { grid-template-columns: 1fr; } }
/* ---------- 委托书下载 ---------- */
.pd-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; flex-wrap: wrap; }
.pd-tip { font-size: 12px; color: #889; }
.pd-list { padding: 14px 18px 18px; }
.pd-empty { background: #fff; border: 1px dashed #d4dbe4; border-radius: 8px; padding: 34px; text-align: center; color: #889; font-size: 13px; }
.pd-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.pd-item:hover { border-color: #bcd2f5; }
.pd-ico { width: 38px; height: 38px; border-radius: 8px; background: #eef4ff; color: #2b5cd9; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pd-main { flex: 1; min-width: 0; }
.pd-name { font-size: 14px; color: #1f2d3d; font-weight: 600; word-break: break-all; }
.pd-sub { font-size: 12px; color: #889; margin-top: 3px; }
.pd-acts { display: flex; gap: 8px; flex-shrink: 0; }
.pd-upbox { padding: 0 18px; }
#pd-file-input { display: none; }
/* ---------- 用户管理 / 系统设置（独立页面卡片） ---------- */
.users-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; margin: 14px 18px; padding: 16px 18px; }
.uc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.uc-title { font-size: 15px; font-weight: 600; color: #1f2d3d; }
.uc-sub { font-size: 12px; color: #8895a7; margin-top: 3px; line-height: 1.6; }
.uc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.u-table-wrap { overflow-x: auto; }
.users-card .mini-table { margin-top: 0; }
.users-card .mini-table th { white-space: nowrap; }
.users-card .mini-table td { white-space: nowrap; }
.users-card .mini-table td .btn { margin-right: 0; }
.ip-region { color: #6b7785; font-size: 12px; }
.users-card .form-grid { margin-bottom: 0; }
.users-card .err { margin-top: 8px; }
@media (max-width: 720px) { .users-card { margin: 12px; padding: 14px; } }
/* ---------- 常用类别产品 ---------- */
.pc-search { padding: 6px 10px; border: 1px solid #d4dbe4; border-radius: 6px; min-width: 260px; font-size: 13px; }
.pc-wrap { display: flex; gap: 14px; padding: 12px 18px 18px; align-items: flex-start; }
.pc-side { width: 268px; flex-shrink: 0; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 12px; }
.pc-side-title { font-size: 13px; font-weight: 600; color: #1f2d3d; margin-bottom: 10px; }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: calc(100vh - 220px); overflow-y: auto; }
.pc-cat { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid #e3e8ef; border-radius: 6px; background: #fff; cursor: pointer; text-align: left; font-size: 12px; color: #475569; }
.pc-cat:hover { border-color: #bcd2f5; background: #f8fbff; }
.pc-cat.active { border-color: #2b5cd9; background: #eef4ff; color: #1e40af; font-weight: 600; }
.pc-cat.hit { box-shadow: inset 0 0 0 2px #ffd66b; }
.pc-cat-no { flex: 0 0 22px; font-weight: 700; color: #2b5cd9; }
.pc-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cat-cnt { flex: 0 0 auto; font-size: 11px; color: #98a2b3; background: #f1f5f9; border-radius: 8px; padding: 1px 6px; }
.pc-main { flex: 1; min-width: 0; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 16px 18px; }
.pc-main-head { margin-bottom: 12px; }
.pc-cat-title { font-size: 16px; font-weight: 600; color: #1f2d3d; }
.pc-cat-sub { font-size: 12px; color: #8895a7; margin-top: 4px; }
.pc-items, .pc-hit-items { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { display: inline-block; padding: 6px 12px; background: #f4f7fb; border: 1px solid #e3e8ef; border-radius: 16px; font-size: 13px; color: #334155; cursor: pointer; }
.pc-chip:hover { background: #eef4ff; border-color: #bcd2f5; color: #1e40af; }
.pc-empty { padding: 28px; text-align: center; color: #98a2b3; font-size: 13px; background: #fafbfd; border: 1px dashed #dfe6ef; border-radius: 8px; }
.pc-editor textarea { width: 100%; padding: 10px 12px; border: 1px solid #d4dbe4; border-radius: 8px; font-size: 13px; line-height: 1.8; resize: vertical; font-family: inherit; }
.pc-editor-tip { font-size: 12px; color: #8895a7; margin-top: 6px; }
.pc-hit-head { font-size: 13px; color: #475569; margin-bottom: 12px; }
.pc-hit-sec { margin-bottom: 16px; }
.pc-hit-title { font-size: 14px; color: #1f2d3d; margin-bottom: 8px; display: flex; align-items: center; }
@media (max-width: 900px) { .pc-wrap { flex-direction: column; } .pc-side { width: 100%; } .pc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); max-height: 220px; } }
/* ---------- 常用类别产品：多分组 ---------- */
.pc-groups { display: flex; flex-direction: column; gap: 12px; }
.pc-group { border: 1px solid #e3e8ef; border-radius: 10px; padding: 12px 14px; background: #fff; }
.pc-group.private { background: #fffdf5; border-color: #f0e2bd; }
.pc-ghead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pc-gname { font-size: 14px; font-weight: 600; color: #1f2d3d; }
.pc-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid transparent; line-height: 18px; }
.pc-badge.shared { background: #e8f5ec; color: #2b7a4b; border-color: #c6e6d3; }
.pc-badge.private { background: #fff4e0; color: #a3701a; border-color: #f2dcb5; }
.pc-gmeta { font-size: 12px; color: #8895a7; }
.pc-gacts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pc-btn { font-size: 12px; padding: 3px 9px; border: 1px solid #d4dbe4; background: #fff; color: #475569; border-radius: 5px; cursor: pointer; }
.pc-btn:hover { border-color: #bcd2f5; color: #1e40af; background: #f8fbff; }
.pc-btn.danger { color: #c62a2a; border-color: #f3c2c2; }
.pc-btn.danger:hover { background: #fdecec; border-color: #e8b4b4; color: #a81f1f; }
.pc-btn:disabled { opacity: .5; cursor: not-allowed; }
.pc-gitems { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip.empty { background: transparent; border-style: dashed; color: #a8b3c2; cursor: default; }
.pc-editor-title { font-size: 14px; font-weight: 600; color: #1f2d3d; margin-bottom: 10px; }
.pc-edit-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pc-field { display: flex; align-items: center; gap: 8px; }
.pc-field-label { font-size: 13px; color: #475569; }
.pc-field input { padding: 6px 10px; border: 1px solid #d4dbe4; border-radius: 6px; font-size: 13px; min-width: 220px; }
.pc-shared-line { font-size: 13px; color: #334155; display: flex; align-items: center; gap: 6px; }
.pc-editor-actions { display: flex; gap: 8px; margin-top: 12px; }
.pc-hit-title .pc-badge { margin-left: 6px; }
@media (max-width: 720px) { .pc-gacts { margin-left: 0; width: 100%; } }
/* ---------- 站点名称：两行居中（公司名 / 管理系统），每行放不下时由 JS 缩小字号 ---------- */
.login-card h1 { text-align: center; line-height: 1.3; font-size: 24px; letter-spacing: 1px; }
.login-card h1 .sn-main { display: block; white-space: nowrap; overflow: hidden; }
.login-card h1 .sn-suffix { display: block; white-space: nowrap; overflow: hidden; font-size: 17px; color: #55617a; margin-top: 2px; }
.login-card h1 .sn-suffix:empty { display: none; }
/* 侧边栏品牌名：同样两行居中，字号由 JS 按可用宽度自适应 */
.brand-text { overflow: hidden; }
.brand-text b { display: block; text-align: center; line-height: 1.3; font-size: 13.5px; }
.brand-text b .sn-main { display: block; white-space: nowrap; overflow: hidden; }
.brand-text b .sn-suffix { display: block; white-space: nowrap; overflow: hidden; font-size: 11px; color: #93a2ba; }
.brand-text b .sn-suffix:empty { display: none; }
/* ---------- 常用网址 ---------- */
.sl-list { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.sl-item { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 13px 16px; }
.sl-item:hover { border-color: #bcd2f5; box-shadow: 0 2px 10px rgba(43,92,217,.07); }
.sl-ico { flex: 0 0 34px; height: 34px; border-radius: 8px; background: #eef4ff; color: #2b5cd9; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sl-main { flex: 1; min-width: 0; }
.sl-name { font-size: 14.5px; font-weight: 600; color: #1e40af; text-decoration: none; }
.sl-name:hover { text-decoration: underline; }
.sl-desc { font-size: 12.5px; color: #64748b; margin-top: 4px; line-height: 1.6; }
.sl-url { font-size: 11.5px; color: #98a2b3; margin-top: 4px; word-break: break-all; }
.sl-acts { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.sl-acts .btn { text-decoration: none; display: inline-block; }
@media (max-width: 720px) {
.sl-item { flex-wrap: wrap; }
.sl-acts { width: 100%; }
}
/* ===== 记录模块（成交/跟踪）：选择客户、详情、批量、回收站 ===== */
.pick-client-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #eef1f5; cursor: pointer; }
.pick-client-item:hover { background: #f0f6ff; }
.pick-client-item b { color: #1e293b; font-weight: 600; }
.pick-client-item .muted { font-size: 12px; }
.tk-clip { color: #475569; }
.detail-box { white-space: pre-wrap; word-break: break-word; background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 6px; padding: 8px 10px; min-height: 34px; color: #1e293b; line-height: 1.6; }
.sel-all { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mini-table th input[type="checkbox"], .mini-table td input[type="checkbox"] { cursor: pointer; }
.btn-xs:disabled { opacity: .5; cursor: not-allowed; }
/* ===== 侧边栏折叠分组 ===== */
.nav-group { margin: 2px 0; }
.nav-group-head {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 12px; margin: 0 0 2px; border: 0; border-radius: var(--r-md);
background: transparent; color: #b8c4d9; font-size: 13.5px; font-family: inherit;
text-align: left; cursor: pointer;
}
.nav-group-head .ni-icon { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.nav-group-head .ni-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-head:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-group.active > .nav-group-head { color: #fff; font-weight: 600; background: rgba(255,255,255,.06); }
.nav-group .ng-arrow { font-size: 11px; opacity: .65; transition: transform .18s ease; }
.nav-group.open .ng-arrow { transform: rotate(90deg); }
.nav-group-body { display: none; margin: 2px 0 4px; }
.nav-item.sub { padding: 8px 12px 8px 40px; font-size: 13px; color: #aab6cc; margin-bottom: 1px; }
.nav-item.sub.active { color: #fff; }
/* 记录页筛选控件 */
.rec-search, .rec-date {
padding: 7px 10px; border: 1px solid #d8dee8; border-radius: 7px;
font-size: 13px; font-family: inherit; background: #fff; color: #1e293b;
}
.rec-search { width: 150px; }
.rec-date { width: 132px; }
.rec-search:focus, .rec-date:focus { outline: 2px solid rgba(59,130,246,.35); border-color: #93b4f5; }
/* ============================================================
移动端响应式（PWA / APP 用）
断点：≤ 768px 视为手机
============================================================ */
@media (max-width: 768px) {
/* 全局：禁用 hover 动效（避免手指点完后残留态） */
*, *:hover, *:focus, *:active {
transition: none !important;
animation: none !important;
}
html, body { font-size: 14px; -webkit-text-size-adjust: 100%; }
/* 顶部栏：紧凑 */
.topbar { padding: 8px 12px; flex-wrap: wrap; }
.topbar h2 { font-size: 15px; }
.topbar .sub { font-size: 12px; }
#user-info { font-size: 12px; }
/* 侧边栏：默认抽屉化（小屏藏起来） */
.app-shell { flex-direction: column; }
.sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 78vw; max-width: 320px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); z-index: 100; box-shadow: 4px 0 24px rgba(0,0,0,.18); overflow-y: auto; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
.sidebar.is-open { display: block; }
/* 覆盖 900px icon-rail 规则：抽屉展开时必须显示菜单文字、品牌文字与底部文字 */
.sidebar.is-open .brand-text,
.sidebar.is-open .nav-item .ni-label,
.sidebar.is-open .sidebar-foot span { display: block !important; }
.sidebar.is-open .nav-item { justify-content: flex-start !important; padding: 10px 14px !important; }
.sidebar.is-open .nav-item.sub { padding: 8px 12px 8px 40px !important; }
.main { padding: 10px; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 70px); width: 100%; }
/* 汉堡按钮（仅手机显示） */
.mobile-menu-btn { display: inline-flex !important; }
/* 暗罩 */
.sidebar-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
/* 首页两列变单列 */
.dash-row-grid { grid-template-columns: 1fr !important; }
.dash-col { padding: 0 !important; }
/* 表格：横向滚动 + 单元格紧凑 */
.mini-table, .data-table, table { font-size: 12px; }
.mini-table th, .mini-table td, .data-table th, .data-table td { padding: 6px 8px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 按钮：最小 44px 触控目标 */
button, .btn, .btn-xs, .btn-ghost {
min-height: 44px !important;
padding: 10px 16px !important;
}
.btn-xs { min-height: 36px !important; padding: 6px 12px !important; }
a, .nav-item { min-height: 44px; display: flex; align-items: center; }
/* 表单输入框：全宽 + 16px 字号（避免 iOS 缩放） */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
textarea, select {
width: 100%; font-size: 16px !important; padding: 10px 12px;
}
/* 模态弹窗：手机全屏化 */
.modal-box {
width: 100vw !important; max-width: 100vw !important;
height: 100vh !important; max-height: 100vh !important;
border-radius: 0 !important; padding: 16px !important;
padding-top: calc(env(safe-area-inset-top, 0) + 16px) !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px) !important;
}
/* 模态弹窗头部更显眼 */
.modal-head h3 { font-size: 17px; }
/* toolbar 工具栏：横向滚动 */
.toolbar { flex-wrap: wrap; gap: 6px; padding: 8px; }
.toolbar > * { flex: 0 0 auto; }
.toolbar .count { margin-left: 0 !important; flex-basis: 100%; }
/* 看板（dashboard）卡片 */
.stat-card { padding: 12px; }
.stat-card h3 { font-size: 20px; }
/* 列表行：紧凑 */
.dash-row { padding: 8px 10px; }
.dash-row .dr-title { font-size: 14.5px; }
/* 客户详情页：左右栏上下 */
.client-detail-layout { flex-direction: column !important; }
/* 底部导航条（手机专属快捷入口） */
.mobile-bottom-nav {
display: flex !important; position: fixed; left: 0; right: 0; bottom: 0;
background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.08);
z-index: 50; padding: 6px 0 calc(env(safe-area-inset-bottom, 0) + 6px);
}
.mobile-bottom-nav a {
flex: 1; display: flex; flex-direction: column; align-items: center;
text-decoration: none; color: #64748b; font-size: 11px;
padding: 4px 0; min-height: 44px; justify-content: center;
}
.mobile-bottom-nav a.active { color: #1f4e79; font-weight: 600; }
/* 登录页：填满屏幕 */
.login-wrap { padding: 16px; }
.login-card { width: 100%; max-width: 100%; padding: 24px 20px; }
/* dashboard 头部卡片堆叠 */
.stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
/* 文件下载/链接 */
a { word-break: break-word; }
}
/* 桌面端：默认隐藏手机专属元素 */
@media (min-width: 769px) {
.mobile-menu-btn, .mobile-bottom-nav, .sidebar-mask { display: none !important; }
}
/* 超小屏（≤ 380px）进一步压缩 */
@media (max-width: 380px) {
.stat-grid { grid-template-columns: 1fr !important; }
}
/* ============================================================
移动端用户菜单（点头像弹底部 sheet）
============================================================ */
.mobile-user-sheet { position: fixed; inset: 0; z-index: 200; }
.mobile-user-sheet .mus-mask { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.mobile-user-sheet .mus-card {
position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0) + 76px);
background: #fff; border-radius: 14px; padding: 12px;
box-shadow: 0 -8px 24px rgba(0,0,0,.15);
display: flex; flex-direction: column; gap: 6px;
}
.mus-user { padding: 10px 12px 14px; font-size: 14px; color: #1e293b; border-bottom: 1px solid #e3e8ef; margin-bottom: 4px; }
.mus-user b { color: #1f4e79; }
.mus-btn {
min-height: 48px !important; padding: 12px 16px !important;
background: #f8fafc; border: 1px solid #e3e8ef; border-radius: 10px;
font-size: 15px; color: #1e293b; text-align: left; cursor: pointer;
font-family: inherit;
}
.mus-btn:active { background: #e2e8f0; }
.mus-btn.danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.mus-btn.ghost { background: transparent; border-color: transparent; color: #64748b; margin-top: 4px; }
/* 头像在手机端可点击（提示） */
@media (max-width: 768px) {
#user-avatar { cursor: pointer; }
#user-avatar::after {
content: '▼'; font-size: 9px; color: #94a3b8;
margin-left: 4px; vertical-align: middle;
}
}
/* 修复：手机端 topbar 用户信息区（之前会溢出遮挡） */
@media (max-width: 768px) {
.topbar { padding: 6px 10px; min-height: 48px; height: auto; gap: 8px; flex-wrap: nowrap; }
.topbar .tb-left { min-width: 0; flex: 1; }
.topbar-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sub { display: none; } /* 副标题手机隐藏 */
.topbar .spacer { display: none; }
/* 桌面端按钮组在手机端隐藏 */
.topbar > #btn-password,
.topbar > #btn-logout { display: none !important; }
/* 用户信息简化 */
.tb-user { padding: 2px 4px; gap: 4px; background: transparent; border: none; }
.tb-user .user-info { display: none; } /* 手机端隐藏"你好，xxx · 超管"长文字 */
.user-avatar img { width: 28px; height: 28px; }
/* 用户头像独占右侧 */
.tb-user { margin-left: auto; }
}
/* 仪表盘卡片网格：手机端单列、紧凑 */
@media (max-width: 768px) {
.dash-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px !important; }
.dash-card { padding: 10px 12px !important; }
.dash-card .dc-label { font-size: 11px; }
.dash-card .dc-value { font-size: 18px !important; }
.dash-card .dc-hint { font-size: 11px; }
}
/* 极小屏（≤ 480px）：单列 */
@media (max-width: 480px) {
.dash-cards { grid-template-columns: 1fr !important; }
}
/* 商标管理页工具栏（两行：搜索行 + 操作行）手机端 */
@media (max-width: 768px) {
#page-trademarks .toolbar { padding: 10px !important; }
#page-trademarks .tm-search-row { flex-wrap: wrap; gap: 6px; }
#page-trademarks .tm-search-row #search { flex: 1 1 100%; min-width: 0; }
#page-trademarks .tm-search-row #search-field { flex: 1 1 auto; }
#page-trademarks .tm-search-row #btn-search-toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex !important; }
/* 操作行默认折叠，点 ⚙ 展开 */
#page-trademarks .tm-actions-row { display: none; }
#page-trademarks .toolbar.expanded .tm-actions-row { display: flex !important; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e3e8ef; }
#page-trademarks .tm-actions-row #batch-tools { flex: 1 1 100%; margin-top: 4px; }
#page-trademarks .tm-actions-row #batch-tools button { flex: 1; }
#page-trademarks .pager { flex-wrap: wrap; justify-content: space-between; }
#page-trademarks .pager select { font-size: 14px; min-height: 36px; }
#page-trademarks .pager #count-info { margin-left: 0; }
}
/* 待办列表页：空状态优化 */
#page-todos .dash-empty { padding: 40px 20px !important; text-align: center; color: #94a3b8; font-size: 14px; }
#page-todos .dash-empty::before { content: '📋'; display: block; font-size: 48px; margin-bottom: 8px; opacity: 0.5; }
#page-todo-done .dash-empty { padding: 40px 20px !important; text-align: center; color: #94a3b8; font-size: 14px; }
#page-todo-done .dash-empty::before { content: '✅'; display: block; font-size: 48px; margin-bottom: 8px; opacity: 0.5; }
/* 修复：清除 active tab 视觉残留（之前蓝色圆弧是 li.active 的 ::before） */
@media (max-width: 768px) {
.nav-item.active::before,
.nav-item.active::after { display: none !important; }
/* 待办工具栏里的复选框 + 全选：换行紧凑 */
#page-todos .toolbar > .batch-all { font-size: 13px; }
#page-todos .toolbar > #todos-page-count { flex-basis: 100%; text-align: right; padding-top: 4px; border-top: 1px solid #e3e8ef; }
}
/* ============================================================
首页工具卡片（替代原统计卡片）
============================================================ */
.dash-card.tool-card {
display: flex !important; align-items: center; gap: 14px;
padding: 18px 18px !important; min-height: 76px;
}
.dash-card.tool-card .tc-icon {
font-size: 36px; width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #eef2ff, #dbeafe);
border-radius: 12px; flex-shrink: 0;
}
.dash-card.tool-card .tc-main { flex: 1; min-width: 0; }
.dash-card.tool-card .tc-title { font-size: 16px; font-weight: 600; color: #1f2d3d; margin-bottom: 2px; }
.dash-card.tool-card .tc-sub { font-size: 12px; color: #889; }
.dash-card.tool-card .tc-arrow { font-size: 28px; color: #cbd5e1; font-weight: 300; }
.dash-card.tool-card:active { background: #f1f5f9; }
@media (max-width: 480px) {
.dash-card.tool-card { padding: 14px !important; min-height: 64px; }
.dash-card.tool-card .tc-icon { font-size: 28px; width: 44px; height: 44px; }
.dash-card.tool-card .tc-title { font-size: 14px; }
}
/* ============================================================
修复：侧边栏抽屉打开时遮罩 + 主内容区位移
============================================================ */
@media (max-width: 768px) {
.app { position: relative; }
.sidebar.is-open { display: block; animation: sidebarSlideIn 0.22s ease-out; }
/* 抽屉为覆盖式：主内容区不位移，仅由暗罩半透明遮住，确保抽屉内容完整可见 */
.main-content { transition: none; }
body.sidebar-open { overflow: hidden; }
/* 暗罩：默认隐藏，sidebar-open 时显示 */
#sidebar-mask { display: none; }
body.sidebar-open #sidebar-mask { display: block; }
/* 抽屉本身的 z-index 高于主内容 */
.sidebar { z-index: 110; }
.main-content { position: relative; z-index: 1; }
}
@keyframes sidebarSlideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* APP 端商标页搜索折叠（⚙ 展开操作行）已并入上方「商标管理页工具栏（两行）」媒体查询 */
/* ---------- 发送提醒：预约发送 ---------- */
.send-schedule { margin-top: 12px; }
.send-schedule .radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 13px; color: var(--ink-2, #334); cursor: pointer; }
.send-later { margin-top: 10px; padding: 12px; border: 1px solid var(--line-soft, #e6e9ef); border-radius: var(--r-md, 8px); background: var(--bg-soft, #f8fafc); }
.dtp-display { font-size: 14px; font-weight: 600; color: var(--brand, #2563eb); padding: 6px 10px; background: #fff; border: 1px dashed var(--line, #dfe4ec); border-radius: var(--r-sm, 6px); margin-bottom: 8px; }
.send-later-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.send-later .muted { margin: 8px 0 0; font-size: 12px; }
.send-scheduled { margin-top: 12px; }
.send-scheduled details { border: 1px solid var(--line-soft, #e6e9ef); border-radius: var(--r-md, 8px); padding: 6px 10px; background: var(--bg-soft, #f8fafc); }
.send-scheduled summary { cursor: pointer; font-size: 13px; color: var(--ink-2, #334); user-select: none; }
.sched-list { margin-top: 8px; max-height: 200px; overflow: auto; }
.sched-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft, #eef1f5); font-size: 13px; }
.sched-item:first-child { border-top: none; }
.sched-info { line-height: 1.5; }
.sched-item .muted { font-size: 12px; }
/* ---------- 万年历日期时间选择器 ---------- */
.dtp-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 200; }
.dtp-box { width: 340px; max-width: 94vw; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.3); color: #1f2937; }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtp-title { font-size: 15px; font-weight: 600; }
.dtp-nav { width: 30px; height: 30px; border: 1px solid var(--line, #dfe4ec); background: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink-2, #334); }
.dtp-nav:hover { border-color: var(--brand, #2563eb); color: var(--brand, #2563eb); }
.dtp-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--ink-4, #94a3b8); margin-bottom: 4px; }
.dtp-week span { padding: 4px 0; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-cell { text-align: center; padding: 7px 0; font-size: 13px; border-radius: 8px; cursor: pointer; color: #1f2937; }
.dtp-cell.empty { cursor: default; }
.dtp-cell:not(.empty):hover { background: var(--brand-soft, #eef4ff); }
.dtp-cell.today { font-weight: 700; color: var(--brand, #2563eb); }
.dtp-cell.sel { background: var(--brand, #2563eb); color: #fff; font-weight: 600; }
.dtp-cell.sel:hover { background: var(--brand-dark, #1d4ed8); }
.dtp-time { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.dtp-time-field { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3, #64748b); }
.dtp-time-field input { width: 64px; text-align: center; padding: 8px; font-size: 16px; border: 1px solid var(--line, #dfe4ec); border-radius: 8px; }
.dtp-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dtp-spacer { flex: 1; }
/* ============ 用户管理：卡片化 + 标签切换（参考主流 SaaS 后台） ============ */
#page-users { background: var(--bg); }
.um-tabs { display: flex; gap: 4px; padding: 12px 18px 0; }
.um-tab {
appearance: none; border: none; background: transparent; cursor: pointer;
padding: 9px 16px; font-size: 13.5px; color: var(--ink-3);
border-radius: 9px 9px 0 0; position: relative; transition: color .15s, background .15s;
}
.um-tab:hover { color: var(--ink); background: #eef2f7; }
.um-tab.active { color: var(--brand); font-weight: 600; background: var(--card); box-shadow: inset 0 -2px 0 var(--brand); }
.um-pane { display: none; }
.um-pane.active { display: block; }
.um-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 18px 6px;
}
.um-h { font-size: 16px; font-weight: 700; color: var(--ink); }
.um-sub { font-size: 12px; color: var(--ink-4); margin-top: 3px; }
.um-sub b { color: var(--brand); }
.um-actions { display: flex; gap: 8px; flex-shrink: 0; }
.um-grid {
display: grid; gap: 14px; padding: 8px 18px 18px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.um-card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 16px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 12px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.um-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #cdd9ec; }
.um-card-head { display: flex; align-items: center; gap: 12px; }
.um-avatar-wrap { flex-shrink: 0; }
.um-avatar {
width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4f7cff, #7c5cff);
overflow: hidden;
}
.um-avatar-init { width: 46px; height: 46px; }
.um-id { min-width: 0; flex: 1; }
.um-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.um-uname { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.um-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.um-badge {
font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px;
background: #eef2f7; color: var(--ink-3); border: 1px solid var(--line);
}
.um-badge.admin { background: #fff1f0; color: #cf1322; border-color: #ffccc7; }
.um-badge.self { background: #e6f4ff; color: #0958d9; border-color: #bae0ff; }
.um-badge.title { background: #f6fefb; color: #08979c; border-color: #b5f5ec; }
.um-contacts { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; border-top: 1px dashed var(--line-soft); }
.um-contact { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 底部：元信息与按钮区。已分配商标 > 0 的账号会多一个「取消分配」按钮，
若不给按钮区换行空间，它会撑大并挤压左侧元信息，导致卡片底部错乱 */
.um-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.um-meta { font-size: 12px; color: var(--ink-3); line-height: 1.7; min-width: 0; flex: 1 1 150px; }
.um-meta b { color: var(--ink-2); font-weight: 600; }
.um-meta .link-plain { color: var(--brand); font-weight: 600; }
.um-card-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 1 auto; }
.um-card-btns .btn { padding: 5px 10px; font-size: 12px; }
/* 移动端：卡片单列、操作按钮换行 */
@media (max-width: 720px) {
.um-grid { grid-template-columns: 1fr; padding: 8px 12px 16px; }
.um-toolbar { padding: 12px 12px 4px; }
.um-card-foot { flex-direction: column; align-items: stretch; }
.um-card-btns { justify-content: flex-start; }
}