:root {
  --ink: #202733;
  --muted: #7b8088;
  --line: #e5e1d9;
  --paper: #fffefa;
  --canvas: #f4f2ee;
  --forest: #172331;
  --forest-2: #304b61;
  --mint: #e8edec;
  --teal: #738d8a;
  --sand: #b7955b;
  --sand-soft: #f4eee3;
  --danger: #a84f4c;
  --danger-soft: #f6e8e5;
  --warning-soft: #f5ecdd;
  --shadow: 0 18px 55px rgba(28, 35, 45, 0.09);
  --radius: 16px;
}

/* 云端登录、账号权限与同步状态 */
.permission-hidden { display: none !important; }
html.olanuo-auth-locked { overflow: hidden; }
html.olanuo-auth-locked .app-shell,
html.olanuo-auth-locked #toast { display: none !important; }
.olanuo-auth-boot {
  position: fixed; z-index: 290; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 16% 18%, rgba(190, 157, 99, .19), transparent 28%),
    radial-gradient(circle at 86% 80%, rgba(83, 126, 119, .16), transparent 30%),
    linear-gradient(145deg, #101923, #263a4c);
}
html.olanuo-auth-dialog .olanuo-auth-boot { display: none; }
.olanuo-auth-boot-card {
  width: min(390px, 100%); display: grid; justify-items: center; gap: 12px; padding: 34px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 26px; background: rgba(255,254,250,.98);
  box-shadow: 0 38px 90px rgba(7,14,20,.34); text-align: center;
}
.olanuo-auth-boot-brand { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; text-align: left; }
.olanuo-auth-boot-brand > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #d2ad70; background: var(--forest); font-family: Georgia, serif; font-weight: 700; }
.olanuo-auth-boot-brand strong, .olanuo-auth-boot-brand small { display: block; }
.olanuo-auth-boot-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .11em; }
.olanuo-auth-boot-card > strong { margin-top: 4px; color: var(--forest); font-size: 17px; }
.olanuo-auth-boot-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.olanuo-auth-boot-card > button { margin-top: 8px; }
.olanuo-auth-spinner { width: 30px; height: 30px; border: 3px solid #dce4e1; border-top-color: var(--sand); border-radius: 50%; animation: olanuo-auth-spin .8s linear infinite; }
.olanuo-auth-boot.is-error .olanuo-auth-spinner { display: none; }
.olanuo-auth-boot.is-error .olanuo-auth-boot-card > strong { color: var(--danger); }
@keyframes olanuo-auth-spin { to { transform: rotate(360deg); } }
.cloud-auth-gate {
  position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 16% 18%, rgba(190, 157, 99, .19), transparent 28%),
    radial-gradient(circle at 86% 80%, rgba(83, 126, 119, .16), transparent 30%),
    linear-gradient(145deg, #101923, #263a4c);
}
.cloud-auth-gate.cloud-auth-dialog-mode { background: rgba(13, 23, 32, .72); backdrop-filter: blur(12px); }
.cloud-auth-card {
  width: min(440px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.7); border-radius: 26px;
  background: rgba(255,254,250,.98); box-shadow: 0 38px 90px rgba(7,14,20,.34);
}
.cloud-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.cloud-auth-brand > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #d2ad70; background: var(--forest); font-family: Georgia, serif; font-weight: 700; }
.cloud-auth-brand strong, .cloud-auth-brand small { display: block; }
.cloud-auth-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .11em; }
.cloud-auth-copy h1 { margin: 5px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 28px; font-weight: 500; }
.cloud-auth-copy p { margin: 0 0 24px; color: var(--muted); }
.cloud-auth-card form { display: grid; gap: 14px; }
.cloud-auth-card form label { display: grid; gap: 7px; color: #535b62; font-size: 11px; font-weight: 700; }
.cloud-auth-card input { width: 100%; padding: 12px 13px; border: 1px solid #d8dcd9; border-radius: 11px; outline: 0; color: var(--ink); background: white; font-size: 13px; font-weight: 400; }
.cloud-auth-card input:focus { border-color: #718e87; box-shadow: 0 0 0 4px rgba(73,111,104,.1); }
.cloud-auth-submit { width: 100%; margin-top: 4px; padding: 13px; }
.cloud-auth-error, .cloud-form-error { margin: 0; padding: 10px 12px; border-radius: 10px; color: #8d3836; background: var(--danger-soft); font-size: 11px; }
.cloud-auth-foot { margin: 20px 0 0; color: #92979b; font-size: 9px; line-height: 1.6; text-align: center; }
.cloud-auth-cancel { width: 100%; }
.cloud-sync-notice {
  position: fixed; z-index: 260; right: 28px; bottom: 24px; padding: 11px 16px; border: 1px solid #bdd0ca;
  border-radius: 999px; color: #315f5b; background: #f4faf7; box-shadow: 0 14px 36px rgba(23,35,49,.15); cursor: pointer;
}
.cloud-sync-notice.danger { color: #8c3432; border-color: #e1b9b6; background: #fff4f2; }
.topbar-actions { position: relative; }
.cloud-user-menu {
  position: absolute; z-index: 90; top: 50px; right: 0; width: 220px; overflow: hidden; padding: 8px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: var(--shadow);
}
.cloud-user-menu header { display: grid; gap: 3px; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.cloud-user-menu header span { color: var(--muted); font-size: 9px; }
.cloud-user-menu button { width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; }
.cloud-user-menu button:hover { background: #f2f5f3; }
.cloud-user-menu button.danger { color: var(--danger); }
.cloud-admin-modal { z-index: 180; }
.cloud-account-dialog { width: min(1080px, 96vw); }
.cloud-account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; min-height: 540px; }
.cloud-account-layout > aside { padding-right: 18px; border-right: 1px solid var(--line); }
.cloud-new-user { width: 100%; margin-bottom: 12px; }
.cloud-user-list { display: grid; gap: 7px; }
.cloud-user-list button { width: 100%; display: grid; gap: 4px; padding: 12px; border: 1px solid transparent; border-radius: 12px; color: inherit; background: #f5f7f5; cursor: pointer; text-align: left; }
.cloud-user-list button.active { border-color: #a9c2bb; background: #edf4f1; }
.cloud-user-list span { color: var(--muted); font-size: 9px; }
.cloud-active-field > span:last-child { min-height: 42px; display: flex; align-items: center; gap: 8px; }
.cloud-active-field input { width: auto; }
.permission-editor { margin-top: 18px; }
.permission-editor > div:first-child { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.permission-editor small { color: var(--muted); }
#cloud-permission-groups { max-height: 310px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-right: 5px; }
.permission-group { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.permission-group legend { padding: 0 5px; color: var(--forest-2); font-size: 10px; font-weight: 700; }
.permission-group label { display: flex; align-items: center; gap: 7px; padding: 5px 0; color: #535b62; font-size: 10px; }
.permission-group input { accent-color: #315f5b; }
.permission-group label.permission-locked { color: #9a9e9c; }
.permission-group label.permission-locked small { margin-left: auto; color: #aa6b63; font-size: 8px; }
.cloud-audit-dialog { width: min(1050px, 96vw); }
.cloud-audit-dialog .table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
.cloud-audit-dialog table { min-width: 820px; }

@media (max-width: 760px) {
  .olanuo-auth-boot { padding: 14px; }
  .olanuo-auth-boot-card { padding: 26px 20px; border-radius: 22px; }
  .cloud-auth-gate { padding: 14px; }
  .cloud-auth-card { padding: 26px 20px; border-radius: 22px; }
  .cloud-sync-notice { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .cloud-user-menu { position: fixed; top: 72px; right: 14px; }
  .cloud-account-layout { grid-template-columns: 1fr; }
  .cloud-account-layout > aside { padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); }
  .cloud-user-list { max-height: 150px; overflow-y: auto; }
  #cloud-permission-groups { grid-template-columns: 1fr; max-height: 260px; }
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: flex; }

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 244px;
  display: flex;
  flex-direction: column;
  padding: 26px 18px;
  color: #f6f3ec;
  background:
    radial-gradient(circle at 12% 84%, rgba(183, 149, 91, 0.16), transparent 30%),
    linear-gradient(165deg, #182737, #101923 72%);
}

.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 30px; }
.brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 13px;
  border-color: rgba(205, 180, 132, .35); color: #d3b67f;
  background: rgba(255,255,255,.05); font-family: Georgia, serif; font-size: 15px; font-weight: 700; letter-spacing: -.03em;
}
.brand strong { display: block; font-size: 17px; letter-spacing: .04em; }
.brand span { display: block; margin-top: 3px; color: #959da6; font-size: 9px; letter-spacing: .09em; }

.nav-list { display: grid; gap: 8px; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 0; border-radius: 12px;
  color: #aeb5bd; background: transparent; cursor: pointer; text-align: left;
  transition: .18s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fffdf7; background: rgba(255,255,255,.08); box-shadow: inset 3px 0 #c1a36e; }
.nav-icon { width: 22px; text-align: center; font-size: 17px; }

.sidebar-note {
  margin-top: auto; display: flex; align-items: center; gap: 11px;
  padding: 14px; border-radius: 13px; background: rgba(255,255,255,.07);
}
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #c4a66f; box-shadow: 0 0 0 5px rgba(196,166,111,.12); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note small { margin-top: 3px; color: #929ba4; font-size: 10px; }

.main-area { width: calc(100% - 244px); min-height: 100vh; margin-left: 244px; }
.topbar {
  height: 92px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,254,250,.9);
  backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 600; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.search-box, .inline-search {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 12px; background: #f8faf9; color: var(--muted);
}
.search-box { width: 270px; padding: 9px 12px; }
.search-box input, .inline-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.avatar { width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: var(--forest); cursor: pointer; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; }

.content-area { padding: 30px 34px 60px; }
.view { display: none; animation: fade .22s ease; }
.view.active { display: block; }
.dashboard-grid > *, .kpi-grid > * { min-width: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 22px; }
.section-heading h2 { margin: 3px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 28px; font-weight: 500; }
.section-heading p { margin: 7px 0 0; color: var(--muted); }
.row-heading { align-items: center; }
.eyebrow { color: var(--forest-2); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.date-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 11px; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.compact-button { padding: 7px 10px; font-size: 10px; }
.file-button { display: inline-block; cursor: pointer; }
.file-button input { display: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.kpi-card { min-height: 142px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 30px rgba(24,51,46,.035); }
.kpi-card.kpi-primary { color: white; border-color: transparent; background: linear-gradient(145deg, #263b4e, #172331); }
.interactive-kpi { position: relative; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.interactive-kpi:hover { transform: translateY(-2px); border-color: #c5d4cf; box-shadow: 0 14px 36px rgba(24,51,46,.09); }
.interactive-kpi:focus-visible { outline: 3px solid rgba(74,124,116,.2); outline-offset: 3px; }
.interactive-kpi.kpi-primary:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 16px 40px rgba(23,35,49,.2); }
.kpi-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.kpi-primary .kpi-label, .kpi-primary small { color: #b9d3cb; }
.kpi-period-select { max-width: 74px; padding: 6px 24px 6px 9px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--forest); background: #f4f7f5; font: inherit; cursor: pointer; }
.kpi-primary .kpi-period-select { color: white; border-color: rgba(255,255,255,.2); background: #34495b; }
.kpi-primary .kpi-period-select option { color: var(--ink); background: white; }
.kpi-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: rgba(255,255,255,.14); font-size: 11px; }
.kpi-icon.neutral { color: var(--forest); background: var(--mint); }
.kpi-icon.warning { color: #986022; background: var(--warning-soft); }
.kpi-icon.danger { color: var(--danger); background: var(--danger-soft); }
.kpi-card strong { display: block; margin: 19px 0 7px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.kpi-card small { color: var(--muted); font-size: 10px; }

.dashboard-metric-modal { overflow-x: hidden; }
.dashboard-trend-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.dashboard-trend-toolbar > span { color: var(--muted); font-size: 10px; }
.dashboard-trend-periods { padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9f8; }
.dashboard-trend-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dashboard-trend-kpis > div { min-height: 76px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, #fbfcfb, #f3f7f5); }
.dashboard-trend-kpis span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; }
.dashboard-trend-kpis strong { color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 500; }
.dashboard-trend-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fbfcfb, #f6f9f7); }
.dashboard-trend-svg { display: block; width: 100%; min-width: 720px; height: auto; }
.dashboard-trend-grid-line { stroke: #dfe7e3; stroke-width: 1; stroke-dasharray: 4 5; }
.dashboard-trend-axis-label { fill: #74817d; font-size: 10px; font-family: Arial, "Microsoft YaHei", sans-serif; }
.dashboard-trend-area-line { fill: none; stroke: #315f5b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 5px rgba(49,95,91,.16)); }
.dashboard-trend-dot { fill: #c3a15f; stroke: white; stroke-width: 3; cursor: help; }
.dashboard-trend-empty { margin-top: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted); background: #f7f9f8; text-align: center; font-size: 10px; }
.dashboard-order-list, .dashboard-overdue-list { display: grid; gap: 10px; }
.dashboard-order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfb; transition: border-color .18s ease, box-shadow .18s ease; }
.dashboard-order-card.is-expanded { border-color: #afc8c1; box-shadow: 0 10px 28px rgba(33,67,62,.08); }
.dashboard-order-summary, .dashboard-overdue-row { width: 100%; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.dashboard-order-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 16px; }
.dashboard-order-summary > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 10px; }
.dashboard-order-summary > div:first-child small { grid-column: 2; }
.dashboard-order-summary strong, .dashboard-overdue-row strong { display: block; font-size: 12px; }
.dashboard-order-summary small, .dashboard-overdue-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.dashboard-order-summary > div:nth-child(2) { min-width: 110px; text-align: right; }
.dashboard-order-expand { min-width: 86px; color: var(--forest-2); font-size: 10px; text-align: right; }
.dashboard-order-detail { padding: 16px; border-top: 1px solid var(--line); background: white; }
.dashboard-order-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dashboard-order-detail-head > strong { font-size: 11px; }
.dashboard-order-followups { display: grid; gap: 9px; }
.dashboard-order-followup { padding: 12px 14px; border-radius: 12px; background: #f4f7f5; }
.dashboard-order-followup > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.dashboard-order-followup strong { font-size: 10px; }
.dashboard-order-followup span { color: var(--muted); font-size: 9px; }
.dashboard-order-followup p { margin: 7px 0 0; color: #43534f; font-size: 10px; line-height: 1.65; }
.dashboard-order-followup-empty { padding: 24px; border-radius: 12px; color: var(--muted); background: #f7f9f8; text-align: center; font-size: 10px; }
.dashboard-overdue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #fffafa; transition: border-color .18s ease, transform .18s ease; }
.dashboard-overdue-row:hover { transform: translateY(-1px); border-color: #ddb5b1; }
.dashboard-overdue-row > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 10px; }
.dashboard-overdue-row > div:first-child small { grid-column: 2; }
.dashboard-overdue-row > div:last-child { min-width: 180px; text-align: right; }
.dashboard-overdue-row > div:last-child > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.dashboard-overdue-row > div:last-child small { color: var(--danger); }
.dashboard-metric-empty { padding: 58px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
.dashboard-metric-empty > span { width: 38px; height: 38px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; color: #356d64; background: var(--mint); }
.dashboard-metric-empty strong { display: block; color: var(--ink); font-size: 13px; }
.dashboard-metric-empty p { margin: 7px 0 0; font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; margin-bottom: 18px; }
.panel, .table-panel, .panel-flat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 30px rgba(24,51,46,.035); }
.panel { padding: 22px; }
.panel-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.panel-header h3 { margin: 0; font-size: 14px; }
.panel-header p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 13px; color: var(--muted); font-size: 10px; }
.legend span, .channel-breakdown span { display: flex; align-items: center; gap: 6px; }
.legend i, .channel-breakdown i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
i.online { background: var(--forest-2); }
i.offline { background: var(--sand); }

.sales-chart { height: 232px; display: flex; gap: 12px; align-items: stretch; padding-top: 12px; border-bottom: 1px solid var(--line); }
.chart-column { flex: 1; min-width: 36px; display: flex; flex-direction: column; justify-content: end; align-items: center; position: relative; }
.chart-bars { width: 100%; max-width: 44px; height: 185px; display: flex; align-items: end; justify-content: center; gap: 4px; }
.chart-bar { width: 13px; min-height: 2px; border-radius: 5px 5px 0 0; transition: height .35s ease; }
.chart-bars.source-bars { max-width: 58px; gap: 3px; }
.chart-bar.source-bar { width: 8px; }
.chart-bar.online { background: var(--forest-2); }
.chart-bar.offline { background: var(--sand); }
.chart-column span { height: 27px; padding-top: 9px; color: var(--muted); font-size: 9px; }
.chart-column:hover::before {
  content: attr(data-value); position: absolute; z-index: 3; top: -8px; left: 50%; transform: translate(-50%,-100%);
  width: max-content; max-width: min(280px, 80vw); white-space: normal; line-height: 1.6; padding: 6px 8px; border-radius: 7px; color: white; background: var(--ink); font-size: 9px;
}

.donut-wrap { display: grid; place-items: center; gap: 18px; }
.donut { width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--forest-2) 0 50%, var(--sand) 50% 100%); position: relative; }
.donut::after { content: ''; position: absolute; inset: 21px; border-radius: 50%; background: var(--paper); }
.donut div { z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.donut span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.channel-breakdown { width: 100%; display: grid; gap: 10px; }
.channel-breakdown > div { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.channel-breakdown strong { display: flex; align-items: baseline; gap: 7px; font-family: Georgia, serif; }
.channel-breakdown strong small { color: var(--muted); font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 8px; font-weight: 400; }

.compact-list { display: grid; }
.compact-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 110px 100px; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.compact-row:first-child { border-top: 0; padding-top: 0; }
.compact-row:last-child { padding-bottom: 0; }
.compact-row strong, .compact-row small { display: block; }
.compact-row strong { font-size: 12px; }
.compact-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.primary-button, .secondary-button, .text-button, .action-button {
  border: 0; border-radius: 10px; cursor: pointer; transition: .16s ease;
}
.primary-button { padding: 11px 16px; color: #fffdf8; background: var(--forest); box-shadow: 0 8px 18px rgba(23,35,49,.16); }
.primary-button:hover { background: var(--forest-2); transform: translateY(-1px); }
.secondary-button { padding: 10px 16px; border: 1px solid var(--line); background: var(--paper); }
.text-button { padding: 5px; color: var(--forest-2); background: transparent; font-size: 11px; }
.action-button { padding: 7px 10px; color: var(--forest); background: var(--mint); font-size: 10px; }
.action-button:disabled { color: #9aa5a2; background: #f0f2f1; cursor: not-allowed; }

.toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; padding: 10px; border-radius: 14px; }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; }
.segmented button { padding: 8px 12px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; }
.segmented button.active { color: var(--forest); background: var(--mint); font-weight: 700; }
.inline-search { width: 260px; padding: 8px 11px; }
.customer-filter-panel { min-width: 0; margin-bottom: 14px; padding: 11px 12px; }
.customer-filter-primary, .customer-filter-secondary { display: flex; min-width: 0; align-items: center; gap: 12px; }
.customer-filter-primary { justify-content: space-between; }
.customer-filter-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.customer-name-search { width: 300px; }
.filter-field, .filter-date-range { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.filter-field select, .filter-date-range input { min-width: 118px; padding: 8px 10px; border: 1px solid #dedbd4; border-radius: 9px; outline: 0; color: var(--ink); background: #fffefa; font-size: 10px; }
.filter-date-range input { width: 132px; min-width: 0; max-width: 100%; }
.filter-date-range i { color: var(--muted); font-style: normal; font-weight: 400; }
.clear-filter-button { padding: 8px 10px; }
.filter-result-count { margin-left: auto; color: var(--muted); font-size: 9px; white-space: nowrap; }

.table-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f8faf9; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
td { font-size: 11px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
.clickable-row { cursor: pointer; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fffdf8; background: linear-gradient(145deg, #566d80, #2e4254); font-family: Georgia, serif; font-size: 10px; }
.link-button { padding: 0; border: 0; border-bottom: 1px solid #a9b5bd; color: var(--forest-2); background: transparent; cursor: pointer; font-size: 11px; }
.muted-text { color: var(--muted); }
.source-note { display: block; max-width: 105px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 8px; }
.action-group { display: flex; flex-wrap: wrap; gap: 6px; }
.action-button.followup-action { color: #275c59; background: #dceceb; }
.action-button.followup-action:hover { color: white; background: #376f6b; }
.action-button.gold { color: #735a2f; background: var(--sand-soft); }
.action-button.danger-action { color: #8d3f3c; background: #f7e8e6; }
.action-button.danger-action:hover { color: white; background: var(--danger); }
.cell-title strong, .cell-title small { display: block; }
.cell-title strong { font-size: 11px; }
.cell-title small { max-width: 210px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }
.wide-table table { min-width: 1040px; }
.priority-order-row { background: #fffdf7; }
.priority-order-row:hover { background: #fbf6e9; }
.order-stage-label { display: inline-flex; margin-left: 7px; padding: 2px 5px; border-radius: 6px; font-size: 7px; font-style: normal; vertical-align: middle; }
.order-stage-label.warning { color: #8a642c; background: #f6ead6; }
.order-stage-label.success { color: #2f6d5b; background: #e3f2ed; }
.order-stage-label.danger { color: #a44b3f; background: var(--danger-soft); }
.order-stage-label.neutral { color: #65716e; background: #eef1f0; }
.action-button.history-action { color: #59636d; background: #edf0f2; }
.order-followup-detail-row > td { padding: 0 12px 14px; background: #fffdf8; }
.order-inline-followups { padding: 14px; border: 1px solid #dbe4e1; border-radius: 12px; background: #f7faf9; }
.order-inline-followup-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.order-inline-followup-head strong, .order-inline-followup-head span { display: block; }
.order-inline-followup-head strong { font-size: 11px; }
.order-inline-followup-head span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.order-inline-followup-list { display: grid; gap: 7px; margin-top: 11px; }
.order-inline-followup-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.order-inline-followup-row > div { display: flex; justify-content: space-between; gap: 12px; }
.order-inline-followup-row strong { font-size: 9px; }
.order-inline-followup-row span, .order-inline-followup-row small { color: var(--muted); font-size: 8px; }
.order-inline-followup-row p { margin: 5px 0; color: #59616b; font-size: 9px; line-height: 1.55; white-space: normal; }
.order-inline-followup-foot { margin-top: 8px; align-items: center; }
.order-inline-followup-empty { padding: 14px; color: var(--muted); font-size: 9px; text-align: center; }
.customer-table { min-width: 1540px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 9px; }
.badge.online { color: #304b61; background: #e5ebef; }
.badge.offline { color: #876936; background: #f4ead9; }
.badge.success { color: #2f6d5b; background: #e3f2ed; }
.badge.warning { color: #9a641f; background: #faefdc; }
.badge.danger { color: #a44b3f; background: var(--danger-soft); }
.badge.neutral { color: #65716e; background: #eef1f0; }
.badge.quality-default, .quality-switch button.quality-default { color: #66706f; background: #e9eceb; }
.badge.quality-low, .quality-switch button.quality-low { color: #6f7474; background: #eceeed; }
.badge.quality-medium, .quality-switch button.quality-medium { color: #8a642c; background: #f6ead6; }
.badge.quality-high, .quality-switch button.quality-high { color: #25604f; background: #dfeee8; }
.badge.quality-not-applicable { color: #556674; background: #e6edf1; }
.pending-count-badge { display: inline-flex; align-items: baseline; gap: 3px; min-width: 42px; padding: 5px 9px; border-radius: 999px; color: #697371; background: #edf0ef; }
.pending-count-badge strong { font-family: Georgia, serif; font-size: 13px; }
.pending-count-badge small { font-size: 8px; }
.pending-count-badge.has-pending { color: #8a642c; background: #f6ead6; }
.reputation-light { display: inline-flex; align-items: center; gap: 8px; min-width: 112px; }
.reputation-light > i { width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; background: #9ba2a1; box-shadow: 0 0 0 1px #cbd0ce, 0 0 9px rgba(92,101,99,.28); }
.reputation-light > span, .reputation-light strong, .reputation-light small { display: block; }
.reputation-light strong { font-size: 10px; white-space: nowrap; }
.reputation-light small { margin-top: 2px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.reputation-light-button { padding: 3px 5px 3px 2px; border: 0; border-radius: 9px; text-align: left; background: transparent; cursor: pointer; transition: .16s ease; }
.reputation-light-button:hover { background: rgba(48,75,97,.07); transform: translateY(-1px); }
.reputation-green > i, .company-score.reputation-green > i { background: #3c956f; box-shadow: 0 0 0 1px #77b99d, 0 0 10px rgba(60,149,111,.45); }
.reputation-yellow > i, .company-score.reputation-yellow > i { background: #d69a35; box-shadow: 0 0 0 1px #e1b669, 0 0 10px rgba(214,154,53,.44); }
.reputation-red > i, .company-score.reputation-red > i { background: #b74843; box-shadow: 0 0 0 1px #cf7a75, 0 0 10px rgba(183,72,67,.48); }
.reputation-unrated > i, .company-score.reputation-unrated > i { background: #9ba2a1; box-shadow: 0 0 0 1px #cbd0ce, 0 0 9px rgba(92,101,99,.28); }
.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.hidden { display: none !important; }

.notice-card { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 13px 16px; border: 1px solid #ddd7cb; border-radius: 13px; color: #665b48; background: #f7f2e9; }
.notice-card > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--forest-2); font-family: Georgia, serif; }
.notice-card p { margin: 0; font-size: 11px; }

.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.company-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 30px rgba(24,51,46,.035); cursor: pointer; transition: .18s ease; }
.company-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.company-card-top { display: flex; justify-content: space-between; gap: 14px; }
.company-card h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 500; }
.company-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.company-score { width: 62px; min-height: 58px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; flex-direction: column; border-radius: 15px; color: var(--forest); background: var(--mint); }
.company-score i { width: 9px; height: 9px; margin-bottom: 4px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; }
.company-score strong { font-family: Georgia, serif; font-size: 16px; line-height: 1; }
.company-score small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.company-score.attention { color: #9a641f; background: var(--warning-soft); }
.metric-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.metric-row div { min-width: 0; }
.metric-row strong, .metric-row span { display: block; }
.metric-row strong { overflow: hidden; text-overflow: ellipsis; font-family: Georgia, serif; font-size: 15px; }
.metric-row span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.metric-row .pending-metric strong { color: #9a641f; }
.company-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: var(--muted); font-size: 9px; }

.modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,28,25,.48); backdrop-filter: blur(3px); }
.modal { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto; padding: 25px; border-radius: 20px; background: white; box-shadow: 0 30px 100px rgba(10,28,25,.28); animation: modal-in .18s ease; }
.modal-large { width: min(820px, 100%); }
.modal-small { width: min(430px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.modal-header h2 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 500; }
.modal-header p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.close-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #f1f4f2; cursor: pointer; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.one-column { grid-template-columns: 1fr; }
.form-grid label { display: grid; gap: 7px; color: #4f5f5b; font-size: 10px; font-weight: 600; }
.form-grid label > small { color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.55; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dedbd4; border-radius: 10px; outline: 0; color: var(--ink); background: #fbfaf7; font-weight: 400; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #8799a7; box-shadow: 0 0 0 3px rgba(48,75,97,.1); }
.form-grid input[readonly] { cursor: not-allowed; color: #3f5651; border-color: #d9dfdc; background: #eef3f1; box-shadow: none; }
.form-field-note { align-self: end; padding: 10px 11px; border: 1px dashed #d9dfdc; border-radius: 10px; color: var(--muted); background: #f7f8f6; font-size: 9px; line-height: 1.55; }
.followup-recorder-field > small::before { margin-right: 4px; color: #557069; font-weight: 700; content: '系统锁定 ·'; }
.followup-date-field > small::before { margin-right: 4px; color: #557069; font-weight: 700; content: '系统锁定 ·'; }
.span-2 { grid-column: span 2; }
.form-section-title { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--forest-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.form-tip { margin-top: 15px; padding: 11px 13px; border-radius: 10px; color: #6c614e; background: #faf3e7; font-size: 9px; line-height: 1.65; }
.customer-duplicate-warning { display: flex; gap: 11px; margin-bottom: 14px; padding: 12px 13px; border: 1px solid #e4b5b1; border-radius: 11px; color: #743b38; background: #fbefed; }
.customer-duplicate-warning > span { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: white; background: #b74843; font-weight: 800; }
.customer-duplicate-warning > div > strong { display: block; margin: 1px 0 6px; font-size: 10px; }
.customer-duplicate-warning p { margin: 3px 0 0; font-size: 9px; line-height: 1.55; }
.customer-duplicate-warning p strong { color: #9a403b; }
.customer-duplicate-warning p b { color: #5f302e; }
.customer-insights-editor { margin-top: 18px; padding: 14px; border: 1px solid #d8dfdc; border-radius: 13px; background: #f7faf9; }
.customer-insights-editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.customer-insights-editor-head strong, .customer-insights-editor-head span { display: block; }
.customer-insights-editor-head strong { color: var(--forest-2); font-size: 11px; }
.customer-insights-editor-head span { margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 400; }
.customer-insight-edit-list { display: grid; gap: 8px; margin-top: 12px; }
.customer-insight-edit-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 9px; align-items: start; }
.customer-insight-edit-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #3f6561; background: #e3efec; font-size: 8px; font-weight: 800; }
.customer-insight-edit-row textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #d9dfdc; border-radius: 10px; outline: 0; color: var(--ink); background: white; font-size: 10px; line-height: 1.6; resize: vertical; }
.customer-insight-edit-row textarea:focus { border-color: #8799a7; box-shadow: 0 0 0 3px rgba(48,75,97,.1); }
.customer-insight-edit-empty { padding: 16px 10px; border: 1px dashed #ccd5d1; border-radius: 10px; color: var(--muted); font-size: 9px; text-align: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }

.detail-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.detail-kpi { padding: 14px; border-radius: 12px; background: #f6f8f7; }
.detail-kpi strong, .detail-kpi span { display: block; }
.detail-kpi strong { font-family: Georgia, serif; font-size: 18px; }
.detail-kpi span { margin-top: 5px; color: var(--muted); font-size: 8px; }
.detail-section { margin-top: 18px; }
.detail-section h4 { margin: 0 0 10px; font-size: 11px; }
.detail-list { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.detail-list-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; padding: 11px 13px; border-top: 1px solid var(--line); font-size: 10px; }
.detail-list-row:first-child { border-top: 0; }
.detail-list-row span { color: var(--muted); }
.company-archive-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.company-archive-heading h4 { margin: 0; }
.company-archive-heading span { color: var(--muted); font-size: 8px; }
.company-contact-list, .company-order-list { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.company-contact-row, .company-order-row { display: grid; align-items: center; gap: 10px; padding: 11px 13px; border-top: 1px solid var(--line); font-size: 9px; }
.company-contact-row:first-child, .company-order-row:first-child { border-top: 0; }
.company-contact-row { grid-template-columns: minmax(130px, 1.3fr) minmax(90px, .8fr) minmax(80px, .7fr) minmax(140px, 1.2fr) minmax(86px, .7fr) auto; }
.company-order-row { grid-template-columns: minmax(150px, 1.35fr) minmax(90px, .8fr) 86px minmax(95px, .85fr) minmax(110px, .9fr) minmax(135px, 1.1fr) auto; }
.company-contact-row > div strong, .company-contact-row > div small, .company-order-row > div strong, .company-order-row > div small, .company-order-row > div span { display: block; }
.company-contact-row small, .company-order-row small, .company-order-row > div span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.company-order-row > div:first-child strong { font-size: 10px; }
.company-order-row.pending-order-row { background: #fffcf5; }
.company-order-actions { display: flex; gap: 5px; }
.company-order-row em, .customer-business-row em { display: inline-flex; margin-left: 7px; padding: 2px 5px; border-radius: 6px; color: #8a642c; background: #f6ead6; font-family: Inter, "Microsoft YaHei", sans-serif; font-size: 7px; font-style: normal; font-weight: 700; vertical-align: middle; }
.pending-detail-kpi { background: #fbf3e4; }
.pending-detail-kpi strong { color: #9a641f; }

.toast { position: fixed; z-index: 90; right: 24px; bottom: 24px; padding: 11px 15px; border-radius: 11px; color: white; background: var(--forest); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 30px rgba(28,35,45,.04); transition: .18s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.product-visual { height: 150px; display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(145deg, #f1eee7, #e8e4dc); }
.product-visual::before { content: ''; width: 118px; height: 46px; border-radius: 12px 12px 8px 8px; background: linear-gradient(145deg, #8d979d, #6d7982); box-shadow: inset 0 -9px rgba(0,0,0,.08), 0 9px 18px rgba(28,35,45,.12); }
.product-visual::after { content: ''; position: absolute; width: 128px; height: 7px; bottom: 44px; border-radius: 5px; background: #5d6870; }
.product-visual.has-image::before, .product-visual.has-image::after { display: none; }
.product-visual > img { width: 100%; height: 100%; object-fit: cover; }
.product-status { position: absolute; top: 12px; right: 12px; padding: 5px 8px; border-radius: 999px; color: #3d5e55; background: rgba(235,242,238,.9); font-size: 9px; }
.product-card-body { padding: 17px; }
.product-card-body h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.product-card-body p { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.product-meta { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.product-meta strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.product-meta span { color: var(--muted); font-size: 9px; }
.product-card-actions { margin-top: 13px; }
.product-card-actions .action-button { flex: 1; padding: 9px 12px; }
.product-image-editor { display: grid; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8f8f5; }
.product-image-copy strong, .product-image-copy span { display: block; }
.product-image-copy strong { color: var(--forest-2); font-size: 11px; }
.product-image-copy span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.product-image-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.product-image-preview { width: 118px; height: 82px; overflow: hidden; display: grid; place-items: center; border: 1px dashed #c9c6be; border-radius: 10px; color: var(--muted); background: #fff; font-size: 9px; }
.product-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.product-image-upload { cursor: pointer; }
.product-specifications-editor { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8f8f5; }
.product-specifications-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.product-specifications-head strong, .product-specifications-head span { display: block; }
.product-specifications-head strong { color: var(--forest-2); font-size: 11px; }
.product-specifications-head span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.product-specification-edit-row { display: grid; grid-template-columns: 26px minmax(180px, 1fr) auto 50px 30px; gap: 8px; align-items: center; margin-top: 8px; }
.product-specification-edit-row > span { color: var(--muted); font: 11px Georgia, serif; }
.product-specification-edit-row > input { min-width: 0; padding: 9px 10px; border: 1px solid #dedbd4; border-radius: 9px; background: #fffefa; }
.specification-image-preview { width: 50px; height: 38px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font-size: 8px; }
.specification-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.specification-image-upload { min-width: 92px; padding: 8px 10px; cursor: pointer; text-align: center; }
.product-specification-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.product-specification-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: var(--forest-2); background: #eef2ef; font-size: 9px; }
.product-specification-tags img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
#product-specification-list { display: grid; gap: 9px; }
.product-specification-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 9px; align-items: center; }
.product-specification-row > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #60716c; background: #e8eeeb; font-size: 9px; font-weight: 700; }
.product-specification-row input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dedbd4; border-radius: 10px; color: var(--ink); background: #fffdf9; outline: 0; }
.product-specification-row input:focus { border-color: #8799a7; box-shadow: 0 0 0 3px rgba(48,75,97,.1); }
.product-specification-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.product-specification-tags span { padding: 4px 7px; border-radius: 999px; color: #51645e; background: #edf2ef; font-size: 8px; }

.modal-xlarge { width: min(1040px, 100%); }
.detail-tabs { display: flex; gap: 24px; margin: 20px 0; border-bottom: 1px solid var(--line); }
.detail-tabs button { padding: 10px 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; }
.detail-tabs button.active { color: var(--forest-2); border-bottom-color: var(--sand); font-weight: 700; }
.detail-tabs button { cursor: pointer; }
.detail-tabs button span { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: #eef1f1; font-size: 8px; }
.customer-tab-pane { display: none; }
.customer-tab-pane.active { display: block; }
.detail-timeline-header { align-items: center; margin-top: 18px; }
.customer-summary { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf7; }
.customer-initial { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: #fffdf8; background: linear-gradient(145deg, #3c586e, #202e3d); font-family: Georgia, serif; font-size: 22px; }
.customer-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; }
.customer-summary-grid div { min-width: 0; }
.customer-summary-grid strong, .customer-summary-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-summary-grid strong { color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .05em; }
.customer-summary-grid span { margin-top: 5px; font-size: 11px; }
.customer-summary-grid .summary-address { grid-column: span 2; }
.customer-summary-grid .summary-address span { overflow: visible; line-height: 1.6; text-overflow: initial; white-space: normal; }
.customer-insights-card { margin-top: 12px; padding: 14px 15px; border: 1px solid #d7e1de; border-radius: 13px; background: linear-gradient(120deg, #f2f8f6, #f8faf9); }
.customer-insights-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.customer-insights-card-head span, .customer-insights-card-head strong { display: block; }
.customer-insights-card-head span { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.customer-insights-card-head strong { margin-top: 4px; font-family: Georgia, "Songti SC", serif; font-size: 15px; font-weight: 500; }
.customer-insights-list { display: grid; gap: 7px; margin-top: 11px; }
.customer-insight-paragraph { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 11px; border-radius: 10px; background: rgba(255,255,255,.76); }
.customer-insight-paragraph > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #35645e; background: #e0efeb; font-size: 8px; font-weight: 800; }
.customer-insight-paragraph p { margin: 3px 0 0; color: #4f5d5a; font-size: 10px; line-height: 1.65; white-space: pre-wrap; }
.customer-insights-empty { padding: 13px 8px; color: var(--muted); font-size: 9px; text-align: center; }
.customer-quality-control { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 12px; padding: 13px 15px; border: 1px solid #ded9ce; border-radius: 13px; background: linear-gradient(120deg, #f8f5ee, #fbfaf7); }
.customer-quality-control > div:first-child { min-width: 0; }
.quality-control-label, .customer-quality-control strong, .customer-quality-control small { display: block; }
.quality-control-label { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.customer-quality-control strong { margin-top: 4px; font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 500; }
.customer-quality-control small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.quality-switch { display: flex; flex: 0 0 auto; gap: 5px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--line); }
.quality-switch button { padding: 7px 12px; border: 1px solid transparent; border-radius: 8px; opacity: .58; cursor: pointer; font-size: 9px; transition: .16s ease; }
.quality-switch button:hover { opacity: .86; }
.quality-switch button.active { border-color: currentColor; opacity: 1; box-shadow: 0 4px 12px rgba(28,35,45,.08); font-weight: 700; }
.quality-not-applicable-note { padding: 8px 11px; border-radius: 9px; color: #556674; background: #e8eef1; font-size: 9px; line-height: 1.6; text-align: right; }
.customer-reputation-card, .company-detail-reputation { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 14px 24px; align-items: center; margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-left: 4px solid #9ba2a1; border-radius: 13px; background: #f7f8f7; }
.customer-reputation-card.reputation-green, .company-detail-reputation.reputation-green { border-left-color: #3c956f; background: #f2f8f5; }
.customer-reputation-card.reputation-yellow, .company-detail-reputation.reputation-yellow { border-left-color: #d69a35; background: #fbf7ee; }
.customer-reputation-card.reputation-red, .company-detail-reputation.reputation-red { border-left-color: #b74843; background: #fbf1f0; }
.reputation-card-main p, .company-detail-reputation p { margin: 7px 0 0; font-size: 10px; }
.reputation-card-main > small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.reputation-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(56px, 1fr)); gap: 6px; }
.reputation-stat-grid div { padding: 8px 9px; border-radius: 9px; text-align: center; background: rgba(255,255,255,.72); }
.reputation-stat-grid strong, .reputation-stat-grid span { display: block; }
.reputation-stat-grid strong { font-family: Georgia, serif; font-size: 15px; }
.reputation-stat-grid span { margin-top: 3px; color: var(--muted); font-size: 7px; white-space: nowrap; }
.reputation-formula-note { grid-column: 1 / -1; padding-top: 9px; border-top: 1px dashed rgba(100,110,108,.22); color: var(--muted); font-size: 8px; line-height: 1.6; }
.company-detail-reputation { margin: 0 0 16px; }
.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; position: relative; padding: 0 0 20px; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; top: 35px; bottom: 0; left: 18px; width: 1px; background: var(--line); }
.timeline-icon { width: 36px; height: 36px; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: var(--forest-2); background: var(--mint); font-size: 12px; }
.timeline-body { padding: 3px 0 0; }
.timeline-body strong { display: block; font-size: 11px; }
.timeline-body p { margin: 6px 0 0; color: #59616b; font-size: 10px; line-height: 1.65; }
.timeline-order-link { display: block; margin-top: 6px; padding: 0; border: 0; color: #2f6662; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; text-align: left; }
.timeline-order-link:hover { color: #8b6b37; text-decoration: underline; }
.timeline-next { display: inline-flex; margin-top: 9px; padding: 5px 8px; border-radius: 8px; color: #745b2e; background: var(--sand-soft); font-size: 9px; font-weight: 700; }
.timeline-body small, .timeline-date { color: var(--muted); font-size: 8px; }
.timeline-date { padding-top: 4px; white-space: nowrap; }
.followup-record-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.followup-edit-note { color: var(--muted); font-size: 8px; line-height: 1.45; }
.followup-record-actions { display: flex; gap: 6px; margin-left: auto; }
.followup-record-actions button { padding: 5px 8px; border: 1px solid #dce3e0; border-radius: 8px; color: #41665f; background: #f4f8f6; cursor: pointer; font-size: 8px; }
.followup-record-actions button:hover { border-color: #9ab2ac; background: #eaf2ef; }
.followup-record-actions .delete { color: #9a4d49; border-color: #ebd8d6; background: #fff7f6; }
.followup-record-actions .delete:hover { color: white; border-color: #a94f49; background: #a94f49; }
.customer-business-list { display: grid; gap: 9px; }
.customer-business-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; }
.customer-business-row strong, .customer-business-row small { display: block; }
.customer-business-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.customer-business-row > span { font-size: 10px; }
.order-followup-history { margin-top: 17px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; overflow: hidden; }
.order-followup-history-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); color: var(--forest-2); font-size: 10px; }
.order-followup-history-head span { color: var(--muted); font-size: 8px; font-weight: 600; }
#order-followup-history-list { max-height: 210px; overflow-y: auto; }
.order-followup-history-row { padding: 10px 13px; border-top: 1px solid var(--line); }
.order-followup-history-row:first-child { border-top: 0; }
.order-followup-history-row > div { display: flex; justify-content: space-between; gap: 12px; }
.order-followup-history-row strong { font-size: 9px; }
.order-followup-history-row span, .order-followup-history-row small { color: var(--muted); font-size: 8px; }
.order-followup-history-row p { margin: 5px 0; color: #59616b; font-size: 9px; line-height: 1.55; }
.order-followup-history-empty { padding: 20px 13px; color: var(--muted); font-size: 9px; text-align: center; }
.customer-business-row.pending-order-row { border-color: #ead8b8; background: #fffcf5; }

.order-section-title { margin-top: 22px; }
.order-section-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.order-import-actions { display: flex; gap: 7px; align-items: center; letter-spacing: 0; }
.mini-link-button, .order-file-button { padding: 7px 10px; border: 1px solid #d6dcd9; border-radius: 9px; color: #355e5a; background: #f5f8f7; cursor: pointer; font-size: 9px; font-weight: 700; }
.mini-link-button:hover, .order-file-button:hover { border-color: #9fb7b2; background: #eaf3f1; }
.order-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.order-import-note { margin: -5px 0 10px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.order-import-summary { margin: 0 0 10px; padding: 9px 11px; border: 1px solid #bbd7cf; border-radius: 9px; color: #35675a; background: #edf7f3; font-size: 9px; }
.order-builder-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.order-builder-head, .order-item-row { min-width: 720px; display: grid; grid-template-columns: minmax(260px, 1.8fr) 100px 130px 140px 38px; gap: 10px; align-items: center; padding: 10px 12px; }
.order-builder-head { color: var(--muted); background: #f6f4ef; font-size: 9px; font-weight: 700; }
.order-item-row { border-top: 1px solid var(--line); }
.order-item-row input { width: 100%; padding: 9px 10px; border: 1px solid #dedbd4; border-radius: 9px; background: #fffefa; outline: 0; }
.order-line-total { font-family: Georgia, serif; font-size: 13px; }
.completion-options { display: grid; gap: 9px; }
.completion-option { display: grid; grid-template-columns: 18px 38px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; cursor: pointer; transition: .16s ease; }
.completion-option:has(input:checked) { border-color: #758b99; background: #f1f5f5; box-shadow: 0 0 0 3px rgba(48,75,97,.08); }
.completion-option input { margin: 0; accent-color: var(--forest-2); }
.completion-option > span:last-child, .completion-option strong, .completion-option small { display: block; }
.completion-option strong { font-size: 11px; }
.completion-option small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.completion-option-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; }
.completion-option-icon.success { color: #2f755b; background: #e2f1ea; }
.completion-option-icon.warning { color: #a16a22; background: #faeed9; }
.completion-option-icon.danger { color: #a44943; background: #f7e5e3; }
.completion-overdue-fields, .completion-note-field { margin-top: 13px; }
.completion-score-preview { padding: 10px 12px; border-radius: 10px; color: #7a5b29; background: #fbf3e4; font-size: 9px; }
.completion-score-preview strong { font-size: 12px; }
.completion-action { color: #315d54; background: #e1efea; }
.refusal-warning { display: flex; gap: 12px; padding: 14px; border: 1px solid #e8c1bd; border-radius: 12px; color: #713d38; background: #fbefed; }
.refusal-warning > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: white; background: #b74843; font-weight: 800; }
.refusal-warning strong { display: block; font-size: 11px; }
.refusal-warning p { margin: 5px 0 0; font-size: 9px; line-height: 1.6; }
.danger-confirm-button { background: #a84743; }
.danger-confirm-button:hover { background: #913b38; }
.reputation-detail-summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-left: 4px solid #9ba2a1; border-radius: 13px; background: #f7f8f7; }
.reputation-detail-summary.reputation-green { border-left-color: #3c956f; background: #f2f8f5; }
.reputation-detail-summary.reputation-yellow { border-left-color: #d69a35; background: #fbf7ee; }
.reputation-detail-summary.reputation-red { border-left-color: #b74843; background: #fbf1f0; }
.reputation-detail-summary p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.reputation-score-large { text-align: right; }
.reputation-score-large strong, .reputation-score-large span { display: block; }
.reputation-score-large strong { font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.reputation-score-large span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.reputation-detail-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.reputation-detail-counts span { padding: 7px 10px; border-radius: 9px; color: var(--muted); background: #f1f3f2; font-size: 9px; }
.reputation-detail-counts strong { margin-left: 5px; color: var(--ink); }
.reputation-formula-box { margin-top: 11px; padding: 10px 12px; border-radius: 10px; color: #70634d; background: #faf4e8; font-size: 8px; line-height: 1.6; }
.reputation-basis-list { display: grid; gap: 8px; }
.reputation-basis-row { display: grid; grid-template-columns: minmax(170px, 1.25fr) 90px 110px 110px 130px; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfaf7; }
.reputation-basis-row > div { min-width: 0; }
.reputation-basis-row strong, .reputation-basis-row small, .reputation-basis-row span { display: block; }
.reputation-basis-row > div:first-child strong { font-size: 10px; }
.reputation-basis-row small, .reputation-basis-row > div > span { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 8px; white-space: nowrap; }
.reputation-basis-row > div > strong { margin-top: 4px; font-size: 9px; }
.reputation-basis-row .badge { display: inline-flex; }
.order-payment-layout { display: grid; grid-template-columns: 1fr 250px; gap: 24px; margin-top: 20px; }
.order-total-card { min-height: 138px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border-radius: 14px; color: #fffdf8; background: linear-gradient(145deg, #23394b, #172331); }
.order-total-card span, .order-total-card small { color: #bac5cb; font-size: 9px; }
.order-total-card strong { margin: 10px 0; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.credit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; border: 1px solid #e7d7b7; border-radius: 12px; background: #fbf5e9; }
.calculated-due { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.calculated-due span { color: var(--muted); font-size: 9px; }
.calculated-due strong { color: #745b2e; font-size: 12px; }
#order-status-delivery-fields { margin-top: 14px; padding: 14px; border: 1px solid #e7d7b7; border-radius: 12px; background: #fbf5e9; }

.pi-header-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.pi-section-title { margin-top: 20px; }
.pi-builder-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pi-builder-head, .pi-item-row { min-width: 860px; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.3fr) 90px 120px 120px 38px; gap: 10px; align-items: center; padding: 10px 12px; }
.pi-builder-head { color: var(--muted); background: #f6f4ef; font-size: 9px; font-weight: 700; }
.pi-item-row { border-top: 1px solid var(--line); }
.pi-item-row select, .pi-item-row input { width: 100%; padding: 9px 10px; border: 1px solid #dedbd4; border-radius: 9px; background: #fffefa; outline: 0; }
.pi-specification-select { display: grid; grid-template-columns: 1fr 34px; gap: 7px; align-items: center; }
.pi-specification-select img { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; }
.pi-line-total { font-family: Georgia, serif; font-size: 13px; }
.remove-line { width: 30px; height: 30px; border: 0; border-radius: 8px; color: var(--danger); background: var(--danger-soft); cursor: pointer; }
.add-line-button { margin-top: 10px; }
.pi-bottom-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; margin-top: 20px; }
.pi-totals-editor { display: grid; gap: 10px; align-content: start; padding: 15px; border-radius: 12px; background: #f6f4ef; }
.pi-totals-editor label, .pi-totals-editor > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 10px; }
.pi-totals-editor input { width: 130px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; text-align: right; background: var(--paper); }
.pi-totals-editor > div { padding-top: 12px; border-top: 1px solid var(--line); }
.pi-totals-editor strong { color: var(--danger); font-family: Georgia, serif; font-size: 20px; }

.pi-document { padding: 32px 36px; color: #1f2731; background: white; }
.pi-doc-head { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 22px; border-bottom: 2px solid #25384a; }
.pi-doc-brand h2 { margin: 0; font-family: Georgia, serif; font-size: 26px; letter-spacing: .08em; }
.pi-doc-brand p, .pi-doc-meta p { margin: 5px 0 0; color: #68717a; font-size: 9px; }
.pi-doc-meta { text-align: right; }
.pi-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 25px 0; }
.pi-doc-parties h4 { margin: 0 0 8px; color: #9a7a44; font-size: 9px; letter-spacing: .12em; }
.pi-doc-parties p { margin: 4px 0; font-size: 10px; }
.pi-doc-table { width: 100%; white-space: normal; }
.pi-doc-table th, .pi-doc-table td { padding: 10px; font-size: 9px; }
.pi-doc-total { width: 310px; margin: 18px 0 0 auto; display: grid; gap: 7px; }
.pi-doc-total div { display: flex; justify-content: space-between; font-size: 10px; }
.pi-doc-total div:last-child { margin-top: 6px; padding-top: 10px; border-top: 1px solid #cfd4d7; font-size: 14px; font-weight: 700; }
.pi-doc-terms { margin-top: 28px; padding-top: 18px; border-top: 1px solid #dfe2e4; font-size: 9px; line-height: 1.8; }

.visit-map-heading { align-items: flex-start; }
.visit-map-search-wrap { display: flex; gap: 8px; align-items: center; }
.visit-map-search { width: 310px; }
.visit-map-search-wrap .primary-button, .visit-map-search-wrap .secondary-button { padding: 11px 16px; white-space: nowrap; }
.visit-map-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.visit-map-kpis > div { min-height: 92px; padding: 16px 18px; border: 1px solid rgba(35, 70, 66, .12); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(238, 245, 243, .92)); box-shadow: 0 10px 24px rgba(29, 50, 52, .05); }
.visit-map-kpis span, .visit-map-kpis strong { display: block; }
.visit-map-kpis span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.visit-map-kpis strong { margin-top: 11px; color: #204842; font-family: Georgia, serif; font-size: 25px; }
.visit-map-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .72fr); gap: 16px; align-items: stretch; }
.visit-world-panel, .visit-client-panel { padding: 18px; }
.visit-world-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 14px; }
.visit-world-head h3, .visit-client-panel-head h3 { margin: 4px 0 5px; font-family: Georgia, 'Noto Serif SC', serif; font-size: 20px; }
.visit-world-head p, .visit-client-panel-head p { margin: 0; color: var(--muted); font-size: 10px; }
.visit-map-legend { display: grid; gap: 7px; justify-items: end; color: var(--muted); font-size: 9px; text-align: right; }
.visit-map-legend span:first-child { color: #235f56; font-weight: 700; }
.visit-map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #d0a65b; box-shadow: 0 0 0 4px rgba(208, 166, 91, .18); }
.visit-world-shell { position: relative; overflow: hidden; border: 1px solid rgba(38, 82, 76, .12); border-radius: 18px; background: #e8f1ef; }
#visit-world-map { display: block; width: 100%; aspect-ratio: 2 / 1; transition: .5s ease; }
.visit-map-ocean { fill: url(#visitOcean); }
.visit-map-grid path { fill: none; stroke: rgba(61, 105, 99, .09); stroke-width: 1; }
.visit-map-land-layer path { fill: #b9cfca; stroke: #f5faf8; stroke-width: 2; cursor: pointer; transition: fill .18s ease, filter .18s ease; }
.visit-map-land-layer path:hover, .visit-map-land-layer path.active { fill: #7fa69e; filter: drop-shadow(0 3px 5px rgba(34, 68, 64, .14)); }
.visit-map-marker { cursor: pointer; outline: none; }
.visit-marker-pulse { fill: rgba(208, 166, 91, .22); stroke: rgba(208, 166, 91, .32); stroke-width: 1; }
.visit-marker-core { fill: #b9863d; stroke: #fffaf0; stroke-width: 1.5; }
.visit-map-marker:hover .visit-marker-core, .visit-map-marker.selected .visit-marker-core { fill: #183d39; }
.visit-map-marker text { fill: #fff; font-family: Arial, sans-serif; font-weight: 800; text-anchor: middle; pointer-events: none; }
.visit-map-hint { position: absolute; right: 13px; bottom: 11px; padding: 6px 9px; border: 1px solid rgba(34, 73, 68, .12); border-radius: 999px; color: #48635f; background: rgba(248, 252, 251, .86); backdrop-filter: blur(5px); font-size: 8px; }
.visit-client-panel { display: flex; min-height: 420px; flex-direction: column; }
.visit-client-panel-head { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.visit-customer-list { display: grid; gap: 10px; max-height: 520px; padding: 13px 2px 2px; overflow-y: auto; }
.visit-customer-card { padding: 13px; border: 1px solid #dbe5e2; border-radius: 13px; background: linear-gradient(140deg, #fffefa, #f5f9f7); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.visit-customer-card:hover { transform: translateY(-2px); border-color: #a9c4bd; box-shadow: 0 10px 22px rgba(35, 70, 66, .09); }
.visit-customer-main, .visit-location-line { display: flex; gap: 10px; align-items: center; }
.visit-customer-main > div, .visit-location-line > div { min-width: 0; }
.visit-customer-main strong, .visit-customer-main small, .visit-location-line strong, .visit-location-line small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-customer-main strong { font-size: 12px; }
.visit-customer-main small, .visit-location-line small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.visit-location-line { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(35, 70, 66, .09); }
.visit-location-line > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #7a5e2d; background: #f4e7ce; }
.visit-location-line strong { font-size: 10px; }
.visit-customer-card > p { margin: 9px 0 0; overflow: hidden; color: #5f6c6a; font-size: 9px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.visit-open-customer { display: block; margin-top: 9px; color: #22625a; font-size: 9px; font-weight: 700; text-align: right; }
.visit-map-empty { min-height: 260px; display: grid; align-content: center; justify-items: center; color: var(--muted); text-align: center; }
.visit-map-empty > span { display: grid; width: 42px; height: 42px; margin-bottom: 11px; place-items: center; border-radius: 15px; color: #6c8e88; background: #eaf2f0; font-size: 20px; }
.visit-map-empty strong { color: #334a47; font-size: 11px; }
.visit-map-empty p { margin: 6px 0 0; font-size: 9px; }
.visit-unresolved-panel { margin-top: 16px; padding: 16px 18px; border: 1px solid #ead5b5; border-radius: 16px; background: linear-gradient(135deg, #fffaf1, #f9f2e5); }
.visit-unresolved-panel > div:first-child { display: flex; gap: 12px; align-items: center; }
.visit-unresolved-panel > div:first-child > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #8a662d; background: #f0dfbe; font-weight: 800; }
.visit-unresolved-panel strong, .visit-unresolved-panel p { display: block; margin: 0; }
.visit-unresolved-panel strong { font-size: 11px; }
.visit-unresolved-panel p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.visit-unresolved-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.visit-unresolved-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(138, 102, 45, .13); border-radius: 11px; background: rgba(255, 255, 255, .62); }
.visit-unresolved-list p { min-width: 0; }
.visit-unresolved-list small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.visit-map-workspace { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(255px, .72fr) minmax(430px, 1.65fr); gap: 14px; align-items: stretch; }
.visit-map-workspace > .panel { min-width: 0; }
.visit-customer-detail-panel { min-height: 560px; padding: 17px; overflow: hidden; }
.visit-map-detail-empty { display: grid; min-height: 100%; align-content: center; justify-items: center; padding: 24px 12px; color: var(--muted); text-align: center; }
.visit-map-detail-empty > span { display: grid; width: 48px; height: 48px; margin-bottom: 13px; place-items: center; border-radius: 17px; color: #7a5e2d; background: #f4e7ce; font-size: 21px; }
.visit-map-detail-empty strong { color: #334a47; font-size: 12px; }
.visit-map-detail-empty p { max-width: 210px; margin: 7px 0 0; font-size: 9px; line-height: 1.7; }
.visit-map-detail-head { display: flex; gap: 12px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.visit-map-detail-head .person-avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 15px; }
.visit-map-detail-head > div { min-width: 0; }
.visit-map-detail-head strong, .visit-map-detail-head span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-map-detail-head strong { color: #213a37; font-family: Georgia, 'Noto Serif SC', serif; font-size: 17px; }
.visit-map-detail-head span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.visit-map-detail-path { display: flex; gap: 5px; margin: 14px 0; flex-wrap: wrap; }
.visit-map-detail-path span { padding: 5px 7px; border-radius: 7px; color: #3f635e; background: #edf4f2; font-size: 8px; font-weight: 700; }
.visit-map-detail-grid { display: grid; gap: 8px; }
.visit-map-detail-grid > div { padding: 10px 11px; border: 1px solid rgba(35, 70, 66, .09); border-radius: 11px; background: #fafcfb; }
.visit-map-detail-grid span, .visit-map-detail-grid strong { display: block; }
.visit-map-detail-grid span { color: var(--muted); font-size: 8px; }
.visit-map-detail-grid strong { margin-top: 5px; color: #2e4441; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.visit-map-detail-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 9px; }
.visit-map-detail-stats > div { padding: 10px; border-radius: 11px; background: linear-gradient(145deg, #f1f6f4, #fffdf8); }
.visit-map-detail-stats strong, .visit-map-detail-stats span { display: block; }
.visit-map-detail-stats strong { color: #254a45; font-size: 15px; }
.visit-map-detail-stats span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.visit-map-detail-actions { display: grid; gap: 8px; margin-top: 13px; }
.visit-map-detail-actions .primary-button, .visit-map-detail-actions .secondary-button { width: 100%; justify-content: center; }
.google-map-shell { min-height: 510px; background: #e7efed; }
#visit-google-map { width: 100%; min-height: 510px; }
.visit-map-status { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; padding: 30px; color: #526864; background: linear-gradient(145deg, rgba(240, 247, 245, .97), rgba(226, 237, 234, .97)); text-align: center; }
.visit-map-status.hidden { display: none; }
.visit-map-status.error { color: #72532b; background: linear-gradient(145deg, rgba(255, 250, 240, .98), rgba(246, 234, 213, .98)); }
.visit-map-status-icon { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; border-radius: 19px; color: #fff; background: #214c46; box-shadow: 0 12px 28px rgba(33, 76, 70, .2); font-size: 24px; }
.visit-map-status.error .visit-map-status-icon { background: #a47434; }
.visit-map-status strong { color: #25433f; font-size: 14px; }
.visit-map-status p { max-width: 360px; margin: 8px 0 0; font-size: 10px; line-height: 1.7; }
.visit-map-status code { display: inline-block; margin-top: 10px; padding: 6px 9px; border-radius: 8px; color: #335953; background: rgba(255, 255, 255, .72); font-size: 9px; }
.visit-map-loading-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #c5964f; box-shadow: 0 0 0 4px rgba(197, 150, 79, .16); }
.visit-address-editor { padding: 14px; border: 1px solid rgba(35, 70, 66, .12); border-radius: 14px; background: linear-gradient(145deg, #f8fbfa, #fffdf9); }
.shipping-address-editor { background: linear-gradient(145deg, #fbfaf6, #fffdf9); }
.visit-address-editor > label { display: grid; gap: 7px; }
.visit-address-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.visit-address-actions span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.customer-location-preview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(190px, .7fr); gap: 12px; margin-top: 12px; }
#customer-location-mini-map { min-height: 220px; overflow: hidden; border: 1px solid rgba(35, 70, 66, .12); border-radius: 13px; background: #e8f0ee; }
.customer-location-meta { display: grid; align-content: start; gap: 8px; }
.customer-location-meta > div { padding: 10px; border: 1px solid rgba(35, 70, 66, .09); border-radius: 10px; background: rgba(255, 255, 255, .78); }
.customer-location-meta span, .customer-location-meta strong { display: block; }
.customer-location-meta span { color: var(--muted); font-size: 8px; }
.customer-location-meta strong { margin-top: 4px; color: #304b47; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }

/* 待办任务与 AI 工具 */
.sidebar { overflow-y: auto; }
.nav-section-label { margin: 13px 14px 2px; color: #74808a; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.todo-panel { margin-top: 18px; }
.todo-panel-header { align-items: center; }
.todo-date-controls { display: flex; gap: 6px; align-items: center; }
.todo-date-controls .secondary-button { min-width: 34px; padding: 7px 10px; }
.todo-calendar-picker { position: relative; }
.todo-date-button { min-width: 142px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfaf7; cursor: pointer; }
.todo-calendar-popover { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 324px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffefa; box-shadow: 0 18px 48px rgba(30, 42, 48, .18); }
.todo-calendar-head { display: grid; grid-template-columns: 34px 1fr 34px; gap: 8px; align-items: center; }
.todo-calendar-head strong { text-align: center; font: 15px Georgia, serif; }
.todo-calendar-head button, .todo-calendar-foot button { border: 0; color: var(--forest-2); background: transparent; cursor: pointer; }
.todo-calendar-head button { width: 34px; height: 34px; border-radius: 9px; font-size: 21px; }
.todo-calendar-head button:hover { background: #edf2ef; }
.todo-calendar-week, .todo-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.todo-calendar-week { margin: 10px 0 4px; color: var(--muted); font-size: 8px; text-align: center; }
.todo-calendar-day, .todo-calendar-blank { min-height: 38px; }
.todo-calendar-day { position: relative; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--ink); background: transparent; cursor: pointer; }
.todo-calendar-day strong { font-size: 10px; font-weight: 600; }
.todo-calendar-day span { position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border-radius: 99px; color: white; background: var(--sand); font-size: 7px; font-weight: 800; }
.todo-calendar-day.is-today { box-shadow: inset 0 0 0 1px #8fa7a1; }
.todo-calendar-day.is-selected { color: white; background: var(--forest-2); }
.todo-calendar-day.is-selected span { color: var(--forest-2); background: white; }
.todo-calendar-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.todo-summary { display: flex; gap: 16px; align-items: center; margin: -4px 0 12px; padding: 10px 12px; border-radius: 11px; color: var(--muted); background: #f6f8f7; font-size: 9px; }
.todo-summary span { display: flex; gap: 6px; align-items: center; }
.todo-summary strong { color: var(--ink); }
.todo-summary i { width: 7px; height: 7px; border-radius: 50%; }
.todo-pending-dot { background: #c58e3d; }
.todo-done-dot { background: #4d8b75; }
.todo-overdue-dot { background: var(--danger); }
.todo-overdue-summary { color: var(--danger); font-weight: 700; }
.todo-list { display: grid; }
.todo-row { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.todo-row:first-child { border-top: 0; }
.todo-row.is-overdue { margin: 5px 0; padding: 14px 12px; border: 1px solid #e7bbb5; border-radius: 13px; background: #fff5f3; box-shadow: 0 7px 20px rgba(164, 75, 63, .06); }
.todo-row.is-overdue:first-child { border-top: 1px solid #e7bbb5; }
.todo-row.is-overdue .todo-check { border-color: #cf8b82; }
.todo-row.is-overdue .todo-time strong { color: #973f35; }
.todo-row.is-done { opacity: .6; }
.todo-row.is-done .todo-main p { text-decoration: line-through; }
.todo-check { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #c9d2cf; border-radius: 9px; color: white; background: white; cursor: pointer; }
.todo-row.is-done .todo-check { border-color: #4d8b75; background: #4d8b75; }
.todo-time strong, .todo-time span { display: block; }
.todo-time strong { font-family: Georgia, serif; font-size: 13px; }
.todo-time span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.todo-main { min-width: 0; }
.todo-main > strong { display: block; font-size: 10px; }
.todo-original-date { display: block; margin-bottom: 5px; color: #a44b3f; font-size: 9px; font-weight: 800; }
.todo-main p { margin: 5px 0 0; overflow: hidden; color: #58616b; font-size: 10px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.todo-order-link { margin-top: 5px; padding: 0; border: 0; color: #356a64; background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; }
.todo-actions { display: flex; gap: 7px; align-items: center; }
.todo-empty { display: grid; min-height: 170px; align-content: center; justify-items: center; color: var(--muted); text-align: center; }
.todo-empty > span { width: 38px; height: 38px; display: grid; margin-bottom: 10px; place-items: center; border-radius: 13px; color: #4d7b70; background: #e7efed; font-size: 17px; }
.todo-empty strong { color: #40504e; font-size: 11px; }
.todo-empty p { margin: 5px 0 0; font-size: 9px; }
.followup-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border-radius: 13px; background: #eef1f0; }
.followup-mode-switch button { padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #6d7577; background: transparent; cursor: pointer; text-align: left; }
.followup-mode-switch button.active { border-color: #d9d8d1; color: var(--forest); background: #fffefa; box-shadow: 0 5px 14px rgba(23,35,49,.07); }
.followup-mode-switch button small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 400; }
.followup-todo-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; padding: 13px; border: 1px solid #e8d8b9; border-radius: 13px; background: #fffaf1; }
.followup-todo-fields label { display: grid; gap: 7px; color: #6f5b38; font-size: 10px; font-weight: 700; }
.followup-todo-fields label, .followup-todo-fields input, .followup-todo-fields select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.followup-todo-fields input, .followup-todo-fields select { width: 100%; padding: 10px 11px; border: 1px solid #ded3bf; border-radius: 10px; outline: 0; background: white; }
.followup-todo-fields small { color: #8a7757; font-size: 8px; font-weight: 400; line-height: 1.45; }
.followup-task-chip { display: flex; gap: 8px; align-items: center; width: fit-content; margin-top: 8px; padding: 5px 7px; border-radius: 8px; color: #785a28; background: #f7ead3; font-size: 8px; }
.followup-task-chip.is-done { color: #477064; background: #e4efeb; }
.followup-task-chip button { padding: 1px 4px; border: 0; color: inherit; background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }

.ai-heading { margin-bottom: 18px; }
.ai-heading-actions { display: flex; gap: 8px; align-items: center; }
.ai-manual-badge { padding: 9px 12px; border: 1px solid #d9e5e1; border-radius: 999px; color: #37675f; background: #edf5f2; font-size: 9px; font-weight: 800; }
.ai-status-button { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: #7b6a4e; background: var(--paper); cursor: pointer; font-size: 9px; }
.ai-status-button i { width: 7px; height: 7px; border-radius: 50%; background: #c39045; box-shadow: 0 0 0 4px rgba(195,144,69,.12); }
.ai-status-button.connected { color: #356b5e; }
.ai-status-button.connected i { background: #4b9278; box-shadow: 0 0 0 4px rgba(75,146,120,.12); }
.ai-manual-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 16px; padding: 13px 16px; }
.ai-manual-steps > div { display: grid; grid-template-columns: 31px 1fr; column-gap: 9px; align-items: center; }
.ai-manual-steps > div > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #4e716a, #294d47); font-family: Georgia, serif; font-size: 12px; }
.ai-manual-steps strong, .ai-manual-steps small { display: block; }
.ai-manual-steps strong { color: #344a46; font-size: 9px; }
.ai-manual-steps small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.ai-manual-steps > i { color: #b5b9b5; font-style: normal; }
.ai-profile-layout, .ai-outreach-layout { display: grid; grid-template-columns: minmax(290px, .68fr) minmax(0, 1.32fr); gap: 16px; align-items: start; }
.ai-control-card, .ai-outreach-form, .ai-result-card { min-height: 480px; }
.ai-step-label { margin-bottom: 14px; color: var(--forest-2); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.ai-field { display: grid; gap: 7px; color: #4f5f5b; font-size: 10px; font-weight: 700; }
.ai-field select { width: 100%; padding: 11px; border: 1px solid #dedbd4; border-radius: 10px; outline: 0; background: #fbfaf7; }
.ai-full-button { width: 100%; margin-top: 16px; }
.ai-action-stack { display: grid; gap: 8px; margin-top: 16px; }
.ai-action-stack .ai-full-button { margin-top: 0; }
.ai-customer-snapshot { margin-top: 13px; padding: 14px; border: 1px solid #dfe7e4; border-radius: 14px; background: linear-gradient(145deg, #f6faf8, #fffdf9); }
.ai-mini-empty { padding: 35px 8px; color: var(--muted); font-size: 9px; text-align: center; }
.ai-person-line { display: flex; gap: 10px; align-items: center; }
.ai-person-line > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #536a7e, #273c4e); font-family: Georgia, serif; }
.ai-person-line strong, .ai-person-line small { display: block; }
.ai-person-line strong { font-size: 11px; }
.ai-person-line small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.ai-snapshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.ai-snapshot-grid > div { padding: 8px; border-radius: 9px; text-align: center; background: rgba(255,255,255,.8); }
.ai-snapshot-grid strong, .ai-snapshot-grid span { display: block; }
.ai-snapshot-grid strong { font-family: Georgia, serif; font-size: 15px; }
.ai-snapshot-grid span { margin-top: 2px; color: var(--muted); font-size: 7px; }
.ai-customer-snapshot > p { margin: 11px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; }
.ai-research-notice, .ai-config-note { margin-top: 13px; padding: 12px; border: 1px solid #e9d9bc; border-radius: 12px; background: #fffaf1; }
.ai-research-notice strong, .ai-config-note strong { font-size: 9px; }
.ai-research-notice p, .ai-config-note p { margin: 5px 0 0; color: #746957; font-size: 8px; line-height: 1.65; }
.ai-empty-result, .ai-loading-result, .ai-error-result { min-height: 430px; display: grid; align-content: center; justify-items: center; color: var(--muted); text-align: center; }
.ai-empty-result > span, .ai-error-result > span { width: 50px; height: 50px; display: grid; margin-bottom: 13px; place-items: center; border-radius: 17px; color: #755b2f; background: #f4e8d1; font-size: 20px; }
.ai-empty-result strong, .ai-loading-result strong, .ai-error-result strong { color: #394945; font-size: 12px; }
.ai-empty-result p, .ai-loading-result p, .ai-error-result p { max-width: 330px; margin: 7px 0 0; font-size: 9px; line-height: 1.7; }
.ai-loading-result > span { width: 34px; height: 34px; margin-bottom: 15px; border: 3px solid #dbe3e0; border-top-color: #3e6b65; border-radius: 50%; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-error-result > span { color: #934d47; background: #f6e7e5; }
.ai-result-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ai-result-head h3 { margin: 4px 0 0; font-family: Georgia, 'Songti SC', serif; font-size: 19px; font-weight: 500; }
.ai-profile-summary { margin-top: 14px; padding: 14px; border-left: 3px solid var(--sand); border-radius: 0 12px 12px 0; color: #3f4a48; background: #faf6ed; font-size: 10px; line-height: 1.75; }
.ai-result-section { margin-top: 15px; }
.ai-result-section h4 { margin: 0 0 8px; color: #354a47; font-size: 10px; }
.ai-result-section p, .ai-result-section li { color: #58616b; font-size: 9px; line-height: 1.7; }
.ai-result-section p { margin: 0; }
.ai-result-section ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; }
.ai-result-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-result-columns > div { padding: 12px; border-radius: 12px; background: #f2f7f5; }
.ai-result-columns > .risk { background: #fbf3f1; }
.ai-insight-preview { display: grid; gap: 7px; }
.ai-insight-preview > div { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px; border: 1px solid #e4e7e4; border-radius: 10px; background: #fbfcfb; }
.ai-insight-preview span { color: #9a8155; font-family: Georgia, serif; font-size: 10px; }
.ai-source-list { display: grid; gap: 6px; }
.ai-source-list a { display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid #e1e6e4; border-radius: 10px; color: #35524e; text-decoration: none; background: #fbfcfb; }
.ai-source-list a > span { color: #9a8155; font-family: Georgia, serif; }
.ai-source-list strong, .ai-source-list small { display: block; }
.ai-source-list strong { font-size: 9px; }
.ai-source-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.ai-source-empty { padding: 11px; border-radius: 10px; color: var(--muted); background: #f5f6f5; font-size: 8px; }
.ai-result-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.ai-output-field { display: grid; gap: 7px; margin-top: 15px; color: #4f5f5b; font-size: 9px; font-weight: 700; }
.ai-output-field input, .ai-output-field textarea { width: 100%; padding: 12px; border: 1px solid #dcded9; border-radius: 11px; outline: 0; color: var(--ink); background: #fbfcfb; font-weight: 400; line-height: 1.75; resize: vertical; }
.ai-output-field input:focus, .ai-output-field textarea:focus { border-color: #8799a7; box-shadow: 0 0 0 3px rgba(48,75,97,.1); }
.ai-output-note { margin-top: 11px; padding: 10px; border-radius: 10px; color: #746957; background: #fff8eb; font-size: 8px; line-height: 1.55; }
.ai-manual-exchange { min-height: 430px; }
.ai-manual-callout { display: flex; gap: 10px; align-items: flex-start; margin-top: 15px; padding: 11px 12px; border: 1px solid #dfe8e5; border-radius: 12px; background: #f5f9f7; }
.ai-manual-callout > span { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: #416b64; font-family: Georgia, serif; font-size: 10px; }
.ai-manual-callout strong { display: block; color: #354d49; font-size: 9px; }
.ai-manual-callout p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.ai-prompt-field textarea { color: #3e4b49; background: #f7f8f6; font-family: Consolas, 'SFMono-Regular', monospace; font-size: 8px; line-height: 1.7; }
.ai-manual-buttons { display: flex; gap: 8px; margin-top: 10px; }
.ai-manual-buttons button { flex: 1; justify-content: center; }
.ai-manual-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; color: var(--muted); font-size: 8px; }
.ai-manual-divider::before, .ai-manual-divider::after { height: 1px; flex: 1; background: var(--line); content: ''; }
.knowledge-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 13px; padding: 10px; }
.knowledge-summary { display: flex; gap: 9px; margin-bottom: 13px; overflow-x: auto; }
.knowledge-summary > div { min-width: 125px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.knowledge-summary strong, .knowledge-summary span { display: block; }
.knowledge-summary strong { font-family: Georgia, serif; font-size: 17px; }
.knowledge-summary span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.knowledge-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: 0 8px 25px rgba(24,51,46,.035); }
.knowledge-card-head { display: flex; gap: 10px; align-items: center; }
.knowledge-card-head > span { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #745a2d; background: #f3e7d0; font-family: Georgia, serif; }
.knowledge-card-head small { color: var(--muted); font-size: 7px; }
.knowledge-card-head h3 { margin: 3px 0 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-card > p { display: -webkit-box; min-height: 65px; margin: 14px 0 0; overflow: hidden; color: #59616b; font-size: 9px; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.knowledge-tags { display: flex; min-height: 25px; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.knowledge-tags span { padding: 4px 6px; border-radius: 7px; color: #4d6964; background: #eaf1ef; font-size: 7px; }
.knowledge-card-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.knowledge-card-foot > small { color: var(--muted); font-size: 7px; }
.knowledge-card-foot > div { display: flex; gap: 5px; }

@media (max-width: 1080px) {
  .ai-profile-layout, .ai-outreach-layout { grid-template-columns: 1fr; }
  .ai-control-card, .ai-outreach-form, .ai-result-card { min-height: 0; }
  .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .todo-panel-header, .ai-heading, .knowledge-toolbar { align-items: flex-start; flex-direction: column; }
  .todo-date-controls { width: 100%; flex-wrap: wrap; }
  .todo-calendar-picker { flex: 1; }
  .todo-date-button { width: 100%; min-width: 0; }
  .todo-calendar-popover { position: fixed; z-index: 95; top: 50%; right: auto; bottom: auto; left: 50%; width: min(350px, calc(100vw - 28px)); transform: translate(-50%, -50%); }
  .todo-summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .todo-row { grid-template-columns: 32px 68px 1fr; align-items: start; }
  .todo-actions { grid-column: 2 / -1; }
  .todo-main p { white-space: normal; }
  .followup-mode-switch, .followup-todo-fields, .ai-result-columns { grid-template-columns: 1fr; }
  .ai-heading-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .ai-status-button { align-self: flex-start; }
  .ai-manual-steps { grid-template-columns: 1fr; }
  .ai-manual-steps > i { display: none; }
  .ai-manual-buttons { flex-direction: column; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-toolbar .inline-search { width: 100%; }
  .ai-result-actions { flex-direction: column-reverse; }
  .ai-result-actions button { width: 100%; }
}

@media print {
  body * { visibility: hidden !important; }
  #pi-preview-content, #pi-preview-content * { visibility: visible !important; }
  #pi-preview-content { position: absolute; inset: 0; width: 100%; padding: 0; }
  .no-print { display: none !important; }
}

@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .channel-panel .donut-wrap { grid-template-columns: 180px 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-kpis { grid-template-columns: repeat(3, 1fr); }
  .visit-map-layout { grid-template-columns: 1fr; }
  .visit-map-workspace { grid-template-columns: 1fr 1fr; }
  .visit-world-panel { grid-column: 1 / -1; grid-row: 1; }
  .visit-client-panel, .visit-customer-detail-panel { min-height: 0; }
  .visit-client-panel { min-height: 0; }
  .visit-customer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}

@media (max-width: 840px) {
  .sidebar { transform: translateX(-100%); transition: .2s ease; }
  .sidebar.open { transform: none; }
  .main-area { width: 100%; margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { height: 80px; padding: 0 18px; justify-content: flex-start; gap: 14px; }
  .topbar-actions { margin-left: auto; }
  .search-box { display: none; }
  .content-area { padding: 24px 18px 50px; }
  .company-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-row { grid-template-columns: 1.4fr 1fr 85px; }
  .compact-row > :nth-child(2) { display: none; }
  .customer-filter-secondary { flex-wrap: wrap; }
  .filter-result-count { margin-left: 0; }
  .visit-map-heading, .visit-world-head { flex-direction: column; }
  .visit-map-search-wrap { width: 100%; flex-wrap: wrap; }
  .visit-map-search { width: 100%; flex: 1 0 100%; }
  .visit-map-legend { justify-items: start; text-align: left; }
  .visit-unresolved-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar h1 { font-size: 19px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi-card { min-height: 124px; padding: 15px; }
  .kpi-card strong { margin-top: 15px; font-size: 23px; }
  .kpi-period-select { max-width: 62px; padding: 5px 20px 5px 7px; font-size: 9px; }
  .dashboard-trend-toolbar { align-items: flex-start; flex-direction: column; }
  .dashboard-trend-kpis { grid-template-columns: 1fr; }
  .dashboard-trend-kpis > div { min-height: 0; }
  .dashboard-order-summary { grid-template-columns: 1fr auto; gap: 10px; }
  .dashboard-order-summary > div:nth-child(2) { min-width: 94px; }
  .dashboard-order-expand { grid-column: 1 / -1; width: 100%; padding-top: 9px; border-top: 1px solid var(--line); text-align: left; }
  .dashboard-overdue-row { grid-template-columns: 1fr; }
  .dashboard-overdue-row > div:last-child { min-width: 0; padding-top: 10px; border-top: 1px solid #edd9d7; text-align: left; }
  .section-heading h2 { font-size: 23px; }
  .row-heading { align-items: flex-start; gap: 15px; }
  .row-heading .primary-button { flex: 0 0 auto; padding: 9px 11px; font-size: 11px; }
  .date-chip { display: none; }
  .heading-actions .compact-button, .heading-actions > .text-button { display: none; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .inline-search { width: 100%; }
  .customer-filter-primary { align-items: stretch; flex-direction: column; }
  .customer-filter-secondary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .customer-filter-secondary > * { min-width: 0; max-width: 100%; }
  .filter-field { display: grid; grid-template-columns: 1fr; }
  .filter-field select { width: 100%; min-width: 0; max-width: 100%; }
  .filter-date-range { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); }
  .filter-date-range > span { grid-column: 1 / -1; }
  .filter-date-range i { text-align: center; }
  .filter-date-range input { display: block; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; }
  .customer-filter-panel input[type="date"] { -webkit-appearance: none; appearance: none; }
  .filter-result-count { justify-self: end; }
  .channel-panel .donut-wrap { grid-template-columns: 1fr; }
  .sales-chart { gap: 5px; }
  .chart-bars { gap: 2px; }
  .chart-bar { width: 9px; }
  .compact-row { grid-template-columns: 1fr 76px; }
  .compact-row > :nth-child(3) { display: none; }
  .metric-row { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .product-grid { grid-template-columns: 1fr; }
  .visit-map-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .visit-map-kpis > div { min-height: 80px; padding: 13px; }
  .visit-map-kpis strong { font-size: 21px; }
  .visit-map-search-wrap .primary-button, .visit-map-search-wrap .secondary-button { flex: 1; }
  .visit-world-panel, .visit-client-panel { padding: 13px; }
  .visit-map-workspace { display: flex; flex-direction: column; }
  .visit-world-panel { order: 1; padding: 0; overflow: hidden; }
  .visit-world-head { padding: 13px 13px 0; }
  .visit-client-panel { order: 2; border-radius: 24px 24px 15px 15px; }
  .visit-customer-detail-panel { order: 3; min-height: 360px; border-radius: 24px 24px 15px 15px; }
  .google-map-shell, #visit-google-map { min-height: 58vh; border-radius: 0; }
  .visit-customer-list { grid-template-columns: 1fr; }
  .visit-map-hint { display: none; }
  .visit-unresolved-list > div { grid-template-columns: auto 1fr; }
  .visit-unresolved-list .action-button { grid-column: 1 / -1; width: 100%; }
  .customer-location-preview { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; place-items: end center; }
  .modal { width: 100%; max-height: 94vh; padding: 21px 18px; border-radius: 22px 22px 0 0; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .detail-kpis { grid-template-columns: 1fr 1fr; }
  .order-payment-layout { grid-template-columns: 1fr; }
  .customer-business-row { grid-template-columns: 1fr auto; }
  .customer-business-row > :nth-child(2) { grid-column: 1; }
  .customer-summary { grid-template-columns: 1fr; }
  .customer-initial { width: 52px; height: 52px; border-radius: 16px; }
  .customer-summary-grid { grid-template-columns: 1fr 1fr; }
  .customer-summary-grid .summary-address { grid-column: 1 / -1; }
  .customer-insights-editor-head, .customer-insights-card-head { align-items: flex-start; flex-direction: column; }
  .customer-insights-editor-head .secondary-button, .customer-insights-card-head .action-button { width: 100%; }
  .customer-quality-control { align-items: stretch; flex-direction: column; }
  .quality-not-applicable-note { text-align: left; }
  .quality-switch { width: 100%; }
  .quality-switch button { flex: 1; padding: 7px 6px; }
  .customer-reputation-card, .company-detail-reputation { grid-template-columns: 1fr; }
  .reputation-formula-note { grid-column: 1; }
  .reputation-detail-summary { align-items: flex-start; }
  .reputation-basis-row { grid-template-columns: 1fr 1fr; }
  .reputation-basis-row > div:first-child { grid-column: 1 / -1; }
  .company-archive-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .company-contact-row, .company-order-row { grid-template-columns: 1fr 1fr; }
  .company-contact-row > div:first-child, .company-order-row > div:first-child { grid-column: 1 / -1; }
  .company-contact-row > button, .company-order-row > button, .company-order-actions { grid-column: 1 / -1; width: 100%; }
  .company-order-actions .action-button { flex: 1; }
  .order-section-heading { align-items: flex-start; flex-direction: column; }
  .order-import-actions { width: 100%; }
  .mini-link-button, .order-file-button { flex: 1; text-align: center; }
  .timeline-item { grid-template-columns: 36px 1fr; }
  .timeline-date { grid-column: 2; margin-top: -15px; }
  .pi-header-grid { grid-template-columns: 1fr; }
  .product-specification-edit-row { grid-template-columns: 24px minmax(0, 1fr) 30px; }
  .product-specification-edit-row > span:first-child { grid-column: 1; grid-row: 1; }
  .product-specification-edit-row > input { grid-column: 2; grid-row: 1; }
  .product-specification-edit-row .specification-image-upload { grid-column: 2; grid-row: 2; min-width: 0; }
  .product-specification-edit-row .specification-image-preview { grid-column: 3; grid-row: 2; }
  .product-specification-edit-row .remove-line { grid-column: 3; grid-row: 1; }
  .pi-bottom-grid { grid-template-columns: 1fr; }
  .pi-doc-parties { grid-template-columns: 1fr; }
  .pi-document { padding: 18px 14px; }
  .detail-list-row { grid-template-columns: 1fr; gap: 4px; }
  .customer-table { min-width: 0; }
  .customer-table,
  .customer-table tbody { display: block; width: 100%; }
  .customer-table thead { display: none; }
  .customer-table tbody { display: grid; gap: 14px; padding: 10px 14px 14px; }
  .customer-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 7px 20px rgba(24,51,46,.04);
  }
  .customer-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .customer-table tbody td {
    display: flex;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    white-space: normal;
  }
  .customer-table tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
  }
  .customer-table tbody td:first-child,
  .customer-table tbody td:nth-child(6),
  .customer-table tbody td:nth-child(8),
  .customer-table tbody td:nth-child(12) { grid-column: 1 / -1; }
  .customer-table tbody td:first-child {
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(32, 39, 51, .08);
  }
  .customer-table tbody td:first-child::before,
  .customer-table tbody td:nth-child(12)::before { display: none; }
  .customer-table tbody td:nth-child(12) { padding-bottom: 0; }
  .customer-table tbody td:nth-child(12) .action-group { width: 100%; }
  .customer-table tbody td:nth-child(12) .action-button { flex: 1; width: auto; padding: 10px 8px; }
  .followup-todo-fields { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .followup-todo-fields input, .followup-todo-fields select { display: block; min-height: 44px; }
  .modal form, .modal .form-grid, .modal .span-2 { min-width: 0; max-width: 100%; }
  .order-toolbar { align-items: stretch; }
  .order-toolbar .segmented { width: 100%; gap: 6px; }
  .order-toolbar .segmented button { flex: 1 1 auto; min-width: 72px; padding: 9px 8px; }
  .order-table { display: block; min-width: 0 !important; width: 100%; }
  .order-table thead { display: none; }
  .order-table tbody { display: grid; gap: 14px; width: 100%; padding: 10px 12px 14px; }
  .order-table tbody tr:not(.order-followup-detail-row) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 7px 20px rgba(24,51,46,.04); }
  .order-table tbody tr:not(.order-followup-detail-row) > td { display: flex; min-width: 0; padding: 0; border: 0; flex-direction: column; align-items: flex-start; gap: 5px; white-space: normal; }
  .order-table tbody tr:not(.order-followup-detail-row) > td::before { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .05em; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(1)::before { content: '订单'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(2)::before { content: '客户 / 公司'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(3)::before { content: '产品明细'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(4)::before { content: '金额'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(5)::before { content: '待收金额'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(6)::before { content: '订单状态'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(7)::before { content: '交货 / 到账'; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(8)::before { display: none; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(1),
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(3),
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(7),
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(8) { grid-column: 1 / -1; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(8) .action-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .order-table tbody tr:not(.order-followup-detail-row) > td:nth-child(8) .action-button { width: 100%; padding: 10px 5px; }
  .order-followup-detail-row { display: block; margin-top: -14px; }
  .order-followup-detail-row > td { display: block; width: 100%; padding: 0 12px 14px; border: 0; white-space: normal; }
}

.permission-hidden { display: none !important; }
.cloud-auth-gate { z-index: 300; }
.cloud-admin-modal { z-index: 180; }
.cloud-user-menu { z-index: 190; }
.cloud-sync-notice { z-index: 260; }