/* RUI AN 线索工作台
   layout: 左侧导航 + 顶部玻璃搜索栏 + 内容区；详情为右侧抽屉；手机为底部标签栏 + 全屏抽屉 */
:root {
  --ink: #0B3B4F;          /* 深墨蓝绿 主色 */
  --ink-80: #2C5566;
  --ink-20: #C9D8DE;
  --aqua: #2BA9C4;         /* 清水蓝 辅色 */
  --aqua-soft: #E3F4F8;
  --mist: #F5F9FA;         /* 雾白 底 */
  --mint: #4FC3A1;         /* 薄荷绿 点缀 */
  --mint-soft: #E2F5EF;
  --card: #FFFFFF;
  --line: #DFE9ED;
  --line-2: #EDF3F5;
  --text: #12313D;
  --muted: #5F7A85;
  --warn: #D97B23;  --warn-soft: #FCEEDF;
  --ok: #23905F;    --ok-soft: #E1F3EA;
  --danger: #C2452D; --danger-soft: #FBE7E2;
  /* 渠道 */
  --c-gmaps: #2F9A5F; --c-gmaps-soft: #E2F3E8;
  --c-tiktok: #13252D; --c-tiktok-ink: #49DADA;
  --c-expo: #E08A2E;  --c-expo-soft: #FCEEDB;
  --c-shopee: #E2532D; --c-shopee-soft: #FCE5DE;
  --c-ig: #B23E7E;    --c-ig-soft: #F8E4EF;
  --c-other: #8DA4AE;
  --font: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --r: 16px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(11, 59, 79, .04), 0 10px 28px -16px rgba(11, 59, 79, .16);
  --side: 236px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 400 14px/1.55 var(--font); color: var(--text); background-color: var(--mist);
  /* 水波纹几何纹理，约 4% 透明度 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%230B3B4F' stroke-opacity='.045' stroke-width='1.2'%3E%3Ccircle cx='70' cy='70' r='18'/%3E%3Ccircle cx='70' cy='70' r='34'/%3E%3Ccircle cx='70' cy='70' r='52'/%3E%3Cpath d='M0 200c23 0 23-12 46-12s23 12 46 12 23-12 46-12 23 12 46 12 23-12 46-12 23 12 46 12'/%3E%3Cpath d='M0 222c23 0 23-12 46-12s23 12 46 12 23-12 46-12 23 12 46 12 23-12 46-12 23 12 46 12'/%3E%3Cpath d='M210 96c6 7 11 13 11 19a11 11 0 0 1-22 0c0-6 5-12 11-19Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; color: var(--ink); letter-spacing: -.01em; }
a { color: var(--aqua); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 6px; }
code { font-size: 12px; background: var(--line-2); padding: 1px 5px; border-radius: 5px; }
.ic { width: 18px; height: 18px; flex-shrink: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.c-warn { color: var(--warn) !important; } .c-ok { color: var(--ok); } .c-aqua { color: var(--aqua); }
.pad { padding: 16px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------- 按钮与表单 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; text-decoration: none !important;
}
.btn:hover { border-color: var(--aqua); box-shadow: 0 2px 10px -6px rgba(43, 169, 196, .6); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #0E4A62; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--line-2); color: var(--ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.wa { background: #1FA855; border-color: #1FA855; color: #fff; }
.btn.wa:hover { background: #17964A; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn.more { display: flex; margin: 14px auto 0; }
.btn .ic { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm .ic { width: 15px; height: 15px; }
.link-btn { border: 0; background: none; color: var(--aqua); cursor: pointer; padding: 0; font-weight: 500; }
.link-btn:hover { text-decoration: underline; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0 11px; min-width: 0; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(43, 169, 196, .15); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid.three { grid-template-columns: 2fr 1fr 1fr; }
.form-grid .full, .form-grid h2 { grid-column: 1 / -1; }
.form-grid h2 { font-size: 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.form-grid h2:first-child { margin-top: 0; padding-top: 0; border: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; user-select: none; }
.switch input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: var(--ink-20); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--aqua); }
.switch input:checked::after { transform: translateX(14px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chips label { position: relative; font-size: 13px; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--line); cursor: pointer; background: var(--card); transition: all .15s; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips.multi label:has(input:checked) { background: var(--aqua-soft); border-color: var(--aqua); color: var(--ink); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 1px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick button { font-size: 12px; border: 1px dashed var(--ink-20); background: transparent; border-radius: 7px; padding: 3px 9px; color: var(--muted); cursor: pointer; }
.quick button:hover { border-color: var(--aqua); color: var(--ink); border-style: solid; }
.seg { display: inline-flex; padding: 3px; background: var(--line-2); border-radius: 11px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 13px; }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(11, 59, 79, .12); }
.seg.wide { display: flex; margin-bottom: 18px; }
.seg.wide button { flex: 1; }
.hint { display: flex; gap: 8px; align-items: flex-start; background: var(--aqua-soft); color: var(--ink-80); padding: 10px 12px; border-radius: 12px; font-size: 13px; margin: 0 0 14px; }
.hint .ic { color: var(--aqua); margin-top: 1px; }
.warn { background: var(--warn-soft); color: #8A4A10; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 12px; }

/* ---------------- 标签 ---------------- */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--line-2); color: var(--muted); }
.src-google_maps { background: var(--c-gmaps-soft); color: var(--c-gmaps); }
.src-tiktok { background: var(--c-tiktok); color: var(--c-tiktok-ink); }
.src-instagram { background: var(--c-ig-soft); color: var(--c-ig); }
.src-tokopedia_shopee { background: var(--c-shopee-soft); color: var(--c-shopee); }
.src-exhibition { background: var(--c-expo-soft); color: #B4661A; }
.src-referral, .src-manual { background: var(--line-2); color: var(--ink-80); }
.src-website, .src-whatsapp { background: var(--mint-soft); color: #1F8664; }
.st-pending { background: #ECEFF1; color: #5B6B72; }
.st-unclaimed { background: #E2EEFB; color: #2563A8; }
.st-claimed, .st-following { background: var(--aqua-soft); color: #1A7D93; }
.st-quoted { background: #E7E9FB; color: #4651A8; }
.st-sampling { background: var(--mint-soft); color: #1F8664; }
.st-overdue { background: var(--warn-soft); color: #B35F12; }
.st-won { background: var(--ok); color: #fff; }
.st-lost { background: #EEF1F2; color: #8A9AA0; text-decoration: line-through; }
.st-invalid, .st-duplicate { background: #F2F4F5; color: #9AA8AE; }
.st-suspect { background: #FFF4D6; color: #8A6A00; margin-left: 4px; }
.ts-queued { background: #ECEFF1; color: #5B6B72; } .ts-running { background: var(--aqua-soft); color: #1A7D93; }
.ts-paused { background: var(--warn-soft); color: #B35F12; } .ts-done { background: var(--ok-soft); color: var(--ok); } .ts-failed { background: var(--danger-soft); color: var(--danger); }
.lg-claim { background: var(--aqua-soft); color: #1A7D93; } .lg-release, .lg-auto_release { background: var(--warn-soft); color: #B35F12; }
.lg-reassign { background: #E7E9FB; color: #4651A8; } .lg-review { background: var(--ok-soft); color: var(--ok); } .lg-invalidate { background: #F2F4F5; color: #7D8C92; }
.grade { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.g-A { background: var(--ink); color: #fff; } .g-B { background: var(--aqua-soft); color: var(--ink); } .g-C { background: var(--line-2); color: var(--muted); }
.g-none { color: var(--ink-20); }

/* ---------------- 框架 ---------------- */
.app { display: grid; grid-template-columns: var(--side) 1fr; grid-template-rows: 60px 1fr; min-height: 100vh; }
.side { grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; padding: 2px 6px 18px; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand b { display: block; color: var(--ink); font-weight: 700; letter-spacing: .06em; font-size: 15px; line-height: 1.1; }
.brand span { font-size: 12px; color: var(--muted); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a, .sheet a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink-80); font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.side nav a:hover, .sheet a:hover { background: var(--line-2); text-decoration: none; }
.side nav a.active { background: var(--ink); color: #fff; }
.side nav a.active .ic { color: var(--aqua); }
.side nav a span { flex: 1; }
.nb { font-style: normal; font-size: 11px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: grid; place-items: center; background: var(--line-2); color: var(--muted); }
.nb:empty { display: none; }
.nb.hot { background: var(--warn); color: #fff; }
.side nav a.active .nb { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-sec { font-size: 11px; color: var(--muted); letter-spacing: .08em; padding: 16px 10px 6px; }
.side-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line-2); line-height: 1.6; }
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(245, 249, 250, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.gsearch { flex: 1; max-width: 520px; position: relative; }
.gsearch .ic, .f-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.gsearch input, .f-search input { padding-left: 36px !important; background: rgba(255, 255, 255, .9) !important; }
.avatar { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--card); background: linear-gradient(135deg, var(--aqua), var(--ink)); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.menu { position: absolute; right: 24px; top: 54px; width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 20; }
.menu-h { padding: 10px 10px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu a, .menu button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 8px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--line-2); }
.main { padding: 26px 28px 60px; min-width: 0; outline: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 640px; }
.page-actions { display: flex; gap: 8px; align-items: center; }
.tabbar, .m-only { display: none; }

/* ---------------- 面板 / 卡片 ---------------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-h h2 { font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i l" "n n" "s s"; gap: 2px 8px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: border-color .15s, transform .15s; }
a.kpi[href]:hover { border-color: var(--aqua); transform: translateY(-1px); }
.kpi .ic { grid-area: i; color: var(--aqua); width: 16px; height: 16px; }
.kpi-l { grid-area: l; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi-n { grid-area: n; font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.kpi-sub { grid-area: s; font-size: 12px; color: var(--warn); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.span2 { grid-column: span 2; }
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.rates { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.rate { display: flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.rate b { color: var(--ink); font-weight: 600; min-width: 90px; }
.dotc { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dotc.c-warn { background: var(--warn); } .dotc.c-aqua { background: var(--aqua); } .dotc.c-muted { background: var(--ink-20); }

/* ---------------- 筛选 ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.f-search { position: relative; flex: 1 1 280px; }
.f-toggle { display: none; }
.badge { background: var(--aqua); color: #fff; border-radius: 9px; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; }
.f-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 100%; }
.f-more select { width: auto; max-width: 190px; height: 34px; font-size: 13px; }
.f-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.f-date input { width: 140px; height: 34px; font-size: 13px; }

/* ---------------- 线索表 ---------------- */
.ltable { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.lrow { display: grid; grid-template-columns: minmax(180px, 2fr) 150px 104px minmax(150px, 1.4fr) minmax(110px, 1fr) 30px 118px 72px 100px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line-2); cursor: pointer; transition: background .12s; position: relative; }
.has-sel .lrow { grid-template-columns: 24px minmax(180px, 2fr) 150px 104px minmax(150px, 1.4fr) minmax(110px, 1fr) 30px 118px 72px 100px; }
.lrow:hover { background: #F8FBFC; }
.lrow.is-overdue::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }
.lhead { cursor: default; border-top: 0; background: var(--mist); font-size: 12px; color: var(--muted); font-weight: 500; padding-top: 9px; padding-bottom: 9px; }
.lhead:hover { background: var(--mist); }
.lrow > div { min-width: 0; }
.c-main b { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-main span { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-phone { font-size: 13px; color: var(--ink-80); }
.c-src { display: flex; align-items: center; gap: 6px; }
.c-src .ref { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-link { display: inline-grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.src-link:hover { color: var(--aqua); }
.src-link .ic { width: 15px; height: 15px; }
.c-type { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-status { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.c-status .reason { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-time { font-size: 12.5px; text-align: right; }
.c-act { text-align: right; }
.owner-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); max-width: 100%; overflow: hidden; white-space: nowrap; }
.owner-chip .ic { width: 14px; height: 14px; }
.owner-chip.me { color: var(--aqua); font-weight: 600; }
.cb { display: grid; place-items: center; }
.cb input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.bulk { position: sticky; top: 70px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow); animation: pop .2s ease-out; }
.bulk span { flex: 1; font-weight: 500; }
.bulk .btn:not(.primary) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.bulk .btn.primary { background: var(--aqua); border-color: var(--aqua); }

/* 认领成功动效 */
.claimed-anim { position: relative; background: var(--mint) !important; border-color: var(--mint) !important; color: #fff !important; overflow: visible; animation: pop .35s ease-out; }
.claimed-anim::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--mint); animation: ripple .7s ease-out forwards; }
@keyframes ripple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------------- 骨架屏 / 空状态 ---------------- */
.skel-list { display: flex; flex-direction: column; gap: 10px; }
.skel { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--line-2) 0%, #F9FCFD 50%, var(--line-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.skel i:nth-child(1) { width: 42%; height: 12px; } .skel i:nth-child(2) { width: 76%; } .skel i:nth-child(3) { width: 58%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty { text-align: center; padding: 44px 20px; background: rgba(255,255,255,.7); border: 1px dashed var(--ink-20); border-radius: var(--r); }
.empty-art { width: 140px; height: 105px; margin-bottom: 6px; }
.empty h3 { font-size: 16px; margin-bottom: 6px; }
.empty p { color: var(--muted); max-width: 420px; margin: 0 auto 16px; }

/* ---------------- Toast / 弹窗 ---------------- */
#toasts { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px -10px rgba(11,59,79,.5); font-weight: 500; max-width: 92vw; animation: tin .25s ease-out; pointer-events: auto; }
.toast.ok .ic { color: var(--mint); }
.toast.err { background: var(--danger); }
.toast.out { opacity: 0; transform: translateY(6px); transition: all .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(8, 34, 46, .38); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: var(--card); border-radius: 18px; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; box-shadow: 0 30px 60px -20px rgba(8, 34, 46, .4); animation: pop .2s ease-out; }
.modal.wide { width: min(760px, 100%); }
.modal h2 { font-size: 17px; margin-bottom: 8px; }
.modal .field { margin-top: 10px; }
.modal .form-grid .field { margin-top: 0; }
@keyframes fade { from { opacity: 0; } }

/* ---------------- 抽屉 ---------------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 34, 46, .28); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: var(--mist); border-left: 1px solid var(--line); box-shadow: -20px 0 50px -20px rgba(8, 34, 46, .3); transform: translateX(104%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.dr-head { display: flex; gap: 10px; align-items: flex-start; padding: 18px 20px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.dr-title { flex: 1; min-width: 0; }
.dr-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
.dr-head h2 { font-size: 19px; overflow-wrap: anywhere; }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 12px; }
.dr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dr-actions .btn.primary { flex: 1 1 auto; }
.card-s { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.sec-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); margin-bottom: 10px; cursor: default; }
.sec-title .link-btn { margin-left: auto; font-size: 13px; }
summary.sec-title { cursor: pointer; margin: 0; }
details[open] summary.sec-title { margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.kv > span { color: var(--muted); font-size: 12.5px; }
.kv > b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.kv a { display: inline-flex; align-items: center; gap: 4px; }
.kv a .ic { width: 14px; height: 14px; }
.lock-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.lock-note .ic { width: 14px; height: 14px; }
.wa-box .seg { margin-bottom: 10px; }
.wa-box .sec-title .ic { color: #1FA855; }
.ff-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#ff textarea { margin-bottom: 4px; }
#ff .field { margin-top: 10px; }
.raw summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.raw pre { font-size: 11.5px; background: var(--mist); padding: 10px; border-radius: 10px; overflow: auto; max-height: 220px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 14px; position: relative; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1.5px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.dot { width: 13px; height: 13px; border-radius: 50%; margin-top: 4px; border: 3px solid var(--aqua); background: var(--card); }
.k-quote { border-color: #4651A8; } .k-sample { border-color: var(--mint); } .k-call, .k-visit { border-color: var(--ink); } .k-log { border-color: var(--ink-20); width: 11px; height: 11px; margin-left: 1px; }
.tl-top { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.tl-top b { color: var(--ink); font-weight: 600; }
.tl-extra { font-size: 12.5px; color: var(--ink-80); background: var(--mist); border-radius: 8px; padding: 4px 8px; margin-top: 4px; display: inline-block; }
.tl-next { font-size: 12px; color: var(--aqua); margin-top: 3px; }

/* ---------------- 今日待办 ---------------- */
.todo-sec { margin-bottom: 22px; }
.sec-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.sec-h .muted { font-weight: 400; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.todo-card, .kcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; position: relative; min-width: 0; }
.todo-card:hover, .kcard:hover { border-color: var(--aqua); transform: translateY(-1px); box-shadow: var(--shadow); }
.todo-card.is-overdue, .kcard.is-overdue { border-left: 3px solid var(--warn); }
.tc-top { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; }
.tc-due { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--aqua); }
.todo-card h3, .kcard h3 { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-card p, .kcard p { margin: 3px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kcard p .ic, .todo-card p .ic { width: 14px; height: 14px; }
.tc-act { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }

/* ---------------- 看板 ---------------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.col { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-height: 200px; }
.col-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.col-b { display: flex; flex-direction: column; gap: 8px; min-height: 120px; border-radius: 12px; transition: background .15s; }
.col-b.over { background: var(--aqua-soft); outline: 2px dashed var(--aqua); outline-offset: 2px; }
.col-b .skel { padding: 10px; }
.kcard { padding: 12px; }
.kcard.dragging { opacity: .5; }
.col-empty { text-align: center; color: var(--ink-20); font-size: 12.5px; padding: 30px 0; margin: 0; }

/* ---------------- 导入 ---------------- */
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-bottom: 16px; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 16px; margin-top: 14px; border: 1.5px dashed var(--ink-20); border-radius: var(--r); background: var(--mist); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--aqua); background: var(--aqua-soft); }
.drop.small { padding: 18px 12px; margin-top: 0; }
.drop.busy { opacity: .6; pointer-events: none; }
.drop .ic { width: 26px; height: 26px; color: var(--aqua); }
.drop input { display: none; }
.stage { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--mist); animation: fade .2s; }
.stage.done { background: var(--card); border-color: var(--mint); }
.stage-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.stage-h b { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.stage-h .ic { color: var(--mint); }
.progress { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--mint)); border-radius: 8px; transition: width .3s; }
.report-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rc { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--line-2); font-size: 13px; color: var(--muted); }
.rc b { font-size: 18px; color: var(--ink); }
.rc.ok { background: var(--ok-soft); } .rc.ok b { color: var(--ok); }
.rc.warn { background: var(--warn-soft); } .rc.warn b { color: var(--warn); }
.report-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-height: 420px; overflow-y: auto; }
.report-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { position: sticky; top: 0; background: var(--mist); text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 10px; white-space: nowrap; }
.report-table td { padding: 8px 10px; border-top: 1px solid var(--line-2); vertical-align: top; }
.report-table td.num { text-align: right; }
.report-table tr.muted td { color: var(--muted); }
.t-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.map-grid select { height: 34px; font-size: 13px; }
.expo-ways { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin-top: 16px; }
.way { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; background: var(--mist); display: flex; flex-direction: column; gap: 10px; }
.way h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.way h3 .ic { color: var(--aqua); }
.mini-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mini-list li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-2); }
.batch-list { list-style: none; margin: 0; padding: 0; }
.batch-list li { padding: 10px 6px; border-top: 1px solid var(--line-2); cursor: pointer; border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
.batch-list li:first-child { border-top: 0; }
.batch-list li:hover { background: var(--mist); }
.batch-list b { font-weight: 500; font-size: 13px; }
.bstats { display: flex; gap: 10px; font-size: 12px; }
.steps { color: var(--ink-80); line-height: 1.8; margin: 16px 0 0; }
.tips { padding-left: 18px; margin: 0; line-height: 1.7; }
.tool { padding: 12px 0; border-top: 1px solid var(--line-2); }
.tool:first-of-type { border-top: 0; padding-top: 0; }
.tool p { margin: 4px 0 10px; }

/* ---------------- 登录 ---------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: min(400px, 100%); background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; box-shadow: var(--shadow); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.auth-brand .brand-mark { width: 44px; height: 44px; }
.auth-brand b { display: block; font-size: 18px; letter-spacing: .08em; color: var(--ink); }
.auth-brand span { color: var(--muted); font-size: 13px; }
.auth h1 { font-size: 22px; }
.auth form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.auth .btn { height: 42px; margin-top: 6px; }
.auth-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0; }

/* ---------------- 手机 ---------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(8, 34, 46, .35); display: flex; align-items: flex-end; animation: fade .15s; }
.sheet { width: 100%; background: var(--card); border-radius: 20px 20px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(40px); } }
.sheet .btn { margin-top: 8px; }

@media (max-width: 1380px) {
  .lrow, .has-sel .lrow { grid-template-columns: minmax(160px, 2fr) 140px 90px minmax(120px, 1.2fr) 30px 110px 96px; }
  .has-sel .lrow { grid-template-columns: 24px minmax(160px, 2fr) 140px 90px minmax(120px, 1.2fr) 30px 110px 96px; }
  .lrow .c-type, .lrow .c-time { display: none; }
  .import-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .side { display: none; }
  .m-only { display: flex; }
  .top { padding: 0 12px; gap: 10px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .top .brand { padding: 0; }
  .brand-mark { width: 32px; height: 32px; }
  .menu { right: 10px; }
  .main { padding: 16px 14px calc(90px + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: 14px; align-items: flex-start; }
  .page-head h1 { font-size: 20px; }
  .page-head p { font-size: 13px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; font-size: 11px; color: var(--muted); border: 0; background: none; text-decoration: none !important; font-weight: 500; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--ink); }
  .tabbar a.active .ic { color: var(--aqua); }
  .tabbar .nb { position: absolute; top: 0; left: 52%; height: 16px; min-width: 16px; font-size: 10px; padding: 0 4px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-n { font-size: 22px; }
  .dash-grid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .panel { padding: 14px; }
  .chart-box.tall { height: 280px; }
  .f-toggle { display: inline-flex; }
  .filters .f-more { display: none; }
  .filters.open .f-more { display: grid; grid-template-columns: 1fr 1fr; }
  .f-more select, .f-date input { max-width: none; width: 100%; }
  .f-date { flex-direction: column; align-items: stretch; gap: 2px; }
  /* 线索行 → 卡片 */
  .ltable { background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 10px; overflow: visible; }
  .lhead { display: none !important; }
  .lrow, .has-sel .lrow { grid-template-columns: 1fr auto; grid-template-areas: "main act" "phone grade" "src src" "status time"; gap: 6px 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
  .has-sel .lrow { grid-template-columns: 24px 1fr auto; grid-template-areas: "cb main act" "cb phone grade" "cb src src" "cb status time"; }
  .lrow .cb { grid-area: cb; align-self: start; padding-top: 2px; }
  .lrow .c-main { grid-area: main; } .lrow .c-act { grid-area: act; align-self: start; }
  .lrow .c-phone { grid-area: phone; } .lrow .c-grade { grid-area: grade; text-align: right; }
  .lrow .c-src { grid-area: src; } .lrow .c-status { grid-area: status; }
  .lrow .c-time { grid-area: time; display: block; }
  .lrow .c-city { display: none; } .lrow .c-type { display: none; }
  .lrow .c-main b { white-space: normal; }
  .bulk { top: 64px; }
  .board { grid-template-columns: repeat(6, 82vw); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 10px; }
  .col { scroll-snap-align: start; }
  .form-grid, .form-grid.three, .grid2, .ff-extra, .expo-ways { grid-template-columns: 1fr; }
  .drawer { width: 100%; border-left: 0; }
  .dr-head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .dr-body { padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); }
  .kv { grid-template-columns: 72px 1fr auto; }
  #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .seg.wide button { padding: 6px 4px; font-size: 12.5px; }
  .gsearch input { height: 36px; }
  .todo-grid { grid-template-columns: 1fr; }
  .modal { padding: 18px; }
}
#lg .report-table, #ml .report-table { max-height: none; }
.lang-switch { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.lang-switch button { border: 1px solid var(--line); background: transparent; border-radius: 20px; padding: 4px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------- 第二版：报价/订单/客户/规则 ---------------- */
.items { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0; }
.it-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px 120px 30px; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line-2); }
.it-row:first-child { border-top: 0; }
.it-row:has(select + input) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px 120px 110px 30px; }
.it-head { background: var(--mist); font-size: 12px; color: var(--muted); font-weight: 500; padding-top: 6px; padding-bottom: 6px; }
.it-row input, .it-row select { height: 34px; font-size: 13px; }
.it-qty { display: flex; align-items: center; gap: 4px; }
.it-qty small { color: var(--muted); white-space: nowrap; }
.it-sub { text-align: right; font-size: 13px; color: var(--ink); }
.it-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--mist); border-top: 1px solid var(--line); }
.it-foot b { font-size: 16px; color: var(--ink); margin-left: 6px; }
.link-btn .ic { width: 15px; height: 15px; vertical-align: -3px; }
.qprev summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 10px; }
.qprev pre { white-space: pre-wrap; font: 13px/1.5 var(--font); background: var(--mist); border-radius: 10px; padding: 12px; }
.modal h2 { display: flex; align-items: center; gap: 8px; }
.quicklog { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.money { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.money b { color: var(--ink); }
.orders { list-style: none; margin: 0; padding: 0; }
.orders li { padding: 8px 0; border-top: 1px solid var(--line-2); }
.orders li:first-child { border-top: 0; padding-top: 0; }
.sec-title .ic { color: var(--aqua); }
.phone-hint { font-size: 12.5px; min-height: 0; }
.phone-hint.ok { color: var(--ok); } .phone-hint.warn { color: #B35F12; font-weight: 600; } .phone-hint.bad { color: var(--danger); }
.rule-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.rule-form select, .rule-form input { width: auto; min-width: 140px; }
.rule-form .chips { margin: 0; }
.tgt { width: 130px !important; height: 32px !important; font-size: 13px; text-align: right; }
.bar { display: inline-block; width: 60px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; vertical-align: middle; margin-right: 4px; }
.bar i { display: block; height: 100%; background: var(--mint); }
.report-table.flat { max-height: none; margin-top: 14px; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: #F8FBFC; }
.dotc.c-mint { background: var(--mint); }
.bulk select { width: auto; height: 30px; font-size: 13px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.bulk select option { color: var(--text); }
#rules { margin-top: 16px; }
@media (max-width: 760px) {
  .it-row, .it-row:has(select + input) { grid-template-columns: 1fr 1fr; }
  .it-row > select, .it-row > input[data-k="name"] { grid-column: 1 / -1; }
  .it-head { display: none; }
  .it-sub { text-align: left; }
  .bulk { flex-wrap: wrap; }
}