/* 客户信息查重系统 - 全局样式（仅 PC 端） */
:root {
  --brand-red: #A62626;
  --brand-orange: #D98A3D;
  --bg: #F5F6F8;
  --panel: #FFFFFF;
  --text: #2B2F36;
  --text-sub: #6B7280;
  --line: #E5E7EB;
  --ok: #16794C;
  --warn: #B45309;
  --danger: #B91C1C;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-width: 1080px;
}

/* ---------- 布局 ---------- */
.topbar {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky; top: 0; z-index: 10;
}
.topbar .logo {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.topbar .title { font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.topbar .title em { font-style: normal; color: var(--brand-red); }
.topbar .spacer { flex: 1; }
.topbar .user-box { display: flex; align-items: center; gap: 10px; color: var(--text-sub); }
.topbar .user-box b { color: var(--text); font-weight: 600; }
.topbar .role-tag {
  font-size: 12px; padding: 2px 8px; border-radius: 10px;
  background: #FDF0E7; color: var(--brand-orange); border: 1px solid #F3D6BB;
}

.container { max-width: 1280px; margin: 0 auto; padding: 24px 28px 48px; }

/* ---------- 通用组件 ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.card h3 .hint { font-size: 12px; color: var(--text-sub); font-weight: 400; }

.btn {
  border: 0; border-radius: 7px; cursor: pointer;
  padding: 9px 22px; font-size: 14px; font-family: inherit;
  background: var(--brand-red); color: #fff;
  transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost {
  background: #fff; color: var(--text);
  border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: var(--brand-red); color: var(--brand-red); opacity: 1; }
.btn.sm { padding: 5px 12px; font-size: 13px; }
.btn.orange { background: var(--brand-orange); }

label.f { display: block; margin-bottom: 14px; }
label.f span { display: block; font-size: 13px; color: var(--text-sub); margin-bottom: 6px; }
label.f input, label.f select, label.f textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; background: #fff;
}
label.f input:focus, label.f select:focus, label.f textarea:focus {
  outline: none; border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(166,38,38,.08);
}
textarea {
  resize: vertical; min-height: 200px; line-height: 1.9;
  font-family: "SF Mono", Consolas, monospace; font-size: 13px !important;
}

table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; vertical-align: middle;
}
table.grid th { color: var(--text-sub); font-weight: 500; background: #FAFBFC; }
table.grid tr:last-child td { border-bottom: 0; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.badge.dup  { background: #FDECEC; color: var(--danger); border: 1px solid #F5C6C6; }
.badge.clean{ background: #E8F5EE; color: var(--ok); border: 1px solid #C4E5D2; }
.badge.gray { background: #F3F4F6; color: var(--text-sub); border: 1px solid var(--line); }

.toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  background: #2B2F36; color: #fff; padding: 10px 22px; border-radius: 8px;
  font-size: 13px; z-index: 99; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.toast.show { opacity: .95; }
.toast.err { background: var(--danger); }

.tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; padding: 10px 18px; color: var(--text-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--brand-red); font-weight: 600; border-bottom-color: var(--brand-red); }

.empty { color: var(--text-sub); text-align: center; padding: 26px 0; font-size: 13px; }
.loading { text-align: center; padding: 40px 0; color: var(--text-sub); }
.loading .spin {
  display: inline-block; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand-red);
  animation: spin .8s linear infinite; vertical-align: middle; margin-right: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.note {
  background: #FFFAF3; border: 1px solid #F3D6BB; color: var(--warn);
  border-radius: 7px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}
.note.alert { background: #FDECEC; border-color: #F5C6C6; color: var(--danger); }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(600px 300px at 15% 10%, rgba(217,138,61,.10), transparent),
    radial-gradient(700px 400px at 85% 90%, rgba(166,38,38,.08), transparent),
    var(--bg);
}
.login-card {
  width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 40px 38px; box-shadow: 0 8px 30px rgba(16,24,40,.07);
}
.login-card .logo {
  width: 52px; height: 52px; border-radius: 12px; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  color: #fff; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.login-card h1 { text-align: center; font-size: 20px; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--text-sub); font-size: 13px; margin-bottom: 28px; }
.login-card .btn { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; }
.login-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 10px; text-align: center; }

/* ---------- 查重页 ---------- */
.query-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.result-line { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.result-line.dup { border-color: #F5C6C6; background: #FFFBFB; }
.result-line .line-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.result-line .line-head code {
  font-family: "SF Mono", Consolas, monospace; font-size: 13px; font-weight: 600;
}

/* 单行结果：不换行，超宽横向滚动 */
.hit-line {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; overflow-x: auto;
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px; padding: 8px 14px; margin-top: 8px;
  font-size: 13px;
}
.hit-line:has(.badge.dup) { border-left-color: var(--brand-red); background: #FFFBFB; }
.hit-line code {
  font-family: "SF Mono", Consolas, monospace; font-size: 13px; font-weight: 600;
  flex: 0 0 auto;
}
.hit-line .badge { flex: 0 0 auto; }
.hit-line .hit-text { flex: 0 0 auto; color: var(--text-sub); }
.hit-line .hit-text .tbl { font-weight: 600; color: var(--brand-red); }
.hit-line .hit-text b { color: var(--text); }
.hit-line .hit-text .nul { color: var(--warn); font-weight: 600; }
.hit {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand-red);
  border-radius: 6px; padding: 9px 14px; margin-top: 8px; font-size: 13px;
}
.hit .tbl { font-weight: 600; color: var(--brand-red); }
.hit .sales { margin-top: 4px; color: var(--text-sub); }
.hit .sales b { color: var(--text); }
.hit .sales .nul { color: var(--warn); }
.stat-bar { display: flex; gap: 14px; margin: 4px 0 16px; flex-wrap: wrap; }
.stat-chip {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 18px; font-size: 13px; color: var(--text-sub);
}
.stat-chip b { font-size: 16px; margin-left: 6px; color: var(--text); }
.stat-chip.hot b { color: var(--danger); }

.legend { font-size: 12px; color: var(--text-sub); margin-top: 4px; line-height: 1.8; }

.muted { color: var(--text-sub); font-size: 12px; }
.mt16 { margin-top: 16px; }
.row { display: flex; gap: 14px; }
.row > * { flex: 1; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }