/* ==========================================================================
   考古加 (Kaogujia) SaaS Style Design System
   1:1 Pixel-Level Faithful Reproduction + Integrated CRM Workflow
   ========================================================================== */

:root {
  --kgj-bg: #f4f6fa;
  --kgj-surface: #ffffff;
  --kgj-border: #eaedf2;
  --kgj-border-light: #f2f3f5;
  --kgj-divider: #e5e6eb;

  /* Brand & Status Colors */
  --kgj-primary: #1e80ff;
  --kgj-primary-hover: #1171ee;
  --kgj-primary-light: #e8f3ff;
  --kgj-text-main: #1d2129;
  --kgj-text-secondary: #4e5969;
  --kgj-text-muted: #86909c;
  --kgj-text-placeholder: #c9cdd4;

  /* Accents matching Screenshot */
  --kgj-red: #f53f3f;
  --kgj-red-bg: #ffece8;
  --kgj-orange: #ff7d00;
  --kgj-orange-bg: #fff7e8;
  --kgj-green: #00b42a;
  --kgj-green-bg: #e8ffea;
  --kgj-purple: #722ed1;
  --kgj-purple-bg: #f9f0ff;
  --kgj-blue-tag-bg: #e8f3ff;
  --kgj-blue-tag-text: #1e80ff;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12);
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.kaogujia-theme {
  font-family: var(--font-family);
  background-color: var(--kgj-bg);
  color: var(--kgj-text-main);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Header Navbar
   ========================================================================== */
.kgj-header {
  height: 56px;
  background: var(--kgj-surface);
  border-bottom: 1px solid var(--kgj-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-badge {
  background: var(--kgj-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.brand-title h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--kgj-text-main);
  letter-spacing: -0.2px;
}
.brand-title span {
  font-size: 11px;
  color: var(--kgj-primary);
  background: var(--kgj-primary-light);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  margin-left: 4px;
  font-weight: 600;
}

/* Navigation Tabs */
.view-switch-tabs {
  display: flex;
  align-items: center;
  background: #f2f3f5;
  padding: 3px;
  border-radius: var(--radius-md);
  margin-left: 12px;
}
.v-tab {
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--kgj-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.v-tab:hover {
  color: var(--kgj-text-main);
}
.v-tab.active {
  background: var(--kgj-surface);
  color: var(--kgj-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Header KPI Ribbon */
.header-center-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f7f8fa;
  padding: 6px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--kgj-border);
}
.kpi-mini-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-label {
  font-size: 11px;
  color: var(--kgj-text-muted);
}
.kpi-val {
  font-size: 15px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, text-shadow 0.25s ease;
}
.kpi-val.kpi-updated {
  transform: scale(1.35);
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.45);
}
.kpi-divider {
  width: 1px;
  height: 14px;
  background: var(--kgj-divider);
}

.text-blue { color: var(--kgj-primary) !important; }
.text-orange { color: var(--kgj-orange) !important; }
.text-green { color: var(--kgj-green) !important; }
.text-purple { color: var(--kgj-purple) !important; }
.text-red { color: var(--kgj-red) !important; }

/* Buttons */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kgj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.kgj-btn-default {
  background: var(--kgj-surface);
  border-color: var(--kgj-border);
  color: var(--kgj-text-main);
}
.kgj-btn-default:hover {
  background: #f7f8fa;
  border-color: #c9cdd4;
}
.kgj-btn-primary {
  background: var(--kgj-primary);
  color: white;
}
.kgj-btn-primary:hover {
  background: var(--kgj-primary-hover);
}
.kgj-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kgj-btn-export {
  background: #4f46e5;
  color: white;
}
.kgj-btn-export:hover {
  background: #4338ca;
}
.kgj-btn-small {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: var(--radius-xs);
  background: var(--kgj-primary-light);
  color: var(--kgj-primary);
  border: 1px solid rgba(30, 128, 255, 0.25);
  cursor: pointer;
}
.kgj-btn-small:hover {
  background: var(--kgj-primary);
  color: white;
}

/* ==========================================================================
   Page Body & Multi-Dimensional Filter Panel (1:1 还原截图)
   ========================================================================== */
.page-body {
  padding: 16px 20px 40px 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.filter-panel {
  background: var(--kgj-surface);
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.row-label {
  width: 64px;
  min-width: 64px;
  font-size: 12px;
  color: var(--kgj-text-muted);
  font-weight: 500;
  line-height: 26px;
  text-align: right;
}

/* Row 1: Category Tag Stream (1:1 还原) */
.category-tags-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1;
}
.tag-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--kgj-text-secondary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.tag-pill:hover {
  color: var(--kgj-primary);
}
.tag-pill.active {
  background: var(--kgj-blue-tag-bg);
  color: var(--kgj-blue-tag-text);
  font-weight: 600;
}
.search-category-btn {
  position: relative;
  margin-left: 4px;
}
.search-category-btn input {
  height: 24px;
  width: 105px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  outline: none;
  color: var(--kgj-text-main);
}
.search-category-btn input:focus {
  border-color: var(--kgj-primary);
}

/* Rows 2 & 3: Filter Controls */
.filter-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kgj-select {
  height: 28px;
  padding: 0 24px 0 10px;
  font-size: 12px;
  color: var(--kgj-text-secondary);
  background: var(--kgj-surface);
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}
.kgj-select:hover, .kgj-select:focus {
  border-color: var(--kgj-primary);
}

.range-input-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--kgj-surface);
  font-size: 12px;
  color: var(--kgj-text-secondary);
}
.range-label {
  margin-right: 2px;
}
.range-input-group input {
  width: 55px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  outline: none;
  font-size: 12px;
  color: var(--kgj-text-main);
}
.range-input-group input:focus {
  border-color: var(--kgj-primary);
}
.range-input-group input.kgj-date-picker {
  width: 112px;
  font-size: 11px;
  cursor: pointer;
  color: var(--kgj-text-secondary);
  padding: 0 4px;
}
.range-input-group input.kgj-date-picker:focus {
  border-color: var(--kgj-primary);
  color: var(--kgj-text-main);
}
.dash {
  color: var(--kgj-text-muted);
}
.unit {
  color: var(--kgj-text-muted);
}

/* Checkbox */
.kgj-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--kgj-text-secondary);
  cursor: pointer;
  margin-left: 6px;
}
.kgj-checkbox input {
  accent-color: var(--kgj-primary);
  cursor: pointer;
}

/* Row 4: 带货类型 & 时间胶囊 */
.row-flex-between {
  justify-content: space-between;
  align-items: center;
}
.row-left-combo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill-btn {
  padding: 3px 12px;
  font-size: 12px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--kgj-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill-btn:hover {
  color: var(--kgj-primary);
}
.pill-btn.active {
  background: var(--kgj-blue-tag-bg);
  color: var(--kgj-blue-tag-text);
  font-weight: 600;
}

.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }

.select-crm {
  border-color: rgba(30, 128, 255, 0.35);
  font-weight: 500;
  color: var(--kgj-primary);
}

.kgj-search-inline {
  position: relative;
  display: flex;
  align-items: center;
}
.kgj-search-inline input {
  height: 28px;
  width: 210px;
  padding: 0 24px 0 10px;
  font-size: 12px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  outline: none;
}
.kgj-search-inline input:focus {
  border-color: var(--kgj-primary);
}
.kgj-search-inline button {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--kgj-text-muted);
  cursor: pointer;
  font-size: 11px;
}

.time-range-group {
  display: inline-flex;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.time-btn {
  border: none;
  background: var(--kgj-surface);
  color: var(--kgj-text-secondary);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--kgj-border);
}
.time-btn:last-child {
  border-right: none;
}
.time-btn:hover {
  color: var(--kgj-primary);
}
.time-btn.active {
  background: var(--kgj-primary-light);
  color: var(--kgj-primary);
  font-weight: 600;
}

/* ==========================================================================
   Content Panel & Kaogujia Data Table
   ========================================================================== */
.content-panel {
  background: var(--kgj-surface);
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.list-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--kgj-border);
}
.list-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-title h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--kgj-text-main);
}
.count-tag {
  font-size: 11px;
  color: var(--kgj-text-muted);
  background: #f2f3f5;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.list-tips-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.disclaimer {
  font-size: 11px;
  color: var(--kgj-text-muted);
}
.btn-config-cols {
  border: none;
  background: transparent;
  color: var(--kgj-text-secondary);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-config-cols:hover {
  color: var(--kgj-primary);
}

/* Kaogujia Table Elements */
.table-container {
  overflow-x: auto;
  max-height: 68vh;
}
.kaogujia-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.kaogujia-table thead th {
  background: #fafbfc;
  color: var(--kgj-text-muted);
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kgj-border);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  user-select: none;
}
.kaogujia-table thead th:hover {
  color: var(--kgj-text-main);
}
.sort-arr {
  font-size: 10px;
  opacity: 0.6;
}

.kaogujia-table tbody tr {
  border-bottom: 1px solid var(--kgj-border-light);
  transition: background 0.15s ease;
}
.kaogujia-table tbody tr:hover {
  background: #f7f9fc;
}
.kaogujia-table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--kgj-text-main);
  white-space: nowrap;
}

.text-center { text-align: center !important; }

/* Shop Profile Cell (Avatar + Name + Products Count) */
.shop-cell-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #4e5969;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.shop-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-title-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--kgj-text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shop-title-text:hover {
  color: var(--kgj-primary);
}
.shop-sub-info {
  font-size: 11px;
  color: var(--kgj-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.import-date-pill {
  font-size: 10px;
  color: #86909c;
  background: #f2f3f5;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}
.tag-new-badge {
  font-size: 10px;
  color: var(--kgj-orange);
  background: var(--kgj-orange-bg);
  padding: 0 4px;
  border-radius: 2px;
}

/* Score Cell (4.90 高 / 4.70 中 / --) */
.score-flex {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.score-val {
  font-size: 13px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.score-badge {
  font-size: 11px;
  font-weight: 500;
}
.score-high .score-val, .score-high .score-badge { color: var(--kgj-red); }
.score-mid .score-val, .score-mid .score-badge { color: var(--kgj-orange); }
.score-none { color: var(--kgj-text-muted); }

/* Sales Volume & Amount Multi-line Cells */
.metric-stacked-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.metric-main-val {
  font-weight: 700;
  font-size: 13px;
}
.metric-main-val.blue-val {
  color: var(--kgj-primary);
  font-size: 14px;
}
.metric-growth-idx {
  font-size: 11px;
  color: var(--kgj-primary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Channel Pill Badges */
.channel-label-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 1px 0;
  display: inline-block;
  line-height: 1.4;
  white-space: nowrap;
}
.ch-card { background: #e8ffea; color: #00b42a; border: 1px solid rgba(0, 180, 42, 0.25); }   /* 翠绿-商品卡 */
.ch-live { background: #fff7e8; color: #ff7d00; border: 1px solid rgba(255, 125, 0, 0.25); }   /* 暖橙-直播 */
.ch-video { background: #e8f3ff; color: #1e80ff; border: 1px solid rgba(30, 128, 255, 0.25); } /* 靓蓝-短视频 */

/* Sparkline 7-Day Trend (SVG) */
.sparkline-svg {
  width: 90px;
  height: 26px;
  display: block;
  margin: 0 auto;
}

/* Numeric Counts */
.count-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--kgj-text-main);
}

/* Table Inline Editable Contact Boxes (表格方框内直接打字修改 - 绝对水平居中) */
.contact-col-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin: 0 auto;
}
.tbl-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}
.tbl-input-icon {
  font-size: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.tbl-inline-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  line-height: 20px;
  padding: 0 4px;
  font-size: 11px;
  font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--kgj-text-main);
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.15s ease;
}
.tbl-inline-input::placeholder {
  color: #bfbfbf;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.tbl-inline-input:hover {
  border-color: #4096ff;
}
.tbl-inline-input:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
  outline: none;
  background: #ffffff;
  text-align: center;
}

/* 微信输入方框微调 */
.tbl-inline-input.tbl-wx-input {
  color: #237804;
  text-align: center;
}
.tbl-inline-input.tbl-wx-input:focus {
  border-color: #52c41a;
  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.15);
  text-align: center;
}

.tbl-inline-input.has-val {
  background: #fbfbfb;
  text-align: center;
}
.tbl-inline-input.tbl-wx-input.has-val {
  background: #f6ffed;
  border-color: #b7eb8f;
  text-align: center;
}

.tbl-inline-input.is-nan,
.k-inline-box.is-nan {
  color: #bfbfbf !important;
  font-style: italic;
  background: #fafafa;
  border-color: #e8e8e8;
}

.btn-copy-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  font-size: 11px;
  opacity: 0.65;
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.btn-copy-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

.status-dropdown-pill,
.status-table-select,
.feedback-table-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 3px 22px 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: block;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.15s ease;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
  min-width: 116px;
  max-width: 140px;
  height: 24px;
  line-height: 16px;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 5px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23666666' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-table-select option,
.feedback-table-select option {
  text-align: center !important;
  text-align-last: center !important;
  background: #ffffff;
  color: #1d2129;
  font-weight: normal;
  padding: 5px 12px;
}

.status-table-select:hover,
.feedback-table-select:hover {
  filter: brightness(0.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.status-table-select:focus,
.feedback-table-select:focus {
  box-shadow: 0 0 0 2px rgba(30, 128, 255, 0.25);
}

.feedback-cell-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-call-touch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  color: #ff7d00;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  line-height: 1;
}

.btn-call-touch:hover {
  background: #ff7d00;
  color: #ffffff;
  border-color: #ff7d00;
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(255, 125, 0, 0.3);
}

.btn-call-touch:active {
  transform: scale(0.95);
}

.btn-touch-repeat-small {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #ff7d00;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-touch-repeat-small:hover {
  background: #ff7d00;
  color: #ffffff;
  border-color: #ff7d00;
  box-shadow: 0 2px 5px rgba(255, 125, 0, 0.25);
}

/* ==========================================================================
   沟通反馈 (7 种外呼通话结果 - 鲜明色系区分)
   ========================================================================== */
.fb-pending {
  background-color: #e6f4ff;
  color: #0958d9;
  border: 1px solid #91caff;
} /* 待触达 - 浅蓝 */

.fb-interested {
  background-color: #f6ffed;
  color: #389e0d;
  border: 1px solid #b7eb8f;
} /* 初步意向 - 清爽草绿 */

.fb-hangup {
  background-color: #fff7e6;
  color: #d46b08;
  border: 1px solid #ffd591;
} /* 接通挂断 - 赤橙色 */

.fb-no-answer {
  background-color: #feffe6;
  color: #ad8b00;
  border: 1px solid #fffb8f;
} /* 未接通 - 柠檬黄 */

.fb-reject {
  background-color: #fff1f0;
  color: #cf1322;
  border: 1px solid #ffa39e;
} /* 不合作服务商 - 鲜明红 */

.fb-unaware {
  background-color: #f9f0ff;
  color: #531dab;
  border: 1px solid #d3adf7;
} /* 不了解服务商 - 丁香紫 */

.fb-invalid {
  background-color: #f0f0f0;
  color: #595959;
  border: 1px solid #d9d9d9;
} /* 无效(停机/空号/暂停服务) - 中灰 */

.fb-default {
  background-color: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

/* ==========================================================================
   商务跟进阶段 (9 种微信/商机流转 - 渐进深度色系区分)
   ========================================================================== */
.st-none {
  background-color: #fafafa;
  color: #8c8c8c;
  border: 1px dashed #d9d9d9;
} /* 未进入跟进 - 浅灰虚线 */

.st-wx-pending {
  background-color: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
} /* 已加微，未通过 - 金黄 */

.st-wx-added {
  background-color: #e6fffb;
  color: #08979c;
  border: 1px solid #87e8de;
} /* 已加微 - 薄荷青蓝 */

.st-wait-invite {
  background-color: #f0f5ff;
  color: #1d39c4;
  border: 1px solid #adc6ff;
} /* 待邀约 - 宝蓝 */

.st-invited {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
} /* 已邀约 - 典雅紫 */

.st-invite-fail {
  background-color: #fff2e8;
  color: #d4380d;
  border: 1px solid #ffbb96;
} /* 邀约未成 - 珊瑚砖红 */

.st-wait-confirm {
  background-color: #fff0f6;
  color: #c41d7f;
  border: 1px solid #ffadd2;
} /* 待确认 - 玫瑰粉红 */

.st-pre-cancel {
  background-color: #fff1f0;
  color: #a8071a;
  border: 1px solid #ffa39e;
} /* 确认前解约 - 胭脂红 */

.st-cooperated {
  background-color: #d9f7be;
  color: #237804;
  border: 1px solid #73d13d;
  font-weight: 700;
} /* 已合作 - 高亮翠绿成单 */

.st-post-cancel {
  background-color: #f5f5f5;
  color: #595959;
  border: 1px solid #bfbfbf;
} /* 合作后解约 - 深灰 */

/* Action Cell Icons (1:1 还原图标风格) */
.action-icons-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.action-btn-icon {
  width: 26px;
  height: 26px;
  border: 1px solid var(--kgj-border);
  background: var(--kgj-surface);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kgj-text-secondary);
  font-size: 12px;
  transition: all 0.15s ease;
}
.action-btn-icon:hover {
  border-color: var(--kgj-primary);
  color: var(--kgj-primary);
  background: var(--kgj-primary-light);
}

/* Pagination Bar */
.kgj-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--kgj-border);
  font-size: 12px;
  color: var(--kgj-text-secondary);
  background: #fafbfc;
}
.p-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-left select {
  height: 26px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  padding: 0 6px;
  font-size: 12px;
  outline: none;
}
.btn-batch {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--kgj-border);
  background: white;
  border-radius: var(--radius-xs);
  cursor: pointer;
  margin-left: 6px;
}
.btn-batch:hover {
  border-color: var(--kgj-primary);
  color: var(--kgj-primary);
}

.p-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--kgj-border);
  background: white;
  color: var(--kgj-text-main);
  border-radius: var(--radius-xs);
  font-size: 12px;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--kgj-primary);
  color: var(--kgj-primary);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Empty State */
.kgj-empty {
  text-align: center;
  padding: 60px 20px;
}
.empty-icon {
  font-size: 38px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Kanban Board View
   ========================================================================== */
.kanban-outer-container {
  padding: 16px;
  overflow-x: auto;
}
.kanban-board {
  display: grid;
  grid-template-columns: repeat(9, 250px);
  gap: 14px;
  align-items: start;
}
.kanban-col {
  background: #f7f8fa;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kanban-header {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.kanban-header .k-header-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.kanban-header .col-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 看板列头部 9 大状态专属鲜艳配色 (居中 + 鲜明色彩区分) */
.kanban-header.kh-wx-pending { background: #fffbe6; color: #d48806; border-bottom-color: #ffe58f; }
.kanban-header.kh-wx-added { background: #e6fffb; color: #08979c; border-bottom-color: #87e8de; }
.kanban-header.kh-wait-invite { background: #f0f5ff; color: #1d39c4; border-bottom-color: #adc6ff; }
.kanban-header.kh-invited { background: #f9f0ff; color: #722ed1; border-bottom-color: #d3adf7; }
.kanban-header.kh-invite-fail { background: #fff2e8; color: #d4380d; border-bottom-color: #ffbb96; }
.kanban-header.kh-wait-confirm { background: #fff0f6; color: #c41d7f; border-bottom-color: #ffadd2; }
.kanban-header.kh-pre-cancel { background: #fff1f0; color: #a8071a; border-bottom-color: #ffa39e; }
.kanban-header.kh-cooperated { background: #d9f7be; color: #237804; border-bottom-color: #73d13d; }
.kanban-header.kh-post-cancel { background: #f5f5f5; color: #595959; border-bottom-color: #bfbfbf; }
.kanban-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 65vh;
}
.kanban-card {
  background: #ffffff;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: grab;
  transition: all 0.15s ease;
}
.kanban-card:hover {
  border-color: var(--kgj-primary);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.k-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--kgj-text-main);
  cursor: pointer;
}
.k-title:hover {
  color: var(--kgj-primary);
}
.k-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--kgj-text-muted);
  margin-bottom: 6px;
}
/* Card Inline Editable Contact Boxes (空格方框直接输入) */
.k-contact-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.k-contact-icon {
  font-size: 11px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}
.k-inline-box {
  flex: 1;
  min-width: 0;
  height: 24px;
  line-height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--kgj-text-main);
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.15s ease;
}
.k-inline-box::placeholder {
  color: #bfbfbf;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.k-inline-box:hover {
  border-color: #4096ff;
}
.k-inline-box:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
  outline: none;
  background: #ffffff;
  text-align: center;
}

/* 微信输入方框专属高亮微调 */
.k-inline-box.k-wx-box {
  color: #237804;
}
.k-inline-box.k-wx-box:focus {
  border-color: #52c41a;
  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.15);
}

.k-inline-box.has-val {
  background: #fafafa;
}
.k-inline-box.k-wx-box.has-val {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.k-box-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  opacity: 0.65;
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.k-box-copy-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}
.k-wx-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-badge {
  background: #52c41a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
  line-height: 14px;
  display: inline-block;
}
.wx-badge-gray {
  background: #bfbfbf;
}
.wx-none-hint {
  font-size: 11px;
  color: #8c8c8c;
}
.wx-add-btn {
  color: var(--kgj-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
}
.wx-add-btn:hover {
  text-decoration: underline;
}
.k-copy-btn {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.k-copy-btn:hover {
  opacity: 1;
}
.k-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--kgj-text-muted);
  border-top: 1px solid var(--kgj-border-light);
  padding-top: 5px;
}
.k-update-time {
  font-size: 11px;
  color: #86909c;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* ==========================================================================
   Analytics View
   ========================================================================== */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
.analytics-box {
  background: #ffffff;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.analytics-box h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--kgj-text-main);
}
.chart-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.c-label { width: 90px; }
.c-track {
  flex: 1;
  height: 8px;
  background: #f2f3f5;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.c-fill { height: 100%; border-radius: var(--radius-full); }
.c-val { width: 60px; text-align: right; font-weight: 600; }

.spotlight-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f7f8fa;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* ==========================================================================
   Detail Drawer (Slide-out)
   ========================================================================== */
.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drawer-mask.active {
  opacity: 1;
  pointer-events: auto;
}
.detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--kgj-surface);
  box-shadow: var(--shadow-drawer);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.detail-drawer.active {
  transform: translateX(0);
}

.drawer-top {
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--kgj-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.d-title-group h3 {
  font-size: 16px;
  font-weight: 700;
}
.d-category-tag {
  font-size: 11px;
  background: var(--kgj-blue-tag-bg);
  color: var(--kgj-blue-tag-text);
  padding: 2px 6px;
  border-radius: 2px;
}
.d-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--kgj-text-muted);
  cursor: pointer;
}
.d-close-btn:hover {
  color: var(--kgj-text-main);
}

.drawer-scroll {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.d-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--kgj-text-secondary);
  margin-bottom: 10px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.metric-card {
  background: #f7f8fa;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.metric-card .lbl { font-size: 11px; color: var(--kgj-text-muted); }
.metric-card .val { font-size: 14px; margin-top: 2px; }

.contact-box {
  background: #f7f8fa;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-row label {
  font-size: 11px;
  color: var(--kgj-text-secondary);
}
.input-action-flex {
  display: flex;
  gap: 6px;
}
.input-action-flex input {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  outline: none;
}
.input-action-flex input:focus { border-color: var(--kgj-primary); }

.crm-form-group {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-form-group label {
  font-size: 11px;
  color: var(--kgj-text-secondary);
}
.kgj-select-full, .kgj-input-full, .kgj-textarea-full {
  width: 100%;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}
.kgj-select-full:focus, .kgj-input-full:focus, .kgj-textarea-full:focus {
  border-color: var(--kgj-primary);
}
.btn-block { width: 100%; height: 34px; font-size: 13px; }
.mt-2 { margin-top: 8px; }

.timeline-container {
  margin-top: 14px;
  border-top: 1px solid var(--kgj-border);
  padding-top: 10px;
}
.timeline-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--kgj-text-secondary);
  margin-bottom: 8px;
}
.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-item {
  background: #f7f8fa;
  border-left: 3px solid var(--kgj-primary);
  padding: 6px 10px;
  font-size: 11px;
}
.t-header {
  display: flex;
  justify-content: space-between;
  color: var(--kgj-text-muted);
  margin-bottom: 2px;
}

/* ==========================================================================
   Modals
   ========================================================================== */
.kgj-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kgj-modal-box {
  background: var(--kgj-surface);
  border-radius: var(--radius-md);
  width: 620px;
  max-width: 95vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-medium { width: 500px; }
.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--kgj-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h4 {
  font-size: 15px;
  font-weight: 700;
}
.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--kgj-text-muted);
}
.modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--kgj-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fafbfc;
}

.drag-upload-zone {
  border: 2px dashed #c9cdd4;
  border-radius: var(--radius-md);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
  transition: all 0.15s ease;
}
.drag-upload-zone:hover, .drag-upload-zone.dragover {
  border-color: var(--kgj-primary);
  background: var(--kgj-primary-light);
}
.upload-icon { font-size: 36px; margin-bottom: 8px; }

.preview-summary-cards {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.summary-pill {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--kgj-border);
  background: #f7f8fa;
  font-size: 12px;
}
.summary-pill.new { border-color: rgba(0, 180, 42, 0.3); color: var(--kgj-green); }
.summary-pill.update { border-color: rgba(30, 128, 255, 0.3); color: var(--kgj-primary); }

.safe-protection-box {
  margin-top: 12px;
  background: #f7f8fa;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  padding: 12px;
}
.safe-protection-box h5 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.safe-protection-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--kgj-text-secondary);
}

.export-cards-flex {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.export-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.15s ease;
}
.export-card:hover {
  border-color: var(--kgj-primary);
  background: var(--kgj-primary-light);
}
.e-icon { font-size: 24px; }
.e-content { flex: 1; }
.e-content h5 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.e-content p { font-size: 11px; color: var(--kgj-text-muted); }
.e-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: #f2f3f5;
  color: var(--kgj-primary);
}

/* Toast */
.toast-hub {
  position: fixed;
  top: 70px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kgj-toast {
  background: white;
  border: 1px solid var(--kgj-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideToast 0.2s ease;
}
.kgj-toast.success { border-left: 3px solid var(--kgj-green); }
.kgj-toast.info { border-left: 3px solid var(--kgj-primary); }
.kgj-toast.warning { border-left: 3px solid var(--kgj-orange); }

@keyframes slideToast {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   Cloud Sync & Multi-User Collaboration Styles
   ========================================================================== */
.kgj-btn-cloud {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fd 100%);
  color: #0066cc;
  border: 1px solid #bae0ff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.kgj-btn-cloud:hover {
  background: #0066cc;
  color: white;
  border-color: #0050a3;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
}
.kgj-btn-cloud:hover .cloud-status-dot.local {
  background: #ffec3d;
}
.kgj-btn-cloud:hover .cloud-status-dot.connected {
  background: #52c41a;
  box-shadow: 0 0 6px #fff;
}

.cloud-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cloud-status-dot.local {
  background: #fa8c16;
  box-shadow: 0 0 4px rgba(250, 140, 22, 0.6);
}
.cloud-status-dot.connected {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.9);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(82, 196, 26, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); }
}

.cloud-modal-box {
  max-width: 680px;
}
.cloud-status-banner {
  background: #f7f9fc;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.status-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-indicator.online {
  background: var(--kgj-green);
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
}
.status-indicator.offline {
  background: var(--kgj-orange);
  box-shadow: 0 0 6px rgba(243, 156, 18, 0.4);
}
.cloud-status-banner h5 {
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 600;
}
.cloud-status-banner p {
  margin: 0;
  font-size: 12px;
  color: var(--kgj-text-secondary);
}

.cloud-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--kgj-border);
  margin-bottom: 16px;
  gap: 8px;
}
.c-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kgj-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.c-tab-btn.active {
  color: var(--kgj-primary);
  border-bottom-color: var(--kgj-primary);
  font-weight: 600;
}

.form-group-cloud {
  margin-bottom: 14px;
}
.form-group-cloud label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--kgj-text-main);
}
.form-group-cloud .req {
  color: var(--kgj-red);
}
.kgj-input-block {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
  transition: border 0.15s ease;
}
.kgj-input-block:focus {
  outline: none;
  border-color: var(--kgj-primary);
  box-shadow: 0 0 0 2px var(--kgj-primary-light);
}
.field-hint {
  display: block;
  font-size: 11px;
  color: var(--kgj-text-muted);
  margin-top: 4px;
}
.cloud-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.migrate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.migrate-card {
  border: 1px solid var(--kgj-border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: #fafbfc;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.migrate-card .m-icon {
  font-size: 30px;
  margin-bottom: 8px;
}
.migrate-card h5 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 600;
}
.migrate-card p {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: var(--kgj-text-secondary);
  line-height: 1.5;
}

.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--kgj-primary);
  transition: width 0.2s ease;
}

.sql-hint-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--kgj-text-secondary);
}
.sql-preview-code {
  background: #1e1e24;
  color: #e2e8f0;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.45;
  font-family: Consolas, Monaco, monospace;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
}

/* ==========================================================================
   Kaogujia 1:1 Detail Link Icon & Tooltip (查看详情)
   ========================================================================== */
.kgj-detail-tooltip-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.kgj-icon-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: #1e80ff;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.kgj-icon-detail-btn:hover {
  background: #f0f7ff;
  border-color: #bae0ff;
  color: #0066cc;
}

.kgj-icon-detail-btn.has-url {
  color: #1890ff;
}

.kgj-icon-detail-btn.no-url {
  color: #8c8c8c;
  opacity: 0.7;
}
.kgj-icon-detail-btn.no-url:hover {
  background: #f5f5f5;
  border-color: #d9d9d9;
  color: #595959;
  opacity: 1;
}

/* Tooltip (1:1 还原考古加深灰悬浮浮窗，带向下小三角尖尖) */
.kgj-tooltip-bubble {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(38, 38, 38, 0.92);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08);
  transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 1000;
}

/* Tooltip Downward Triangle Arrow */
.kgj-tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: rgba(38, 38, 38, 0.92) transparent transparent transparent;
}

.kgj-icon-detail-btn:hover .kgj-tooltip-bubble {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}