:root {
  color-scheme: light;
  --ink: #102d27;
  --ink-soft: #536c65;
  --forest: #173f35;
  --forest-2: #255e4b;
  --leaf: #6d9a4f;
  --lime: #b7dc70;
  --sage-50: #f3f7f0;
  --sage-100: #e7eee3;
  --sage-200: #d4e1ce;
  --canvas: #f4f6f2;
  --white: #ffffff;
  --line: #dfe6dc;
  --orange: #be6a32;
  --orange-soft: #faeee3;
  --blue: #4e6d97;
  --blue-soft: #e9f0fa;
  --metric-priority-1: #38755d;
  --metric-priority-2: #bdd2b8;
  --metric-priority-3: #dce8d8;
  --metric-priority-4: #eef3ec;
  --shadow: 0 14px 40px rgba(20, 54, 45, .07);
  --radius: 18px;
  --sidebar-width: 276px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(109, 154, 79, .28); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 24px 18px 18px; background: #e5ede1; border-right: 1px solid #cedbc8; }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #172c28; font-family: Arial, Helvetica, sans-serif; font-size: 31px; font-weight: 700; letter-spacing: -1.6px; line-height: 1; text-decoration: none; }
.brand-mark { position: relative; width: 30px; height: 34px; border-radius: 8px; background: #1d5b46; color: white; font-size: 30px; font-weight: 600; letter-spacing: 0; line-height: 32px; text-align: center; }
.brand-mark span { position: absolute; right: 5px; bottom: 7px; width: 7px; height: 7px; border-radius: 2px; background: #accfb5; }
.brand-period { color: #1d5b46; }
.brand--mobile { display: none; }
.icon-button.sidebar-close { display: none; font-size: 26px; }
.workspace-card { display: flex; align-items: center; gap: 12px; padding: 14px 12px 18px; border-bottom: 1px solid #cbd9c5; }
.workspace-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid #b9cbb2; border-radius: 11px; background: rgba(255,255,255,.72); font-weight: 700; }
.workspace-card strong, .workspace-card span { display: block; }
.workspace-card strong { font-size: 14px; }
.workspace-card span { margin-top: 2px; color: var(--ink-soft); font-size: 12px; }
.main-nav { display: grid; gap: 4px; margin-top: 18px; }
.nav-item { display: flex; width: 100%; min-height: 46px; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: #50685f; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { background: rgba(255,255,255,.55); color: var(--forest); }
.nav-item:active { transform: translateY(1px); }
.nav-item.is-active { background: #cbdcc3; color: #295b45; font-weight: 700; }
.nav-item svg { flex: 0 0 auto; }
.nav-count { min-width: 24px; margin-left: auto; padding: 2px 6px; border-radius: 7px; background: rgba(255,255,255,.58); text-align: center; font-size: 11px; font-weight: 700; }
.nav-count--alert { background: var(--orange-soft); color: #9a4a1f; }
.sidebar-bottom { display: grid; gap: 5px; margin-top: auto; }
.pilot-card { margin: 14px 6px 10px; padding: 13px 12px; border: 1px solid #cad8c4; border-radius: 12px; background: rgba(255,255,255,.44); }
.pilot-meta { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 11px; }
.pilot-meta strong { color: var(--forest); }
.progress-track { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 10px; background: #cfdbca; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--leaf); }
.user-card { display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 10px; margin-top: 7px; padding: 13px 10px 4px; border-top: 1px solid #cbd9c5; }
.user-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--forest); color: white; font-size: 12px; font-weight: 750; }
.user-card strong, .user-card span { display: block; }
.user-card strong { font-size: 13px; }
.user-card span { color: var(--ink-soft); font-size: 11px; }
.user-card svg { width: 17px; color: var(--ink-soft); }
.sidebar-auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px 0; }
.sidebar-auth-actions a, .topbar-auth-actions a { border: 1px solid #bfd0b9; border-radius: 9px; color: var(--forest); font-size: 11px; font-weight: 750; text-align: center; text-decoration: none; }
.sidebar-auth-actions a { padding: 10px 5px; background: rgba(255,255,255,.55); }
.sidebar-auth-actions a:last-child, .topbar-auth-actions a:last-child { border-color: var(--forest); background: var(--forest); color: white; }
.sidebar-auth-actions a:hover, .topbar-auth-actions a:hover { filter: brightness(.94); }

.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; height: 72px; align-items: center; gap: 18px; padding: 0 34px; border-bottom: 1px solid rgba(214, 224, 210, .9); background: rgba(244,246,242,.88); backdrop-filter: blur(16px); }
.icon-button.menu-button { display: none; }
.global-search { display: flex; width: min(430px, 45vw); align-items: center; gap: 10px; color: #71877e; }
.global-search svg { width: 18px; }
.global-search input { width: 100%; padding: 10px 0; border: 0; outline: none; background: transparent; color: var(--ink); }
.global-search input::placeholder { color: #82958d; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-auth-actions { display: flex; align-items: center; gap: 7px; }
.topbar-auth-actions a { padding: 9px 12px; white-space: nowrap; }
.account-indicator { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #cbdcc7; border-radius: 10px; background: #eaf3e7; color: var(--forest); }
.account-indicator__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #4c9760; }
.account-indicator strong, .account-indicator small { display: block; }
.account-indicator strong { font-size: 11px; }
.account-indicator small { max-width: 160px; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--sage-100); }
.notification-button { position: relative; border: 1px solid var(--line); background: white; }
.notification-button > span { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: #d66d3c; }

.screens { padding: 34px clamp(22px, 3vw, 48px) 54px; }
.screen { display: none; width: 100%; max-width: 1560px; margin: 0 auto; animation: reveal .24s ease; }
.screen.is-active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 1px 0 4px; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -.045em; }
.page-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 15px; }
.eyebrow { margin: 0 0 9px; color: var(--forest-2); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.demo-label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: 9px; background: var(--sage-100); color: var(--ink-soft); font-size: 12px; font-weight: 650; white-space: nowrap; }
.primary-button, .secondary-button, .pause-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.primary-button { border: 1px solid var(--forest); background: var(--forest); color: white; box-shadow: 0 6px 14px rgba(23,63,53,.13); }
.primary-button:hover { background: #0e332b; }
.secondary-button { border: 1px solid var(--line); background: white; color: var(--ink); }
.secondary-button:hover { border-color: #c6d2c2; background: #fbfcfa; }
.primary-button.compact, .secondary-button.compact { min-height: 36px; padding: 0 12px; font-size: 13px; }
.primary-button svg, .secondary-button svg { width: 17px; }
.pause-button { border: 1px solid #e7c7bb; background: #fff7f3; color: #a64b2c; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card { min-height: 177px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 4px 18px rgba(20,54,45,.025); }
.metric-card--hero { border-color: #2a654f; background: linear-gradient(145deg, #2a654f, var(--metric-priority-1)); color: white; box-shadow: 0 13px 28px rgba(42,101,79,.14); }
.metric-card--priority-2 { border-color: #a9c2a3; background: linear-gradient(145deg, #b1caab, var(--metric-priority-2)); }
.metric-card--priority-3 { border-color: #c7d8c2; background: linear-gradient(145deg, #d5e4d1, var(--metric-priority-3)); }
.metric-card--priority-4 { border-color: #dce5d9; background: linear-gradient(145deg, #e9f0e6, var(--metric-priority-4)); }
.metric-top, .metric-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-top { color: var(--ink-soft); font-weight: 620; }
.metric-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--sage-50); color: #758a73; }
.metric-card--hero .metric-top, .metric-card--hero .metric-bottom { color: rgba(255,255,255,.78); }
.metric-card--hero .metric-icon { background: rgba(255,255,255,.13); color: #d8edc9; }
.metric-card--priority-2 .metric-icon { background: rgba(255,255,255,.52); color: #426b50; }
.metric-card--priority-3 .metric-icon { background: rgba(255,255,255,.58); color: #5b7b61; }
.metric-card--priority-4 .metric-icon { background: rgba(255,255,255,.68); color: #70896f; }
.metric-icon svg { width: 17px; }
.metric-card > strong { display: block; margin: 22px 0 5px; font-size: clamp(29px, 2.3vw, 39px); font-weight: 640; letter-spacing: -.045em; }
.metric-card--hero > strong { color: white; }
.metric-bottom { color: var(--ink-soft); font-size: 12px; }
.metric-bottom em { padding: 3px 7px; border-radius: 7px; background: var(--sage-50); color: var(--forest-2); font-style: normal; font-weight: 750; white-space: nowrap; }
.metric-card--hero .metric-bottom em { background: rgba(255,255,255,.13); color: white; }
.metric-card--priority-2 .metric-bottom em { background: rgba(255,255,255,.48); }
.metric-card--priority-3 .metric-bottom em { background: rgba(255,255,255,.56); }
.metric-card--priority-4 .metric-bottom em { background: rgba(255,255,255,.7); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 3px 18px rgba(20,54,45,.025); }
.workspace-empty-state { display: grid; justify-items: start; gap: 12px; max-width: 760px; margin: 8px 0 22px; padding: clamp(24px, 4vw, 42px); }
.workspace-empty-state h2 { margin: 2px 0 0; font-size: 22px; }
.workspace-empty-state p { max-width: 620px; margin: 0; color: var(--ink-soft); }
.form-feedback { min-height: 1.4em; margin: 0; color: var(--forest-2); }
.form-feedback.is-error { color: #a64b2c; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e8ede6; }
.panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.panel-heading p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; }
.panel-kicker { padding: 5px 9px; border-radius: 8px; background: var(--sage-50); color: var(--forest-2); font-size: 11px; font-weight: 720; white-space: nowrap; }
.funnel-chart { display: grid; gap: 16px; padding: 22px 24px 17px; }
.funnel-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-soft); font-size: 12px; }
.funnel-label strong { color: var(--ink); }
.funnel-bar { height: 10px; overflow: hidden; border-radius: 10px; background: #edf1ea; }
.funnel-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #477b58, #95bf6c); }
.funnel-step:nth-child(2) .funnel-bar span { background: linear-gradient(90deg, #5b8e61, #a9ca78); }
.funnel-step:nth-child(3) .funnel-bar span { background: linear-gradient(90deg, #70996a, #bad38b); }
.funnel-step:nth-child(4) .funnel-bar span { background: linear-gradient(90deg, #87aa72, #c8dc99); }
.funnel-result { display: flex; align-items: center; justify-content: space-between; margin: 0 24px 22px; padding: 14px 15px; border-radius: 11px; background: var(--sage-50); color: var(--forest-2); }
.funnel-result span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }
.funnel-result svg { width: 16px; }
.funnel-result strong { font-size: 18px; }
.attention-count { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--orange-soft); color: #a45227; font-size: 12px; font-weight: 750; }
.attention-list { padding: 5px 12px 0; }
.attention-item { display: grid; width: 100%; grid-template-columns: 36px 1fr auto 18px; align-items: center; gap: 10px; padding: 14px 7px; border: 0; border-bottom: 1px solid #edf0eb; background: transparent; text-align: left; cursor: pointer; }
.attention-item:hover { background: #fbfcfa; }
.attention-item:last-child { border-bottom: 0; }
.avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #edf1e9; color: #60766e; font-size: 11px; font-weight: 750; }
.avatar--orange { background: var(--orange-soft); color: #a1532a; }
.avatar--green { background: #e6f1e4; color: #3e774d; }
.avatar--blue { background: var(--blue-soft); color: var(--blue); }
.avatar--purple { background: #f0eafa; color: #70568f; }
.avatar--gold { background: #f8f0d8; color: #8c6b1f; }
.attention-copy strong, .attention-copy small { display: block; }
.attention-copy strong { font-size: 13px; }
.attention-copy small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.attention-item .value { font-size: 12px; font-weight: 730; }
.attention-item > svg { width: 15px; color: #91a098; }
.text-button { display: inline-flex; align-items: center; gap: 7px; margin: 9px 18px 18px; padding: 5px 0; border: 0; background: transparent; color: var(--forest-2); font-size: 12px; font-weight: 750; cursor: pointer; }
.text-button svg { width: 14px; }
.table-panel { margin-top: 18px; overflow: hidden; }
.table-panel .panel-heading .text-button { margin: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 20px; border-bottom: 1px solid #e9ede7; text-align: left; white-space: nowrap; }
th { background: #fbfcfa; color: #6b7e76; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfdfb; }
.table-person { display: flex; align-items: center; gap: 10px; }
.table-person strong, .table-person small { display: block; }
.table-person small { color: var(--ink-soft); font-size: 11px; }
.status { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 740; }
.status--hot { background: var(--orange-soft); color: #a34f26; }
.status--good { background: #e6f2e6; color: #347047; }
.status--info { background: var(--blue-soft); color: #4c6c97; }
.status--neutral { background: #edf0ec; color: #60716a; }
.status--won { background: #dff0dc; color: #2b6740; }
.revenue-note { display: flex; align-items: center; gap: 8px; margin: 16px 2px 0; color: #61756c; font-size: 12px; }
.revenue-note svg { width: 16px; color: var(--leaf); }

.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; }
.summary-strip div { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; border-right: 1px solid var(--line); }
.summary-strip div:last-child { border-right: 0; }
.summary-strip span { color: var(--ink-soft); font-size: 12px; }
.summary-strip strong { font-size: 20px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.table-search { display: flex; width: min(340px, 100%); min-height: 40px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: #7a8b84; }
.table-search svg { width: 17px; }
.table-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.filter-pills { display: flex; gap: 5px; }
.filter-pill { min-height: 34px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 650; cursor: pointer; }
.filter-pill:hover, .filter-pill.is-active { background: var(--sage-100); color: var(--forest-2); }
.row-action { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.row-action svg { width: 14px; }
.empty-filter { padding: 34px; color: var(--ink-soft); text-align: center; }

.compact-heading { align-items: center; }
.inbox-shell { display: grid; min-height: calc(100vh - 190px); grid-template-columns: 300px minmax(430px, 1fr) 270px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.inbox-list { border-right: 1px solid var(--line); background: #fbfcfa; }
.inbox-search { width: auto; margin: 14px; }
.conversation-item { display: grid; width: 100%; grid-template-columns: 38px 1fr auto; gap: 10px; padding: 15px 14px; border: 0; border-top: 1px solid #e9ede7; background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover { background: white; }
.conversation-item.is-active { background: #edf5e9; box-shadow: inset 3px 0 0 var(--leaf); }
.conversation-item strong, .conversation-item small, .conversation-item em { display: block; }
.conversation-item strong { font-size: 13px; }
.conversation-item small { margin: 1px 0 4px; color: #a1532a; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.conversation-item em { max-width: 172px; overflow: hidden; color: var(--ink-soft); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item time { color: #81928a; font-size: 10px; }
.thread-panel { display: flex; min-width: 0; flex-direction: column; }
.thread-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.thread-person { display: flex; align-items: center; gap: 10px; }
.thread-person strong, .thread-person span { display: block; }
.thread-person span { color: var(--ink-soft); font-size: 11px; }
.thread-actions { display: flex; gap: 8px; }
.ai-summary { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; margin: 14px 18px 0; padding: 13px; border: 1px solid #d2dfcb; border-radius: 12px; background: #f2f7ee; }
.summary-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: white; color: var(--leaf); }
.summary-icon svg { width: 17px; }
.ai-summary div > span { color: var(--forest-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-summary div > strong { display: block; margin: 2px 0; font-size: 12px; }
.ai-summary p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.confidence { color: #71877d; font-size: 10px; white-space: nowrap; }
.message-thread { flex: 1; padding: 18px; overflow-y: auto; background: linear-gradient(#fff, #fbfcfa); }
.date-divider { display: flex; align-items: center; gap: 10px; color: #8b9a93; font-size: 10px; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; background: #e7ebe5; content: ""; }
.message { width: min(440px, 82%); margin-top: 18px; padding: 11px 13px 8px; border-radius: 13px; }
.message p { margin: 0; font-size: 13px; }
.message span { display: block; margin-top: 6px; font-size: 9px; opacity: .62; }
.message--out { margin-left: auto; border-bottom-right-radius: 3px; background: var(--forest); color: white; }
.message--in { border: 1px solid var(--line); border-bottom-left-radius: 3px; background: white; }
.system-event { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px auto; color: #788b82; font-size: 10px; text-align: center; }
.system-event svg { width: 14px; color: var(--leaf); }
.reply-box { margin: 0 16px 16px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 10px 30px rgba(20,54,45,.08); }
.takeover-note { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--ink-soft); font-size: 10px; }
.takeover-note > span { width: 6px; height: 6px; border-radius: 50%; background: #d08b57; }
.reply-box textarea { width: 100%; resize: vertical; border: 0; outline: 0; color: var(--ink); }
.reply-actions { display: flex; justify-content: flex-end; gap: 8px; }
.customer-panel { border-left: 1px solid var(--line); background: #fbfcfa; }
.customer-section { display: grid; gap: 6px; padding: 17px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.customer-section > strong { color: var(--ink); }
.section-label { margin-bottom: 4px; color: #7b8d85; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.detail-row strong { color: var(--ink); font-size: 11px; text-align: right; }

.pipeline { display: grid; grid-template-columns: repeat(4, minmax(235px, 1fr)); gap: 13px; overflow-x: auto; padding-bottom: 5px; }
.pipeline-column { min-height: 560px; padding: 12px; border-radius: 15px; background: #e9eee6; }
.pipeline-column--won { background: #e3ede0; }
.pipeline-column > header { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 13px; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.pipeline-column > header strong { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.7); font-size: 11px; }
.opportunity-card { margin-bottom: 10px; padding: 15px; border: 1px solid #dfe6dc; border-radius: 12px; background: white; box-shadow: 0 5px 15px rgba(20,54,45,.035); }
.opp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opp-top > span:last-child { color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.opportunity-card h3 { margin: 14px 0 0; font-size: 16px; }
.opportunity-card > p { margin: 1px 0 12px; color: var(--ink-soft); font-size: 11px; }
.opportunity-card blockquote { margin: 0; padding: 9px 10px; border-left: 2px solid #bad0b1; background: var(--sage-50); color: #52695f; font-size: 11px; }
.opportunity-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #82928b; font-size: 10px; }
.opportunity-card footer button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 0; border-radius: 7px; background: var(--sage-100); color: var(--forest-2); font-size: 10px; font-weight: 750; cursor: pointer; }
.opportunity-card footer svg { width: 12px; }
.won-total { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 13px; border: 1px solid #cbdcc5; border-radius: 11px; background: rgba(255,255,255,.55); }
.won-total span { font-size: 10px; }
.won-total strong { color: #2d6a45; font-size: 16px; }

.integrations-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: start; gap: 18px; }
.integration-providers { display: grid; gap: 18px; min-width: 0; }
.crm-connect-card { overflow: hidden; }
.crm-connect-heading { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #e8ede6; }
.crm-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d4e1ce; border-radius: 13px; background: var(--sage-50); color: var(--forest-2); font-size: 20px; font-weight: 800; }
.sheets-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d4e1ce; border-radius: 13px; background: #f2f8f1; color: #27834a; }
.sheets-brand-mark svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.crm-provider-copy h2 { margin: 2px 0 1px; font-size: 20px; letter-spacing: -.03em; }
.crm-provider-copy p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.crm-kicker { color: #76877f; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.crm-connect-body { padding: 21px 24px 23px; }
.crm-connect-description { margin: 0; color: var(--ink-soft); font-size: 13px; }
.crm-feature-list { display: grid; gap: 12px; margin: 18px 0 21px; padding: 0; list-style: none; }
.crm-feature-list li { display: flex; align-items: flex-start; gap: 9px; color: #465f55; font-size: 12px; }
.crm-feature-list svg { width: 15px; flex: 0 0 auto; color: var(--leaf); }
.crm-connect-button { min-width: 155px; }
.crm-connect-button:disabled { border-color: #8da79a; background: #8da79a; box-shadow: none; cursor: not-allowed; }
.crm-preview-note { margin: 10px 0 0; color: #7a8b83; font-size: 10px; }
.crm-connect-body [hidden] { display: none !important; }
.google-sheets-setup { display: grid; gap: 12px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e8ede6; }
.google-sheet-field { display: grid; gap: 6px; color: #405a51; font-size: 12px; font-weight: 680; }
.google-sheet-field input, .google-sheet-field select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #dce5d9; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-weight: 450; }
.google-sheet-field input::placeholder { color: #9aa8a1; }
.google-worksheet-picker { display: grid; gap: 11px; }
.google-workbook-name { margin: 0; color: var(--forest-2); font-size: 13px; font-weight: 750; }
.google-sheets-preview { max-width: 100%; }
.google-import-review { display: grid; gap: 14px; padding: 18px; border-top: 1px solid var(--line); }
.google-import-review h3 { margin: 0; font-size: 14px; }
.google-import-review > p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.google-import-mapping { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.google-import-confirm { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.google-import-confirm input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--green); }
.google-import-review [data-google-import-message].is-error { color: #a34536; }
.estimates-table td { vertical-align: middle; }
.estimates-table .status { white-space: nowrap; }
.imported-data-summary { display: flex; align-items: center; gap: 24px; padding: 22px; }
.imported-data-summary > div:first-child { flex: 1; }
.imported-data-summary h2 { margin: 2px 0 5px; font-size: 18px; }
.imported-data-summary p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 12px; }
.imported-data-count { display: grid; gap: 3px; min-width: 120px; }
.imported-data-count strong { font-size: 26px; }
.imported-data-count span { color: var(--ink-soft); font-size: 11px; }
.imported-data-count--review strong { color: var(--clay); }
.jobber-preview { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.jobber-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; background: #fbfcfa; }
.jobber-preview-heading h3 { margin: 0; font-size: 14px; }
.jobber-preview-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }
.jobber-preview-table { min-width: 640px; }
.jobber-preview-table th, .jobber-preview-table td { padding: 11px 14px; font-size: 11px; }
.jobber-preview-table td:first-child { font-weight: 700; }
.crm-flow-panel { padding: 22px 24px; }
.crm-flow-panel h2 { margin: 0 0 18px; font-size: 16px; letter-spacing: -.02em; }
.crm-flow-list { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.crm-flow-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.crm-flow-list li > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--sage-100); color: var(--forest-2); font-size: 11px; font-weight: 800; }
.crm-flow-list strong, .crm-flow-list small { display: block; }
.crm-flow-list strong { padding-top: 1px; font-size: 12px; }
.crm-flow-list small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.sequence-panel .panel-heading { align-items: center; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; display: block; width: 42px; height: 24px; border-radius: 20px; background: #c9d4c6; cursor: pointer; }
.switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(20,54,45,.15); content: ""; transition: transform .2s; }
.switch input:checked + span { background: var(--forest-2); }
.switch input:checked + span::after { transform: translateX(18px); }
.sequence-line { padding: 8px 24px 19px; }
.sequence-step { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; min-height: 92px; }
.sequence-step::after { position: absolute; top: 60px; bottom: -32px; left: 27px; width: 1px; background: #d2ddce; content: ""; }
.sequence-step:last-child::after { display: none; }
.sequence-step > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #ccdac6; border-radius: 50%; background: var(--sage-50); color: var(--forest-2); font-size: 11px; font-weight: 800; }
.sequence-step strong, .sequence-step p { display: block; }
.sequence-step strong { font-size: 13px; }
.sequence-step p { margin: 2px 0 0; color: var(--ink-soft); font-size: 11px; }
.sequence-step button, .settings-notice button, .settings-notice a { border: 0; background: transparent; color: var(--forest-2); font-size: 11px; font-weight: 750; cursor: pointer; text-decoration: none; }
.rules-card { padding: 23px; }
.rules-card h2 { margin: 0 0 17px; font-size: 18px; }
.rules-card > div { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.rules-card svg { width: 17px; flex: 0 0 auto; color: var(--leaf); }
.rules-card span { color: var(--ink-soft); font-size: 11px; }
.rules-card strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12px; }
.settings-page { display: grid; grid-template-columns: minmax(0, 720px); gap: 22px; }
.settings-tabs { display: grid; align-content: start; gap: 4px; }
.settings-tabs button { min-height: 39px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); text-align: left; cursor: pointer; }
.settings-tabs button:hover, .settings-tabs button.is-active { background: var(--sage-100); color: var(--forest-2); font-weight: 700; }
.form-panel { overflow: hidden; }
.form-panel form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 22px 24px; }
.form-panel form label { min-width: 0; }
.company-profile-locked { margin: 0; padding: 24px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.company-profile-locked a { color: var(--forest-2); font-weight: 700; }
.form-panel label > span, .won-dialog label > span { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.form-panel input, .form-panel select, .won-dialog input, .won-dialog textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); outline: 0; }
.form-wide { grid-column: 1 / -1; }
.settings-notice { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px; margin: 0 24px 24px; padding: 13px; border-radius: 10px; background: var(--sage-50); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6da14f; }
.status-dot--muted { background: #96a49c; }
.settings-notice strong, .settings-notice p { display: block; }
.settings-notice strong { font-size: 12px; }
.settings-notice p { margin: 1px 0 0; color: var(--ink-soft); font-size: 10px; }

.won-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; color: var(--ink); box-shadow: 0 26px 90px rgba(11,39,32,.24); }
.won-dialog::backdrop { background: rgba(14,39,33,.42); backdrop-filter: blur(4px); }
.won-dialog form { position: relative; padding: 28px; }
.dialog-close { position: absolute; top: 15px; right: 15px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; background: var(--sage-50); color: var(--ink-soft); font-size: 20px; cursor: pointer; }
.dialog-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; background: #e5f2e2; color: #3d784c; }
.won-dialog h2 { margin: 16px 0 5px; font-size: 23px; }
.won-dialog > form > p { margin: 0 0 20px; color: var(--ink-soft); font-size: 12px; }
.won-dialog label { display: block; margin-top: 13px; }
.won-dialog label small { color: #8b9a93; font-weight: 500; }
.won-dialog input:disabled { background: #f4f6f2; color: #7a8a83; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 320px; padding: 12px 15px; border-radius: 10px; background: var(--forest); color: white; font-size: 12px; font-weight: 650; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: none; }
.sidebar-backdrop { display: none; }

.auth-page { min-height: 100vh; background: radial-gradient(ellipse at 50% 0, #e8efe4 0, var(--canvas) 52%); }
.auth-shell { display: flex; width: min(100% - 36px, 488px); flex-direction: column; align-items: center; margin: 0 auto; padding: 48px 0 32px; }
.auth-brand { margin-bottom: 28px; }
.auth-card { width: 100%; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 18px 54px rgba(20,54,45,.08); }
.auth-intro { margin-bottom: 24px; }
.auth-step { color: var(--forest-2); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.auth-intro h1 { margin: 9px 0 7px; font-size: 30px; letter-spacing: -.045em; line-height: 1.12; }
.auth-intro p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.signup-form { display: grid; gap: 15px; }
.auth-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.auth-field { display: grid; gap: 6px; color: #405a51; font-size: 12px; font-weight: 680; }
.auth-field small { margin-left: 4px; color: #86968f; font-size: 11px; font-weight: 500; }
.auth-field input, .auth-field select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #dce5d9; border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 450; }
.auth-field input::placeholder { color: #9aa8a1; }
.auth-field select:invalid { color: #9aa8a1; }
.auth-preview-note { margin: 1px 0 -5px; color: #71847b; font-size: 11px; text-align: center; }
.auth-message { margin: 2px 0; padding: 11px 12px; border: 1px solid #c9dece; border-radius: 9px; background: #f0f7f0; color: #315e48; font-size: 12px; line-height: 1.5; }
.auth-message.is-error { border-color: #e6c5bf; background: #fff4f1; color: #8a3d32; }
.auth-text-button { justify-self: end; padding: 0; border: 0; background: transparent; color: var(--forest-2); font: inherit; font-size: 12px; font-weight: 680; cursor: pointer; }
.auth-text-button:hover { text-decoration: underline; }
.auth-recovery-form { margin-top: 4px; }
.auth-page [hidden] { display: none !important; }
.auth-recovery-copy { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.auth-recovery-back { justify-self: center; }
.nav-item[hidden] { display: none; }
.auth-submit { width: 100%; min-height: 46px; }
.auth-submit:link, .auth-submit:visited { color: white; text-decoration: none; }
.auth-submit:focus-visible { outline-offset: 3px; }
.auth-submit:disabled { border-color: #8da79a; background: #8da79a; box-shadow: none; cursor: not-allowed; }
.auth-back-link { margin-top: 20px; color: var(--forest-2); font-size: 12px; font-weight: 650; text-decoration: none; }
.auth-back-link:hover { text-decoration: underline; }
.auth-shell--wide { width: min(100% - 36px, 560px); }
.auth-status-list { display: grid; gap: 9px; margin: 0 0 20px; }
.auth-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafcf9; }
.auth-status-copy { display: grid; gap: 2px; }
.auth-status-copy strong { font-size: 12px; }
.auth-status-copy span { color: var(--ink-soft); font-size: 11px; }
.auth-state { flex: 0 0 auto; padding: 4px 8px; border-radius: 7px; background: #edf0ec; color: #60716a; font-size: 10px; font-weight: 750; white-space: nowrap; }
.auth-number-action { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.auth-status-action:disabled { opacity: .55; cursor: not-allowed; }
.auth-setup-group { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.auth-setup-heading { margin: 0 0 11px; font-size: 13px; }
.auth-time-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.auth-safety-note { margin: 15px 0 0; padding: 11px 12px; border-radius: 9px; background: var(--sage-50); color: #536c65; font-size: 11px; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card { min-height: 160px; }
  .inbox-shell { grid-template-columns: 280px minmax(420px, 1fr); }
  .customer-panel { display: none; }
  .settings-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 264px; }
  .sidebar { transform: translateX(-100%); transition: transform .24s ease; box-shadow: 16px 0 50px rgba(16,45,39,.16); }
  .sidebar.is-open { transform: none; }
  .icon-button.sidebar-close { display: grid; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(10,36,29,.3); }
  .sidebar.is-open + .sidebar-backdrop { display: block; }
  .main-area { margin-left: 0; }
  .icon-button.menu-button { display: grid; }
  .brand--mobile { display: inline-flex; font-size: 28px; }
  .topbar { height: 64px; padding: 0 20px; }
  .global-search { margin-left: auto; width: 38px; }
  .global-search input { display: none; }
  .global-search { justify-content: center; }
  .screens { padding: 26px 20px 45px; }
  .overview-grid { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-strip div:nth-child(2) { border-right: 0; }
  .summary-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .inbox-shell { grid-template-columns: 260px minmax(420px, 1fr); overflow-x: auto; }
  .pipeline { grid-template-columns: repeat(4, 260px); }
  .integrations-layout { grid-template-columns: 1fr; }
  .settings-page { grid-template-columns: 1fr; }
  .settings-tabs { display: flex; overflow-x: auto; }
  .settings-tabs button { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .auth-shell { width: min(100% - 28px, 488px); padding-top: 28px; }
  .auth-card { padding: 25px 20px; border-radius: 16px; }
  .auth-intro h1 { font-size: 27px; }
  .auth-field-grid { grid-template-columns: 1fr; gap: 15px; }
  .auth-time-row { grid-template-columns: 1fr; gap: 15px; }
  body { font-size: 14px; }
  .topbar { padding: 0 14px; }
  .topbar-actions .primary-button { display: none; }
  .topbar .notification-button { display: none; }
  .topbar-auth-actions a:first-child { display: none; }
  .account-indicator small { display: none; }
  .screens { padding: 22px 14px 40px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .page-heading h1 { font-size: 31px; }
  .heading-actions { width: 100%; justify-content: space-between; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 142px; padding: 16px; }
  .metric-card > strong { margin-top: 18px; font-size: 26px; }
  .metric-top { font-size: 12px; }
  .metric-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .overview-grid { gap: 10px; margin-top: 10px; }
  .panel-heading { padding: 18px; }
  .funnel-chart { padding: 18px; }
  .funnel-result { margin: 0 18px 18px; }
  .table-panel { margin-top: 10px; }
  .activity-table table { min-width: 720px; }
  .summary-strip { margin-bottom: 10px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .table-search { width: 100%; }
  .filter-pills { overflow-x: auto; }
  .estimates-table { min-width: 880px; }
  .inbox-shell { display: block; min-height: 0; overflow: visible; }
  .inbox-list { max-height: 285px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .thread-panel { min-height: 650px; }
  .thread-header { align-items: flex-start; }
  .thread-actions .secondary-button { width: 36px; padding: 0; font-size: 0; }
  .thread-actions .secondary-button svg { width: 16px; }
  .ai-summary { grid-template-columns: 30px 1fr; }
  .confidence { display: none; }
  .reply-actions { justify-content: space-between; }
  .pipeline { grid-template-columns: repeat(4, 82vw); }
  .crm-connect-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 18px; }
  .crm-brand-mark { width: 42px; height: 42px; }
  .sheets-brand-mark { width: 42px; height: 42px; }
  .crm-connect-heading > .status { grid-column: 2; justify-self: start; }
  .crm-connect-body, .crm-flow-panel { padding: 18px; }
  .google-import-mapping { grid-template-columns: 1fr; }
  .imported-data-summary { align-items: flex-start; flex-direction: column; gap: 16px; }
  .sequence-step { grid-template-columns: 48px 1fr; gap: 12px; }
  .sequence-step > span { width: 48px; height: 48px; }
  .sequence-step::after { top: 54px; left: 24px; }
  .sequence-step button { grid-column: 2; justify-self: start; margin-top: -14px; padding: 0; }
  .form-panel form { grid-template-columns: 1fr; padding: 18px; }
  .form-wide { grid-column: auto; }
  .settings-notice { grid-template-columns: 9px 1fr; margin: 0 18px 18px; }
  .settings-notice button, .settings-notice a { grid-column: 2; justify-self: start; padding: 0; }
  .toast { right: 14px; bottom: 14px; left: 14px; max-width: none; }
}

@media (max-width: 350px) {
  .global-search { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 135px; }
  .demo-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}