:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f8f9fc;
  --surface-blue: #f0f5ff;
  --ink: #172033;
  --ink-2: #465169;
  --muted: #7d879b;
  --line: #e5e9f1;
  --line-strong: #d7dce7;
  --blue: #2f6df6;
  --blue-dark: #1d55d6;
  --blue-soft: #eaf1ff;
  --green: #1aaa78;
  --green-soft: #e9f8f2;
  --orange: #e97636;
  --orange-soft: #fff2ea;
  --red: #d94f57;
  --red-soft: #feedef;
  --purple: #7355d8;
  --purple-soft: #f0edff;
  --shadow-sm: 0 1px 2px rgba(22, 32, 51, 0.04), 0 5px 18px rgba(22, 32, 51, 0.035);
  --shadow-md: 0 18px 50px rgba(26, 42, 74, 0.14);
  --radius: 14px;
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(47,109,246,.18); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column;
  background: #0e1a31; color: #dce5f6; padding: 20px 14px 14px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 20px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: white; font-weight: 800; letter-spacing: -.5px; background: linear-gradient(145deg,#4c8cff,#245ee5); box-shadow: 0 8px 22px rgba(37,100,239,.35); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { color: #fff; font-size: 15px; letter-spacing: .1px; }
.brand-copy span { margin-top: 4px; color: #8290aa; font-size: 11px; letter-spacing: 1.5px; }
.sidebar .sidebar-close { display: none; margin-left: auto; color: #b7c2d7; }
.workspace-pill { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.045); }
.workspace-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #bcd1ff; font-size: 11px; font-weight: 700; background: rgba(71,127,255,.2); }
.workspace-pill > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.workspace-pill strong { overflow: hidden; color: #edf3ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-pill small { margin-top: 3px; color: #77859f; font-size: 10px; }
.mini-arrow { width: 14px; margin-left: auto; color: #68758d; transform: rotate(90deg); }
.main-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.nav-label { padding: 0 11px 6px; color: #596881; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.nav-label-spaced { margin-top: 18px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 11px; border: 0; border-radius: 9px; color: #9eabc2; background: transparent; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: #eaf1ff; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,rgba(59,119,255,.26),rgba(59,119,255,.11)); box-shadow: inset 3px 0 0 #5d91ff; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item span:nth-child(2) { flex: 1; text-align: left; font-size: 13px; }
.nav-item.muted { color: #707f98; }
.nav-count { min-width: 22px; padding: 2px 6px; border-radius: 9px; color: #bcd1ff; font-size: 10px; font-weight: 700; text-align: center; background: rgba(60,116,240,.16); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #5b8fff; box-shadow: 0 0 0 4px rgba(91,143,255,.12); }
.soon { color: #64728b; font-size: 9px; }
.sidebar-footer { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.version-note { display: flex; align-items: center; gap: 9px; margin: 0 5px 13px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.version-note > div, .profile-row > div { display: flex; flex: 1; flex-direction: column; }
.version-note strong, .profile-row strong { color: #cdd7e8; font-size: 11px; }
.version-note small, .profile-row small { margin-top: 3px; color: #66758f; font-size: 9px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #43d49f; box-shadow: 0 0 0 4px rgba(67,212,159,.1); }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 6px; }
.profile-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: white; font-size: 12px; font-weight: 700; background: linear-gradient(145deg,#ec8c45,#dc5e55); }
.profile-row .icon-button { color: #6d7a91; }

.main-area { width: calc(100% - var(--sidebar)); min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 30px; border-bottom: 1px solid rgba(224,229,239,.9); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar h1 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.3px; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-soft); cursor: pointer; }
.search-trigger svg { width: 16px; }
.search-trigger span { flex: 1; overflow: hidden; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
kbd { padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 5px; color: #8993a6; font-family: inherit; font-size: 9px; background: white; box-shadow: 0 1px 0 #dde2eb; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(100,116,139,.09); }
.notification-button { position: relative; border: 1px solid var(--line); color: var(--ink-2); background: #fff; }
.notification-button span { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border: 1.5px solid white; border-radius: 50%; background: var(--red); }
.menu-button { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-2); font-size: 12px; font-weight: 600; background: white; cursor: pointer; transition: .15s ease; }
.button:hover { border-color: #c5ccda; box-shadow: 0 4px 12px rgba(22,32,51,.06); transform: translateY(-1px); }
.button.primary { border-color: var(--blue); color: white; background: var(--blue); box-shadow: 0 6px 16px rgba(47,109,246,.18); }
.button.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.button.soft { border-color: transparent; color: var(--blue-dark); background: var(--blue-soft); }
.button.danger-soft { border-color: transparent; color: var(--red); background: var(--red-soft); }
.button.compact { min-height: 36px; padding: 0 13px; }
.button svg { width: 16px; height: 16px; }
.content { max-width: 1560px; margin: 0 auto; padding: 26px 30px 50px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.45px; }
.page-head p { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.page-head-actions { display: flex; gap: 9px; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.demo-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 15px; border: 1px solid #d6e3ff; border-radius: 11px; color: #315baf; background: #f2f6ff; }
.demo-banner svg { flex: 0 0 auto; color: var(--blue); }
.demo-banner strong { color: #244b9a; font-size: 12px; }
.demo-banner span { color: #5f78aa; font-size: 11px; }
.demo-banner button { margin-left: auto; border: 0; color: #4668a8; background: transparent; cursor: pointer; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { position: relative; min-height: 122px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--blue); background: var(--blue-soft); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.orange { color: var(--orange); background: var(--orange-soft); }
.metric-icon.purple { color: var(--purple); background: var(--purple-soft); }
.metric-value { margin-top: 12px; font-size: 26px; font-weight: 750; letter-spacing: -.8px; }
.metric-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 10px; }
.metric-foot .up { color: var(--green); font-weight: 700; }
.metric-foot .warn { color: var(--orange); font-weight: 700; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(300px,.85fr); gap: 16px; margin-bottom: 16px; }
.card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 14px; }
.card-header h3 { margin: 0; font-size: 14px; letter-spacing: -.15px; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; color: var(--blue); font-size: 10px; font-weight: 700; background: transparent; cursor: pointer; }
.text-button svg { width: 13px; height: 13px; }
.focus-panel { padding: 0 18px 18px; }
.focus-progress { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 11px; background: var(--surface-soft); }
.progress-ring { --p: 68; position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: conic-gradient(var(--blue) calc(var(--p)*1%), #dfe6f2 0); }
.progress-ring::after { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: white; }
.progress-ring strong { position: relative; z-index: 1; font-size: 10px; }
.focus-progress > div:nth-child(2) { flex: 1; }
.focus-progress h4 { margin: 0; font-size: 12px; }
.focus-progress p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.task-list { margin-top: 9px; }
.task-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid #eff1f5; }
.task-item:last-child { border-bottom: 0; }
.task-check { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line-strong); border-radius: 7px; color: transparent; background: white; cursor: pointer; }
.task-check:hover { border-color: var(--blue); color: var(--blue); }
.task-check.done { border-color: var(--green); color: white; background: var(--green); }
.task-check svg { width: 13px; height: 13px; }
.task-copy { min-width: 0; }
.task-copy strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.task-tag { padding: 4px 7px; border-radius: 6px; color: #56627a; font-size: 9px; background: #f0f2f6; }
.task-tag.urgent { color: var(--orange); background: var(--orange-soft); }
.ai-brief { position: relative; overflow: hidden; background: linear-gradient(150deg,#142c5b 0%,#173b7d 58%,#2459b4 100%); color: #fff; }
.ai-brief::before { content: ""; position: absolute; top: -70px; right: -70px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.03), 0 0 0 70px rgba(255,255,255,.02); }
.ai-brief .card-header { position: relative; }
.ai-title { display: flex; align-items: center; gap: 8px; }
.ai-title .metric-icon { color: #c9dcff; background: rgba(255,255,255,.12); }
.ai-brief .card-header h3 { color: white; }
.ai-brief .card-header p { color: #9fb7e2; }
.ai-list { position: relative; padding: 0 18px 18px; }
.ai-item { display: flex; gap: 9px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.09); }
.ai-index { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; color: #cde0ff; font-size: 9px; font-weight: 800; background: rgba(255,255,255,.1); }
.ai-item strong { display: block; font-size: 10px; line-height: 1.55; }
.ai-item span { display: block; margin-top: 3px; color: #9fb7e2; font-size: 9px; line-height: 1.5; }
.ai-action { position: relative; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 36px); margin: 0 18px 18px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: white; font-size: 10px; background: rgba(255,255,255,.08); cursor: pointer; }

.pipeline-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 0 18px 18px; }
.pipeline-stage { position: relative; min-height: 98px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.pipeline-stage::after { content: ""; position: absolute; top: 18px; right: -10px; width: 10px; height: 1px; background: var(--line-strong); }
.pipeline-stage:last-child::after { display: none; }
.stage-head { display: flex; align-items: center; justify-content: space-between; }
.stage-head span:first-child { color: var(--ink-2); font-size: 10px; font-weight: 700; }
.stage-count { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; color: var(--blue); font-size: 9px; font-weight: 700; background: var(--blue-soft); }
.stage-value { margin-top: 14px; font-size: 16px; font-weight: 750; }
.stage-sub { margin-top: 4px; color: var(--muted); font-size: 9px; }
.stage-line { height: 3px; margin-top: 13px; border-radius: 3px; background: #e2e6ee; overflow: hidden; }
.stage-line span { display: block; height: 100%; border-radius: 3px; background: var(--blue); }

.lower-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.9fr); gap: 16px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 38px; padding: 0 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .25px; text-align: left; background: #fafbfc; white-space: nowrap; }
.data-table td { min-height: 54px; padding: 11px 13px; border-bottom: 1px solid #eff1f5; color: var(--ink-2); font-size: 10px; vertical-align: middle; }
.data-table tbody tr { cursor: pointer; transition: .15s; }
.data-table tbody tr:hover { background: #f8faff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.company-cell { display: flex; align-items: center; gap: 9px; min-width: 160px; }
.company-logo { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; color: #315eaf; font-size: 9px; font-weight: 800; background: var(--blue-soft); }
.company-logo.green { color: #158060; background: var(--green-soft); }
.company-logo.orange { color: #b75c27; background: var(--orange-soft); }
.company-logo.purple { color: #6147b9; background: var(--purple-soft); }
.company-cell strong { display: block; color: var(--ink); font-size: 10px; }
.company-cell span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; color: #39557d; font-size: 9px; font-weight: 700; background: #edf2f9; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.blue { color: var(--blue-dark); background: var(--blue-soft); }
.status-pill.green { color: #14815e; background: var(--green-soft); }
.status-pill.orange { color: #b55b29; background: var(--orange-soft); }
.status-pill.red { color: #b3434c; background: var(--red-soft); }
.status-pill.purple { color: #6049b4; background: var(--purple-soft); }
.loop-card { padding: 18px; }
.loop-card h3 { margin: 0; font-size: 14px; }
.loop-card > p { margin: 5px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.loop-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 12px; background: linear-gradient(145deg,#f1f5ff,#f8f9fd); }
.loop-node { position: relative; z-index: 2; padding: 11px; border: 1px solid #dae3f5; border-radius: 9px; background: white; box-shadow: 0 4px 12px rgba(38,62,103,.05); }
.loop-node span { display: block; color: var(--blue); font-size: 9px; font-weight: 800; }
.loop-node strong { display: block; margin-top: 4px; font-size: 10px; }
.loop-center { grid-column: 1 / -1; padding: 10px; border-radius: 9px; color: white; text-align: center; background: linear-gradient(90deg,#2e68e8,#477ff4); }
.loop-center strong { display: block; font-size: 11px; }
.loop-center span { display: block; margin-top: 3px; color: #d9e6ff; font-size: 9px; }
.loop-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 10px; border-radius: 9px; color: #58667f; font-size: 9px; background: #fafbfc; }
.loop-foot svg { color: var(--green); }

.toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.input-wrap { position: relative; flex: 1; max-width: 360px; }
.input-wrap svg { position: absolute; top: 50%; left: 11px; width: 15px; color: var(--muted); transform: translateY(-50%); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); background: white; }
.input { height: 38px; padding: 0 11px; }
.input-wrap .input { padding-left: 34px; }
.input::placeholder, .textarea::placeholder { color: #a3adbe; }
.select { width: auto; min-width: 120px; height: 38px; padding: 0 30px 0 10px; }
.textarea { min-height: 90px; padding: 10px 11px; resize: vertical; }
.filter-chips { display: flex; gap: 7px; margin: 0 0 14px; overflow-x: auto; padding-bottom: 2px; }
.filter-chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); font-size: 10px; background: white; white-space: nowrap; cursor: pointer; }
.filter-chip.active { border-color: #c8d8ff; color: var(--blue-dark); background: var(--blue-soft); }
.customer-page-grid { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 16px; }
.side-summary { display: flex; flex-direction: column; gap: 14px; }
.mini-card { padding: 16px; }
.mini-card h3 { margin: 0; font-size: 12px; }
.mini-card p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.follow-list { margin-top: 12px; }
.follow-item { display: flex; gap: 9px; padding: 10px 0; border-top: 1px solid #eff1f5; }
.follow-time { width: 38px; flex: 0 0 38px; color: var(--blue); font-size: 9px; font-weight: 700; }
.follow-item strong { display: block; font-size: 10px; }
.follow-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.simple-stat { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #eff1f5; }
.simple-stat:last-child { border-bottom: 0; }
.simple-stat span { color: var(--muted); font-size: 9px; }
.simple-stat strong { font-size: 12px; }

.search-hero { padding: 24px; border: 1px solid #d8e3fb; border-radius: 16px; background: radial-gradient(circle at 90% 10%,rgba(82,137,255,.17),transparent 31%),linear-gradient(145deg,#f1f5ff,#f9fbff); box-shadow: var(--shadow-sm); }
.search-hero h2 { margin: 0; font-size: 21px; letter-spacing: -.4px; }
.search-hero p { margin: 7px 0 18px; color: #6d7c98; font-size: 11px; line-height: 1.6; }
.part-search { display: flex; gap: 9px; max-width: 720px; }
.part-search .input-wrap { max-width: none; }
.part-search .input { height: 46px; border-color: #cfd9ea; box-shadow: 0 6px 18px rgba(38,64,110,.06); }
.part-search .button { min-height: 46px; min-width: 105px; }
.sample-searches { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.sample-search { padding: 5px 8px; border: 1px solid #dce4f3; border-radius: 6px; color: #4f6690; background: rgba(255,255,255,.7); cursor: pointer; }
.library-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 14px 0; }
.library-stat { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.library-stat .metric-icon { flex: 0 0 31px; }
.library-stat strong { display: block; font-size: 15px; }
.library-stat span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.match-summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.match-summary strong { font-size: 12px; }
.match-summary span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.compatibility { display: inline-flex; align-items: center; gap: 7px; }
.compatibility b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; font-size: 10px; }
.compatibility.a b { color: #117652; background: var(--green-soft); }
.compatibility.b b { color: #a65324; background: var(--orange-soft); }
.compatibility.c b { color: #a23d46; background: var(--red-soft); }
.compatibility div strong { display: block; font-size: 9px; }
.compatibility div span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.price { color: var(--ink); font-weight: 700; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 9px; font-weight: 700; }
.verified svg { width: 12px; height: 12px; }
.ai-guess { margin: 14px 0 0; padding: 15px; border: 1px dashed #b8caec; border-radius: 12px; color: #50678f; background: #f5f8ff; }
.ai-guess-head { display: flex; align-items: center; gap: 9px; }
.ai-guess-head .metric-icon { flex: 0 0 31px; }
.ai-guess h4 { margin: 0; color: #315387; font-size: 11px; }
.ai-guess p { margin: 4px 0 0; font-size: 9px; }
.ai-guess-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 12px; }
.guess-field { padding: 9px; border-radius: 8px; background: white; }
.guess-field span { display: block; color: var(--muted); font-size: 8px; }
.guess-field strong { display: block; margin-top: 3px; color: var(--ink-2); font-size: 9px; }

.mail-layout { display: grid; grid-template-columns: 300px minmax(360px,1fr) 290px; height: calc(100vh - 145px); min-height: 580px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); overflow: hidden; }
.mail-list { border-right: 1px solid var(--line); overflow-y: auto; }
.mail-list-head { position: sticky; top: 0; z-index: 2; padding: 15px; border-bottom: 1px solid var(--line); background: white; }
.mail-list-head h3 { margin: 0; font-size: 13px; }
.mail-list-head p { margin: 4px 0 10px; color: var(--muted); font-size: 9px; }
.mail-list-head .input { height: 34px; font-size: 10px; }
.mail-item { display: block; width: 100%; padding: 13px 15px; border: 0; border-bottom: 1px solid #eff1f5; text-align: left; background: white; cursor: pointer; }
.mail-item:hover { background: #f8faff; }
.mail-item.active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--blue); }
.mail-meta { display: flex; justify-content: space-between; gap: 8px; }
.mail-meta strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta time { flex: 0 0 auto; color: var(--muted); font-size: 8px; }
.mail-subject { display: block; margin-top: 5px; overflow: hidden; color: var(--ink-2); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mail-preview { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mail-tags { display: flex; gap: 5px; margin-top: 7px; }
.tiny-tag { padding: 3px 6px; border-radius: 5px; color: #52627c; font-size: 8px; background: #eef1f5; }
.tiny-tag.unread { color: var(--blue-dark); background: var(--blue-soft); }
.tiny-tag.archived { color: #167758; background: var(--green-soft); }
.mail-reader { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.reader-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.reader-head h2 { margin: 0; font-size: 17px; line-height: 1.45; }
.sender { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sender-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #315eaf; font-size: 10px; font-weight: 800; background: var(--blue-soft); }
.sender > div { flex: 1; min-width: 0; }
.sender strong { display: block; font-size: 10px; }
.sender span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sender time { color: var(--muted); font-size: 9px; }
.reader-body { padding: 22px; color: #3d475a; font-size: 11px; line-height: 1.85; }
.reader-body p { margin: 0 0 12px; }
.quote-block { margin: 16px 0; padding: 12px 14px; border-left: 3px solid #8eaff7; border-radius: 0 8px 8px 0; color: #50617e; background: #f5f8ff; }
.attachment { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.attachment-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--red); font-size: 8px; font-weight: 800; background: var(--red-soft); }
.attachment strong { display: block; font-size: 9px; }
.attachment span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.mail-ai { border-left: 1px solid var(--line); background: #fafbfe; overflow-y: auto; }
.mail-ai-head { padding: 17px; border-bottom: 1px solid var(--line); }
.mail-ai-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; }
.mail-ai-head h3 svg { color: var(--blue); }
.mail-ai-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.ai-extract { padding: 15px; }
.extract-section { margin-bottom: 15px; }
.extract-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.extract-box { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.extract-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eff1f5; }
.extract-row:last-child { border-bottom: 0; }
.extract-row span { color: var(--muted); font-size: 8px; }
.extract-row strong { max-width: 150px; font-size: 9px; text-align: right; }
.suggestion-box { padding: 11px; border-radius: 9px; color: #455d88; font-size: 9px; line-height: 1.65; background: var(--blue-soft); }
.confidence { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 8px; }
.confidence-bar { flex: 1; height: 4px; border-radius: 4px; background: #dce4f2; overflow: hidden; }
.confidence-bar span { display: block; width: 92%; height: 100%; border-radius: 4px; background: var(--green); }
.archive-button { width: 100%; margin-top: 5px; }

.flow-legend { display: flex; align-items: center; gap: 15px; color: var(--muted); font-size: 9px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; background: var(--blue); }
.legend-dot.supply { background: var(--orange); }
.process-card { padding: 22px; overflow-x: auto; }
.process-flow { display: flex; align-items: stretch; min-width: 940px; }
.process-step { position: relative; flex: 1; min-width: 108px; padding: 15px 10px; border: 1px solid #dbe4f5; border-radius: 10px; text-align: center; background: var(--surface-blue); }
.process-step.supply { border-color: #f0d8c9; background: #fff5ef; }
.process-step + .process-step { margin-left: 22px; }
.process-step + .process-step::before { content: ""; position: absolute; top: 50%; left: -23px; width: 22px; height: 1px; background: #c9d0dc; }
.process-step + .process-step::after { content: ""; position: absolute; top: calc(50% - 3px); left: -6px; width: 6px; height: 6px; border-top: 1px solid #aab3c1; border-right: 1px solid #aab3c1; transform: rotate(45deg); }
.step-num { display: grid; place-items: center; width: 23px; height: 23px; margin: 0 auto 8px; border-radius: 7px; color: var(--blue); font-size: 9px; font-weight: 800; background: white; }
.process-step.supply .step-num { color: var(--orange); }
.process-step strong { display: block; font-size: 10px; }
.process-step span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.branch-card { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.branch-card h4 { margin: 0 0 10px; font-size: 10px; }
.branch-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.branch-option { padding: 12px; border: 1px solid #d9e3f6; border-radius: 9px; background: white; }
.branch-option.orange { border-color: #f0d5c6; }
.branch-option strong { font-size: 10px; }
.branch-option span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.roadmap { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 16px; }
.roadmap-column { padding: 17px; }
.roadmap-column.active { border-color: #bcd0ff; box-shadow: inset 0 3px 0 var(--blue), var(--shadow-sm); }
.roadmap-column h3 { margin: 0; font-size: 13px; }
.roadmap-column > p { margin: 5px 0 13px; color: var(--muted); font-size: 9px; }
.roadmap-item { display: flex; gap: 9px; padding: 10px 0; border-top: 1px solid #eff1f5; }
.roadmap-num { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; color: #596983; font-size: 8px; font-weight: 800; background: #eef1f6; }
.roadmap-column.active .roadmap-num { color: var(--blue); background: var(--blue-soft); }
.roadmap-item strong { display: block; font-size: 10px; }
.roadmap-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.gate { margin-top: 12px; padding: 10px; border: 1px dashed #c7cdd8; border-radius: 8px; color: #677187; font-size: 9px; background: #f2f3f5; }
.gate strong { color: var(--ink-2); }

.detail-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(520px,94vw); background: white; box-shadow: -15px 0 45px rgba(22,32,51,.14); transform: translateX(104%); transition: .25s ease; overflow-y: auto; }
.detail-drawer.open { transform: translateX(0); }
.drawer-overlay { position: fixed; inset: 0; z-index: 65; background: rgba(10,17,32,.35); opacity: 0; pointer-events: none; transition: .2s; backdrop-filter: blur(2px); }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 17px; }
.drawer-body { padding: 22px; }
.drawer-company { display: flex; align-items: center; gap: 13px; }
.drawer-company .company-logo { width: 44px; height: 44px; flex-basis: 44px; font-size: 12px; }
.drawer-company h3 { margin: 0; font-size: 15px; }
.drawer-company p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.drawer-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 18px 0; }
.drawer-stat { padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.drawer-stat span { display: block; color: var(--muted); font-size: 8px; }
.drawer-stat strong { display: block; margin-top: 5px; font-size: 11px; }
.section-title { margin: 21px 0 10px; color: var(--ink); font-size: 11px; }
.ai-next { padding: 13px; border: 1px solid #d5e1fc; border-radius: 10px; color: #405d90; background: #f2f6ff; }
.ai-next h4 { display: flex; align-items: center; gap: 7px; margin: 0; color: #2854a7; font-size: 10px; }
.ai-next p { margin: 7px 0 0; font-size: 9px; line-height: 1.7; }
.timeline { position: relative; padding-left: 17px; }
.timeline::before { content: ""; position: absolute; top: 4px; bottom: 7px; left: 4px; width: 1px; background: var(--line-strong); }
.timeline-item { position: relative; padding: 0 0 15px 8px; }
.timeline-item::before { content: ""; position: absolute; top: 3px; left: -16px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #b8c8e7; }
.timeline-item strong { display: block; font-size: 9px; }
.timeline-item p { margin: 4px 0 0; color: var(--ink-2); font-size: 9px; line-height: 1.55; }
.timeline-item time { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.drawer-actions { display: flex; gap: 8px; margin-top: 20px; }

.modal-backdrop, .command-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(9,16,29,.42); opacity: 0; pointer-events: none; transition: .18s; backdrop-filter: blur(3px); }
.modal-backdrop.open, .command-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { width: min(560px,96vw); max-height: 90vh; border-radius: 16px; background: white; box-shadow: var(--shadow-md); overflow-y: auto; transform: translateY(12px) scale(.985); transition: .2s; }
.modal-backdrop.open .modal { transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.modal-body { padding: 20px 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--ink-2); font-size: 9px; font-weight: 700; }
.field small { color: var(--muted); font-size: 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; }
.command-backdrop { align-items: start; padding-top: 14vh; }
.command-palette { width: min(650px,94vw); border: 1px solid rgba(255,255,255,.4); border-radius: 15px; background: white; box-shadow: 0 24px 70px rgba(7,14,28,.25); overflow: hidden; transform: translateY(-10px); transition: .18s; }
.command-backdrop.open .command-palette { transform: none; }
.command-input-wrap { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.command-input-wrap svg { color: var(--blue); }
.command-input-wrap input { flex: 1; border: 0; outline: 0; font-size: 14px; }
.command-results { max-height: 340px; padding: 8px; overflow-y: auto; }
.command-group-label { padding: 8px 10px 5px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.command-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 9px; text-align: left; background: transparent; cursor: pointer; }
.command-result:hover { background: #f2f6ff; }
.command-result .metric-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.command-result > span { display: flex; flex: 1; flex-direction: column; }
.command-result strong { font-size: 10px; }
.command-result small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.command-result > svg { color: #9aa5b7; }
.command-empty { padding: 35px; color: var(--muted); font-size: 10px; text-align: center; }
.command-footer { display: flex; gap: 16px; padding: 9px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; background: #fafbfc; }
.command-footer span:last-child { margin-left: auto; }
.toast-stack { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; min-width: 260px; padding: 12px 14px; border: 1px solid #dbe1ec; border-radius: 10px; color: var(--ink-2); font-size: 10px; background: white; box-shadow: 0 12px 35px rgba(20,32,57,.16); animation: toastIn .25s ease; }
.toast-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--green); }
.toast-icon svg { width: 13px; height: 13px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.empty-state { padding: 40px 20px; color: var(--muted); text-align: center; }
.empty-state .metric-icon { margin: 0 auto 10px; }
.empty-state strong { display: block; color: var(--ink-2); font-size: 11px; }
.empty-state span { display: block; margin-top: 5px; font-size: 9px; }
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .mail-layout { grid-template-columns: 270px 1fr; }
  .mail-ai { position: absolute; right: 30px; width: 300px; height: calc(100vh - 145px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); transform: translateX(calc(100% + 45px)); transition: .2s; }
  .mail-ai.open { transform: none; }
  .roadmap { grid-template-columns: 1fr; }
  .library-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px) {
  :root { --sidebar: 0px; }
  .sidebar { width: 248px; transform: translateX(-102%); transition: .22s ease; box-shadow: 18px 0 50px rgba(7,15,30,.2); }
  .sidebar.open { transform: none; }
  .sidebar .sidebar-close, .menu-button { display: grid; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(7,15,30,.35); opacity: 0; pointer-events: none; transition: .2s; }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .main-area { width: 100%; margin-left: 0; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .customer-page-grid { grid-template-columns: 1fr; }
  .side-summary { display: grid; grid-template-columns: 1fr 1fr; }
  .search-trigger { width: 44px; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .mail-layout { height: auto; min-height: 640px; }
}
@media (max-width: 700px) {
  .topbar { height: 66px; padding: 0 15px; }
  .topbar p { display: none; }
  .topbar h1 { font-size: 16px; }
  .topbar-actions { gap: 6px; }
  .topbar .button span { display: none; }
  .topbar .button { width: 36px; padding: 0; }
  .notification-button { display: none; }
  .content { padding: 18px 14px 35px; }
  .page-head { flex-direction: column; }
  .page-head-actions { width: 100%; }
  .page-head-actions .button { flex: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 112px; padding: 14px; }
  .metric-value { font-size: 22px; }
  .pipeline-grid { grid-template-columns: 1fr 1fr; }
  .pipeline-stage::after { display: none; }
  .pipeline-stage:last-child { grid-column: 1 / -1; }
  .side-summary { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; }
  .input-wrap { max-width: none; flex-basis: 100%; }
  .part-search { flex-direction: column; }
  .part-search .button { width: 100%; }
  .library-metrics { grid-template-columns: 1fr 1fr; }
  .ai-guess-grid { grid-template-columns: repeat(2,1fr); }
  .mail-layout { display: block; min-height: 0; }
  .mail-list { max-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mail-reader { min-height: 550px; }
  .mail-ai { position: fixed; top: 76px; right: 12px; bottom: 12px; z-index: 60; width: calc(100vw - 24px); height: auto; transform: translateX(calc(100% + 25px)); }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .drawer-stats { grid-template-columns: 1fr; }
  .branch-options { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .library-metrics { grid-template-columns: 1fr; }
  .page-head h2 { font-size: 19px; }
  .demo-banner span { display: none; }
  .command-footer span:last-child { display: none; }
}