* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f3f4f6; color: #1f2937; font-size: 14px; }

/* 登录：卡片整体偏右（右侧留空隙，不贴边、不居中） */
.login-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: flex-end; background: linear-gradient(135deg, #1e3a8a, #2563eb); padding: 24px 12% 24px 24px; }
.login-card { position: relative; z-index: 1; background: #fff; width: 380px; max-width: 100%; min-height: 480px; padding: 32px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; }
/* 三个登录面板：默认隐藏，内容顶部对齐；卡片固定高度，切换不跳动、无滚动条 */
.login-card > div[id^="login"] { display: none; }
.login-tabs { display: flex; gap: 24px; margin-bottom: 18px; border-bottom: 1px solid #eef2f7; }
.login-tabs .ltab { font-size: 16px; padding: 8px 2px; cursor: pointer; color: #94a3b8; position: relative; }
.login-tabs .ltab.active { color: #2563eb; font-weight: 700; }
.login-tabs .ltab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2563eb; }
.qr-box { margin: 24px auto 18px; width: 200px; height: 200px; border: 2px dashed #cbd5e1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; background: #f8fafc; }
.qr-box .qr-icon { font-size: 48px; }
.qr-box .qr-placeholder { margin-top: 8px; font-size: 13px; }
.qr-tip { text-align: center; color: #64748b; font-size: 14px; line-height: 1.7; }
.qr-tip .qr-soon { color: #f59e0b; font-size: 12px; }
/* 扫码登录：二维码固定 150px，居中，炫彩渐变 + 中心站标，避免容器跳动 */
#scanQr { position: relative; min-height: 150px; display: flex; justify-content: center; align-items: center; }
#scanQr svg { width: 150px !important; height: 150px !important; display: block; border-radius: 8px; }
.scan-center-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); overflow: hidden; }
.scan-center-logo img { width: 100%; height: 100%; object-fit: cover; }
.scan-center-logo { font-weight: 700; color: #2563eb; font-size: 18px; }
.login-card h2 { margin: 8px 0 2px; }
.login-card .sub { color: #6b7280; font-size: 12px; margin-bottom: 18px; }
.login-title { margin: 0 0 2px; font-size: 22px; color: #1f2937; font-weight: 700; }
.login-sub { color: #6b7280; font-size: 12px; margin-bottom: 18px; min-height: 1px; }
.sms-row { display: flex; gap: 8px; margin-top: 4px; }
.sms-row .inp { flex: 1; }
.btn-sms { flex: 0 0 auto; padding: 0 14px; background: #fff; color: #2563eb; border: 1px solid #2563eb; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-sms:hover { background: #eff6ff; }
.btn-sms:disabled { color: #9ca3af; border-color: #d1d5db; cursor: not-allowed; background: #fff; }
.seg { display: flex; gap: 8px; margin-top: 4px; }
.seg-item { flex: 1; text-align: center; padding: 8px 0; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; cursor: pointer; color: #64748b; background: #fff; }
.seg-item.active { border-color: #2563eb; color: #2563eb; font-weight: 600; background: #eff6ff; }
.login-card label { display: block; font-size: 13px; margin: 12px 0 4px; color: #374151; }
.inp { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.btn-primary { width: 100%; margin-top: 18px; padding: 11px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; }
.btn-primary:hover { background: #1d4ed8; }
.err { color: #dc2626; font-size: 13px; margin-top: 10px; min-height: 18px; }
.hint { margin-top: 14px; font-size: 11px; color: #9ca3af; line-height: 1.6; }

/* 外壳布局 */
.topbar { background: #fff; color: #1f2937; border-bottom: 1px solid #e5e7eb; padding: 0 24px; height: 52px; box-sizing: border-box; display: flex; align-items: center; position: relative; z-index: 80; }
.topbar .logo { font-weight: 700; font-size: 16px; color: #1e3a8a; display: flex; align-items: center; gap: 8px; }
.topbar .logo-img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; background: #fff; }
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; margin-left: auto; }
.topbar .tag { background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.topbar .btn-ghost { background: transparent; border: 1px solid #cbd5e1; color: #374151; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.topbar .btn-ghost:hover { background: #f3f4f6; }

/* 左侧导航 sidebar */
.hamburger { display: none; background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: #374151; margin-right: 12px; padding: 5px 9px; border-radius: 6px; }
.hamburger:hover { background: #f3f4f6; }
.side { flex: 0 0 224px; width: 224px; background: #fff; border-right: 1px solid #e5e7eb; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 10px; box-sizing: border-box; transition: margin-left .2s; align-self: flex-start; position: sticky; top: 0; }
.side::-webkit-scrollbar { display: none; }
.side::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.side-nav { display: flex; flex-direction: column; gap: 0; }
.nav-title { font-size: 14px; color: #6b7280; letter-spacing: .3px; padding: 14px 28px 6px 12px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; position: relative; border-top: 1px solid #eef2f7; margin-top: 4px; }
.nav-title:first-child { border-top: none; margin-top: 0; }
.nav-title::before { content: '\25BE'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #9ca3af; transition: transform .15s ease; }
.nav-title.collapsed::before { transform: translateY(-50%) rotate(-90deg); }
.nav.nav-group-hidden { display: none; }
/* 导航重建瞬间禁用过渡，避免首屏/切角色时侧栏抖动 */
.side-nav.nav-no-anim .nav { transition: none !important; }
/* 基础态（展开）：写在折叠态之前，确保同特异性下 .nav-folded 能正确覆盖 */
.nav { display: flex; align-items: center; margin-bottom: 2px; max-height: 60px; opacity: 1; overflow: hidden; visibility: visible; padding: 9px 12px; border-radius: 8px; background: transparent; color: #374151; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, max-height .22s ease, opacity .18s ease, padding .22s ease, margin .22s ease, visibility 0s linear 0s; }
/* 分组折叠动画：展开时自标题下方向下撑开，收缩时向上收回标题 */
.nav.nav-folded { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; pointer-events: none; visibility: hidden; transition: max-height .22s ease, opacity .18s ease, padding .22s ease, margin .22s ease, visibility 0s linear .22s; }
.nav:hover { background: #f3f4f6; color: #1d4ed8; }
.nav.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
.nav.disabled { color: #9ca3af; cursor: not-allowed; }
.nav.disabled:hover { background: transparent; color: #9ca3af; }

.layout { display: flex; height: calc(100vh - 52px); overflow: hidden; position: relative; }
.content { flex: 1; padding: 20px 24px; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.soon { font-size: 10px; background: #fef3c7; color: #b45309; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

/* 桌面折叠侧栏 */
#app.nav-collapsed .side { margin-left: -224px; }

/* 手机端：侧栏改为抽屉 */
.nav-overlay { display: none; }
@media (max-width: 768px) {
  .hamburger { display: inline-block; }
  .side { position: fixed; top: 52px; left: 0; bottom: 0; z-index: 90; transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0,0,0,.12); }
  #app.nav-open .side { transform: translateX(0); }
  #app.nav-open .nav-overlay { display: block; position: fixed; inset: 52px 0 0 0; background: rgba(15,23,42,.35); z-index: 85; }
  .content { padding: 14px 12px; }
}

/* 卡片/表格 */
.card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card h3 { font-size: 16px; }

/* ===== 全站页面标题统一 =====
   点击左侧菜单后右侧内容区顶部标题，原本散落在 5 种写法里
   (.card-head h3 / .page-title / .page-head h2 / .page-header h2 / .page-title-row h2)，
   字号从 13px 到 24px 不等，显出"大小不一致、不专业"。
   统一收敛到同一字号/字重/颜色，单一入口，便于整体回退。 */
.page-head h2,
.page-header h2,
.page-title-row h2 { font-size: 20px; font-weight: 700; color: #111827; line-height: 1.3; margin: 0; }
.float-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.float-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.float-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.25); overflow: hidden; }
.float-modal-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; flex-shrink: 0; }
.float-modal-title { font-size: 16px; font-weight: 700; color: #111827; line-height: 1.3; margin: 0; }
.float-modal-bar .modal-close { margin-left: auto; }
.float-modal-body { padding: 16px; overflow: auto; }
.page-title { font-size: 16px; font-weight: 700; color: #111827; line-height: 1.3; margin: 0 0 14px; }
.page-head,
.page-header,
.page-title-row { margin-bottom: 14px; }
.card-head h3 { font-size: 16px; font-weight: 700; color: #111827; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.data-table th { color: #64748b; font-weight: 600; background: #f8fafc; }
.data-table tr:hover td { background: #f9fafb; }
.data-table tr.row-warn td { background: #fef2f2; }
.data-table tr.row-warn:hover td { background: #fee2e2; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .ops { white-space: nowrap; }
.data-table .empty { text-align: center; color: #9ca3af; padding: 30px; }
.muted { color: #9ca3af; font-size: 12px; margin-top: 10px; }
.btn { padding: 7px 14px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn:hover { background: #f3f4f6; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
/* 色类必须放在 .btn 之后，否则同特异性下会被白底覆盖（修复白字白底） */
.btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover { background: #b91c1c; }
.btn-primary:not(.login-card .btn-primary) { width: auto; margin-top: 0; padding: 7px 14px; font-size: 13px; }
.lnk { background: none; border: none; color: #2563eb; cursor: pointer; font-size: 13px; padding: 0 6px; }
.lnk.danger { color: #dc2626; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: #fff; border-radius: 14px; width: 520px; max-width: 92vw; max-height: 88vh; overflow-y: auto; padding: 30px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.modal-box.modal-md { width: 580px; }
.modal-box.modal-lg { width: 780px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.modal-title { font-size: 19px; font-weight: 700; line-height: 1.4; padding-right: 8px; }
.modal-close { flex-shrink: 0; width: 34px; height: 34px; border: none; background: #f1f5f9; color: #64748b; border-radius: 9px; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; margin: -2px -4px 0 0; }
.modal-close:hover { background: #e2e8f0; color: #1f2937; }
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; }
.form-input { width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.form-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* API 配置弹窗统一输入框：更高更舒展 */
.api-field { margin-bottom: 18px; }
.api-field .form-input { min-height: 46px; font-size: 15px; line-height: 1.5; }
.api-field textarea.form-input { min-height: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
.route-chip { display: inline-block; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 999px; padding: 1px 9px; font-size: 12px; margin-right: 4px; }

/* 标签 */
.tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; }
.tag-green { background: #dcfce7; color: #15803d; }
.tag-blue { background: #dbeafe; color: #1d4ed8; }
.tag-orange { background: #ffedd5; color: #c2410c; }
.tag-red { background: #fee2e2; color: #b91c1c; }
.tag-gray { background: #f1f5f9; color: #64748b; }
.tag-cyan { background: #cffafe; color: #0e7490; }
.badge { display: inline-block; min-width: 18px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.6; text-align: center; }
.badge-red { background: #ef4444; color: #fff; }

/* 财务统计卡 / tab / 筛选 */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; margin-bottom: 8px; }
.stat-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.stat-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: #64748b; }
.tabbar { display: flex; gap: 8px; }
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filter-bar .form-input { width: auto; }

/* 弹窗操作区 */
.modal-ops { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* 员工档案详情卡 */
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-sec { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.profile-sec .sec-t { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed #eef2f7; }
.kv:last-child { border-bottom: none; }
.kv .k { color: #94a3b8; flex-shrink: 0; }
.kv .v { color: #1f2937; text-align: right; font-weight: 500; word-break: break-all; }

/* 系统设置：首页装修画布与运行时叠加层 */
.hw-canvas-wrap { width: 100%; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 8px; overflow: hidden; }
.hw-canvas { position: relative; transform-origin: top left; background: #f8fafc; }
.hw-item { position: absolute; box-sizing: border-box; border: 1px dashed #2563eb; background: rgba(255,255,255,.65); padding: 4px 6px; cursor: move; user-select: none; overflow: hidden; }
.hw-item img { display: block; width: 100%; }
.hw-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; text-align: center; background: #ef4444; color: #fff; border-radius: 50%; cursor: pointer; font-size: 13px; display: none; z-index: 6; }
.hw-item:hover .hw-del { display: block; }
.hw-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: #2563eb; border-top-left-radius: 4px; z-index: 6; }
#login_overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lw-item { position: absolute; pointer-events: none; }
.st-text-props { display: none; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f1f5f9; }
.st-text-props.show { display: flex; }
.hw-txt { display: block; user-select: none; }
.hw-item.hw-selected { outline: 2px solid #2563eb; outline-offset: 2px; z-index: 5; }
.st-text-props .form-label { font-size: 12px; margin-bottom: 4px; display: block; }

/* 平台管理：tab 切换 */
.tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.tabs .tab {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; border: none; border-radius: 6px 6px 0 0;
  padding: 10px 18px; cursor: pointer;
  color: #64748b; font-size: 14px; font-family: inherit; line-height: 1.2;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tabs .tab:hover { color: #1f2937; background: #f1f5f9; }
.tabs .tab.active { color: #2563eb; font-weight: 600; border-bottom-color: #2563eb; background: transparent; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* 登录页：注册入口 */
.reg-entry { margin-top: 14px; text-align: center; }
.reg-entry .btn-ghost { font-size: 13px; color: #2563eb; text-decoration: underline; padding: 6px 4px; }
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 6px 0; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.reg-sub { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #fafbff; }
.reg-sub-title { font-weight: 600; color: #334155; margin-bottom: 8px; }

/* 入驻引导页 */
.onb-wrap { max-width: 760px; margin: 0 auto; }
.onb-steps { display: flex; gap: 10px; margin: 18px 0; }
.onb-step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; color: #94a3b8; font-size: 14px; background: #fff; }
.onb-step span { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; color: #64748b; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.onb-step.onb-done { border-color: #16a34a; color: #16a34a; }
.onb-step.onb-done span { background: #16a34a; color: #fff; }
.onb-step.onb-current { border-color: #2563eb; color: #2563eb; }
.onb-step.onb-current span { background: #2563eb; color: #fff; }
.reg-detail { font-size: 13px; line-height: 1.9; color: #334155; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 6px; padding: 10px 12px; }
.reg-detail a { color: #2563eb; }

/* 登录页：记住密码 / 注册 / 忘记密码 */
.login-extras { display: flex; gap: 14px; align-items: center; margin: 10px 0 4px; font-size: 13px; color: #64748b; }
.login-extras .chk-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.login-extras a { color: #2563eb; text-decoration: none; }
.login-extras a:hover { text-decoration: underline; }

/* 找回密码 */
.forgot-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
.ftab { padding: 9px 16px; cursor: pointer; color: #64748b; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ftab:hover { color: #374151; }
.ftab.active { color: #2563eb; font-weight: 700; border-bottom-color: #2563eb; }
.login-back { text-align: center; margin-top: 12px; font-size: 13px; }
.login-back a { color: #64748b; text-decoration: none; }
.login-back a:hover { color: #2563eb; }
.auth-actions { display: flex; gap: 10px; margin-top: 18px; }
.auth-actions .btn, .auth-actions .btn-primary { flex: 1; width: auto; margin-top: 0; }

/* 工作台 */
.wb-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.wb-hi { font-size: 20px; font-weight: 700; }
.wb-sub { font-size: 13px; opacity: .85; margin-top: 6px; line-height: 1.7; }
/* r64：欢迎条天气段（星期/农历在同一行的日期文本里，天气由 /api/weather 异步回填） */
.wb-wx { margin-left: 9px; padding-left: 9px; border-left: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.wb-wx-ico { margin-right: 3px; }
.wb-tip { font-size: 12px; background: rgba(255,255,255,.18); padding: 5px 12px; border-radius: 20px; white-space: nowrap; margin-left: 12px; }
.wb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.wb-list { display: flex; flex-direction: column; }
.wb-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.wb-item:hover { background: #f9fafb; }
.wb-item:last-child { border-bottom: none; }
.wb-item-title { font-size: 14px; font-weight: 600; color: #1f2937; }
.wb-item-sub { font-size: 12px; color: #94a3b8; margin-top: 3px; }
.wb-item-right { text-align: right; }
.wb-item-val { font-size: 14px; font-weight: 700; color: #1f2937; }
.wb-item-right .tag { margin-top: 4px; display: inline-block; }
.wb-remind { display: flex; flex-direction: column; }
.wb-remind-row { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-radius: 8px; cursor: pointer; }
.wb-remind-row:hover { background: #f9fafb; }
.wb-remind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-warn { background: #f59e0b; }
.dot-ok { background: #22c55e; }
.wb-remind-label { font-size: 14px; color: #374151; flex: 1; }
.wb-remind-val { font-size: 14px; font-weight: 700; color: #1f2937; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; background: #fff; transition: .15s; }
.quick-item:hover { border-color: #2563eb; background: #eff6ff; transform: translateY(-2px); }
.quick-icon { font-size: 28px; }
.quick-label { font-size: 13px; color: #374151; }
@media (max-width: 720px) {
  .wb-cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .modal-mask { align-items: flex-end; }
  .modal-box, .modal-box.modal-md, .modal-box.modal-lg { width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 94vh; }
  .modal-foot, .modal-ops { flex-direction: column; gap: 8px; }
  .modal-foot .btn, .modal-foot .btn-primary.btn { width: 100%; margin-top: 8px; }
  .card-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .data-table { font-size: 12px; }
}
/* 个人中心：资料卡片 */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; padding: 6px 2px; }
.info-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; }
.info-k { font-size: 12px; color: #64748b; }
.info-v { font-size: 14px; color: #0f172a; font-weight: 600; word-break: break-all; }
/* 顶栏头像 + 账号中心下拉 */
.avatar-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
/* 通知铃铛（d43 补回：逻辑早已存在，仅缺 DOM 与样式） */
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: #374151; transition: background .15s, box-shadow .15s; }
.notif-bell:hover { background: #f1f5f9; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.notif-bell .app-ico { --ico-size: 20px; width: 20px; height: 20px; }
.notif-bell .ico-bell::before { content: ""; display: inline-block; width: 20px; height: 20px; background: var(--ico); background-size: 20px 20px; }
.notif-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 600; }
.notif-panel { position: absolute; top: 52px; right: 12px; width: 384px; max-width: calc(100vw - 24px); max-height: 72vh; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.20); z-index: 90; padding: 12px; }
/* 面板样式统一在 styles.css 末尾（消息中心区块）定义 */
.muted { color: #94a3b8; }
.avatar-btn { border: none; background: none; padding: 0; margin: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; line-height: 34px; transition: box-shadow .15s; }
.avatar-btn:hover { box-shadow: 0 0 0 2px rgba(37,99,235,.45); }
.avatar-btn .avatar-block, .avatar-btn .avatar-block img { width: 34px; height: 34px; display: block; }
.avatar-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.account-menu { position: absolute; top: 46px; right: 0; min-width: 200px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 6px; z-index: 60; }
.account-menu-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px; }
.am-avatar { width: 44px; height: 44px; flex: 0 0 44px; }
.am-avatar .avatar-block { width: 44px; height: 44px; }
.am-meta { min-width: 0; }
.am-name { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-role { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-item { display: block; padding: 9px 10px; border-radius: 8px; color: #1f2937; text-decoration: none; font-size: 14px; }
.account-menu-item:hover { background: #f1f5f9; color: #2563eb; }
/* 账号中心下拉专业化（Sven 2026-09-07）：SVG 图标对齐/分隔线/退出危险色 */
.account-menu-item .app-ico { margin-right: 8px; color: #64748b; }
.account-menu-item:hover .app-ico { color: #2563eb; }
.account-menu-sep { height: 1px; background: #f1f5f9; margin: 4px 6px; }
.account-menu-danger { color: #dc2626; }
.account-menu-danger .app-ico { color: #dc2626; }
.account-menu-danger:hover { background: #fef2f2; color: #b91c1c; }
.account-menu-danger:hover .app-ico { color: #b91c1c; }


/* 我的文件：网格 + 缩略图（修复大图撑破页面，hotfix 2026-08-29） */
.mf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.mf-crumb{font-size:13px;color:#64748b;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mf-crumb .mf-crumb-root,.mf-crumb .mf-crumb-region,.mf-crumb .mf-crumb{cursor:pointer}
.mf-crumb .mf-crumb.cur{color:#1f2937;font-weight:600}
.mf-crumb-sep{color:#cbd5e1}
.mf-actions{display:flex;gap:8px}
.mf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:6px}
.mf-tile{background:#fff;border:1px solid #eef2f7;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.mf-tile.folder{cursor:pointer}
.mf-thumb{height:140px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mf-thumb.folder-thumb{font-size:48px}
.mf-name{padding:8px 10px 4px;font-size:13px;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-ops{padding:4px 10px 10px;display:flex;flex-wrap:wrap;gap:2px 8px}
.mf-empty{grid-column:1/-1;text-align:center;color:#9ca3af;padding:30px}
.file-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px}
.file-icon.pdf{color:#dc2626;font-weight:700}

/* 头像块：span 默认 inline 不生效 width/height，导致头像按原图撑大（2026-09-01 hotfix） */
.avatar-block{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;border-radius:50%;line-height:inherit;text-align:center;font-weight:500;position:relative;flex-shrink:0}
.profile-avatar{text-align:center;margin:16px 0}

/* 群成员 / 群资料网格（原 styles-chat.css 未挂载，内联至此以保证群成员宫格布局） */
.grp-members { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 4px 2px; }
.grp-member { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.grp-member input { width: auto; }
.grp-mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 10px; padding: 8px 4px; max-height: 420px; overflow-y: auto; }
.grp-mem-card { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.grp-mem-name { margin-top: 6px; font-size: 12px; color: #111827; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-mem-dept { font-size: 11px; color: #9ca3af; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-mem-tag { display: inline-block; margin-left: 2px; padding: 0 3px; background: #f59e0b; color: #fff; border-radius: 3px; font-size: 10px; transform: scale(0.85); transform-origin: left center; vertical-align: middle; }
.grp-mem-remove { position: absolute; top: -4px; right: calc(50% - 26px); width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.grp-mem-card:hover .grp-mem-remove { opacity: 1; }
.grp-mem-remove:hover { background: #dc2626; }
.grp-mem-add { cursor: pointer; }
.grp-mem-add-av { width: 56px; height: 56px; line-height: 54px; text-align: center; border-radius: 50%; border: 1px dashed #cbd5e1; color: #64748b; font-size: 28px; background: #f8fafc; }
.grp-mem-add:hover .grp-mem-add-av { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

/* 子页面（整页切换：编辑资料 / 修改密码 / 账号中心 等） */
.subpage{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden}
.subpage-bar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid #e5e7eb;background:#fff}
.subpage-title{font-size:16px;font-weight:700;margin:0;flex:1;color:#111827}
.subpage .subpage-back{margin-right:2px}
.subpage .modal-close{margin-left:auto;width:34px;height:34px;border:none;background:#f1f5f9;color:#64748b;border-radius:9px;font-size:22px;line-height:1;cursor:pointer}
.subpage .modal-close:hover{background:#e2e8f0;color:#1f2937}
.subpage-body{padding:22px 20px;max-width:900px;margin:0 auto}
.subpage-foot{padding:14px 20px;border-top:1px solid #e5e7eb;background:#fff;display:flex;gap:12px;justify-content:flex-end}

/* 桌面端隐藏一键进入 */
@media (min-width: 768px) { #quickLoginBox { display: none !important; } }

/* 系统设置：备案信息列表 + 声音提醒开关（R11 补回，原样式在 8/29 回归中丢失） */
.st-filings { margin-top: 4px; }
.st-filing-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.st-filing-row .form-input { width: auto; margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 40px; height: 22px; background: #cbd5e1; border-radius: 999px; transition: background .15s; flex: none; }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .switch-track { background: #2563eb; }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch-text { font-size: 14px; color: #374151; }

/* ===================== 通讯录 / 聊天：左侧子栏 ===================== */
.sub-side { flex: 0 0 260px; width: 260px; background: #f9fafb; border-right: 1px solid #e5e7eb; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; transition: flex-basis .2s, width .2s; overflow: hidden; }
.sub-side.collapsed { flex: 0 0 44px; width: 44px; }
.sub-side-inner { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-width: none; -ms-overflow-style: none; }
.sub-side-inner::-webkit-scrollbar { display: none; }
.sub-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; background: #fff; border-bottom: 1px solid #e5e7eb; user-select: none; white-space: nowrap; }
.sub-title { font-size: 14px; font-weight: 600; color: #111827; }
.sub-head-action { cursor: pointer; display: inline-flex; align-items: center; }
.sub-side.collapsed .sub-title,
.sub-side.collapsed .sub-list { display: none; }
.search-box { position: relative; padding: 8px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.sb-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #9ca3af; pointer-events: none; display: flex; }
.sb-input { width: 100%; padding: 7px 10px 7px 30px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; box-sizing: border-box; }
.sb-input:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sub-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.sub-list::-webkit-scrollbar { display: none; }
/* 聊天分类切换（私聊/群聊）：segmented control 风格 */
.chat-tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: #fff; }
.chat-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; font-size: 13px; font-weight: 500; color: #4b5563; background: #f1f5f9; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; -webkit-appearance: none; appearance: none; font-family: inherit; }
.chat-tab:hover { background: #e0e7ff; color: #1e40af; }
.chat-tab.active { background: #2563eb; color: #fff; border-color: #1d4ed8; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.chat-tab.active:hover { background: #1d4ed8; color: #fff; }
.chat-tab-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 1; color: #fff; background: #ef4444; border-radius: 8px; }
.chat-tab.active .chat-tab-unread { background: #fff; color: #ef4444; }
.sub-loading, .sub-empty { padding: 24px 8px; text-align: center; color: #9ca3af; font-size: 12px; }
.contact-group { margin-bottom: 4px; }
.contact-group-head { display: flex; align-items: center; gap: 6px; padding: 8px 6px; cursor: pointer; user-select: none; border-radius: 6px; }
.contact-group-head:hover { background: #f1f5f9; }
.contact-group-arrow { font-size: 10px; color: #6b7280; width: 12px; text-align: center; transition: transform .15s; }
.contact-group-name { flex: 1; font-size: 13px; font-weight: 600; color: #374151; }
.contact-group-count { font-size: 11px; color: #9ca3af; background: #f3f4f6; padding: 1px 6px; border-radius: 8px; }
.contact-group-body { padding-left: 4px; }
.sub-contact { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.sub-contact:hover { background: #eff6ff; }
.sub-contact.active { background: #e0e7ff; }
.sub-contact-info { flex: 1 1 auto; min-width: 0; }
.sub-contact-name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #111827; font-weight: 500; overflow: hidden; }
.sub-contact-name .sub-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.sub-contact-name .sub-time { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: #9ca3af; font-weight: 400; }
.sub-contact-meta { font-size: 11px; color: #6b7280; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-add-btn { flex: 0 0 auto; margin-left: 6px; width: 28px; height: 28px; padding: 0; font-size: 20px; line-height: 1; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: background .15s; }
.sub-add-btn:hover { background: #dbeafe; }
.sub-line-muted { font-size: 11px; color: #6b7280; line-height: 1.5; }
.sub-line-co { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-tag-customer { color: #2563eb; }
.sub-tag-supplier { color: #16a34a; }
.sub-tag-partner { color: #9333ea; }
.sub-tag-cross_tenant { color: #d97706; }
.sub-tag-manual { color: #4b5563; }
.sub-unread { flex: 0 0 auto; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 10px; text-align: center; font-weight: 600; }
/* Sven 2026-09-12：会话总数角标（聊天标题右侧）+ 通讯录联系人未读角标（QQ 式红数字） */
.sub-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; }
.contact-unread { flex: 0 0 auto; margin-left: auto; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center; }
/* 有新消息的联系人整行高亮，一眼区分 */
.sub-contact.has-unread { background: #fff5f5; }
.sub-contact.has-unread:hover { background: #fee2e2; }
.sub-contact-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sub-req-box { margin: 6px 8px; padding: 8px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; }
.sub-req-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: #c2410c; margin-bottom: 4px; }
.sub-req-head .btn { padding: 2px 8px; font-size: 11px; }
.fr-list { max-height: 50vh; overflow: auto; }
.fr-req { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-bottom: 1px solid #f1f5f9; }
.fr-req:last-child { border-bottom: none; }
.fr-req-out { background: #f8fafc; }
.fr-req-info { flex: 1 1 auto; min-width: 0; }
.fr-req-name { font-size: 14px; font-weight: 600; color: #111827; }
.fr-req-name .muted { font-weight: 400; font-size: 12px; }
.fr-req-msg { font-size: 12px; color: #6b7280; margin: 4px 0; }
.fr-req-btns { display: flex; gap: 6px; margin-top: 6px; }
.fr-req-status { font-size: 12px; color: #f59e0b; margin-top: 4px; }
.fr-out-title { font-size: 12px; font-weight: 600; color: #6b7280; padding: 10px 10px 4px; }
.sub-toggle { position: absolute; top: 50%; left: calc(224px + 260px); transform: translate(-50%, -50%); width: 22px; height: 48px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; cursor: pointer; z-index: 90; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.08); transition: left .2s, box-shadow .15s; padding: 0; color: #64748b; font-size: 12px; line-height: 1; }
.sub-toggle:hover { box-shadow: 0 2px 10px rgba(0,0,0,.14); color: #2563eb; border-color: #bfdbfe; }
.sub-toggle::before { content: '‹'; }
#app.sub-collapsed .sub-toggle { left: calc(224px + 44px); }
#app.sub-collapsed .sub-toggle::before { content: '›'; }
#app.nav-collapsed .sub-toggle { left: 260px; }
#app.nav-collapsed.sub-collapsed .sub-toggle { left: 44px; }

/* ===================== 通讯录：右侧内容区 ===================== */
.contact-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; color: #9ca3af; min-height: 300px; }
.contact-placeholder-icon { font-size: 48px; margin-bottom: 12px; }
.contact-placeholder-title { font-size: 15px; color: #6b7280; font-weight: 600; }
.addr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #64748b; font-size: 13px; cursor: pointer; transition: all .15s; }
.chip:hover { border-color: #bfdbfe; color: #2563eb; }
.chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.addr-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eef2f7; border-radius: 10px; background: #fff; transition: box-shadow .15s, border-color .15s, transform .1s; }
.addr-card:hover { border-color: #bfdbfe; box-shadow: 0 4px 14px rgba(37,99,235,.08); }
.addr-click { cursor: pointer; }
.addr-click:active { transform: translateY(1px); }
.addr-av { flex: 0 0 42px; width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 10px; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; font-size: 16px; font-weight: 600; overflow: hidden; }
.addr-info { flex: 1 1 auto; min-width: 0; }
.addr-name { font-size: 14px; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 6px; }
.addr-name .muted { font-weight: 400; font-size: 12px; }
.addr-sub { font-size: 12px; color: #6b7280; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-act { flex: 0 0 auto; display: flex; gap: 6px; }
.addr-act .btn { white-space: nowrap; }
.profile-card { width: 100%; }
.profile-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; flex-wrap: wrap; }
.profile-av { flex: 0 0 auto; }
.profile-title { flex: 1 1 auto; min-width: 160px; }
.profile-title h2 { margin: 0 0 4px; font-size: 20px; color: #111827; }
.profile-rel { display: inline-block; margin-top: 6px; padding: 2px 10px; font-size: 11px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.profile-rel.friend { background: #ecfdf5; color: #059669; }
.profile-rel.colleague { background: #eff6ff; color: #2563eb; }
.profile-rel.pending_in, .profile-rel.pending_out { background: #fff7ed; color: #c2410c; }
.profile-rel.stranger { background: #fef2f2; color: #dc2626; }
.profile-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.profile-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.profile-label { flex: 0 0 84px; color: #6b7280; }
.profile-value { flex: 1 1 auto; color: #111827; word-break: break-all; }
@media (max-width: 768px) { .profile-body { grid-template-columns: 1fr; } }

/* ===================== 内容区聊天窗口 ===================== */
.chat-content-card { display: flex; flex-direction: column; height: calc(100vh - 92px); padding: 0; overflow: hidden; }
.chat-content-head { padding: 14px 18px; border-bottom: 1px solid #e5e7eb; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.chat-content-head h3 { font-size: 16px; }
.chat-content-list { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: #f8fafc; scrollbar-width: none; -ms-overflow-style: none; }
.chat-content-list::-webkit-scrollbar { display: none; }
.chat-content-inputbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e5e7eb; background: #fff; }
.chat-content-inputbar .form-input { flex: 1; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #64748b; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: #f1f5f9; color: #2563eb; }
.mic-btn.recording { background: #fef2f2; border-color: #fecaca; color: #dc2626; animation: micpulse 1s infinite; }
@keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.chat-row { display: flex; gap: 10px; align-items: flex-start; }
.chat-row.me { flex-direction: row-reverse; }
.chat-col { max-width: 70%; display: flex; flex-direction: column; gap: 4px; }
.chat-row.me .chat-col { align-items: flex-end; }
.chat-bubble { background: #fff; border: 1px solid #eef2f7; padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: #1f2937; word-break: break-word; }
.chat-row.me .chat-bubble { background: #2563eb; color: #fff; border-color: #2563eb; }
.chat-time { font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 6px; }
.chat-tr { color: #2563eb; cursor: pointer; }
.chat-tr:hover { text-decoration: underline; }
.chat-tr-box { font-size: 13px; }
.chat-tr-ok { background: #eff6ff; color: #1d4ed8; padding: 6px 10px; border-radius: 8px; }
.loading { padding: 30px; text-align: center; color: #9ca3af; font-size: 13px; }

/* ===== 音视频通话弹窗（原 styles-chat.css 未挂载，内联至此：r41 修复通话 UI 裸奔） ===== */
.call-overlay { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.82); backdrop-filter: blur(4px); border-radius: 12px; }
.call-box { position: relative; width: min(375px, 94%); height: min(96%, 700px); margin: auto; display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #1e293b 0%, #0b1220 58%, #070c16 100%); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.call-phone-top { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 20px 8px; }
.call-avatar-lg { width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 12px 40px rgba(59,130,246,.45), 0 0 0 8px rgba(148,163,184,.12); flex: 0 0 auto; }
.call-name-lg { font-size: 26px; font-weight: 600; letter-spacing: .5px; }
.call-status-lg { font-size: 14px; color: #94a3b8; min-height: 20px; }
.call-phone-bottom { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; gap: 36px; padding: 18px 20px 34px; }
.call-round { width: 68px; border: none; background: none; color: #cbd5e1; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; font-family: inherit; padding: 0; }
.call-round .ico { width: 56px; height: 56px; border-radius: 50%; background: rgba(148,163,184,.18); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background .15s, transform .1s; }
.call-round:hover .ico { background: rgba(148,163,184,.3); }
.call-round:active .ico { transform: scale(.94); }
.call-round.off .ico { background: #dc2626; color: #fff; }
.call-round-accept .ico { background: #16a34a; }
.call-round-accept:hover .ico { background: #15803d; }
.call-round-reject .ico { background: #dc2626; }
.call-round-reject:hover .ico { background: #b91c1c; }
.call-video-immersive { background: #000; }
.call-remote-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-local-pip { position: absolute; right: 14px; top: 74px; width: 100px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,.55); background: #1e293b; z-index: 3; }
.call-video-top { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px 12px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.call-video-top .call-name-lg { font-size: 20px; }
.call-video-immersive .call-phone-bottom { position: relative; z-index: 2; margin-top: auto; }
/* 通话按钮 SVG 图标（r44）：统一描边风、白/浅色 currentColor */
.call-round .ico svg { width: 24px; height: 24px; display: block; }
.call-round .ico { color: #e8edf5; }
.call-round.off .ico, .call-round-reject .ico, .call-round-accept .ico { color: #fff; }

/* r76：通话「音频设置」面板（WebRTC 3A 音频处理 AEC/NS/AGC 开关） */
.call-audio-settings { position: absolute; top: 12px; right: 12px; z-index: 6; width: 222px; padding: 14px 14px 12px; border-radius: 14px; background: rgba(15,23,42,.96); border: 1px solid rgba(148,163,184,.22); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.call-a3a-title { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; letter-spacing: .3px; }
.call-a3a-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(148,163,184,.12); cursor: pointer; }
.call-a3a-text { display: flex; flex-direction: column; gap: 2px; }
.call-a3a-text b { font-size: 12.5px; color: #f1f5f9; font-weight: 600; }
.call-a3a-text i { font-size: 11px; color: #94a3b8; font-style: normal; }
.call-a3a-row input[type=checkbox] { width: 38px; height: 22px; flex: 0 0 auto; accent-color: #3b82f6; cursor: pointer; }
.call-a3a-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.12); font-size: 10.5px; line-height: 1.5; color: #94a3b8; }

/* ===== r80：通话质量信号格（保畅通状态可见化） ===== */
.call-quality { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; background: rgba(148,163,184,.18); color: #cbd5e1; }
.call-quality.q-excellent { background: rgba(34,197,94,.18); color: #4ade80; }
.call-quality.q-good { background: rgba(132,204,22,.18); color: #a3e635; }
.call-quality.q-weak { background: rgba(234,179,8,.2); color: #facc15; }
.call-quality.q-poor { background: rgba(239,68,68,.2); color: #f87171; }
.call-quality.q-relay { border: 1px dashed rgba(248,113,113,.6); }

/* ===== styles-chat.css 清理收尾（r42）：原未挂载文件中仍被代码使用的规则，内联至此 ===== */
/* 输入栏发送按钮不换行（im 视图输入栏内 btn-primary） */
.chat-content-inputbar .btn-primary { white-space: nowrap; flex-shrink: 0; min-width: fit-content; padding: 7px 18px; }
/* 群聊记录搜索：关键词高亮 + 命中结果条目（chat-shadow.js 渲染） */
mark.kw-hit { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.gs-hit { padding: 8px 6px; border-bottom: 1px solid #e5e7eb; cursor: pointer; border-radius: 4px; }
.gs-hit:hover { background: #eef2ff; }
.gs-hit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gs-hit-name { font-size: 12px; color: #374151; font-weight: 600; }
.gs-hit-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.gs-hit-content { margin-top: 2px; font-size: 13px; color: #1f2937; word-break: break-all; }
#gs_search_result .muted { padding: 10px 4px; }
/* 跳转到消息时高亮闪烁（group-chat.js 定位消息） */
.chat-row-flash { animation: chatRowFlash 1.6s ease; }
@keyframes chatRowFlash {
  0% { background: #fde68a; box-shadow: 0 0 0 2px #f59e0b inset; }
  100% { background: transparent; box-shadow: none; }
}
/* 群聊消息发送者名（im-message.js 渲染；旧深色变体不移植——浅底会看不见） */
.chat-sender { font-size: 11px; color: #6b7280; margin-bottom: 2px; }

/* ===== 通知中心面板（专业卡片风，d43 重构） ===== */
.mp-tabs { display: flex; gap: 4px; padding: 2px; background: #f1f5f9; border-radius: 9px; margin-bottom: 10px; }
.mp-tab { flex: 1; padding: 7px 4px; font-size: 13px; font-weight: 600; color: #64748b; background: transparent; border: none; border-radius: 7px; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1; position: relative; transition: background .15s, color .15s, box-shadow .15s; }
.mp-tab:hover { color: #475569; background: #e8edf3; }
.mp-tab.active { color: #1d4ed8; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.mp-count { display: inline-block; min-width: 17px; padding: 0 5px; font-size: 11px; line-height: 17px; text-align: center; background: #e2e8f0; color: #475569; border-radius: 9px; }
.mp-tab.active .mp-count { background: #dbeafe; color: #1d4ed8; }
.mp-u-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex: 0 0 auto; }
.mp-h-title { font-size: 13px; font-weight: 700; color: #1e293b; display: flex; align-items: baseline; gap: 8px; }
.mp-h-sub { font-size: 12px; font-weight: 500; color: #94a3b8; }
.mp-h-actions { display: flex; gap: 6px; }
.mp-h-action { border: none; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.mp-h-action:hover { background: #dbeafe; }
.mp-h-action.ghost { background: #f1f5f9; color: #475569; }
.mp-h-action.ghost:hover { background: #e8edf3; }
.mp-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.mp-list { display: flex; flex-direction: column; gap: 8px; }
.mp-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; background: #fff; border: 1px solid #eef2f7; transition: background .15s, border-color .15s, box-shadow .15s; }
.mp-item:hover { background: #f8fafc; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.mp-item.mp-unread { background: #f5f9ff; border-color: #dbeafe; }
.mp-item.mp-unread:hover { background: #eef4ff; }
.mp-item-main { flex: 1; min-width: 0; }
.mp-row { display: flex; align-items: center; gap: 8px; }
.mp-chip { flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 6px; color: var(--c, #64748b); background: color-mix(in srgb, var(--c, #64748b) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c, #64748b) 25%, #fff); }
.mp-title { font-size: 13.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mp-body { font-size: 12.5px; color: #64748b; margin-top: 3px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.mp-time { font-size: 11px; color: #94a3b8; }
.mp-go { flex: 0 0 auto; border: none; background: #2563eb; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mp-go:hover { background: #1d4ed8; }
.mp-del { flex: 0 0 auto; width: 22px; height: 22px; line-height: 20px; text-align: center; font-size: 13px; color: #94a3b8; border-radius: 6px; border: none; background: transparent; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.mp-item:hover .mp-del { opacity: 1; }
.mp-del:hover { background: #fee2e2; color: #dc2626; }
.mp-empty { padding: 40px 16px; text-align: center; color: #94a3b8; }
.mp-empty-ico { font-size: 30px; display: block; }
.mp-empty-txt { font-size: 13px; margin-top: 8px; }

/* ===== 由 styles-pages.css（未加载死文件）迁入：仅“代码用到 且 styles.css 尚未定义”的规则，避免重复/覆盖 ===== */
.pwd-strength { margin-top: 6px; }
.pwd-strength-bars { display: flex; gap: 6px; }
.pwd-strength-bars span { flex: 1; height: 5px; border-radius: 3px; background: #e5e7eb; transition: background .2s; }
.pwd-strength-label { font-size: 12px; margin-top: 4px; color: #6b7280; }
.pwd-req { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.pwd-req span { font-size: 12px; color: #9ca3af; display: inline-flex; align-items: center; gap: 3px; transition: color .15s; }
.pwd-req span::before { content: '?'; font-size: 11px; }
.pwd-req span.met { color: #16a34a; }
.pwd-req span.met::before { content: '?'; }
.pwd-match { font-size: 12px; margin-top: 5px; min-height: 16px; color: #6b7280; }
.pwd-match.ok { color: #16a34a; }
.pwd-match.bad { color: #dc2626; }
.rec-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.rec-col { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; min-height: 120px; }
.rec-col-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eef2f7; }
.rec-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rec-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.rec-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); }
.rec-name { font-weight: 600; color: #0f172a; }
.rec-sub { font-size: 12px; color: #64748b; margin-top: 3px; }
.rec-meta { font-size: 12px; color: #f59e0b; margin-top: 4px; }
.rec-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.rec-funnel-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 8px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
.rec-funnel-num { font-size: 28px; font-weight: 700; line-height: 1.1; padding: 4px 14px; border-radius: 999px; }
.rec-funnel-label { font-size: 13px; color: #64748b; margin-top: 8px; }
.timeline { border-left: 3px solid #e2e8f0; margin-left: 6px; padding-left: 14px;
position: relative; padding-left: 20px; }
.timeline-item { position: relative; padding: 4px 0 12px; }
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #2563eb; }
.timeline-item .time { font-size: 12px; color: #94a3b8; }
.timeline-item .title { font-size: 14px; font-weight: 600; color: #1e293b; margin: 2px 0; }
.timeline-item .desc { font-size: 13px; color: #475569; white-space: pre-wrap; }
.login-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 16px 24px 14px; text-align: center; color: #fff; font-size: 12px; line-height: 1.7; background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0)); pointer-events: none; }
/* 登录页左上角站标+标题（Sven 2026-09-07，系统设置一键显示/关闭） */
.login-brand { position: absolute; top: 18px; left: 24px; z-index: 6; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.login-brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; display: block; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
@media (max-width: 640px) { .login-brand { top: 12px; left: 14px; font-size: 15px; } }
.login-footer .lf-filings { display: flex; flex-wrap: wrap; gap: 2px 16px; justify-content: center; }
.login-footer .lf-filings a, .login-footer .lf-filings span, .login-footer .lf-copyright { pointer-events: auto; }
.login-footer .lf-filings a, .login-footer .lf-filings span { color: #fff; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.login-footer .lf-filings a:hover { text-decoration: underline; }
.login-footer .lf-copyright { margin-top: 4px; opacity: .92; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.login-footer .lf-ico { vertical-align: middle; margin-right: 5px; height: 16px; width: 16px; object-fit: contain; border-radius: 3px; }
.msg-center .msg-item { position: relative; padding-right: 36px;
display: flex; gap: 10px; padding: 12px; border: 1px solid #eef2f7; border-radius: 10px; margin-bottom: 10px; background: #fff; cursor: pointer; }
.msg-center .msg-del { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; line-height: 18px; text-align: center; font-size: 13px; color: #94a3b8; border-radius: 5px; }
.msg-center .msg-del:hover { background: #fee2e2; color: #dc2626; }
.msg-center .msg-status { font-size: 11px; padding: 1px 7px; border-radius: 9px; font-weight: 600; }
.msg-center .msg-status.unread { background: #dbeafe; color: #1d4ed8; }
.msg-center .msg-status.read { background: #f1f5f9; color: #94a3b8; }
.msg-center .msg-item.unread { background: #f5f9ff; border-color: #dbeafe; }
.msg-center .msg-ic { font-size: 22px; flex: 0 0 auto; }
.msg-center .msg-main { flex: 1; min-width: 0; }
.msg-center .msg-t { font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.msg-center .msg-t .mp-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; flex: 0 0 auto; }
.msg-center .msg-b { font-size: 13px; color: #475569; margin-top: 4px; white-space: pre-wrap; }
.msg-center .msg-m { font-size: 12px; color: #94a3b8; margin-top: 6px; }
.msg-center .msg-link { color: #2563eb; }
.mf-crumb .mf-crumb-root:hover, .mf-crumb .mf-crumb-region:hover, .mf-crumb .mf-crumb:hover { color: #2563eb; text-decoration: underline; }
.mf-crumb .mf-crumb-sep { color: #ccc; }
.mf-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); border-color: #cfe; }
.folder-thumb { font-size: 46px; line-height: 1; background: transparent; }
.mf-tile:hover .mf-ops { opacity: 1; }
.mf-tile[data-tip]:hover::after { content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  white-space: pre-line; background: #1f2937; color: #fff; padding: 7px 9px; border-radius: 6px;
  font-size: 12px; line-height: 1.5; z-index: 60; pointer-events: none; max-width: 260px; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.mf-tile[data-tip]:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1f2937; z-index: 60; margin-bottom: -1px; }
.tag-cross_tenant { background: #eff6ff; color: #1d4ed8; }
.addr-click:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: #bfdbfe; }
.chat-input-bar .form-input { flex: 1 1 auto; }
.opp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.opp-stat { background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 10px; padding: 14px 16px; text-align: center; }
.opp-stat-v { font-size: 20px; font-weight: 700; color: #111; }
.opp-stat-l { font-size: 12px; color: #6b7280; margin-top: 4px; }
.opp-stat.win .opp-stat-v { color: #16a34a; }
.funnel-wrap { display: flex; justify-content: center; background: #fbfcfe; border: 1px solid #eef0f3; border-radius: 12px; padding: 18px; }
.funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 560px; }
.funnel-step { color: #fff; border-radius: 8px; padding: 12px 10px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: width .25s; }
.funnel-label { font-size: 14px; font-weight: 600; }
.funnel-meta { font-size: 12px; opacity: .92; margin-top: 2px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.profile-overview { display: flex; flex-wrap: wrap; gap: 8px 28px; background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.profile-overview .po-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.profile-overview .po-row span { color: #9ca3af; }
.profile-overview .po-row b { color: #111; font-weight: 600; }
.timeline .tl-item { position: relative; padding-bottom: 18px; padding-left: 8px; }
.timeline .tl-item:not(:last-child)::before { content: ''; position: absolute; left: 3px; top: 14px; bottom: 0; width: 2px; background: #e5e7eb; }
.timeline .tl-dot { position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #2563eb; border: 2px solid #fff; box-shadow: 0 0 0 2px #dbeafe; }
.timeline .tl-body { background: #fff; border: 1px solid #eef0f3; border-radius: 8px; padding: 10px 14px; }
.timeline .tl-head { font-size: 14px; color: #111; }
.timeline .tl-time { float: right; font-size: 12px; color: #9ca3af; font-weight: 400; }
.timeline .tl-reason { font-size: 13px; color: #4b5563; margin-top: 4px; }
.timeline .tl-by { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.kv .v img { vertical-align: middle; }
.assess-banner { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.assess-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.assess-tab { padding: 8px 16px; border: 1px solid #e5e7eb; background: #fff; border-radius: 20px; cursor: pointer; font-size: 13px; color: #4b5563; transition: all .15s; }
.assess-tab:hover { border-color: #6366f1; color: #6366f1; }
.assess-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 600; }
.assess-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.assess-price { font-weight: 700; font-size: 18px; white-space: nowrap; }
.assess-intro { color: #4b5563; line-height: 1.7; font-size: 14px; margin: 10px 0 14px; }
.assess-progress { margin-bottom: 14px; }
.assess-progress .ap-info { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.assess-progress .ap-bar { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.assess-progress .ap-bar div { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; transition: width .3s; }
.assess-qcard { background: #fff; border: 1px solid #eef0f3; border-radius: 12px; padding: 22px; }
.assess-qcard .aq-no { font-size: 12px; color: #9ca3af; margin-bottom: 8px; }
.assess-qcard .aq-text { font-size: 17px; font-weight: 600; color: #111; line-height: 1.6; margin-bottom: 16px; }
.assess-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all .15s; background: #fff; }
.assess-opt:hover { border-color: #a5b4fc; background: #f5f3ff; }
.assess-opt.sel { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1; }
.assess-opt .ao-dot { color: #cbd5e1; font-size: 14px; flex: 0 0 auto; }
.assess-opt.sel .ao-dot { color: #6366f1; }
.assess-opt .ao-text { font-size: 14px; color: #1f2937; line-height: 1.5; }
.pay-price { display: flex; align-items: baseline; gap: 10px; background: linear-gradient(90deg, #fef2f2, #fff7ed); border: 1px solid #fecaca; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.pay-price .pp-label { font-size: 13px; color: #b91c1c; }
.pay-price .pp-num { font-size: 26px; font-weight: 800; color: #dc2626; }
.pay-price .pp-note { font-size: 12px; color: #9ca3af; }
.pay-code-box { background: linear-gradient(135deg, #eef2ff, #faf5ff); border: 1px dashed #a5b4fc; border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 14px; }
.pay-code-box .pc-label { font-size: 13px; color: #4b5563; margin-bottom: 6px; }
.pay-code-box .pc-code { font-size: 34px; font-weight: 800; letter-spacing: 8px; color: #4f46e5; font-family: Consolas, Menlo, monospace; }
.pay-code-box .pc-hint { font-size: 12px; color: #dc2626; margin-top: 6px; }
.pay-qrs { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; }
.pay-qr { text-align: center; }
.pay-qr img { width: 128px; height: 128px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.pay-qr .pq-label { font-size: 12px; color: #6b7280; margin-top: 4px; }
.pay-noqr { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 12px; font-size: 13px; text-align: center; margin-bottom: 14px; }
.pay-form .form-input { margin-bottom: 10px; }
.pay-upload { display: flex; align-items: center; gap: 10px; }
.pay-shot { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.pay-shot-empty { width: 96px; height: 96px; border: 1px dashed #d1d5db; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; background: #fafafa; }
.pay-ok, .pay-wait { text-align: center; padding: 24px 0 10px; }
.pay-ok .pay-title, .pay-wait .pay-title { font-size: 18px; font-weight: 700; color: #111; margin: 10px 0 6px; }
.pay-orderinfo { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 12px; color: #6b7280; }
.assess-report { background: #fff; border: 1px solid #eef0f3; border-radius: 16px; overflow: hidden; }
.assess-report .ar-head { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; padding: 28px 28px 22px; }
.ar-head .ar-tag { display: inline-block; background: rgba(255,255,255,.18); border-radius: 14px; padding: 3px 12px; font-size: 12px; margin-bottom: 12px; }
.ar-head .ar-title { font-size: 30px; font-weight: 800; line-height: 1.3; }
.ar-head .ar-sub { font-size: 14px; opacity: .92; margin-top: 6px; }
.ar-head .ar-meta { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; opacity: .9; flex-wrap: wrap; }
.assess-report .ar-body { padding: 20px 28px 24px; }
.ar-sec { margin-bottom: 20px; }
.ar-sec-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 10px; }
.ar-p { font-size: 14px; color: #374151; line-height: 1.8; margin: 0; }
.ar-ul { margin: 0; padding-left: 4px; list-style: none; }
.ar-ul li { font-size: 14px; color: #374151; line-height: 1.8; padding: 4px 0; }
.ar-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
grid-template-columns: 1fr; }
.ar-good { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 14px 16px; }
.ar-warn { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 16px; }
.ar-jobs { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-job { background: #eef2ff; color: #4338ca; border-radius: 16px; padding: 5px 14px; font-size: 13px; font-weight: 600; }
.ar-dimbar { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.ar-dimbar div { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; }
.ar-disclaimer { font-size: 12px; color: #9ca3af; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 8px; padding: 10px 14px; margin-top: 6px; line-height: 1.7; }
.assess-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cfg-sec { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.cfg-sec-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; }
.cfg-qrs { display: flex; gap: 24px; flex-wrap: wrap; }
.cfg-qr { text-align: center; }
.cfg-qr-empty { width: 120px; height: 120px; border: 1px dashed #d1d5db; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; background: #fff; }
.cfg-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.cfg-price { display: flex; align-items: center; gap: 8px; }
.readonly-note { margin: 0; padding: 10px 14px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; color: #4338ca; font-size: 13px; }
.ar-lv { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.ar-lv-high { background: #dcfce7; color: #15803d; }
.ar-lv-mid { background: #fef9c3; color: #a16207; }
.ar-lv-low { background: #e5e7eb; color: #6b7280; }
.ar-sub2 { font-size: 13px; font-weight: 700; color: #374151; margin: 10px 0 4px; }
.ar-typecard { background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%); border: 1px solid #ddd6fe; }
.chk-group { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 8px 0; }
.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.chk-inline input { width: 15px; height: 15px; cursor: pointer; }

/* AI stats summary cards */
.stat-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.stat-item { flex: 1; min-width: 120px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.stat-num { font-size: 26px; font-weight: 700; color: #1d4ed8; line-height: 1.1; }
.stat-label { font-size: 12px; color: #6b7280; margin-top: 6px; }
.filter-bar label { font-size: 13px; color: #374151; }
.filter-bar .form-input { padding: 5px 8px; }

.ai-stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-stats-table th.num { text-align: left; font-variant-numeric: tabular-nums; }
.ai-stats-table th.group { background: #f3f4f6; color: #374151; font-weight: 600; text-align: left; padding-left: 10px; }
.ai-stats-table th:first-child, .ai-stats-table td:first-child { text-align: left; }
.ai-stats-table { width: 100%; }
.ai-stats-table th, .ai-stats-table td { padding: 7px 10px; }

/* 隐藏 Edge/IE 原生密码显隐按钮，避免与自定义眼睛重复出现两只（Sven 2026-09-07） */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

.pwd-wrap { position: relative; display: block; }
.pwd-wrap .form-input { padding-right: 44px; }
.pwd-wrap .inp { padding-right: 44px; }
.pwd-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: none; background: transparent;
  color: #9ca3af; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; user-select: none;
}
.pwd-eye:hover { background: #f3f4f6; color: #4b5563; }
.pwd-eye:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.pwd-eye.on { color: #2563eb; }

/* 线性 SVG 图标（与 styles-icons.css 同源，供登录/注册/找回页独立使用） */
.app-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; flex: 0 0 auto; }
.ico-eye { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-eye-off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.4 10.4 0 0 1 12 19c-6.5 0-10-7-10-7a17.6 17.6 0 0 1 5.1-5.9M9.9 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E"); }

/* 2026-09-08: 表格操作列 btn-sm 主按钮与同级按钮等高
   （行136 .btn-primary:not(.login-card .btn-primary) 特异性 (0,3,0) 压过 .btn-sm，
   导致 .btn-sm.btn-primary 比同行 .btn-sm 按钮高一截） */
.btn.btn-sm.btn-primary { padding: 4px 10px; font-size: 12px; }

/* r54：系统设置 → 声音设置：6 类场景提示音逐行（标签 + 上传/试听/清除） */
.st-sound-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.st-sound-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}
.st-sound-label { flex: 0 0 160px; font-weight: 600; color: #1f2937; }
.st-sound-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.st-sound-file { font-size: 12px; color: #6b7280; min-width: 120px; }
.st-sound-input { width: auto; max-width: 260px; }

/* ==========================================================================
   r92：手机端适配 —— 弹窗已改为「整页子页面」（见 core/ui.js），
   这里让它真正铺满一屏，并把顶栏在窄屏收干净，避免 logo 与个人信息挤成多行。
   桌面端形态不变。
   ========================================================================== */

/* 底部操作条为空时不占位（全端通用） */
.subpage-foot:empty { display: none; }

@media (max-width: 768px) {
  /* ---- 顶栏：品牌名单行省略，个人信息只留头像 + 铃铛 ---- */
  .topbar { padding: 0 10px; }
  .topbar .logo { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar .logo-img { width: 22px; height: 22px; }
  /* 窄屏个人信息一律收掉（角色/公司/退出都在右上角账号菜单里），只留头像 + 铃铛 */
  .topbar #who_name, .topbar #who_tenant, .topbar #who_role, .topbar .btn-ghost { display: none; }
  .topbar .tag { font-size: 11px; padding: 1px 6px; white-space: nowrap; }
  .topbar .who { gap: 6px; }
  .hamburger { margin-right: 6px; padding: 5px 7px; }

  /* ---- 子页面：铺满顶栏以下整屏，内容自滚，操作条固定屏底 ---- */
  #content.subpage-open { padding: 0; overflow: hidden; }
  #content.subpage-open .subpage {
    position: fixed; inset: 52px 0 0 0; z-index: 70;
    border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; overflow: hidden;
  }
  #content.subpage-open .subpage-bar {
    position: static; flex: none; padding: 10px 12px; gap: 8px; border-radius: 0;
  }
  #content.subpage-open .subpage-title { font-size: 16px; }
  #content.subpage-open .subpage-body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 12px; max-width: none !important;
  }
  /* 底部操作按钮平分整行，拇指好按 */
  #content.subpage-open .subpage-foot { position: static; flex: none; padding: 10px 12px; gap: 10px; }
  #content.subpage-open .subpage-foot .btn,
  #content.subpage-open .subpage-foot .btn-primary { flex: 1; }

  /* ---- 表格：窄屏改为横向滑动，避免列被压成一条 ---- */
  #content table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* ---- 卡片头部：标题与操作区换行，按钮组内部也换行 ----
     原样式 justify-content:space-between + 不换行，手机上右侧 5 个按钮会被压成一条缝点不中 */
  #content .card-head { flex-wrap: wrap; gap: 8px; }
  #content .card-head > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  /* ---- 筛选条：宽度由 flex 分配，避免 .filter-bar .form-input{width:auto} 退化成内容宽度 ---- */
  #content .filter-bar .form-input,
  #content .filter-bar select.form-input,
  #content .filter-bar input[type="date"].form-input { flex: 1 1 140px; width: auto; min-width: 0; }
  #content .filter-bar .btn,
  #content .filter-bar .btn-primary { flex: 0 0 auto; }
  /* 长文本/无空格串不撑破页面 */
  #content { overflow-wrap: break-word; }

  /* ---- IM 副侧栏（会话列表 / 通讯录）：手机上改为整屏列表页 ----
     原来 .sub-side 固定 260px，在 390 宽的屏上内容区只剩 130px，等于不可用（v1 测绘：
     contacts 内容区只渲染出 334 字符、chat 623，全是空态占位）。 */
  .sub-side { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; width: auto; flex-basis: auto; z-index: 60; border-right: none; }
  .sub-side.collapsed { width: auto; flex-basis: auto; }
  .sub-toggle { display: none !important; }   /* 折叠把手（元素当前未挂载，防御性规则） */
  /* 进入会话后收起列表，让聊天内容占满屏。用 :has() 跟随 DOM 自动生效，零 JS 状态残留。
     ⚠️ 必须 !important：views/core-route.js 的 updateSubSide() 是 sub.style.display='flex' 内联样式，
     普通 CSS 规则压不过内联样式（r97 实测踩过）。 */
  .layout:has(#content .chat-content-card) .sub-side { display: none !important; }
  /* 会话窗在副侧栏隐藏后即成为唯一内容，占满整屏（52 topbar + 14×2 content padding） */
  /* ⚠️ 必须写 .card.chat-content-card：本块上面的 `.card{padding:12px}` 与
     `.chat-content-card{padding:0}` 特异性相同且在文件更后面，会把会话卡片的 0 内边距顶掉（r99 实测踩过）。 */
  .card.chat-content-card { padding: 0; height: calc(100vh - 80px); }
  /* 会话头部：手机上单行 —— 标题省略、按钮只留图标。
     ⚠️ 必须显式写 flex-direction: row：styles.css:292 的 `@media (max-width:720px)` 里有
     `.card-head{flex-direction:column; align-items:stretch}`（窄屏卡片头竖排在多数模块是对的，
     但会话头部要紧凑单行），只覆盖 flex-wrap 是不够的 —— 方向没改回来时两个子元素依旧各占一行
     （r100 实测 headH=81px）。 */
  #content .chat-content-head { flex-direction: row; align-items: center; flex-wrap: nowrap; padding: 10px 12px; }
  #content .chat-content-head h3 { font-size: 15px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #content .chat-content-head > div { flex-wrap: nowrap; flex: 0 0 auto; gap: 6px; }
  #content .chat-content-head .btn-txt { display: none; }
  #content .chat-content-head .btn-sm { padding: 5px 9px; }

  /* ---- 触控尺寸与留白 ---- */
  .card { padding: 12px; }
  .btn, .btn-primary { min-height: 34px; }
  .btn-sm, .btn.btn-sm { min-height: 32px; }
  .icon-btn { width: 40px; height: 40px; }
  /* 聊天记录搜索命中项：加大点击热区 */
  .gs-hit { padding: 10px 8px; }
}

/* 2026-09-29 r143：会话头部按钮排——统一高度与垂直对齐。
   根因：按钮是 inline-flex，其父 <div> 是无 class 的裸 block，按钮参与行内 baseline 对齐；
   首子元素为 svg/<i> 图标的按钮没有文字基线（取底边），纯文本按钮（关闭）取文字基线，
   两者基线位置不同 => 关闭按钮整体被推偏，表现为「前四个齐、关闭不齐」。
   修法：父容器改 flex + align-items:center，彻底摆脱 baseline 对齐；
   按钮加 box-sizing:border-box + 固定高，抵消 .btn-sm 的 padding（全站无全局 border-box）。
   只作用于会话头部，不影响其它模块的 .btn-sm。
   注：本块须位于文件末尾——窄屏 media 里有同特异性的
   `#content .chat-content-head .btn-sm{padding:5px 9px}`，后置才能压过。 */
#content .chat-content-head > div { display: flex; align-items: center; gap: 6px; }
#content .chat-content-head .btn-sm {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* ===== 间距与排版优化（r269-FE 2026-10-14 补回） =====
   这段是 UI 二期（2026-08-25）注入、但 ESM 化时漏挂 styles-components.css 而丢失的；
   原文逐字节取自提交 4c96c87，追加在此按源码顺序覆盖上面的旧值。 ===== */
/* ===== 间距与排版优化（缓解文字排布拥挤） ===== */
.card { padding: 22px; border-radius: 12px; }
.card-head { margin-bottom: 18px; }
.card h3 { font-size: 17px; line-height: 1.5; }
.card + .card { margin-top: 18px; }
.api-field { margin-bottom: 22px; }
.api-field > .form-label { margin-bottom: 10px; }
.form-grid { gap: 20px; }
.subpage-body { padding: 22px 24px; }
.data-table th, .data-table td { padding: 11px 14px; }
.data-table th { font-size: 13px; }
.section { margin-bottom: 22px; }
.section + .section { margin-top: 6px; }
.list-row { padding: 14px 6px; }
.list-row + .list-row { border-top: 1px solid #f1f5f9; }
.muted { font-size: 12.5px; line-height: 1.6; margin-top: 12px; }
.btn { padding: 8px 16px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: 19px; font-weight: 700; line-height: 1.5; margin: 0 0 16px; }
.stats-grid { gap: 16px; }
.stat-card { padding: 16px 18px; }
/* 图标与文字间距自适应：app-ico 出现在标题/按钮前时，给一点左侧呼吸位 */
.app-ico + * , h3 .app-ico, .btn .app-ico { margin-right: .35em; }
.app-ico { margin-right: .15em; }