:root {
  --ink: #191c17;
  --muted: #747a70;
  --canvas: #f3f3ed;
  --paper: #fffefa;
  --line: #e0e1d9;
  --line-strong: #d2d4ca;
  --acid: #d8ff6a;
  --accent-ink: #182019;
  --blue: #dce8ff;
  --violet: #e7ddff;
  --coral: #ffe1d5;
  --sidebar: #151713;
  --sidebar-fg: #f5f6f1;
  --sidebar-muted: #adb5aa;
  --sidebar-subtle: #7f887c;
  --sidebar-active: rgba(255,255,255,.09);
  --sidebar-border: rgba(255,255,255,.13);
  --sidebar-card: rgba(255,255,255,.06);
  --logo-size: 42px;
  --logo-padding: 0px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--canvas); }
body { font-size: 12px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #76933c; outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 218px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 14px; color: var(--sidebar-fg); background: var(--sidebar); }
.brand { display: grid; grid-template-columns: var(--logo-size) auto 1fr; align-items: center; gap: 10px; padding: 0 7px 25px; color: inherit; text-decoration: none; }
.brand-mark { width: var(--logo-size); height: var(--logo-size); display: block; object-fit: contain; padding: var(--logo-padding); border-radius: 8px; filter: drop-shadow(0 5px 11px rgba(0, 0, 0, .18)); transition: transform 180ms var(--ease-out), filter 180ms var(--ease-out); }
.brand:hover .brand-mark { filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .34)) drop-shadow(0 0 11px rgba(72, 232, 20, .16)); transform: rotate(0deg) translateY(-1px); }
.brand strong { font-size: 13px; letter-spacing: -.025em; }
.brand small { justify-self: start; padding: 3px 6px; border: 1px solid var(--sidebar-border); border-radius: 5px; color: var(--sidebar-muted); background: var(--sidebar-card); font-size: 8px; font-weight: 720; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 2px; margin-bottom: 20px; }
.sidebar nav > p { margin: 0; padding: 0 9px 7px; color: var(--sidebar-subtle); font-size: 8px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }
.nav-item { min-height: 35px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 8px; color: var(--sidebar-muted); background: transparent; cursor: pointer; text-align: left; transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--ease-out); }
.nav-item b { font-size: 10px; font-weight: 570; }
.nav-item.is-active { color: var(--sidebar-fg); background: var(--sidebar-active); box-shadow: inset 0 0 0 1px var(--sidebar-border); }
.nav-item i { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: var(--sidebar-muted); background: var(--sidebar-card); font-size: 7px; font-style: normal; text-align: center; }
.nav-icon { color: var(--sidebar-subtle); font-size: 12px; }
.nav-item.is-active .nav-icon { color: var(--acid); }
.sidebar-status { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 8px; margin-top: auto; padding: 10px 9px; border-top: 1px solid var(--sidebar-border); }
.sidebar-status > span { width: 7px; height: 7px; border-radius: 50%; background: #a8d048; box-shadow: 0 0 0 3px rgba(168, 208, 72, .12); }
.sidebar-status b, .sidebar-status small { display: block; }
.sidebar-status b { font-size: 8px; }
.sidebar-status small { margin-top: 3px; color: var(--sidebar-subtle); font-size: 7px; }
.account { min-height: 53px; display: grid; grid-template-columns: 30px 1fr 12px; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--sidebar-border); border-radius: 10px; background: var(--sidebar-card); }
.account > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--acid); font-size: 8px; font-weight: 780; }
.account b, .account small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account b { font-size: 8px; }
.account small { margin-top: 3px; color: var(--sidebar-subtle); font-size: 7px; }
.account i { color: var(--sidebar-subtle); font-style: normal; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px clamp(18px, 2.8vw, 38px); border-bottom: 1px solid var(--line); background: rgba(255, 254, 250, .9); backdrop-filter: blur(14px); }
.search { width: min(470px, 48vw); min-height: 38px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dcddd5; border-radius: 9px; color: #8a9085; background: #f7f7f2; }
.search input { min-width: 0; border: 0; outline: 0; color: #252821; background: transparent; font-size: 10px; }
.search input::placeholder { color: #9a9f96; }
.search kbd { padding: 3px 5px; border: 1px solid #d9dbd2; border-radius: 5px; color: #949a90; background: white; font-family: inherit; font-size: 7px; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.top-actions > button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #d9dad2; border-radius: 8px; color: #555b51; background: #fffefa; cursor: pointer; font-size: 8px; font-weight: 680; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms var(--ease-out); }
.top-actions > button:not(.primary) { width: 34px; padding: 0; }
.top-actions > button.primary { border-color: #1c1f1a; color: white; background: #1c1f1a; }
.user { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--acid); font-size: 8px; font-weight: 780; }
.health-pill { display: inline-flex; align-items: center; gap: 6px; margin-right: 5px; color: #6d7563; font-size: 8px; font-weight: 650; }
.health-pill i { width: 7px; height: 7px; border-radius: 50%; background: #87b43a; box-shadow: 0 0 0 3px #eaf4d8; }

.content { width: min(1480px, 100%); margin: 0 auto; padding: 31px clamp(18px, 2.8vw, 38px) 60px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { margin: 0; color: #868c81; font-size: 8px; line-height: 1.4; font-weight: 740; letter-spacing: .12em; text-transform: uppercase; }
.page-heading h1 { margin: 6px 0 6px; font-size: clamp(27px, 3vw, 40px); line-height: 1; letter-spacing: -.05em; font-weight: 650; }
.page-heading > div:first-child > p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.page-actions { display: flex; gap: 7px; }
.page-actions button { min-height: 32px; padding: 0 9px; border: 1px solid #d9dad2; border-radius: 8px; color: #666c62; background: var(--paper); cursor: pointer; font-size: 8px; font-weight: 650; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric { min-height: 158px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 1px 0 rgba(23, 25, 21, .025); }
.metric > span, .assessment-summary article > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 9px; font-size: 13px; font-weight: 720; }
.lime { color: var(--accent-ink); background: var(--acid); }
.blue { background: var(--blue); }
.violet { background: var(--violet); }
.coral { background: var(--coral); }
.metric > p { margin: 0 0 6px; color: #757b71; font-size: 9px; }
.metric > strong { display: block; font-size: 27px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.metric footer small { color: #959a91; font-size: 7px; }
.metric footer b { color: #647d31; font-size: 7px; }
.panel { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 1px 0 rgba(23, 25, 21, .025); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr); gap: 10px; margin-top: 10px; }
.pipeline-card, .activity-card, .priority-card, .table-panel, .delivery-panel { padding: 18px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.panel-head h2 { margin: 4px 0 0; font-size: 13px; letter-spacing: -.025em; }
.panel-head button { display: inline-flex; border: 0; color: #69725d; background: transparent; cursor: pointer; font-size: 7px; font-weight: 680; }
.pipeline-bars { display: grid; gap: 14px; margin-top: 24px; }
.pipeline-bars > div { display: grid; grid-template-columns: 125px minmax(80px, 1fr) 44px; align-items: center; gap: 10px; }
.pipeline-bars span b, .pipeline-bars span small { display: block; }
.pipeline-bars span b { font-size: 8px; }
.pipeline-bars span small { margin-top: 3px; color: #9a9f96; font-size: 6px; }
.pipeline-bars > div > i { height: 7px; overflow: hidden; border-radius: 999px; background: #efefe9; }
.pipeline-bars > div > i > b { display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit; background: #cdd1c6; transition: transform 220ms var(--ease-out); }
.pipeline-bars .tone-0 { background: #9ebbf1; }
.pipeline-bars .tone-1 { background: #b5a1e3; }
.pipeline-bars .tone-2 { background: #bddf54; }
.pipeline-bars .tone-3 { background: #343a2f; }
.pipeline-bars > div > strong { font-size: 8px; text-align: right; }
.pipeline-card > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 21px; padding-top: 14px; border-top: 1px solid #e8e9e2; }
.pipeline-card > footer > span { padding: 9px; border-radius: 8px; background: #f6f7f1; }
.pipeline-card > footer b, .pipeline-card > footer small { display: block; }
.pipeline-card > footer b { font-size: 8px; }
.pipeline-card > footer small { margin-top: 4px; color: #949a90; font-size: 6px; line-height: 1.4; }
.activity-list { margin-top: 15px; }
.activity-list > div { min-height: 53px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #ebece5; }
.activity-list > div:last-child { border: 0; }
.activity-list > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #536238; background: #eff5e1; font-size: 7px; font-weight: 740; }
.activity-list p, .activity-list b, .activity-list small { min-width: 0; display: block; margin: 0; }
.activity-list b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.activity-list small, .activity-list time { margin-top: 3px; color: #989d94; font-size: 6px; }
.quiet { color: #979c93; font-size: 8px; }
.priority-card { margin-top: 10px; overflow: hidden; }

.data-table { min-width: 0; margin-top: 13px; }
.table-head, .table-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(100px, .8fr) 54px minmax(110px, .9fr) 92px 65px 14px; align-items: center; gap: 10px; }
.table-head { min-height: 28px; padding: 0 9px; color: #92978e; font-size: 6px; font-weight: 740; letter-spacing: .04em; text-transform: uppercase; }
.table-row { width: 100%; min-height: 59px; padding: 8px 9px; border: 0; border-top: 1px solid #e9eae3; color: #696f65; background: transparent; cursor: pointer; text-align: left; font-size: 7px; transition: background-color 140ms ease, transform 140ms var(--ease-out); }
.person { min-width: 0; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; }
.person > i, .drawer-avatar { display: grid; place-items: center; border-radius: 9px; color: #394033; font-style: normal; font-weight: 760; }
.person > i { width: 32px; height: 32px; font-size: 7px; }
.person p, .person b, .person small { min-width: 0; display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person b { color: #272a24; font-size: 8px; }
.person small { margin-top: 3px; color: #999e95; font-size: 6px; }
.score { color: #272a24; font-size: 12px; }
.score small { color: #9ca198; font-size: 6px; font-weight: 500; }
.stage { width: fit-content; min-height: 20px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; color: #71766e; background: #efefe9; font-size: 6px; font-weight: 700; white-space: nowrap; }
.stage.high_intent, .stage.meeting_booked { color: #577029; background: #eaf4d5; }
.stage.qualified, .stage.review { color: #50698f; background: #e4edfb; }
.stage.nurture { color: #6d5a93; background: #eee7fa; }
.filter-tabs { display: flex; gap: 4px; padding-bottom: 13px; border-bottom: 1px solid #e7e8e1; }
.filter-tabs button { min-height: 31px; padding: 0 9px; border: 0; border-radius: 7px; color: #797f75; background: transparent; cursor: pointer; font-size: 7px; font-weight: 650; }
.filter-tabs button.is-active { color: #2e322b; background: #eff0ea; }
.filter-tabs span { color: #999e95; }

.board { min-width: 850px; display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 8px; overflow-x: auto; }
.board > article { min-height: 530px; padding: 10px; border: 1px solid #dedfd7; border-radius: 12px; background: #ebebe5; }
.board > article > header { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 3px 7px; }
.board > article > header span { display: inline-flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 700; }
.board > article > header span i { width: 7px; height: 7px; border-radius: 50%; background: #a5aba1; }
.board > article > header span i.qualified { background: #9ebbf1; }
.board > article > header span i.meeting_booked { background: #9abe4d; }
.board > article > header span i.proposal { background: #33392f; }
.board > article > header > b { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: #777d73; background: #f8f8f3; font-size: 7px; text-align: center; }
.board > article > div { display: grid; gap: 7px; }
.board > article > div > button:not(.add-card) { padding: 11px; border: 1px solid #dcddd5; border-radius: 9px; color: #282b25; background: var(--paper); cursor: pointer; text-align: left; transition: border-color 140ms ease, transform 140ms var(--ease-out); }
.board-score { width: 27px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #52622f; background: #eff6df; font-size: 8px; font-weight: 760; }
.board button p, .board button p b, .board button p small { display: block; margin: 0; }
.board button p { margin-top: 10px; }
.board button p b { font-size: 8px; }
.board button p small { margin-top: 3px; color: #989d94; font-size: 6px; }
.board button footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 14px; }
.board button footer span { max-width: 145px; overflow: hidden; color: #7c8278; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.board button footer i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #656c60; background: #eef0e9; font-size: 6px; font-style: normal; font-weight: 740; }
.empty-column { min-height: 75px; display: grid; place-items: center; border: 1px dashed #cfd1c7; border-radius: 9px; color: #979c93; font-size: 7px; }
.add-card { min-height: 33px; border: 1px dashed #c8cbc0; border-radius: 8px; color: #858b81; background: transparent; cursor: pointer; font-size: 7px; }

.assessment-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 10px; }
.assessment-summary article { min-height: 92px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.assessment-summary article > span { margin: 0; }
.assessment-summary p, .assessment-summary p b, .assessment-summary p small { display: block; margin: 0; }
.assessment-summary p b { font-size: 9px; }
.assessment-summary p small { margin-top: 4px; color: #989d94; font-size: 7px; }
.assessment-summary article > strong { font-size: 20px; letter-spacing: -.03em; }
.assessment-summary article > strong small { color: #979c93; font-size: 7px; font-weight: 500; }

.system-health { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px; border-radius: 10px; color: #53633b; background: #eff5e2; }
.system-health > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #2e381d; background: var(--acid); font-weight: 760; }
.system-health p, .system-health b, .system-health small { display: block; margin: 0; }
.system-health b { font-size: 8px; }
.system-health small { margin-top: 3px; color: #7e8a6e; font-size: 7px; }
.system-health button { border: 0; color: #617637; background: transparent; cursor: pointer; font-size: 7px; font-weight: 690; }
.delivery-head, .delivery-row { display: grid; grid-template-columns: minmax(170px, 1fr) 70px 110px minmax(150px, 1fr); align-items: center; gap: 10px; }
.delivery-head { min-height: 31px; padding: 0 8px; color: #92978e; font-size: 6px; font-weight: 740; text-transform: uppercase; }
.delivery-row { min-height: 58px; padding: 7px 8px; border-top: 1px solid #e8e9e2; color: #777d73; }
.delivery-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.delivery-row > span:first-child i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #4f5e36; background: #eff5e2; font-style: normal; }
.delivery-row > span:first-child b { color: #33372f; font-size: 8px; }
.delivery-row time, .delivery-row small { color: #92988e; font-size: 7px; }

.endpoint-layout { display: grid; grid-template-columns: minmax(520px, 1fr) 300px; gap: 10px; }
.endpoint-card, .security-card, .contract-list { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.endpoint-card { overflow: hidden; }
.endpoint-card > header { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 17px; border-bottom: 1px solid #e5e6df; background: #f8f8f4; }
.method { padding: 5px 7px; border-radius: 6px; color: #495b26; background: var(--acid); font-size: 7px; font-weight: 780; }
.endpoint-card code { overflow: hidden; color: #343832; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-card > header button { min-height: 29px; padding: 0 8px; border: 1px solid #d7d9d0; border-radius: 7px; color: #696f65; background: white; cursor: pointer; font-size: 7px; }
.contract-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; padding: 20px 17px; border-bottom: 1px solid #e7e8e1; }
.contract-flow > div { min-height: 92px; padding: 10px; border: 1px solid #e0e1d9; border-radius: 9px; background: #fafaf6; }
.contract-flow > div > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #4b572f; background: #ecf4dc; font-size: 6px; font-weight: 740; }
.contract-flow p, .contract-flow b, .contract-flow small { display: block; margin: 0; }
.contract-flow b { margin-top: 9px; font-size: 8px; }
.contract-flow small { margin-top: 4px; color: #969b92; font-size: 6px; line-height: 1.4; }
.contract-flow > i { color: #a2a79e; font-style: normal; }
.endpoint-card > section { padding: 17px; border-bottom: 1px solid #e7e8e1; }
.endpoint-card > section:last-child { border: 0; }
.endpoint-card pre { margin: 10px 0 0; padding: 14px; overflow-x: auto; border-radius: 9px; color: #6e7568; background: #20231e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; line-height: 1.75; }
.endpoint-card pre span { color: #d8ff6a; }
.endpoint-layout > aside { display: grid; align-content: start; gap: 10px; }
.security-card { padding: 17px; }
.security-card > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #3d4928; background: var(--acid); font-weight: 760; }
.security-card h2 { margin: 13px 0 5px; font-size: 12px; }
.security-card p { margin: 0; color: #7a8175; font-size: 7px; line-height: 1.5; }
.quiet-card > span { background: var(--blue); }
.contract-list { padding: 17px; }
.contract-list > div { min-height: 38px; display: grid; grid-template-columns: 23px 1fr 13px; align-items: center; gap: 8px; border-top: 1px solid #e8e9e2; }
.contract-list > div:first-of-type { margin-top: 10px; }
.contract-list > div span { color: #979c93; font-size: 6px; }
.contract-list > div b { font-size: 7px; }
.contract-list > div i { color: #728842; font-size: 8px; font-style: normal; }
.contract-status { display: inline-flex; align-items: center; gap: 6px; color: #9a6253; font-size: 7px; font-weight: 690; }
.contract-status i { width: 7px; height: 7px; border-radius: 50%; background: #da806b; box-shadow: 0 0 0 3px #f8e9e3; }
.contract-status.ready { color: #62783a; }
.contract-status.ready i { background: #8bb23f; box-shadow: 0 0 0 3px #eaf4d8; }
.contract-status.danger { color: #a25543; }
.contract-status.danger i { background: #da6d58; box-shadow: 0 0 0 3px #f8e4dd; }
.danger-card { border-color: #e7b9aa; background: #fff8f5; }
.danger-card > span { color: #7e3728; background: #f2c4b5; }

.loading, .error-state, .empty { min-height: 420px; display: grid; place-items: center; align-content: center; text-align: center; }
.loading > span { width: 27px; height: 27px; border: 2px solid #d9dcd1; border-top-color: #78963e; border-radius: 50%; animation: spin 700ms linear infinite; }
.loading p { color: #858b81; font-size: 8px; }
.error-state > span, .empty > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #f4e5df; }
.error-state h1, .empty h2 { margin: 12px 0 4px; font-size: 14px; }
.error-state p, .empty p { margin: 0; color: #8d9389; font-size: 8px; }
.error-state button { min-height: 32px; margin-top: 12px; padding: 0 10px; border: 0; border-radius: 8px; color: white; background: var(--ink); cursor: pointer; font-size: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.drawer-layer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-scrim { position: absolute; inset: 0; border: 0; background: rgba(18, 20, 16, .38); backdrop-filter: blur(2px); cursor: pointer; opacity: 1; transition: opacity 180ms var(--ease-out); }
.drawer { position: relative; width: min(440px, 100%); height: 100%; overflow-y: auto; background: var(--paper); box-shadow: -18px 0 48px rgba(24, 27, 20, .15); transform: translateX(0); transition: transform 220ms var(--ease-out); }
@starting-style { .drawer { transform: translateX(24px); } .drawer-scrim { opacity: 0; } }
.drawer > header { min-height: 77px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e5e6df; }
.drawer > header > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; }
.drawer-avatar { width: 38px; height: 38px; font-size: 8px; }
.drawer header p, .drawer header b, .drawer header small { min-width: 0; display: block; margin: 0; }
.drawer header b { font-size: 10px; }
.drawer header small { margin-top: 3px; color: #92988e; font-size: 7px; }
.drawer > header > button { width: 31px; height: 31px; border: 1px solid #dedfd7; border-radius: 8px; color: #666c62; background: #fafaf6; cursor: pointer; font-size: 15px; }
.drawer-body { padding-bottom: 32px; }
.drawer-score { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 18px; padding: 14px; border-radius: 11px; background: #f2f6e8; }
.drawer-score span small, .drawer-score span b { display: block; }
.drawer-score span small { margin-bottom: 4px; color: #7f886f; font-size: 6px; text-transform: uppercase; }
.drawer-score span b { font-size: 25px; letter-spacing: -.04em; }
.drawer-score span b i { color: #8d9582; font-size: 7px; font-style: normal; font-weight: 500; }
.drawer-section, .notes { margin: 0 18px; padding: 18px 0; border-top: 1px solid #e5e6df; }
.drawer-section h2 { margin: 5px 0 6px; font-size: 17px; }
.drawer-section > p:last-child, .notes > p:last-child { margin: 0; color: #777e73; font-size: 8px; line-height: 1.55; }
.score-bars { display: grid; gap: 12px; margin: 0 18px 18px; }
.score-bars > div > span { display: flex; justify-content: space-between; margin-bottom: 5px; color: #6d7369; font-size: 7px; }
.score-bars > div > i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #eceee7; }
.score-bars > div > i > b { display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #a5ca4a, #d8ff6a); }
.recommendation { display: grid; grid-template-columns: 29px 1fr; gap: 9px; margin: 0 18px 18px; padding: 13px; border-radius: 10px; color: #4b5937; background: #eef5df; }
.recommendation > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--acid); }
.recommendation small, .recommendation b, .recommendation p { display: block; margin: 0; }
.recommendation small { color: #798568; font-size: 6px; text-transform: uppercase; }
.recommendation b { margin-top: 4px; font-size: 8px; }
.recommendation p { margin-top: 4px; color: #788469; font-size: 7px; line-height: 1.4; }
.transcript { display: grid; gap: 8px; margin-top: 10px; }
.transcript > div { max-width: 86%; padding: 9px 10px; border-radius: 9px; background: #f1f2ec; }
.transcript > div.respondent { justify-self: end; background: #eef5df; }
.transcript small { color: #92988e; font-size: 6px; text-transform: uppercase; }
.transcript p { margin: 4px 0 0; color: #596057; font-size: 7px; line-height: 1.45; }

.drawer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px 0; }
.report-button { min-height: 32px; padding: 0 11px; border: 1px solid #cfd3c7; border-radius: 8px; color: #3d4632; background: #f7f9f1; cursor: pointer; font-size: 7px; font-weight: 720; }
.delivery-state { display: inline-flex; align-items: center; gap: 6px; color: #6c7b50; font-size: 7px; font-weight: 700; }
.delivery-state i { width: 7px; height: 7px; border-radius: 50%; background: #9abd4c; box-shadow: 0 0 0 3px #edf4dd; }
.report-preview { margin: 14px 18px 0; overflow: hidden; border: 1px solid #dfe1d8; border-radius: 12px; background: #fcfcf8; box-shadow: 0 12px 32px rgba(43, 48, 35, .08); }
.report-preview[hidden] { display: none; }
.report-preview > header { min-height: 64px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 12px 14px; color: white; background: #20231e; }
.report-preview > header img { width: 26px; }
.report-preview > header p, .report-preview > header b, .report-preview > header small { display: block; margin: 0; }
.report-preview > header b { font-size: 8px; }
.report-preview > header small { margin-top: 3px; color: #b8beb2; font-size: 6px; }
.report-preview > header > span { color: var(--acid); font-size: 22px; font-weight: 780; }
.report-preview > header > span i { color: #acb3a5; font-size: 6px; font-style: normal; }
.report-preview > div { padding: 16px; }
.report-preview h2 { margin: 6px 0 13px; font-size: 15px; line-height: 1.25; }
.report-signal { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 13px; padding: 9px; border-radius: 8px; color: #697557; background: #eff5e2; font-size: 7px; }
.report-preview article { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid #e5e6df; }
.report-preview article > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #48552e; background: var(--acid); font-size: 6px; font-weight: 760; }
.report-preview article p, .report-preview article b, .report-preview article small { display: block; margin: 0; }
.report-preview article b { font-size: 7px; }
.report-preview article small { margin-top: 4px; color: #7e847a; font-size: 6px; line-height: 1.4; }
.report-preview > footer { padding: 10px 14px; border-top: 1px solid #e5e6df; color: #999e95; font-size: 6px; }
.management-card { margin: 0 18px 18px; padding: 14px; border: 1px solid #dde1d4; border-radius: 11px; background: #fafbf6; }
.management-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 11px; }
.management-head p, .management-head b, .management-head small { display: block; margin: 0; }
.management-head b { font-size: 9px; }
.management-head small { margin-top: 3px; color: #8c9288; font-size: 6px; }
.management-head > span { padding: 4px 6px; border-radius: 999px; color: #56702d; background: #e9f3d5; font-size: 6px; font-weight: 730; }
.management-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.management-card label { display: grid; gap: 5px; color: #747a70; font-size: 6px; font-weight: 690; }
.management-card select, .management-card textarea { width: 100%; border: 1px solid #d7d9d1; border-radius: 7px; color: #343832; background: white; font: inherit; font-size: 7px; }
.management-card select { height: 33px; padding: 0 8px; }
.management-card > label { margin-top: 9px; }
.management-card textarea { min-height: 58px; padding: 9px; resize: vertical; }
.management-save { min-height: 33px; display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 9px; }
.management-save span { color: #688044; font-size: 6px; }
.management-save button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: white; background: var(--ink); cursor: pointer; font-size: 7px; font-weight: 700; }
.management-save button:disabled { opacity: .5; cursor: wait; }
.answer-list { display: grid; gap: 7px; margin-top: 10px; }
.answer-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border-radius: 7px; background: #f3f4ef; font-size: 7px; }
.answer-list span { color: #7c8278; }
.answer-list b { text-align: right; }
.record-timeline { position: relative; display: grid; gap: 12px; margin-top: 11px; }
.record-timeline > div { display: grid; grid-template-columns: 11px 1fr auto; gap: 8px; align-items: start; }
.record-timeline > div > i { width: 8px; height: 8px; margin-top: 2px; border: 2px solid white; border-radius: 50%; background: #9abd4c; box-shadow: 0 0 0 1px #9abd4c; }
.record-timeline span b, .record-timeline span small { display: block; }
.record-timeline span b { font-size: 7px; }
.record-timeline span small { margin-top: 3px; color: #858b81; font-size: 6px; line-height: 1.4; }
.record-timeline time { color: #979c93; font-size: 6px; white-space: nowrap; }
.record-deliveries { display: grid; gap: 7px; margin-top: 10px; }
.record-deliveries > div { min-height: 42px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #e5e6df; border-radius: 8px; }
.record-deliveries > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #526338; background: #eff5e2; }
.record-deliveries p, .record-deliveries b, .record-deliveries small { display: block; margin: 0; }
.record-deliveries b { font-size: 7px; }
.record-deliveries small { margin-top: 3px; color: #969b92; font-size: 6px; }
.record-deliveries > div > i { padding: 4px 6px; border-radius: 999px; color: #657a3e; background: #ebf3dc; font-size: 6px; font-style: normal; font-weight: 700; }
.record-deliveries > div > i.skipped { color: #8a8f87; background: #eff0ec; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-card, .integration-card, .connection-note { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.settings-card { min-height: 235px; padding: 18px; }
.settings-primary > header { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-bottom: 17px; }
.settings-primary > header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #34451b; background: var(--acid); font-size: 8px; font-weight: 800; }
.settings-primary header p, .settings-primary header b, .settings-primary header small { display: block; margin: 0; }
.settings-primary header b { font-size: 9px; }
.settings-primary header small { margin-top: 4px; color: #8e9489; font-size: 6px; }
.settings-primary header i { padding: 4px 7px; border-radius: 999px; color: #53702c; background: #eaf3d7; font-size: 6px; font-style: normal; font-weight: 720; }
.setting-block h2, .settings-card > h2 { margin: 6px 0; font-size: 15px; }
.setting-block > p:last-child, .setting-copy { color: #787f74; font-size: 7px; line-height: 1.55; }
.embed-placement { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; margin-top: 15px; padding: 10px; border-radius: 9px; color: #54613f; background: #f0f5e6; }
.embed-placement > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #263117; background: var(--acid); font-size: 7px; font-weight: 780; }
.embed-placement p, .embed-placement b, .embed-placement small { display: block; margin: 0; }
.embed-placement b { font-size: 7px; }
.embed-placement small { margin-top: 3px; color: #7c8870; font-size: 6px; line-height: 1.35; }
.weight-list, .route-list { display: grid; gap: 12px; margin-top: 18px; }
.weight-list > div { display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 10px; }
.weight-list span b, .weight-list span small { display: block; }
.weight-list b { font-size: 7px; }
.weight-list small { margin-top: 3px; color: #969b92; font-size: 6px; }
.weight-list i { height: 6px; overflow: hidden; border-radius: 999px; background: #eff0eb; }
.weight-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a3c849, var(--acid)); }
.route-list > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.route-list p, .route-list p b, .route-list p small { display: block; margin: 0; }
.route-list p b { font-size: 7px; }
.route-list p small { margin-top: 3px; color: #92988e; font-size: 6px; }
.mini-flow { display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: start; gap: 7px; margin: 25px 0; }
.mini-flow span { padding: 8px 9px; border: 1px solid #dfe1d8; border-radius: 7px; background: #f8f9f5; font-size: 7px; font-weight: 700; }
.mini-flow i { color: #a0a69b; font-style: normal; }
.settings-link { padding: 0; border: 0; color: #617738; background: transparent; cursor: pointer; font-size: 7px; font-weight: 700; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.integration-card { min-height: 210px; padding: 18px; }
.integration-card header { display: flex; align-items: center; justify-content: space-between; }
.integration-card header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #40502a; background: #edf4df; font-size: 9px; font-weight: 780; }
.integration-card header > i { padding: 4px 7px; border-radius: 999px; color: #8b6a44; background: #f5eadb; font-size: 6px; font-style: normal; font-weight: 700; }
.integration-card h2 { margin: 17px 0 3px; font-size: 14px; }
.integration-card > b { color: #6c7368; font-size: 7px; }
.integration-card > p { min-height: 35px; margin: 8px 0 14px; color: #858b81; font-size: 7px; line-height: 1.5; }
.integration-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid #e7e8e2; }
.integration-card footer small { color: #989e94; font-size: 6px; }
.integration-card footer button { min-height: 28px; padding: 0 8px; border: 1px solid #dcddd6; border-radius: 7px; color: #969b92; background: #f6f6f3; font-size: 6px; }
.connection-note { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 14px; }
.connection-note > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #34451c; background: var(--acid); }
.connection-note p, .connection-note b, .connection-note small { display: block; margin: 0; }
.connection-note b { font-size: 8px; }
.connection-note small { margin-top: 4px; color: #8d9389; font-size: 7px; }
.connection-note button { border: 0; color: #64783e; background: transparent; cursor: pointer; font-size: 7px; font-weight: 700; }

.settings-grid, .integration-grid { gap: 16px; }
.settings-card, .integration-card, .connection-note { border-color: #dfe2d7; box-shadow: 0 1px 0 rgba(33, 38, 27, .03), 0 12px 30px rgba(46, 53, 36, .035); }
.settings-card { min-height: 0; padding: 24px; }
.settings-card:nth-child(2) { background: linear-gradient(145deg, #fff 0%, #fbfcf7 100%); }
.settings-card:nth-child(3) { background: linear-gradient(145deg, #fff 0%, #fbfaff 100%); }
.settings-card:nth-child(4) { background: linear-gradient(145deg, #fff 0%, #f9fbf6 100%); }
.settings-primary > header { margin-bottom: 22px; }
.settings-primary > header > span { width: 44px; height: 44px; border-radius: 12px; font-size: 9px; box-shadow: inset 0 0 0 1px rgba(70, 86, 44, .08); }
.settings-primary header b { font-size: 11px; }
.settings-primary header small { margin-top: 5px; font-size: 7px; }
.settings-primary header i { padding: 5px 8px; font-size: 7px; }
.setting-block h2, .settings-card > h2 { margin: 8px 0; font-size: 19px; line-height: 1.18; letter-spacing: -.025em; }
.setting-block > p:last-child, .setting-copy { max-width: 560px; font-size: 9px; line-height: 1.6; }
.embed-placement { grid-template-columns: 42px 1fr auto; gap: 12px; margin-top: 20px; padding: 14px; border: 1px solid #e0e7d2; border-radius: 11px; }
.embed-placement > span { width: 42px; height: 42px; font-size: 8px; box-shadow: 0 5px 14px rgba(133, 166, 64, .18); }
.embed-placement b { font-size: 9px; }
.embed-placement small { margin-top: 4px; font-size: 7px; line-height: 1.45; }
.embed-placement > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.7); font-size: 10px; }
.weight-list, .route-list { gap: 15px; margin-top: 22px; }
.weight-list > div { grid-template-columns: 150px 1fr; gap: 14px; }
.weight-list b, .route-list p b { font-size: 9px; }
.weight-list small, .route-list p small { margin-top: 4px; font-size: 7px; }
.weight-list i { height: 8px; }
.route-list > div { grid-template-columns: 72px 1fr; gap: 13px; }
.route-list .stage { min-height: 27px; display: inline-grid; place-items: center; padding: 0 9px; }
.mini-flow { gap: 9px; margin: 29px 0 24px; }
.mini-flow span { padding: 10px 12px; border-radius: 9px; font-size: 8px; box-shadow: 0 3px 8px rgba(35, 39, 30, .035); }
.settings-link { margin-top: 6px; font-size: 8px; }
.integration-card { position: relative; min-height: 195px; padding: 23px; overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.integration-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, #b6db5a, #e0ff88); opacity: .72; }
.integration-card header > span { width: 43px; height: 43px; border-radius: 11px; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(65, 82, 41, .05); }
.integration-card header > i { padding: 5px 8px; font-size: 7px; }
.integration-card h2 { margin: 20px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.integration-card > b { font-size: 9px; }
.integration-card > p { min-height: 28px; margin: 9px 0 17px; font-size: 8px; line-height: 1.55; }
.integration-card footer { padding-top: 15px; }
.integration-card footer small { font-size: 7px; }
.integration-card footer button { min-height: 31px; padding: 0 10px; font-size: 7px; }
.connection-note { grid-template-columns: 40px 1fr auto; gap: 13px; margin-top: 16px; padding: 17px; }
.connection-note > span { width: 40px; height: 40px; border-radius: 10px; font-size: 11px; }
.connection-note b { font-size: 10px; }
.connection-note small { margin-top: 5px; font-size: 8px; }
.connection-note button { font-size: 8px; }
.drawer { width: min(500px, 100%); }
.drawer > header { min-height: 84px; padding-inline: 21px; }
.drawer header b { font-size: 12px; }
.drawer header small { font-size: 8px; }
.drawer-actions { padding: 16px 21px 0; }
.report-button { min-height: 35px; padding-inline: 12px; font-size: 8px; }
.delivery-state { font-size: 8px; }
.drawer-score { margin: 18px 21px; padding: 17px; }
.drawer-score span small { font-size: 7px; }
.drawer-score span b { font-size: 28px; }
.management-card { margin: 0 21px 20px; padding: 17px; }
.management-head b { font-size: 10px; }
.management-head small, .management-head > span { font-size: 7px; }
.management-fields { gap: 10px; }
.management-card label { gap: 6px; font-size: 7px; }
.management-card select { height: 38px; padding-inline: 10px; font-size: 8px; }
.management-card textarea { min-height: 67px; padding: 10px; font-size: 8px; line-height: 1.5; }
.management-save { margin-top: 11px; }
.management-save span { font-size: 7px; }
.management-save button { min-height: 34px; padding-inline: 13px; font-size: 8px; }
.drawer-section, .notes { margin-inline: 21px; padding-block: 20px; }
.drawer-section h2 { font-size: 19px; }
.drawer-section > p:last-child, .notes > p:last-child { font-size: 9px; line-height: 1.6; }
.score-bars { gap: 14px; margin: 0 21px 20px; }
.score-bars > div > span { font-size: 8px; }
.score-bars > div > i { height: 7px; }
.recommendation { grid-template-columns: 34px 1fr; gap: 11px; margin: 0 21px 20px; padding: 15px; }
.recommendation > span { width: 34px; height: 34px; }
.recommendation small { font-size: 7px; }
.recommendation b { font-size: 9px; }
.recommendation p { font-size: 8px; line-height: 1.5; }
.answer-list > div { padding: 10px 11px; font-size: 8px; }
.transcript small, .record-timeline time { font-size: 7px; }
.transcript p, .record-timeline span b, .record-deliveries b { font-size: 8px; }
.record-timeline span small, .record-deliveries small { font-size: 7px; }
.record-deliveries > div { min-height: 48px; grid-template-columns: 30px 1fr auto; padding: 8px 10px; }
.record-deliveries > div > span { width: 30px; height: 30px; }
.record-deliveries > div > i { font-size: 7px; }
@media (hover: hover) and (pointer: fine) {
  .settings-card:hover, .integration-card:hover { border-color: #cdd5bf; box-shadow: 0 16px 36px rgba(45, 53, 34, .07); }
  .integration-card:hover { transform: translateY(-2px); }
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { color: white; background: #252822; }
  .top-actions > button:hover, .page-actions button:hover { border-color: #bfc3b7; background: #f7f8f2; }
  .top-actions > button.primary:hover { background: #30342c; }
  .table-row:hover { background: #f7f8f2; }
  .board > article > div > button:not(.add-card):hover { border-color: #aebe8b; }
  .add-card:hover { border-color: #98a976; color: #5d6e3c; }
}
button:active, a:active { transform: scale(.97); }

@media (max-width: 1080px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .table-head, .table-row { grid-template-columns: minmax(170px, 1.3fr) minmax(90px, .8fr) 50px minmax(110px, 1fr) 84px 14px; }
  .table-head span:nth-child(6), .table-row > span:nth-child(6) { display: none; }
  .endpoint-layout { grid-template-columns: 1fr; }
  .endpoint-layout > aside { grid-template-columns: repeat(3, 1fr); }
  .settings-grid, .integration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding-inline: 8px; }
  .brand { display: flex; padding-inline: 9px; }
  .brand strong, .brand small, .sidebar nav > p, .nav-item b, .nav-item i, .sidebar-status, .account > div, .account > i { display: none; }
  .nav-item { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .account { display: grid; grid-template-columns: 1fr; padding: 7px; }
  .search { width: min(360px, 52vw); }
  .assessment-summary { grid-template-columns: 1fr; }
  .contract-flow { grid-template-columns: 1fr 1fr; }
  .contract-flow > i { display: none; }
  .endpoint-layout > aside { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 40; width: 100%; height: 58px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #30342c; }
  .brand, .sidebar nav:nth-of-type(2), .account, .sidebar-status, .sidebar nav:first-of-type > p { display: none; }
  .sidebar nav:first-of-type { display: contents; }
  .nav-item { min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .nav-item b { display: block; font-size: 6px; font-weight: 580; }
  .topbar { min-height: 58px; padding: 9px 12px; }
  .search { width: min(100%, 235px); }
  .search kbd, .health-pill, .top-actions > button:not(.primary), .user { display: none; }
  .top-actions > button.primary { padding-inline: 8px; }
  .content { padding: 23px 12px 88px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-actions { width: 100%; }
  .page-actions button { flex: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 138px; padding: 13px; }
  .metric footer { display: block; }
  .metric footer b { display: none; }
  .pipeline-card, .activity-card, .priority-card, .table-panel, .delivery-panel { padding: 13px; }
  .pipeline-bars > div { grid-template-columns: 103px 1fr 37px; }
  .data-table { overflow-x: auto; }
  .table-head, .table-row { min-width: 740px; }
  .system-health { grid-template-columns: 31px 1fr; }
  .system-health button { display: none; }
  .delivery-panel { overflow-x: auto; }
  .delivery-head, .delivery-row { min-width: 620px; }
  .endpoint-card > header { grid-template-columns: auto minmax(0, 1fr); }
  .endpoint-card > header button { display: none; }
  .contract-flow { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
  .management-fields { grid-template-columns: 1fr; }
  .connection-note { grid-template-columns: 32px 1fr; }
  .connection-note button { grid-column: 2; justify-self: start; padding: 0; }
}
@media (max-width: 600px) {
  .sidebar { display: flex; flex-direction: row; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar nav:first-of-type, .sidebar nav:nth-of-type(2) { display: contents; }
  .nav-item { min-width: 72px; flex: 0 0 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Prospect identity editor */
.identity-editor { margin: 0 0 13px; padding: 12px; border: 1px solid #e3e6da; border-radius: 9px; background: #fff; }
.identity-editor-heading { margin-bottom: 10px; }
.identity-editor-heading p, .identity-editor-heading b, .identity-editor-heading small { display: block; margin: 0; }
.identity-editor-heading b { color: #343832; font-size: 8px; }
.identity-editor-heading small { margin-top: 3px; color: #8c9288; font-size: 6px; font-weight: 500; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.management-card input { width: 100%; height: 33px; padding: 0 8px; border: 1px solid #d7d9d1; border-radius: 7px; color: #343832; background: white; font: inherit; font-size: 7px; outline: none; }
.management-card input:focus, .management-card select:focus, .management-card textarea:focus { border-color: #9aad72; box-shadow: 0 0 0 3px rgba(154,173,114,.14); }
.management-card input::placeholder { color: #a7aca3; }
@media (min-width: 700px) {
  .identity-editor { padding: 14px; }
  .identity-editor-heading b { font-size: 9px; }
  .identity-editor-heading small { font-size: 7px; }
  .management-card input { height: 38px; padding-inline: 10px; font-size: 8px; }
}