:root {
  /* Matches the marketing site (marketing-landing-page/assets/styles.css). */
  --ink: #101722;
  --ink-2: #2a3240;
  --muted: #66707c;
  --paper: #f6f2ea;
  --surface: #ffffff;
  --surface-2: #f1ede4;
  --line: #e3ded4;
  --cyan: #3e50ee;
  --cyan-dark: #2f3fd0;
  --coral: #3e50ee;
  --acid: #d5d9ff;
  --red: #b93443;
  --green: #16845b;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  --sidebar: 236px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font: 15px/1.45 var(--body); }
html { height: 100%; }
body { min-width: 320px; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 42px 9px 14px;
  border: 1px solid #c6d0ca;
  border-radius: 9px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23495e59' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
select:not([multiple]):not([size]):hover:not(:disabled) { border-color: #83a7a0; background-color: #fcfefd; }
select:not([multiple]):not([size]):focus { outline: none; border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(62, 80, 238,.15); }
select:not([multiple]):not([size]):disabled { cursor: not-allowed; color: #7b8580; background-color: #f1ede4; opacity: 1; }
select option { background: #fff; color: #111615; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.danger-text { color: var(--red); }

.global-loader { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; background: rgba(244,245,241,.76); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(4px); transition: opacity .16s ease, visibility .16s ease; }
.is-loading .global-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.route-progress { position: absolute; inset: 0 0 auto; height: 3px; overflow: hidden; background: rgba(47, 63, 208,.13); }
.route-progress span { width: 38%; height: 100%; display: block; background: var(--cyan); transform: translateX(-110%); animation: route-progress 1.15s cubic-bezier(.55,.1,.35,.9) infinite; }
.loader-status { min-width: 220px; padding: 15px 18px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 16px 50px rgba(17,22,21,.13); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.loader-mark { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 6px; background: var(--ink); }
.loader-mark i { width: 2px; border-radius: 2px; background: var(--cyan); animation: loader-wave .8s ease-in-out infinite alternate; }
.loader-mark i:nth-child(1) { height: 7px; }
.loader-mark i:nth-child(2) { height: 14px; animation-delay: .16s; }
.loader-mark i:nth-child(3) { height: 10px; animation-delay: .32s; }
.button:disabled { cursor: wait; opacity: .62; }
.button-loader { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .65s linear infinite; }
.content, .onboarding-stage, .auth-copy { animation: page-enter .22s ease both; }
@keyframes route-progress { 0% { transform: translateX(-110%); } 55% { transform: translateX(125%); } 100% { transform: translateX(280%); } }
@keyframes loader-wave { from { transform: scaleY(.55); opacity: .55; } to { transform: scaleY(1); opacity: 1; } }
@keyframes button-spin { to { transform: rotate(360deg); } }
@keyframes page-enter { from { opacity: 0; transform: translateY(4px); } }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); }
.auth-panel { padding: clamp(32px, 6vw, 90px); display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font: 800 20px/1 var(--display); }
.brand-logo { display: block; width: 32px; height: auto; flex: none; }
.brand-name { font-weight: 700; font-size: 22px; letter-spacing: -.035em; color: var(--ink); }
.wm-i { position: relative; }
.wm-i::before { content: ""; position: absolute; left: 50%; top: var(--wm-dot-top, .33em); width: .15em; height: .15em; border-radius: 50%; background: #5b7bff; transform: translateX(-50%); }
.auth-copy { width: min(430px, 100%); margin: auto 0; }
.auth-copy h1 { margin: 0 0 10px; font: 700 clamp(34px, 4vw, 52px)/1.08 var(--display); letter-spacing: 0; }
.auth-copy > p { margin: 0 0 30px; color: var(--muted); font-size: 16px; }
.form-stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: 13px; }
.field input, .field select, .field textarea { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid #d6d0c4; border-radius: 6px; background-color: var(--surface); color: var(--ink); outline: none; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(62, 80, 238,.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 45px; }
.password-wrap button { position: absolute; right: 4px; top: 4px; width: 37px; height: 37px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 6px; background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13px; }
.button:hover { filter: brightness(.98); }
.button-primary { background: var(--ink); color: #fff; }
.button-coral { background: var(--coral); color: #171312; }
.button-outline { border-color: #c6cdc7; background: transparent; }
.button-danger { color: var(--red); border-color: #e4b9b4; background: #fff7f5; }
.button-sm { min-height: 34px; padding: 0 11px; }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.auth-note { margin-top: 18px; padding: 12px 14px; background: #eef0ff; border-left: 3px solid var(--cyan-dark); color: #42605b; font-size: 12px; }
.auth-error { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--red); background: #fff1ef; color: #8d3026; font-size: 12px; }
.auth-switch { margin-top: 17px; color: var(--muted); text-align: center; font-size: 12px; }
.auth-switch button { border: 0; padding: 0; background: none; color: var(--cyan-dark); cursor: pointer; font-weight: 700; }
.consent-check { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; }
.consent-check input { margin-top: 2px; accent-color: var(--cyan-dark); }
.auth-visual { position: relative; padding: clamp(32px, 5vw, 72px); overflow: hidden; background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: space-between; }
.auth-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(#8fa19c 1px, transparent 1px), linear-gradient(90deg, #8fa19c 1px, transparent 1px); background-size: 52px 52px; }
.auth-visual > *:not(.auth-grid) { position: relative; z-index: 1; }
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-visual h2 { max-width: 610px; margin: 12px 0; font: 700 clamp(38px, 5vw, 72px)/1.04 var(--display); letter-spacing: 0; }
.auth-visual > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #36413e; }
.auth-stat { padding: 24px 20px 0 0; }
.auth-stat strong { display: block; font: 700 25px var(--display); }
.auth-stat span { color: #8f9b98; font-size: 12px; }
.signup-benefits { position: relative; z-index: 1; display: grid !important; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #36413e; }
.signup-benefits > span { padding: 24px 20px 0 0; display: block; }
.signup-benefits svg { color: var(--acid); }
.signup-benefits strong, .signup-benefits small { display: block; }
.signup-benefits strong { margin-top: 10px; font-size: 13px; }
.signup-benefits small { margin-top: 3px; color: #8f9b98; font-size: 12px; }

.onboarding-shell { min-height: 100vh; background: radial-gradient(circle at 50% 220px, rgba(62, 80, 238,.055), transparent 360px), var(--paper); }
.onboarding-header { height: 68px; padding: 0 clamp(20px, 5vw, 70px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(17,22,21,.09); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.onboarding-header > span { color: var(--cyan-dark); font-size: 12px; font-weight: 700; }
.onboarding-header .onboarding-credit { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; background: #eef0ff; color: #2f3fd0; }
.onboarding-credit svg { width: 14px; height: 14px; }
.onboarding-header .button { justify-self: end; }
.onboarding-progress { width: min(760px, calc(100% - 40px)); margin: 26px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.onboarding-progress > div { position: relative; display: grid; justify-items: center; gap: 7px; color: #8d9894; font-size: 12px; }
.onboarding-progress > div::before { content: ""; position: absolute; z-index: 0; top: 14px; right: 50%; width: 100%; height: 2px; background: #dfe4e0; }
.onboarding-progress > div:first-child::before { display: none; }
.onboarding-progress span { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d5dcd7; border-radius: 50%; background: #fbfaf7; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 4px var(--paper); }
.onboarding-progress svg { width: 13px; }
.onboarding-progress .active { color: var(--ink); font-weight: 700; }
.onboarding-progress .active span { border-color: var(--ink); background: var(--ink); color: white; box-shadow: 0 0 0 4px var(--paper), 0 5px 14px rgba(17,22,21,.18); }
.onboarding-progress .done span { border-color: var(--cyan-dark); background: var(--cyan-dark); color: white; }
.onboarding-progress .done::before, .onboarding-progress .active::before { background: var(--cyan-dark); }
.onboarding-stage { width: min(900px, calc(100% - 40px)); margin: 36px auto 70px; }
.step-copy { max-width: 650px; margin: 0 auto 25px; text-align: center; }
.step-copy h1 { margin: 7px 0 8px; font: 700 clamp(29px, 4vw, 42px)/1.1 var(--display); }
.step-copy p { margin: 0; color: var(--muted); }
.onboarding-card { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 45px rgba(20,29,26,.05); }
.step-actions { padding-top: 24px; margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.profile-step-copy { max-width: 720px; margin-bottom: 28px; }
.profile-step-copy h1 { margin-top: 9px; letter-spacing: -.035em; }
.profile-step-copy p { max-width: 660px; margin-inline: auto; font-size: 15px; }
.profile-confirm-card { padding: clamp(20px, 3.2vw, 32px); border-radius: 14px; border-color: #d7ddd8; box-shadow: 0 24px 70px rgba(20,29,26,.08); }
.profile-confirm-card .website-preview-result { margin-bottom: 18px; }
.detected-profile { position: relative; padding: 22px; border: 1px solid #d5d9ff; border-radius: 11px; background: linear-gradient(135deg, #effaf7 0%, #eef0ff 100%); overflow: hidden; }
.detected-profile::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -110px; border: 28px solid rgba(62, 80, 238,.08); border-radius: 50%; }
.detected-profile-head { position: relative; z-index: 1; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.detected-profile-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: var(--cyan-dark); color: white; box-shadow: 0 8px 20px rgba(47, 63, 208,.18); }
.detected-profile-icon svg { width: 21px; height: 21px; }
.detected-profile-kicker { display: block; margin-bottom: 2px; color: #2f3fd0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detected-profile h2 { margin: 0; font: 700 20px/1.2 var(--display); letter-spacing: -.02em; }
.confidence-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(47, 63, 208,.18); border-radius: 99px; background: rgba(255,255,255,.72); color: #2f3fd0; font-size: 12px; font-weight: 800; white-space: nowrap; }
.confidence-badge svg { width: 14px; height: 14px; }
.intent-list { position: relative; z-index: 1; margin: 17px 0 0 59px; display: flex; flex-wrap: wrap; gap: 7px; }
.intent-list span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,.72); color: #3b5d57; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.intent-list svg { width: 12px; height: 12px; color: var(--cyan-dark); stroke-width: 2.5; }
.profile-fields { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.profile-fields .field { align-content: start; min-width: 0; }
.profile-fields .field > label { font: 700 12px var(--display); }
.profile-fields .field > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.profile-fields select { min-height: 50px; border-radius: 8px; font-weight: 600; }
.locked-field { min-height: 50px; padding: 0 13px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 9px; border: 1px solid #d3dad5; border-radius: 8px; background: #fbfaf7; color: #68726e; }
.locked-field > svg:first-child { color: var(--cyan-dark); }
.locked-field > svg:last-child { width: 14px; color: #929b97; }
.locked-field strong { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.required-field-label { margin-top: 2px; color: #8a9490 !important; font-size: 12px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.required-field-list { display: flex; flex-wrap: wrap; gap: 5px; }
.required-field-list span { padding: 4px 7px; border-radius: 4px; background: #eef1ee; color: #58635f; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.profile-confirmation { position: relative; margin-top: 24px; padding: 14px 16px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #d5dcd7; border-radius: 9px; background: #fbfaf7; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.profile-confirmation:hover { border-color: #9bbdb6; background: #fbfaf7; }
.profile-confirmation:focus-within { box-shadow: 0 0 0 3px rgba(62, 80, 238,.12); }
.profile-confirmation input { position: absolute; opacity: 0; pointer-events: none; }
.confirmation-check { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #b9c3be; border-radius: 7px; background: white; color: transparent; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.confirmation-check svg { width: 16px; height: 16px; stroke-width: 2.5; }
.profile-confirmation input:checked + .confirmation-check { border-color: var(--cyan-dark); background: var(--cyan-dark); color: white; }
.profile-confirmation strong, .profile-confirmation small { display: block; }
.profile-confirmation strong { font-size: 12px; }
.profile-confirmation small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.profile-confirm-card .step-actions { margin-top: 20px; padding-top: 20px; }
.profile-confirm-card .step-actions .button-primary { min-width: 158px; background: var(--ink); box-shadow: 0 7px 18px rgba(17,22,21,.16); }
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice-card { position: relative; min-height: 190px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:checked), .voice-card:has(input:checked) { border-color: var(--cyan-dark); box-shadow: inset 0 0 0 1px var(--cyan-dark); background: #eef0ff; }
.choice-icon { width: 42px; height: 42px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 6px; background: #eef0ff; color: var(--cyan-dark); }
.choice-card strong { font: 700 15px var(--display); }
.choice-card small { margin-top: 7px; color: var(--muted); }
.choice-card > svg { position: absolute; top: 15px; right: 15px; color: #c4cbc6; }
.choice-card:has(input:checked) > svg { color: var(--cyan-dark); }
.onboarding-business-card { display: grid; gap: 24px; padding: clamp(26px, 3.2vw, 36px); }
.onboarding-business-card .field-row { gap: 18px; }
.onboarding-business-card .field { min-width: 0; gap: 8px; }
.onboarding-business-card .field > label,
.onboarding-business-card .field-heading > label { color: var(--ink); font-size: 12px; }
.onboarding-business-card .field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.onboarding-business-card .field-heading > small,
.onboarding-business-card .field-help { color: var(--muted); font-size: 12px; line-height: 1.45; }
.onboarding-business-card .field-heading > small { text-align: right; }
.onboarding-business-card input,
.onboarding-business-card select { border-radius: 8px; }
.website-first-copy { max-width: 720px; margin-bottom: 28px; }
.website-first-copy h1 { max-width: 650px; margin-inline: auto; letter-spacing: -.035em; }
.website-first-copy p { max-width: 600px; margin-inline: auto; font-size: 15px; line-height: 1.55; }
.website-first-card { max-width: 760px; margin-inline: auto; gap: 21px; padding: clamp(24px, 3vw, 34px); border-radius: 14px; box-shadow: 0 20px 60px rgba(20,29,26,.07); }
.website-first-card .field { display: grid; gap: 8px; }
.website-first-card .field > label { font-size: 12px; font-weight: 700; }
.website-first-card .field > input,
.website-first-card .field > select { width: 100%; min-height: 46px; }
.website-hero-field > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.website-input-wrap { position: relative; min-width: 0; }
.website-input-wrap > svg { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; transform: translateY(-50%); color: var(--cyan-dark); pointer-events: none; }
.website-first-card .website-input-wrap input { width: 100%; min-height: 48px; padding-left: 42px; }
.website-first-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.website-first-card .onboarding-authorization { width: 100%; padding: 13px 14px; border: 1px solid #dce7e2; border-radius: 9px; background: #fbfaf7; font-size: 12px; font-weight: 600; }
.website-first-card .onboarding-authorization:focus-within { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.onboarding-more-context { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fbfaf7; }
.onboarding-more-context summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.onboarding-more-context summary::-webkit-details-marker { display: none; }
.onboarding-more-context summary > svg { width: 18px; height: 18px; color: var(--cyan-dark); }
.onboarding-more-context summary > svg:last-child { width: 15px; height: 15px; color: var(--muted); transition: transform .18s ease; }
.onboarding-more-context[open] summary > svg:last-child { transform: rotate(180deg); }
.onboarding-more-context summary strong,
.onboarding-more-context summary small { display: block; }
.onboarding-more-context summary strong { color: var(--ink); font-size: 12px; }
.onboarding-more-context summary small { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.onboarding-more-context[open] summary { border-bottom: 1px solid var(--line); }
.onboarding-more-context .onboarding-document-field { padding: 16px; }
.website-first-card .step-actions { margin-top: 0; padding-top: 18px; }
.website-import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.website-import-grid .choice-card { min-height: 116px; padding: 14px 16px; border-radius: 9px; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.website-import-grid .choice-card:hover { border-color: #aabfba; transform: translateY(-1px); }
.website-import-grid .choice-card:focus-within { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.website-import-grid .choice-icon { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 8px; }
.website-import-grid .choice-icon svg { width: 17px; height: 17px; }
.website-import-grid .choice-card strong { font-size: 15px; }
.website-import-grid .choice-card small { max-width: 260px; font-size: 12px; line-height: 1.45; }
.website-import-grid .choice-badge { position: absolute; top: 15px; right: 42px; padding: 4px 7px; border-radius: 99px; background: #fbfaf7; color: #64716d; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.website-import-grid .choice-card:has(input:checked) .choice-badge { background: #eef0ff; color: #2f3fd0; }
.onboarding-authorization { display: flex; align-items: flex-start; gap: 9px; width: fit-content; max-width: 100%; color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.45; cursor: pointer; }
.onboarding-business-card .onboarding-authorization input[type="checkbox"] { appearance: auto; width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; flex: 0 0 17px; border: 0; border-radius: 3px; box-shadow: none; accent-color: var(--cyan-dark); cursor: pointer; }
.onboarding-authorization span { min-width: 0; }
.onboarding-document-field { padding-top: 2px; }
.onboarding-document-field input[type="file"] { min-height: 52px; padding: 6px; border-style: dashed; background: #fbfaf7; color: var(--muted); font-size: 12px; cursor: pointer; }
.onboarding-document-field input[type="file"]::file-selector-button { height: 38px; margin-right: 12px; padding: 0 14px; border: 1px solid #c6cdc7; border-radius: 6px; background: #fff; color: var(--ink); font: 700 12px var(--body); cursor: pointer; }
.onboarding-document-field input[type="file"]:hover { border-color: #9fb6b1; background: #fbfaf7; }
.onboarding-details { padding-top: 2px; grid-template-columns: 1fr; }
.onboarding-details .field:first-child { display: none; }
.onboarding-business-card .step-actions { margin-top: 2px; padding-top: 20px; }
.onboarding-business-card .step-actions .button-primary { min-width: 126px; }
.onboarding-hours-field > small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.onboarding-hours-field > small strong { color: #53605c; font-weight: 700; }
.onboarding-hours-field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(191, 69, 52, .1); }
.onboarding-field-error { margin: 0; padding: 9px 11px; border-radius: 6px; background: #fff1ef; color: #8d3026; font-size: 12px; line-height: 1.45; }
.onboarding-agent-card { display: grid; gap: 18px; padding: clamp(24px, 3.2vw, 34px); }
.onboarding-agent-card .field { min-width: 0; align-content: start; gap: 7px; }
.onboarding-agent-basics { align-items: start; gap: 18px; }
.onboarding-agent-card input { min-height: 46px; height: 46px; }
.onboarding-agent-card textarea { min-height: 96px; height: 96px; }
.onboarding-agent-card .onboarding-context-field textarea { min-height: 168px; height: 168px; line-height: 1.55; }
.onboarding-greeting-field > small, .onboarding-context-field > small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.onboarding-agent-card .step-actions { margin-top: 2px; padding-top: 20px; }
.voice-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voice-catalog { max-height: 365px; padding-right: 7px; overflow-y: auto; overscroll-behavior: contain; }
.voice-catalog-meta { min-height: 34px; margin-top: 18px; display: flex; align-items: end; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.voice-catalog-meta span { color: var(--cyan-dark); font-weight: 700; text-transform: uppercase; }
.voice-card { position: relative; min-height: 76px; padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; }
.voice-select { position: relative; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; cursor: pointer; }
.voice-select input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.voice-card:focus-within { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.voice-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--acid); font: 700 14px var(--display); }
.voice-card strong, .voice-card small { display: block; }
.voice-card small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.voice-card button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; }
.voice-card button:disabled { cursor: wait; opacity: .65; }
.voice-card button svg { width: 14px; }
.review-agent { display: flex; align-items: center; gap: 16px; }
.review-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--acid); font: 700 17px var(--display); }
.review-agent h2 { margin: 4px 0; font: 700 20px var(--display); }
.review-agent p { margin: 0; color: var(--muted); font-size: 12px; }
.review-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.review-grid div { min-height: 72px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.review-grid div:nth-child(2n) { border-right: 0; }
.review-grid div:nth-child(n+3) { border-bottom: 0; }
.review-grid span, .review-grid strong { display: block; }
.review-grid span { color: var(--muted); font-size: 12px; }
.trial-note { margin-top: 18px; padding: 12px; display: flex; align-items: center; gap: 9px; border-radius: 5px; background: #eef0ff; color: #3f625b; font-size: 12px; }
.trial-note svg { flex: 0 0 auto; color: var(--cyan-dark); }
.admin-warning { margin: 0 0 18px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-radius: 7px; background: #eef0ff; border: 1px solid #d5d9ff; color: #2f3fd0; font-size: 12px; }
.admin-warning svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--cyan-dark); }
.admin-warning strong { display: block; font-size: 12px; font-weight: 600; color: #101722; }
.admin-warning p { margin: 2px 0 0; color: #41675f; font-size: 12px; }

.app-shell { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); overflow: hidden; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar); height: 100vh; height: 100dvh; min-height: 0; padding: 24px 16px max(76px, env(safe-area-inset-bottom)); overflow: hidden; background: var(--ink); color: white; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 10px 26px; }
.workspace-switcher { width: 100%; min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: center; border: 1px solid #343e3c; border-radius: 7px; background: #1b2220; color: white; text-align: left; }
.workspace-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 5px; background: var(--cyan); color: var(--ink); font-weight: 800; }
.workspace-switcher strong, .workspace-switcher small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher strong { font-size: 12px; }
.workspace-switcher small { color: #86918e; font-size: 12px; }
.nav-label { margin: 25px 10px 8px; color: #697572; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.side-nav { min-height: 0; padding-right: 2px; display: grid; flex: 1 1 auto; align-content: start; gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d4945 transparent; }
.nav-item { min-height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 5px; color: #9da8a5; background: transparent; cursor: pointer; text-align: left; font-size: 13px; }
.nav-item:hover { color: white; background: #1d2624; }
.nav-item.active { color: white; background: #26312e; }
.nav-item.active svg { color: var(--cyan); }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 9px; background: var(--coral); color: var(--ink); text-align: center; font-size: 12px; font-weight: 800; }
.side-bottom { flex: 0 0 auto; margin-top: 12px; }
.help-panel { padding: 14px; margin-bottom: 12px; border: 1px solid #2a3240; border-radius: 7px; background: #19211f; }
.help-panel svg { color: var(--acid); }
.help-panel strong { display: block; margin: 8px 0 3px; font-size: 12px; }
.help-panel p { margin: 0 0 11px; color: #7f8c88; font-size: 12px; }
.help-panel button { border: 0; background: none; padding: 0; color: var(--cyan); cursor: pointer; font-size: 12px; }
.profile-button { width: 100%; padding: 9px 8px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border: 0; border-top: 1px solid #2b3532; background: transparent; color: white; text-align: left; cursor: pointer; }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #33423e; color: var(--acid); font-weight: 800; }
.profile-button strong, .profile-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-button strong { font-size: 12px; }
.profile-button small { color: #788481; font-size: 12px; }
.main-shell { grid-column: 2; min-width: 0; max-width: calc(100vw - var(--sidebar)); height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { position: sticky; top: 0; z-index: 15; height: 70px; padding: 0 clamp(20px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(244,245,241,.94); backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; }
.breadcrumbs { color: var(--muted); font-size: 12px; }
.breadcrumbs strong { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #cdd8d0; border-radius: 5px; background: #fbfaf7; color: #47715f; font-size: 12px; font-weight: 700; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.stale-data-notice { margin: 0 0 12px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #e8d7a6; border-radius: 6px; background: #fff9e8; color: #72581d; font-size: 12px; }
.stale-data-notice svg { width: 16px; height: 16px; flex: 0 0 auto; }
.content { min-width: 0; flex: 1 1 auto; min-height: 0; padding: 34px clamp(20px, 3vw, 42px) max(96px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.clients-content { overflow-y: scroll; scrollbar-gutter: stable; }
.clients-content::-webkit-scrollbar { width: 10px; }
.clients-content::-webkit-scrollbar-track { background: transparent; }
.clients-content::-webkit-scrollbar-thumb { border: 3px solid var(--paper); border-radius: 8px; background: #a8b4af; }
.page-heading { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-heading h1 { margin: 4px 0 5px; font: 700 clamp(27px, 3vw, 37px)/1.1 var(--display); }
.page-heading p { margin: 0; color: var(--muted); }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.header-actions .button { min-height: 40px; white-space: nowrap; }
.range-control { height: 42px; padding: 3px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.range-control button { height: 34px; min-width: 42px; padding: 0 9px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; font: 700 12px var(--body); }
.range-control button.active { color: white; background: var(--ink); }
.dashboard-freshness { width: fit-content; margin: -15px 0 18px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.dashboard-freshness svg { width: 13px; color: var(--cyan-dark); }
.calendar-resource-list, .calendar-exception-list { display: grid; gap: 10px; margin: 16px 20px; }
.calendar-resource-group { margin: 18px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.calendar-resource-group .calendar-resource-list { margin: 0; padding: 12px; }
.calendar-resource-group-head { padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.calendar-resource-group-head > svg { width: 18px; color: var(--cyan-dark); flex: 0 0 auto; }
.calendar-resource-group-head h3 { margin: 0; font: 700 13px var(--display); }
.calendar-resource-group-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.calendar-resource, .calendar-exception { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); }
.calendar-resource > div:first-child, .calendar-exception { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calendar-resource > div:first-child > span:first-child { min-width: 0; }
.calendar-resource > div:first-child strong, .calendar-resource > div:first-child small { display: block; }
.calendar-resource small, .calendar-exception small { color: var(--muted); }
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.calendar-week > div { display: grid; gap: 4px; padding: 9px; border-radius: 8px; background: var(--surface); font-size: 12px; }
.calendar-week span { color: var(--muted); }
.calendar-exception > div { display: grid; gap: 3px; }
.calendar-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 20px; }
.calendar-inline-form label { display: grid; gap: 5px; font-size: 12px; }
.calendar-inline-form input, .calendar-inline-form select { min-height: 36px; }
.calendar-inline-form select:not([multiple]):not([size]) { min-height: 36px; padding-block: 6px; }
.calendar-inline-form small { flex-basis: 100%; color: var(--muted); }
.calendar-slot-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 18px; }
.calendar-slot { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.calendar-error { margin: 16px 20px; color: var(--muted); }
@media (max-width: 760px) { .calendar-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dashboard-error { margin-bottom: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid #e6b9b2; background: #fff5f3; color: #7c3b34; }
.dashboard-error > svg { flex: 0 0 auto; color: var(--red); }
.dashboard-error > div { min-width: 0; flex: 1; }
.dashboard-error strong { display: block; font-size: 12px; }
.dashboard-error p { margin: 3px 0 0; color: #895c56; font-size: 12px; }
.dashboard-error .button { flex: 0 0 auto; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface); }
.metric-grid.metric-grid-five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1280px) { .metric-grid.metric-grid-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .metric-grid.metric-grid-five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .metric-grid.metric-grid-five { grid-template-columns: 1fr; } }
.trial-banner { margin-bottom: 18px; padding: clamp(22px, 4vw, 38px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; border-radius: 8px; background: var(--ink); color: white; overflow: hidden; }
.trial-banner h2 { margin: 7px 0 7px; font: 700 clamp(23px, 3vw, 34px) var(--display); }
.trial-banner p { max-width: 590px; margin: 0; color: #a5afac; }
.trial-meta { margin-top: 19px; display: flex; flex-wrap: wrap; gap: 9px; }
.trial-meta span { padding: 6px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #35413e; border-radius: 4px; color: #bdc6c3; font-size: 12px; text-transform: capitalize; }
.trial-meta svg { width: 13px; color: var(--cyan); }
.credit-dial { min-width: 175px; display: grid; justify-items: center; text-align: center; }
.credit-dial strong { font: 700 35px var(--display); }
.credit-dial > span { margin-bottom: 13px; color: #87928f; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.credit-dial .button:disabled { opacity: .5; cursor: not-allowed; }
.provisioning-panel { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); border: 1px solid #303b38; border-radius: 8px; background: var(--ink); color: white; overflow: hidden; }
.provisioning-panel.has-error { border-color: #94483f; }
.provisioning-copy { min-width: 0; padding: clamp(25px, 4vw, 42px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.provisioning-summary { width: 100%; display: flex; align-items: center; gap: 22px; }
.provisioning-summary-copy { min-width: 0; }
.provisioning-progress-ring { --ring-color: var(--cyan); width: 112px; height: 112px; flex: 0 0 112px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--progress), #2a3240 0); }
.provisioning-progress-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--ink); }
.provisioning-ring-orbit { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(99, 210, 203, .15) 84%, var(--cyan) 92%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); animation: provisioning-orbit 2.2s linear infinite; }
.provisioning-ring-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.provisioning-ring-value { color: white; font: 700 23px/1 var(--display); }
.provisioning-ring-content span { margin-top: 5px; color: #737b86; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.has-error .provisioning-progress-ring { --ring-color: var(--coral); }
.provisioning-copy h2 { margin: 7px 0 9px; font: 700 clamp(24px, 3vw, 36px)/1.08 var(--display); }
.provisioning-summary-copy p { max-width: 630px; margin: 0; color: #a5afac; line-height: 1.6; }
.provisioning-track { width: 100%; height: 7px; margin-top: 26px; border-radius: 4px; background: #2a3240; overflow: hidden; }
.provisioning-track span { height: 100%; display: block; border-radius: inherit; background: var(--cyan); transition: width .4s ease; }
.has-error .provisioning-track span { background: var(--coral); }
.provisioning-progress { width: 100%; margin-top: 9px; display: flex; justify-content: space-between; color: #737b86; font-size: 12px; }
.provisioning-progress strong { color: white; }
.provisioning-activity { width: 100%; margin-top: 18px; padding: 13px 14px; border: 1px solid #33413d; border-radius: 6px; background: rgba(255,255,255,.025); }
.provisioning-activity > div:first-child { display: grid; gap: 3px; }
.provisioning-activity span, .provisioning-activity small { color: #87928f; font-size: 12px; }
.provisioning-activity strong { color: white; font-size: 12px; }
.provisioning-task-track { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #2a3240; }
.provisioning-task-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan-dark), var(--cyan), var(--lime)); }
.provisioning-task-track.determinate span { width: var(--task-progress); transition: width .4s ease; }
.provisioning-task-track.indeterminate span { width: 42%; animation: provisioning-sweep 1.55s ease-in-out infinite; }
.provisioning-live { margin-top: 23px; display: inline-flex; align-items: center; gap: 8px; color: #aeb8b5; font-size: 12px; }
.provisioning-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(196, 242, 82, .7); animation: status-pulse 1.6s ease-in-out infinite; }
.provisioning-error { width: 100%; margin-top: 18px; padding: 11px 13px; display: grid; gap: 4px; border: 1px solid #75423c; border-radius: 5px; background: rgba(148, 72, 63, .16); color: #e9b6ae; font-size: 12px; line-height: 1.45; }
.provisioning-error strong { color: #ff9b8d; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.provisioning-copy > .button { margin-top: 22px; }
.provisioning-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.provisioning-steps { margin: 0; padding: 16px 0; list-style: none; border-left: 1px solid #2a3240; background: #151d1b; }
.provisioning-steps li { min-height: 67px; padding: 12px 24px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 11px; color: #78837f; border-bottom: 1px solid #252e2b; }
.provisioning-steps li:last-child { border-bottom: 0; }
.provisioning-steps li > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #35413d; border-radius: 50%; }
.provisioning-steps li svg { width: 13px; height: 13px; }
.provisioning-steps strong, .provisioning-steps small { display: block; }
.provisioning-steps strong { color: #9ba6a2; font-size: 12px; }
.provisioning-steps small { margin-top: 3px; color: #66716d; font-size: 12px; text-transform: uppercase; }
.provisioning-steps li.succeeded > span { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.provisioning-steps li.succeeded strong { color: #d5ddda; }
.provisioning-steps li.running > span, .provisioning-steps li.retrying > span, .provisioning-steps li.active > span { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(99, 210, 203, .07); }
.provisioning-steps li.running strong, .provisioning-steps li.retrying strong, .provisioning-steps li.active strong { color: white; }
.provisioning-steps li.failed > span { color: var(--coral); border-color: var(--coral); }
.step-spinner { width: 10px; height: 10px; border: 2px solid rgba(99, 210, 203, .25); border-top-color: var(--cyan); border-radius: 50%; animation: spin .75s linear infinite; }
.step-wave { width: 15px; height: 12px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.step-wave i { width: 2px; height: 4px; border-radius: 2px; background: var(--cyan); animation: provisioning-wave .9s ease-in-out infinite; }
.step-wave i:nth-child(2) { animation-delay: .15s; }
.step-wave i:nth-child(3) { animation-delay: .3s; }
.provisioning-panel.is-background { grid-template-columns: 1fr; }
.provisioning-panel.is-background .provisioning-copy { padding-block: 25px; }
.provisioning-panel.is-background .provisioning-steps { display: none; }
.provisioning-panel.is-background .provisioning-progress-ring { width: 88px; height: 88px; flex-basis: 88px; }
.provisioning-panel.is-stale .provisioning-ring-orbit { opacity: .45; animation-duration: 4s; }
.provisioning-diagnostic { margin: 0 0 18px; }
.provisioning-diagnostic > div { min-width: 0; flex: 1; }
.provisioning-diagnostic .button { margin-left: auto; }
@keyframes status-pulse { 50% { opacity: .4; transform: scale(.8); } }
@keyframes provisioning-orbit { to { transform: rotate(360deg); } }
@keyframes provisioning-sweep { 0% { transform: translateX(-115%); } 50% { transform: translateX(70%); } 100% { transform: translateX(245%); } }
@keyframes provisioning-wave { 0%, 100% { height: 4px; opacity: .55; } 50% { height: 12px; opacity: 1; } }
.metric { min-width: 0; padding: 21px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.metric-top svg { color: var(--cyan-dark); }
.metric strong { display: block; margin: 14px 0 5px; font: 700 27px var(--display); }
.metric small { color: var(--muted); font-size: 12px; }
.trend-up { color: var(--green) !important; }
.trend-down { color: var(--red) !important; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .7fr); gap: 18px; margin-top: 18px; }
.distribution-panel { margin-top: 18px; }
.distribution-grid { padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.distribution-block h3 { margin: 0 0 14px; font: 700 12px var(--display); }
.distribution-block > p { color: var(--muted); font-size: 12px; }
.distribution-row { margin-top: 9px; display: grid; grid-template-columns: minmax(80px, 1fr) minmax(70px, 1.5fr) 28px; align-items: center; gap: 8px; font-size: 12px; text-transform: capitalize; }
.distribution-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribution-row > div { height: 5px; border-radius: 3px; background: #e7ebe7; overflow: hidden; }
.distribution-row i { height: 100%; display: block; border-radius: inherit; background: var(--cyan-dark); }
.distribution-row strong { text-align: right; }
.table-wrap.borderless { border: 0; border-radius: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.panel-header { min-height: 61px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font: 700 15px var(--display); }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.panel-body { padding: 20px; }
.knowledge-org-picker { min-width: 230px; display: grid; gap: 3px; }
.knowledge-org-picker span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.knowledge-org-picker select { height: 42px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface); color: var(--ink); font: inherit; }
.knowledge-loading { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.knowledge-loading .button-loader { width: 28px; height: 28px; border-color: #cbd6d2; border-top-color: var(--cyan-dark); }
.knowledge-summary { margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); border: 1px solid var(--line); background: var(--surface); }
.knowledge-summary > div { min-width: 0; min-height: 92px; padding: 18px 20px; display: grid; align-content: center; gap: 7px; border-right: 1px solid var(--line); }
.knowledge-summary > div:last-child { border-right: 0; }
.knowledge-summary span { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.knowledge-summary strong { font: 700 21px var(--display); }
.knowledge-state { width: fit-content; padding: 5px 8px; border-radius: 4px; color: #6b756f; background: #f1ede4; font: 700 12px var(--body) !important; text-transform: uppercase; }
.knowledge-state.building { color: #2f3fd0; background: #eef0ff; }
.knowledge-state.review { color: #956716; background: #fff3d8; }
.knowledge-state.published { color: #16845b; background: #e7f5ee; }
.knowledge-state.failed { color: #a7483d; background: #fbe7e4; }
.knowledge-section { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); }
.knowledge-section-head { min-height: 72px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.knowledge-section-head h2 { margin: 0; font: 700 16px var(--display); }
.knowledge-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.business-context-card { overflow: hidden; border-radius: 8px; }
.business-context-form { padding: 20px; display: grid; gap: 14px; background: #fbfaf7; }
.business-context-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.business-context-intro label { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.business-context-intro p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.business-context-topics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.business-context-topics span { padding: 5px 8px; border-radius: 999px; color: #4e635d; background: #fbfaf7; font-size: 12px; font-weight: 700; }
.business-context-form textarea { width: 100%; min-height: 180px; max-height: 420px; padding: 14px 15px; resize: vertical; border: 1px solid #d6d0c4; border-radius: 7px; background: var(--surface); color: var(--ink); outline: none; font: inherit; line-height: 1.55; }
.business-context-form textarea::placeholder { color: #8a928e; }
.business-context-form textarea:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(62, 80, 238,.12); }
.business-context-form textarea:disabled { color: var(--muted); background: #f2f4f2; cursor: not-allowed; }
.business-context-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.business-context-note { min-width: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.business-context-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--cyan-dark); }
.business-context-footer .button { flex: 0 0 auto; }
.calendar-provider-panel { padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.calendar-provider-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calendar-provider-heading strong { font-size: 13px; }
.calendar-provider-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.calendar-provider-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.calendar-provider-card { min-width: 0; padding: 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.calendar-provider-card .knowledge-source-icon { width: 34px; height: 34px; margin: 0; }
.calendar-provider-card strong, .calendar-provider-card small { display: block; }
.calendar-provider-card strong { font-size: 12px; }
.calendar-provider-card small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.calendar-provider-card .pill { white-space: nowrap; }
.phone-setup-options { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.phone-setup-option { min-width: 0; padding: 18px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.phone-setup-option-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; color: var(--cyan-dark); background: #eef0ff; }
.phone-setup-option-copy { min-width: 0; }
.phone-setup-option h3, .phone-setup-record-head h3 { margin: 3px 0 6px; font: 700 14px var(--display); }
.phone-setup-option p, .phone-setup-record-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.phone-setup-option .button { grid-column: 2; width: fit-content; }
.phone-setup-availability { display: block; margin-top: 10px; color: #8a5c18; font-size: 12px; font-weight: 700; line-height: 1.4; }
.phone-setup-availability.ready { color: #16845b; }
.phone-setup-records { display: grid; }
.phone-setup-record + .phone-setup-record { border-top: 1px solid var(--line); }
.phone-setup-record-head { min-height: 66px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.phone-setup-record .knowledge-empty, .phone-setup-record .tool-list { border-top: 1px solid var(--line); }
.segmented { padding: 3px; display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: #f1ede4; }
.segmented button { min-height: 29px; padding: 0 9px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; text-transform: capitalize; }
.segmented button.active { color: white; background: var(--ink); }
.knowledge-source-list, .knowledge-item-list { display: grid; }
.knowledge-source-row { min-width: 0; padding: 16px 20px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--line); }
.knowledge-source-row:last-child, .knowledge-item:last-child { border-bottom: 0; }
.knowledge-source-icon { width: 38px; height: 38px; margin-top: 2px; display: grid; place-items: center; border-radius: 6px; color: var(--cyan-dark); background: #eef0ff; flex-shrink: 0; }
.knowledge-source-row strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.knowledge-source-row a { display: inline-block; width: fit-content; max-width: 100%; margin-top: 2px; color: var(--cyan-dark); font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-source-row a:hover { text-decoration: underline; }
.knowledge-source-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: normal; }
.source-durable-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.knowledge-source-actions { display: flex; align-items: center; gap: 6px; }
.knowledge-source-row .pill { margin-top: 2px; }
.knowledge-source-row .icon-button:disabled { opacity: .45; cursor: wait; }
.knowledge-empty { min-height: 118px; padding: 24px 20px; display: flex; align-items: center; gap: 14px; color: var(--muted); }
.knowledge-empty > svg { flex: 0 0 auto; color: var(--cyan-dark); }
.knowledge-empty strong { color: var(--ink); font-size: 12px; }
.knowledge-empty p { margin: 4px 0 0; font-size: 12px; }
.knowledge-empty .button { margin-left: auto; }
.knowledge-item { min-width: 0; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; border-bottom: 1px solid var(--line); }
.knowledge-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.knowledge-type { color: var(--cyan-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.confidence { color: var(--muted); font-size: 12px; }
.knowledge-item h3 { margin: 10px 0 6px; font: 700 14px var(--display); overflow-wrap: anywhere; }
.knowledge-item p { max-width: 950px; margin: 0; color: #56615e; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.knowledge-citation { margin-top: 11px; color: var(--muted); font-size: 12px; }
.knowledge-citation a, .knowledge-citation span { width: fit-content; display: flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; }
.knowledge-citation svg { width: 12px; }
.knowledge-item-actions { display: flex; gap: 6px; align-items: start; }
.knowledge-item-actions .approve { color: #16845b; border-color: #b8d9c8; background: #fbfaf7; }
.knowledge-item-actions .reject { color: #a7483d; border-color: #e4b9b4; background: #fff7f5; }
.pill.partial { background: #fff1d6; color: #8a5a12; }
.knowledge-publish-note { margin-top: 18px; padding: 17px 20px; display: flex; align-items: flex-start; gap: 12px; border-left: 3px solid var(--cyan-dark); background: #eef0ff; color: #42605b; }
.knowledge-publish-note svg { flex: 0 0 auto; }
.knowledge-publish-note strong { display: block; font-size: 12px; }
.knowledge-publish-note p { margin: 4px 0 0; font-size: 12px; }
.knowledge-edit-source { padding: 11px 12px; display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); background: #fbfaf7; color: var(--muted); font-size: 12px; text-transform: capitalize; }
.knowledge-selection-summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--muted); font-size: 12px; }
.knowledge-selection-summary strong { color: var(--ink); }
.knowledge-page-selection { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.knowledge-page-option { padding: 12px; margin: 0; border-bottom: 1px solid var(--line); background: #fff; }
.knowledge-page-option:last-child { border-bottom: 0; }
.knowledge-page-option span { min-width: 0; display: grid; gap: 3px; }
.knowledge-page-option strong { color: var(--ink); font-size: 12px; }
.knowledge-page-option small { overflow-wrap: anywhere; line-height: 1.35; }
.oauth-provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.oauth-provider-grid button { min-height: 82px; padding: 13px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fbfaf7; color: var(--ink); text-align: left; cursor: pointer; }
.oauth-provider-grid button:hover { border-color: var(--cyan-dark); background: #eef0ff; }
.oauth-provider-grid svg { width: 18px; color: var(--cyan-dark); }
.oauth-provider-grid strong, .oauth-provider-grid small { display: block; }
.oauth-provider-grid strong { font-size: 12px; }
.oauth-provider-grid small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.integration-divider { margin: 4px 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.integration-divider::before, .integration-divider::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.scenario-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.scenario-result-strip { padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.scenario-result-strip > div { padding: 7px 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: white; font-size: 12px; text-transform: capitalize; }
.scenario-result-strip strong.passed { color: #16845b; }
.scenario-result-strip strong.failed { color: #a7483d; }
.approval-heading { display: flex; align-items: center; justify-content: space-between; padding-top: 5px; }
.approval-heading strong { min-width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
.approval-list { display: grid; gap: 7px; }
.approval-list article { padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: #fbfaf7; }
.approval-list strong, .approval-list small { display: block; }
.approval-list small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.credit-balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: #fbfaf7; }
.credit-balance-grid > div { min-width: 0; padding: 11px; border-right: 1px solid var(--line); }
.credit-balance-grid > div:last-child { border-right: 0; }
.credit-balance-grid span, .credit-balance-grid strong { display: block; }
.credit-balance-grid span { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.credit-balance-grid strong { margin-top: 4px; font-size: 12px; }
.credit-history-list { display: grid; }
.credit-history-list article { min-width: 0; padding: 11px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.credit-history-list article:last-child { border-bottom: 0; }
.credit-history-list article > div { min-width: 0; }
.credit-history-list article strong, .credit-history-list article small { display: block; }
.credit-history-list article > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.credit-history-list article small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.credit-entry-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.credit-entry-icon svg { width: 13px; }
.credit-entry-icon.credit { color: #16845b; background: #e7f5ee; }
.credit-entry-icon.debit { color: #9c463c; background: #fbe7e4; }
.credit-entry-amount { white-space: nowrap; font-size: 12px; }
.credit-entry-amount.credit { color: #16845b; }
.credit-entry-amount.debit { color: #9c463c; }
.credit-history-panel { margin-top: 18px; padding: 0 20px 6px; }
.credit-history-panel .panel-header { margin-inline: -20px; }
.knowledge-conflicts { border-color: #e2c8a3; }
.knowledge-organized-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.knowledge-generation-note { margin: 0 20px 14px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); background: var(--surface-soft); }
.knowledge-generation-note > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.knowledge-generation-note strong, .knowledge-generation-note p { display: block; }
.knowledge-generation-note strong { color: var(--ink); font-size: 12px; }
.knowledge-generation-note p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.knowledge-generation-note.success > svg { color: var(--cyan-dark); }
.knowledge-generation-note.failed { border-color: color-mix(in srgb, var(--coral) 38%, var(--line)); background: color-mix(in srgb, var(--coral) 7%, var(--surface)); }
.knowledge-generation-note.failed > svg { color: var(--coral); }
.knowledge-library-sections { border-top: 1px solid var(--line); }
.knowledge-library-section { border-bottom: 1px solid var(--line); }
.knowledge-library-section > summary { min-height: 76px; padding: 14px 20px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.knowledge-library-section > summary::-webkit-details-marker, .knowledge-evidence > summary::-webkit-details-marker { display: none; }
.knowledge-library-section > summary strong, .knowledge-library-section > summary small { display: block; }
.knowledge-library-section > summary strong { color: var(--ink); font-size: 13px; }
.knowledge-library-section > summary small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.knowledge-library-section > summary b { min-width: 28px; color: var(--muted); font-size: 12px; text-align: right; }
.knowledge-library-section > summary > svg { width: 16px; transition: transform .2s ease; }
.knowledge-library-section[open] > summary > svg { transform: rotate(180deg); }
.knowledge-library-entries { padding: 0 20px 16px 70px; }
.knowledge-library-entry { padding: 15px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; border-top: 1px solid var(--line); }
.knowledge-library-entry h3 { margin: 0; color: var(--ink); font: 700 13px/1.35 var(--display); }
.knowledge-library-entry p { max-width: 900px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-line; }
.knowledge-library-citations { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.knowledge-library-entry { overflow-wrap: anywhere; }
#knowledge-library-search { flex-wrap: wrap; gap: 12px; }
#knowledge-library-search label { display: grid; gap: 6px; flex: 1 1 160px; min-width: 0; font-size: 12px; }
#knowledge-library-search input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface, white); color: var(--ink); }
#knowledge-library-search select { width: 100%; min-width: 0; }
@media (max-width: 600px) { .knowledge-library-entry { grid-template-columns: minmax(0, 1fr); } }
.knowledge-library-citations a, .knowledge-library-citations span { max-width: 300px; display: inline-flex; align-items: center; gap: 5px; color: var(--cyan-dark); font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-library-citations svg { width: 11px; height: 11px; flex: 0 0 auto; }
.knowledge-evidence { padding: 0; overflow: hidden; }
.knowledge-evidence > summary { min-height: 72px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.knowledge-evidence > summary span, .knowledge-evidence > summary strong, .knowledge-evidence > summary small { display: block; }
.knowledge-evidence > summary strong { color: var(--ink); font-size: 12px; }
.knowledge-evidence > summary small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.knowledge-evidence > summary svg { width: 17px; transition: transform .2s ease; }
.knowledge-evidence[open] > summary svg { transform: rotate(180deg); }
.knowledge-evidence > .knowledge-section-head { border-top: 1px solid var(--line); }
.knowledge-conflict-list { display: grid; }
.knowledge-conflict { padding: 20px; border-bottom: 1px solid var(--line); }
.knowledge-conflict:last-child { border-bottom: 0; }
.knowledge-conflict-title { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.knowledge-conflict-title .knowledge-source-icon { color: #956716; background: #fff3d8; }
.knowledge-conflict-title h3 { margin: 3px 0 0; font: 700 14px var(--display); text-transform: capitalize; }
.knowledge-conflict-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.knowledge-conflict-candidate { min-width: 0; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); background: #fbfaf7; }
.knowledge-conflict-candidate > div { min-width: 0; }
.knowledge-conflict-candidate strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.knowledge-conflict-candidate small { margin-top: 7px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 12px; }
.knowledge-conflict-candidate small a, .knowledge-conflict-candidate small > span { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan-dark); text-decoration: none; }
.knowledge-conflict-candidate small svg { width: 11px; height: 11px; }
.knowledge-conflict-candidate .button { flex: 0 0 auto; }
.tool-list { display: grid; }
.tool-domain-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.tool-domain-list span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: capitalize; }
.tool-row { min-width: 0; padding: 15px 20px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.tool-row:last-child { border-bottom: 0; }
.tool-row > div { min-width: 0; }
.tool-row strong, .tool-row small { display: block; }
.tool-row > div > strong { font-size: 12px; }
.tool-row small { margin-top: 3px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-row p { max-width: 780px; margin: 5px 0 0; color: #56615e; font-size: 12px; line-height: 1.45; }
.tool-row.audit > strong { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tool-row.disabled { opacity: 0.78; background: #fafbfa; }
.tool-row.disabled:hover { opacity: 1; }
.button-tool-toggle { min-width: 88px; justify-content: center; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chart-wrap { height: 238px; display: flex; flex-direction: column; }
.chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); }
.chart-legend span:last-child i { background: var(--coral); }
.bar-chart { flex: 1; display: flex; align-items: end; gap: clamp(8px, 2vw, 23px); padding-top: 22px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 45px, #eef0ed 46px); }
.bar-group { flex: 1; height: 100%; padding: 0; display: flex; align-items: end; justify-content: center; gap: 4px; position: relative; border: 0; color: inherit; background: transparent; cursor: pointer; }
.bar-group:hover .bar, .bar-group:focus-visible .bar { background: var(--coral); }
.bar { width: min(17px, 38%); min-height: 3px; background: var(--cyan); border-radius: 3px 3px 0 0; transition: height .3s ease; }
.bar.outbound { background: var(--coral); }
.bar-group label { position: absolute; bottom: -22px; color: #8b9491; font-size: 12px; }
.progress-block { margin-bottom: 21px; }
.progress-copy { display: flex; justify-content: space-between; align-items: end; margin-bottom: 8px; }
.progress-copy span { color: var(--muted); font-size: 12px; }
.progress-copy strong { font: 700 14px var(--display); font-variant-numeric: tabular-nums; }
.progress-track { height: 8px; background: #e6eae6; border-radius: 4px; overflow: hidden; }
.progress-track div { height: 100%; background: var(--cyan-dark); border-radius: inherit; }
.progress-track.warning div { background: var(--coral); }
.plan-summary { padding: 18px; color: white; background: var(--ink); border-radius: 6px; }
.plan-summary-top { display: flex; justify-content: space-between; gap: 10px; }
.plan-summary h3 { margin: 4px 0 3px; font: 700 20px var(--display); }
.plan-summary p { margin: 0; color: #8e9996; font-size: 12px; }
.plan-price { text-align: right; }
.plan-price strong { font: 700 22px var(--display); }
.plan-price span { display: block; color: #7e8a86; font-size: 12px; }
.plan-summary ul { list-style: none; margin: 18px 0 0; padding: 15px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #303b38; color: #b8c1be; font-size: 12px; }
.plan-summary li { display: flex; align-items: center; gap: 6px; }
.plan-summary li svg { width: 13px; color: var(--acid); }
.activity-list { display: grid; }
.activity-item { padding: 14px 20px; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: #eef0ff; color: var(--cyan-dark); }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { font-size: 12px; }
.activity-item small { color: var(--muted); font-size: 12px; }
.activity-time { color: #8b9491; font-size: 12px; }

.toolbar { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.search { position: relative; width: min(360px, 100%); }
.search svg { position: absolute; left: 12px; top: 11px; color: #8a9491; width: 16px; }
.search input { width: 100%; height: 40px; padding: 0 12px 0 37px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); outline: none; }
.toolbar-actions { display: flex; gap: 8px; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 800px; }
.clients-table { min-width: 1160px; table-layout: fixed; width: 100%; }
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: auto; min-width: 200px; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 95px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 85px; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 145px; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { width: 130px; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { width: 130px; white-space: nowrap; }
.clients-table th:last-child, .clients-table td:last-child { width: 285px; min-width: 285px; text-align: right; padding-left: 6px; padding-right: 16px; }
.clients-table tbody tr { transition: background .16s ease; }
.clients-table tbody tr:hover { background: #fbfaf7; }
.clients-table td { height: 72px; }
th { height: 44px; padding: 0 16px; background: #f1ede4; color: #717b78; text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
td { height: 64px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; }
td strong, td small { display: block; }
td small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-main > span:last-child { min-width: 0; }
.cell-main strong, .cell-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 5px; background: #eef0ff; color: var(--cyan-dark); font-weight: 800; font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border-radius: 4px; background: #f1ede4; color: #5e6966; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.pill.active, .pill.paid, .pill.completed { background: #e7f5ee; color: #16845b; }
.pill.trial, .pill.pending { background: #fff3d8; color: #956716; }
.pill.suspended, .pill.failed { background: #fbe7e4; color: #a7483d; }
.pill.live { background: #eef0ff; color: #2f3fd0; }
.table-actions { display: flex; gap: 5px; }
.table-actions button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: white; cursor: pointer; }
.table-actions svg { width: 15px; }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; }
.row-actions .button { white-space: nowrap; }
.clients-table .row-actions { width: 100%; }
.clients-table .row-actions .button {
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.clients-table .row-actions .button svg { width: 13px; height: 13px; flex-shrink: 0; }
.clients-table .row-actions .button-outline {
  border-color: #cbd5e1;
  color: #334155;
  background: #ffffff;
}
.clients-table .row-actions .button-outline:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.clients-table .row-actions .button-danger {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fff5f5;
}
.clients-table .row-actions .button-danger:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}
.clients-toolbar, .client-directory { width: 100%; max-width: 1320px; }
.clients-toolbar { align-items: center; }
.clients-toolbar .search { width: min(460px, 100%); }
.clients-toolbar .toolbar-actions { align-items: center; }
.client-result-count { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.client-directory { min-width: 0; display: grid; gap: 14px; }
.client-card { min-width: 0; overflow: visible; }
.client-card-header { min-width: 0; padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.client-card-header > .pill { flex: 0 0 auto; margin-top: 3px; }
.client-identity { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; }
.client-identity .cell-avatar { width: 48px; height: 48px; border-radius: 10px; font-size: 13px; }
.client-identity > div { min-width: 0; display: grid; gap: 2px; }
.client-identity h2 { margin: 0; font: 700 18px/1.25 var(--display); overflow-wrap: anywhere; }
.client-identity span:not(.cell-avatar), .client-identity small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.client-card-details { min-width: 0; padding: 21px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.client-card-detail { min-width: 0; display: grid; align-content: start; gap: 5px; }
.client-card-detail + .client-card-detail { padding-left: 18px; border-left: 1px solid var(--line); }
.client-detail-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.client-card-detail strong { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.client-card-detail small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.client-card-usage .mini-progress { width: 100%; max-width: 190px; margin-top: 4px; }
.client-card-actions { min-width: 0; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: #fbfaf7; border-radius: 0 0 7px 7px; }
.client-card-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.client-card-actions .button { white-space: nowrap; }
.client-delete { color: var(--red); border: 1px solid transparent; background: transparent; }
.client-delete:hover { border-color: #e4b9b4; background: #fff7f5; }
.usage-cell { min-width: 130px; }
.mini-progress { height: 5px; margin-top: 6px; background: #e4e8e4; border-radius: 3px; overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: var(--cyan-dark); }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-card { padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.plan-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card-top > .pill { flex: 0 0 auto; align-self: flex-start; }
.plan-card h3 { margin: 4px 0; font: 700 18px var(--display); }
.plan-card p { min-height: 38px; margin: 0; color: var(--muted); font-size: 12px; }
.plan-card .price { margin: 22px 0 16px; font: 700 31px var(--display); }
.plan-card .price span { color: var(--muted); font: 500 12px var(--body); }
.plan-limits { border-block: 1px solid var(--line); padding: 13px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.plan-limits span { color: var(--muted); font-size: 12px; }
.plan-limits strong { display: block; color: var(--ink); font-size: 12px; }
.plan-card-footer { padding-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.entitlement-line { margin-top: 13px; display: flex; gap: 5px; }
.entitlement-line span { padding: 4px 6px; border-radius: 3px; background: #f0f2ef; color: #a0a7a4; font-size: 12px; font-weight: 700; }
.entitlement-line span.on { background: #e2f3ed; color: #277457; }
.entitlement-fieldset { margin: 0; padding: 13px; display: flex; flex-wrap: wrap; gap: 16px; border: 1px solid var(--line); border-radius: 6px; }
.entitlement-fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 700; }
.entitlement-fieldset label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; }
.entitlement-fieldset input { accent-color: var(--cyan-dark); }
.admin-info { margin-bottom: 16px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #d5d9ff; border-radius: 7px; background: #eef0ff; color: #395c56; }
.admin-info svg { flex: 0 0 auto; color: var(--cyan-dark); }
.admin-info strong { display: block; font-size: 12px; }
.admin-info p { margin: 3px 0 0; font-size: 12px; }
.health-hero { margin-bottom: 28px; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border: 1px solid #d5d9ff; border-radius: 12px; background: #eef0ff; color: #2f3fd0; }
.health-hero h2 { margin: 4px 0 6px; font: 700 25px/1.15 var(--display); color: var(--ink); }
.health-hero p { margin: 0; color: var(--muted); }
.health-hero.health-degraded { border-color: #e8d6a6; background: #fff9e8; }
.health-hero.health-failed { border-color: #edc4bd; background: #fff3f1; }
.health-summary { display: flex; flex-wrap: wrap; gap: 18px; }
.health-summary span { min-width: 78px; font-size: 12px; color: var(--muted); }
.health-summary strong { display: block; margin-bottom: 3px; font-size: 24px; color: var(--ink); }
.health-group { margin: 0 0 26px; }
.health-group-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.health-group-title h2 { margin: 0; font: 700 18px/1.2 var(--display); }
.health-group-title span { color: var(--muted); font-size: 12px; }
.health-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.health-card { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.health-card.health-failed { border-color: #edc4bd; background: #fff9f8; }
.health-card.health-not_configured { border-color: #ead8a9; background: #fffdf5; }
.health-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.health-card-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.health-card h3 { margin: 0; font-size: 14px; }
.health-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #1e9b7b; }
.health-failed .health-dot { background: #d95c4e; }
.health-not_configured .health-dot { background: #c79528; }
.health-status { padding: 4px 8px; border-radius: 999px; background: #e6f4ee; color: #277158; font-size: 12px; font-weight: 700; white-space: nowrap; }
.health-failed .health-status { background: #fde5e1; color: #a63f35; }
.health-not_configured .health-status { background: #fff1c9; color: #85651b; }
.health-card p { min-height: 34px; margin: 12px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.health-card-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.health-alert { margin-bottom: 20px; padding: 15px 18px; display: flex; gap: 12px; border: 1px solid #edc4bd; border-radius: 9px; background: #fff3f1; color: #8d3d35; }
.health-alert svg { flex: 0 0 auto; }
.health-alert strong { display: block; color: #6f2e28; }
.health-alert p { margin: 4px 0 0; font-size: 12px; }
.health-empty { min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.health-empty svg { width: 30px; height: 30px; color: var(--cyan-dark); animation: spin 1.2s linear infinite; }
.health-empty strong { color: var(--ink); }
@media (max-width: 760px) { .health-hero { align-items: flex-start; flex-direction: column; } .health-card-grid { grid-template-columns: 1fr; } .health-summary { width: 100%; justify-content: space-between; } }
.location-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.location-card { padding: 22px; min-height: 220px; display: flex; flex-direction: column; }
.location-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.location-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #eef0ff; color: var(--cyan-dark); }
.location-icon svg { width: 21px; height: 21px; }
.location-card h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.02em; }
.location-address, .location-timezone { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.location-address svg, .location-timezone svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--cyan-dark); margin-top: 1px; }
.location-calendar { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--text); font-size: 12px; font-weight: 700; }
.location-calendar svg { width: 16px; height: 16px; color: var(--cyan-dark); }
.location-calendar.setup_needed svg { color: var(--muted); }
.location-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.location-info { margin-top: -4px; }
.locations-page { display: grid; gap: 22px; }
.locations-page .location-info { margin: -4px 0 0; }
.location-list-heading { margin: 2px 0 -6px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.location-list-heading h2 { margin: 0; font: 700 17px var(--display); letter-spacing: -.015em; }
.location-list-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.location-list-heading > span { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 12px; font-weight: 700; }
.location-branch-card { min-height: 370px; padding: 0; overflow: hidden; border-color: #d4dbd6; box-shadow: 0 1px 2px rgba(17,22,21,.025); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.location-branch-card:hover { border-color: #b9c8c2; box-shadow: 0 10px 28px rgba(25,47,42,.07); transform: translateY(-1px); }
.location-branch-card .location-card-top { min-height: 92px; margin: 0; padding: 20px 20px 18px; align-items: flex-start; border-bottom: 1px solid #e7ebe7; }
.location-card-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.location-card-identity .location-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; }
.location-card-identity > div { min-width: 0; }
.location-card-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.location-branch-card .location-card-identity h2 { margin: 0; font: 700 18px/1.25 var(--display); overflow-wrap: anywhere; }
.location-branch-card .pill { flex: 0 0 auto; margin: 2px 0 0 12px; border-radius: 999px; }
.location-details { min-height: 128px; padding: 18px 20px 16px; display: grid; align-content: start; gap: 14px; }
.location-branch-card .location-address, .location-branch-card .location-timezone { min-width: 0; margin: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.location-detail-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #fbfaf7; color: var(--cyan-dark); }
.location-branch-card .location-detail-icon svg { width: 15px; height: 15px; margin: 0; }
.location-branch-card .location-address > span:last-child, .location-branch-card .location-timezone > span:last-child { min-width: 0; }
.location-branch-card .location-address small, .location-branch-card .location-timezone small, .location-calendar-copy small { display: block; margin-bottom: 1px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.location-branch-card .location-address small + span, .location-branch-card .location-timezone small + span { display: block; overflow-wrap: anywhere; }
.location-branch-card .location-calendar { min-height: 68px; margin: 0 20px; padding: 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid #dbe9e4; border-radius: 9px; background: #f4faf8; }
.location-branch-card .location-calendar.setup_needed { border-color: #eadfc4; background: #fffaf0; }
.location-calendar-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #deefea; color: var(--cyan-dark); }
.location-calendar.setup_needed .location-calendar-icon { background: #f4ead2; color: #8a681d; }
.location-branch-card .location-calendar svg { width: 17px; height: 17px; }
.location-branch-card .location-calendar.setup_needed svg { color: #8a681d; }
.location-calendar-copy { min-width: 0; }
.location-calendar-copy strong { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.location-calendar-state { color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }
.location-calendar.setup_needed .location-calendar-state { color: #8a681d; }
.location-branch-card .location-card-footer { min-height: 68px; margin: 18px 0 0; padding: 14px 20px; background: #fbfaf7; }
.location-branch-card .location-card-footer .muted { font-size: 12px; line-height: 1.35; }
.location-branch-card .location-card-footer .button { flex: 0 0 auto; background: var(--surface); }
@media (max-width: 700px) { .location-card-grid { grid-template-columns: 1fr; } .location-card-footer { align-items: flex-start; flex-direction: column; } .location-branch-card .location-card-footer { align-items: center; flex-direction: row; } }
@media (max-width: 420px) { .location-list-heading { align-items: flex-start; } .location-list-heading p { display: none; } .location-branch-card .location-calendar { grid-template-columns: 34px minmax(0, 1fr); } .location-calendar-state { grid-column: 2; } .location-branch-card .location-card-footer { align-items: stretch; flex-direction: column; } .location-branch-card .location-card-footer .button { width: 100%; } }
.config-context { padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 6px; background: #fbfaf7; }
.config-context strong, .config-context small { display: block; }
.config-context small { color: var(--muted); font-size: 12px; }

.call-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 16px; }
.call-detail { position: sticky; top: 88px; align-self: start; }
.call-layout tr.selected td { background: #eef0ff; }
.detail-empty { min-height: 360px; padding: 30px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.detail-empty svg { width: 34px; height: 34px; color: var(--cyan-dark); }
.call-detail-body { padding: 20px; }
.call-detail-body h3 { margin: 4px 0 3px; font: 700 18px var(--display); }
.call-detail-body > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.detail-list { display: grid; }
.detail-row { min-height: 43px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); font-size: 12px; }
.detail-row span { color: var(--muted); }
.transcript-box { margin-top: 16px; padding: 14px; background: #f1ede4; border-radius: 5px; color: #4f5a57; font-size: 12px; }
.call-detail-loading { min-height: 260px; }
.transcript-reader { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.transcript-reader-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transcript-reader-head strong, .transcript-reader-head small { display: block; }
.transcript-reader-head small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.transcript-turns { max-height: 460px; margin-top: 14px; padding-right: 4px; overflow: auto; }
.transcript-turn { width: 90%; margin: 0 0 11px; }
.transcript-turn.agent { margin-left: auto; }
.transcript-turn > div { margin-bottom: 4px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.transcript-turn p { margin: 0; padding: 10px 12px; border-radius: 7px 7px 7px 1px; background: #f1ede4; color: var(--ink-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript-turn.agent p { border-radius: 7px 7px 1px 7px; background: #eef0ff; }
.transcript-language { margin: 12px 0 7px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.transcript-language svg { width: 12px; height: 12px; }
.transcript-notice { margin-top: 12px; padding: 11px; display: flex; align-items: center; gap: 8px; border-radius: 6px; background: #f0f2ef; color: var(--muted); font-size: 12px; line-height: 1.45; }
.transcript-notice svg { width: 16px; height: 16px; flex: 0 0 auto; }
.transcript-notice .button { margin-left: auto; }
.transcript-notice.partial { background: #fff5df; color: #77591b; }
.transcript-notice.failed { background: #fff0ed; color: #8f3e31; }
.transcript-more { width: 100%; margin-top: 10px; justify-content: center; }
.transcript-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 7px; }
.transcript-search { margin-bottom: 16px; padding: 12px; display: grid; grid-template-columns: minmax(220px, 420px) auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.transcript-search-results { grid-column: 1 / -1; max-height: 300px; overflow: auto; border-top: 1px solid var(--line); }
.transcript-search-results button { width: 100%; padding: 10px 4px; display: grid; grid-template-columns: 140px minmax(0, 1fr) 18px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.transcript-search-results strong, .transcript-search-results small { display: block; }
.transcript-search-results small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.transcript-search-results p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.pill.transcript-available { background: #e2f4ec; color: #20684e; }
.pill.transcript-processing { background: #eef0ff; color: #2f3fd0; }
.pill.transcript-partial { background: #fff1d2; color: #725417; }
.pill.transcript-failed, .pill.transcript-unavailable, .pill.transcript-expired, .pill.transcript-disabled { background: #eee; color: #626a67; }
.call-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.call-actions > strong { font-size: 12px; }
.call-actions article { position: relative; padding: 9px 0 0 17px; display: flex; align-items: center; gap: 8px; }
.call-actions article > div { min-width: 0; flex: 1; }
.call-actions article > .icon-button { width: 28px; height: 28px; flex: 0 0 auto; }
.call-actions article::before { content: ""; position: absolute; left: 4px; top: 0; bottom: -9px; width: 1px; background: var(--line); }
.call-actions article:last-child::before { bottom: 10px; }
.action-dot { position: absolute; z-index: 1; left: 0; top: 13px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--cyan-dark); }
.call-actions article strong, .call-actions article small { display: block; }
.call-actions article strong { font-size: 12px; }
.latency-waterfall { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.latency-waterfall > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.latency-waterfall small { color: var(--muted); font-size: 12px; }
.latency-waterfall > p { margin: 8px 0 0; color: #a43f32; font-size: 12px; }
.latency-row { display: grid; grid-template-columns: 88px minmax(40px, 1fr) 62px; align-items: center; gap: 7px; margin: 6px 0; font-size: 12px; }
.latency-row span { text-transform: capitalize; color: var(--muted); }
.latency-row i { height: 6px; width: var(--latency-width); border-radius: 8px; background: var(--cyan-dark); }
.latency-row strong { text-align: right; font-size: 12px; }
.call-actions article small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.customer-conversations { padding: 16px 20px 20px; }
.customer-conversations h3 { margin: 0 0 10px; font-size: 12px; }
.customer-conversation { width: 100%; padding: 11px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.customer-conversation > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eef0ff; color: var(--cyan-dark); }
.customer-conversation svg { width: 14px; height: 14px; }
.customer-conversation strong, .customer-conversation small { display: block; }
.customer-conversation small { margin-top: 2px; color: var(--muted); font-size: 12px; }

.settings-grid { display: grid; grid-template-columns: 210px minmax(0, 680px); gap: 30px; }
.settings-nav { display: grid; gap: 4px; align-content: start; }
.settings-nav button { min-height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.settings-nav button.active { background: #e5e9e4; color: var(--ink); font-weight: 700; }
.settings-nav button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.settings-section { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.settings-section h2 { margin: 0; font: 700 17px var(--display); }
.settings-section > p { margin: 5px 0 22px; color: var(--muted); font-size: 12px; }
.form-actions { padding-top: 19px; margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }

dialog {
  width: min(560px, calc(100% - 28px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 70px -10px rgba(12, 18, 16, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
dialog[open] {
  animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
dialog::backdrop {
  background: rgba(11, 16, 15, 0.6);
  backdrop-filter: blur(4px);
  animation: backdrop-enter 0.18s ease both;
}
@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
dialog > form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  min-height: 0;
}
.modal-header {
  flex-shrink: 0;
  min-height: 64px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.modal-header h2 { margin: 0; font: 700 18px var(--display); color: var(--ink); letter-spacing: -0.01em; }
.modal-header-text { display: flex; flex-direction: column; gap: 3px; }
.modal-subtitle { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; font-weight: 400; }
.modal-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-close:hover {
  background: #f1ede4;
  color: var(--ink);
}
.modal-close svg {
  width: 18px;
  height: 18px;
}
.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #d6d0c4 transparent;
}
.modal-footer {
  flex-shrink: 0;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #fbfaf7;
}

/* Business operations forms */
dialog:has(#staff-form), dialog:has(#service-form) { width: min(760px, calc(100% - 28px)); }
#staff-form .modal-body, #service-form .modal-body { padding: 20px 24px 28px; background: #fbfaf7; }
#staff-form .form-stack, #service-form .form-stack { gap: 16px; }
#staff-form input[type="checkbox"], #service-form input[type="checkbox"],
#service-form input[type="radio"] { appearance: auto; width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--cyan-dark); cursor: pointer; }
.modal-section { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.modal-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-section-head > div { min-width: 0; }
.modal-section-head strong, .modal-section-head small { display: block; }
.modal-section-head strong { font-size: 14px; letter-spacing: -.01em; }
.modal-section-head small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.compact-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; font-size: 12px; font-weight: 700; cursor: pointer; }
.compact-toggle:has(input:checked) { border-color: #a9b2f5; background: #eef0ff; color: #2f3fd0; }
.number-with-unit { position: relative; display: block; }
.number-with-unit input { width: 100%; padding-right: 46px !important; }
.number-with-unit > small { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.booking-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.booking-model-option { position: relative; cursor: pointer; }
.booking-model-option > input { position: absolute; top: 14px; right: 14px; z-index: 1; }
.booking-model-option > span { min-height: 116px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; gap: 3px 10px; padding: 16px 40px 16px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; }
.booking-model-option svg { grid-row: 1 / 3; width: 23px; height: 23px; color: var(--cyan-dark); }
.booking-model-option strong, .booking-model-option small { grid-column: 2; display: block; }
.booking-model-option strong { font-size: 13px; }
.booking-model-option small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.booking-model-option:has(input:checked) > span { border-color: var(--cyan-dark); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--cyan-dark); }
.booking-mode-fallback { max-width: 320px; }
.staff-location-list { display: grid; gap: 12px; }
.staff-location-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; }
.staff-location-card:has(.staff-location-toggle input:checked) { border-color: #91bbb4; box-shadow: 0 0 0 1px #91bbb4; }
.staff-location-head { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
.staff-location-toggle { min-width: 0; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.staff-location-toggle span, .staff-location-toggle strong, .staff-location-toggle small { min-width: 0; display: block; }
.staff-location-toggle strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.staff-location-toggle small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.staff-travel { display: grid; grid-template-columns: auto 72px; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.staff-travel input { min-height: 38px; padding: 8px 29px 8px 10px !important; }
.staff-travel .number-with-unit > small { right: 9px; }
.staff-hours-head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px 8px; }
.staff-hours-head strong { font-size: 12px; }
.staff-hours-head small { color: var(--muted); font-size: 12px; }
.staff-hours-grid { display: grid; gap: 1px; padding: 0 14px 14px; }
.staff-hours-row { min-height: 52px; display: grid; grid-template-columns: 82px minmax(120px, 1fr) minmax(120px, 1fr); align-items: end; gap: 10px; padding: 7px 0; border-top: 1px solid #e5e9e6; }
.staff-day-toggle { min-height: 38px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.staff-time { display: grid; gap: 3px; }
.staff-time > span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.staff-time input { min-height: 38px; padding: 7px 10px; }
.modal-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); text-align: center; font-size: 12px; }

@media (max-width: 640px) {
  dialog:has(#staff-form), dialog:has(#service-form) { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  #staff-form, #service-form { max-height: 100dvh; }
  #staff-form .modal-body, #service-form .modal-body { padding: 14px; }
  .modal-section { padding: 14px; }
  .booking-model-grid { grid-template-columns: 1fr; }
  .staff-location-head { grid-template-columns: 1fr; }
  .staff-travel { grid-template-columns: minmax(0, 1fr) 84px; }
  .staff-hours-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .staff-hours-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
  .modal-section-head { align-items: flex-start; flex-direction: column; }
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.check-row:hover {
  border-color: #a5c3be;
  background-color: #eef0ff;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--cyan-dark);
  cursor: pointer;
}

/* Phone number selection modal styles */
.phone-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.phone-callout svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.phone-callout.is-info {
  border: 1px solid #d5d9ff;
  background: #eef0ff;
  color: #2f3fd0;
}
.phone-callout.is-info svg {
  color: var(--cyan-dark);
}
.phone-callout.is-warning {
  border: 1px solid #f6d8a7;
  background: #fef8ee;
  color: #694406;
}
.phone-callout.is-warning svg {
  color: #d97706;
}
.phone-callout strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}
.phone-callout p {
  margin: 2px 0 0;
  font-size: 12px;
  color: inherit;
  opacity: 0.9;
}
.phone-callout-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: #d5d9ff;
  color: var(--cyan-dark);
}


.phone-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #d6d0c4 transparent;
}
.phone-selection-list::-webkit-scrollbar {
  width: 6px;
}
.phone-selection-list::-webkit-scrollbar-thumb {
  background: #d6d0c4;
  border-radius: 3px;
}

.phone-number-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  user-select: none;
}
.phone-number-card:hover {
  border-color: #a9b2f5;
  background-color: #f9fcfb;
  transform: translateY(-1px);
}
.phone-card-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.phone-number-card:has(.phone-card-radio:focus-visible) {
  outline: 2px solid var(--cyan-dark);
  outline-offset: 2px;
}
.phone-number-card:has(.phone-card-radio:checked),
.phone-number-card.is-selected {
  border-color: var(--cyan-dark);
  background: #eef0ff;
  box-shadow: 0 0 0 1px var(--cyan-dark), 0 3px 12px rgba(47, 63, 208, 0.1);
}
.phone-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.phone-card-indicator {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid #b8c4bf;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.phone-number-card:hover .phone-card-indicator {
  border-color: var(--cyan-dark);
}
.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
  transform: scale(0);
}
.phone-number-card:has(.phone-card-radio:checked) .phone-card-indicator,
.phone-number-card.is-selected .phone-card-indicator {
  border-color: var(--cyan-dark);
  background: var(--cyan-dark);
}
.phone-number-card:has(.phone-card-radio:checked) .indicator-dot,
.phone-number-card.is-selected .indicator-dot {
  background: #fff;
  transform: scale(1);
}
.phone-card-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phone-number-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.phone-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1ede4;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.phone-number-text {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.phone-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.phone-meta-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-weight: 500;
}
.phone-meta-location svg {
  width: 13px;
  height: 13px;
  color: var(--cyan-dark);
}
.phone-meta-dot {
  color: #a4aea9;
}
.phone-meta-type {
  color: var(--muted);
  text-transform: capitalize;
}
.phone-card-badge {
  flex-shrink: 0;
}
.phone-status-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: #f1ede4;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.phone-number-card:has(.phone-card-radio:checked) .phone-status-pill,
.phone-number-card.is-selected .phone-status-pill {
  background: #eef0ff;
  color: var(--cyan-dark);
}

.phone-selection-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 2px 0;
}
.expiry-note, .jurisdiction-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.expiry-note svg, .jurisdiction-note svg {
  width: 14px;
  height: 14px;
  color: var(--cyan-dark);
}
.expiry-note strong {
  color: var(--ink);
}

.scheduling-concept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scheduling-concept-grid > div { min-width: 0; padding: 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.scheduling-concept-grid > div.active { border-color: #d5d9ff; background: #eef0ff; }
.scheduling-concept-grid svg { width: 18px; flex: 0 0 auto; color: var(--cyan-dark); }
.scheduling-concept-grid strong, .scheduling-concept-grid small { display: block; }
.scheduling-concept-grid small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-check { padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.settings-check input { margin-top: 2px; accent-color: var(--cyan-dark); }
.settings-check strong, .settings-check small { display: block; }
.settings-check small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.schedule-days-header, .schedule-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schedule-days-header strong { font-size: 14px; }
.schedule-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.schedule-presets button { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 5px 9px; color: var(--ink); cursor: pointer; font-size: 12px; }
.schedule-presets button:hover { border-color: var(--cyan-dark); }
.schedule-days { display: grid; gap: 5px; }
.schedule-day { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(95px, 135px) 20px minmax(95px, 135px); align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fbfaf7; }
.schedule-day.selected { background: var(--surface); border-color: #d5d9ff; }
.schedule-day label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.schedule-day label input { width: 16px; height: 16px; accent-color: var(--cyan-dark); }
.schedule-day input[type="time"] { width: 100%; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
.schedule-day input[type="time"]:disabled { opacity: .45; }
.schedule-day-separator { text-align: center; color: var(--muted); font-size: 12px; }
.schedule-copy { color: var(--muted); font-size: 12px; }
.staff-booking-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #d5d9ff; border-radius: 10px; background: #eef0ff; color: var(--ink-2); }
.staff-booking-intro > svg { width: 22px; flex: 0 0 auto; color: var(--cyan-dark); }
.staff-booking-intro strong, .staff-booking-intro p { display: block; margin: 0; }
.staff-booking-intro p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.staff-booking-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.staff-booking-divider::before, .staff-booking-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.staff-booking-slots { display: grid; gap: 10px; }
.staff-booking-slots-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-booking-slots-head span { color: var(--cyan-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.staff-booking-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px; }
.staff-booking-slot-grid button { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 10px 12px; cursor: pointer; }
.staff-booking-slot-grid button:hover { border-color: var(--cyan-dark); background: #eef0ff; }
.staff-booking-slot-grid button.selected { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: 0 0 0 2px rgba(62, 80, 238,.22); }
.staff-booking-slot-grid button small { color: inherit; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-booking-loading, .staff-booking-hint { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; margin: 0; }
.staff-booking-empty { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); }
.staff-booking-empty svg { width: 20px; color: var(--cyan-dark); }
.staff-booking-empty strong, .staff-booking-empty p { display: block; margin: 0; }
.staff-booking-empty p { margin-top: 3px; font-size: 12px; }
.staff-booking-empty.error { border-color: #e5b5ad; background: #fff7f5; }
.staff-booking-empty .button { margin-top: 10px; }
.calendar-slot-list.setup-needed { border-color: #e5b5ad; background: #fff7f5; }
.calendar-preview-message { display: flex; align-items: flex-start; gap: 10px; padding: 14px; }
.calendar-preview-message > svg { width: 20px; flex: 0 0 auto; color: var(--cyan-dark); }
.calendar-slot-list.setup-needed .calendar-preview-message > svg { color: var(--red); }
.calendar-preview-message strong, .calendar-preview-message p { display: block; margin: 0; }
.calendar-preview-message p { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.calendar-preview-message .button { margin-top: 10px; }
.team-section-heading { margin: 28px 0 12px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.team-section-heading h2, .team-section-heading p { margin: 0; }
.team-section-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.service-card.capacity-service { border-color: #d5d9ff; background: linear-gradient(145deg, var(--surface), #eef0ff); }
.scheduling-readiness { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.scheduling-readiness.attention { border-color: #e6b7b0; background: #fff9f7; }
.scheduling-readiness-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f0d7d2; }
.scheduling-readiness-head > svg { width: 20px; flex: 0 0 auto; color: var(--red); }
.scheduling-readiness-head strong, .scheduling-readiness-head p { display: block; margin: 0; }
.scheduling-readiness-head p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.scheduling-readiness ul { margin: 0; padding: 0; list-style: none; }
.scheduling-readiness > ul > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding: 14px 16px; border-top: 1px solid #f3dfdb; }
.scheduling-readiness li:first-child { border-top: 0; }
.scheduling-readiness li svg { width: 17px; color: var(--red); }
.scheduling-readiness li strong, .scheduling-readiness li small { display: block; }
.scheduling-readiness li strong { font-size: 12px; }
.scheduling-readiness li small { margin-top: 2px; color: var(--muted); }
.scheduling-issue-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.scheduling-issue-copy .button { margin-top: 10px; }
.scheduling-fix-steps { margin: 8px 0 0; padding-left: 18px; color: var(--ink); font-size: 12px; line-height: 1.55; }
.scheduling-fix-steps li { display: list-item; padding: 0; border: 0; }
.booking-setup-modal { display: grid; gap: 16px; }
.booking-setup-summary { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #d5d9ff; border-radius: 9px; background: #eef0ff; }
.booking-setup-summary.attention { border-color: #e5b5ad; background: #fff7f5; }
.booking-setup-summary > svg { width: 21px; flex: 0 0 auto; color: var(--cyan-dark); }
.booking-setup-summary.attention > svg { color: var(--red); }
.booking-setup-summary strong, .booking-setup-summary p { display: block; margin: 0; }
.booking-setup-summary p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.booking-workflow-grid { display: grid; gap: 10px; }
.booking-workflow-card { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.booking-workflow-card:hover, .booking-workflow-card:focus-visible { border-color: var(--cyan-dark); background: #eef0ff; outline: none; }
.booking-workflow-card > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #eef0ff; color: var(--cyan-dark); }
.booking-workflow-card > span svg, .booking-workflow-card > svg { width: 19px; }
.booking-workflow-card > svg { color: var(--muted); }
.booking-workflow-card small, .booking-workflow-card strong, .booking-workflow-card p, .booking-workflow-card em { display: block; margin: 0; }
.booking-workflow-card small { color: var(--cyan-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.booking-workflow-card strong { margin-top: 2px; }
.booking-workflow-card p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.booking-workflow-card em { margin-top: 5px; color: var(--ink-2); font-size: 12px; font-style: normal; font-weight: 700; }
.admin-info.compact { margin: 0; }
.service-capacity-field[hidden], .service-staff-field[hidden], .staff-booking-resource-field[hidden] { display: none !important; }
.field .optional { color: var(--muted); font-size: 12px; font-weight: 500; }
@media (max-width: 520px) { .scheduling-concept-grid { grid-template-columns: 1fr; } .schedule-days-header, .schedule-copy { align-items: flex-start; flex-direction: column; } .schedule-day { grid-template-columns: 62px minmax(0, 1fr) 15px minmax(0, 1fr); gap: 4px; padding: 6px; } .schedule-day input[type="time"] { font-size: 12px; padding: 4px; } }
@media (max-width: 520px) { .staff-booking-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .team-section-heading { align-items: flex-start; flex-direction: column; }
  .booking-workflow-card { grid-template-columns: 36px minmax(0, 1fr) 16px; padding: 12px; }
  .booking-workflow-card > span { width: 36px; height: 36px; }
  .calendar-inline-form { align-items: stretch; flex-direction: column; }
  .calendar-inline-form label, .calendar-inline-form input, .calendar-inline-form select, .calendar-inline-form .button { width: 100%; }
}
.profile-menu { position: fixed; z-index: 50; left: 16px; bottom: 74px; width: 204px; padding: 6px; border: 1px solid #3a4441; border-radius: 7px; background: #202825; color: white; box-shadow: 0 13px 40px rgba(0,0,0,.25); }
.profile-menu button { width: 100%; min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 4px; background: transparent; color: #c2cac7; cursor: pointer; text-align: left; font-size: 12px; }
.profile-menu button:hover { background: #2b3532; color: white; }
.profile-menu .danger-text { color: #ff8a78; }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; }
dialog .toast-region { z-index: 1000; }
.toast { min-width: 260px; padding: 13px 15px; border-radius: 6px; background: var(--ink); color: white; box-shadow: 0 12px 35px rgba(16,22,21,.2); font-size: 12px; animation: toast-in .2s ease; }
.widget-preview { min-height: 510px; position: relative; padding: 28px; background: #e8ece7; }
.widget-demo-site { max-width: 360px; padding: 35px 15px; }
.widget-demo-site > span { color: var(--cyan-dark); font-size: 12px; letter-spacing: .12em; font-weight: 700; }
.widget-demo-site h3 { margin: 6px 0; font: 700 28px var(--display); }
.widget-demo-site p { color: var(--muted); }
.demo-widget { width: min(310px, calc(100% - 30px)); position: absolute; right: 22px; bottom: 22px; padding: 17px; border-radius: 8px; background: var(--ink); color: white; box-shadow: 0 22px 55px rgba(13,19,17,.25); }
.demo-widget-head { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; }
.demo-widget-head strong, .demo-widget-head small { display: block; }
.demo-widget-head small { color: #737b86; font-size: 12px; }
.demo-message { margin: 16px 0; padding: 12px; border-radius: 6px 6px 6px 0; background: #27312e; color: #d8dfdc; font-size: 12px; }
.demo-call-state { padding: 13px 0; display: grid; justify-items: center; border-top: 1px solid #2a3240; }
.demo-call-state span { font: 700 25px var(--display); }
.demo-call-state small, .widget-disclaimer { color: #7f8b87; font-size: 12px; }
.widget-disclaimer { margin: 9px 0 0; text-align: center; }
.chart-empty { min-height: 255px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.chart-empty svg { width: 30px; height: 30px; color: var(--cyan-dark); }
.chart-empty strong { color: var(--ink); font-size: 12px; }
.chart-empty span, .empty-inline { color: var(--muted); font-size: 12px; }
.empty-inline { padding: 28px 20px; text-align: center; }

/* Workspace voice preview: the website widget's own interface (widget/core.js,
   preview mode) in the portal dialog, so the preview and websites look alike. */
dialog[open].is-voice-preview {
  width: min(1320px, calc(100% - 40px));
  max-width: none;
  height: min(900px, calc(100vh - 40px));
  height: min(900px, calc(100dvh - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  border-radius: 16px;
  background: #f6f5f0;
  transition: width .25s ease, height .25s ease;
}
dialog[open].is-voice-preview.preview-expanded { width: calc(100% - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; }
.preview-widget-host { display: block; width: 100%; height: 100%; }
dialog.is-voice-preview:focus, dialog.is-voice-preview:focus-visible { outline: none; }

/* Widget designer: settings on the left, the real widget on a sample page on the right. */
dialog[open].is-widget-designer {
  width: min(1480px, calc(100% - 32px));
  max-width: none;
  height: min(960px, calc(100vh - 32px));
  height: min(960px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.designer-header { gap: 16px; }
.designer-header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.designer-status { max-width: 520px; overflow: hidden; color: var(--muted); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.designer-status[data-tone="live"] { color: #0b7a55; }
.designer-status[data-tone="draft"] { color: #8a5a0a; }
.designer-status[data-tone="error"] { color: #b42318; white-space: normal; }
.designer { min-height: 0; display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); }
.designer-controls { min-height: 0; overflow-y: auto; padding: 4px 20px 28px; border-right: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; }
.designer-controls [hidden] { display: none !important; }
.designer-section { border-bottom: 1px solid var(--line); }
.designer-section > summary { padding: 15px 2px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.designer-section > summary::-webkit-details-marker { display: none; }
.designer-section > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.designer-section[open] > summary::after { transform: rotate(-135deg); }
.designer-section > summary svg { width: 17px; height: 17px; color: var(--cyan-dark); }
.designer-section-body { padding: 0 2px 20px; display: grid; gap: 16px; }
.designer-field { display: grid; gap: 7px; font-size: 13px; }
.designer-field > span { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-weight: 700; }
.designer-field output { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.designer-field small, .designer-toggle small, .designer-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.designer-field input[type="text"], .designer-field select, .designer-field textarea { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #d6d0c4; border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; outline: none; }
.designer-field textarea { min-height: 64px; resize: vertical; }
.designer-field input:focus, .designer-field select:focus, .designer-field textarea:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(62, 80, 238,.12); }
.designer-field input[type="range"] { width: 100%; accent-color: var(--cyan-dark); }
.designer-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12px !important; }
.designer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.designer-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.designer-choice label { position: relative; cursor: pointer; }
.designer-choice input { position: absolute; opacity: 0; pointer-events: none; }
.designer-choice span { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #d6d0c4; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; }
.designer-choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.designer-choice input:focus-visible + span { outline: 3px solid rgba(62, 80, 238,.35); outline-offset: 1px; }
.designer-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.designer-preset { padding: 7px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.designer-preset i { height: 22px; display: flex; overflow: hidden; border-radius: 6px; }
.designer-preset b { flex: 1; }
.designer-preset[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.designer-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.designer-color { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.designer-color input { flex: none; width: 34px; height: 34px; padding: 2px; border: 1px solid #d6d0c4; border-radius: 8px; background: var(--surface); cursor: pointer; }
.designer-color span { min-width: 0; display: grid; }
.designer-color small { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.designer-more > summary { color: var(--cyan-dark); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.designer-more[open] > summary { margin-bottom: 10px; }
.designer-inline-action { justify-self: start; }
.designer-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.designer-toggle input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cyan-dark); }
.designer-toggle span { display: grid; gap: 2px; font-size: 13px; }
.designer-image > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.designer-image img, .designer-image-empty { width: 44px; height: 44px; display: grid; place-items: center; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; color: var(--muted); }
.designer-versions { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.designer-versions li { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; }
.designer-versions li span { display: grid; gap: 2px; font-size: 13px; }
.designer-versions small { color: var(--muted); font-size: 12px; }
.designer-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #e9ece7; }
.designer-toolbar { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.designer-segment { padding: 3px; display: inline-flex; gap: 2px; border: 1px solid #d3d8d2; border-radius: 10px; background: #fbfaf7; }
.designer-segment button { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.designer-segment button svg { width: 15px; height: 15px; }
.designer-segment button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.designer-canvas { position: relative; min-height: 0; margin: 0 16px; overflow: hidden; border-radius: 14px; background: #dfe3dd; }
.designer-canvas iframe { position: absolute; top: 0; left: 0; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 18px 50px -18px rgba(12,18,16,.45); transform-origin: top left; }
.designer-canvas[data-device="mobile"] iframe { border-radius: 28px; box-shadow: 0 0 0 8px #1d2321, 0 24px 60px -16px rgba(12,18,16,.5); }
.designer-warnings { padding: 10px 16px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.designer-warning, .designer-ok { padding: 6px 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.designer-warning { background: #fff4e5; color: #8a4b0a; }
.designer-ok { background: #e6f6ee; color: #0b6b4a; }
.designer-warning svg, .designer-ok svg { width: 15px; height: 15px; flex: none; }
.designer-footer { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.designer-links, .designer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.widget-look strong { display: inline; }
@media (max-width: 900px) {
  dialog[open].is-widget-designer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .designer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(320px, 46%); }
  .designer-controls { order: 2; border-right: 0; border-top: 1px solid var(--line); }
  .designer-status { display: none; }
  .designer-segment button span { display: none; }
}
@media (max-width: 760px) {
  dialog[open].is-voice-preview { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
}
.reservations-panel { margin-top: 18px; }
.reservation-list { display: grid; }
.reservation-row { padding: 16px 20px; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(180px, auto) auto; gap: 14px; align-items: center; border-top: 1px solid var(--line); }
.reservation-row:first-child { border-top: 0; }
.reservation-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--cyan-dark); }
.reservation-icon svg { width: 18px; }
.reservation-main, .reservation-time { min-width: 0; display: grid; gap: 3px; }
.reservation-main small, .reservation-time small, .reservation-main p { margin: 0; color: var(--muted); font-size: 12px; }
.reservation-main p { overflow-wrap: anywhere; }
.reservation-filters, .reservation-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.reservation-operational { grid-template-columns: 42px minmax(210px, 1fr) minmax(230px, .9fr) minmax(300px, 1.05fr); align-items: start; padding-top: 20px; padding-bottom: 18px; }
.reservation-operational > .reservation-icon { margin-top: 2px; }
.reservation-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reservation-title-line > strong { font-size: 14px; }
.reservation-title-line .pill { padding: 4px 7px; font-size: 12px; }
.reservation-service { color: var(--ink-2); font-size: 12px; font-weight: 700; }
.reservation-notes { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.reservation-notes .reservation-section-label { display: inline-flex; align-items: center; gap: 5px; }
.reservation-notes .reservation-section-label svg { width: 12px; height: 12px; }
.reservation-notes p { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.reservation-section-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reservation-booking-time > strong { margin-top: 2px; font-size: 13px; line-height: 1.35; }
.reservation-health { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reservation-health-item { min-width: 0; padding: 9px 10px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.reservation-health-item > svg { width: 17px; color: var(--cyan-dark); }
.reservation-health-item > span { min-width: 0; display: grid; gap: 1px; }
.reservation-health-item small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.reservation-health-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reservation-health-item em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.25; }
.reservation-health-item.attention { border-color: #e6b7b0; background: #fff7f5; }
.reservation-health-item.attention > svg, .reservation-health-item.attention strong { color: var(--red); }
.reservation-health-item.pending { border-color: #e4d8aa; background: #fffbee; }
.reservation-operational-actions { grid-column: 2 / -1; padding-top: 13px; border-top: 1px solid var(--line); justify-content: flex-start; }
.reservation-operational-actions .button { white-space: nowrap; }
.follow-up-panel { margin-top: 18px; overflow: hidden; }
.follow-up-queue-count { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 12px; font-weight: 800; }
.follow-up-list { display: grid; }
.follow-up-row { position: relative; padding: 19px 22px; display: grid; grid-template-columns: 42px minmax(260px, 1fr) minmax(300px, .72fr); gap: 15px; align-items: start; border-top: 1px solid var(--line); transition: background-color .16s ease; }
.follow-up-row:first-child { border-top: 0; }
.follow-up-row:hover { background: #fbfaf7; }
.follow-up-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.follow-up-row.follow-up-open::before { background: #d5a640; }
.follow-up-row.follow-up-in_progress::before { background: var(--cyan-dark); }
.follow-up-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--cyan-dark); background: #eef0ff; }
.follow-up-icon svg { width: 19px; }
.follow-up-resolved .follow-up-icon { color: #16845b; background: #e7f5ee; }
.follow-up-main { min-width: 0; display: grid; gap: 5px; }
.follow-up-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.follow-up-title > strong { font-size: 14px; }
.follow-up-contact { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.follow-up-main > p { max-width: 720px; margin: 4px 0 2px; color: var(--ink-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.follow-up-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.follow-up-tags span { padding: 4px 7px; border-radius: 4px; color: var(--muted); background: var(--surface-2); font-size: 12px; font-weight: 700; text-transform: capitalize; }
.follow-up-side { min-width: 0; display: grid; justify-items: end; gap: 13px; }
.follow-up-captured { display: grid; justify-items: end; gap: 2px; text-align: right; }
.follow-up-captured span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.follow-up-captured strong { color: var(--ink-2); font-size: 12px; font-weight: 650; }
.follow-up-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.follow-up-actions .button { white-space: nowrap; }
.customer-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr); gap: 18px; align-items: start; }
.customer-list { display: grid; }
.customer-row { width: 100%; padding: 15px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.customer-row:first-child { border-top: 0; }
.customer-row:hover, .customer-row.active { background: var(--surface-2); }
.customer-row-main { min-width: 0; display: grid; gap: 3px; }
.customer-row small { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.customer-row-updated { font-size: 12px; }
.customer-row > svg { width: 16px; color: var(--muted); }
.customer-detail { min-height: 360px; }
.customer-import-note { margin: 0 20px 12px; }
.customer-detail-tabs { padding: 0 20px; display: flex; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customer-detail-tabs button { padding: 12px 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.customer-detail-tabs button.active { border-color: var(--cyan-dark); color: var(--ink); font-weight: 700; }
.customer-outcomes, .customer-timeline { padding: 18px 20px; border-top: 1px solid var(--line); }
.customer-outcomes h3, .customer-timeline h3 { margin: 0 0 12px; font-size: 13px; }
.customer-outcomes article { padding: 11px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.customer-outcomes article:first-of-type { border-top: 0; }
.customer-outcomes article > span:first-child { color: var(--cyan-dark); }
.customer-outcomes article svg { width: 17px; }
.customer-outcomes article div { display: grid; gap: 2px; }
.customer-outcomes small, .customer-timeline small { color: var(--muted); }
.customer-timeline ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.customer-timeline li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; }
.customer-timeline li > i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--cyan); }
.customer-timeline li div { display: grid; gap: 2px; }
.copy-field { display: flex; gap: 8px; }
.copy-field input { min-width: 0; flex: 1; }
.public-booking-page { min-height: 100vh; padding: 32px 18px; display: grid; place-items: center; background: radial-gradient(circle at top, #eef0ff, #f7f7f2 55%); }
.public-booking-card { width: min(620px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 22px 70px rgba(13, 42, 36, .12); }
.public-booking-card h1 { margin: 7px 0 12px; font: 700 30px var(--display); }
.public-booking-card > p { color: var(--muted); }
.public-booking-time { margin: 22px 0; padding: 18px; display: grid; gap: 5px; border: 1px solid var(--line); background: var(--surface-2); }
.public-booking-time strong { font: 700 19px var(--display); }
.public-booking-time span, .public-booking-time small, .public-booking-action > p { color: var(--muted); }
.public-booking-action { margin-top: 18px; padding-top: 18px; display: grid; gap: 13px; border-top: 1px solid var(--line); }
.public-booking-action h2 { margin: 0; font: 700 17px var(--display); }
.activation-status { margin-bottom: 22px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.activation-status-main { width: 100%; }
.activation-status-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.activation-status h2 { margin: 4px 0 8px; font: 700 24px var(--display); text-transform: capitalize; }
.activation-status p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.activation-lifecycle-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.production-plans { margin-bottom: 18px; }
.activation-domains code { padding: 2px 4px; border: 1px solid #dce2dd; border-radius: 3px; background: #fbfaf7; color: #33514b; font-size: 12px; word-break: break-all; }
.drilldown-count { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.drilldown-list { border: 1px solid var(--line); }
.drilldown-row { min-height: 58px; padding: 11px 14px; display: grid; grid-template-columns: minmax(160px, 1fr) auto auto 50px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.drilldown-row:last-child { border-bottom: 0; }
.drilldown-row strong, .drilldown-row small { display: block; }
.drilldown-row small, .drilldown-row > span { margin-top: 3px; color: var(--muted); font-size: 12px; }
@keyframes voice-pulse { 0% { transform: scale(.58); opacity: .8; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes voice-bar { from { height: 8px; opacity: .45; } to { height: 42px; opacity: 1; } }
@keyframes transcript-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state svg { width: 32px; height: 32px; color: var(--cyan-dark); }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .distribution-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .sidebar { padding-top: 18px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .sidebar .brand { padding-bottom: 18px; }
  .nav-label { margin-top: 17px; }
  .side-bottom { margin-top: 7px; }
  .help-panel { display: none; }
  .profile-button { padding-block: 8px; }
}
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 35px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .main-shell { grid-column: 1; max-width: 100vw; }
  .menu-toggle { display: grid; }
  .status-badge { display: none; }
  .call-layout { grid-template-columns: 1fr; }
  .call-detail { position: static; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav button { white-space: nowrap; }
  .template-grid { grid-template-columns: 1fr; }
  .website-import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-card { min-height: 135px; }
  .trial-banner { grid-template-columns: 1fr; }
  .provisioning-panel { grid-template-columns: 1fr; }
  .provisioning-steps { border-top: 1px solid #2a3240; border-left: 0; }
  .credit-dial { justify-items: start; text-align: left; }
  .knowledge-summary { grid-template-columns: 1fr 1fr; }
  .knowledge-conflict-candidates { grid-template-columns: 1fr; }
  .oauth-provider-grid { grid-template-columns: 1fr; }
  .scenario-actions { justify-content: flex-start; }
  .knowledge-section-head { align-items: flex-start; flex-direction: column; }
  .business-context-intro { align-items: flex-start; flex-direction: column; }
  .calendar-provider-heading { align-items: flex-start; flex-direction: column; }
  .business-context-topics { justify-content: flex-start; }
  .phone-setup-options { grid-template-columns: 1fr; }
  .knowledge-organized-meta { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .auth-panel { padding: 25px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .content { padding-top: 24px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; }
  .dashboard-error { align-items: flex-start; flex-wrap: wrap; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .phone-setup-options { padding: 14px; }
  .phone-setup-option { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; }
  .phone-setup-option-icon { width: 34px; height: 34px; }
  .phone-setup-record-head { align-items: flex-start; flex-direction: column; }
  .business-context-form { padding: 14px; }
  .business-context-form textarea { min-height: 210px; }
  .business-context-footer { align-items: stretch; flex-direction: column; }
  .business-context-footer .button { width: 100%; }
  .toolbar { flex-direction: column; }
  .toolbar-actions { justify-content: flex-end; }
  .top-actions .button { font-size: 0; width: 39px; padding: 0; }
  .top-actions .button svg { margin: 0; }
  .onboarding-header { grid-template-columns: 1fr auto; }
  .onboarding-header > span, .onboarding-header > .onboarding-credit { display: none; }
  .onboarding-progress label { display: none; }
  .onboarding-stage { margin-top: 30px; }
  .profile-step-copy { margin-bottom: 22px; }
  .profile-step-copy h1 { font-size: 32px; }
  .profile-confirm-card { padding: 16px; border-radius: 11px; }
  .detected-profile { padding: 16px; }
  .detected-profile-head { grid-template-columns: 40px minmax(0, 1fr); }
  .detected-profile-icon { width: 40px; height: 40px; }
  .confidence-badge { grid-column: 2; width: fit-content; }
  .intent-list { margin-left: 0; }
  .profile-fields { grid-template-columns: 1fr; gap: 20px; }
  .profile-confirm-card .step-actions { align-items: stretch; flex-direction: column-reverse; }
  .profile-confirm-card .step-actions .button { width: 100%; }
  .onboarding-business-card { gap: 20px; padding: 20px; }
  .website-first-copy { margin-bottom: 22px; }
  .website-first-copy p { font-size: 13px; }
  .website-first-card { gap: 18px; }
  .website-first-options { grid-template-columns: 1fr; gap: 16px; }
  .website-first-card .onboarding-authorization { padding: 12px; }
  .onboarding-more-context summary { padding: 13px; }
  .onboarding-business-card .field-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .onboarding-business-card .field-heading > small { text-align: left; }
  .website-import-grid { grid-template-columns: 1fr; }
  .website-import-grid .choice-card { min-height: 132px; }
  .onboarding-business-card .step-actions .button-primary { width: 100%; }
  .voice-grid, .review-grid { grid-template-columns: 1fr; }
  .review-grid div { border-right: 0; }
  .review-grid div:nth-child(3) { border-bottom: 1px solid var(--line); }
  .knowledge-summary { grid-template-columns: 1fr; }
  .knowledge-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge-summary > div:last-child { border-bottom: 0; }
  .knowledge-library-section > summary { grid-template-columns: 34px minmax(0, 1fr) auto 16px; padding: 13px 15px; }
  .knowledge-source-row { grid-template-columns: 38px minmax(0, 1fr); align-items: flex-start; gap: 12px; }
  .knowledge-source-row > .pill { grid-column: 2; width: fit-content; margin-top: 4px; }
  .knowledge-source-actions { grid-column: 2; margin-top: 6px; justify-content: flex-start; }
  .knowledge-item { grid-template-columns: 1fr; }
  .knowledge-conflict-candidate { align-items: flex-start; flex-direction: column; }
  .knowledge-org-picker { width: 100%; }
  .tool-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .tool-row > .button, .tool-row > span:last-child, .tool-row > strong:last-child { grid-column: 2 / -1; width: fit-content; }
  .tool-row > .tool-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .provisioning-copy { padding: 25px 20px; }
  .provisioning-summary { align-items: flex-start; gap: 16px; }
  .provisioning-progress-ring { width: 88px; height: 88px; flex-basis: 88px; }
  .provisioning-progress-ring::before { inset: 6px; }
  .provisioning-ring-value { font-size: 19px; }
  .provisioning-steps li { padding: 11px 20px; }
  .provisioning-diagnostic { align-items: flex-start; flex-wrap: wrap; }
  .provisioning-diagnostic .button { margin-left: 0; }
  .activation-status { padding: 20px; }
  .activation-status-header { flex-direction: column-reverse; gap: 10px; }
  .drilldown-row { grid-template-columns: minmax(130px, 1fr) auto; }
  .drilldown-row > span:nth-child(3) { grid-column: 1; }
  .signup-benefits { grid-template-columns: 1fr; }
  .approval-list article { align-items: flex-start; flex-direction: column; }
  .credit-balance-grid { grid-template-columns: 1fr 1fr; }
  .credit-balance-grid > div:nth-child(2) { border-right: 0; }
  .credit-balance-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .credit-history-list article { align-items: start; }
  .reservation-row { grid-template-columns: 38px minmax(0, 1fr); }
  .reservation-time, .reservation-row > .pill { grid-column: 2; }
  .reservation-actions { grid-column: 2; justify-content: flex-start; }
  .reservation-operational { grid-template-columns: 38px minmax(0, 1fr); }
  .reservation-operational .reservation-health, .reservation-operational-actions { grid-column: 2; }
  .reservation-operational .reservation-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reservation-filters { margin-top: 10px; justify-content: flex-start; }
  .follow-up-row { grid-template-columns: 40px minmax(0, 1fr); padding: 17px 18px; }
  .follow-up-side { grid-column: 2; justify-items: start; }
  .follow-up-captured { justify-items: start; text-align: left; }
  .follow-up-actions { justify-content: flex-start; }
  .customer-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .route-progress span, .loader-mark i, .button-loader, .content, .onboarding-stage, .auth-copy, .provisioning-live i, .step-spinner, .provisioning-ring-orbit, .provisioning-task-track.indeterminate span, .step-wave i { animation: none; }
  .provisioning-ring-orbit { opacity: .55; }
  .provisioning-task-track.indeterminate span { width: 42%; transform: none; }
  .route-progress span { width: 100%; transform: none; }
}
.deployment-code { display: flex; gap: 10px; align-items: center; margin-top: 10px; max-width: 760px; }
.deployment-code code { display: block; flex: 1; max-height: 88px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.deployment-row { align-items: start; }
.widget-hosts { max-width: 760px; margin-top: 10px; padding: 9px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; color: var(--ink-2); font-size: 13px; }
.widget-hosts > svg { flex: none; width: 16px; height: 16px; color: var(--cyan-dark); }
.widget-hosts > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.widget-hosts strong { display: inline; }
.widget-access-options { display: grid; gap: 8px; margin-bottom: 14px; }
.widget-access-options .consent-check { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.widget-access-options .consent-check:has(input:checked) { border-color: var(--cyan-dark); background: #eef0ff; }
.widget-access-options strong { display: block; color: var(--ink); font-size: 14px; }
.widget-access-options small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.widget-hosts.needs-host { border-color: #f1d2a8; background: #fff8ec; color: #7a4b0c; }
.widget-hosts.needs-host > svg { color: #b7791f; }
.inventory-number-list { display: grid; gap: 8px; margin-top: 16px; }
.inventory-number-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); }
.inventory-number-row div { min-width: 0; }
.inventory-number-row strong, .inventory-number-row small { display: block; }
.suppression-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.suppression-strip > strong { margin-right: 4px; }
.suppression-strip > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #efd2cf; background: #fff6f4; color: #963d35; }
.suppression-strip button { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.suppression-strip button svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .inventory-number-row { align-items: stretch; flex-direction: column; } .inventory-number-row .button { width: 100%; } }

.enterprise-gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--line); background: var(--surface); }
.enterprise-gates > div { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 16px; border-right: 1px solid var(--line); }
.enterprise-gates > div:last-child { border-right: 0; }
.enterprise-gates span > strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 12px; }
.enterprise-gates span:not(.gate-icon) { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.gate-icon, .section-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.gate-icon.ready { border-color: #afd8c5; background: #e8f6ef; color: #16845b; }
.gate-icon svg, .section-icon svg { width: 16px; height: 16px; }
.enterprise-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.enterprise-section { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.enterprise-section.enterprise-wide { grid-column: 1 / -1; }
.enterprise-section-head { min-height: 70px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.enterprise-section-head > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.enterprise-section-head h2 { margin: 0; font: 700 15px var(--display); }
.enterprise-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.enterprise-form { padding: 18px; }
.enterprise-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.enterprise-form .form-actions { margin-top: 16px; padding-top: 16px; }
.retention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.number-suffix { position: relative; }
.number-suffix input { padding-right: 52px; }
.number-suffix span { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.enterprise-actionbar { min-height: 55px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: var(--surface-2); }
.enterprise-actionbar > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.enterprise-actionbar svg { width: 14px; height: 14px; }
.enterprise-list { display: grid; }
.enterprise-list article { min-width: 0; min-height: 64px; padding: 10px 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.enterprise-list article:last-child { border-bottom: 0; }
.enterprise-list article > div:nth-child(2) { min-width: 0; }
.enterprise-list strong, .enterprise-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enterprise-list strong { font-size: 12px; text-transform: capitalize; }
.enterprise-list small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.enterprise-list .inline-actions { display: flex; gap: 5px; }
.knowledge-empty.compact { min-height: 120px; }
.pill.approved, .pill.verified, .pill.downloaded { background: #e7f5ee; color: #16845b; }
.pill.submitted, .pill.under_review, .pill.provisioning { background: #fff3d8; color: #956716; }
.pill.rejected, .pill.expired { background: #fbe7e4; color: #a7483d; }

@media (max-width: 1050px) {
  .enterprise-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enterprise-gates > div:nth-child(2) { border-right: 0; }
  .enterprise-gates > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .retention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1500px) {
  .client-card-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .client-card-detail:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .clients-toolbar { align-items: stretch; flex-direction: column; }
  .clients-toolbar .search { width: 100%; }
  .clients-toolbar .toolbar-actions { justify-content: space-between; }
  .enterprise-layout { grid-template-columns: 1fr; }
  .enterprise-section.enterprise-wide { grid-column: auto; }
  .enterprise-list article { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .enterprise-list article > .button, .enterprise-list article > .inline-actions { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .client-card-header, .client-card-details { padding: 18px; }
  .client-card-header { align-items: flex-start; }
  .client-card-details { grid-template-columns: 1fr; gap: 16px; }
  .client-card-detail + .client-card-detail { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .client-card-actions { padding: 14px 18px; align-items: stretch; flex-direction: column; }
  .client-card-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-card-actions .button { min-width: 0; white-space: normal; }
  .enterprise-gates { grid-template-columns: 1fr; }
  .enterprise-gates > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .enterprise-gates > div:last-child { border-bottom: 0; }
  .retention-grid { grid-template-columns: 1fr; }
  .enterprise-section-head, .enterprise-actionbar { align-items: flex-start; flex-direction: column; }
  .enterprise-actionbar .button { width: 100%; }
}
@media (max-width: 380px) {
  .client-card-header { flex-direction: column; }
  .client-card-header > .pill { margin: 0 0 0 62px; }
}
.release-panel{margin:18px 0}.release-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px}.release-control-grid>label{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;cursor:pointer}.release-control-grid input{width:auto}.release-control-grid label span{display:flex;flex-direction:column}.release-control-grid small{color:var(--muted)}.release-revision{padding:0 18px}.release-validation{margin:0 18px 18px;padding:14px;border-radius:12px;background:var(--surface-soft,#f8fafc)}.release-validation small,.release-validation p{display:block;margin-top:4px;color:var(--muted)}.release-panel .form-actions{padding:0 18px 18px}@media(max-width:800px){.release-control-grid{grid-template-columns:1fr 1fr}}
#crawl-diff-items details { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
#crawl-details-form .form-stack { gap: 12px; }
#crawl-details-form .form-stack > p, #crawl-details-form h3 { margin: 0; }
#crawl-diff-items summary { cursor: pointer; font-weight: 600; }
#crawl-diff-items pre { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.settings-grid:has(#settings-voice-form) { grid-template-columns: 186px minmax(0, 1fr); max-width: 1370px; gap: 28px; align-items: start; }
#settings-voice-form { min-width: 0; padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 16px 48px rgba(16, 29, 25, .045); }
.voice-page-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #f4faf8, #fff 66%); }
.voice-page-intro h2 { margin: 7px 0 7px; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; line-height: 1.15; }
.voice-page-intro p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.voice-current { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 180px; padding: 11px 15px 11px 11px; border: 1px solid #cce5da; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(19, 92, 72, .05); }
.voice-current-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #dff3e8; color: #17654d; font-weight: 800; }
.voice-current small, .voice-current strong { display: block; }
.voice-current small { margin-bottom: 2px; color: #568170; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.voice-current strong { font-size: 14px; }
.voice-settings-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(285px, .85fr); gap: 20px; align-items: start; padding: 26px; }
.voice-library-panel, .voice-tuning { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.voice-library-panel { overflow: hidden; }
.voice-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 17px; }
.voice-panel-heading > div { display: flex; align-items: flex-start; gap: 12px; }
.voice-panel-heading h3 { margin: 1px 0 4px; font-size: 17px; letter-spacing: -.02em; }
.voice-panel-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.voice-panel-heading > small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.voice-step { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #eef0ff; color: var(--cyan-dark); font-size: 12px; font-weight: 800; }
.settings-voice-loading { min-height: 160px; }
.voice-library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; padding: 0 22px 14px; }
.voice-library-toolbar select, .voice-search { min-width: 0; width: 100%; min-height: 42px; border: 1px solid #d8dfdb; border-radius: 8px; background: #fbfaf7; font-size: 12px; }
.voice-search { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.voice-search svg { width: 16px; flex: 0 0 auto; color: #6a7a75; }
.voice-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
.voice-library-toolbar select { padding: 0 10px; }
.voice-search:focus-within, .voice-library-toolbar select:focus-visible { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.voice-library-tabs { display: flex; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.voice-library-tabs button { padding: 11px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.voice-library-tabs button.active { color: #2f3fd0; border-bottom-color: #2f3fd0; }
.voice-library-list { max-height: 590px; min-height: 250px; overflow: auto; padding: 7px 12px 12px; }
.voice-library-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 10px; border: 1px solid transparent; border-radius: 9px; transition: background .15s ease, border-color .15s ease; }
.voice-library-row + .voice-library-row { margin-top: 3px; }
.voice-library-row:hover { background: #fbfaf7; }
.voice-library-row.selected { border-color: #d5d9ff; background: #eef0ff; }
.voice-library-row .voice-select { flex: 1 1 auto; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.voice-library-row .voice-avatar { width: 44px; height: 44px; background: #101722; color: #c9e66b; font-size: 15px; }
.voice-library-row.selected .voice-avatar { background: #2f3fd0; color: #fff; }
.voice-row-copy { min-width: 0; }
.voice-row-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.voice-row-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.voice-row-title em { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; background: #d8f0e8; color: #196549; font-size: 12px; font-style: normal; font-weight: 800; }
.voice-row-copy small { display: block; overflow: hidden; margin-top: 3px; color: #66736e; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.voice-library-row:focus-within { outline: 2px solid var(--cyan-dark); outline-offset: -2px; }
.voice-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.voice-row-actions button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #dae3de; border-radius: 8px; background: #fff; color: #31443e; cursor: pointer; }
.voice-row-actions button:hover { border-color: #a9b2f5; background: #eaf7f3; }
.voice-row-actions svg { width: 15px; height: 15px; }
.voice-tuning { position: sticky; top: 16px; padding-bottom: 16px; background: #fbfaf7; }
.voice-tuning .voice-panel-heading { padding-bottom: 21px; }
.voice-tuning-control { margin: 0 22px 22px; }
.voice-tuning-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.voice-tuning-label label { font-size: 12px; font-weight: 750; }
.voice-tuning-label output { padding: 5px 8px; border-radius: 6px; background: #e8f3f0; color: #2f3fd0; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.voice-tuning input[type="range"] { width: 100%; margin: 0; accent-color: #2f3fd0; }
.voice-range-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 12px; }
.voice-beta { padding: 4px 7px; border-radius: 5px; background: #ecf0ed; color: #62716a; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.voice-tuning-control select { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #d8dfdb; border-radius: 8px; background: #fff; font-size: 12px; }
.voice-tuning-control small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.audio-policy { display: flex; align-items: flex-start; gap: 10px; margin: 3px 22px 16px; padding: 13px; border: 1px solid #d5eae1; border-radius: 9px; background: #edf8f3; }
.audio-policy svg { width: 17px; flex: 0 0 auto; color: #2f3fd0; }
.audio-policy strong { display: block; font-size: 12px; line-height: 1.35; }
.audio-policy small { display: block; margin-top: 4px; color: #59756a; font-size: 12px; line-height: 1.45; }
.voice-reset { display: block; margin: 0 22px 0 auto; padding: 4px 0; border: 0; background: none; color: #2f3fd0; font-size: 12px; font-weight: 700; cursor: pointer; }
.voice-reset:hover { text-decoration: underline; }
.voice-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-top: 1px solid var(--line); background: #fbfaf7; }
.voice-save-bar span { color: var(--muted); font-size: 12px; }
.voice-save-bar .button { min-height: 40px; padding: 0 18px; }

@media (max-width: 1120px) {
  .settings-grid:has(#settings-voice-form) { grid-template-columns: 1fr; gap: 16px; }
  .settings-grid:has(#settings-voice-form) .settings-nav { display: flex; }
}
@media (max-width: 1000px) {
  .voice-settings-layout { grid-template-columns: 1fr; }
  .voice-tuning { position: static; }
}
@media (max-width: 760px) {
  .voice-page-intro { align-items: flex-start; flex-direction: column; padding: 23px; }
  .voice-settings-layout { padding: 16px; }
  .voice-save-bar { align-items: stretch; flex-direction: column; }
  .voice-save-bar .button { width: 100%; }
}
@media (max-width: 420px) {
  .voice-panel-heading { padding: 18px 16px 14px; }
  .voice-panel-heading > small { display: none; }
  .voice-library-toolbar { padding-right: 16px; padding-left: 16px; }
  .voice-library-tabs { padding: 0 16px; }
  .voice-row-actions button { width: 30px; height: 30px; }
  .voice-library-row .voice-avatar { width: 38px; height: 38px; }
  .voice-library-row .voice-select { grid-template-columns: 38px minmax(0, 1fr); gap: 9px; }
}
.promotion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 18px;
}

.promotion-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #ddd7cc);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 65%, rgba(18, 181, 193, .06));
  box-shadow: 0 12px 32px rgba(12, 28, 25, .045);
}

.promotion-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.promotion-card-top h3 { margin: 2px 0 0; font-size: 1.25rem; }
.promotion-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #2f3fd0; background: #eef0ff; }
.promotion-card > p { margin: 0; color: var(--muted, #65736d); line-height: 1.55; }
.promotion-meta { display: flex; flex-wrap: wrap; gap: 9px; }
.promotion-meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #fbfaf7; color: #52615b; font-size: .8125rem; }
.promotion-meta svg { width: 14px; height: 14px; }
.promotion-performance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 12px; background: #fbfaf7; }
.promotion-performance span { color: #718079; font-size: .8125rem; }
.promotion-performance strong { display: block; color: #14201c; font-size: 1.05rem; }
.promotion-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; }
.promotion-empty { grid-column: 1 / -1; min-height: 330px; }
.promotion-empty .button { margin-top: 14px; }
.promotion-channel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.promotion-channel-options label {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border, #ddd7cc);
  border-radius: 10px;
  background: #fbfaf7;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.promotion-channel-options label:hover { border-color: #8eb5ae; background: #eef0ff; }
.promotion-channel-options label:has(input:checked) { border-color: var(--cyan-dark); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--cyan-dark); }
.promotion-channel-options input[type="checkbox"],
.promotion-catalog-item input[type="checkbox"],
.promotion-launch-options input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--cyan-dark);
  box-shadow: none;
  cursor: pointer;
}
.promotion-launch { margin: 0; padding: 0; border: 0; }
.promotion-launch legend { margin-bottom: 8px; color: #1e2825; font-size: 12px; font-weight: 700; }
.promotion-launch-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.promotion-launch-options label { min-height: 74px; padding: 13px 14px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; cursor: pointer; }
.promotion-launch-options label:has(input:checked) { border-color: var(--cyan-dark); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--cyan-dark); }
.promotion-launch-options span, .promotion-launch-options strong, .promotion-launch-options small { display: block; }
.promotion-launch-options strong { color: var(--ink); font-size: 12px; }
.promotion-launch-options small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.promotion-catalog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 190px; overflow: auto; margin-top: 10px; padding: 3px; }
.promotion-catalog-item { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border, #ddd7cc); border-radius: 10px; cursor: pointer; }
.promotion-catalog-item:has(input:checked) { border-color: var(--cyan-dark); background: #eef0ff; }
.promotion-catalog-item span { min-width: 0; }
.promotion-catalog-item strong, .promotion-catalog-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promotion-catalog-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed #c9d5cf; border-radius: 10px; background: #fbfaf7; color: var(--muted); }
.promotion-catalog-empty > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cyan-dark); }
.promotion-catalog-empty span, .promotion-catalog-empty strong, .promotion-catalog-empty small { display: block; }
.promotion-catalog-empty strong { color: var(--ink); font-size: 12px; }
.promotion-catalog-empty small { margin-top: 2px; font-size: 12px; }

dialog:has(#promotion-form) { width: min(860px, calc(100% - 32px)); }
#promotion-form .modal-header { padding: 18px 24px; }
#promotion-form .modal-header h2 { font-size: 20px; }
#promotion-form .modal-body { padding: 22px 24px 28px; scroll-padding-top: 22px; }
#promotion-form .modal-body > .form-stack { gap: 18px; }
#promotion-form .field { min-width: 0; }
#promotion-form .field > label { color: #1e2825; font-size: 12px; letter-spacing: .01em; }
#promotion-form .field > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
#promotion-form .field input:not([type="checkbox"]),
#promotion-form .field select,
#promotion-form .field textarea { border-radius: 9px; background-color: #fff; }
#promotion-form .field textarea { min-height: 104px; }
#promotion-form .modal-footer { padding: 14px 24px; }
#promotion-form .modal-footer .button { min-width: 124px; }

@media (max-width: 720px) {
  .promotion-card-top { grid-template-columns: auto 1fr; }
  .promotion-card-top .pill { grid-column: 1 / -1; justify-self: start; }
  .promotion-catalog-list { grid-template-columns: 1fr; }
  dialog:has(#promotion-form) { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  #promotion-form { max-height: calc(100dvh - 20px); }
  #promotion-form .modal-header, #promotion-form .modal-body, #promotion-form .modal-footer { padding-left: 16px; padding-right: 16px; }
  #promotion-form .promotion-channel-options { grid-template-columns: 1fr; }
  #promotion-form .promotion-launch-options { grid-template-columns: 1fr; }
  #promotion-form .modal-footer .button { min-width: 0; flex: 1 1 0; }
}

@media (max-width: 480px) {
  dialog:has(#promotion-form) { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  #promotion-form { height: 100dvh; max-height: none; }
  #promotion-form .modal-header { align-items: flex-start; }
  #promotion-form .modal-subtitle { font-size: 12px; }
  #promotion-form .modal-body { padding-top: 18px; }
}

/* Greeting returning callers by name: settings and the customer page. */
.returning-callers { margin: 0; padding: 16px 18px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 10px; }
.returning-callers legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.returning-callers .consent-check span { display: grid; gap: 3px; }
.returning-callers .consent-check small, .returning-callers .field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.returning-callers q { color: var(--ink); font-weight: 600; }
.settings-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--cyan-dark); }
.customer-greeting { margin: 0 20px 14px; padding: 12px 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; }
.customer-greeting-summary { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
.customer-greeting-summary svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cyan-dark); }
.customer-greeting-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.customer-greeting-fields .field { flex: 1 1 180px; gap: 5px; }
.customer-greeting-fields .field input { min-height: 38px; }
.customer-greeting-fields .consent-check { min-height: 38px; align-items: center; }
.customer-duplicates { margin: 0 20px 14px; padding: 12px 14px; display: grid; gap: 8px; border: 1px solid #f1d9a8; border-radius: 10px; background: #fffaf0; }
.customer-duplicate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.customer-duplicate > span { flex: 1 1 180px; display: grid; gap: 2px; font-size: 13px; }
.customer-duplicate small { color: var(--muted); font-size: 12px; }
.autofill-readiness { margin-bottom: 20px; }
.autofill-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.autofill-status-grid p { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.autofill-field { padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); overflow-wrap: anywhere; }
.autofill-field dt { font-weight: 600; text-transform: capitalize; }
.autofill-field dd { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.autofill-field dd small { display: block; color: var(--muted); flex-basis: 100%; }
.autofill-action { padding: 10px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.autofill-readiness { padding: 20px; }
.autofill-panel { padding: 20px; }
.autofill-panel > .tool-row { display: block; padding: 18px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.autofill-panel > .tool-row > small { display: block; margin: 6px 0 12px; overflow-wrap: anywhere; }
.autofill-panel details { width: 100%; }
.autofill-panel blockquote { margin: 12px 0; padding-left: 12px; border-left: 2px solid #cdd8d0; overflow-wrap: anywhere; }
.autofill-field dd { display: block; }
.autofill-field dd small { margin: 8px 0; }
.autofill-field dd .button { margin: 4px 6px 4px 0; }
.discovered-location-card { min-height: 0; }
.discovered-location-card .location-details { min-height: 110px; }
.discovered-location-card .pill.needs-action { background: #fff3d9; color: #795514; }
.discovered-location-card .pill.draft { background: #e9f7f2; color: #2f3fd0; }
.discovered-location-issues { display: flex; align-items: flex-start; gap: 8px; margin: 0 20px; padding: 11px 12px; border: 1px solid #f1dcae; border-radius: 8px; background: #fffaf0; color: #795514; font-size: 12px; font-weight: 600; line-height: 1.4; }
.discovered-location-issues svg { width: 15px; height: 15px; flex: none; }
.discovered-location-card .location-card-footer .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-source-panel { margin-top: 20px; padding: 0; }
.location-source-panel > details > summary { padding: 17px 20px; cursor: pointer; font-weight: 700; }
.location-source-panel .location-source-rows { padding: 0 20px 16px; }
.location-source-panel .tool-row { display: block; padding: 16px 0; border-top: 1px solid var(--line); }
.location-source-panel .tool-row > small { display: block; overflow-wrap: anywhere; }
.team-record-card { min-height: 0; gap: 12px; padding: 20px; }
.team-record-card .location-card-top { margin: 0; }
.team-record-card h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.team-record-card .team-record-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.team-record-card .team-record-meta { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.team-record-card .team-record-meta span { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.team-record-card .team-record-meta strong { font-weight: 600; }
.team-record-card .team-record-issue { display: flex; align-items: center; gap: 6px; margin: 0; color: #795514; font-size: 12px; }
.team-record-card .team-record-issue svg { width: 14px; height: 14px; }
.team-record-card .pill.needs-action { background: #fff3d9; color: #795514; }
.team-record-card .pill.draft { background: #e9f7f2; color: #2f3fd0; }
.team-record-card > .button { margin-top: auto; width: fit-content; }
.location-card-grid > .service-card { min-height: 0; gap: 12px; }
.location-card-grid > .service-card h2, .location-card-grid > .service-card p { margin: 0; }
.location-card-grid > .service-card > .button { margin-top: auto; width: fit-content; }
.team-record-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.team-record-grid > .location-card { min-height: 0; gap: 12px; }
.team-record-grid > .location-card h2, .team-record-grid > .location-card p { margin: 0; }
.team-record-grid > .location-card > .button { margin-top: auto; width: fit-content; }
.location-card-grid > .location-card { position: relative; }
.card-remove-button { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e7d8d5; border-radius: 8px; background: #fff; color: #9e5148; cursor: pointer; }
.card-remove-button:hover, .card-remove-button:focus-visible { border-color: #b45d52; background: #fff4f2; color: #8a3026; }
.card-remove-button:disabled { opacity: .5; cursor: wait; }
.card-remove-button svg { width: 16px; height: 16px; }
.location-card-grid > .location-card .location-card-footer { padding-right: 58px; }
.team-record-grid > .location-card { padding-bottom: 58px; }

/* Mobile SDK page */
.sdk-platforms { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 7px; }
.sdk-platform { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 600 13px var(--body); white-space: nowrap; cursor: pointer; }
.sdk-platform svg { width: 15px; height: 15px; }
.sdk-platform.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 22, 21, .1); }
.sdk-message { padding: 22px; }
.sdk-message p { margin: 0; color: var(--muted); }
.sdk-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.sdk-setup-both > :first-child { grid-column: 1 / -1; }
.sdk-card { min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sdk-card-head { display: flex; align-items: center; gap: 8px; }
.sdk-card-head svg { width: 17px; height: 17px; color: var(--cyan-dark); }
.sdk-card-head h2 { margin: 0; font: 700 15px/1.3 var(--display); }
.sdk-card-head .pill { margin-left: auto; text-transform: none; }
.sdk-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sdk-key { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.sdk-key code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.sdk-apps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sdk-apps li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 5px 5px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.sdk-apps code { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.sdk-apps button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.sdk-apps button:hover { background: var(--surface-2); color: var(--red); }
.sdk-apps button svg { width: 15px; height: 15px; }
.sdk-apps-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 6px; background: #fff1d6; color: #8a5a12; font-size: 13px; }
.sdk-apps-empty svg { flex: none; width: 15px; height: 15px; }
.sdk-add-app { display: flex; gap: 8px; }
.sdk-add-app input { flex: 1; min-width: 0; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sdk-add-app input:focus { outline: 2px solid var(--cyan); outline-offset: -1px; border-color: transparent; }
.sdk-add-app .button { flex: none; white-space: nowrap; }
.sdk-add-app .button svg { width: 15px; height: 15px; }
.sdk-guide { margin-bottom: 28px; }
.sdk-guide-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sdk-guide-head h2 { margin: 0; font: 700 17px/1.3 var(--display); }
.sdk-guide-head p { margin: 0; color: var(--muted); font-size: 13px; }
.sdk-steps { margin: 0; padding: 24px; list-style: none; }
.sdk-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding-bottom: 30px; }
.sdk-step:last-child { padding-bottom: 0; }
.sdk-step:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 6px; left: 13.5px; width: 1px; background: var(--line); }
.sdk-step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px/1 var(--display); }
.sdk-step-content { min-width: 0; }
.sdk-step-content h3 { margin: 3px 0 4px; font: 700 15px/1.4 var(--display); }
.sdk-step-content > p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sdk-step-content > p code, .sdk-note p code { padding: 1px 4px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); font-size: max(.92em, 13px); }
.sdk-code { margin-bottom: 10px; overflow: hidden; border-radius: 7px; background: var(--ink); }
.sdk-code:last-child { margin-bottom: 0; }
.sdk-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 6px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #9aa5a2; font-size: 12px; }
.sdk-code pre { margin: 0; padding: 14px; overflow-x: auto; }
.sdk-code code { color: #e6ebe9; font-size: 13px; line-height: 1.6; white-space: pre; }
.sdk-copy { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: #c6cfcc; font: 600 12px var(--body); cursor: pointer; }
.sdk-copy:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sdk-copy svg { width: 13px; height: 13px; }
.sdk-copy-light { color: var(--ink-2); }
.sdk-copy-light:hover { background: var(--surface-2); color: var(--ink); }
.sdk-tabs { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; background: var(--surface-2); border-radius: 7px; max-width: 100%; }
.sdk-tabs button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 600 13px var(--body); cursor: pointer; white-space: nowrap; }
.sdk-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 22, 21, .1); }
.sdk-release h2 { margin: 0 0 12px; font: 700 17px/1.3 var(--display); }
.sdk-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sdk-note { display: flex; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.sdk-note-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--surface-2); color: var(--cyan-dark); }
.sdk-note-icon svg { width: 16px; height: 16px; }
.sdk-note strong { display: block; margin-bottom: 2px; font-size: 14px; }
.sdk-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 900px) {
  .sdk-setup, .sdk-notes { grid-template-columns: minmax(0, 1fr); }
  .sdk-platforms { display: flex; flex-wrap: wrap; }
  .sdk-steps { padding: 18px; }
  .sdk-tabs { display: flex; }
  .sdk-tabs button { flex: 1; min-width: 0; padding: 0 6px; white-space: normal; }
  .sdk-guide-head { flex-direction: column; gap: 2px; padding: 16px 18px; }
}

/* ------------------------------------------------------------------------------------------
   Modernized shell (UI/UX plan, Phase 2). Overrides earlier rules; migrate them in place as
   each page family moves onto the new primitives.
   ------------------------------------------------------------------------------------------ */
body { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Quiet, light sidebar grouped by daily work. */
.sidebar { background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); padding-bottom: 16px; }
.sidebar .brand { color: var(--ink); }
.sidebar .brand-mark { border-color: var(--line); }
.workspace-switcher { border-color: var(--line); background: var(--surface); color: var(--ink); }
.workspace-avatar { background: var(--ink); color: #fff; }
.workspace-switcher strong { font-size: 13px; }
.workspace-switcher small { color: var(--muted); font-size: 12px; }
.side-nav { gap: 1px; margin-top: 16px; scrollbar-color: var(--line) transparent; }
.nav-group-label { margin: 18px 11px 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 4px; }
.nav-item { min-height: 36px; color: #3a4250; font-size: 14px; font-weight: 500; }
.nav-item svg { color: #737b86; }
.nav-item:hover { color: var(--ink); background: var(--surface-2); }
.nav-item.active { color: var(--cyan); background: #eef0ff; }
.nav-item.active svg { color: var(--cyan); }
.nav-count { background: #fff2d6; color: #966200; font-size: 12px; }
.profile-button { border-top-color: var(--line); color: var(--ink); }
.profile-avatar { background: var(--surface-2); color: var(--ink); }
.profile-button strong { font-size: 13px; }
.profile-button small { color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--muted); letter-spacing: .06em; }
.breadcrumbs strong { color: var(--ink); }

/* Primary actions use the one accent colour. */
.button-primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.button-primary:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); }

/* Status badges: colour follows what happened (statusPill in app.js). */
.pill { font-size: 12px; font-weight: 600; }
.pill[class*="status-"] { text-transform: none; }
.topbar { background: rgba(246, 242, 234, 0.92); }
.pill.status-success { background: #e7f5ee; color: #16845b; }
.pill.status-warning { background: #fff2d6; color: #966200; }
.pill.status-danger { background: #fdecef; color: #b93443; }
.pill.status-neutral { background: #f1ede4; color: #59616c; }


/* Today (UI/UX plan 8.1): needs-you list and the next 24 hours. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin: 0 0 18px; }
.today-panel { min-width: 0; }
.attention-list, .agenda-list { margin: 0; padding: 0; list-style: none; }
.attention-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--line); }
.attention-row strong { display: block; font-size: 15px; }
.attention-row p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.attention-row small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.attention-row small.late { color: #966200; font-weight: 600; }
.attention-mark { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--cyan); }
.attention-mark.late { background: #c98a00; }
.today-more { margin: 4px 20px 14px; }
.agenda-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.agenda-row time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.agenda-row strong { display: block; font-size: 15px; }
.agenda-row small { color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) { .today-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .attention-row { grid-template-columns: 8px minmax(0, 1fr); padding: 14px 16px; }
  .attention-row .button { grid-column: 2; justify-self: start; }
  .agenda-row { grid-template-columns: 64px minmax(0, 1fr); padding: 12px 16px; }
  .agenda-row .pill { grid-column: 2; justify-self: start; }
  .metric-grid, .metric-grid.metric-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { border-bottom: 1px solid var(--line); }
}

/* Calls: caller first, outcome visible, nothing clipped. */
.calls-table { width: 100%; }
.calls-table td small { display: block; color: var(--muted); font-size: 13px; }
.row-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.row-link:hover { color: var(--cyan); text-decoration: underline; }
.calls-table td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .hide-narrow { display: none; } }
.call-actions .section-note { display: block; margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
.call-actions article.receipt-success { border-left: 3px solid #16845b; }
.call-actions article.receipt-warning { border-left: 3px solid #c98a00; }
.call-actions article.receipt-danger { border-left: 3px solid #b93443; }
.technical-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.technical-details summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; }
.latency-waterfall p { color: var(--muted); }
.follow-up-captured small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.follow-up-captured small.late { color: #966200; font-weight: 600; }
.transcript-search { grid-template-columns: minmax(0, 1fr) auto; }
.transcript-search .button { width: auto; }
/* Light surfaces instead of the old near-black blocks. */
.trial-banner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.trial-banner p, .trial-banner small, .trial-banner .eyebrow { color: var(--muted); }
.trial-banner h2, .trial-banner strong { color: var(--ink); }
.trial-banner .pill, .trial-banner [class*="chip"] { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.plan-summary { color: var(--ink); background: var(--surface-2); }
.plan-summary .eyebrow, .plan-summary p, .plan-price span { color: var(--muted); }
.plan-summary li, .plan-summary ul { color: var(--ink-2); border-color: var(--line); }
@media (max-width: 600px) {
  .activity-item { grid-template-columns: 36px minmax(0, 1fr); }
  .activity-item .activity-time { grid-column: 2; text-align: left; font-size: 13px; }
}

/* Usage chart: readable bars at 30 and 90 days, labels on one line. */
.bar-chart { gap: 3px; padding-bottom: 0; margin-bottom: 26px; background: repeating-linear-gradient(to top, transparent 0, transparent 45px, var(--surface-2) 46px); }
.bar { width: 72%; max-width: 22px; border-radius: 3px 3px 0 0; }
.bar-group:hover .bar, .bar-group:focus-visible .bar { background: var(--cyan-dark); }
.bar-group label { white-space: nowrap; color: var(--muted); }
.latency-waterfall p, .latency-waterfall small { color: var(--muted); }
.location-hours { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.location-hours svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--cyan-dark); margin-top: 1px; }
.location-hours small, .location-hours > span > span { display: block; }

/* Onboarding: website scan result (was unstyled, so icons and words ran together). */
.website-preview-result { display: grid; gap: 14px; }
.website-preview-head { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.website-preview-head svg { width: 20px; height: 20px; color: #16845b; }
.website-preview-head strong { display: block; font-size: 16px; }
.website-preview-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.website-preview-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.website-preview-signals span { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.website-preview-signals span svg { width: 16px; height: 16px; grid-row: span 2; }
.website-preview-signals span b { font-size: 14px; font-weight: 600; }
.website-preview-signals span small { color: var(--muted); font-size: 13px; }
.website-preview-signals .found svg { color: #16845b; }
.website-preview-signals .not-found { background: #fff2d6; border-color: #F0DDB8; }
.website-preview-signals .not-found svg, .website-preview-signals .not-found small { color: #966200; }
.website-preview-result > p { margin: 0; color: var(--ink-2); }
.onboarding-credit { background: #eef0ff; color: var(--cyan); }
.location-hours small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.location-hours > span > span { color: var(--ink-2); }

/* In-page section menu for long setup pages. */
.section-menu { position: sticky; top: -34px; z-index: 5; display: flex; gap: 6px; margin: 0 0 18px; padding: 10px 0; overflow-x: auto; background: var(--paper); scrollbar-width: none; }
.section-menu button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 14px var(--body); cursor: pointer; }
.section-menu button:hover { border-color: var(--cyan); color: var(--cyan); }
.section-anchor { scroll-margin-top: 64px; }
.section-anchor:focus { outline: none; }

/* Phone tap targets and overflow found by the Phase 6 audit. */
@media (max-width: 760px) {
  .row-link { min-height: 44px; display: inline-flex; align-items: center; }
  .sdk-tabs button, [role="tab"], .sdk-copy, .button-sm { min-height: 40px; }
  .customer-detail, .customer-detail * { max-width: 100%; }
  .customer-detail { overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  [data-auth-mode], [data-remove-sdk-app] { min-height: 44px; min-width: 44px; }
}

/* Live review fixes (7 Nov). */
table { min-width: 0; }
.clients-table, .audit-table { min-width: 1160px; }
.call-layout { grid-template-columns: minmax(0, 1fr); }
.call-layout.has-selection { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
.call-detail { position: relative; }
.call-detail-close { position: absolute; top: 12px; right: 12px; z-index: 1; min-height: 32px; width: 32px; padding: 0; }
.call-detail .panel-header { padding-right: 56px; }
.calls-table th, .calls-table td { padding: 12px 16px; }
@media (max-width: 1080px) { .call-layout.has-selection { grid-template-columns: minmax(0, 1fr); } }
/* Sidebar fits a laptop screen without hiding the last items. */
.sidebar .brand { padding-bottom: 16px; }
.workspace-switcher { min-height: 50px; }
.side-nav { margin-top: 10px; }
.nav-group-label { margin: 12px 11px 4px; }
.nav-item { min-height: 34px; }
/* Preview chips readable. */
.trial-banner .pill, .trial-banner [class*="chip"], .trial-banner span[class] { color: var(--ink-2); }
.trial-banner { padding: 24px 28px; }
.trial-banner h2 { font-size: clamp(20px, 2.2vw, 26px); }
.button-coral { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.button-coral:hover { background: var(--cyan-dark); }
.trial-meta span { border-color: var(--line); background: var(--surface-2); color: var(--ink-2); }
.credit-dial strong { font-size: 30px; color: var(--ink); }
.credit-dial > span { color: var(--muted); }
.channel-sub { display: none; }
@media (max-width: 760px) { .channel-sub { display: inline; } }
.auth-sample { position: relative; display: grid; gap: 10px; max-width: 520px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); }
.auth-sample-label { color: #A9B4C0; font-size: 13px; }
.auth-sample-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #FFFFFF; color: var(--ink); font-size: 14px; }
.auth-sample-row .pill { justify-self: start; }
@media (max-width: 520px) { .auth-sample-row { grid-template-columns: 1fr; } }
.auth-visual > div.auth-sample { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.12); }
.auth-visual h2 { font-size: clamp(34px, 3.6vw, 52px); }
.auth-sample-row span:last-child { line-height: 1.4; }

/* Calls on phones: one compact two-line row per call instead of three squeezed columns. */
@media (max-width: 760px) {
  .calls-table thead { display: none; }
  .calls-table, .calls-table tbody { display: block; }
  .calls-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .calls-table td { padding: 0; border: 0; }
  .calls-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .calls-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .calls-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13px; }
  .calls-table td:nth-child(2) strong { font-weight: 500; color: var(--muted); }
  .calls-table td:nth-child(2) strong::after { content: ", "; }
  .calls-table td:nth-child(2) strong, .calls-table td:nth-child(2) small { display: inline; font-size: 13px; }
  .calls-table td:nth-child(1) small { display: inline; margin-left: 6px; }
  .calls-table .row-link { min-height: 32px; }
}
@media (max-width: 760px) {
  .calls-table td:nth-child(3) { grid-row: 1; align-self: start; }
  .calls-table td:nth-child(2) { grid-column: 1 / -1; }
  .calls-table td:nth-child(2) strong { display: none; }
  .calls-table tr { align-items: center; }
}

/* ------------------------------------------------------------------------------------------
   Brand match with the marketing site, and a denser layout for laptop screens.
   ------------------------------------------------------------------------------------------ */
body { background: var(--paper); }
.topbar { background: rgba(246, 242, 234, 0.92); border-bottom-color: var(--line); }
.sidebar { background: #fbfaf7; border-right-color: var(--line); }
.workspace-switcher { background: #fff; border-color: var(--line); border-radius: 12px; }
.workspace-avatar { border-radius: 8px; }
.nav-item { border-radius: 9px; }
.nav-item.active { background: #eef0ff; color: var(--cyan); }
.side-nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 20px; }

/* Buttons: ink primary like the marketing CTAs, softer corners. */
.button { border-radius: 10px; }
.button-primary, .button-coral { background: var(--ink); border-color: var(--ink); color: #fff; }
.button-primary:hover, .button-coral:hover { background: #222c3b; border-color: #222c3b; }
.button-outline { border-color: #d6d0c4; background: #fff; }
.button-outline:hover { border-color: var(--ink); }
.range-control button.active { background: var(--ink); color: #fff; }

/* Surfaces: warm borders and rounder cards, like the marketing panels. */
.panel, .metric-grid, .table-wrap, .call-detail, .location-card, .trial-banner, .admin-info, .knowledge-summary, .knowledge-section { border-color: var(--line); border-radius: 16px; }
.metric-grid, .table-wrap { overflow: hidden; }
.admin-info { background: #fbfaf7; border-color: var(--line); color: var(--ink-2); }
.admin-info svg { color: var(--cyan); }
table th { background: #fbfaf7; color: var(--muted); }
.trial-banner { border-radius: 18px; }

/* Headings: the marketing display style, sized for a working screen. */
.page-heading { margin-bottom: 22px; align-items: center; }
.page-heading h1 { margin: 2px 0 4px; font: 800 clamp(26px, 2.4vw, 34px)/1.1 var(--display); letter-spacing: -0.025em; }
.page-heading p { font-size: 15px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; }
.panel-header h2, .knowledge-section-head h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
.content { padding-top: 26px; }

/* Metric cards: smaller numbers and padding so content starts sooner. */
.metric { padding: 16px 18px; }
.metric strong { margin: 8px 0 3px; font: 800 24px var(--display); letter-spacing: -0.02em; }
.knowledge-summary > div { padding: 14px 16px; }
.knowledge-summary span { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Calls: details align with the table and stay in view while scrolling. */
.call-layout { align-items: start; }
.call-detail { position: sticky; top: 0; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.calls-table td.when strong { display: block; font-weight: 600; }
.calls-table td.when small { display: block; }
.calls-table td { vertical-align: middle; }

@media (max-width: 1240px) {
  .content { padding-left: 24px; padding-right: 24px; }
  .page-heading { flex-wrap: wrap; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .content { padding-top: 18px; }
  .page-heading { margin-bottom: 16px; }
  .page-heading h1 { font-size: clamp(24px, 2.1vw, 30px); }
  .sidebar .brand { padding-bottom: 10px; }
  .workspace-switcher { min-height: 46px; padding: 6px 9px; }
  .nav-group-label { margin: 9px 11px 3px; }
  .nav-item { min-height: 31px; font-size: 13.5px; }
  .metric { padding: 12px 16px; }
  .metric strong { font-size: 22px; margin: 6px 0 2px; }
  .topbar { height: 58px; }
}
@media (max-width: 760px) {
  .calls-table td:nth-child(2) strong, .calls-table td.when strong { display: inline; font-weight: 500; color: var(--muted); }
  .calls-table td.when small { display: inline; }
  .page-heading h1 { font-size: 26px; }
}

/* Laptop widths: two-panel pages and booking rows fit without sideways scrolling. */
@media (max-width: 1240px) {
  .customer-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .reservation-operational { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr); }
  .reservation-operational .reservation-health { grid-column: 2 / -1; }
}
@media (max-width: 1100px) {
  .customer-layout { grid-template-columns: minmax(0, 1fr); }
  .customer-layout > :last-child:has(.detail-empty) { display: none; }
}
.panel-header { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.panel-header .button { white-space: nowrap; }
@media (max-width: 1100px) { .customer-layout > .customer-detail:not(:has(.detail-empty)) { order: -1; } }
.reservation-time .pill { align-self: flex-start; justify-self: start; width: auto; display: inline-flex; margin-bottom: 4px; }
@media (max-width: 1240px) { .knowledge-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .knowledge-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Summary cells as a clean grid at any column count. */
.knowledge-summary { gap: 1px; background: var(--line); overflow: hidden; }
.knowledge-summary > div { border-right: 0; background: var(--surface); }
.side-nav { padding-bottom: 34px; }

/* Promotions: compact cards that show what the agent says and how the offer is doing. */
.promotion-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.promotion-card { gap: 14px; padding: 20px; border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: none; }
.promotion-card.promotion-paused, .promotion-card.promotion-expired { background: #fbfaf7; }
.promotion-card-top h3 { margin: 2px 0 0; font: 800 19px/1.2 var(--display); letter-spacing: -0.01em; }
.promotion-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.promotion-icon { width: 42px; height: 42px; border-radius: 12px; color: var(--cyan); background: #eef0ff; }
.promotion-script { margin: 0; padding: 12px 14px; border-left: 3px solid #e0a01c; border-radius: 0 10px 10px 0; background: #fff8e9; }
.promotion-script figcaption { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #966200; }
.promotion-script blockquote { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.promotion-meta > span { padding: 6px 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 13px; }
.promotion-meta b { font-weight: 600; color: var(--ink); }
.promotion-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); gap: 1px; }
.promotion-results div { padding: 10px 12px; background: #fbfaf7; }
.promotion-results dt { font-size: 12px; color: var(--muted); }
.promotion-results dd { margin: 2px 0 0; font: 800 20px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.promotion-actions { margin-top: 0; }
.promotion-rule { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 0 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.promotion-rule svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--cyan); }
.metric-grid + .promotion-rule { margin-top: 14px; }
@media (max-width: 560px) { .promotion-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promotion-card-top { grid-template-columns: auto 1fr; } .promotion-card-top .pill { grid-column: 2; justify-self: start; } }

/* Business logo: sidebar and Settings. */
.workspace-avatar.has-logo { padding: 3px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.workspace-avatar.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-preview { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-preview span { font: 800 20px var(--display); color: var(--ink); }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-actions label.button { cursor: pointer; }
.logo-actions .is-disabled { opacity: .55; pointer-events: none; }
.workspace-avatar > span { color: inherit; font: inherit; }

/* Website & app tabs, embedded SDK header, and the moved-sections note. */
.channel-tabs { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.channel-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 600 14px var(--body); cursor: pointer; }
.channel-tabs button svg { width: 16px; height: 16px; }
.channel-tabs button.is-active { background: var(--ink); color: #fff; }
.sdk-embedded-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sdk-embedded-head p { margin: 0; color: var(--muted); font-size: 15px; }
.moved-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.moved-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--cyan); }
.link-button { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .channel-tabs { display: flex; } .channel-tabs button { flex: 1; justify-content: center; padding: 0 10px; } }