/* ===================== 基础与主题 ===================== */
:root {
  --bg: #eef7f1;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4faf6;
  --panel-3: #e7f3ec;
  --border: #d3e6da;
  --border-soft: #e4f0e9;
  --text: #1e2d26;
  --text-dim: #48604f;
  --muted: #7c9086;
  --accent: #2f9e5f;
  --accent-soft: rgba(47, 158, 95, 0.10);
  --accent-2: #4cb383;
  --success: #2f9e5f;
  --warn: #d08b27;
  --danger: #d4555a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(31, 74, 49, 0.10);
  --shadow-sm: 0 3px 12px rgba(31, 74, 49, 0.07);

  /* 三块区域的底色：主内容深一点、侧栏浅一点、顶栏半透明盖在主内容上 */
  --main-bg: #e4f2ea;
  --side-bg: #f7fcf9;
  --topbar-bg: rgba(228, 242, 234, .86);
  /* 主区上的两团柔光，跟着主题色走，别让粉色主题下面飘一片绿 */
  --glow-1: rgba(126, 200, 158, .22);
  --glow-2: rgba(168, 216, 186, .18);

  /* ============ 糖果色板（参考图的柔和马卡龙色） ============ */
  --candy-yellow: #ffe283;
  --candy-pink:   #ffa9c6;
  --candy-mint:   #82dcc2;
  --candy-violet: #bb9bf3;
  --candy-sky:    #92cff3;
  --candy-lime:   #d6ef7e;
  --candy-peach:  #ffc49b;
  --candy-teal:   #7ad2d8;
  --candy-indigo: #a6b4f5;
  /* 浅色版本：用于大卡片背景，保持文字可读 */
  --candy-yellow-s: #fff6dc;
  --candy-pink-s:   #ffeef4;
  --candy-mint-s:   #e6f8f3;
  --candy-violet-s: #f1ebfd;
  --candy-sky-s:    #e9f4fd;
  --candy-lime-s:   #f4f9e0;
  --candy-peach-s:  #fff1e8;
  --candy-teal-s:   #e6f7f8;
  --candy-indigo-s: #edf0fd;
  /* 彩色卡片上的正文用深色，保证对比度 */
  --candy-ink: #2b2b33;
  --candy-ink-dim: rgba(43, 43, 51, .62);
}

/* 糖果色卡片：整块填充，用于 KPI / 小卡片 */
.candy {
  border: none;
  color: var(--candy-ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(60, 60, 80, .10);
}
.candy .muted,
.candy .kpi-label,
.candy .kpi-foot,
.candy .stat-label,
.candy .stat-foot,
.candy .sub { color: var(--candy-ink-dim) !important; }

.candy-yellow { background: var(--candy-yellow); }
.candy-pink   { background: var(--candy-pink); }
.candy-mint   { background: var(--candy-mint); }
.candy-violet { background: var(--candy-violet); }
.candy-sky    { background: var(--candy-sky); }
.candy-lime   { background: var(--candy-lime); }
.candy-peach  { background: var(--candy-peach); }
.candy-teal   { background: var(--candy-teal); }
.candy-indigo { background: var(--candy-indigo); }

/* 糖果色浅底大卡片：用于表格容器等需要大量文字的区域
   白色正文底 + 顶部粗色带 + 彩色标题区，既能一眼区分模块，又不牺牲表格可读性 */
.card.card-tinted,
.memo-card.card-tinted {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-top: 5px solid var(--tone, var(--accent));
  box-shadow: var(--shadow-sm);
  position: relative;
}
.card.card-tinted > .card-head,
.memo-card.card-tinted > .memo-head {
  background: var(--tone-soft, var(--candy-mint-s));
  margin: -18px -20px 14px;
  padding: 13px 20px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card.card-tinted > .card-head h3,
.memo-card.card-tinted > .memo-head .memo-title { color: var(--tone-ink, var(--text)); }
.memo-card.card-tinted { padding: 14px 16px; margin-bottom: 0; }
.memo-card.card-tinted > .memo-head { margin: -14px -16px 0; padding: 13px 16px 12px; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.memo-card.card-tinted .memo-body { margin-top: 12px; }

.tone-yellow { --tone: var(--candy-yellow); --tone-ink: #8a6a00; --tone-soft: var(--candy-yellow-s); }
.tone-pink   { --tone: var(--candy-pink);   --tone-ink: #b03a68; --tone-soft: var(--candy-pink-s); }
.tone-mint   { --tone: var(--candy-mint);   --tone-ink: #147a5e; --tone-soft: var(--candy-mint-s); }
.tone-violet { --tone: var(--candy-violet); --tone-ink: #5f3bb5; --tone-soft: var(--candy-violet-s); }
.tone-sky    { --tone: var(--candy-sky);    --tone-ink: #1c6ba0; --tone-soft: var(--candy-sky-s); }
.tone-lime   { --tone: var(--candy-lime);   --tone-ink: #5b7413; --tone-soft: var(--candy-lime-s); }
.tone-peach  { --tone: var(--candy-peach);  --tone-ink: #a95c22; --tone-soft: var(--candy-peach-s); }
.tone-teal   { --tone: var(--candy-teal);   --tone-ink: #14707a; --tone-soft: var(--candy-teal-s); }
.tone-indigo { --tone: var(--candy-indigo); --tone-ink: #3f52a8; --tone-soft: var(--candy-indigo-s); }

/* 卡片标题前的彩色图标 */
.card-ico {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--tone, var(--accent));
  color: #fff;
  box-shadow: 0 2px 6px rgba(60, 60, 80, .16);
}
/* 顶部操作区用的糖果色条：内部控件保持白底，保证可读 */
.candy input[type="text"],
.candy select {
  background: #fff;
  border-color: rgba(255, 255, 255, .75);
}
.candy .btn { background: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .8); }
.candy .btn:hover { background: #fff; }
.candy .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.candy .btn-primary:hover { background: #28884f; border-color: #28884f; }


* { box-sizing: border-box; }

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

body {
  background:
    radial-gradient(900px 520px at 82% -8%, var(--glow-1), transparent 62%),
    radial-gradient(760px 480px at 6% 104%, var(--glow-2), transparent 60%),
    var(--main-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: .2px; }
p { margin: 0; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.is-hidden { display: none !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #bed5c7; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a3c2b0; }

/* ===================== 按钮 ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
  font-weight: 500;
}
.btn:hover { background: var(--panel-3); border-color: #b9d3c3; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #28884f; border-color: #28884f; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-danger { color: var(--danger); border-color: rgba(239, 91, 107, .4); background: transparent; }
.btn-danger:hover { background: rgba(239, 91, 107, .12); }
.btn-wechat { background: #07c160; border-color: #07c160; color: #fff; }
.btn-wechat:hover { background: #06ad56; border-color: #06ad56; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.wechat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.22);
  font-size: 10px;
}

/* ===================== 登录页 ===================== */
.auth-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 480px at 78% -10%, var(--glow-1), transparent 62%),
    radial-gradient(700px 420px at 12% 108%, var(--glow-2), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
}
/* 上下 Tab 分段控件：手机号登录 / 微信登录 */
.auth-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--panel-2); border-radius: 10px; margin-bottom: 18px;
}
.auth-tab {
  flex: 1; padding: 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; font-weight: 500;
  font-size: 13.5px;
}
.auth-tab:hover { color: var(--text-dim); }
.auth-tab.is-active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.auth-pane { display: flex; flex-direction: column; gap: 14px; }
.auth-hint { font-size: 12px; color: var(--muted); line-height: 1.7; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand h1 { font-size: 19px; }
.auth-brand p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--candy-mint), var(--candy-teal));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #10463a; font-size: 16px;
}
.auth-error {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #fdeaea; border: 1px solid #efc3c4;
  color: #a83a3d; font-size: 13px;
}

/* ===================== 表单 ===================== */
.field { display: block; }
.field-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.field-row { display: flex; gap: 8px; }
.field-row > input { flex: 1; }
input[type="text"], input[type="tel"], input[type="number"], input[type="datetime-local"],
input[type="password"],
textarea, select {
  width: 100%;
  padding: 9px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.65; }
select { cursor: pointer; }
.field-error { display: block; font-size: 12px; color: var(--danger); margin-top: 5px; min-height: 0; }

/* ===================== 语音输入按钮 ===================== */
.voice-wrap { position: relative; display: block; }
/* textarea 默认是 inline-block，会在容器底部留一道基线空隙，导致按钮对不准底边 */
.voice-wrap > textarea { display: block; }
.voice-btn {
  position: absolute;
  /* 右下角；往左让出 22px，避开 textarea 的缩放斜纹手柄 */
  bottom: 6px; right: 22px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, .92);
  color: var(--text-dim);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(31, 74, 49, .10);
  transition: color .15s, border-color .15s, background .15s;
  z-index: 2;
}
.voice-btn:hover { color: var(--accent); border-color: var(--accent); }
.voice-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(47, 158, 95, .20); }
/* 这个浏览器连不上语音服务：置灰，但点它还能看替代方案 */
.voice-btn.is-off { color: var(--muted); opacity: .55; border-style: dashed; }
.voice-btn.is-off:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }

/* 系统语音输入提示条（网页语音不可用时，贴在输入框正上方） */
.voice-tip {
  position: absolute;
  bottom: calc(100% + 8px); left: 0; right: 0;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--candy-mint);
  border-radius: 10px;
  background: var(--candy-mint-s);
  box-shadow: 0 4px 14px rgba(31, 74, 49, .12);
  color: var(--text);
  z-index: 6;
  animation: vtIn .18s ease-out;
}
.voice-tip.is-fade { opacity: 0; transition: opacity .35s; }
@keyframes vtIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.vt-ico {
  flex: none;
  margin-top: 1px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.vt-body { flex: 1; min-width: 0; }
.vt-t1 { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.vt-t2 { margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--text); }
.vt-t2 b { color: var(--accent); font-weight: 600; }
.vt-ops { flex: none; display: flex; align-items: center; gap: 6px; }
.vt-link {
  padding: 3px 8px;
  border: 1px solid var(--candy-mint);
  border-radius: 20px;
  background: #fff;
  color: var(--accent);
  font-size: 11.5px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.vt-link:hover { background: var(--candy-mint); }
.vt-link.vt-edge { background: var(--accent); border-color: var(--accent); color: #fff; }
.vt-link.vt-edge:hover { filter: brightness(1.08); background: var(--accent); }
.vt-x {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.vt-x:hover { background: rgba(255, 255, 255, .7); color: var(--text); }
@media (max-width: 820px) {
  .voice-tip { flex-wrap: wrap; }
  .vt-ops { width: 100%; justify-content: flex-end; }
}

/* 语音不可用时的替代方案弹窗 */
.vh-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.vh-row:last-child { border-bottom: 0; }
.vh-tag {
  flex: none;
  min-width: 82px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--candy-mint-s);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}
.vh-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.65; color: var(--text); }
.vh-txt b { color: var(--accent); font-weight: 600; }
/* 正在录：变红 + 呼吸光圈，一眼看出还在听 */
.voice-btn.is-rec {
  color: #fff;
  background: #e05252;
  border-color: #e05252;
  animation: voicePulse 1.25s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 82, .42); }
  55% { box-shadow: 0 0 0 8px rgba(224, 82, 82, 0); }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }

/* ===================== 应用骨架 ===================== */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 226px; flex: none;
  background: var(--side-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; font-weight: 600; font-size: 15px;
}
.sidebar-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  /* 左侧 24px 是给选中指示器（小三角）预留的槽位，未选中时留白，切换时不跳动 */
  padding: 9px 12px 9px 24px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  cursor: pointer; text-align: left; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item i {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--ico-fg, var(--muted));
  background: var(--ico-bg, transparent);
  transition: transform .15s, box-shadow .15s;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item:hover i { transform: translateY(-1px); }
/* 选中态：薄荷淡底 + 左侧主色绿小三角（三角用绝对定位，不参与布局） */
.nav-item.is-active {
  background: var(--candy-mint-s);
  color: var(--text);
  font-weight: 600;
}
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  margin-top: -5px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #35b98b;
}
/* 选中时保留自己的糖果色，只加一点投影 */
.nav-item.is-active i {
  color: var(--ico-fg, var(--accent));
  background: var(--ico-bg, transparent);
  box-shadow: 0 2px 6px rgba(60, 60, 80, .16);
}

/* 每个模块一种糖果色：填充底 + 深色字（参考图的彩色方块） */
.ico-mint   { --ico-fg: #0f5c47; --ico-bg: var(--candy-mint); }
.ico-gold   { --ico-fg: #6d5200; --ico-bg: var(--candy-yellow); }
.ico-violet { --ico-fg: #4b2c94; --ico-bg: var(--candy-violet); }
.ico-blue   { --ico-fg: #16527c; --ico-bg: var(--candy-sky); }
.ico-cyan   { --ico-fg: #0d5a63; --ico-bg: var(--candy-teal); }
.ico-pink   { --ico-fg: #8e2b55; --ico-bg: var(--candy-pink); }
.ico-amber  { --ico-fg: #8a5314; --ico-bg: var(--candy-peach); }
.ico-rose   { --ico-fg: #5b7413; --ico-bg: var(--candy-lime); }

/* 意向客户分组（可展开的子集菜单） */
.nav-group-head .nav-chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  transition: transform .18s;
}
.nav-group.is-open .nav-group-head .nav-chev { transform: rotate(180deg); }
.nav-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
  padding-left: 18px;
}
.nav-group.is-open .nav-sub { display: flex; }
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.nav-subitem:hover { background: var(--panel); color: var(--text); }
/* 子项选中：白底 + 细绿边，避免和父项的薄荷底撞成一片 */
.nav-subitem.is-active {
  background: #fff;
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(47, 158, 95, .22);
}
.nav-subitem .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-all { background: var(--accent); }
.dot-red { background: #e05252; }
.dot-yellow { background: #f0a41c; }
.dot-green { background: #2f9e5f; }
.dot-gray { background: #b6c0bb; }
.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-3);
  border-radius: 10px;
  padding: 1px 7px;
}
.nav-subitem.is-active .nav-badge { background: var(--accent); color: #fff; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--border-soft); }
.model-pick { display: block; margin-bottom: 10px; }
.model-pick-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.model-pick select { font-size: 12.5px; padding: 6px 9px; }
.user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--panel-3); display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--text-dim); font-size: 13px; overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-meta { min-width: 0; display: flex; flex-direction: column; }
.user-meta span { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { font-size: 11px; color: var(--muted); }

/* ===================== 账号设置（粉色小爱心唤起） ===================== */
/* 整组相对定位，设置面板绝对定位悬浮 —— 完全不占侧边栏的常驻空间 */
.user-chip-wrap { position: relative; margin-bottom: 10px; }
.user-chip-wrap .user-chip { margin-bottom: 0; }

.acct-heart {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--candy-pink);
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s, transform .15s, background .15s;
}
.acct-heart:hover { opacity: 1; background: var(--candy-pink-s); transform: translateY(-50%) scale(1.08); }
.acct-heart:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 169, 198, .35); }
.acct-heart[aria-expanded="true"] { opacity: 1; background: var(--candy-pink-s); }

.acct-panel {
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(31, 74, 49, .16);
  z-index: 20;
}
.acct-panel.is-hidden { display: none; }
.acct-item {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.acct-item:hover { background: var(--candy-mint-s); color: var(--accent); }
.acct-ico { flex: none; display: inline-flex; color: var(--accent); }

/* 个人信息弹窗里的字段行 */
.pf-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pf-row:last-child { border-bottom: 0; }
.pf-k { flex: none; width: 76px; font-size: 12.5px; color: var(--muted); }
.pf-v { flex: 1; min-width: 0; font-size: 13px; color: var(--text); word-break: break-all; }
.pf-v.is-muted { color: var(--muted); }
/* 行内「修改 / 去设置 / 换号」入口 */
.pf-edit {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--candy-mint);
  border-radius: 20px;
  background: var(--candy-mint-s);
  color: var(--accent);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pf-edit:hover { background: var(--candy-mint); }
.pf-edit:focus { outline: none; box-shadow: 0 0 0 3px rgba(47, 158, 95, .18); }
/* 字段标题里的补充说明 */
.field-hint { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.pf-tip {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 9px;
  background: var(--candy-mint-s);
  font-size: 12px; line-height: 1.7; color: var(--text);
}
.pf-tip b { color: var(--accent); }
.pw-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 0 0 12px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 10px 30px 10px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--topbar-bg);
  backdrop-filter: blur(10px); z-index: 20;
}
.topbar h2 { font-size: 19px; }
.page-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.topbar-actions { display: flex; gap: 8px; flex: none; }
.page { padding: 16px 30px 60px; flex: 1; }

/* ===================== 通用组件 ===================== */
.card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.card-head h3 { font-size: 15px; }
.card-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 筛选条右侧的操作按钮组：整体靠右，空间不够时整组换行而不是被拆散 */
.toolbar-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-left: auto; align-items: center;
}

/* 客户列表顶部筛选条：尽量压成一行，把高度让给表格 */
.filter-bar {
  padding: 9px 14px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.filter-bar input[type="text"] { width: 200px; max-width: 200px; flex: none; }
.filter-bar select { width: auto; max-width: 152px; flex: none; }
.filter-bar .toolbar-actions { gap: 6px; }
.filter-bar .toolbar-actions .btn { padding: 4px 10px; font-size: 12.5px; }
.section-grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 看板首屏：左边漏斗略宽，右边提醒略窄（手机上会退化成单列） */
.grid-hero { grid-template-columns: 1.35fr 1fr; }

.stat {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 16px 18px;
  border-left: 5px solid var(--stat-tone, var(--accent));
}
.stat .stat-label { font-size: 12.5px; color: var(--muted); }
.stat .stat-value { font-size: 26px; font-weight: 650; margin-top: 4px; letter-spacing: .5px; }
.stat .stat-foot { font-size: 12px; color: var(--muted); margin-top: 4px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 500;
  background: var(--panel-3); color: var(--text-dim); border: 1px solid var(--border);
}
.tag-blue { background: #e9f2ff; color: #2f6db3; border-color: rgba(47, 109, 179, .24); }
.tag-green { background: #e4f6ec; color: #1f7a4d; border-color: rgba(47, 158, 95, .28); }
.tag-amber { background: #fdf2e0; color: #a86a12; border-color: rgba(208, 139, 39, .30); }
.tag-red { background: #fdeaea; color: #a83a3d; border-color: rgba(212, 85, 90, .28); }
.tag-teal { background: #e5f4f1; color: #1d7a70; border-color: rgba(29, 122, 112, .26); }

.score-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px; flex: none;
  background: var(--panel-3); border: 1px solid var(--border);
}
.score-badge b { font-size: 17px; line-height: 1.1; }
.score-badge small { font-size: 10px; color: var(--muted); }
.score-hi { background: #e4f6ec; border-color: rgba(47, 158, 95, .35); color: #1f7a4d; }
.score-mid { background: #fdf2e0; border-color: rgba(208, 139, 39, .32); color: #a86a12; }
.score-lo { background: #fdeaea; border-color: rgba(212, 85, 90, .28); color: #a83a3d; }

.table { width: 100%; border-collapse: collapse; }

/* 客户列表宽表：固定高度内部滚动，表头吸顶 */
.table-wrap {
  /* 340 → 300 → 267：顶部页头/筛选条一路压扁后，把省下来的高度全给表格 */
  max-height: calc(100vh - 267px);
  min-height: 220px;
  overflow: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: #566b8f transparent;
}
/* 只隐藏横向原生滚动条（用下方自绘的拖动条替代），竖向保留 */
.table-wrap::-webkit-scrollbar { width: 10px; height: 0; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: #c3d9cb; border-radius: 5px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #a8c4b4; }

/* 表头吸顶 */
.table-wide thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 3;
  border-bottom: 1px solid var(--border-soft);
}

/* 自绘横向拖动条：任何浏览器都始终可见、可拖 */
.hscroll {
  position: relative;
  height: 14px;
  margin-top: 10px;
  background: #e3f1e9;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.hscroll.is-idle { display: none; }
.hscroll-thumb {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 120px;
  background: #9cc4ad;
  border-radius: 6px;
  cursor: grab;
  transition: background .15s;
}
.hscroll-thumb:hover { background: #86b79b; }
.hscroll-thumb:active { background: #6ea98a; cursor: grabbing; }

.table-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 10px;
  flex-wrap: wrap;
}
.table-hint { margin-left: 10px; opacity: .8; }
.table-nav { display: flex; gap: 6px; flex: none; }
.table-nav .btn { opacity: .75; }
.table-nav .btn:hover:not(:disabled) { opacity: 1; }

/* 分页条 */
.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 2px 2px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.pager-left { font-size: 12.5px; color: var(--muted); }
.pager-size { width: auto; padding: 5px 8px; font-size: 12.5px; }
.pager-pages { display: flex; gap: 5px; margin-left: auto; align-items: center; }
.pager-gap { color: var(--muted); padding: 0 2px; font-size: 12px; }
.table-wide { min-width: 1620px; }
.table-wide th, .table-wide td { white-space: nowrap; padding: 9px 10px; }
/* 列宽被拖动过 → 单元格用 inline width/max-width 限制住，超出的内容省略而不是压到隔壁列
   （表头不能加 overflow:hidden，否则会把右侧那条分割线裁掉） */
.table-wide td { overflow: hidden; text-overflow: ellipsis; }
.table-wide td.cell-name { font-weight: 500; }
.table-wide td.cell-note { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.table-wide tbody tr:hover { background: var(--panel-2); }
.nowrap { white-space: nowrap; }

/* 列表内可直接编辑的单元格 */
.inline-cell {
  display: inline-block;
  padding: 2px 5px;
  margin: -2px -5px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.inline-cell:hover {
  background: var(--panel-3);
  border-color: var(--border);
}
.inline-cell.is-empty { color: var(--accent); opacity: .75; font-size: 12.5px; }
.inline-cell.is-empty:hover { opacity: 1; }
.inline-cell.is-editing { padding: 0; margin: 0; background: transparent; border-color: transparent; }
.inline-input {
  width: 100%;
  min-width: 80px;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* 客户姓名 + 公司名叠两行，省宽度 */
.cust-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  line-height: 1.35;
}
.cust-company { font-size: 12px; line-height: 1.4; margin-top: 1px; }
/* 序号列：只占最窄的一条，数字左对齐 */
#custTable td.cell-seq,
#custTable th[data-col="seq"] {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding-left: 6px;
  padding-right: 0;
  text-align: left;
  white-space: nowrap;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* 表头不写字，也不放拖拽把手和拉宽手柄，整列只留数字 */
#custTable th[data-col="seq"] .th-grip,
#custTable th[data-col="seq"] .th-resizer { display: none; }

/* 库外数据：姓名格里叠着公司名，宽度封顶，超出省略号 */
#outTable td.cell-name { max-width: 240px; }
#outTable td.cell-name .cust-name,
#outTable td.cell-name .cust-company {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#outTable td.cell-name .inline-cell { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 五角星：点一下加入 / 移出意向客户 */
.star-btn {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #c3cec8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s, transform .12s, background .15s;
}
.star-btn:hover { color: #f0b429; background: rgba(240, 180, 41, .12); transform: scale(1.15); }
/* 三档意向颜色：红=高 黄=中 绿=低 */
.star-btn.lv-red    { color: #e05252; }
.star-btn.lv-yellow { color: #f0a41c; }
.star-btn.lv-green  { color: #2f9e5f; }
/* 评分达标但还没标色的：亮着但颜色淡 */
.star-btn.is-auto { color: #f5a623; opacity: .75; }
/* 手动移出的：空心灰 */
.star-btn.is-off { color: #b6c0bb; }
.star-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* 星星颜色小菜单 */
.star-pop {
  position: fixed;
  z-index: 4000;
  width: 186px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(21, 48, 34, .16);
}
.star-pop-title {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.star-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.star-pop-item:hover { background: var(--panel-2); }
.star-pop-item .star-ico { font-size: 15px; line-height: 1; }
.star-pop-item.lv-red .star-ico { color: #e05252; }
.star-pop-item.lv-yellow .star-ico { color: #f0a41c; }
.star-pop-item.lv-green .star-ico { color: #2f9e5f; }
.star-pop-item.is-remove .star-ico { color: #b6c0bb; }
.star-pop-item.is-cur { background: var(--accent-soft); font-weight: 600; }

/* 意向客户页的分档标签页 */
.intent-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 12px;
}
.intent-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.intent-tab:hover { border-color: var(--accent); color: var(--accent); }
.intent-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.intent-tab b { font-weight: 600; }
.intent-tab .dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.dot-red { background: #e05252; }
.dot-yellow { background: #f0a41c; }
.dot-green { background: #2f9e5f; }
.empty-inline { padding: 22px 0; text-align: center; font-size: 13px; }

/* 备忘录卡片 */
.memo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.memo-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.memo-head { display: flex; align-items: flex-start; gap: 10px; }
.memo-title { font-size: 14px; font-weight: 600; line-height: 1.35; word-break: break-all; }
.memo-btns { display: flex; gap: 6px; flex: none; }
.memo-body {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 96px;
  overflow: hidden;
}
.memo-view {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 13.5px;
  line-height: 1.75;
  max-height: 60vh;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel-2);
}

/* 最近跟进：列表内直接显示内容，点开填写 */
.follow-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 190px;
  padding: 3px 6px;
  margin: -3px -6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.follow-cell:hover { background: var(--panel-3); border-color: var(--border); }
.follow-cell.is-empty { color: var(--accent); font-size: 12.5px; }

/* ===== 填写跟进浮层：点一下在旁边弹出，不占表格高度、不挤动列表 ===== */
tr.is-following > td { background: var(--panel-2); }

.follow-pop {
  position: fixed;
  z-index: 900;
  width: 420px;
  max-width: calc(100vw - 16px);
  padding: 14px 16px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 36px -8px rgba(24, 52, 38, .22), 0 2px 8px rgba(24, 52, 38, .08);
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: fpIn .13s ease-out;
}
@keyframes fpIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.fp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.fp-title { font-weight: 600; color: var(--text); font-size: 13.5px; }
.fp-who { color: var(--text-dim); }
.fp-time { color: var(--muted); margin-left: auto; font-size: 12px; }
.fp-hint { color: var(--muted); font-size: 12px; }
.fp-text {
  width: 100%;
  min-height: 74px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}
.fp-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 158, 95, .12); }
.fp-extra { display: flex; gap: 8px; flex-wrap: wrap; }
.if-input {
  flex: 1 1 120px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 12.5px;
  box-sizing: border-box;
}
.if-input:focus { outline: none; border-color: var(--accent); }
.fp-foot { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 820px) {
  .follow-pop { width: calc(100vw - 16px); padding: 12px; }
  .fp-extra { flex-direction: column; }
  .if-input { flex: 1 1 auto; width: 100%; }
}

.follow-txt {
  font-size: 12.5px;
  color: var(--text-dim);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-meta { font-size: 11.5px; color: var(--muted); }

/* 填写跟进弹窗 */
.fu-customer {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.fu-customer strong { color: var(--text); font-size: 14.5px; }
.fu-row { display: flex; gap: 14px; margin-bottom: 14px; }
.fu-row:last-child { margin-bottom: 0; }
.fu-row .field { flex: 1; margin-bottom: 0; }
.fu-row .field.fu-narrow { flex: 0 0 190px; }
.fu-count {
  display: block;
  text-align: right;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.field .req { color: var(--danger); }

/* 是否已加微信：点一下切换 */
.wx-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
.wx-toggle:hover { border-color: var(--accent); color: var(--accent); }
.wx-toggle:disabled { opacity: .6; cursor: wait; }

/* ===================== 电话号码 + 隐藏的三点菜单 ===================== */
/* 多个号码上下排，一行一个，不再用「/」横着挤 */
.phone-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.phone-item { display: inline-flex; align-items: center; gap: 1px; line-height: 1.45; }
.phone-more {
  width: 17px; height: 17px;
  padding: 0;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 13px; line-height: 1; font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s, background .14s, color .14s;
}
/* 鼠标移到这一行才浮现，平时不占视觉 */
.table-wide tbody tr:hover .phone-more { opacity: .75; }
.phone-more:hover { opacity: 1; background: var(--panel-3); color: var(--accent); }
.phone-more:focus { outline: none; opacity: 1; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
@media (hover: none) {
  .phone-more { opacity: .55; }
}

.phone-menu {
  position: fixed;
  z-index: 360;
  min-width: 214px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 14px 38px rgba(31, 74, 49, .20);
  animation: cfIn .13s ease-out;
}
.pm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}
.pm-item:hover { background: var(--panel-2); }
.pm-ico {
  flex: none;
  width: 25px; height: 25px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}
.pm-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-txt em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* 公司那块的三点菜单：分隔线 + 关联企业列表 */
.pm-divider { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.pm-label {
  padding: 6px 12px 4px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .2px;
}
/* 「查企业」浮层：四个外链胶囊 */
.pm-lookup-name {
  padding: 0 12px 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  max-width: 268px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-lookups { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 4px; }
a.pm-lookup {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .13s, border-color .13s, background .13s;
}
a.pm-lookup:hover {
  color: var(--accent);
  border-color: rgba(47, 158, 95, .5);
  background: var(--accent-soft);
}
.pm-hint { padding: 2px 12px 6px; font-size: 11.5px; color: var(--muted); }
.pm-companies {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 210px;
  overflow-y: auto;
}
.pm-company {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 5px 6px 5px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 12.5px;
  transition: background .13s;
}
.pm-company:hover { background: var(--panel-2); }
.pm-co-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  padding: 2px 0;
  border: 0; background: transparent;
  color: inherit; font-size: inherit;
  text-align: left; cursor: pointer;
}
.pm-co-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 公司名后面的持股比例，灰色小字 */
.pm-co-ratio {
  flex: none;
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.pm-co-hint { flex: none; font-size: 11px; color: var(--muted); opacity: 0; transition: opacity .13s; }
.pm-company:hover .pm-co-hint { opacity: 1; }
/* 每行右侧的 ✎ 修改 / ✕ 删除：默认隐藏，鼠标移到这一行才出现 */
.pm-co-ops {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .13s;
}
.pm-company:hover .pm-co-ops, .pm-co-ops:focus-within { opacity: 1; }
.pm-co-op {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pm-co-op:hover { background: var(--panel-3); color: var(--accent); }
.pm-co-op.is-del:hover { background: rgba(212, 85, 90, .12); color: var(--danger); }
.pm-co-op:focus { outline: none; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
@media (hover: none) { .pm-co-ops { opacity: 1; } }
.pm-empty { padding: 8px 12px 10px; font-size: 12.5px; color: var(--muted); }
.company-menu {
  min-width: 240px; max-width: 320px;
  /* 公司多的时候菜单会很长，整体限高，让中间列表自己滚，底部三个按钮始终露在外面 */
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
}
.company-menu .pm-companies { flex: 1 1 auto; min-height: 0; }

/* 粘贴导入弹窗里的截图投放区 */
.paste-shot {
  margin-top: 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.paste-shot:hover, .paste-shot.is-over { border-color: var(--accent); background: var(--candy-mint-s); }
.paste-shot.is-busy { cursor: progress; opacity: .75; }
.paste-shot:focus { outline: none; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
.paste-shot-ico { font-size: 26px; line-height: 1; flex: none; }
.paste-shot-txt { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.paste-shot-txt .muted { color: var(--muted); }

/* 客户详情页的「关联企业」卡片列表 */
.co-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.co-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  transition: border-color .13s, background .13s;
}
.co-item:hover { border-color: var(--accent); background: var(--candy-mint-s); }
.co-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  color: inherit; text-decoration: none; font-size: inherit;
  cursor: pointer;
}
.co-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-go { flex: none; color: var(--muted); font-size: 12px; transition: color .13s; }
.co-item:hover .co-go { color: var(--accent); }
/* 每行右侧的 ✎ 修改 / ✕ 删除，悬停该行才出现 */
.co-ops {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .13s;
}
.co-item:hover .co-ops, .co-ops:focus-within { opacity: 1; }
.co-op {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.co-op:hover { background: var(--panel-3); color: var(--accent); }
.co-op.is-del:hover { background: rgba(212, 85, 90, .12); color: var(--danger); }
.co-op:focus { outline: none; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
@media (hover: none) { .co-ops { opacity: 1; } }

/* 公司名 + 隐藏的三点（列表里多家公司竖着排） */
.company-list { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.company-item { display: inline-flex; align-items: center; gap: 3px; line-height: 1.45; max-width: 100%; }
.company-more {
  width: 17px; height: 17px;
  padding: 0;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 13px; line-height: 1; font-weight: 700;
  cursor: pointer;
  flex: none;
  opacity: 0;
  transition: opacity .14s, background .14s, color .14s;
}
.table-wide tbody tr:hover .company-more { opacity: .75; }
.company-more:hover { opacity: 1; background: var(--panel-3); color: var(--accent); }
.company-more:focus { outline: none; opacity: 1; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
@media (hover: none) {
  .company-more { opacity: .55; }
}
/* 客户姓名后面的「查企业」三点：和公司名的 ⋮ 一样先藏着，鼠标移到这一行才露出来 */
.co-lookup {
  width: 17px; height: 17px;
  padding: 0;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 13px; line-height: 1;
  font-weight: 700;
  letter-spacing: -1px;
  cursor: pointer;
  flex: none;
  opacity: 0;
  transition: opacity .14s, background .14s, color .14s;
}
.table-wide tbody tr:hover .co-lookup { opacity: .75; }
.co-lookup:hover { opacity: 1; background: var(--panel-3); color: var(--accent); }
.co-lookup:focus { outline: none; opacity: 1; box-shadow: 0 0 0 2px rgba(47, 158, 95, .25); }
@media (hover: none) { .co-lookup { opacity: .55; } }
/* 关联企业的占股比例：紧跟公司名后，小号弱化，不用括号 */
.co-ratio {
  margin-left: 5px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.co-more-n {
  flex: none;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background: var(--candy-pink-s, #fdeef4);
  color: #ef6f9a;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background .13s, box-shadow .13s;
}
.co-more-n:hover { background: #ffdce9; }
.co-more-n:focus { outline: none; box-shadow: 0 0 0 2px rgba(239, 111, 154, .3); }
.wx-toggle.is-yes {
  background: #e4f6ec;
  border-color: rgba(47, 158, 95, .38);
  color: #1f7a4d;
}

/* 姓名列固定在左，操作列固定在右，横向滚动时始终可见 */
.table-wide th:first-child, .table-wide td:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 2;
}
.table-wide th:last-child, .table-wide td:last-child {
  position: sticky; right: 0; background: var(--panel); z-index: 2;
  box-shadow: -10px 0 12px -9px rgba(31, 74, 49, .16);
}
.table-wide tbody tr:hover td:first-child,
.table-wide tbody tr:hover td:last-child { background: var(--panel-2); }

/* 可拖动的表头 */
.table-wide th[data-col] { cursor: grab; user-select: none; }
.table-wide th[data-col]:active { cursor: grabbing; }
.table-wide th[data-col] .th-grip {
  opacity: .28;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: -1px;
}
.table-wide th[data-col]:hover .th-grip { opacity: .9; }
.table-wide th.is-dragging { opacity: .35; }
.table-wide th.is-drop { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }

/* 表头右侧的分割线：按住左右拖动即可改这一列的宽度 */
.th-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  touch-action: none;
  user-select: none;
}
.th-resizer::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 1px;
  width: 2px;
  border-radius: 2px;
  background: rgba(47, 158, 95, .16);
  transition: background .15s, top .15s, bottom .15s;
}
.th-resizer:hover::after,
.is-col-resizing .th-resizer:hover::after { background: var(--accent); top: 8%; bottom: 8%; }
.table.is-col-resizing { cursor: col-resize; user-select: none; }
.table.is-col-resizing td { overflow: hidden; }

/* 可排序表头（导入时间） */
.table-wide th.is-sortable { cursor: pointer; }
.table-wide th.is-sortable:hover { color: var(--accent); }
.table-wide th.is-sorted { color: var(--accent); font-weight: 700; }

/* ===================== 表头六点：筛选 + 拖动排序 ===================== */
/* 六点原本就是列拖动把手；可筛选的列点一下它，弹出这一列的筛选面板 */
.table-wide th[data-col] .th-grip.is-filterable {
  cursor: pointer;
  padding: 1px 4px;
  margin-left: 5px;
  border-radius: 5px;
  transition: opacity .15s, color .15s, background .15s;
}
.table-wide th[data-col] .th-grip.is-filterable:hover {
  color: var(--accent);
  background: var(--panel-3);
  opacity: 1;
}
/* 有筛选条件时一直亮着，否则用户不知道这一列被筛过 */
.table-wide th[data-col] .th-grip.is-filterable.is-on {
  color: #fff;
  background: var(--accent);
  opacity: 1;
}
/* 触屏没有 hover，浅浅地显示出来提示可点 */
@media (hover: none) {
  .table-wide th[data-col] .th-grip.is-filterable { opacity: .55; }
}

/* 弹出的筛选面板 */
.cf-pop {
  position: fixed;
  z-index: 350;
  width: 302px;
  max-width: calc(100vw - 20px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(31, 74, 49, .20);
  overflow: hidden;
  animation: cfIn .14s ease-out;
}
@keyframes cfIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cf-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
}
.cf-count { font-size: 11.5px; font-weight: 400; color: var(--muted); }

.cf-opts {
  padding: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  max-height: 46vh;
  overflow-y: auto;
}
.cf-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.cf-opt:hover { border-color: var(--accent); color: var(--text); }
.cf-opt.is-on {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
.cf-opt em { font-style: normal; font-size: 11px; opacity: .65; flex: none; }
.cf-opt.is-on em { opacity: .9; }

.cf-foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--panel-2);
  border-top: 1px solid var(--border-soft);
}

.sort-arrow {
  font-style: normal;
  margin-left: 3px;
  font-size: 11px;
}

/* 列设置弹窗 */
.col-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.col-row:last-child { border-bottom: 0; }
.col-name { flex: 1; font-size: 13.5px; }
.col-btns { display: flex; gap: 6px; flex: none; }

.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--panel-3);
  border: 1px solid var(--border);
}
.table th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 500;
  padding: 0 12px 9px; border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.table td {
  padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.table tbody tr { cursor: pointer; transition: background .12s; }
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr:last-child td { border-bottom: 0; }

.empty {
  text-align: center; padding: 44px 20px; color: var(--muted);
}
.empty .empty-icon {
  font-size: 22px;
  opacity: 1;
  margin-bottom: 12px;
  width: 52px; height: 52px;
  border-radius: 15px;
  margin-left: auto; margin-right: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-soft, var(--candy-mint-s));
  color: var(--tone-ink, #147a5e);
}
.empty h4 { color: var(--text-dim); font-size: 14px; margin-bottom: 5px; }
.empty p { font-size: 12.5px; max-width: 420px; margin: 0 auto 14px; }

.bar { height: 6px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

/* 今日看板：顶部指标卡 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kpi-bg, var(--candy-mint));
  color: var(--candy-ink);
  border: none;
  border-radius: var(--radius);
  padding: 16px 16px;
  box-shadow: 0 6px 18px rgba(60, 60, 80, .10);
}
.kpi-ico {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--kpi-ink, #10463a); font-size: 17px; font-weight: 600;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}
.kpi-main { min-width: 0; }
.kpi-label { font-size: 12.5px; color: var(--candy-ink-dim); }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.kpi-foot { font-size: 11.5px; color: var(--candy-ink-dim); margin-top: 2px; }

/* KPI 卡片里的一键修复入口（比如"5 位没记日期，点此补为今天"） */.kpi-link {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-family: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .9;
  cursor: pointer;
  white-space: nowrap;
}
.kpi-link:hover { opacity: 1; }
.delta { font-weight: 600; }
.delta.up { color: var(--accent); }
.delta.down { color: var(--danger); }

/* 客户跟进阶段漏斗 */
.funnel { display: flex; flex-wrap: wrap; gap: 8px; }
.funnel-chip {
  flex: 1 1 130px;
  min-width: 118px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.funnel-chip b { font-size: 13px; font-weight: 600; }
.funnel-chip strong { font-size: 20px; font-weight: 650; }
.funnel-chip small { font-size: 11.5px; opacity: .85; }

.tl-time {
  flex: none;
  width: 42px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rank-no { flex: none; width: 18px; font-size: 12px; color: var(--muted); }

.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.list-item:last-child { border-bottom: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.muted { color: var(--muted); }

a.ext-link {
  color: #1f7a4d;
  text-decoration: none;
  border-bottom: 1px dashed rgba(47, 158, 95, .45);
}
a.ext-link:hover { color: #2f9e5f; border-bottom-color: #2f9e5f; }
.ext-links { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
a.ext-chip {
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  background: var(--panel-2);
  white-space: nowrap;
}
a.ext-chip:hover { color: var(--accent); border-color: rgba(76, 141, 255, .45); }

.kv { display: block; font-size: 13px; }
.kv-row { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin-bottom: 9px; }
.kv-row:last-child { margin-bottom: 0; }
.kv-row dt { color: var(--muted); }
.kv-row dd { margin: 0; color: var(--text-dim); overflow-wrap: anywhere; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text-dim); overflow-wrap: anywhere; }

.msg-box {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px;
  white-space: pre-wrap; line-height: 1.75; font-size: 13.5px;
  overflow-wrap: anywhere;
}
.msg-box.msg-wechat { border-left: 3px solid #07c160; }
.msg-box.msg-sms { border-left: 3px solid var(--accent); }
.msg-box.msg-phone { border-left: 3px solid var(--warn); }

.note {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
}
.note-warn { background: #fdf6e9; border-color: #f0dcb4; color: #8a5b12; }
.note-info { background: #e6f7f8; border-color: #b8e4e8; color: #14707a; }

.loading-inline {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px;
}
/* 加载圆环：底轨用品牌绿的浅色版，浅底/深底都能看见完整圆圈，
   只有 1/4 弧可见的旧写法在白色界面上会变成一根漂浮的绿线 */
.spinner {
  width: 16px; height: 16px; flex: none;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(47, 158, 95, .17);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: spin .72s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== 上传区 ===================== */
.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--panel-2);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .dz-icon { font-size: 26px; opacity: .6; }
.dropzone h4 { margin: 8px 0 4px; font-size: 14px; }
.dropzone p { font-size: 12.5px; color: var(--muted); }

.file-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border); margin-top: 8px;
}
.file-chip .fc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-chip .fc-size { font-size: 12px; color: var(--muted); flex: none; }

/* ===================== Excel 导入 ===================== */
.xl-tpl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.xl-tpl > div { display: flex; flex-direction: column; gap: 2px; }
.xl-tpl strong { font-size: 13.5px; }
.xl-tpl span { font-size: 12.5px; }

/* ===================== 同步页 ===================== */
.sync-drag-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.btn-drag {
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: grab;
  box-shadow: 0 4px 16px rgba(76, 141, 255, .32);
}
.btn-drag:active { cursor: grabbing; }
.sync-drag-tip { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.sync-drag-tip strong { font-size: 13.5px; }
.sync-drag-tip span { font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* 连接客户系统的三步引导：用「复制 + 粘贴」代替拖拽，成功率高得多 */
.sync-steps {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.sync-steps-list {
  flex: 1; min-width: 260px;
  display: flex; flex-direction: column; gap: 10px;
}
.sync-step {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.75;
}
.sync-step > b:first-child {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: rgba(47, 158, 95, .14); color: var(--accent);
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.sync-step span { min-width: 0; }
.sync-tip-line {
  margin-top: 15px;
  font-size: 12.5px; color: var(--muted); line-height: 1.95;
}

.sync-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(76, 141, 255, .3);
  border-radius: var(--radius-sm);
}
.sync-quick > div { display: flex; flex-direction: column; gap: 2px; }
.sync-quick strong { font-size: 13.5px; }
.sync-quick span { font-size: 12.5px; }

.adv-box {
  margin-top: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel);
}
.adv-box summary { padding: 12px 16px; cursor: pointer; font-size: 13px; color: var(--muted); }
.adv-box summary:hover { color: var(--text-dim); }
.adv-body { padding: 0 16px 16px; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11.5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  font-family: inherit;
}
code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-3);
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
}

/* ===================== 弹窗 ===================== */
.modal-mask {
  position: fixed; inset: 0; background: rgba(26, 52, 38, .34);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto; z-index: 100;
  backdrop-filter: blur(3px);
}
.modal {
  width: 100%; max-width: 640px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); animation: modalIn .18s ease-out;
}
.modal.modal-lg { max-width: 860px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { font-size: 16px; }
.modal-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.modal-close:hover { background: var(--panel-3); color: var(--text); }
.modal-body { padding: 20px 22px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 15px 22px; border-top: 1px solid var(--border-soft);
  position: sticky; bottom: 0; background: var(--panel); border-radius: 0 0 16px 16px;
}

/* ===================== Toast ===================== */
.toast-root {
  position: fixed; right: 22px; bottom: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.toast {
  padding: 11px 16px; border-radius: 10px; font-size: 13px;
  background: var(--panel-3); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); max-width: 380px;
  animation: toastIn .2s ease-out;
}
.toast.is-success { border-color: rgba(53,196,138,.45); color: #7ee0b4; }
.toast.is-error { border-color: rgba(239,91,107,.45); color: #ff9aa5; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===================== 启动遮罩 ===================== */
.boot-mask {
  position: fixed; inset: 0; background: var(--bg); z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--muted); font-size: 13px;
}

/* ===================== 响应式 ===================== */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .side-nav { flex-direction: row; overflow-x: auto; }
  .sidebar-foot { display: flex; align-items: center; gap: 10px; }
  .user-chip { margin-bottom: 0; flex: 1; }
  .topbar { padding: 16px 18px 12px; flex-direction: column; }
  .page { padding: 16px 18px 50px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
}

/* ===================== 库外数据去重 ===================== */
/* 手动录入命中重复时的对比框 */
.dup-box {
  border: 1px solid #f0dcb4;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dup-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px;
  font-size: 13px;
}
.dup-row + .dup-row { border-top: 1px solid #f3e3c6; }
.dup-row > div { min-width: 0; flex: 1; }
.dup-k {
  flex: none; width: 58px;
  font-size: 11.5px; font-weight: 600;
  color: #8a5b12;
  background: #fdf1d8;
  border-radius: 6px;
  padding: 3px 0; text-align: center;
}
.dup-k-new { color: #147a5e; background: #ddf3e9; }

/* Excel 导入前的重复提醒 */
.dup-warn {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #f0dcb4;
  border-left: 4px solid #e0a03a;
  border-radius: var(--radius-sm);
  background: #fdf8ec;
  color: var(--text);
}
.dup-warn-head {
  font-size: 13.5px; font-weight: 600; color: #8a5b12;
  margin-bottom: 8px;
}
.dup-warn .muted { color: var(--text-dim); }
.dup-detail { margin-top: 10px; }
.dup-detail > summary {
  cursor: pointer; font-size: 12.5px; color: #8a5b12;
  list-style: none; user-select: none;
}
.dup-detail > summary::-webkit-details-marker { display: none; }
.dup-detail > summary::before { content: '▸ '; }
.dup-detail[open] > summary::before { content: '▾ '; }
.dup-choice {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px; background: #fff;
  cursor: pointer; font-size: 12.5px; line-height: 1.6;
}
.dup-choice:hover { border-color: var(--accent); }
.dup-choice input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.dup-choice strong { color: var(--text); }
.dup-choice span { color: var(--text-dim); }

/* ===================== 手机端（PWA 竖屏操作） =====================
   桌面端保持原来的左侧栏布局；手机端把侧边栏整体换成底部 Tab 栏，
   并把模型选择 / 退出登录收进「更多」抽屉，避免小屏被导航吃掉一半高度。 */

.mtab-bar { display: none; }

@media (max-width: 820px) {
  /* --- 骨架 --- */
  .app { display: block; min-height: 100vh; }
  .sidebar { display: none; }
  .main { min-height: 100vh; }

  .topbar {
    padding: calc(12px + env(safe-area-inset-top)) 15px 10px;
    gap: 10px; flex-wrap: wrap;
  }
  .topbar h2 { font-size: 18px; }
  .page-subtitle { font-size: 12px; }
  .topbar-actions { gap: 6px; flex-wrap: wrap; }
  .topbar-actions .btn { min-height: 34px; padding: 6px 11px; font-size: 12.5px; }

  .page { padding: 14px 13px calc(80px + env(safe-area-inset-bottom)); }

  /* --- 底部 Tab 栏 --- */
  .mtab-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border-top: 1px solid var(--border-soft);
    padding: 5px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(31, 74, 49, .08);
  }
  .mtab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px 2px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted);
    font-size: 10.5px; font-weight: 500; line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }
  .mtab b {
    font-weight: 600;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mtab i {
    font-style: normal;
    width: 27px; height: 27px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    font-size: 13px; line-height: 1;
    color: var(--ico-fg, var(--muted));
    background: var(--ico-bg, transparent);
    transition: transform .16s, box-shadow .16s;
  }
  .mtab.is-active { color: var(--accent); }
  .mtab.is-active i { box-shadow: 0 0 0 2px rgba(47, 158, 95, .26), 0 2px 6px rgba(60, 60, 80, .13); }
  .mtab:active i { transform: scale(.9); }
  .mtab-more i { color: #48604f; background: var(--panel-3); }

  /* --- 列表行：手机上内容独占一行，操作按钮自动折到下一行 ---
     否则「时间 + 内容 + 复制/客户/改时间/已完成」挤在一行会把中文压成竖排 */
  .list-item { flex-wrap: wrap; row-gap: 8px; }
  .list-item > div { min-width: 0; }
  .list-item > div[style*="flex:1"] { flex: 1 1 100% !important; }
  .list-item .btn-xs { min-height: 30px; }

  /* --- 卡片与栅格 --- */
  .card { padding: 14px 13px; border-radius: 12px; }
  .card + .card { margin-top: 12px; }
  .card-head { gap: 8px; flex-wrap: wrap; align-items: flex-start; }
  .card-head h3 { font-size: 14.5px; }
  .card-head .right, .card-head .card-actions { margin-left: auto; }
  .section-grid { gap: 12px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-hero { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 奇数张 KPI 时，最后一张拉满整行，避免右下角空一块 */
  .kpi-grid > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
  .kpi { padding: 12px 13px; }
  .kpi-value { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid .span-2 { grid-column: span 1; }

  /* 顶部筛选条：搜索框整行，下拉两列，别让每个控件各占一整行 */
  .candy input[type="text"], .candy input[type="search"] {
    flex: 1 1 100%; max-width: 100% !important;
  }
  .candy select { flex: 1 1 calc(50% - 5px); max-width: none !important; min-width: 0; }
  .candy .btn { flex: none; }
  .toolbar-actions { width: 100%; margin-left: 0; }
  .toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* --- 表格：手机上取消左右两列吸底，让整表自然横向滚 --- */
  .table-wrap {
    max-height: none;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* 让手指横滑表格时不被浏览器当作返回手势 */
    overscroll-behavior-x: contain;
  }
  /* 首列（客户姓名）继续固定，横滑时不丢上下文；
     尾列放开，否则两列一起吸边会把可视区挤到只剩一百多像素 */
  .table-wide th:first-child, .table-wide td:first-child {
    position: sticky; left: 0; background: var(--panel); z-index: 2;
    box-shadow: 6px 0 12px -8px rgba(31, 74, 49, .22);
  }
  .table-wide th:last-child, .table-wide td:last-child {
    position: static;
    box-shadow: none;
  }
  .table th, .table td { white-space: nowrap; padding: 9px 10px; font-size: 13px; }
  .hscroll { display: none !important; }
  /* 自绘拖动条是为鼠标准备的，手机上用原生惯性滚动 */
  .hscroll-track, .hscroll-thumb { display: none !important; }

  /* --- 弹窗：从小屏底部升起，接近原生 App 的 sheet --- */
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal, .modal.modal-lg {
    max-width: 100%;
    max-height: 92vh;
    display: flex; flex-direction: column;
    border-radius: 18px 18px 0 0;
    animation: sheetUp .22s cubic-bezier(.2, .9, .3, 1);
  }
  .modal-head { padding: 15px 16px 12px; flex: none; }
  .modal-head h3 { font-size: 15.5px; }
  .modal-body {
    padding: 14px 16px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; min-height: 0;
  }
  .modal-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    flex: none; flex-wrap: wrap;
  }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  @keyframes modalUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  /* 文案切换：桌面讲拖滑块，手机讲滑动 */
  .only-desktop { display: none; }
  .only-mobile { display: inline; }

  /* --- 触控友好度 --- */  .btn { min-height: 40px; }
  .btn-sm { min-height: 32px; }
  /* iOS 在输入框字号小于 16px 时会自动放大页面，这里统一抬到 16px */
  input, textarea, select { font-size: 16px !important; }
  .field-row { flex-wrap: wrap; }
  .field-row .btn { flex: none; }
  table, .table { font-size: 13px; }

  /* --- Toast：别被底部 Tab 挡住 --- */
  .toast-root {
    left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .toast { max-width: none; text-align: center; }

  /* --- 登录页 --- */
  .auth-view { padding: calc(20px + env(safe-area-inset-top)) 16px 24px; align-items: flex-start; }
  .auth-card { padding: 22px 18px; border-radius: 16px; margin-top: 6vh; }
  .auth-brand h1 { font-size: 20px; }
}

/* 按屏幕切换文案：桌面说拖滑块，手机说滑动 */
.only-mobile { display: none; }

/* 更窄的机型（iPhone SE 等）再收一档 */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .mtab { font-size: 10px; }
  .mtab i { width: 25px; height: 25px; }
  .page { padding-left: 10px; padding-right: 10px; }
}

/* 横屏 / 大屏平板：底部栏仍在，但内容双列 */
@media (min-width: 600px) and (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page { padding-left: 18px; padding-right: 18px; }
}

/* --- 「更多」抽屉 --- */
.msheet-list { display: flex; flex-direction: column; gap: 4px; }
.msheet-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 12px;
  border: 0; border-radius: 11px; background: transparent;
  color: var(--text); font-size: 14.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msheet-item:active { background: var(--panel-2); }
.msheet-item i {
  font-style: normal; flex: none;
  width: 30px; height: 30px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--ico-fg, var(--muted));
  background: var(--ico-bg, var(--panel-3));
}
.msheet-item small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.msheet-sep { height: 1px; background: var(--border-soft); margin: 8px 2px; }
.msheet-user {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 12px 10px;
}
.msheet-user .user-avatar { width: 38px; height: 38px; font-size: 15px; }
.msheet-user-meta { min-width: 0; }
.msheet-user-meta b { display: block; font-size: 14.5px; font-weight: 600; }
.msheet-user-meta small { color: var(--muted); font-size: 12px; }
.msheet-model { padding: 2px 12px 10px; }
.msheet-model .model-pick-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.msheet-model select { width: 100%; }

/* 抽屉顶部的拖拽把手（纯装饰，点击遮罩或 × 关闭） */
@media (max-width: 820px) {
  .modal.modal-sheet { position: relative; }
  .modal.modal-sheet::before {
    content: '';
    position: absolute; top: 7px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px; background: var(--border);
  }
  .modal.modal-sheet .modal-head { padding-top: 18px; }
}

/* 手机上不要出现整页横向滚动条（表格自己有容器） */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  /* 横向滑动的筛选条隐藏滚动条，靠惯性滑动 */
  .candy::-webkit-scrollbar { display: none; }
  .candy { scrollbar-width: none; }
}



/* ===== 客户搜索选择（新建提醒等处用，替代超长下拉） ===== */
.cust-pick { position: relative; }
.cust-pick > input[type="text"] { width: 100%; box-sizing: border-box; }
.cust-pick-list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 26px -8px rgba(24, 52, 38, .22);
}
.cust-pick-list.is-hidden { display: none; }
.cp-item {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0; border-radius: 7px;
  background: transparent;
  font: inherit; text-align: left;
  color: var(--text);
  cursor: pointer;
}
.cp-item:hover, .cp-item:focus { background: var(--panel-2); outline: none; }
.cp-name { font-size: 13px; flex: none; }
.cp-co { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-phone { font-size: 11.5px; color: var(--muted); margin-left: auto; flex: none; }
.cp-empty { padding: 10px 9px; font-size: 12.5px; color: var(--muted); }

/* ===== 填写跟进浮层里的「跟进提醒」+ 粉色心（默认收起，点开心才展开） ===== */
.fu-remind {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.fu-remind-txt { font-size: 12.5px; color: var(--text-dim); }
.fu-heart {
  flex: none;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--candy-pink-s, #fdeef4);
  color: #ef6f9a;
  font-size: 12.5px;
  line-height: 20px;
  cursor: pointer;
  transition: background .13s, box-shadow .13s, opacity .13s;
}
.fu-heart:hover { background: #ffdce9; }
.fu-heart:focus { outline: none; box-shadow: 0 0 0 2px rgba(239, 111, 154, .3); }
/* 未展开时淡一点，展开后实心醒目 */
.fu-heart.is-off { opacity: .55; }
.fu-remind-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
}
.fu-remind-box.is-hidden { display: none; }
.fu-row { display: flex; gap: 8px; }
.fu-cell { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
/* .if-input 原本是 flex:1 1 120px（横向用的），放进纵向容器会把输入框撑成 120px 高，这里归零 */
.fu-cell .if-input { flex: none; width: 100%; }
.fu-label { font-size: 11.5px; color: var(--muted); }
.fu-text { resize: vertical; min-height: 48px; line-height: 1.5; }
@media (max-width: 820px) {
  .fu-row { flex-direction: column; }
}

/* ===== 顶部励志语录（客户管理页右上角，贴在绿色筛选条上沿；字号小于标题 19px） ===== */
/* align-self 底对齐 + 负 margin 把语录压到 topbar 底部、紧贴绿色筛选条上沿那根线 */
.topbar-actions.is-quote { align-self: flex-end; margin-bottom: -20px; }
.topbar-quote {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 420px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 10px;
  /* 三色对角渐变（用户 2026-10-21 定稿）：薄荷起手 → 柠黄过渡 → 青蓝收尾，
     青蓝取自用户指定参考色 #bde7ef，放在右下一角，不与薄荷柠黄抢主导 */
  background: linear-gradient(135deg, #e6f8f3 0%, #f4f9e0 50%, #bde7ef 100%);
  border: 1px solid var(--accent-2);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .3px;
  color: #15734a;
}
.topbar-quote .tq-mark { flex: none; display: inline-flex; align-items: center; }
.topbar-quote .tq-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s ease; }
.topbar-quote .tq-text.is-out { opacity: 0; }
/* 点一下可以换语录 / 自己写 */
.topbar-quote { cursor: pointer; }
.q-edit-tip {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.q-edit-tip .gate-link { font-size: 12px; }
@media (max-width: 820px) {
  .topbar-quote { max-width: 100%; font-size: 13px; padding: 5px 10px; }
  /* 手机端 topbar 是纵向排列：语录落到底部、靠右，负 margin 同样贴住绿色筛选条上沿 */
  .topbar-actions.is-quote { flex: 1 1 auto; min-width: 0; align-self: flex-end; margin-bottom: -20px; }
}

/* ===== 账号菜单「个人信息」下面的「外观」入口：右侧小徽标 ===== */
.acct-badge {
  margin-left: auto; flex: none;
  font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 20px;
  background: var(--accent); color: #fff; font-weight: 600;
}

/* ===== 外观页：主题色板 + 壁纸 ===== */
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 10px 6px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--panel); cursor: pointer;
  font-size: 12px; color: var(--text-dim);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.theme-dot:hover { transform: translateY(-1px); border-color: var(--accent-2); }
.theme-dot.is-active {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
  color: var(--text); font-weight: 600;
}
.theme-orb {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw1) 0%, var(--sw2) 100%);
  border: 1px solid rgba(0, 0, 0, .06);
}
.wp-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.wp-preview {
  width: 120px; height: 76px; flex: none; border-radius: 10px;
  border: 1px dashed var(--border); background: var(--panel-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted);
}
.wp-ops { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-veil { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.wp-veil input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--accent); }
.wp-veil b { font-size: 12px; color: var(--muted); min-width: 36px; text-align: right; }
.app-sec-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
@media (max-width: 820px) {
  .theme-dot { width: calc(33.333% - 7px); }
}

/* ===================== 使用授权 ===================== */
/* 没开通时盖住整个界面，只有一张竖排小卡片 */
.gate-mask {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--bg, #f4f7f6);
}
.gate-card {
  width: 100%; max-width: 360px;
  background: var(--panel, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .08));
  padding: 26px 22px 20px;
  text-align: center;
}
.gate-card h2 { font-size: 17px; margin: 0 0 8px; }
.gate-who { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.gate-who b { color: var(--text); font-weight: 600; }
.gate-desc {
  font-size: 13px; line-height: 1.7; color: var(--text-dim);
  margin: 0 0 16px; text-align: left;
  padding: 10px 12px; border-radius: 10px; background: var(--panel-2);
}
.gate-form { display: flex; flex-direction: column; gap: 9px; }
.gate-form input { text-align: center; letter-spacing: 2px; font-weight: 600; }
.gate-links { display: flex; justify-content: center; gap: 16px; margin-top: 14px; }
.gate-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--muted); text-decoration: underline;
}
.gate-link:hover { color: var(--accent); }

/* 授权管理页 */
.ac-code { display: flex; gap: 8px; align-items: center; }
.ac-code input { flex: 1; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; }
.ac-code-ops { display: flex; gap: 8px; margin-top: 10px; }
.ac-list { display: flex; flex-direction: column; }
.ac-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.ac-row:first-child { border-top: 0; }
.ac-who { flex: 1; min-width: 0; }
.ac-who b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 3px; }
.ac-who .tag { font-size: 11px; padding: 0 6px; line-height: 17px; }
.ac-ops { display: flex; gap: 6px; flex: none; }
@media (max-width: 820px) {
  .gate-card { max-width: none; }
  .ac-row { flex-wrap: wrap; }
  .ac-ops { width: 100%; justify-content: flex-end; }
}
.ac-self { font-size: 12px; color: var(--muted); }

/* ===================== 备忘录文件夹（糖果色卡片） ===================== */
.folder-wrap {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  box-shadow: var(--shadow-sm);
}
/* 顶部一条彩虹色带，跟着项目 card-tinted 的规范走 */
.folder-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #82dcc2, #ffe283, #ffa9c6, #bb9bf3, #92cff3);
}
.folder-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.folder-head h3 {
  font-size: 15px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.folder-head .fh-emoji { font-size: 15px; line-height: 1; }
.folder-head .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

.folder-list { display: flex; flex-direction: column; gap: 9px; }
.folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--fr-s, var(--panel-2));
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.folder-row:hover {
  transform: translateY(-1px);
  border-color: var(--fr-c1);
  box-shadow: 0 7px 16px -7px var(--fr-c2);
}
.folder-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--fr-c1), var(--fr-c2));
  color: #fff;
  box-shadow: 0 4px 10px -3px var(--fr-c2);
}
.folder-name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--candy-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-count {
  flex: none;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fr-c2);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 6px -2px var(--fr-c2);
}
.folder-count.is-zero {
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  box-shadow: none;
}
.folder-arrow {
  flex: none;
  font-size: 17px;
  line-height: 1;
  color: var(--fr-c2);
  opacity: .5;
}

.folder-tip {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding-left: 12px;
  position: relative;
  line-height: 1.6;
}
.folder-tip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #82dcc2, #bb9bf3);
}

.folder-bar { display: flex; align-items: center; gap: 8px; }
.folder-back { font-size: 13px; color: var(--accent); text-decoration: none; }
.folder-back:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .folder-wrap { padding: 14px 14px 16px; }
  .folder-row { padding: 10px 11px; gap: 10px; }
  .folder-ico { width: 36px; height: 36px; border-radius: 11px; }
}

/* ===================== 左边栏底色选择（外观页） ===================== */
.side-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.side-pick {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.side-pick:hover { border-color: var(--accent-2); }
.side-pick.is-active {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}
.sp-box {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sp, #ffffff);
  border: 1px solid var(--border);
}
.side-pick.is-active .sp-box { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ===================== 提醒推送设置 ===================== */
.nt-sec {
  padding: 13px 0;
  border-top: 1px solid var(--border-soft);
}
.nt-sec:first-child { border-top: 0; padding-top: 0; }
.nt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13.5px;
}
.nt-state { font-size: 12px; color: var(--muted); }
.nt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nt-hint { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.65; }

/* ===================== 看板指标可点 + 下钻名单 ===================== */
.kpi { position: relative; }
.kpi.is-clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.kpi.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60, 60, 80, .16);
}
.kpi.is-clickable:active { transform: translateY(0); }
.kpi.is-clickable:focus-visible {
  outline: 2px solid rgba(0, 0, 0, .25);
  outline-offset: 2px;
}
.kpi-go {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--kpi-ink, rgba(0, 0, 0, .6));
  background: rgba(255, 255, 255, .7);
  opacity: .85;
  transition: opacity .15s, transform .15s, background .15s;
}
.kpi.is-clickable:hover .kpi-go {
  opacity: 1;
  transform: translateX(2px);
  background: #fff;
}

.kpi-list { display: flex; flex-direction: column; }
.kpi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px;
  border-top: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s;
}
.kpi-row:first-child { border-top: 0; }
.kpi-row:hover { background: var(--panel-2); }
.kpi-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-row-main b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.kpi-row-main span {
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46%;
}
.kpi-row-main i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kpi-row-sub {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.kpi-row-go {
  flex: none;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  opacity: .5;
}
@media (max-width: 820px) {
  .kpi-row { flex-wrap: wrap; gap: 4px 8px; }
  .kpi-row-sub { width: 100%; padding-left: 2px; }
}

/* ===== 管理员导出：选人弹层 ===== */
.xp-hint { font-size: 12px; margin-bottom: 10px; }
.xp-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.xp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--panel); cursor: pointer; font-size: 13.5px;
}
.xp-row:hover { border-color: var(--accent-2); }
.xp-row input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.xp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-count { flex: none; font-size: 12px; color: var(--muted); }

/* ===== 数据导出：折叠时的 6 颗小粉心 ===== */
.xh-hearts {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 0 6px; cursor: pointer; user-select: none;
}
.xh-hearts i {
  font-style: normal; font-size: 15px; line-height: 1;
  color: #e78aa4; opacity: .62;
  transition: transform .15s, opacity .15s;
}
.xh-hearts:hover i { opacity: .95; transform: scale(1.12); }

/* ===== 成员名字：鼠标移上去才出现的小铅笔 + 就地改名的输入框 ===== */
.xp-row { cursor: default; }
.xp-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.edit-ico {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.xp-row:hover .edit-ico, .ac-row:hover .edit-ico { opacity: 1; }
.edit-ico:hover { background: rgba(47, 158, 95, .22); }
.edit-ico:focus-visible { opacity: 1; outline: 2px solid var(--accent-2); outline-offset: 1px; }
.nm-input {
  width: 100%; min-width: 70px; font: inherit; font-size: 13.5px; font-weight: inherit;
  padding: 2px 7px; border: 1px solid var(--accent); border-radius: 7px;
  background: var(--panel); color: var(--text);
}
.nm-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-who b { display: flex; align-items: center; min-width: 0; }
.ac-who b .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 铅笔紧跟名字后面，别被 flex 撑到行尾 */
.xp-pick { flex: 0 1 auto; }
.xp-name { flex: 0 1 auto; }
.xp-count { margin-left: auto; }
.xp-row .edit-ico { margin-right: 2px; }
.ac-who b .nm { flex: 0 1 auto; }

/* ===== 客户分栏：侧边栏里像 Excel sheet 一样竖排 ===== */
.ns-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-set { background: #7aa7e8; }
.set-op {
  flex: none; font-style: normal; font-size: 11px; line-height: 1;
  padding: 3px 4px; border-radius: 5px; color: var(--muted);
  opacity: 0; transition: opacity .12s, background .12s;
}
.nav-subitem:hover .set-op { opacity: 1; }
.set-op:hover { background: var(--panel-3); color: var(--accent); }
.set-op.is-del:hover { color: var(--danger); }
.nav-sub-add { color: var(--muted); font-size: 12.5px; }
.nav-sub-add:hover { color: var(--accent); }

/* 分栏前面那个小图案（花/四叶草/彩虹…），一栏一个颜色 */
.set-ico {
  flex: none; width: 15px; text-align: center;
  font-size: 13px; line-height: 1;
}