:root {
  --bg: #f4f7f9;
  --ink: #0e1b2b;
  --muted: #69717a;
  --line: #d9dee5;
  --panel: #ffffff;
  --accent: #0b7a75;
  --cyan: #2fb8ac;
  --orange: #f28c45;
  --danger: #b42318;
  --navy: #0e1b2b;
  --cloud: #f4f7f9;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, .button, input, select, textarea { border: 1px solid var(--line); border-radius: 6px; font: inherit; }
button, .button { background: var(--accent); color: #fff; cursor: pointer; padding: 8px 12px; text-decoration: none; }
.button.secondary { background: #eef3f3; color: var(--ink); }
.danger-button { background: var(--danger); }
input, select { background: #fff; padding: 8px 10px; }
textarea { width: 100%; min-height: 520px; padding: 12px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
textarea.short-textarea { min-height: 96px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: #fbfcfd; }
.icon-sprite { height: 0; overflow: hidden; position: absolute; width: 0; }
.card-icon { align-items: center; background: #e7f3ee; border-radius: 8px; color: var(--accent); display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.card-icon svg, .action-list svg, .metric-card small svg, .status-card small svg { fill: currentColor; height: 18px; width: 18px; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 220px; background: #1f2933; color: #ecf1f4; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.brand { font-size: 18px; font-weight: 700; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar a, .link-button { border-radius: 6px; color: #dbe5ea; display: block; padding: 9px 10px; text-decoration: none; }
.sidebar a.active, .sidebar a:hover { background: #31404d; color: #fff; }
.link-button { width: 100%; background: transparent; border: 0; text-align: left; margin-top: auto; }
.main { margin-left: 220px; padding: 24px; }
.app-topbar { display: flex; justify-content: space-between; margin: -8px 0 20px; }
.app-topbar summary { align-items: center; background: var(--navy); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-weight: 800; height: 36px; justify-content: center; list-style: none; width: 36px; }
.app-topbar details { position: relative; }
.profile-menu { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px #0002; display: grid; min-width: 210px; padding: 12px; position: absolute; right: 0; top: 44px; z-index: 20; }
.profile-menu strong { border-bottom: 1px solid var(--line); font-size: 12px; overflow: hidden; padding: 8px; text-overflow: ellipsis; }
.profile-menu a, .profile-menu .link-button { color: var(--ink); margin: 0; padding: 8px; text-decoration: none; }
.page-header { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 18px; }
.page-header h1 { font-size: 26px; line-height: 1.2; margin: 0; }
.toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.panel h2 { font-size: 16px; margin: 0 0 12px; }
.narrow { max-width: 720px; }
.metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(150px, 1fr)); margin-bottom: 18px; }
.metrics div, .metrics a, .metrics > span { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; text-decoration: none; }
.metrics strong { display: block; font-size: 28px; line-height: 1.1; }
.metrics span, .muted { color: var(--muted); }
.clickable-metrics a, .clickable-metrics > span { color: inherit; display: grid; gap: 8px; min-height: 150px; }
.clickable-metrics a:hover { border-color: #9accc6; box-shadow: 0 10px 26px #0e1b2b12; transform: translateY(-1px); }
.clickable-metrics small, .disabled-card small { color: var(--muted); }
.disabled-card { opacity: .68; }
.split { display: grid; gap: 16px; grid-template-columns: minmax(420px, 0.9fr) minmax(480px, 1.1fr); }
.table-wrap { max-height: calc(100vh - 190px); overflow: auto; }
.status { border-radius: 999px; display: inline-block; font-size: 12px; padding: 3px 8px; }
.status.ok { background: #e5f6ed; color: #137333; }
.status.bad, .error { color: var(--danger); }
.path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; max-width: 340px; overflow-wrap: anywhere; }
.login-body { align-items: center; display: flex; min-height: 100vh; justify-content: center; }
.login-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 14px; min-width: 340px; padding: 24px; }
.wide-panel { max-width: 760px; width: min(760px, calc(100vw - 32px)); }
.login-panel h1 { margin: 0 0 4px; }
.login-panel label { color: var(--muted); display: grid; gap: 6px; }
.stack { display: grid; gap: 12px; }
.stack label { color: var(--muted); display: grid; gap: 6px; }
.wordmark { color: var(--navy); font-size: 20px; font-weight: 800; letter-spacing: 0; text-decoration: none; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .12em; margin: 0 0 12px; text-transform: uppercase; }
.honeypot { height: 0; left: -10000px; overflow: hidden; position: absolute; width: 0; }

.marketing-body { background: var(--cloud); color: var(--navy); font-size: 16px; }
.marketing-nav { align-items: center; background: #fffffff2; border-bottom: 1px solid #dfe6ea; display: grid; grid-template-columns: 1fr auto 1fr; margin: 0 auto; max-width: 100%; padding: 18px 28px; position: sticky; top: 0; z-index: 30; }
.marketing-nav .wordmark, .marketing-body footer .wordmark { white-space: nowrap; }
.marketing-nav nav { display: flex; gap: 24px; }
.marketing-nav nav a, .nav-actions > a:first-child { color: #4a5966; text-decoration: none; }
.marketing-nav nav a:hover, .nav-actions > a:first-child:hover, .text-link:hover { color: var(--accent); }
.nav-actions { align-items: center; display: flex; gap: 14px; justify-content: flex-end; }
.hero { align-items: center; display: grid; gap: 72px; grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr); margin: 0 auto; max-width: 1240px; min-height: 680px; padding: 72px 28px 86px; }
.hero h1 { font-size: clamp(48px, 5.6vw, 76px); letter-spacing: 0; line-height: 1; margin: 0 0 26px; max-width: 780px; }
.hero-copy { color: #405160; font-size: 20px; line-height: 1.6; max-width: 720px; }
.hero-actions { align-items: center; display: flex; gap: 24px; margin-top: 34px; }
.button-large { border-radius: 6px; padding: 14px 22px; }
.text-link { color: var(--accent); font-weight: 750; text-decoration: none; }
.microcopy { color: #687684; font-size: 13px; margin-top: 22px; }
.product-ui { background: #fff; border: 1px solid #dbe5ea; border-radius: 8px; box-shadow: 0 20px 60px #0e1b2b17; color: var(--navy); padding: 20px; }
.ui-topbar { align-items: center; border-bottom: 1px solid var(--line); color: #60707d; display: flex; justify-content: space-between; margin: -4px -4px 18px; padding: 4px 4px 14px; }
.ui-topbar strong { color: var(--navy); }
.order-head { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.product-ui small { color: #6b7b88; display: block; font-size: 11px; font-weight: 750; margin-bottom: 5px; text-transform: uppercase; }
.product-ui strong { display: block; font-size: 15px; }
.status-chip { background: #e5f6f5; border: 1px solid #bfe5e1; border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 800; padding: 6px 10px; white-space: nowrap; }
.stage-track { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 24px 0; }
.stage-track span { background: #edf2f5; border-radius: 6px; color: #61717e; font-size: 12px; font-weight: 750; padding: 9px 7px; text-align: center; }
.stage-track .done { background: #e3f5ef; color: #11725d; }
.stage-track .active { background: var(--orange); color: #fff; }
.ui-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.ui-grid > div, .file-list { background: #f8fafb; border: 1px solid #e2e9ed; border-radius: 8px; padding: 14px; }
.file-list { display: grid; gap: 0; margin-top: 12px; padding: 0 14px; }
.file-list div { align-items: center; border-bottom: 1px solid #e2e9ed; display: flex; justify-content: space-between; padding: 12px 0; }
.file-list div:last-child { border-bottom: 0; }
.file-list span { color: #455565; }
.file-list b { color: var(--accent); font-size: 12px; }
.product-strip { border-bottom: 1px solid #dfe6ea; border-top: 1px solid #dfe6ea; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto; max-width: 1240px; padding: 22px 28px; }
.product-strip span { background: #fff; border: 1px solid #dfe6ea; border-radius: 999px; color: #405160; font-weight: 700; padding: 8px 13px; }
.section { margin: 0 auto; max-width: 1240px; padding: 96px 28px; }
.centered { text-align: center; }
.section h2, .partner-cta h2 { font-size: clamp(34px, 3.6vw, 54px); letter-spacing: 0; line-height: 1.08; margin: 0 auto 22px; max-width: 940px; }
.section-intro { color: #526372; font-size: 19px; line-height: 1.6; margin: 0 auto 52px; max-width: 820px; }
.feature-grid, .capability-grid { display: grid; gap: 16px; }
.feature-grid.three { grid-template-columns: repeat(3, 1fr); }
.feature-grid article, .capability-grid article, .problem-list article { background: #fff; border: 1px solid #dfe6ea; border-radius: 8px; padding: 26px; text-align: left; }
.feature-grid article > span, .capability-grid article > span { color: var(--orange); font-size: 12px; font-weight: 800; }
.feature-grid h3, .capability-grid h3, .problem-list h3 { font-size: 20px; margin: 18px 0 10px; }
.feature-grid p, .capability-grid p, .problem-list p { color: #5d6d7a; line-height: 1.6; }
.capability-grid { grid-template-columns: repeat(3, 1fr); }
.capability-grid h3 { margin-top: 16px; }
.split-section, .workflow-section, .supply-support { border-top: 1px solid #dfe6ea; display: grid; gap: 56px; grid-template-columns: .86fr 1.14fr; }
.split-section h2, .workflow-section h2, .supply-support h2 { margin-left: 0; }
.problem-list { display: grid; gap: 14px; }
.workflow-list { counter-reset: workflow; display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.workflow-list li { align-items: flex-start; background: #fff; border: 1px solid #dfe6ea; border-radius: 8px; display: flex; gap: 16px; padding: 20px; }
.workflow-list span { align-items: center; background: var(--navy); border-radius: 6px; color: #fff; display: flex; flex: 0 0 34px; font-weight: 800; height: 34px; justify-content: center; }
.workflow-list h3 { margin: 0 0 6px; }
.workflow-list p, .supply-support p { color: #536574; line-height: 1.65; margin: 0; }
.supply-support > div:last-child { background: #fff; border: 1px solid #dfe6ea; border-radius: 8px; padding: 28px; }
.supply-support .text-link { display: inline-block; margin-top: 24px; }
.partner-cta { background: var(--navy); border-radius: 8px; color: white; margin: 28px auto 80px; max-width: 1184px; padding: 82px 28px; text-align: center; }
.partner-cta .eyebrow { color: var(--cyan); }
.partner-cta p:not(.eyebrow) { color: #c2cbd3; line-height: 1.6; margin: 0 auto 32px; max-width: 720px; }
.button-light { background: #fff; color: var(--navy); }
.marketing-body footer { align-items: center; border-top: 1px solid #dfe6ea; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 35px 28px; }

.marketing-hero { isolation: isolate; max-width: none; min-height: calc(100vh - 78px); overflow: hidden; padding: 82px 28px 110px; position: relative; }
.marketing-hero::after { background: linear-gradient(90deg, #f7faf8f5 0%, #f7faf8df 42%, #f7faf870 70%, #f7faf810 100%); content: ""; inset: 0; position: absolute; z-index: -1; }
.marketing-hero > img { height: 100%; inset: 0; object-fit: cover; object-position: center right; position: absolute; width: 100%; z-index: -2; }
.hero-overlay { max-width: min(780px, 64vw); }
.hero-overlay h1 { max-width: 820px; }
.hero-dashboard { background: #fffffff0; border: 1px solid #dfe6ea; border-radius: 8px; bottom: 34px; box-shadow: 0 18px 55px #0e1b2b24; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); left: 28px; max-width: 620px; padding: 14px; position: absolute; width: calc(100% - 56px); }
.hero-dashboard div { background: #f8fafb; border: 1px solid #e2e9ed; border-radius: 8px; padding: 14px; }
.hero-dashboard span { color: #60707d; display: block; font-size: 12px; font-weight: 750; }
.hero-dashboard strong { display: block; font-size: 24px; margin-top: 4px; }
.supply-visual { align-items: center; border-top: 1px solid #dfe6ea; display: grid; gap: 42px; grid-template-columns: 1.05fr .95fr; }
.supply-visual img { aspect-ratio: 16 / 10; border-radius: 8px; box-shadow: 0 18px 50px #0e1b2b18; object-fit: cover; width: 100%; }
.supply-visual p:not(.eyebrow) { color: #536574; font-size: 18px; line-height: 1.7; }

.dashboard-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(180px, 1fr)); margin-bottom: 18px; }
.dashboard-grid > article, .dashboard-grid > a { background: #fff; border: 1px solid var(--line); border-radius: 8px; color: inherit; min-height: 150px; padding: 18px; text-decoration: none; }
.dashboard-grid > a:hover { border-color: #9accc6; box-shadow: 0 10px 26px #0e1b2b12; }
.dashboard-grid article > span, .dashboard-grid a > span:not(.card-icon) { color: var(--muted); }
.metric-card strong { display: block; font-size: 38px; margin-top: 24px; }
.metric-card small, .status-card small { align-items: center; color: var(--muted); display: flex; gap: 6px; justify-content: space-between; }
.status-card strong { display: block; font-size: 22px; margin: 26px 0 5px; }
.status-card small { color: var(--muted); }
.integration-card { grid-column: span 2; }
.integration-card ul { list-style: none; margin: 18px 0 0; padding: 0; }
.integration-card li { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 8px 0; }
.connection { border-radius: 999px; font-size: 12px; padding: 3px 8px; }
.connection.connected, .connection.configured { background: #e5f6ed; color: #137333; }
.connection.unavailable, .connection.not_connected, .connection.not_configured, .connection.disabled { background: #f8e7e5; color: var(--danger); }
.dashboard-widgets { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.chart-panel.wide { grid-column: span 2; }
.panel-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.panel-head h2, .panel-head p { margin: 0; }
.line-chart { height: auto; max-height: 260px; width: 100%; }
.line-chart text { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.line-chart circle { fill: var(--accent); }
.chart-grid { fill: none; stroke: #e5ebef; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.donut { align-items: center; background: conic-gradient(var(--accent) 0 var(--a), var(--orange) var(--a) var(--b), #5767d9 var(--b) var(--c), var(--navy) var(--c) 100%); border-radius: 50%; display: flex; height: 190px; justify-content: center; margin: 8px auto 18px; position: relative; width: 190px; }
.donut.funnel { background: conic-gradient(var(--orange) 0 var(--a), var(--accent) var(--a) var(--b), var(--danger) var(--b) var(--c)); }
.donut::after { background: #fff; border-radius: 50%; content: ""; inset: 38px; position: absolute; }
.donut span { font-size: 28px; font-weight: 800; position: relative; z-index: 1; }
.legend-list { display: grid; gap: 8px; }
.legend-list a { align-items: center; color: inherit; display: grid; gap: 8px; grid-template-columns: auto 1fr auto; text-decoration: none; }
.legend-list i { background: var(--dot); border-radius: 50%; height: 10px; width: 10px; }
.bar-list { display: grid; gap: 12px; }
.bar-list a { color: inherit; display: grid; gap: 8px; grid-template-columns: 1fr auto; text-decoration: none; }
.bar-list i { background: #dfe8ec; border-radius: 999px; grid-column: 1 / -1; height: 10px; overflow: hidden; position: relative; }
.bar-list i::before { background: var(--accent); border-radius: inherit; content: ""; inset: 0 auto 0 0; position: absolute; width: var(--bar); }
.health-grid { display: grid; gap: 10px; }
.health-grid div { align-items: center; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px 9px; grid-template-columns: auto 1fr; padding: 12px; }
.health-grid small { color: var(--muted); grid-column: 2; overflow-wrap: anywhere; }
.status-dot { border-radius: 50%; height: 10px; width: 10px; }
.status-dot.ok { background: #137333; }
.status-dot.bad { background: var(--danger); }
.action-list { display: grid; gap: 10px; }
.action-list a { align-items: center; border: 1px solid var(--line); border-radius: 8px; color: inherit; display: flex; gap: 10px; padding: 12px; text-decoration: none; }
.action-list a:hover { border-color: #9accc6; }
.action-list svg { color: var(--accent); flex: 0 0 auto; }
dialog { border: 0; border-radius: 14px; box-shadow: 0 24px 80px #0003; max-width: 520px; padding: 24px; width: calc(100% - 32px); }
#widget-options { display: grid; gap: 8px; margin: 20px 0; }
#widget-options label { align-items: center; display: flex; gap: 9px; }
.embedded-panel { height: calc(100vh - 110px); padding: 0; overflow: hidden; }
.embedded-panel iframe { border: 0; height: 100%; width: 100%; }
.embedded-shell { height: calc(100vh - 155px); min-height: 520px; overflow: hidden; padding: 0; position: relative; }
.embedded-shell iframe { border: 0; height: 100%; width: 100%; }
.tool-shell { height: calc(100vh - 170px); min-height: 640px; }
.iframe-state { align-items: center; background: #fffffff2; display: flex; inset: 0; justify-content: center; position: absolute; z-index: 2; }
.iframe-state[hidden] { display: none; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; color: inherit; padding: 26px; text-decoration: none; }
.tool-card > span { background: #e7f3ee; border-radius: 9px; display: inline-block; padding: 8px; }
.tool-card p { color: var(--muted); }
.settings-columns { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.check-label { align-items: center !important; display: flex !important; flex-direction: row; }
.settings-actions { margin: 12px 0 30px; }
.settings-tabs { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding: 8px; position: sticky; top: 12px; z-index: 5; }
.settings-tabs a { border-radius: 6px; color: var(--muted); padding: 8px 10px; text-decoration: none; }
.settings-tabs a:hover { background: #eef3f3; color: var(--ink); }
.settings-section { scroll-margin-top: 82px; }
.settings-section + .settings-section { margin-top: 22px; }
.settings-card-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.settings-card-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.settings-card-head small { color: var(--muted); display: block; margin-top: 4px; }
.integration-settings-card form { display: inline; }
.integration-settings-card details { border-top: 1px solid var(--line); padding-top: 10px; }
.crm-workspace { grid-template-columns: minmax(460px, 1.1fr) minmax(380px, .9fr); }
.business-table tbody tr { cursor: pointer; }
.business-table tbody tr:hover { background: #f4f8f8; }
.detail-form { display: grid; gap: 10px; margin-bottom: 14px; }
.detail-form label { color: var(--muted); display: grid; gap: 5px; }
.advanced-json { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.advanced-json summary { color: var(--accent); cursor: pointer; font-weight: 750; margin-bottom: 10px; }
.advanced-json textarea { min-height: 260px; }

@media (max-width: 980px) {
  .sidebar { position: static; width: auto; }
  .main { margin-left: 0; padding: 16px; }
  .metrics, .split, .dashboard-widgets, .supply-visual { grid-template-columns: 1fr; }
  .marketing-nav { grid-template-columns: 1fr auto; }
  .marketing-nav nav { display: none; }
  .hero, .split-section, .workflow-section, .supply-support { gap: 45px; grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 60px; }
  .marketing-hero { min-height: 720px; }
  .hero-overlay { max-width: 720px; }
  .chart-panel.wide { grid-column: auto; }
  .feature-grid.three, .capability-grid, .dashboard-grid, .tool-grid { grid-template-columns: 1fr 1fr; }
  .settings-columns, .settings-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .marketing-nav { padding: 17px; }
  .nav-actions > a:first-child { display: none; }
  .hero, .section { padding-left: 17px; padding-right: 17px; }
  .hero h1 { font-size: 42px; }
  .marketing-hero { min-height: 760px; padding-bottom: 180px; }
  .marketing-hero::after { background: linear-gradient(180deg, #f7faf8f5 0%, #f7faf8ee 55%, #f7faf880 100%); }
  .hero-dashboard { grid-template-columns: 1fr; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .product-ui { padding: 16px; }
  .stage-track, .ui-grid { grid-template-columns: 1fr; }
  .order-head, .file-list div { align-items: flex-start; flex-direction: column; }
  .feature-grid.three, .capability-grid, .dashboard-grid, .tool-grid { grid-template-columns: 1fr; }
  .integration-card { grid-column: auto; }
  .partner-cta { border-radius: 0; margin-bottom: 40px; }
}