@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*, *::before, *::after { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
}

:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --ink: #0f172a;
  --muted: #64748b;
  --subtle: #94a3b8;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --paper: #ffffff;
  --wash: #f8fafc;
  --wash-2: #f1f5f9;
  --nav: #0a0f1e;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sidebar: 260px;
  --font-display: 'Google Sans', 'Goldman', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--wash);
  touch-action: manipulation;
}

body.auth-active {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  background: #0a0f1e;
}

body.auth-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 80% 0%, rgba(37,99,235,0.24), transparent 32%),
    linear-gradient(160deg, #0a0f1e 0%, #111827 64%, #172554 100%);
}

body.auth-active .auth-screen {
  background: transparent;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.modal-open {
  height: auto;
}

dialog.lead-dialog,
dialog.lead-dialog form {
  overscroll-behavior: contain;
}

@media (min-width: 821px) {
  body.modal-open .app-shell {
    background:
      linear-gradient(90deg, #0a0f1e 0 var(--sidebar), var(--wash) var(--sidebar) 100%);
  }
}

button, input, textarea, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  position: relative;
}

.button-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spinner-spin 0.68s linear infinite;
}

button.is-loading,
button.is-modal-click-loading {
  pointer-events: none;
}

button.is-loading:not(.create-option),
button.is-modal-click-loading:not(.create-option) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button.is-modal-click-loading:not(.create-option)::after {
  content: "";
  width: 1em;
  height: 1em;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spinner-spin 0.68s linear infinite;
}

@keyframes button-spinner-spin {
  to { transform: rotate(360deg); }
}

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 0%, rgba(37,99,235,0.24), transparent 34%),
    linear-gradient(155deg, #0a0f1e 0%, #111827 66%, #172554 100%);
}

.boot-loader[hidden] {
  display: none;
}

.boot-logo {
  width: clamp(92px, 18vw, 142px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.24));
}

.boot-logo text {
  font-family: Futura, var(--font-display);
  font-size: 74.34px;
  font-weight: 700;
}

.boot-logo path,
.boot-logo text {
  fill: #fff;
}

.boot-logo line {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 8px;
}

.boot-logo-base {
  opacity: 0.16;
}

.boot-logo-fill {
  animation: logo-fill-rise 500ms ease-out infinite;
  transform-origin: center bottom;
}

.boot-logo-fill line {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: logo-draw-lines 500ms ease-out infinite;
}

@keyframes logo-fill-rise {
  0% {
    opacity: 0.35;
    clip-path: inset(100% 0 0 0);
  }
  58% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes logo-draw-lines {
  0% { stroke-dashoffset: 24; }
  42% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-logo-fill,
  .boot-logo-fill line {
    animation: none;
  }
}

.auth-screen {
  min-height: 100dvh;
  display: grid;
  place-items: stretch;
  padding: 0;
  position: relative;
}

.auth-screen[hidden] {
  display: none;
}

.auth-brand {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.auth-brand img {
  width: 136px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-brand span {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.auth-mobile-value {
  display: none;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  animation: auth-content-enter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-access-panel {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  height: 100dvh;
  min-height: 0;
  padding: 0 clamp(34px, 5vw, 72px);
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.auth-feature-panel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 52px;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: clamp(46px, 6vw, 84px);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(37,99,235,0.28), transparent 34%),
    linear-gradient(155deg, rgba(15,23,42,0.72), rgba(10,15,30,0.92));
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.05);
  contain: layout paint;
  transform: translateZ(0);
}

.auth-feature-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 20%, rgba(37,99,235,0.26), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,0.08), transparent 45%);
  pointer-events: none;
}

.auth-feature-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 390px;
}

.auth-feature-copy span {
  color: #93b4ff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-feature-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
}

.auth-feature-copy p {
  margin: 0;
  color: rgba(226,232,240,0.72);
  font-size: 16px;
  line-height: 1.5;
}

.auth-feature-wheel {
  position: relative;
  z-index: 1;
  height: 330px;
  overflow: hidden;
  contain: layout paint;
  perspective: 900px;
  transform: translateZ(0);
}

.auth-feature-wheel::before,
.auth-feature-wheel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 88px;
  pointer-events: none;
}

.auth-feature-wheel::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(10,15,30,0.96), rgba(10,15,30,0));
}

.auth-feature-wheel::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(10,15,30,0.96), rgba(10,15,30,0));
}

.auth-feature-wheel span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(147,180,255,0.28);
  border-radius: 12px;
  background: rgba(15,23,42,0.42);
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation: auth-feature-cycle 12.6s linear infinite;
}

.auth-feature-wheel svg {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #93b4ff;
}

.auth-feature-wheel span:nth-child(1) { animation-delay: -0s; }
.auth-feature-wheel span:nth-child(2) { animation-delay: -1.8s; }
.auth-feature-wheel span:nth-child(3) { animation-delay: -3.6s; }
.auth-feature-wheel span:nth-child(4) { animation-delay: -5.4s; }
.auth-feature-wheel span:nth-child(5) { animation-delay: -7.2s; }
.auth-feature-wheel span:nth-child(6) { animation-delay: -9s; }
.auth-feature-wheel span:nth-child(7) { animation-delay: -10.8s; }

@keyframes auth-feature-cycle {
  0% {
    opacity: 0;
    transform: translate3d(0, 155px, -120px) rotateX(-18deg) scale(0.88);
  }
  12% {
    opacity: 0.3;
    transform: translate3d(0, 104px, -86px) rotateX(-12deg) scale(0.92);
  }
  34% {
    opacity: 0.72;
    transform: translate3d(0, 38px, -34px) rotateX(-5deg) scale(0.97);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -24px, 0) rotateX(0deg) scale(1);
  }
  66% {
    opacity: 0.72;
    transform: translate3d(0, -86px, -34px) rotateX(5deg) scale(0.97);
  }
  88% {
    opacity: 0.3;
    transform: translate3d(0, -152px, -86px) rotateX(12deg) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -203px, -120px) rotateX(18deg) scale(0.88);
  }
}

.auth-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15,23,42,0.16);
}

.auth-panel-bg {
  position: absolute;
  right: -58px;
  bottom: -68px;
  z-index: 0;
  width: 245px;
  height: 245px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.auth-screen[data-auth-mode="login"] .auth-panel-bg-email {
  opacity: 0.055;
}

.auth-screen[data-auth-mode="signup"] .auth-panel:has(#authRequestForm[data-step="0"]) .auth-panel-bg-email,
.auth-screen[data-auth-mode="signup"] .auth-panel:has(#authRequestForm[data-step="1"]) .auth-panel-bg-business,
.auth-screen[data-auth-mode="signup"] .auth-panel:has(#authRequestForm[data-step="2"]) .auth-panel-bg-globe {
  opacity: 0.055;
}

.auth-screen[data-auth-mode="signup"] .auth-panel:has(#authRequestForm[data-step="1"]) .auth-panel-bg-business {
  right: -52px;
  bottom: -62px;
}

.auth-screen[data-auth-mode="signup"] .auth-panel:has(#authRequestForm[data-step="2"]) .auth-panel-bg-globe {
  right: -66px;
  bottom: -72px;
}

.auth-card-head,
.auth-form,
.auth-message {
  position: relative;
  z-index: 1;
}

.auth-card-head {
  margin: 0;
  padding: 28px 28px 12px;
  background: transparent;
  animation: auth-panel-slide 0.2s ease;
}

.auth-signup-head {
  display: none;
}

.auth-screen[data-auth-mode="signup"] .auth-login-head {
  display: none;
}

.auth-screen[data-auth-mode="signup"] .auth-signup-head {
  display: block;
}

.auth-card-head span {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-card-head h2 {
  margin: 0 0 10px;
  font-size: 33px;
  line-height: 1.02;
}

.auth-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.auth-card-head small {
  display: inline-flex;
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.auth-form {
  display: grid;
  gap: 16px;
  padding: 10px 28px 28px;
  background: transparent;
  animation: auth-panel-slide 0.2s ease;
}

.auth-form.hidden {
  display: none;
}

.auth-delivery-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-delivery-toggle button {
  min-height: 38px;
  border: 1px solid #c7d2fe;
  border-radius: 9px;
  background: #f8fbff;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.auth-delivery-toggle button.active {
  border-color: #2563eb;
  background: #eaf2ff;
  color: #1d4ed8;
}

.auth-card label {
  gap: 9px;
  font-size: 13px;
}

.auth-card input,
.auth-card textarea {
  font-size: 18px;
}

.login-code-label {
  gap: 12px;
}

.login-code-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.auth-card .login-code-box {
  aspect-ratio: 1;
  min-height: 54px;
  padding: 0;
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
}

.auth-resend-btn {
  justify-self: center;
  min-height: 30px;
  padding: 0 8px;
  font-size: 15px;
}

.auth-mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 6px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.auth-mode-toggle::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 6px);
  height: calc(100% - 12px);
  border-radius: 10px;
  background: rgba(30,41,59,0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px rgba(2,6,23,0.22);
  transition: transform 0.2s ease;
}

.auth-screen[data-auth-mode="signup"] .auth-mode-toggle::before {
  transform: translateX(100%);
}

.auth-mode-toggle button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(226,232,240,0.52);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.2s ease;
}

.auth-mode-toggle button .icon,
.auth-mode-toggle button .icon svg {
  width: 17px;
  height: 17px;
}

.auth-mode-toggle button.active {
  color: rgba(255,255,255,0.9);
  background: transparent;
  box-shadow: none;
}

@keyframes auth-panel-slide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes auth-content-enter {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#authRequestForm {
  --onboarding-progress: 33.333%;
  overflow: hidden;
}

.onboarding-progress {
  position: relative;
  height: 6px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: #e8edf4;
}

.onboarding-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--onboarding-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #5b7ff0);
  box-shadow: 0 0 18px rgba(37,99,235,0.2);
  transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-progress span {
  display: none;
}

.onboarding-step {
  position: relative;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  isolation: isolate;
  overflow: hidden;
}

.onboarding-step.active {
  display: grid;
  gap: 14px;
  animation: onboarding-step-forward 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

#authRequestForm[data-step-direction="back"] .onboarding-step.active {
  animation-name: onboarding-step-back;
}

@keyframes onboarding-step-forward {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes onboarding-step-back {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-layout {
    animation: none;
  }

  .auth-feature-wheel span {
    animation: none;
  }

  .onboarding-progress::before {
    transition: none;
  }

  .onboarding-step.active {
    animation: none;
  }
}

.onboarding-step legend {
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}

.onboarding-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 15px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.check-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--wash);
  color: var(--ink);
  font-size: 13px;
  text-transform: none;
}

.check-grid input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.suggestion-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.suggestion-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.suggestion-row button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.suggestion-row button:hover {
  border-color: rgba(37,99,235,0.35);
  background: #eff6ff;
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.onboarding-actions .ghost-btn:disabled {
  display: none;
}

.onboarding-actions .hidden {
  display: none;
}

.auth-message {
  min-height: 22px;
  margin: 0;
  padding: 0 28px 26px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.auth-message[hidden] {
  display: none;
}

.auth-message.error {
  color: var(--red);
}

.auth-card .primary-btn,
.auth-card .ghost-btn {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--wash);
  isolation: isolate;
}

.app-shell[hidden] {
  display: none;
}

.mobile-nav-backdrop {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
  padding: 20px 16px;
  background:
    radial-gradient(circle at 80% 0%, rgba(37,99,235,0.24), transparent 32%),
    linear-gradient(160deg, #0a0f1e 0%, #111827 64%, #172554 100%);
  color: #fff;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 46px;
  padding-left: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.brand img {
  width: 60px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

.brand span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand-message-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(147, 180, 255, 0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.message-svg path {
  fill: currentColor;
  stroke: none;
}

.brand-message-btn:hover,
.brand-message-btn:focus-visible,
.brand-message-btn.active {
  border-color: rgba(147, 180, 255, 0.44);
  background: rgba(37,99,235,0.24);
  color: #fff;
  outline: none;
}

.brand-message-btn:active {
  transform: translateY(1px);
}

.sidebar-upgrade-btn {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

.sidebar-upgrade-btn[hidden] {
  display: none;
}

.sidebar-upgrade-btn .icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
}

.sidebar-upgrade-btn strong,
.sidebar-upgrade-btn small {
  display: block;
  min-width: 0;
}

.sidebar-upgrade-btn strong {
  font-size: 14px;
  line-height: 1.1;
}

.sidebar-upgrade-btn small {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.message-unread-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  box-shadow: none;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.company-pill {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.company-pill strong,
.company-pill small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-pill strong { font-size: 14px; }
.company-pill small { margin-top: 3px; color: rgba(255,255,255,0.52); font-size: 12px; }

.company-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--blue);
  font-weight: 800;
  overflow: hidden;
}

.company-mark img {
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
}

.nav-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nav-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-tools-group {
  display: grid;
  gap: 0;
}

.nav-tools-toggle {
  position: relative;
  padding-right: 34px;
}

.nav-tools-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.78;
  transform: translateY(-60%) rotate(45deg);
  transition: transform 0.18s ease;
}

.nav-tools-group.is-open .nav-tools-toggle::after {
  transform: translateY(-35%) rotate(225deg);
}

.nav-tools-submenu {
  display: grid;
  gap: 5px;
  max-height: 0;
  overflow: hidden;
  padding: 0 12px 0 28px;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.18s ease, padding 0.18s ease;
}

.nav-tools-group.is-open .nav-tools-submenu {
  max-height: 232px;
  padding: 5px 12px 8px 28px;
  opacity: 1;
  transform: translateY(0);
}

.nav-tool-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  min-height: 38px;
  border: 1px solid rgba(96,165,250,0.2);
  background: rgba(255,255,255,0.045);
}

.nav-tool-item:hover,
.nav-tool-item.active {
  background: rgba(255,255,255,0.13);
}

.nav-tool-pill {
  justify-self: end;
  margin-left: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(254,243,199,0.96);
  color: #92400e;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-tool-pill-new {
  background: rgba(37,99,235,0.96);
  color: #ffffff;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.nav-tool-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 0 10px;
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.nav-item.active .nav-count,
.nav-item:hover .nav-count {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255,255,255,0.09);
  color: #fff;
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex: 0 0 18px;
}

.icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon svg.tool-box-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.quote-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.today-svg [style*='stroke:#000000'] {
  stroke: currentColor !important;
}

.icon svg.today-svg [style*='fill:#000000'] {
  fill: currentColor !important;
}

.icon svg.assessment-svg,
.icon svg.assessment-svg * {
  fill: none !important;
  stroke: currentColor !important;
}

.icon svg.headlight-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.jobs-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.checklist-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.warranty-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.service-type-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.oxidation-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.pitting-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.cancel-job-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.lead-inbox-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.email-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.process-builder-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.inner-moisture-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.resealing-service-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.hours-operation-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.dealership-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.icon svg.access-code-svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: rgba(255,255,255,0.56);
  font-size: 12px;
}

.install-app-btn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(147,180,255,0.26);
  border-radius: 8px;
  background: rgba(37,99,235,0.14);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.install-app-btn[hidden] {
  display: none;
}

.install-app-btn:hover,
.install-app-btn:focus-visible {
  border-color: rgba(147,180,255,0.48);
  background: rgba(37,99,235,0.22);
  transform: translateY(-1px);
}

.install-app-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.install-app-btn .icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.09);
  color: #bfdbfe;
}

.install-app-btn .icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-network-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  border: 1px solid rgba(34,197,94,0.24);
  border-radius: 999px;
  background: rgba(34,197,94,0.08);
  color: rgba(220,252,231,0.9);
  padding: 4px 9px 4px 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.app-network-status:hover,
.app-network-status:focus-visible {
  color: #fff;
  outline: none;
}

.app-network-status.is-offline {
  border-color: #ef4444;
  background: rgba(254,242,242,0.08);
  color: #ef4444;
}

.app-network-status.is-offline:hover,
.app-network-status.is-offline:focus-visible {
  color: #f87171;
  border-color: #f87171;
  background: rgba(254,226,226,0.12);
}

.topbar-network-status {
  min-height: 40px;
  padding: 7px 12px;
  border-color: #ef4444;
  background: #fff;
  color: #dc2626;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(220,38,38,0.08);
}

.topbar-network-status[hidden] {
  display: none;
}

.topbar-network-status:hover,
.topbar-network-status:focus-visible {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.ask-business-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}

.ask-business-widget[hidden] {
  display: none;
}

.ask-business-launcher,
.ask-business-panel {
  pointer-events: auto;
}

.ask-business-launcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(37,99,235,0.36);
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 16px 32px rgba(37,99,235,0.26);
  font-weight: 900;
  cursor: pointer;
}

.ask-business-launcher:hover,
.ask-business-launcher:focus-visible {
  outline: none;
  background: #1d4ed8;
  transform: translateY(-1px);
}

.ask-business-launcher-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.ask-business-widget.is-unavailable .ask-business-launcher {
  border-color: #cbd5e1;
  background: #fff;
  color: #64748b;
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}

.ask-business-panel {
  width: min(390px, calc(100vw - 28px));
  max-height: min(620px, calc(100dvh - 100px));
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.32);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15,23,42,0.24);
}

.ask-business-panel[hidden] {
  display: none;
}

.ask-business-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}

.ask-business-head div {
  display: grid;
  gap: 2px;
}

.ask-business-head span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ask-business-head strong {
  font-size: 18px;
  line-height: 1.1;
}

.ask-business-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #f8fafc;
}

.ask-business-message {
  display: grid;
  gap: 5px;
  max-width: 92%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ask-business-message strong {
  font-size: 12px;
  color: var(--muted);
}

.ask-business-message p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ask-business-message small {
  color: var(--muted);
  font-size: 11px;
}

.ask-business-message.is-user {
  justify-self: end;
  border-color: rgba(37,99,235,0.34);
  background: #eff6ff;
}

.ask-business-message.is-status {
  justify-self: center;
  max-width: 100%;
  border-style: dashed;
  background: #fff;
}

.ask-business-message.is-status p {
  color: var(--muted);
  font-size: 13px;
}

.ask-business-prompts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.ask-business-prompts button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ask-business-prompts button:hover,
.ask-business-prompts button:focus-visible {
  outline: none;
  border-color: var(--blue);
  color: var(--blue);
}

.ask-business-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.ask-business-form textarea {
  width: 100%;
  min-height: 44px;
  max-height: 110px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
}

.ask-business-form textarea:focus {
  outline: 3px solid rgba(37,99,235,0.16);
  border-color: var(--blue);
}

.ask-business-form .primary-btn {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
}

.ask-business-form .primary-btn .icon {
  width: 18px;
  height: 18px;
}

.sidebar-version {
  margin-left: auto;
  color: rgba(255,255,255,0.46);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.logout-btn {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  font-weight: 800;
  cursor: pointer;
}

.logout-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
}

.status-dot.is-offline {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
}

.main {
  min-width: 0;
  padding: 22px 26px 26px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 20px;
  overflow: visible;
}

.topbar.topbar-overview {
  align-items: center;
}

.topbar.topbar-overview .top-actions {
  grid-column: 2;
}

.section-titlebar[hidden] {
  display: none;
}

.section-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 5px;
  margin-top: 10px;
  min-width: 0;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.section-titlebar h1,
.section-titlebar .eyebrow {
  min-width: 0;
}

.section-title-row h1 {
  overflow-wrap: anywhere;
}

.workspace-cache-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(180,83,9,0.2);
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.workspace-cache-pill[hidden] {
  display: none;
}

.trial-strip {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.trial-strip[hidden] {
  display: none;
}

.trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 5px 5px 5px 13px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(37,99,235,0.08);
}

.trial-pill.expired {
  border-color: rgba(220,38,38,0.22);
  background: #fef2f2;
  color: #991b1b;
}

.trial-pill button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
}

.trial-pill button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
}

p {
  font-family: var(--font-body);
}

h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
}

h2 {
  margin-bottom: 5px;
  font-size: 18px;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 12px;
  font-size: 15px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.top-actions-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: -8px -8px -8px -6px;
  padding: 8px 10px 8px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 6px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.top-actions-scroll::-webkit-scrollbar {
  display: none;
}

.top-actions-scroll > *,
.new-menu-btn {
  flex: 0 0 auto;
}

.header-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(15,23,42,0.16);
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,0.14);
}

.header-upgrade-btn[hidden] {
  display: none;
}

.header-upgrade-btn .icon,
.header-upgrade-btn .icon svg {
  width: 16px;
  height: 16px;
}

.app-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 42vw);
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: none;
}

.app-online-pill[hidden] {
  display: none;
}

.app-online-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: none;
}

.app-online-names {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-network-dialog-body {
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.app-network-dialog-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
}

.app-network-dialog-card.is-online {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.app-network-dialog-card.has-queue {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.app-network-dialog-card strong {
  color: inherit;
}

.app-network-dialog-body ul {
  margin: 0;
  padding-left: 18px;
}

.sync-center-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sync-center-stat {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.sync-center-stat strong {
  font-size: 24px;
  line-height: 1;
}

.sync-center-stat span {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.sync-center-stat.is-pending,
.sync-center-stat.is-syncing {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.sync-center-stat.is-failed {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.sync-center-last-synced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.sync-center-last-synced strong {
  color: var(--ink);
}

.app-network-sync-errors {
  margin-top: 4px !important;
  color: #b91c1c;
}

.app-network-sync-list {
  display: grid;
  gap: 6px;
  padding: 0 !important;
  list-style: none;
}

.app-network-sync-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}

.app-network-sync-list span {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.sync-conflict-body {
  display: grid;
  gap: 14px;
}

.sync-conflict-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 14px;
}

.sync-conflict-summary span {
  color: #475569;
  line-height: 1.45;
}

.sync-conflict-table {
  display: grid;
  gap: 8px;
}

.sync-conflict-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
}

.sync-conflict-row.is-risky {
  border-color: #fecaca;
  background: #fff7f7;
}

.sync-conflict-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.sync-conflict-row small {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sync-conflict-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-conflict-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.sync-conflict-spacer {
  width: 18px;
  height: 18px;
}

.sync-conflict-row code {
  display: block;
  max-height: 72px;
  overflow: auto;
  padding: 6px;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .sync-center-stats {
    grid-template-columns: 1fr;
  }

  .sync-conflict-row {
    grid-template-columns: 1fr;
  }
}

.demo-controls {
  display: inline-flex;
  align-items: center;
}

.app-toggle,
.demo-toggle,
.clear-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.app-toggle,
.demo-toggle {
  gap: 8px;
  min-width: 118px;
  min-height: 36px;
  padding: 4px 6px 4px 11px;
  border: 1px solid rgba(148,163,184,0.35);
  background: #fff;
  color: var(--muted);
  box-shadow: 0 8px 18px rgba(15,23,42,0.05);
}

.app-toggle.active,
.demo-toggle.active {
  border-color: rgba(37,99,235,0.35);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 12px 24px rgba(37,99,235,0.12);
}

.app-toggle:hover,
.app-toggle:focus-visible,
.demo-toggle:hover,
.demo-toggle:focus-visible,
.clear-demo-btn:hover,
.clear-demo-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.demo-switch-track {
  position: relative;
  width: 40px;
  height: 24px;
  flex: 0 0 40px;
  border-radius: 999px;
  border: 2px solid rgba(203,213,225,0.95);
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,0.05),
    0 10px 22px rgba(15,23,42,0.08);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.demo-switch-thumb {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 18px rgba(15,23,42,0.24),
    0 2px 4px rgba(15,23,42,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-toggle.active .demo-switch-track,
.demo-toggle.active .demo-switch-track {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 12px 24px rgba(37,99,235,0.2);
}

.app-toggle.active .demo-switch-thumb,
.demo-toggle.active .demo-switch-thumb {
  transform: translateX(16px);
  box-shadow:
    0 10px 18px rgba(29,78,216,0.28),
    0 2px 4px rgba(15,23,42,0.12);
}

.top-actions-scroll .demo-toggle,
.top-actions-scroll .demo-toggle.active {
  box-shadow: 0 2px 6px rgba(37,99,235,0.08);
}

.top-actions-scroll .demo-toggle.active {
  border-color: rgba(37,99,235,0.3);
}

.top-actions-scroll .demo-toggle .demo-switch-track,
.top-actions-scroll .demo-toggle.active .demo-switch-track {
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
}

.top-actions-scroll .demo-toggle .demo-switch-thumb,
.top-actions-scroll .demo-toggle.active .demo-switch-thumb {
  box-shadow: 0 2px 5px rgba(15,23,42,0.18);
}

.app-toggle:disabled,
.demo-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.clear-demo-btn {
  min-width: 116px;
  padding: 0 12px;
  border: 1px solid #fee2e2;
  background: #fff7f7;
  color: #b91c1c;
  white-space: nowrap;
}

.clear-demo-btn:hover,
.clear-demo-btn:focus-visible {
  border-color: #fecaca;
  background: #fff1f1;
  box-shadow: 0 12px 22px rgba(185,28,28,0.1);
}

.settings-demo-panel {
  display: grid;
  gap: 14px;
}

.settings-admin-panel {
  display: grid;
  gap: 14px;
}

#view-admin .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 0;
}

#view-admin .panel-head > div:first-child {
  min-width: 0;
}

.admin-accordion-head-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

.admin-accordion-head-actions .status {
  white-space: nowrap;
}

.admin-mode-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

.admin-mode-head-actions .status {
  white-space: nowrap;
}

.admin-mode-head-actions .demo-toggle {
  flex: 0 0 auto;
  margin-left: 0;
}

#view-admin .admin-workspaces-panel > .panel-head {
  margin-bottom: 26px;
}

.admin-accordion-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.admin-accordion-toggle:hover,
.admin-accordion-toggle:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
  box-shadow: 0 10px 22px rgba(37,99,235,0.12);
  outline: none;
}

.admin-accordion-chevron {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transition: transform 0.18s ease;
}

.admin-accordion-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.admin-accordion-toggle[aria-expanded="true"] .admin-accordion-chevron {
  transform: rotate(180deg);
}

.admin-accordion-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-accordion-body[hidden] {
  display: none;
}

.admin-final-hardening-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-final-hardening-panel .panel-head h2 .icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  color: var(--blue);
}

.admin-final-hardening-panel .panel-head h2 .icon svg {
  width: 21px;
  height: 21px;
}

.final-hardening-summary {
  align-items: center;
}

.final-hardening-summary .secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.final-hardening-checklist {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.final-hardening-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.final-hardening-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.final-hardening-group-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.final-hardening-group-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.final-hardening-items {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.final-hardening-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.final-hardening-item:hover,
.final-hardening-item:focus-within {
  border-color: #bfdbfe;
  background: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,0.08);
}

.final-hardening-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.final-hardening-check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.final-hardening-item.is-done {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.final-hardening-item.is-done .final-hardening-check {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.final-hardening-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.final-hardening-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
}

.final-hardening-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.final-hardening-item.is-done .final-hardening-copy strong {
  color: #1d4ed8;
}

.video-help-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 38px;
  max-width: 210px;
  padding: 0 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  isolation: isolate;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.video-help-launcher[hidden] {
  display: none;
}

.video-help-launcher .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.video-help-launcher .video-help-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.video-help-spotlight-active .app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: rgba(8,13,28,0.12);
}

body.video-help-spotlight-active .sidebar,
body.video-help-spotlight-active .top-actions,
body.video-help-spotlight-active .view.active {
  transition: opacity 0.18s ease;
}

.video-help-launcher.is-spotlighted {
  z-index: 45;
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: 0 12px 26px rgba(37,99,235,0.16), 0 0 0 1px rgba(255,255,255,0.72) inset;
}

.video-help-launcher.is-spotlighted::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 12px;
  background: rgba(37,99,235,0.12);
  animation: video-help-spotlight-pulse 1.8s ease-out infinite;
}

@keyframes video-help-spotlight-pulse {
  0% {
    opacity: 0.6;
    transform: scale(0.98);
  }
  70% {
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-help-launcher.is-spotlighted::before {
    animation: none;
  }
}

.video-help-admin-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.video-help-admin-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.video-help-admin-panel .panel-head .icon {
  width: 19px;
  height: 19px;
  color: var(--blue);
}

.video-help-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  min-width: 0;
  max-width: 100%;
}

.video-help-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.video-help-form label:first-of-type,
.video-help-form label:last-of-type,
.video-help-actions {
  grid-column: 1 / -1;
}

.video-help-location-field {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.video-help-location-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
}

.video-help-location-icon svg {
  width: 19px;
  height: 19px;
}

.video-help-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.video-help-actions .settings-save-note {
  flex: 1 1 320px;
  min-width: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}

.video-help-actions .secondary-btn,
.video-help-actions .primary-btn {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.video-help-list {
  display: grid;
  gap: 10px;
}

.video-help-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.video-help-item-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #ecfeff;
  color: #0e7490;
}

.video-help-item-icon svg {
  width: 21px;
  height: 21px;
}

.video-help-item strong,
.video-help-item span {
  display: block;
  min-width: 0;
}

.video-help-item strong {
  color: var(--ink);
  font-size: 14px;
}

.video-help-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.video-help-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.video-help-dialog {
  width: min(900px, calc(100vw - 32px));
}

.video-help-dialog video {
  display: block;
  width: 100%;
  max-height: min(66vh, 620px);
  border-radius: 10px;
  background: #020617;
}

.admin-workspaces-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.admin-workspaces-box strong,
.admin-workspaces-box span {
  display: block;
}

.admin-workspaces-box strong {
  color: var(--ink);
  font-size: 14px;
}

.admin-workspaces-box span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-workspaces-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-workspace-search-box {
  margin-top: 6px;
}

.admin-workspace-directory {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.admin-workspace-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-workspace-item {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-workspace-item.is-online {
  border-color: rgba(34,197,94,0.34);
  background: linear-gradient(145deg, rgba(240,253,244,0.95) 0%, #fff 58%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(22,101,52,0.08);
}

.admin-workspace-item:hover,
.admin-workspace-item:focus-visible {
  border-color: rgba(45, 99, 232, 0.45);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.admin-workspace-item.is-online:hover,
.admin-workspace-item.is-online:focus-visible {
  border-color: rgba(34,197,94,0.48);
  box-shadow: 0 14px 30px rgba(22,101,52,0.12);
}

.admin-workspace-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.admin-workspace-item-head strong {
  color: var(--ink);
  font-size: 15px;
}

.admin-workspace-item-head strong a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-workspace-item-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.admin-workspace-presence {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.admin-workspace-presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.admin-workspace-presence.is-online {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.admin-workspace-presence.is-online .admin-workspace-presence-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.admin-workspace-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.admin-workspace-meta span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.admin-workspace-dialog {
  width: min(880px, calc(100vw - 28px));
}

.admin-workspace-detail-grid {
  display: grid;
  gap: 14px;
}

.admin-workspace-detail-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.admin-workspace-detail-section-head {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-workspace-detail-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.admin-workspace-detail-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.admin-workspace-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-workspace-detail-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.admin-workspace-detail-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-workspace-detail-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.admin-workspace-detail-item a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-workspace-settings-form {
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.admin-workspace-settings-head {
  display: grid;
  gap: 4px;
}

.admin-workspace-settings-head h3,
.admin-workspace-settings-head p {
  margin: 0;
}

.admin-workspace-settings-head h3 {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.admin-workspace-settings-head p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.admin-workspace-settings-form .secondary-btn {
  justify-self: end;
}

.admin-create-workspace-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-create-workspace-form label {
  min-width: 0;
}

.admin-create-workspace-wide {
  grid-column: 1 / -1;
}

.admin-create-workspace-status {
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}

.admin-create-workspace-status[data-status="error"] {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

.admin-prospect-browser,
.admin-prospect-form,
.admin-prospecting-settings {
  display: grid;
  gap: 12px;
}

.admin-prospecting-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-prospect-directory-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.admin-prospect-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-prospect-directory-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-prospect-directory-copy strong,
.admin-prospect-directory-copy span {
  display: block;
}

.admin-prospect-directory-copy strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.admin-prospect-directory-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-prospect-directory-card .primary-btn {
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 42px;
  padding-inline: 18px;
}

.admin-prospect-search-box {
  margin: 2px 0 0;
}

.admin-prospect-status-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #53637b;
}

.admin-prospect-form,
.admin-prospecting-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-prospecting-settings {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-prospecting-settings .admin-workspaces-box,
.admin-prospecting-settings label:nth-of-type(2),
.admin-prospecting-settings label:nth-of-type(3),
.admin-prospect-actions {
  grid-column: 1 / -1;
}

.admin-prospect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-prospect-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-prospect-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.admin-prospect-breadcrumbs .ghost-btn {
  min-height: 34px;
  padding: 0 12px;
}

.admin-prospect-location-card {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 12px 26px rgba(15,23,42,0.04);
  cursor: pointer;
}

.admin-prospect-location-card:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.admin-prospect-location-card strong,
.admin-prospect-location-card small {
  display: block;
}

.admin-prospect-location-card strong {
  font-size: 18px;
  line-height: 1.1;
}

.admin-prospect-location-card small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-prospect-location-arrow {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.admin-prospect-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15,23,42,0.04);
}

.admin-prospect-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.admin-prospect-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-prospect-title-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
}

.admin-prospect-main p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.admin-prospect-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-prospect-toggles .demo-toggle {
  min-height: 42px;
  padding-inline: 12px;
  gap: 10px;
}

.admin-prospect-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-prospect-detail-grid > div,
.admin-prospect-message-box {
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fbff;
}

.admin-prospect-detail-grid strong,
.admin-prospect-detail-grid span,
.admin-prospect-message-box strong,
.admin-prospect-message-log span {
  display: block;
}

.admin-prospect-detail-grid strong,
.admin-prospect-message-box strong {
  color: var(--ink);
  font-size: 13px;
}

.admin-prospect-detail-grid span,
.admin-prospect-message-log span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-prospect-channel-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-prospect-channel {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-prospect-channel.active {
  border-color: rgba(37,99,235,0.18);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37,99,235,0.16);
}

.admin-prospect-message-log {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
}

.settings-demo-panel .panel-head {
  display: flex;
}

.settings-demo-panel .panel-head > div {
  min-width: 0;
}

.settings-demo-panel .status {
  white-space: nowrap;
}

.demo-settings-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--wash);
}

.demo-settings-box strong,
.demo-settings-box span {
  display: block;
}

.demo-settings-box strong {
  margin-bottom: 4px;
  font-size: 15px;
}

.demo-settings-box span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.public-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -2px;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.app-danger-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.primary-btn {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37,99,235,0.18);
}

.primary-btn:hover { background: var(--blue-dark); }

.app-danger-btn,
.danger-btn {
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 20px rgba(220,38,38,0.16);
}

.app-danger-btn:hover,
.danger-btn:hover {
  background: #b91c1c;
}

.admin-record-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: auto;
  padding: 0 13px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.admin-record-delete-btn:hover,
.admin-record-delete-btn:focus-visible {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
  outline: none;
}

.lead-admin-cell {
  width: 1%;
  white-space: nowrap;
}

.new-menu-btn {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.new-menu-btn:active,
.new-menu-btn.is-pressed {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 5px 12px rgba(37,99,235,0.18);
}

.new-menu-btn.is-open {
  background: var(--blue-dark);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.16), 0 12px 24px rgba(37,99,235,0.22);
}

.new-menu-btn.is-open .icon {
  transform: rotate(45deg);
}

.new-menu-btn .icon {
  transition: transform 0.16s ease;
}

.customer-add-btn {
  display: inline-grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  line-height: 1;
}

.customer-add-btn .icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled,
.text-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.primary-btn.is-success,
.secondary-btn.is-success,
.ghost-btn.is-success {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.primary-btn.is-error,
.secondary-btn.is-error,
.ghost-btn.is-error {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.secondary-btn,
.ghost-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

button.admin-record-delete-btn {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  box-shadow: none;
}

.btn-sm {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
}

.ghost-btn {
  color: var(--muted);
}

.mobile-menu {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.mobile-menu-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--ink);
}

.mobile-message-unread-badge {
  top: -9px;
  right: -9px;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: rise 0.18s ease;
}

.messages-panel {
  overflow: hidden;
}

.messages-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.messages-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  gap: 18px;
  height: clamp(520px, calc(100dvh - 260px), 680px);
  min-height: 0;
}

.messages-sidebar,
.message-thread-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.messages-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.messages-search-box,
.message-compose-search {
  width: 100%;
}

.message-conversation-list,
.message-workspace-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.message-conversation-card,
.message-workspace-option {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.message-workspace-option {
  grid-template-columns: 46px minmax(0, 1fr);
}

.message-conversation-card:hover,
.message-conversation-card.active,
.message-workspace-option:hover,
.message-workspace-option:focus-visible {
  border-color: #bcd2ff;
  background: #f8fbff;
  box-shadow: 0 10px 22px rgba(37,99,235,0.1);
  outline: none;
}

.message-conversation-card:active,
.message-workspace-option:active {
  transform: translateY(1px);
}

.message-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 950;
  overflow: visible;
}

.message-avatar.has-logo {
  background: var(--blue);
  color: #fff;
}

.message-avatar img {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 6px;
  object-fit: contain;
}

.message-presence-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
  pointer-events: none;
}

.message-avatar.is-online .message-presence-badge {
  background: #22c55e;
}

.message-avatar.is-offline .message-presence-badge {
  background: radial-gradient(circle, #94a3b8 0 42%, #fff 46%);
  box-shadow: 0 0 0 1px #cbd5e1, 0 4px 10px rgba(15, 23, 42, 0.12);
}

.message-conversation-copy,
.message-workspace-copy,
.message-conversation-main,
.message-workspace-option > span:not(.message-avatar) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-conversation-copy strong,
.message-workspace-copy strong,
.message-conversation-title strong,
.message-workspace-option strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-conversation-copy span,
.message-workspace-copy span,
.message-conversation-copy small,
.message-conversation-preview,
.message-workspace-option small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-conversation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.message-conversation-title small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.message-card-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 6px;
}

.message-card-time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.message-card-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.message-conversation-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.message-thread-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.message-thread-head {
  min-height: 78px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.message-thread-contact {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.message-thread-contact strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.message-thread-contact-copy > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.message-thread-context {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.message-context-pill,
.message-context-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.message-context-pill {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.message-context-pill.completed {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.message-context-pill.in_progress {
  border-color: #fde68a;
  background: #fffbeb;
  color: #a16207;
}

.message-context-pill.canceled {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

.message-context-action {
  border: 1px solid #bfd5ff;
  background: #eef5ff;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.message-context-action:hover,
.message-context-action:focus-visible {
  border-color: #8fb4ff;
  background: #e0edff;
}

.message-context-action:active {
  transform: translateY(1px);
}

.message-delete-chat-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.message-delete-chat-btn:hover,
.message-delete-chat-btn:focus-visible {
  border-color: #fca5a5;
  background: #fee2e2;
  outline: none;
}

.message-delete-chat-btn:active {
  transform: translateY(1px);
}

.message-delete-chat-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.message-thread-body {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.message-thread-body.is-deleting {
  align-content: center;
  justify-content: center;
}

.message-deleting-state {
  display: inline-grid;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.message-deleting-state .button-spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
  color: var(--blue);
}

.message-group {
  display: grid;
  grid-template-columns: minmax(0, 72%);
  align-items: start;
  justify-content: start;
}

.message-group.is-mine {
  justify-content: end;
}

.message-group.is-mine .message-group-content {
  justify-items: end;
}

.message-group-content {
  display: grid;
  gap: 6px;
  min-width: 0;
  justify-items: start;
}

.message-group-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.message-group-meta strong {
  color: var(--ink);
}

.message-group.is-mine .message-group-meta {
  justify-content: flex-end;
}

.message-bubble-stack {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.message-group.is-mine .message-bubble-stack {
  justify-items: end;
}

.message-bubble {
  width: fit-content;
  max-width: min(100%, 620px);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-top-left-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.44;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-group.is-mine .message-bubble {
  border-color: #2563eb;
  border-top-left-radius: 18px;
  border-top-right-radius: 6px;
  background: #2563eb;
  color: #fff;
}

.message-bubble.middle,
.message-bubble.last {
  border-top-left-radius: 18px;
}

.message-bubble.first,
.message-bubble.middle {
  border-bottom-left-radius: 8px;
}

.message-group.is-mine .message-bubble.middle,
.message-group.is-mine .message-bubble.last {
  border-top-right-radius: 18px;
}

.message-group.is-mine .message-bubble.first,
.message-group.is-mine .message-bubble.middle {
  border-bottom-right-radius: 8px;
}

.message-composer {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.message-composer-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.message-composer input {
  width: 100%;
  min-height: 44px;
  padding: 0 52px 0 16px;
  border: 1px solid #cbd7ea;
  border-radius: 999px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.message-composer input:focus {
  border-color: #9ab8ff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.message-send-btn {
  position: absolute;
  right: 7px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.message-send-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}

.message-send-btn:hover,
.message-send-btn:focus-visible {
  background: #1d4ed8;
  outline: none;
}

.message-send-btn:active {
  transform: translateY(1px);
}

.message-send-btn:disabled {
  cursor: default;
  opacity: 0.62;
}

.message-composer.is-disabled {
  pointer-events: none;
  opacity: 0.56;
}

.message-thread-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 18px 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.message-thread-typing span,
.message-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: message-dot 1s ease-in-out infinite;
}

.message-thread-typing span:nth-child(2),
.message-typing-dots span:nth-child(2) {
  animation-delay: 0.12s;
}

.message-thread-typing span:nth-child(3),
.message-typing-dots span:nth-child(3) {
  animation-delay: 0.24s;
}

.message-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.message-empty-state {
  display: grid;
  place-items: start;
  gap: 6px;
  min-height: 100%;
  color: var(--muted);
  font-weight: 850;
}

.message-empty-state strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.message-workspace-list {
  max-height: min(540px, 58dvh);
  margin-top: 14px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.overview-greeting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.overview-greeting-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-greeting-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.08;
}

.overview-greeting-card p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.overview-today-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 142px;
  margin-bottom: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.overview-today-main,
.overview-today-stats {
  position: relative;
  z-index: 2;
}

.overview-today-main > span {
  display: block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-today-main strong {
  display: block;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 950;
  line-height: 1;
}

.overview-today-main small {
  display: block;
  max-width: 680px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.overview-today-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 10px;
  min-width: min(100%, 430px);
}

.overview-today-stats span {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.overview-today-stats em {
  overflow: hidden;
  color: var(--ink);
  font-size: 22px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-today-stats b {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.overview-today-card .overview-today-bg-icon {
  position: absolute;
  right: -24px;
  bottom: -42px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 178px;
  color: var(--blue);
  opacity: 0.08;
  pointer-events: none;
  line-height: 0;
  transform: rotate(-7deg);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.overview-today-card:hover .overview-today-bg-icon,
.overview-today-card:focus-visible .overview-today-bg-icon {
  opacity: 0.13;
  transform: translate(-2px, -2px) rotate(-7deg) scale(1.03);
}

.overview-today-card .overview-today-bg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.metric-card,
.app-section,
.panel,
.job-column,
.customer-card,
.page-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.metric-card {
  position: relative;
  min-height: 132px;
  padding: 18px;
  overflow: hidden;
}

body.overview-boot-loading #view-overview .overview-greeting-card,
body.overview-boot-loading #view-overview .overview-today-card,
body.overview-boot-loading #view-overview .metric-card,
body.overview-boot-loading #view-overview .overview-pipeline-panel,
body.overview-boot-loading #view-overview .split-layout > .panel {
  --skeleton-block: #f1f3f7;
  --skeleton-line: #d9deea;
  --skeleton-line-soft: #e6e9f1;
  position: relative;
  overflow: hidden;
}

body.overview-boot-loading #view-overview .overview-greeting-card > *,
body.overview-boot-loading #view-overview .overview-today-card > *,
body.overview-boot-loading #view-overview .metric-card > *,
body.overview-boot-loading #view-overview .overview-pipeline-panel > *,
body.overview-boot-loading #view-overview .split-layout > .panel > * {
  opacity: 0;
}

body.overview-boot-loading #view-overview .overview-greeting-card::before,
body.overview-boot-loading #view-overview .overview-today-card::before,
body.overview-boot-loading #view-overview .metric-card::before,
body.overview-boot-loading #view-overview .overview-pipeline-panel::before,
body.overview-boot-loading #view-overview .split-layout > .panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 8px;
  background:
    linear-gradient(var(--skeleton-block), var(--skeleton-block)) 0 0 / 100% 58px no-repeat,
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 22px 18px / 32% 12px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 22px 40px / 54% 10px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 22px 94px / 68% 12px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 22px 120px / 46% 10px no-repeat;
  animation: overviewSkeletonPulse 1.15s ease-in-out infinite;
}

body.overview-boot-loading #view-overview .overview-greeting-card::after,
body.overview-boot-loading #view-overview .overview-today-card::after,
body.overview-boot-loading #view-overview .metric-card::after,
body.overview-boot-loading #view-overview .overview-pipeline-panel::after,
body.overview-boot-loading #view-overview .split-layout > .panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent) -160% 0 / 150px 100% no-repeat;
  animation: overviewSkeletonSweep 1s ease-in-out infinite;
  pointer-events: none;
}

body.overview-boot-loading #view-overview .metric-card::before {
  background:
    linear-gradient(var(--skeleton-block), var(--skeleton-block)) 0 0 / 100% 58px no-repeat,
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 18px 74px / 76% 12px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 18px 98px / 52% 11px no-repeat;
}

body.overview-boot-loading #view-overview .overview-pipeline-panel::before {
  background:
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 0 0 / 28% 14px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 0 32px / 54% 12px no-repeat,
    linear-gradient(var(--skeleton-block), var(--skeleton-block)) 0 78px / 31% 190px no-repeat,
    linear-gradient(var(--skeleton-block), var(--skeleton-block)) 34.5% 78px / 31% 190px no-repeat,
    linear-gradient(var(--skeleton-block), var(--skeleton-block)) 69% 78px / 31% 190px no-repeat,
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 4% 214px / 22% 12px no-repeat,
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 38.5% 214px / 22% 12px no-repeat,
    linear-gradient(var(--skeleton-line), var(--skeleton-line)) 73% 214px / 22% 12px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 6% 240px / 18% 10px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 40.5% 240px / 18% 10px no-repeat,
    linear-gradient(var(--skeleton-line-soft), var(--skeleton-line-soft)) 75% 240px / 18% 10px no-repeat;
}

@keyframes overviewSkeletonPulse {
  50% { opacity: 0.72; }
}

@keyframes overviewSkeletonSweep {
  to { background-position: 160% 0; }
}

.metric-card-action {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.metric-card-action:hover,
.metric-card-action:focus-visible {
  border-color: rgba(37,99,235,0.36);
  box-shadow: 0 18px 38px rgba(37,99,235,0.1);
  transform: translateY(-1px);
  outline: none;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 8px 0 7px;
  font-size: 30px;
  letter-spacing: 0;
}

.metric-card > span:not(.metric-card-bg-icon),
.metric-card > strong,
.metric-card > small,
.metric-card .metric-revenue-heading,
.metric-card .metric-revenue-meta,
.metric-card .metric-revenue-footer,
.metric-card .metric-revenue-mini-chart {
  position: relative;
  z-index: 2;
}

.metric-card .metric-card-bg-icon {
  position: absolute;
  right: -20px;
  bottom: -28px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  color: var(--blue);
  opacity: 0.085;
  pointer-events: none;
  line-height: 0;
  transform: rotate(-7deg);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.metric-card-action:hover .metric-card-bg-icon,
.metric-card-action:focus-visible .metric-card-bg-icon {
  opacity: 0.13;
  transform: translate(-2px, -2px) rotate(-7deg) scale(1.03);
}

.metric-card .metric-card-bg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.metric-card .metric-card-bg-icon svg:not(.metric-followup-bg-svg) {
  fill: currentColor;
}

.metric-card .metric-followup-bg-svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-card-revenue {
  border-color: rgba(37, 99, 235, 0.22);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.98) 48%, rgba(236, 253, 245, 0.52)),
    var(--paper);
}

.metric-card-revenue .metric-card-bg-icon {
  right: -14px;
  bottom: -32px;
  width: 128px;
  height: 128px;
  opacity: 0.075;
}

.metric-card-revenue:hover .metric-card-bg-icon,
.metric-card-revenue:focus-visible .metric-card-bg-icon {
  opacity: 0.12;
}

.metric-revenue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.metric-card .metric-revenue-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric-card .metric-revenue-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.metric-card-revenue strong {
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 34px;
}

.metric-card-revenue small {
  max-width: 190px;
  color: #60708a;
}

.metric-revenue-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  margin-right: 0;
}

.metric-card .metric-revenue-chip {
  display: inline-grid;
  gap: 2px;
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.metric-card .metric-revenue-chip em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.metric-card .metric-revenue-chip b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.metric-revenue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #60708a;
  font-size: 11px;
  font-weight: 850;
}

.metric-card .metric-revenue-footer > span {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.metric-card .metric-revenue-source {
  gap: 12px;
  min-width: 0;
}

.metric-card .metric-revenue-source-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.metric-card .metric-revenue-source-copy em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.metric-card .metric-revenue-source-copy b {
  max-width: 160px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card .metric-revenue-source-copy small {
  display: block;
  max-width: 170px;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card .metric-revenue-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.metric-card .metric-revenue-link span {
  color: inherit;
  font-size: 17px;
  line-height: 1;
}

.metric-card .metric-revenue-mini-chart {
  position: static;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  display: inline-grid;
  place-items: center;
  line-height: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12), 0 10px 24px rgba(37, 99, 235, 0.1);
}

.metric-card .metric-revenue-mini-donut {
  --metric-donut-gradient: conic-gradient(#bfdbfe 0 100%);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--metric-donut-gradient);
  position: relative;
  line-height: 1;
}

.metric-card .metric-revenue-mini-donut::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  border-radius: 999px;
  background: #fff;
}

.metric-card .metric-revenue-mini-donut #metricRevenueDonutValue {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.split-layout,
.public-builder,
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.split-layout > *,
.public-builder > *,
.settings-grid > * {
  min-width: 0;
}

#view-overview .split-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(340px, 0.75fr);
}

#view-overview .overview-pipeline-panel {
  grid-column: 1 / -1;
}

#view-overview .pipeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#view-overview .pipeline-stack {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

#view-overview .pipeline > .pipeline-empty {
  grid-column: 1 / -1;
}

#view-overview .pipeline-lane {
  padding: 12px;
}

#view-overview .pipeline-lane h3 {
  margin-bottom: 10px;
}

#view-overview .lead-mini {
  padding: 14px;
}

.panel {
  padding: 18px;
}

.app-section {
  padding: 18px;
}

.app-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.app-section-head > div {
  min-width: 0;
}

.app-section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.app-detail-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.app-detail-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-detail-item strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.app-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.app-toggle-row > div {
  min-width: 0;
}

.app-toggle-row .app-toggle,
.app-toggle-row .demo-toggle {
  margin-left: auto;
  flex: 0 0 auto;
}

.app-action-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.app-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

#view-settings .settings-grid,
#view-admin .settings-grid,
#view-settings .panel,
#view-admin .panel,
#view-settings .details-list div,
#view-admin .details-list div,
#view-settings .plain-list li,
#view-admin .plain-list li {
  min-width: 0;
}

#view-settings .settings-grid,
#view-admin .settings-grid {
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

#view-settings .settings-grid > .panel,
#view-admin .settings-grid > .panel {
  grid-column: 1 / -1;
}

#view-settings .details-list dd,
#view-admin .details-list dd,
#view-settings .plain-list li,
#view-admin .plain-list li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-head p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.panel-head > div {
  min-width: 0;
}

.panel-head > button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.panel-title-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.panel-title-inline h2 {
  margin: 0;
}

.panel-title-inline .status {
  flex: 0 0 auto;
}

.panel-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

.panel-head-actions > button {
  flex: 0 0 auto;
}

.ba-tool-panel .panel-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ba-start-over-btn {
  flex: 0 0 auto;
  min-height: 42px;
  margin-left: auto;
  padding-inline: 18px;
}

.ba-builder-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.ba-saved-assets-panel {
  margin-top: 22px;
}

.ba-tool-panel .panel-head h2 {
  font-weight: 700;
}

.ba-tool-panel .panel-head p {
  font-weight: 500;
}

.ba-builder-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 0;
  padding: 10px 4px 4px;
}

.ba-builder-steps > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 78px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

.ba-builder-steps > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 27px);
  right: calc(-50% + 27px);
  height: 3px;
  border-radius: 999px;
  background: #e2e8f0;
}

.ba-builder-steps > div.is-complete:not(:last-child)::after {
  background: #86efac;
}

.ba-builder-steps > div span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ba-builder-steps > div strong {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.ba-builder-steps > div.active {
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.ba-builder-steps > div.is-complete {
  border-color: transparent;
  background: transparent;
  color: #166534;
}

.ba-builder-steps > div.active span {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px #dbeafe;
}

.ba-builder-steps > div.is-complete span {
  background: #dcfce7;
  color: #22c55e;
}

.ba-builder-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ba-builder-step-card,
.ba-format-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.96));
}

.ba-builder-step-card {
  padding: 22px;
}

.ba-builder-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.ba-step-label {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ba-builder-step-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.ba-step-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff4c7;
  color: #98440f;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.ba-step-copy {
  max-width: 780px;
  margin: 0 0 18px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.ba-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ba-format-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "preview"
    "title"
    "copy"
    "meta";
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ba-format-card:hover,
.ba-format-card.is-selected {
  border-color: var(--blue-light);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

.ba-format-card.is-selected {
  background: #f7fbff;
}

.ba-format-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

.ba-format-preview {
  grid-area: preview;
  display: grid;
  align-self: start;
  height: 148px;
  min-height: 148px;
  padding: 6px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.ba-format-preview span {
  display: block;
  border-radius: 5px;
  background: linear-gradient(135deg, #93c5fd, #1d4ed8);
}

.ba-format-preview-wide,
.ba-format-preview-square {
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.ba-format-preview-vertical {
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
}

.ba-format-preview-sheet {
  grid-template-rows: 1.2fr 0.45fr 0.45fr;
  gap: 5px;
}

.ba-format-card strong {
  grid-area: title;
  align-self: start;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}

.ba-format-card small {
  grid-area: copy;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.ba-format-card em {
  grid-area: meta;
  align-self: start;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.ba-format-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.ba-format-summary p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ba-format-summary strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.ba-format-summary span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
}

.ba-step-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ba-step-actions .secondary-btn,
.ba-step-actions .primary-btn {
  font-weight: 700;
}

.ba-step-actions .primary-btn {
  min-width: 180px;
}

.ba-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ba-photo-card {
  position: relative;
  display: grid;
  min-height: 320px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12px 28px rgba(15, 23, 42, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ba-photo-card:hover,
.ba-photo-card.has-photo {
  border-color: #aac7fb;
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 16px 34px rgba(37, 99, 235, 0.1);
}

.ba-photo-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ba-photo-empty,
.ba-photo-preview {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 100%;
  padding: 22px;
  text-align: center;
}

.ba-photo-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  background: rgba(248, 251, 255, 0.82);
  backdrop-filter: blur(3px);
}

.ba-photo-card.is-loading .ba-photo-loading {
  display: grid;
}

.ba-photo-loading::before {
  content: "";
  width: 38px;
  height: 38px;
  border: 4px solid rgba(37, 99, 235, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: ba-photo-spin 0.75s linear infinite;
}

.ba-photo-empty .icon {
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--blue);
}

.ba-photo-empty .icon svg,
.ba-photo-empty .icon img {
  width: 22px;
  height: 22px;
}

.ba-photo-upload-icon img {
  display: block;
  filter: brightness(0) saturate(100%) invert(33%) sepia(96%) saturate(3248%) hue-rotate(219deg) brightness(94%) contrast(94%);
}

.ba-photo-empty strong,
.ba-photo-preview strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.ba-photo-empty small {
  max-width: 280px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
}

.ba-photo-preview {
  position: relative;
  align-content: stretch;
  padding: 0;
  background: #fff;
}

.ba-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.ba-photo-preview span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ba-photo-preview strong {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  width: auto;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

.ba-style-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}

.ba-style-controls {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
}

.ba-style-switch-list {
  grid-column: 1 / -1;
}

.ba-style-control-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
}

.ba-style-control-group .field-title {
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.ba-style-control-group .field-title .icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.ba-style-control-group .field-title .icon svg {
  width: 17px;
  height: 17px;
}

.ba-style-control-group .field-title .icon svg.ba-style-inline-icon {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.ba-style-control-group .field-title .icon img {
  display: block;
  width: 17px;
  height: 17px;
  filter: brightness(0) saturate(100%) invert(33%) sepia(96%) saturate(3248%) hue-rotate(219deg) brightness(94%) contrast(94%);
}

.ba-style-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ba-style-options-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ba-style-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ba-style-options button:hover,
.ba-style-options button.is-selected {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.ba-style-options button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}

.ba-style-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
}

.ba-style-swatch-clean {
  background: linear-gradient(135deg, #eff6ff 0 50%, #2563eb 50% 100%);
}

.ba-style-swatch-bold {
  background: linear-gradient(135deg, #111827 0 50%, #22c55e 50% 100%);
}

.ba-style-swatch-minimal {
  background: linear-gradient(135deg, #f8fafc 0 50%, #64748b 50% 100%);
}

.ba-style-color-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
}

.ba-style-color-row span,
.ba-style-color-row strong,
.ba-style-color-row small,
.ba-style-color-row em {
  display: block;
}

.ba-style-color-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-transform: none;
}

.ba-style-color-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-transform: none;
}

.ba-style-color-row input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 3px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.ba-style-color-row em {
  min-width: 68px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

.ba-style-switch-list {
  display: grid;
  gap: 10px;
}

.ba-style-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
}

.ba-style-switch-row > div {
  min-width: 0;
}

.ba-style-switch-row strong,
.ba-style-switch-row span {
  display: block;
}

.ba-style-switch-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
}

.ba-style-switch-row > div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.ba-style-switch {
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 34px;
  padding: 4px 5px 4px 10px;
  font-size: 12px;
}

.ba-style-preview {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 18px 24px 24px;
  border: 1px dashed #bfdbfe;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.58);
}

.ba-style-preview-frame {
  display: grid;
  place-items: stretch;
  justify-self: center;
  width: min(100%, 760px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  padding: 14px;
  border-radius: 10px;
  background: #dbeafe;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.ba-style-preview-frame[data-ba-format="square-post"] {
  width: min(100%, 560px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
}

.ba-style-preview-frame[data-ba-format="story-reel"] {
  width: min(100%, 330px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] {
  width: min(100%, 660px);
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.ba-style-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.ba-style-preview-frame[data-ba-format="story-reel"] .ba-style-canvas {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-canvas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ba-style-preview-frame[data-ba-theme="clean"] .ba-style-canvas {
  background: #fff;
}

.ba-style-preview-frame[data-ba-theme="clean"] {
  background: #dbeafe;
}

.ba-style-preview-frame[data-ba-theme="bold"] {
  background: #0f172a;
}

.ba-style-preview-frame[data-ba-theme="bold"] .ba-style-canvas {
  background: #111827;
}

.ba-style-preview-frame[data-ba-theme="minimal"] .ba-style-canvas {
  gap: 1px;
  padding: 0;
  background: #cbd5e1;
}

.ba-style-preview-frame[data-ba-theme="minimal"] {
  background: #f1f5f9;
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-canvas {
  gap: 10px;
  padding: 12px;
  background: #ffffff;
}

.ba-style-photo-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  background: #e2e8f0;
  overflow: hidden;
}

.ba-style-sheet-header,
.ba-style-sheet-meta {
  display: none;
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-sheet-header {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 2px;
  color: #0f172a;
}

.ba-style-sheet-header strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.ba-style-sheet-header span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-photo-slot {
  border: 1px solid #d7e3f4;
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-sheet-meta {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ba-style-sheet-meta span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #d7e3f4;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.ba-style-sheet-meta strong {
  display: block;
  margin-bottom: 2px;
  color: #0f172a;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.ba-style-preview-frame[data-ba-theme="minimal"] .ba-style-photo-slot {
  border-radius: 0;
}

.ba-style-photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-style-canvas[data-ba-fit="contain"] .ba-style-photo-slot img {
  object-fit: contain;
  background: #0f172a;
}

.ba-style-photo-slot span {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ba-style-preview-frame[data-ba-theme="clean"] .ba-style-photo-slot span {
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
}

.ba-style-preview-frame[data-ba-theme="bold"] .ba-style-photo-slot span {
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
}

.ba-style-canvas[data-ba-labels="hide"] .ba-style-photo-slot span {
  display: none;
}

.ba-style-brand-strip {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.ba-style-preview-frame[data-ba-theme="clean"] .ba-style-brand-strip {
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
}

.ba-style-preview-frame[data-ba-theme="bold"] .ba-style-brand-strip {
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
}

.ba-style-preview-frame[data-ba-theme="minimal"] .ba-style-brand-strip {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  background: var(--ba-style-accent, #2563eb);
  color: var(--ba-style-accent-text, #fff);
}

.ba-style-preview-frame[data-ba-format="dealer-proof"] .ba-style-brand-strip {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  grid-column: 1 / -1;
  border-radius: 6px;
}

.ba-style-canvas[data-ba-branding="hide"] .ba-style-brand-strip {
  display: none;
}

.ba-style-watermark {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: min(18%, 112px);
  min-width: 58px;
  max-height: 42px;
  object-fit: contain;
  opacity: 0.14;
  pointer-events: none;
  filter: grayscale(1) contrast(1.15);
}

.ba-style-canvas[data-ba-branding="show"] .ba-style-watermark {
  bottom: 48px;
}

.ba-style-canvas[data-ba-watermark="hide"] .ba-style-watermark {
  display: none;
}

.ba-style-preview p {
  justify-self: start;
  width: auto;
  margin: 0 0 0 10px;
  padding: 8px 11px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.ba-export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.ba-export-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
}

.ba-export-card span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ba-export-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ba-export-card small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.ba-saved-assets {
  display: grid;
  gap: 14px;
}

.ba-saved-assets-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ba-saved-assets-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.ba-saved-assets-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.ba-saved-assets-list {
  display: grid;
  gap: 10px;
}

.ba-saved-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.ba-saved-asset-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  background: #fff;
}

.ba-saved-asset-thumb {
  width: 112px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #e2e8f0;
  object-fit: cover;
  overflow: hidden;
}

.ba-saved-asset-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ba-saved-asset-body strong,
.ba-saved-asset-body span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-saved-asset-body strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.ba-saved-asset-body span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
}

.ba-saved-asset-actions {
  justify-self: end;
}

.ba-asset-dialog-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 10px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.ba-asset-dialog-preview img {
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: #e2e8f0;
}

.ba-asset-dialog-preview div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ba-asset-dialog-preview strong,
.ba-asset-dialog-preview span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-asset-dialog-preview strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.ba-asset-dialog-preview span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.ba-asset-dialog .dialog-actions {
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.ba-asset-dialog .dialog-actions .secondary-btn,
.ba-asset-dialog .dialog-actions .danger-btn {
  min-width: 116px;
  min-height: 44px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
}

.ba-asset-dialog .dialog-actions .danger-btn {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

.ba-asset-dialog .dialog-actions .danger-btn:hover,
.ba-asset-dialog .dialog-actions .danger-btn:focus-visible {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
}

.ba-asset-dialog .dialog-actions .danger-btn.is-confirming {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

@keyframes ba-photo-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .website-builder-hero,
  .website-builder-grid,
  .website-builder-source-list {
    grid-template-columns: 1fr;
  }

  .website-builder-status {
    width: 100%;
  }

  .overview-today-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .overview-today-stats {
    min-width: 0;
  }

  .ba-tool-panel .panel-head {
    align-items: flex-start;
    flex-direction: row;
  }

  .ba-start-over-btn {
    width: auto;
    margin-left: auto;
  }

  .ba-builder-shell {
    grid-template-columns: 1fr;
  }

  .ba-builder-steps {
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .ba-builder-steps > div {
    justify-content: center;
    min-height: 52px;
    white-space: nowrap;
  }

  .ba-format-grid {
    grid-template-columns: 1fr;
  }

  .ba-photo-grid {
    grid-template-columns: 1fr;
  }

  .ba-style-grid {
    grid-template-columns: 1fr;
  }

  .ba-style-controls {
    grid-template-columns: 1fr;
  }

  .ba-export-grid {
    grid-template-columns: 1fr;
  }

  .ba-saved-asset-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }

  .ba-saved-asset-thumb {
    width: 96px;
  }

}

@media (max-width: 560px) {
  .website-builder-hero {
    padding: 16px;
  }

  .website-builder-hero h2 {
    font-size: 25px;
  }

  .website-builder-stage,
  .website-builder-next {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .website-builder-stage > .icon,
  .website-builder-next > .icon {
    width: 38px;
    height: 38px;
  }

  .overview-greeting-card {
    padding: 16px;
  }

  .overview-today-card {
    min-height: 0;
    padding: 16px;
  }

  .overview-today-main strong {
    font-size: 34px;
  }

  .overview-today-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-today-card .overview-today-bg-icon {
    right: -30px;
    bottom: -36px;
    width: 132px;
    height: 132px;
  }

  .overview-greeting-card h2 {
    font-size: 23px;
  }

  .overview-greeting-card p {
    font-size: 14px;
  }

  .followup-card {
    grid-template-columns: 1fr;
  }

  .followup-card-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .followup-card-actions .secondary-btn {
    flex: 1 1 120px;
  }

  .followup-extension-options {
    grid-template-columns: 1fr;
  }

  .ba-builder-step-card {
    padding: 16px;
  }

  .ba-builder-step-head,
  .ba-format-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .ba-format-card {
    grid-template-columns: 1fr;
    min-height: 128px;
    padding: 12px;
  }

  .ba-format-preview {
    height: 118px;
    min-height: 96px;
  }

  .ba-format-card strong {
    font-size: 16px;
  }

  .ba-format-summary .primary-btn {
    width: 100%;
  }

  .ba-step-actions {
    width: 100%;
  }

  .ba-step-actions .secondary-btn,
  .ba-step-actions .primary-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .ba-photo-card {
    min-height: 250px;
  }

  .ba-photo-preview img {
    min-height: 250px;
  }

  .ba-style-options,
  .ba-style-options-compact {
    grid-template-columns: 1fr;
  }

  .ba-style-preview {
    padding: 12px;
  }

  .ba-style-preview-frame {
    padding: 10px;
  }

  .ba-style-preview p {
    margin-left: 0;
  }

  .ba-style-color-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ba-style-color-row em {
    grid-column: 2;
  }

  .ba-style-switch-row {
    width: 100%;
    align-items: center;
    flex-direction: row;
  }

  .ba-style-switch-row > div {
    flex: 1 1 auto;
  }

  .ba-style-switch {
    align-self: auto;
    margin-left: auto;
  }

  .ba-saved-assets-head {
    flex-direction: column;
  }

  .ba-saved-asset-row,
  .ba-asset-dialog-preview {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ba-saved-asset-thumb,
  .ba-asset-dialog-preview img {
    width: 100%;
  }

  .ba-saved-asset-actions {
    justify-self: stretch;
    width: 100%;
  }

  .ba-saved-asset-actions .secondary-btn {
    width: 100%;
  }

}

.communication-template-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}

.communication-template-panel .panel-head h2 .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  margin-right: 8px;
  color: var(--blue);
}

.communication-template-panel .panel-head h2 .icon svg {
  width: 23px;
  height: 23px;
}

#view-settings .settings-action-head,
#view-admin .settings-action-head,
#view-settings .panel-head:has(> button),
#view-admin .panel-head:has(> button) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  column-gap: 14px;
}

#view-settings .settings-action-head > div:not(.settings-head-actions),
#view-admin .settings-action-head > div:not(.settings-head-actions),
#view-settings .panel-head:has(> button) > div,
#view-admin .panel-head:has(> button) > div {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

#view-settings .settings-action-head > button,
#view-admin .settings-action-head > button,
#view-settings .panel-head:has(> button) > button,
#view-admin .panel-head:has(> button) > button {
  flex: 0 0 auto;
  justify-self: end;
  align-self: center;
  margin-left: 0;
}

.settings-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  align-self: center;
  justify-self: end;
  margin-left: auto;
}

.settings-head-copy {
  flex: 1 1 auto;
  min-width: 220px;
}

.settings-head-actions .status {
  white-space: nowrap;
}

#view-settings .settings-action-head h2,
#view-admin .settings-action-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#view-settings .settings-action-head h2 .icon,
#view-admin .settings-action-head h2 .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--blue);
}

#view-settings .settings-action-head h2 .icon svg,
#view-admin .settings-action-head h2 .icon svg {
  width: 19px;
  height: 19px;
}

.settings-summary-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.settings-preferences-panel {
  grid-column: 1 / -1;
}

.settings-hours-panel {
  min-width: 0;
}

.settings-hours-panel .panel-head {
  align-items: center;
  margin-bottom: 0;
}

.settings-hours-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}

.settings-hours-panel .panel-head h2 .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--blue);
}

.settings-hours-panel .panel-head h2 .icon svg {
  width: 19px;
  height: 19px;
}

.settings-hours-panel .panel-head p {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 800;
}

.procedure-builder-panel .panel-head h2,
.website-builder-panel h2,
.lead-forms-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.procedure-builder-panel .panel-head h2 .icon,
.website-builder-panel h2 .icon,
.lead-forms-panel .panel-head h2 .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--blue);
}

.procedure-builder-panel .panel-head h2 .icon svg,
.website-builder-panel h2 .icon svg,
.lead-forms-panel .panel-head h2 .icon svg {
  width: 19px;
  height: 19px;
}

.settings-hours-toggle-btn {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.settings-scheduling-blocks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.settings-feature-box {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.settings-feature-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-feature-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.settings-feature-title-row > div {
  min-width: 0;
}

.settings-feature-accordion-head {
  align-items: center;
}

.settings-feature-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.settings-feature-accordion-head .settings-feature-title-row {
  flex: 1 1 auto;
}

.settings-feature-collapse-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.settings-feature-collapse-btn:hover,
.settings-feature-collapse-btn:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
  box-shadow: 0 10px 22px rgba(37,99,235,0.12);
  outline: none;
}

.settings-feature-collapse-btn[aria-expanded="true"] .admin-accordion-chevron {
  transform: rotate(180deg);
}

.settings-help-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.settings-help-icon-btn:hover,
.settings-help-icon-btn:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
  transform: translateY(-1px);
}

.settings-help-icon-btn .icon,
.settings-help-icon-btn .icon svg {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0;
}

.settings-help-icon-btn .icon {
  display: grid;
  place-items: center;
}

.settings-feature-title-row > div > strong,
.settings-feature-title-row > div > span {
  display: block;
}

.settings-feature-title-row > div > strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
}

.settings-feature-title-row > div > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.scheduling-feature-box .settings-scheduling-blocks {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-scheduling-blocks > div strong,
.settings-scheduling-blocks > div span {
  display: block;
}

.settings-scheduling-blocks > div strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.15;
}

.settings-scheduling-blocks > div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.settings-inline-toggle-row {
  align-items: center;
  flex-direction: row;
}

.settings-inline-toggle-row > div {
  min-width: 0;
}

.settings-inline-toggle-row .settings-feature-title-row {
  flex: 1 1 auto;
}

.settings-inline-toggle-row .settings-hours-block-toggle {
  margin-left: auto;
}

.settings-hours-block-toggle {
  min-width: 86px;
  flex: 0 0 auto;
}

.settings-hours-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.settings-hours-body[hidden] {
  display: none;
}

.settings-field-stack {
  display: grid;
  gap: 7px;
}

.settings-field-stack select {
  min-height: 44px;
}

.fixed-scheduling-editor {
  display: grid;
  gap: 10px;
}

.fixed-scheduling-editor[hidden] {
  display: none;
}

.fixed-scheduling-editor.is-disabled {
  opacity: .62;
}

.fixed-scheduling-slots-list {
  display: grid;
  gap: 10px;
}

.fixed-scheduling-slot-row {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(160px, 1fr) minmax(160px, auto) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.fixed-scheduling-slot-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fixed-scheduling-slot-row label span,
.fixed-scheduling-overflow span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.fixed-scheduling-slot-row input {
  width: 100%;
  min-height: 42px;
}

.fixed-scheduling-overflow {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
}

.fixed-scheduling-overflow .demo-toggle {
  min-width: 82px;
}

.settings-feature-head-actions .fixed-scheduling-master-toggle {
  width: auto;
  min-width: 82px;
  max-width: none;
  min-height: 36px;
  padding: 4px 6px 4px 11px;
  justify-content: space-between;
}

.fixed-scheduling-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.fixed-scheduling-editor-actions .settings-helper-copy {
  margin: 0;
}

.settings-workspace-body .details-list {
  margin: 0 0 10px;
}

.settings-workspace-body .settings-workspace-form {
  margin-top: 0;
}

.settings-hours-list {
  display: grid;
  gap: 7px;
}

.settings-hours-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.68fr) minmax(190px, 1.1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.settings-hours-row.is-open {
  border-color: rgba(37,99,235,0.22);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.settings-hours-toggle {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  width: auto;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 900;
  text-transform: none;
  cursor: pointer;
}

.settings-hours-toggle input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--blue);
}

.settings-hours-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.settings-hours-times label {
  gap: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
}

.settings-hours-times input {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 850;
}

.settings-hours-times input:disabled {
  opacity: 0.55;
  background: #f8fafc;
}

.settings-hours-chip {
  justify-self: end;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.settings-hours-row.is-open .settings-hours-chip {
  color: var(--blue);
}

.settings-hours-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.settings-hours-actions .settings-save-note {
  flex: 1 1 auto;
  margin: 0;
}

.settings-workspace-form {
  margin-top: 12px;
}

.settings-workspace-form input,
.settings-workspace-form textarea {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.company-logo-uploader {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.company-logo-preview {
  display: grid;
  place-items: center;
  width: 156px;
  height: 70px;
  border: 1px solid #dbe5f3;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.company-logo-preview.is-light-logo {
  border-color: rgba(37,99,235,0.28);
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}

.company-logo-preview img {
  display: block;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  object-fit: contain;
}

.company-logo-placeholder {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.company-logo-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-logo-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.company-logo-copy span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
}

.settings-workspace-actions {
  margin-top: 4px;
}

.settings-email-panel {
  grid-column: 1 / -1;
}

.settings-support-panel {
  grid-column: 1 / -1;
}

.settings-support-body {
  margin-top: 10px;
  gap: 12px;
}

.settings-support-intro {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 11px;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.settings-support-intro strong {
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.2;
}

.settings-support-intro span {
  color: #4b6388;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.settings-support-form {
  gap: 11px;
}

.settings-support-type-group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-support-type-group .settings-choice {
  min-height: 80px;
}

.settings-support-type-group .settings-choice .icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.settings-support-type-group .settings-choice .icon svg {
  width: 20px;
  height: 20px;
}

.settings-support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: end;
  gap: 10px;
}

.settings-email-state-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #f5d08a;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.settings-email-state-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-email-state-head strong {
  font-size: 13px;
  line-height: 1;
  color: #9a3412;
}

.settings-email-state-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245,158,11,0.14);
  color: #92400e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.settings-email-state-card p {
  margin: 0;
  color: #7c4a03;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.settings-email-state-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.settings-email-state-guide span {
  display: block;
  padding: 8px 10px;
  border: 1px solid rgba(245,158,11,0.24);
  border-radius: 8px;
  background: rgba(255,255,255,0.76);
  color: #92400e;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.25;
}

.settings-email-state-card[data-email-state="verify"] {
  border-color: rgba(37,99,235,0.3);
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.settings-email-state-card[data-email-state="verify"] .settings-email-state-head strong,
.settings-email-state-card[data-email-state="verify"] p {
  color: #1e40af;
}

.settings-email-state-card[data-email-state="verify"] .settings-email-state-head span {
  background: rgba(37,99,235,0.16);
  color: #1d4ed8;
}

.settings-email-state-card[data-email-state="verify"] .settings-email-state-guide span {
  border-color: rgba(37,99,235,0.22);
  color: #1e3a8a;
}

.settings-email-state-card[data-email-state="pending"] {
  border-color: rgba(14,116,144,0.32);
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
}

.settings-email-state-card[data-email-state="pending"] .settings-email-state-head strong,
.settings-email-state-card[data-email-state="pending"] p {
  color: #0f4f6f;
}

.settings-email-state-card[data-email-state="pending"] .settings-email-state-head span {
  background: rgba(14,116,144,0.14);
  color: #0f4f6f;
}

.settings-email-state-card[data-email-state="pending"] .settings-email-state-guide span {
  border-color: rgba(14,116,144,0.22);
  color: #0f4f6f;
}

.settings-email-state-card[data-email-state="verified"] {
  border-color: rgba(22,163,74,0.3);
  background: linear-gradient(180deg, #ecfdf3 0%, #fff 100%);
}

.settings-email-state-card[data-email-state="verified"] .settings-email-state-head strong,
.settings-email-state-card[data-email-state="verified"] p {
  color: #166534;
}

.settings-email-state-card[data-email-state="verified"] .settings-email-state-head span {
  background: rgba(22,163,74,0.14);
  color: #166534;
}

.settings-email-state-card[data-email-state="verified"] .settings-email-state-guide span {
  border-color: rgba(22,163,74,0.22);
  color: #166534;
}

.settings-email-steps {
  display: grid;
  gap: 10px;
}

.settings-email-step {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.settings-email-step-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.settings-email-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  position: relative;
  top: 0;
}

.settings-email-step-head strong,
.settings-email-step-head > div > span {
  display: block;
}

.settings-email-step-head strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.settings-email-step-head > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.settings-email-form {
  display: grid;
  gap: 10px;
}

.settings-email-form input,
.settings-email-form textarea,
.settings-email-verify-row input {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.settings-email-form input::placeholder,
.settings-email-form textarea::placeholder,
.settings-email-verify-row input::placeholder {
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  opacity: 1;
}

.settings-email-verify-row {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(140px, 200px) minmax(140px, auto);
  align-items: end;
  gap: 10px;
}

.settings-email-verify-row label {
  margin: 0;
}

.settings-email-step-verify .secondary-btn,
.settings-email-step-verify .primary-btn {
  min-height: 42px;
}

.settings-review-channel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-review-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.settings-review-channel .settings-review-channel-toggle {
  min-width: 86px;
  margin-left: auto;
}

.settings-review-channel .settings-review-channel-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-hours-actions .primary-btn,
.settings-hours-actions .secondary-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  min-height: 38px;
  padding: 0 13px;
}

.settings-hours-actions .primary-btn.settings-save-idle:disabled {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.48;
}

.settings-toggle-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-choice {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 14px 52px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.settings-choice::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.75px solid #c5d1e3;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.settings-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.settings-choice:hover::after {
  border-color: #93b4f0;
}

.settings-choice.active {
  border-color: rgba(37, 99, 235, 0.7);
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12), 0 14px 30px rgba(37, 99, 235, 0.11);
}

.settings-choice.active::after {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(37,99,235,0.26);
}

.settings-choice:disabled {
  cursor: wait;
  opacity: 0.82;
}

.settings-choice .icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: var(--blue);
  background: #eaf2ff;
}

.settings-choice .icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}

.settings-choice.settings-choice-text {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 14px;
}

.settings-choice strong,
.settings-choice small {
  display: block;
}

.settings-choice strong {
  font-size: 16px;
  line-height: 1.15;
}

.settings-choice small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.warranty-timeframe-group {
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}

.warranty-timeframe-group .settings-choice {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 82px;
  gap: 10px;
  padding: 12px 48px 12px 12px;
}

.warranty-timeframe-group .settings-choice .icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.warranty-timeframe-group .settings-choice .icon svg {
  width: 20px;
  height: 20px;
}

.warranty-timeframe-group .settings-choice strong {
  font-size: 14px;
}

.warranty-timeframe-group .settings-choice small {
  margin-top: 4px;
  font-size: 11.5px;
}

.settings-warranty-communication {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.settings-save-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-provider-list {
  display: grid;
  gap: 10px;
}

.settings-provider-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.settings-provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-provider-head strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.settings-provider-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-provider-title .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--blue);
}

.settings-provider-title .icon svg {
  width: 18px;
  height: 18px;
}

.settings-provider-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #e2e8f0;
  color: #475569;
}

.settings-provider-pill.active {
  background: #dbeafe;
  color: #1d4ed8;
}

.settings-provider-pill.invalid {
  background: #fee2e2;
  color: #b91c1c;
}

.settings-provider-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.settings-integrations-panel .settings-feature-title-row strong,
.settings-integration-card .settings-feature-title-row strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.settings-integrations-panel .settings-feature-title-row span:not(.settings-provider-pill),
.settings-integration-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.settings-integration-card .settings-provider-pill {
  flex: 0 0 auto;
}

.settings-integration-actions {
  align-items: center;
  gap: 10px;
}

.settings-integration-actions .settings-save-note {
  flex: 1 1 220px;
  margin-top: 0;
}

.facebook-page-list {
  display: grid;
  gap: 10px;
}

.facebook-page-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.facebook-page-option div {
  min-width: 0;
}

.facebook-page-option strong,
.facebook-page-option span {
  display: block;
}

.facebook-page-option strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.facebook-page-option span,
.facebook-page-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.settings-provider-preview {
  color: #475569;
}

.settings-provider-item input {
  min-height: 42px;
  font-size: 14px;
  font-weight: 700;
}

.settings-provider-toggles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.settings-provider-toggles.is-simple {
  grid-template-columns: minmax(0, 1fr);
}

.settings-provider-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.settings-provider-option-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.settings-provider-option-label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.settings-provider-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  padding: 0;
  border: 1px solid rgba(37,99,235,0.38);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.settings-provider-help-btn:hover,
.settings-provider-help-btn:focus-visible {
  background: #dbeafe;
  border-color: rgba(37,99,235,0.56);
  outline: none;
}

.settings-provider-toggle {
  min-width: 86px;
  margin-left: auto;
}

.settings-provider-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-provider-option-key {
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
}

.settings-provider-option-key.is-hidden {
  display: none;
}

.settings-provider-option-key:disabled {
  opacity: 0.5;
}

.settings-provider-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.settings-provider-item input[data-payment-provider-advanced] {
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
}

.settings-provider-item input[data-payment-provider-advanced]:disabled {
  opacity: 0.56;
}

.settings-dealership-list {
  display: grid;
  gap: 10px;
}

.settings-dealership-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.settings-dealership-row .settings-dealership-remove {
  justify-self: start;
  min-height: 38px;
  padding: 0 12px;
}

.settings-inline-field {
  display: grid;
  grid-template-columns: auto minmax(90px, 120px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.settings-inline-field span {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

.settings-inline-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.settings-inline-field input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.settings-inline-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dealerships-panel {
  display: grid;
  gap: 12px;
}

.dealerships-panel > .panel-head {
  align-items: flex-start;
}

.dealerships-panel > .panel-head > div:first-child {
  min-width: 0;
}

.dealerships-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.dealerships-head-actions .primary-btn {
  white-space: nowrap;
}

.dealerships-directory {
  display: grid;
  gap: 14px;
}

.dealership-requests-section {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.dealership-requests-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.dealership-requests-head h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 22px;
}

.dealership-requests-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.dealership-request-dialog {
  width: min(1180px, calc(100vw - 24px));
}

.dealership-request-date {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 850;
}

.dealership-request-dialog menu {
  gap: 12px;
}

.dealership-request-dialog .dealership-request-cancel-btn {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  box-shadow: none;
}

.dealership-request-dialog .dealership-request-cancel-btn:hover,
.dealership-request-dialog .dealership-request-cancel-btn:focus-visible {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
}

.dealership-request-dialog .dealership-request-save-btn {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: none;
}

.dealership-request-dialog .dealership-request-save-btn:hover,
.dealership-request-dialog .dealership-request-save-btn:focus-visible {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1e40af;
}

.dealership-request-dialog .dealership-request-schedule-btn {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.dealership-request-dialog .dealership-request-schedule-btn:hover,
.dealership-request-dialog .dealership-request-schedule-btn:focus-visible {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.dealership-request-summary,
.dealership-request-vehicles,
.dealership-request-scheduler,
.dealership-request-rescheduler {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #f8fbff;
}

.dealership-request-summary .field-title,
.dealership-request-scheduler .field-title,
.dealership-request-rescheduler .field-title {
  font-size: 11px;
  font-weight: 800;
}

.dealership-request-summary input,
.dealership-request-summary textarea,
.dealership-request-scheduler input,
.dealership-request-scheduler textarea,
.dealership-request-scheduler select,
.dealership-request-rescheduler input,
.dealership-request-rescheduler textarea,
.dealership-request-rescheduler select {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
}

.dealership-request-summary textarea,
.dealership-request-scheduler textarea,
.dealership-request-rescheduler textarea {
  min-height: 86px;
}

.dealership-request-summary input::placeholder,
.dealership-request-summary textarea::placeholder,
.dealership-request-scheduler input::placeholder,
.dealership-request-scheduler textarea::placeholder,
.dealership-request-rescheduler input::placeholder,
.dealership-request-rescheduler textarea::placeholder {
  color: #98a4b8;
  font-weight: 600;
}

.dealership-request-assessments {
  display: grid;
  gap: 16px;
}

.dealership-request-add-vehicle {
  --dealership-vehicle-action-size: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 0 16px 0 18px;
  border: 1.5px dashed #9bbcfb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.dealership-request-add-vehicle:hover,
.dealership-request-add-vehicle:focus-visible {
  border-color: var(--blue);
  background: #eff6ff;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.dealership-request-add-vehicle.is-disabled,
.dealership-request-add-vehicle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.dealership-request-add-vehicle .icon {
  display: grid;
  place-items: center;
  width: var(--dealership-vehicle-action-size);
  height: var(--dealership-vehicle-action-size);
  flex: 0 0 var(--dealership-vehicle-action-size);
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
}

.dealership-request-add-vehicle .icon svg {
  width: 22px;
  height: 22px;
}

.dealership-request-assessments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dealership-request-assessments-toolbar div {
  display: grid;
  gap: 3px;
}

.dealership-request-assessments-toolbar h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.12;
}

.dealership-request-assessments-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dealership-request-assessment {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.dealership-request-assessment.is-expanded {
  border-color: rgba(37, 99, 235, 0.32);
  background: #fbfdff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.dealership-request-assessment.is-locked {
  background: #f8fafc;
  opacity: 0.78;
}

.dealership-request-assessment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-height: 42px;
}

.dealership-request-assessment-title {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 58px;
}

.dealership-vehicle-expand-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.dealership-vehicle-expand-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 4px;
  border-radius: 12px;
}

.dealership-vehicle-expand-symbol {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.dealership-vehicle-expand-symbol::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.dealership-request-assessment.is-expanded .dealership-vehicle-expand-symbol::before {
  transform: translateY(2px) rotate(225deg);
}

.dealership-vehicle-expand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dealership-vehicle-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.dealership-vehicle-title-line strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}

.dealership-vehicle-title-line .status {
  flex: 0 0 auto;
  line-height: 1;
}

.dealership-vehicle-expand-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dealership-request-assessment-actions {
  --dealership-vehicle-action-size: 42px;
  position: absolute;
  top: 16px;
  right: 12px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.dealership-remove-vehicle-btn {
  display: inline-grid;
  place-items: center;
  width: var(--dealership-vehicle-action-size);
  height: var(--dealership-vehicle-action-size);
  flex: 0 0 var(--dealership-vehicle-action-size);
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff1f2;
  color: #dc2626;
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.12);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dealership-remove-vehicle-btn:hover,
.dealership-remove-vehicle-btn:focus-visible {
  border-color: #f87171;
  background: #fee2e2;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.dealership-remove-vehicle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

.dealership-request-assessment-body {
  display: grid;
  gap: 14px;
}

.dealership-request-assessment-body[hidden] {
  display: none;
}

.dealership-vehicle-fields,
.dealership-request-schedule-grid {
  display: grid;
  gap: 10px;
}

.dealership-vehicle-fields {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dealership-vehicle-fields label {
  grid-column: span 2;
}

.dealership-vehicle-fields label:nth-child(4),
.dealership-vehicle-fields label:nth-child(5) {
  grid-column: span 3;
}

.dealership-request-schedule-grid {
  grid-template-columns: repeat(2, minmax(220px, 280px));
  justify-content: start;
}

.dealership-vin-scanner {
  background: #f8fbff;
}

.dealership-assessment-panel {
  margin: 0;
}

.dealership-request-scheduler > div:first-child,
.dealership-request-rescheduler > div:first-child {
  display: grid;
  gap: 4px;
}

.dealership-request-scheduler > div:first-child strong,
.dealership-request-rescheduler > div:first-child strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.dealership-request-scheduler > div:first-child span,
.dealership-request-rescheduler > div:first-child span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.dealership-request-scheduler .business-hours-note,
.dealership-request-rescheduler .business-hours-note {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  font-size: 11.5px;
}

.dealership-request-scheduler .business-hours-note .icon,
.dealership-request-rescheduler .business-hours-note .icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.dealership-request-scheduler .is-disabled,
.dealership-request-rescheduler .is-disabled {
  opacity: 0.65;
}

.dealership-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #d8e3f3;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0) 34%),
    #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dealership-card:hover {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.13);
  transform: translateY(-1px);
}

.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;
}

.dealership-card-info {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,251,255,0.96)),
    #f8fbff;
}

.dealership-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dealership-card-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.dealership-logo-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #7aa7ff);
  color: #fff;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.24);
}

.dealership-logo-badge .icon {
  width: 22px;
  height: 22px;
}

.dealership-logo-badge svg {
  width: 100%;
  height: 100%;
  color: currentColor;
  fill: currentColor;
}

.dealership-card-title strong {
  color: var(--ink);
  display: block;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dealership-card-title small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 5px;
  max-width: 720px;
}

.dealership-card-pills {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dealership-card-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.dealership-card-details-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #bdd3ff;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.dealership-card-details-toggle:hover,
.dealership-card-details-toggle:focus-visible {
  border-color: var(--blue);
  background: #e0ecff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
  outline: none;
}

.dealership-card-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: #fff;
  color: currentColor;
  transition: transform 0.16s ease;
}

.dealership-card-toggle-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}

.dealership-card.is-info-open .dealership-card-toggle-icon {
  transform: rotate(180deg);
}

.dealership-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef3f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.dealership-pill.is-active {
  background: #dcfce7;
  color: #166534;
}

.dealership-pill.is-disabled {
  background: #fee2e2;
  color: #991b1b;
}

.dealership-card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
}

.dealership-packet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.7);
}

.dealership-packet-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dealership-packet-row strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.2;
}

.dealership-packet-row span:not(.demo-switch-track):not(.demo-switch-thumb) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.dealership-packet-toggle {
  position: relative;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
  width: 48px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dealership-packet-toggle.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.dealership-packet-toggle:hover,
.dealership-packet-toggle:focus-visible {
  background: transparent;
  box-shadow: none;
}

.dealership-stat {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dealership-stat span {
  display: block;
  color: #426083;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
}

.dealership-stat strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.dealership-info-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin: 14px 0 4px;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,251,255,0.96)),
    #f8fbff;
}

.dealership-info-overview div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dealership-info-overview div.is-wide {
  grid-column: 1 / -1;
}

.dealership-info-overview span {
  display: block;
  color: #426083;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  margin: 0;
}

.dealership-info-overview strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.dealership-info-history {
  display: grid;
  gap: 8px;
}

.dealership-info-dialog .lead-form-section {
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 12px;
}

.dealership-info-dialog .lead-form-section-title {
  gap: 12px;
}

.dealership-info-dialog .lead-form-section-title .icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.dealership-info-dialog .lead-form-section-title strong {
  font-size: 18px;
}

.dealership-info-dialog .lead-form-section-title small {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 750;
}

.dealership-info-dialog .empty-state.table-empty {
  min-height: 96px;
  padding: 18px 22px;
}

.dealership-info-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e8f3;
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.dealership-info-history-row.is-clickable {
  cursor: pointer;
}

.dealership-info-history-row.is-clickable:hover,
.dealership-info-history-row.is-clickable:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  outline: none;
}

.dealership-info-history-row strong,
.dealership-info-history-row small {
  display: block;
  overflow-wrap: anywhere;
}

.dealership-info-history-row strong {
  color: var(--ink);
  font-size: 13px;
}

.dealership-info-history-row small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.dealership-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef4ff;
  color: #31537d;
  font-size: 11px;
  font-weight: 850;
}

.dealership-history-status.completed {
  background: #dcfce7;
  color: #166534;
}

.dealership-history-status.in_progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.dealership-history-status.canceled {
  background: #fee2e2;
  color: #991b1b;
}

.dealership-card-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dealership-card-actions .btn-sm {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 12px;
  font-weight: 700;
}

.dealership-card-actions [data-dealership-action="menu"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.dealership-card-actions [data-dealership-action="menu"]:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.dealership-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.dealership-access-row input {
  min-height: 40px;
}

.settings-helper-copy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {
  .settings-field-grid {
    grid-template-columns: 1fr;
  }
}

.settings-linked-input[readonly] {
  cursor: not-allowed;
  border-color: #dbe5f3;
  background: #f8fbff;
  color: #64748b;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.05);
}

.settings-linked-copy {
  margin-top: -2px;
}

.settings-helper-copy code {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
}

.settings-helper-dialog form {
  max-width: 520px;
}

.settings-helper-dialog .dialog-copy {
  margin: 6px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.scheduling-help-dialog form,
.quote-pricing-help-dialog form,
.automatic-sms-help-dialog form {
  max-width: 620px;
}

.scheduling-help-dialog .dialog-head h2,
.quote-pricing-help-dialog .dialog-head h2,
.automatic-sms-help-dialog .dialog-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scheduling-help-dialog .dialog-title-icon,
.quote-pricing-help-dialog .dialog-title-icon,
.automatic-sms-help-dialog .dialog-title-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 999px;
}

.scheduling-help-content {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.scheduling-help-section {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.scheduling-help-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.scheduling-help-section p,
.scheduling-help-section li {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.scheduling-help-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.scheduling-help-section code {
  padding: 1px 5px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 850;
}

#emailSendingStatus[data-email-state="setup"] {
  color: #92400e;
}

#emailSendingStatus[data-email-state="verify"] {
  color: #1d4ed8;
}

#emailSendingStatus[data-email-state="pending"] {
  color: #0f4f6f;
}

#emailSendingStatus[data-email-state="verified"] {
  color: #166534;
}

.lead-follow-up-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.followup-automation-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  background: #f7fbff;
}

.followup-automation-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.followup-automation-toggle span {
  display: grid;
  gap: 3px;
}

.followup-automation-toggle strong {
  color: var(--ink);
  font-weight: 900;
}

.followup-automation-toggle small {
  color: #64748b;
  font-weight: 750;
  line-height: 1.35;
}

.followup-automation-fields {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
}

.followup-automation-fields[hidden] {
  display: none;
}

.followup-automation-fields #leadFollowUpSubjectWrap {
  grid-column: 1 / -1;
}

.followup-automation-pill {
  border-color: #c7d9ff !important;
  background: #eef5ff !important;
  color: #1d4ed8 !important;
}

.followup-automation-pill.sent {
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
  color: #166534 !important;
}

.followup-automation-pill.failed {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
  color: #b91c1c !important;
}

@media (max-width: 640px) {
  .followup-automation-fields {
    grid-template-columns: 1fr;
  }
}

.lead-email-meta {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.lead-email-meta strong {
  color: var(--ink);
  font-size: 13px;
}

.lead-email-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#followUpTemplatesSummary,
#followUpTemplatesStatus {
  font-size: 12.5px;
  font-weight: 700;
}

#followUpTemplatesBody label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

#followUpTemplatesBody textarea {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

#followUpTemplatesBody textarea::placeholder {
  color: #9aa6b8;
  font-size: 13px;
  font-weight: 600;
}

.communication-builder-body {
  overflow: visible;
}

.communication-builder {
  display: grid;
  grid-template-columns: minmax(140px, 0.22fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.communication-builder-steps {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}

.communication-builder-steps button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.communication-builder-steps button > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #edf5ff;
  color: #2563eb;
  line-height: 1;
}

.communication-builder-steps button > strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-builder-steps button:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 21px;
  width: 2px;
  height: 12px;
  background: #d8e4f5;
}

.communication-builder-steps button.active {
  border-color: #9dbdff;
  background: #eaf2ff;
  color: #1d4ed8;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.communication-builder-steps button.active > span {
  background: #2563eb;
  color: #fff;
}

.communication-builder-steps button.complete {
  border-color: #9dbdff;
  background: #f5f9ff;
  color: #1d4ed8;
}

.communication-builder-steps button.complete > span {
  background: #dbeafe;
  color: #1d4ed8;
}

.communication-builder-steps button.active::after,
.communication-builder-steps button.complete::after {
  background: linear-gradient(180deg, #2563eb, #d8e4f5);
}

.communication-builder-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.communication-builder-guide {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #bfd5ff;
  border-radius: 8px;
  background: #eff6ff;
}

.communication-builder-guide span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.communication-builder-guide h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.communication-builder-guide p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.communication-builder-step {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fbff;
}

.communication-builder-step[hidden] {
  display: none;
}

.communication-builder-step-head {
  display: grid;
  gap: 2px;
}

.communication-builder-step-head span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.communication-builder-step-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.communication-template-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.communication-template-list,
.communication-option-grid,
.communication-trigger-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.communication-template-choice,
.communication-option-btn,
.communication-trigger-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #c8d8ef;
  border-radius: 8px;
  background: #fff;
  color: #40506a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.communication-template-choice.active,
.communication-option-btn.active {
  border-color: #9dbdff;
  background: #eaf2ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.communication-template-new-btn {
  min-height: 38px;
  white-space: nowrap;
}

.communication-option-grid.compact {
  max-width: 520px;
}

.communication-trigger-builder {
  display: grid;
  grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.communication-trigger-bank {
  align-content: start;
  padding: 10px;
  border: 1px dashed #afc7f5;
  border-radius: 8px;
  background: #f0f6ff;
}

.communication-trigger-chip {
  background: #fff;
}

.communication-trigger-chip[draggable="true"] {
  cursor: grab;
}

.communication-trigger-chain {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fbff;
}

.communication-trigger-chain::before {
  content: none;
}

.communication-trigger-chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
}

.communication-trigger-chain-head div {
  display: grid;
  gap: 2px;
}

.communication-trigger-chain-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.communication-trigger-chain-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.communication-trigger-step-list {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 0;
}

.communication-trigger-step-list::before {
  content: none;
}

.communication-trigger-chain.is-drag-over {
  border-color: #8fb6ff;
  background: #f5f9ff;
}

.communication-trigger-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.communication-trigger-step strong,
.communication-trigger-step div > span {
  display: block;
}

.communication-trigger-step strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 950;
}

.communication-trigger-step div > span {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}

.communication-trigger-remove {
  width: 34px;
  height: 34px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.communication-trigger-empty {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.communication-builder-step input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd8ea;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.followup-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 0;
}

.followup-builder::before {
  content: "Insert";
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.followup-component-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.followup-component-plus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff !important;
  line-height: 0;
  transition: background 0.16s ease;
}

.followup-component-plus::before,
.followup-component-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.followup-component-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.followup-component-btn:hover {
  border-color: rgba(37,99,235,0.42);
  background: var(--wash);
  color: var(--blue-dark);
  transform: translateY(-1px);
}

.followup-component-btn:hover .followup-component-plus {
  background: var(--blue-dark);
}

.followup-template-preview {
  margin: -2px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.followup-template-preview strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lead-followup-builder {
  margin-top: -6px;
}

.communication-builder-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #d8e4f5;
  background: #fff;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.communication-builder-actions .settings-save-note {
  flex: 1 1 260px;
}

.communication-template-library {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #d8e4f5;
}

.communication-template-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.communication-template-library-head div {
  display: grid;
  gap: 2px;
}

.communication-template-library-head span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.communication-template-library-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.communication-template-library-list {
  display: grid;
  gap: 10px;
}

.communication-template-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
}

.communication-template-library-item.active {
  border-color: #9dbdff;
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.communication-template-library-item > button[data-communication-library-template-id] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.communication-template-library-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff7f7;
  color: #dc2626;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.communication-template-library-delete:hover,
.communication-template-library-delete:focus-visible {
  border-color: #fca5a5;
  background: #fef2f2;
  outline: none;
}

.communication-template-library-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.communication-template-library-item strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.communication-template-library-item span,
.communication-template-library-item small,
.communication-template-library-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.communication-template-library-item small {
  justify-self: end;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

.communication-template-library-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #bfd5ff;
  border-radius: 8px;
  background: #f8fbff;
}

@media (max-width: 780px) {
  .communication-builder,
  .communication-template-chooser,
  .communication-trigger-builder {
    grid-template-columns: 1fr;
  }

  .communication-builder-steps {
    position: static;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
  }

  .communication-builder-steps button {
    min-width: 124px;
  }

  .communication-builder-steps button:not(:last-child)::after {
    display: none;
  }

  .communication-template-library-item button {
    grid-template-columns: 1fr;
  }

  .communication-template-library-item {
    grid-template-columns: 1fr;
  }

  .communication-template-library-delete {
    justify-self: start;
    margin: 0 0 12px 14px;
  }

  .communication-template-library-item small {
    justify-self: start;
  }
}

#jobEmailDialog .dialog-sub {
  font-size: 12.5px;
}

#jobEmailDialog label {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
}

#jobEmailDialog input,
#jobEmailDialog textarea,
#jobEmailDialog select {
  font-size: 15px;
  font-weight: 650;
}

#jobEmailDialog select {
  font-weight: 700;
}

#jobEmailDialog .lead-email-meta strong {
  font-size: 12.5px;
  font-weight: 700;
}

#jobEmailDialog .lead-email-meta span {
  font-size: 11.5px;
  font-weight: 700;
}

.procedure-builder-panel {
  grid-column: 1 / -1;
}

.procedure-builder-body {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.procedure-builder-body[hidden] {
  display: none;
}

.procedure-builder-form {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--wash);
}

.procedure-builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 26px;
}

.procedure-autosave-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.procedure-autosave-pill.is-saving,
.procedure-autosave-pill.is-pending {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.procedure-autosave-pill.is-saved {
  color: #137333;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.procedure-autosave-pill.is-error {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}

.lead-forms-panel {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.website-builder-panel {
  display: grid;
  gap: 18px;
  overflow: hidden;
}

.website-builder-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239,246,255,0.94), rgba(255,255,255,0.98) 52%, rgba(236,253,245,0.5)),
    #fff;
}

.website-builder-hero::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -48px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  border: 22px solid rgba(37,99,235,0.08);
  pointer-events: none;
}

.website-builder-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-builder-hero h2 {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}

.website-builder-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.42;
}

.website-builder-status {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 13px 14px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.76);
  box-shadow: 0 12px 28px rgba(15,23,42,0.06);
}

.website-builder-status span {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.website-builder-status strong {
  color: var(--blue);
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.website-builder-status .secondary-btn {
  width: 100%;
  margin-top: 4px;
}

.website-builder-grid,
.website-builder-split {
  display: grid;
  gap: 14px;
}

.website-builder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-builder-ai-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: end;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.04), rgba(239,246,255,0.88)),
    #fff;
}

.website-builder-ai-copy {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.website-builder-ai-copy .icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.website-builder-ai-copy .icon svg {
  width: 22px;
  height: 22px;
}

.website-builder-ai-copy strong,
.website-builder-ai-copy small {
  display: block;
  min-width: 0;
}

.website-builder-ai-copy strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.website-builder-ai-copy small,
.website-builder-ai-actions small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.website-builder-ai-card label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.website-builder-ai-card textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.website-builder-ai-actions {
  display: grid;
  gap: 8px;
  min-width: 180px;
}

.website-builder-ai-actions .primary-btn {
  width: 100%;
}

.website-builder-stage,
.website-builder-next {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.website-builder-stage.is-active {
  border-color: rgba(37,99,235,0.28);
  background: #f8fbff;
}

.website-builder-stage > .icon,
.website-builder-next > .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.website-builder-stage > .icon svg,
.website-builder-next > .icon svg {
  width: 21px;
  height: 21px;
}

.website-builder-stage strong,
.website-builder-stage small,
.website-builder-next strong,
.website-builder-next small {
  display: block;
  min-width: 0;
}

.website-builder-stage strong,
.website-builder-next strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.website-builder-stage small,
.website-builder-next small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.website-builder-split {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  margin-top: 18px;
}

.website-builder-card {
  display: grid;
  gap: 14px;
}

.website-builder-source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.website-builder-source-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: #f8fafc;
}

.website-builder-source-list b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.website-builder-source-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.website-builder-rebuild-panel {
  margin-top: 18px;
}

.website-builder-component-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.website-builder-component-grid article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.website-builder-component-grid article > .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.website-builder-component-grid article > .icon svg {
  width: 21px;
  height: 21px;
}

.website-builder-component-grid strong,
.website-builder-component-grid small {
  display: block;
  min-width: 0;
}

.website-builder-component-grid strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.website-builder-component-grid small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.website-builder-editor {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.website-builder-editor[hidden] {
  display: none;
}

.website-builder-editor .panel-head {
  align-items: flex-start;
  gap: 12px;
}

.website-builder-editor .panel-head .primary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.website-builder-form {
  min-width: 0;
}

.website-builder-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.website-builder-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.website-builder-wide-field {
  grid-column: 1 / -1;
}

.website-builder-form-grid input,
.website-builder-form-grid select,
.website-builder-form-grid textarea {
  width: 100%;
  min-width: 0;
}

.website-builder-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
}

.website-builder-subhead:not(:first-child) {
  margin-top: 18px;
}

.website-builder-subhead strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.website-builder-subhead span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.website-builder-range-field {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.website-builder-range-field .field-title {
  grid-column: 1 / -1;
}

.website-builder-range-field output {
  min-width: 44px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.website-builder-section-list {
  display: grid;
  gap: 10px;
}

.website-builder-component-workbench {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.website-builder-component-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.website-builder-section-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)),
    #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,0.04);
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.website-builder-section-row:active {
  cursor: grabbing;
}

.website-builder-section-row.is-dragging {
  opacity: 0.62;
  transform: scale(0.985);
  box-shadow: 0 18px 38px rgba(37,99,235,0.16);
}

.website-builder-section-row.is-disabled {
  opacity: 0.62;
}

.website-builder-section-row.is-active {
  border-color: rgba(37,99,235,0.42);
  background: #eff6ff;
  box-shadow: 0 14px 32px rgba(37,99,235,0.1);
}

.website-builder-drag-handle {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-auto-rows: 4px;
  gap: 4px;
  place-content: center;
  width: 32px;
  height: 44px;
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 8px;
  background: rgba(248,250,252,0.92);
  color: var(--muted);
  cursor: grab;
}

.website-builder-drag-handle span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 8px 0 0 currentColor;
}

.website-builder-section-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.website-builder-component-type {
  width: fit-content;
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-builder-section-main strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.website-builder-section-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.website-builder-section-main em {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.website-builder-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.website-builder-section-actions .icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.website-builder-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.website-builder-section-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.website-builder-component-editor {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37,99,235,0.08), rgba(255,255,255,0.96) 44%),
    #fff;
}

.website-builder-component-editor[hidden] {
  display: none;
}

.website-builder-component-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}

.website-builder-component-editor-head strong,
.website-builder-component-editor-head small {
  display: block;
}

.website-builder-component-editor-head strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.website-builder-component-editor-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.website-builder-live-preview {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 8px;
  background: #0f172a;
  box-shadow: 0 18px 46px rgba(15,23,42,0.16);
}

.website-builder-live-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.website-builder-live-preview-head .field-title {
  color: rgba(226,232,240,0.72);
}

.website-builder-live-preview-head strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.website-builder-live-preview-frame {
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: #07111f;
}

.website-builder-preview-page {
  min-height: 460px;
  padding: 18px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 82% 6%, rgba(37,99,235,0.2), transparent 28%),
    linear-gradient(180deg, #07111f, #111827);
}

.website-builder-preview-page.is-template-standard {
  color: #0f172a;
  background:
    linear-gradient(180deg, #f8fafc, #fff 42%, #eef6ff);
}

.website-builder-preview-page nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}

.website-builder-preview-page nav strong {
  font-size: 13px;
  font-weight: 950;
}

.website-builder-preview-page nav span {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.68;
}

.website-builder-preview-hero {
  display: grid;
  gap: 10px;
  padding: 28px 0 18px;
}

.website-builder-preview-hero > span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.website-builder-preview-page.is-template-standard .website-builder-preview-hero > span {
  color: var(--blue);
}

.website-builder-preview-hero h3 {
  max-width: 14em;
  margin: 0;
  font-size: 28px;
  line-height: 1.02;
}

.website-builder-preview-hero p {
  max-width: 32em;
  margin: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  opacity: 0.72;
}

.website-builder-preview-hero button {
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.website-builder-preview-hero div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.website-builder-preview-hero small {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.84;
}

.website-builder-preview-page.is-template-standard .website-builder-preview-hero small {
  background: #fff;
}

.website-builder-preview-hero small b {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 950;
}

.website-builder-preview-section-list {
  display: grid;
  gap: 10px;
}

.website-builder-preview-section {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}

.website-builder-preview-page.is-template-standard .website-builder-preview-section {
  background: #fff;
}

.website-builder-preview-section.is-active {
  border-color: rgba(96,165,250,0.88);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.36);
}

.website-builder-preview-section span,
.website-builder-preview-section small {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0.66;
  text-transform: uppercase;
}

.website-builder-preview-section strong {
  color: inherit;
  font-size: 14px;
  font-weight: 950;
}

.website-builder-preview-section p {
  margin: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.36;
  opacity: 0.68;
}

.website-builder-template-studio {
  padding: 0;
  overflow: hidden;
  border-color: rgba(30,41,59,0.72);
  background:
    radial-gradient(circle at 8% 16%, rgba(139,92,246,0.28), transparent 24%),
    linear-gradient(180deg, #080d1b, #050914);
  box-shadow: 0 26px 70px rgba(2,6,23,0.28);
}

.website-builder-studio-form {
  display: block;
}

.website-builder-studio-shell {
  display: grid;
  grid-template-rows: 54px 72px minmax(640px, calc(100vh - 280px));
  min-height: 780px;
  color: #f8fafc;
  background: #050914;
}

.website-builder-browser-chrome,
.website-builder-studio-toolbar {
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(148,163,184,0.16);
  background: rgba(10,15,31,0.94);
}

.website-builder-browser-chrome {
  grid-template-columns: 142px minmax(220px, 560px) 1fr;
  gap: 16px;
  padding: 0 22px;
}

.website-builder-window-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}

.website-builder-window-dots span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fb7185;
}

.website-builder-window-dots span:nth-child(2) {
  background: #fbbf24;
}

.website-builder-window-dots span:nth-child(3) {
  background: #22c55e;
}

.website-builder-address-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(30,41,59,0.52), rgba(15,23,42,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  color: rgba(248,250,252,0.9);
}

.website-builder-address-bar b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-browser-actions {
  justify-self: end;
  color: rgba(226,232,240,0.74);
}

.website-builder-studio-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  gap: 18px;
  padding: 0 22px;
}

.website-builder-studio-brand,
.website-builder-device-controls,
.website-builder-studio-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.website-builder-studio-brand button,
.website-builder-device-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: transparent;
  color: rgba(248,250,252,0.86);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.website-builder-studio-brand button:hover,
.website-builder-studio-brand button.is-active,
.website-builder-device-controls button:hover,
.website-builder-device-controls button.is-active {
  border-color: rgba(167,139,250,0.42);
  background: rgba(124,58,237,0.22);
  color: #fff;
}

.website-builder-studio-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #c4b5fd, transparent 28%),
    linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 950;
}

.website-builder-device-controls {
  padding: 5px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: rgba(15,23,42,0.7);
}

.website-builder-device-controls button {
  width: 44px;
  height: 38px;
}

.website-builder-studio-actions {
  justify-content: flex-end;
}

.website-builder-studio-actions .secondary-btn,
.website-builder-studio-actions .primary-btn {
  min-height: 40px;
  border-radius: 7px;
}

.website-builder-studio-body {
  display: grid;
  grid-template-columns: 320px minmax(420px, 1fr) 320px;
  min-height: 0;
  overflow: hidden;
}

.website-builder-layers-panel,
.website-builder-inspector-panel {
  min-height: 0;
  overflow: auto;
  border-color: rgba(148,163,184,0.16);
  background:
    linear-gradient(180deg, rgba(15,23,42,0.94), rgba(10,15,31,0.98));
  scrollbar-color: rgba(139,92,246,0.45) rgba(15,23,42,0.6);
  scrollbar-width: thin;
}

.website-builder-layers-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 18px;
  border-right: 1px solid rgba(148,163,184,0.16);
}

.website-builder-inspector-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 18px;
  border-left: 1px solid rgba(148,163,184,0.16);
}

.website-builder-studio-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 8px;
  background: rgba(15,23,42,0.74);
}

.website-builder-studio-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(226,232,240,0.82);
  font-weight: 850;
  cursor: pointer;
}

.website-builder-studio-tabs button.is-active {
  background: rgba(148,163,184,0.18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.website-builder-device-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid rgba(167,139,250,0.8);
  border-radius: 8px;
  background: rgba(124,58,237,0.16);
  box-shadow: inset 4px 0 0 #8b5cf6;
}

.website-builder-device-row strong {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.website-builder-device-row small {
  color: rgba(226,232,240,0.72);
  font-size: 11px;
  font-weight: 850;
}

.website-builder-template-studio .website-builder-section-list {
  gap: 7px;
}

.website-builder-template-studio .website-builder-section-row {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  min-height: 54px;
  padding: 10px 10px 10px 12px;
  border-color: rgba(148,163,184,0.14);
  background: rgba(15,23,42,0.66);
  box-shadow: none;
}

.website-builder-template-studio .website-builder-section-row:hover {
  border-color: rgba(167,139,250,0.38);
  background: rgba(30,41,59,0.72);
}

.website-builder-template-studio .website-builder-section-row.is-active {
  border-color: rgba(167,139,250,0.78);
  background: rgba(124,58,237,0.18);
  box-shadow: inset 3px 0 0 #8b5cf6;
}

.website-builder-template-studio .website-builder-section-row.is-disabled {
  opacity: 0.45;
}

.website-builder-template-studio .website-builder-drag-handle {
  width: 24px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #a78bfa;
}

.website-builder-template-studio .website-builder-section-main {
  gap: 2px;
}

.website-builder-template-studio .website-builder-section-main strong {
  color: #f8fafc;
  font-size: 14px;
}

.website-builder-template-studio .website-builder-section-main small {
  color: rgba(203,213,225,0.66);
  font-size: 11px;
}

.website-builder-template-studio .website-builder-component-type,
.website-builder-template-studio .website-builder-section-main em {
  color: #a78bfa;
}

.website-builder-template-studio .website-builder-section-main em {
  margin-top: 3px;
  background: rgba(139,92,246,0.12);
}

.website-builder-template-studio .website-builder-section-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
  padding-left: 34px;
}

.website-builder-template-studio .website-builder-section-actions .secondary-btn,
.website-builder-template-studio .website-builder-section-actions .icon-btn {
  min-height: 30px;
  height: 30px;
  border-color: rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.74);
  color: rgba(226,232,240,0.86);
}

.website-builder-template-studio .website-builder-section-toggle {
  justify-self: end;
  color: rgba(226,232,240,0.82);
}

.website-builder-template-studio .website-builder-section-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.website-builder-template-studio .website-builder-section-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(82px, 1fr) auto;
  align-items: stretch;
  min-height: 208px;
  padding: 14px;
  border-color: rgba(148,163,184,0.18);
  background:
    linear-gradient(180deg, rgba(30,41,59,0.86), rgba(15,23,42,0.82)),
    #0f172a;
}

.website-builder-template-studio .website-builder-section-row:hover {
  border-color: rgba(96,165,250,0.48);
  background:
    linear-gradient(180deg, rgba(37,99,235,0.22), rgba(15,23,42,0.88)),
    #0f172a;
}

.website-builder-template-studio .website-builder-section-row.is-active {
  border-color: rgba(96,165,250,0.86);
  background:
    linear-gradient(180deg, rgba(37,99,235,0.32), rgba(15,23,42,0.9)),
    #0f172a;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.22), 0 18px 46px rgba(37,99,235,0.18);
}

.website-builder-template-studio .website-builder-section-main {
  display: grid;
  gap: 8px;
  min-height: 58px;
}

.website-builder-template-studio .website-builder-component-type {
  width: auto;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}

.website-builder-template-studio .website-builder-section-main strong {
  color: rgba(203,213,225,0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.website-builder-component-icon {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,0.18), transparent 32%),
    rgba(37,99,235,0.14);
  color: #93c5fd;
}

.website-builder-component-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
}

.website-builder-component-source {
  align-self: end;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(96,165,250,0.16);
  border-radius: 999px;
  background: rgba(15,23,42,0.64);
  color: rgba(147,197,253,0.9);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.website-builder-template-studio .website-builder-section-actions {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px 26px 26px;
  align-items: center;
  gap: 6px;
  padding-left: 0;
}

.website-builder-template-studio .website-builder-drag-handle {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 9px;
  background: rgba(15,23,42,0.74);
}

.website-builder-template-studio .website-builder-section-actions .secondary-btn {
  min-width: 0;
  width: 38px;
  padding-inline: 0;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

.website-builder-template-studio .website-builder-section-actions .icon-btn {
  width: 26px;
  min-width: 26px;
  font-size: 12px;
  padding: 0;
}

.website-builder-template-studio .website-builder-section-toggle {
  justify-self: stretch;
  min-width: 0;
}

.website-builder-template-studio .website-builder-section-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.website-builder-canvas-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 48px 40px;
  background:
    radial-gradient(circle at 50% 0%, rgba(37,99,235,0.12), transparent 28%),
    #020305;
}

.website-builder-canvas-stage {
  display: grid;
  place-items: start center;
  min-width: 720px;
}

.website-builder-template-studio .website-builder-live-preview {
  position: static;
  width: min(100%, 980px);
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 28px 80px rgba(0,0,0,0.42);
  transition: width 0.22s ease;
}

.website-builder-template-studio .website-builder-live-preview-head {
  min-height: 34px;
  padding: 0 2px 10px;
}

.website-builder-template-studio .website-builder-live-preview-head .field-title,
.website-builder-template-studio .website-builder-live-preview-head strong {
  color: rgba(226,232,240,0.78);
}

.website-builder-template-studio .website-builder-live-preview-frame {
  min-height: 620px;
  border-color: rgba(148,163,184,0.2);
  border-radius: 0;
  background: #07111f;
  transition: min-height 0.22s ease;
}

.website-builder-template-studio .website-builder-live-preview.is-preview-tablet {
  width: min(100%, 720px);
}

.website-builder-template-studio .website-builder-live-preview.is-preview-mobile {
  width: min(100%, 390px);
}

.website-builder-template-studio .website-builder-live-preview.is-preview-tablet .website-builder-live-preview-frame {
  min-height: 700px;
}

.website-builder-template-studio .website-builder-live-preview.is-preview-mobile .website-builder-live-preview-frame {
  min-height: 760px;
}

.website-builder-template-studio .website-builder-preview-page {
  min-height: 620px;
  border-radius: 0;
}

.website-builder-template-studio .website-builder-live-preview.is-preview-mobile .website-builder-preview-page {
  padding: 14px;
}

.website-builder-template-studio .website-builder-live-preview.is-preview-mobile .website-builder-preview-page nav,
.website-builder-template-studio .website-builder-live-preview.is-preview-mobile .website-builder-preview-hero div {
  grid-template-columns: 1fr;
}

.website-builder-inspector-head {
  display: grid;
  gap: 3px;
}

.website-builder-inspector-head strong {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.website-builder-inspector-head span {
  color: rgba(203,213,225,0.66);
  font-size: 12px;
  font-weight: 800;
}

.website-builder-inspector-group {
  border-top: 1px solid rgba(148,163,184,0.14);
  padding-top: 12px;
}

.website-builder-inspector-group summary {
  display: flex;
  justify-content: space-between;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.website-builder-inspector-group summary::after {
  content: "-";
  color: rgba(226,232,240,0.7);
}

.website-builder-inspector-group:not([open]) summary::after {
  content: "+";
}

.website-builder-inspector-group .website-builder-form-grid,
.website-builder-template-studio .website-builder-component-editor .website-builder-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.website-builder-template-studio .website-builder-form-grid label {
  color: rgba(226,232,240,0.82);
}

.website-builder-template-studio .field-title {
  color: rgba(226,232,240,0.76);
}

.website-builder-template-studio .website-builder-form-grid input,
.website-builder-template-studio .website-builder-form-grid textarea,
.website-builder-template-studio .website-builder-form-grid select {
  border-color: rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.72);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.website-builder-template-studio .website-builder-form-grid input::placeholder,
.website-builder-template-studio .website-builder-form-grid textarea::placeholder {
  color: rgba(148,163,184,0.52);
}

.website-builder-template-studio .website-builder-range-field {
  grid-template-columns: minmax(0, 1fr) auto;
}

.website-builder-template-studio .website-builder-range-field .field-title {
  grid-column: 1 / -1;
}

.website-builder-template-studio .website-builder-component-editor {
  margin: 0;
  padding: 14px 0 0;
  border-width: 1px 0 0;
  border-color: rgba(148,163,184,0.14);
  border-radius: 0;
  background: transparent;
}

.website-builder-template-studio .website-builder-component-editor-head {
  border-bottom-color: rgba(148,163,184,0.14);
}

.website-builder-template-studio .website-builder-component-editor-head strong {
  color: #fff;
  font-size: 18px;
}

.website-builder-template-studio .website-builder-component-editor-head small {
  color: rgba(203,213,225,0.66);
}

@media (max-width: 1320px) {
  .website-builder-studio-body {
    grid-template-columns: 280px minmax(360px, 1fr) 300px;
  }

  .website-builder-browser-chrome {
    grid-template-columns: 110px minmax(180px, 1fr) 36px;
  }

  .website-builder-studio-toolbar {
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  }
}

@media (max-width: 1120px) {
  .website-builder-studio-shell {
    grid-template-rows: 54px auto minmax(620px, auto);
  }

  .website-builder-studio-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px;
  }

  .website-builder-studio-brand,
  .website-builder-device-controls,
  .website-builder-studio-actions {
    justify-content: center;
  }

  .website-builder-studio-body {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas:
      "layers canvas"
      "inspector inspector";
  }

  .website-builder-layers-panel {
    grid-area: layers;
  }

  .website-builder-canvas-panel {
    grid-area: canvas;
    padding: 32px 24px;
  }

  .website-builder-inspector-panel {
    grid-area: inspector;
    max-height: none;
    border-top: 1px solid rgba(148,163,184,0.16);
    border-left: 0;
  }

  .website-builder-inspector-group .website-builder-form-grid,
  .website-builder-template-studio .website-builder-component-editor .website-builder-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .website-builder-template-studio {
    margin-inline: -14px;
    border-radius: 0;
  }

  .website-builder-studio-shell {
    grid-template-rows: auto auto auto;
    min-height: 0;
  }

  .website-builder-browser-chrome {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .website-builder-address-bar b {
    font-size: 11px;
  }

  .website-builder-studio-brand {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .website-builder-device-controls,
  .website-builder-studio-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .website-builder-studio-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "layers"
      "canvas"
      "inspector";
  }

  .website-builder-layers-panel,
  .website-builder-inspector-panel {
    max-height: none;
    border-right: 0;
    border-left: 0;
  }

  .website-builder-canvas-panel {
    padding: 22px 14px;
  }

  .website-builder-canvas-stage {
    min-width: 0;
  }

  .website-builder-template-studio .website-builder-live-preview,
  .website-builder-template-studio .website-builder-live-preview.is-preview-tablet,
  .website-builder-template-studio .website-builder-live-preview.is-preview-mobile {
    width: 100%;
  }

  .website-builder-template-studio .website-builder-live-preview-frame,
  .website-builder-template-studio .website-builder-live-preview.is-preview-tablet .website-builder-live-preview-frame,
  .website-builder-template-studio .website-builder-live-preview.is-preview-mobile .website-builder-live-preview-frame {
    min-height: 560px;
  }

  .website-builder-inspector-group .website-builder-form-grid,
  .website-builder-template-studio .website-builder-component-editor .website-builder-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .website-builder-template-studio .website-builder-section-list {
    grid-template-columns: 1fr;
  }

  .website-builder-template-studio .website-builder-section-row {
    min-height: 188px;
  }
}

.website-builder-publish-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 12px;
}

.website-builder-publish-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 8px;
  background: #f8fafc;
}

.website-builder-publish-card strong {
  color: var(--blue);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.website-builder-publish-actions,
.website-builder-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.website-builder-status-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.website-builder-status-options input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.website-builder-publish-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.website-builder-domain-instructions {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(239,246,255,0.76), rgba(255,255,255,0.96));
}

.website-builder-domain-instructions > div:first-child {
  display: grid;
  gap: 5px;
}

.website-builder-domain-instructions strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.website-builder-domain-instructions small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.website-builder-dns-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 10px;
}

.website-builder-dns-grid span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: #fff;
}

.website-builder-dns-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.website-builder-dns-grid code {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .website-builder-panel {
    gap: 14px;
  }

  .website-builder-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
  }

  .website-builder-hero::after {
    right: -64px;
    bottom: -70px;
    width: 150px;
    height: 150px;
    border-width: 18px;
  }

  .website-builder-hero h2 {
    font-size: 32px;
  }

  .website-builder-hero p {
    max-width: 42rem;
    font-size: 14px;
  }

  .website-builder-status {
    width: 100%;
    min-width: 0;
  }

  .website-builder-grid {
    grid-template-columns: 1fr;
  }

  .website-builder-component-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-builder-ai-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .website-builder-ai-actions {
    min-width: 0;
  }

  .website-builder-stage,
  .website-builder-next {
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
  }

  .website-builder-stage small,
  .website-builder-next small {
    max-width: 34rem;
  }

  .website-builder-split {
    grid-template-columns: 1fr;
  }

  .website-builder-publish-grid {
    grid-template-columns: 1fr;
  }

  .website-builder-dns-grid {
    grid-template-columns: 1fr;
  }

  .website-builder-component-workbench {
    grid-template-columns: 1fr;
  }

  .website-builder-live-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .website-builder-panel,
  .website-builder-card {
    gap: 12px;
  }

  .website-builder-hero {
    padding: 14px;
  }

  .website-builder-kicker {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .website-builder-hero h2 {
    gap: 8px;
    font-size: 28px;
    line-height: 1.08;
  }

  .website-builder-hero h2 .icon {
    flex: 0 0 auto;
  }

  .website-builder-hero p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.38;
  }

  .website-builder-status {
    padding: 12px;
  }

  .website-builder-status strong {
    font-size: 13px;
  }

  .website-builder-status .secondary-btn {
    min-height: 38px;
  }

  .website-builder-ai-card {
    padding: 13px;
  }

  .website-builder-ai-copy {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .website-builder-ai-copy .icon {
    width: 40px;
    height: 40px;
  }

  .website-builder-editor {
    margin-top: 14px;
  }

  .website-builder-editor .panel-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .website-builder-editor .panel-head .primary-btn {
    width: 100%;
  }

  .website-builder-form-grid {
    grid-template-columns: 1fr;
  }

  .website-builder-component-grid {
    grid-template-columns: 1fr;
  }

  .website-builder-subhead {
    display: grid;
    gap: 4px;
  }

  .website-builder-subhead span {
    text-align: left;
  }

  .website-builder-section-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .website-builder-section-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .website-builder-section-actions .secondary-btn {
    flex: 1 1 100%;
  }

  .website-builder-stage,
  .website-builder-next {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .website-builder-stage > .icon,
  .website-builder-next > .icon {
    width: 40px;
    height: 40px;
  }

  .website-builder-stage strong,
  .website-builder-next strong {
    font-size: 14px;
  }

  .website-builder-source-list {
    grid-template-columns: 1fr;
  }

  .website-builder-source-list span {
    padding: 11px;
  }
}

.lead-forms-panel > .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lead-forms-panel > .panel-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.lead-forms-panel > .panel-head > .primary-btn {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.lead-form-create-btn .icon {
  display: none;
}

.lead-forms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

.lead-forms-list-wrap,
.lead-form-builder,
.lead-form-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.lead-forms-list-wrap {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.lead-forms-list-head,
.lead-form-card-head,
.lead-form-builder-head,
.lead-form-footer-actions,
.lead-form-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-forms-list-head strong,
.lead-form-card-head strong {
  color: var(--ink);
  font-size: 18px;
}

.lead-forms-list-head span,
.lead-form-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lead-form-card-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lead-form-card-title-with-icon span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.lead-form-card-title-with-icon .icon {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.lead-form-card-title-with-icon .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lead-forms-list {
  display: grid;
  gap: 12px;
}

.lead-form-accordion-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.lead-form-accordion-item.active {
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.lead-form-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.lead-form-list-item.active {
  background: #eff6ff;
}

.lead-form-list-main {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.lead-form-list-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.lead-form-list-copy strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-form-list-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lead-form-list-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: max-content;
}

.lead-form-header-toggle {
  width: 118px;
  min-width: 118px;
  min-height: 36px;
  padding: 4px 6px 4px 11px;
  font-size: 12px;
}

.lead-form-list-action {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue) !important;
  cursor: pointer;
  line-height: 0;
}

.lead-form-list-action:hover,
.lead-form-list-action:focus-visible {
  border-color: rgba(37,99,235,0.42);
  background: #dbeafe;
  outline: none;
}

.lead-form-arrow-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  transition: transform 0.16s ease;
}

.lead-form-arrow-icon.is-down {
  transform: rotate(180deg);
}

.lead-form-accordion-body {
  border-top: 1px solid var(--line);
  background: #fff;
}

.lead-form-accordion-item.active .lead-form-accordion-body {
  animation: leadFormSlideOpen 160ms ease-out;
}

.lead-form-accordion-body[hidden] {
  display: none;
}

@keyframes leadFormSlideOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lead-form-builder {
  display: grid;
  gap: 14px;
  padding: 14px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.lead-form-accordion-body .lead-form-builder {
  border: 0;
  border-radius: 0;
}

.lead-form-builder[hidden],
#leadFormBuilderEmpty[hidden] {
  display: none;
}

.lead-form-builder-head {
  align-items: end;
  padding: 14px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
}

.lead-form-builder-head > div {
  flex: 1;
  min-width: 0;
}

.lead-form-platform-field {
  min-width: 220px;
  max-width: 280px;
}

.lead-form-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 1380px) {
  .lead-form-builder-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .lead-form-builder-grid > .lead-form-builder-stack,
  .lead-form-builder-grid > aside.lead-form-builder-stack,
  .lead-form-builder-grid .lead-form-card,
  .lead-form-builder-grid label,
  .lead-form-builder-grid input,
  .lead-form-builder-grid select,
  .lead-form-builder-grid textarea {
    min-width: 0;
  }

  .lead-form-pricing-toggle-row,
  .lead-form-pricing-rule-toggle-row {
    gap: 14px;
  }

  .lead-form-pricing-toggle-row > div,
  .lead-form-pricing-rule-toggle-row > div {
    flex: 1 1 0;
    min-width: 0;
  }

  .lead-form-pricing-toggle-row .demo-toggle,
  .lead-form-pricing-rule-toggle-row .demo-toggle {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .lead-form-year-threshold-flow label {
    min-width: 0;
  }
}

.lead-form-builder-stack {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.lead-form-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  overflow-x: hidden;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(15,23,42,0.04);
}

.lead-form-card-head {
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(37,99,235,0.12);
}

.lead-form-card input,
.lead-form-card select,
.lead-form-card textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
}

.lead-form-card textarea {
  padding: 14px;
}

@media (min-width: 1181px) {
  .lead-form-quote-pricing-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
  }

  .lead-form-quote-pricing-card > * {
    min-width: 0;
  }

  .lead-form-quote-pricing-card .lead-form-card-head,
  .lead-form-quote-pricing-card .lead-form-pricing-toggle-row,
  .lead-form-quote-pricing-card .lead-form-basic-price-field,
  .lead-form-quote-pricing-card .lead-form-year-threshold-flow,
  .lead-form-quote-pricing-card .lead-form-pricing-wide,
  .lead-form-quote-pricing-card .lead-form-sms-template-head,
  .lead-form-quote-pricing-card #leadFormQuoteSmsInput,
  .lead-form-quote-pricing-card .settings-helper-copy {
    grid-column: 1 / -1;
  }

  .lead-form-quote-pricing-card .lead-form-pricing-toggle-row,
  .lead-form-quote-pricing-card .lead-form-pricing-rule-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding: 14px;
    border-color: rgba(37, 99, 235, 0.18);
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.045);
  }

  .lead-form-quote-pricing-card .lead-form-pricing-toggle-row > div,
  .lead-form-quote-pricing-card .lead-form-pricing-rule-toggle-row > div {
    min-width: 0;
  }

  .lead-form-quote-pricing-card .lead-form-pricing-toggle-row strong,
  .lead-form-quote-pricing-card .lead-form-pricing-rule-toggle-row strong,
  .lead-form-quote-pricing-card .lead-form-pricing-toggle-row span,
  .lead-form-quote-pricing-card .lead-form-pricing-rule-toggle-row span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .lead-form-quote-pricing-card .lead-form-pricing-rule-toggle-row {
    min-height: 112px;
  }

  .lead-form-quote-pricing-card .lead-form-basic-price-field {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
  }

  .lead-form-quote-pricing-card .lead-form-year-threshold-flow {
    width: 100%;
    box-sizing: border-box;
  }
}

.lead-form-fields {
  display: grid;
  gap: 10px;
}

.lead-form-field-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
  cursor: grab;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.lead-form-field-row:active {
  cursor: grabbing;
}

.lead-form-field-row.is-dragging {
  opacity: 0.48;
  transform: scale(0.99);
}

.lead-form-field-row.is-drop-target {
  border-color: rgba(37,99,235,0.68);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12), 0 14px 32px rgba(37,99,235,0.1);
}

.lead-form-field-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lead-form-field-title {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lead-form-field-title > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.lead-form-field-chevron {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  line-height: 0;
}

.lead-form-field-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-form-field-title small {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-form-field-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.lead-form-field-body {
  display: grid;
  gap: 10px;
}

.lead-form-field-body[hidden] {
  display: none;
}

.lead-form-field-row.is-collapsed {
  gap: 0;
}

.lead-form-field-row.is-collapsed .lead-form-field-row-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.lead-form-field-main {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.7fr);
  gap: 10px;
}

.lead-form-field-row label {
  gap: 6px;
}

.lead-form-field-row .field-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.lead-form-field-row input,
.lead-form-field-row select,
.lead-form-field-row textarea {
  min-height: 42px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
}

.lead-form-field-row textarea {
  padding-top: 10px;
  padding-bottom: 10px;
}

.lead-form-required-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  margin-right: 2px;
  padding: 5px 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: default;
}

.lead-form-required-switch-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.lead-form-required-switch-wrap input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lead-form-required-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  padding: 3px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lead-form-required-switch > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(15,23,42,0.18);
  transform: translateX(0);
  transition: transform 0.18s ease;
}

.lead-form-required-switch-wrap input:checked + .lead-form-required-switch {
  border-color: rgba(37,99,235,0.72);
  background: var(--blue);
  box-shadow: 0 10px 18px rgba(37,99,235,0.16);
}

.lead-form-required-switch-wrap input:checked + .lead-form-required-switch > span {
  transform: translateX(20px);
}

.lead-form-required-switch-wrap input:focus-visible + .lead-form-required-switch {
  outline: 3px solid rgba(147,197,253,0.8);
  outline-offset: 3px;
}

.lead-form-options.is-hidden {
  display: none;
}

.lead-form-field-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.lead-form-field-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.lead-form-field-action-btn.is-move {
  border-color: #bfdbfe;
  color: var(--blue);
}

.lead-form-field-action-btn.is-move:hover,
.lead-form-field-action-btn.is-move:focus-visible {
  border-color: rgba(37,99,235,0.5);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}

.lead-form-field-action-btn.is-danger {
  border-color: #fecaca;
  color: var(--red);
}

.lead-form-field-action-btn.is-danger:hover,
.lead-form-field-action-btn.is-danger:focus-visible {
  border-color: rgba(220,38,38,0.5);
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
  outline: none;
}

.lead-form-field-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.lead-form-field-action-icon,
.lead-form-field-action-icon svg {
  width: 15px;
  height: 15px;
}

.lead-form-field-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
}

.lead-form-field-action-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.lead-form-actions-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.lead-form-logo-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.lead-form-logo-toggle-row > div {
  min-width: 0;
}

.lead-form-logo-toggle-row strong,
.lead-form-logo-toggle-row span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lead-form-share-card {
  margin-top: 2px;
}

.lead-form-share-actions {
  gap: 10px;
  width: 100%;
}

.lead-form-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 160px;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
}

.lead-form-share-btn .icon {
  width: 18px;
  height: 18px;
}

.lead-form-referral-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.lead-form-share-link-btn {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.lead-form-share-embed-btn {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.lead-form-share-preview-btn {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.lead-form-analytics-card {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.84), rgba(255, 255, 255, 0.96) 58%, rgba(236, 253, 245, 0.52)),
    #fff;
}

.lead-form-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lead-form-analytics-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.lead-form-analytics-grid span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.lead-form-analytics-grid strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.lead-form-analytics-note {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.lead-form-pricing-toggle-row {
  margin-top: 0;
}

.lead-form-pricing-rule-toggle-row {
  margin-top: 2px;
}

.lead-form-year-threshold-flow {
  display: grid;
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(105px, 0.65fr) auto minmax(115px, 0.75fr);
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.lead-form-year-threshold-flow > span {
  align-self: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.lead-form-pricing-rule-grid {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) repeat(2, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.lead-form-pricing-wide {
  grid-column: span 2;
}

#leadFormShareLink,
#leadFormEmbedCode {
  color: #475569;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
}

.lead-form-submissions {
  display: grid;
  gap: 8px;
}

.lead-form-submissions-card {
  margin-top: 2px;
}

.lead-form-submission-pagination {
  margin-top: 8px;
}

.lead-form-submission-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lead-form-submission-item.is-clickable {
  cursor: pointer;
}

.lead-form-submission-item.is-clickable:hover,
.lead-form-submission-item.is-clickable:focus-visible {
  border-color: rgba(37,99,235,0.42);
  background: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,0.1);
  outline: none;
  transform: translateY(-1px);
}

.lead-form-submission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.lead-form-submission-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-form-submission-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef4fb;
  color: #475569;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-form-submission-status.is-lead {
  background: #eff6ff;
  color: #1d4ed8;
}

.lead-form-submission-status.is-quoted {
  background: #fef3c7;
  color: #b45309;
}

.lead-form-submission-status.is-scheduled {
  background: #dcfce7;
  color: #15803d;
}

.lead-form-submission-status.is-completed {
  background: #e2e8f0;
  color: #334155;
}

.lead-form-submission-item span,
.lead-form-submission-item small,
.muted-empty {
  color: var(--muted);
  font-weight: 800;
}

.lead-form-footer-actions {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.lead-form-footer-actions .primary-btn,
.lead-form-footer-actions .danger-btn {
  width: auto;
  min-width: 132px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 950;
}

.procedure-step-list {
  display: grid;
  gap: 10px;
}

.procedure-step-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: grab;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.procedure-step-card:active {
  cursor: grabbing;
}

.procedure-step-card.is-dragging {
  opacity: 0.48;
  transform: scale(0.99);
}

.procedure-step-card.is-drop-target {
  border-color: rgba(37,99,235,0.68);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12), 0 14px 32px rgba(37,99,235,0.1);
}

.component-just-added,
.procedure-step-card.is-new {
  animation: componentJustAddedPulse 1.1s ease-in-out 2;
}

@keyframes componentJustAddedPulse {
  0% {
    background: #fff;
    border-color: var(--line);
    box-shadow: none;
  }
  38% {
    background: #dbeafe;
    border-color: rgba(37,99,235,0.78);
    box-shadow: 0 0 0 5px rgba(37,99,235,0.14), 0 18px 34px rgba(37,99,235,0.16);
  }
  100% {
    background: #fff;
    border-color: var(--line);
    box-shadow: none;
  }
}

.procedure-step-card .procedure-step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  line-height: 1;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.procedure-step-card strong,
.procedure-step-card span,
.procedure-step-card small {
  display: block;
}

.procedure-step-card span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.procedure-step-card .procedure-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.procedure-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.procedure-type-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform-origin: center;
}

.procedure-type-icon svg path,
.procedure-type-icon svg circle,
.procedure-type-icon svg rect,
.procedure-type-icon svg line {
  vector-effect: non-scaling-stroke;
}

.procedure-type-icon svg.procedure-svg-detailed {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.procedure-type-icon svg.procedure-svg-outline {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 20;
}

.procedure-type-icon svg.procedure-svg-outline path,
.procedure-type-icon svg.procedure-svg-outline line {
  vector-effect: none;
}

.procedure-type-icon:has(svg.procedure-svg-detailed),
.procedure-type-icon:has(svg.procedure-svg-outline) {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.procedure-step-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.procedure-step-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.procedure-step-actions .icon-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  font-size: 16px;
}

.procedure-drag-handle {
  cursor: grab;
  color: var(--blue);
}

.procedure-empty {
  min-height: 120px;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.pipeline-lane {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
}

.pipeline-lane h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.lead-mini,
.job-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.lead-mini {
  cursor: pointer;
}

.lead-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.lead-age-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.12);
}

.lead-mini:hover {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}

.lead-mini + .lead-mini { margin-top: 12px; }

.pipeline-show-more {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  background: #eff6ff;
  color: var(--blue);
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pipeline-show-more:hover,
.pipeline-show-more:focus-visible {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 10px 24px rgba(37,99,235,0.12);
  outline: none;
  transform: translateY(-1px);
}

.lead-mini strong,
.lead-mini > span:not(.demo-badge),
.lead-mini small {
  display: block;
}

.lead-mini strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.lead-mini > span:not(.demo-badge) { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.25; }
.lead-mini small { margin-top: 10px; color: var(--blue); font-weight: 900; font-size: 14px; }

.lead-mini .demo-badge {
  margin-top: 9px;
}

.lead-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.lead-directions-btn:hover,
.lead-directions-btn:focus-visible {
  border-color: rgba(37,99,235,0.42);
  box-shadow: 0 8px 18px rgba(37,99,235,0.12);
  outline: none;
  transform: translateY(-1px);
}

.lead-directions-btn .icon,
.lead-directions-btn .icon svg {
  width: 14px;
  height: 14px;
}

.quotes-panel {
  min-width: 0;
}

.quote-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quote-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.quote-card:hover,
.quote-card:focus-within {
  border-color: rgba(37,99,235,0.34);
  box-shadow: 0 14px 34px rgba(15,23,42,0.09);
  transform: translateY(-1px);
}

.quote-card-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.quote-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.quote-card-title .status,
.quote-card-title .demo-badge {
  width: fit-content;
}

.quote-card-title strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.12;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-card-main span,
.quote-card-main small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-card-main > span:not(.status):not(.demo-badge) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quote-card-main small {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.quote-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.quote-card-actions-btn {
  width: auto;
  min-height: 40px;
  min-width: 118px;
  padding: 0 11px;
  font-size: 12px;
  border-radius: 7px;
  line-height: 1;
}

.quote-card-actions-btn .icon,
.quote-card-actions-btn .icon svg {
  width: 15px;
  height: 15px;
}

.empty-state {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--wash);
  color: var(--muted);
}

.empty-state strong {
  color: var(--ink);
  font-size: 15px;
}

.empty-state span {
  line-height: 1.45;
  font-size: 13px;
}

.empty-state .secondary-btn,
.empty-state button {
  justify-self: start;
  margin-top: 4px;
}

.plan-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: -4px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
}

.plan-notice[hidden] {
  display: none;
}

.plan-notice.locked {
  border-color: rgba(220,38,38,0.22);
  background: #fef2f2;
  color: #991b1b;
}

.plan-notice strong,
.plan-notice span {
  display: block;
}

.plan-notice span {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
}

.plan-notice-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.plan-notice-actions .ghost-btn,
.plan-notice-actions .secondary-btn {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

.pipeline-empty,
.grid-empty {
  grid-column: 1 / -1;
}

.table-empty {
  box-shadow: none;
}

.build-list,
.setup-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.build-list li,
.setup-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}

.build-list li > span,
.setup-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--wash-2);
  color: var(--blue);
  font-weight: 900;
}

.setup-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.setup-item:last-child {
  border-bottom: 0;
}

.setup-item.done .setup-check {
  background: #dcfce7;
  color: #15803d;
}

.build-list strong,
.build-list small,
.setup-item strong,
.setup-item small {
  display: block;
}

.build-list small,
.setup-item small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.setup-item .text-btn {
  white-space: nowrap;
}

.table-wrap {
  overflow-x: auto;
}

.lead-inbox-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 18px 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,0.1), transparent 32%),
    linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 14px 36px rgba(15,23,42,0.05);
}

.lead-search-box {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lead-search-box:focus-within {
  border-color: rgba(37,99,235,0.44);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}

.lead-search-box .icon {
  width: 48px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.lead-search-box .icon svg {
  width: 21px;
  height: 21px;
}

.lead-search-box input {
  width: 100%;
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.lead-search-box input::-webkit-search-decoration,
.lead-search-box input::-webkit-search-cancel-button,
.lead-search-box input::-webkit-search-results-button,
.lead-search-box input::-webkit-search-results-decoration {
  display: none;
}

.lead-search-box input::placeholder {
  color: var(--muted);
  font-weight: 650;
}

.lead-search-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  justify-self: end;
  margin-right: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.lead-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(37,99,235,0.24);
  border-radius: 16px;
  background: #eff6ff;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37,99,235,0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lead-filter-trigger:hover,
.lead-filter-trigger:focus-visible {
  border-color: rgba(37,99,235,0.48);
  box-shadow: 0 16px 30px rgba(37,99,235,0.14);
  outline: 0;
  transform: translateY(-1px);
}

.lead-filter-trigger .icon,
.lead-filter-trigger .icon svg {
  width: 22px;
  height: 22px;
}

.lead-filter-trigger .icon {
  display: grid;
  place-items: center;
}

.lead-filter-trigger strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.lead-filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.lead-filter-summary strong {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.job-filter-results {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.18);
}

.job-filter-results div {
  min-width: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.job-filter-results span,
.job-filter-results strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-filter-results span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-filter-results strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.lead-inbox-table {
  min-width: 620px;
}

.lead-inbox-table.is-page-transition {
  animation-duration: 0.24s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  will-change: opacity, transform;
}

.lead-inbox-table.is-page-next {
  animation-name: lead-page-slide-next;
}

.lead-inbox-table.is-page-prev {
  animation-name: lead-page-slide-prev;
}

@keyframes lead-page-slide-next {
  from {
    opacity: 0.12;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lead-page-slide-prev {
  from {
    opacity: 0.12;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.lead-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 4px;
}

.lead-pagination[hidden] {
  display: none;
}

.lead-pagination-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.lead-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lead-pagination-btn,
.lead-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 12px;
  background: #eff6ff;
  color: var(--blue);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.lead-pagination-btn {
  padding: 0 14px;
}

.lead-pagination-page {
  min-width: 40px;
  padding: 0 10px;
}

.lead-pagination-btn:hover,
.lead-pagination-btn:focus-visible,
.lead-pagination-page:hover,
.lead-pagination-page:focus-visible {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 10px 24px rgba(37,99,235,0.12);
  outline: none;
  transform: translateY(-1px);
}

.lead-pagination-page[aria-current="page"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37,99,235,0.18);
}

.lead-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.lead-pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--muted);
  font-weight: 950;
}

@media (prefers-reduced-motion: reduce) {
  .lead-inbox-table.is-page-transition {
    animation: none;
  }
}

th, td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

tr:last-child td { border-bottom: 0; }

.lead-name-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.lead-name-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-name-line + small {
  display: block;
  margin-top: 4px;
}

.clickable-row {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.clickable-row:hover,
.clickable-row:focus-visible {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 var(--blue);
  outline: none;
}

.clickable-row.is-highlighted {
  background:
    radial-gradient(circle at 8% 50%, rgba(37,99,235,0.16), transparent 32%),
    #eef6ff;
  box-shadow: inset 4px 0 0 var(--blue), 0 0 0 3px rgba(37,99,235,0.12);
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--wash-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.status.new { background: #dbeafe; color: #1d4ed8; }
.status.quoted { background: #fef3c7; color: #b45309; }
.status.dealership-request-status.quoted { background: #dbeafe; color: #1d4ed8; text-transform: none; }
.status.scheduled { background: #dcfce7; color: #15803d; }
.status.partial { background: #fef3c7; color: #b45309; }
.status.completed { background: #e2e8f0; color: #334155; }
.status.lost { background: #fee2e2; color: #b91c1c; }

.lead-name-status {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.text-btn {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.job-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.job-column {
  padding: 14px;
  min-height: 340px;
}

.job-column h2 {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.job-card {
  margin-top: 11px;
  display: grid;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
}

.job-card.is-restoring {
  border-color: rgba(37,99,235,0.34);
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.job-card.is-highlighted,
.workflow-item.is-highlighted .workflow-card {
  border-color: rgba(37,99,235,0.76);
  background:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,0.15), transparent 32%),
    linear-gradient(180deg, #fff, #eef6ff);
  box-shadow: 0 0 0 5px rgba(37,99,235,0.14), 0 16px 34px rgba(37,99,235,0.18);
}

.job-card:hover {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}

.job-column-more {
  margin-top: 12px;
}

.job-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.job-card-head strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.job-card-pills {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.job-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(37,99,235,0.28);
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37,99,235,0.12);
}

.job-actions-btn:hover,
.job-actions-btn:focus-visible {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,0.22);
  outline: none;
}

.job-actions-btn .icon,
.job-actions-btn .icon svg {
  width: 14px;
  height: 14px;
}

.workflow-side .job-client-login-btn {
  min-width: 136px;
  justify-content: center;
  white-space: nowrap;
}

.schedule-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76), 0 6px 14px rgba(15,23,42,0.06);
}

.job-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.job-type-pill.is-residential {
  background: #eef6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.14);
}

.job-type-pill.is-dealership {
  background: #ecfdf5;
  color: #047857;
  box-shadow: inset 0 0 0 1px rgba(4,120,87,0.16);
}

.job-type-pill.is-warranty,
.workflow-type-pill.is-warranty {
  background: #fff7ed;
  color: #c2410c;
  box-shadow: inset 0 0 0 1px rgba(194,65,12,0.18);
}

.sync-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(180,83,9,0.18);
}

.sync-status-pill.is-failed {
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.18);
}

.sync-status-pill.is-needs_review {
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.18);
}

.sync-status-pill.is-syncing {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.2);
}

.sync-status-pill.is-pending {
  background: #f0fdf4;
  color: #166534;
  box-shadow: inset 0 0 0 1px rgba(22,101,52,0.16);
}

.schedule-pill.today {
  border-color: rgba(21,128,61,0.22);
  background: #dcfce7;
  color: #166534;
}

.schedule-pill.active {
  border-color: rgba(37,99,235,0.38);
  background: #2563eb;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 18px rgba(37,99,235,0.22);
}

.schedule-pill.soon {
  border-color: rgba(180,83,9,0.22);
  background: #fffbeb;
  color: #92400e;
}

.schedule-pill.later {
  border-color: rgba(3,105,161,0.22);
  background: #e0f2fe;
  color: #075985;
}

.schedule-pill.overdue {
  border-color: rgba(185,28,28,0.22);
  background: #fee2e2;
  color: #991b1b;
}

.schedule-pill.done,
.schedule-pill.empty {
  border-color: rgba(71,85,105,0.16);
  background: #f1f5f9;
  color: #475569;
}

.danger-option:hover,
.danger-option:focus-visible {
  border-color: rgba(220,38,38,0.36);
}

.danger-option .icon {
  background: #fef2f2;
  color: var(--red);
}

.job-card-details {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.job-card-schedule {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.job-card-schedule .icon,
.job-card-schedule .icon svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.job-card-schedule strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.job-card-schedule span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-live-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 8px;
  background: #eff6ff;
}

.job-live-timer span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-live-timer strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.job-card-details span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  justify-self: start;
  margin-bottom: 3px;
  padding: 0 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.job-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.job-communication-chip,
.workflow-communication-chip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 9px;
  background: #eff6ff;
}

.job-communication-chip .icon,
.workflow-communication-chip .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--blue);
}

.job-communication-chip .icon svg,
.workflow-communication-chip .icon svg {
  width: 14px;
  height: 14px;
}

.job-communication-chip strong,
.workflow-communication-chip strong,
.job-communication-chip small,
.workflow-communication-chip small {
  display: block;
  min-width: 0;
}

.job-communication-chip strong,
.workflow-communication-chip strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.job-communication-chip small,
.workflow-communication-chip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.job-communication-chip.is-text,
.workflow-communication-chip.is-text {
  border-color: rgba(22,163,74,0.24);
  background: #f0fdf4;
}

.job-communication-chip.is-text .icon,
.workflow-communication-chip.is-text .icon {
  color: #15803d;
}

.workflow-communication-chip {
  grid-column: 1 / -1;
}

.workflow-list {
  display: grid;
  gap: 14px;
}

.workflow-mileage-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.workflow-mileage-bar[hidden] {
  display: none;
}

.workflow-mileage-bar > .icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #dbeafe;
  color: var(--blue);
}

.workflow-mileage-bar > div {
  min-width: 0;
}

.workflow-mileage-bar strong,
.workflow-mileage-bar small {
  display: block;
}

.workflow-mileage-bar strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.workflow-mileage-bar small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.workflow-mileage-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workflow-mileage-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.workflow-mileage-stats strong {
  display: inline;
  margin: 0;
  color: var(--blue);
  font-size: 12px;
}

.workflow-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  cursor: pointer;
}

.workflow-item:not(.is-last)::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -20px;
  left: 26px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37,99,235,0.72), rgba(37,99,235,0.2));
}

.workflow-marker {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding-top: 6px;
}

.workflow-point {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid rgba(37,99,235,0.42);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 0 0 6px #f8fafc, 0 10px 24px rgba(15,23,42,0.08);
}

.workflow-point::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.82);
}

.workflow-point .icon,
.workflow-point .icon svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.workflow-point .icon[data-icon="checklist"],
.workflow-point .icon[data-icon="checklist"] svg {
  width: 24px;
  height: 24px;
}

.workflow-card {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.workflow-status-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-type-pill,
.workflow-complete-pill,
.workflow-payment-pill {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.workflow-type-pill.is-residential {
  background: #eef6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.14);
}

.workflow-type-pill.is-dealership {
  background: #ecfdf5;
  color: #047857;
  box-shadow: inset 0 0 0 1px rgba(4,120,87,0.16);
}

.workflow-complete-pill {
  background: #eff6ff;
  color: var(--blue-dark);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.14);
}

.workflow-payment-pill.is-paid {
  background: #dcfce7;
  color: #166534;
  box-shadow: inset 0 0 0 1px rgba(22,101,52,0.12);
}

.workflow-payment-pill.is-due {
  background: #fff7ed;
  color: #9a3412;
  box-shadow: inset 0 0 0 1px rgba(154,52,18,0.14);
}

.workflow-item.is-done .workflow-card {
  border-color: #cbd5e1;
  background: #f1f5f9;
  opacity: 0.58;
  filter: grayscale(0.25);
}

.workflow-item.is-start:not(.is-done) .workflow-point,
.workflow-item.is-next .workflow-point {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px #f8fafc, 0 10px 26px rgba(37,99,235,0.24);
}

.workflow-item.is-next .workflow-point::before {
  border-color: rgba(37,99,235,0.56);
  animation: workflow-next-pulse 1.7s ease-out infinite;
}

.workflow-item.is-active .workflow-point {
  border-color: var(--blue);
  background: #dbeafe;
  color: var(--blue);
  box-shadow: 0 0 0 6px #f8fafc, 0 0 0 10px rgba(37,99,235,0.12);
}

.workflow-item.is-active.is-next .workflow-point {
  background: var(--blue);
  color: #fff;
}

.workflow-item.is-done .workflow-point {
  border-color: #64748b;
  background: #64748b;
  color: #f8fafc;
  box-shadow: 0 0 0 6px #f8fafc, 0 8px 18px rgba(15,23,42,0.1);
}

.workflow-item.is-done::after {
  background: linear-gradient(180deg, rgba(100,116,139,0.38), rgba(100,116,139,0.12));
}

.workflow-item.is-locked .workflow-point {
  border-color: #94a3b8;
  background: #e2e8f0;
  color: #334155;
  box-shadow: 0 0 0 6px #f8fafc, 0 10px 24px rgba(15,23,42,0.08);
}

.workflow-item:hover .workflow-card {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}

.workflow-item.is-done:hover .workflow-card {
  border-color: #94a3b8;
  box-shadow: none;
  opacity: 0.72;
}

@keyframes workflow-next-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.82);
  }
  70% {
    opacity: 0;
    transform: scale(1.42);
  }
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-item.is-next .workflow-point::before {
    animation: none;
    opacity: 0.35;
    transform: scale(1.15);
  }
}

.workflow-time {
  display: grid;
  gap: 5px;
}

.workflow-time strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.workflow-time-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.workflow-time .workflow-stop-pill {
  justify-self: start;
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.workflow-time .workflow-type-pill {
  min-height: 24px;
  padding: 6px 8px;
}

.workflow-time small {
  justify-self: start;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.workflow-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workflow-main strong {
  color: var(--ink);
  font-size: 15px;
}

.workflow-main span,
.workflow-main small {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-side {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 9px;
  min-width: 178px;
}

.workflow-side > strong {
  color: var(--blue);
  font-size: 22px;
  line-height: 1;
}

.workflow-lens-brief {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 10px 11px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 9px;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.workflow-lens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workflow-lens-head strong {
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workflow-lens-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
}

.workflow-lens-oxidation,
.workflow-lens-start {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.workflow-lens-start {
  color: #1e3a8a;
}

.workflow-lens-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-lens-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.16);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}

.job-actions-lens-plan {
  margin-top: -2px;
}

.job-actions-lens-plan .workflow-lens-brief {
  margin-top: 0;
  margin-bottom: 5px;
}

.job-review-qr-dialog {
  background: rgba(8, 13, 24, 0.94);
}

.job-review-qr-viewer-frame {
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: 76px;
}

.job-review-qr-modal-card {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.job-review-qr-modal-card img {
  display: block;
  width: min(78vw, 560px, calc(100vh - 190px));
  aspect-ratio: 1;
  border: 0;
  border-radius: 4px;
  background: #fff;
}

.job-review-qr-caption {
  display: grid;
  gap: 6px;
}

.job-review-qr-caption strong,
.job-review-qr-caption span {
  display: block;
}

.job-review-qr-caption strong {
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 950;
}

.job-review-qr-caption span {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .job-review-qr-modal-card {
    padding: 12px;
  }

  .job-review-qr-modal-card img {
    width: min(84vw, calc(100vh - 190px));
  }
}

#jobWarrantyVehicleList {
  grid-template-columns: 1fr;
}

#jobWarrantyVehicleList .create-option {
  width: 100%;
}

.customer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.warranty-issue-list {
  display: grid;
  gap: 12px;
}

.warranty-issue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.warranty-issue-card.is-open {
  border-color: rgba(37,99,235,0.24);
}

.warranty-issue-main,
.warranty-issue-side {
  min-width: 0;
}

.warranty-issue-main {
  display: grid;
  gap: 8px;
}

.warranty-issue-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.warranty-issue-title .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.warranty-issue-title strong,
.warranty-issue-title small,
.warranty-issue-main p,
.warranty-issue-main > small {
  display: block;
  min-width: 0;
}

.warranty-issue-title strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.warranty-issue-title small,
.warranty-issue-main > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.warranty-issue-main p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.warranty-issue-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.warranty-issue-pills {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.warranty-issue-side .status,
.warranty-issue-urgency {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.warranty-issue-urgency {
  display: inline-flex;
  align-items: center;
  background: #eef2f7;
  color: var(--muted);
  text-transform: uppercase;
}

.warranty-schedule-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(194,65,12,0.18);
  border-radius: 8px;
  background: #fff7ed;
}

.warranty-schedule-summary .job-type-pill {
  justify-self: start;
}

.warranty-schedule-summary strong,
.warranty-schedule-summary small {
  display: block;
  min-width: 0;
}

.warranty-schedule-summary strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.warranty-schedule-summary small {
  color: #9a3412;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.customer-card {
  min-width: 0;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
}

.customer-card:hover,
.customer-card:focus-visible {
  border-color: rgba(37,99,235,0.38);
  box-shadow: 0 14px 28px rgba(15,23,42,0.1);
  outline: none;
}

.customer-card strong,
.customer-card span,
.customer-card small {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.customer-card-head strong {
  flex: 1 1 auto;
  min-width: 0;
}

.customer-card .customer-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 24px;
  margin-top: 0;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.customer-card .customer-type-pill.is-residential {
  background: #ecfdf5;
  color: #047857;
}

.customer-card .customer-type-pill.is-dealership {
  background: #dbeafe;
  color: #1d4ed8;
}

.customer-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.customer-card small {
  margin-top: 12px;
  color: var(--blue);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.customer-card .customer-card-notes {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fbff;
  color: #475569;
  white-space: normal;
}

.customer-card .customer-card-notes-label {
  margin-top: 0;
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.customer-card .customer-card-notes-text {
  display: -webkit-box;
  margin-top: 0;
  color: #475569;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

#view-warranties .settings-warranty-panel {
  margin-bottom: 18px;
}

.customer-import-dialog form {
  width: min(980px, calc(100vw - 28px));
}

.customer-vcf-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.customer-vcf-upload strong,
.customer-vcf-upload span {
  display: block;
  min-width: 0;
}

.customer-vcf-upload strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.customer-vcf-upload span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.customer-vcf-upload input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.customer-import-summary {
  padding: 12px 14px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.customer-import-preview {
  display: grid;
  gap: 10px;
}

.customer-import-preview[hidden] {
  display: none;
}

.customer-import-preview-head,
.customer-import-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-import-preview-head {
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.customer-import-select-all {
  color: var(--ink);
}

.customer-import-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-import-table {
  min-width: 880px;
}

.customer-import-table th,
.customer-import-table td {
  padding: 11px 10px;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.35;
}

.customer-import-table td {
  color: #334155;
  font-weight: 650;
}

.customer-import-table td strong {
  color: var(--ink);
  font-weight: 850;
}

.customer-import-table tr.has-duplicate {
  background: #fff7ed;
}

.customer-import-duplicate {
  display: grid;
  gap: 7px;
}

.customer-import-duplicate strong {
  color: #9a3412;
  font-size: 12px;
  font-weight: 900;
}

.customer-import-duplicate label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.customer-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.optional-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle;
}

.customer-jobs-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.customer-import-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-vehicle-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-notes-field textarea {
  min-height: 108px;
  resize: vertical;
}

.customer-vehicle-section h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
}

.customer-vehicle-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.2fr;
  gap: 12px;
}

.customer-import-panel[hidden] {
  display: none;
}

.customer-import-panel h3,
.customer-jobs-panel h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
}

.customer-jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.customer-jobs-head .btn-sm {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
}

.customer-import-panel p {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.customer-completed-job-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.customer-completed-job-panel > div:first-child p {
  margin: 0;
  line-height: 1.3;
}

.customer-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-import-headlights {
  display: grid;
  gap: 12px;
}

.customer-import-headlight {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.customer-import-headlight[hidden] {
  display: none;
}

.customer-import-headlight h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
}

.customer-vehicle-section h3 .optional-flag,
.customer-import-panel h3 .optional-flag,
.customer-import-headlight h4 .optional-flag {
  margin-left: 0;
}

.customer-import-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-import-photo-upload {
  position: relative;
  cursor: pointer;
}

.customer-import-photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.customer-import-photo-upload .proof-preview {
  min-height: 150px;
}

.customer-job-list {
  display: grid;
  gap: 10px;
}

.customer-job-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.customer-job-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.customer-job-row:hover,
.customer-job-row:focus-visible {
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 12px 24px rgba(37,99,235,0.1);
  transform: translateY(-1px);
}

.customer-job-row:focus-visible {
  outline: 3px solid rgba(37,99,235,0.22);
  outline-offset: 2px;
}

.customer-job-row strong,
.customer-job-row span,
.customer-job-row small {
  display: block;
}

.customer-job-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-job-row small {
  display: -webkit-box;
  margin-top: 5px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.customer-job-row em {
  flex: 0 0 auto;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.followup-list {
  display: grid;
  gap: 12px;
}

.followup-list.is-page-transition {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

.followup-list.is-page-next {
  animation-name: lead-page-slide-next;
}

.followup-list.is-page-prev {
  animation-name: lead-page-slide-prev;
}

.followup-pagination {
  margin-top: 14px;
}

.followup-settings-panel {
  margin-top: 18px;
}

.followup-settings-grid {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: stretch;
}

.followup-template-preview-card {
  display: grid;
  gap: 6px;
  min-height: 100px;
  padding: 14px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #f8fbff;
}

.followup-template-preview-card strong,
.followup-template-preview-card span,
.followup-template-preview-card p {
  margin: 0;
}

.followup-template-preview-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.followup-template-preview-card span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.followup-template-preview-card p {
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.followup-template-creator {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #d8e4f5;
}

.followup-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.followup-settings-actions .settings-save-note {
  flex: 1 1 240px;
  margin: 0;
}

@media (max-width: 720px) {
  .followup-settings-grid {
    grid-template-columns: 1fr;
  }

  .followup-settings-actions {
    align-items: stretch;
  }

  .followup-settings-actions .primary-btn {
    width: 100%;
  }
}

.followup-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.followup-card {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
}

.followup-card.followup-overdue {
  border-color: rgba(220,38,38,0.36);
  box-shadow: 0 10px 26px rgba(220,38,38,0.08);
}

.followup-card.followup-today,
.followup-card.followup-tomorrow {
  border-color: rgba(245,158,11,0.42);
  box-shadow: 0 10px 26px rgba(245,158,11,0.08);
}

.followup-card.due:not(.followup-overdue):not(.followup-today):not(.followup-tomorrow) {
  border-color: rgba(37,99,235,0.32);
  box-shadow: 0 10px 26px rgba(37,99,235,0.08);
}

.followup-card.done {
  opacity: 0.68;
}

.followup-card-body {
  min-width: 0;
}

.followup-card-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.followup-card-topline > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.followup-card .followup-due-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: none;
}

.followup-card .followup-due-pill.overdue {
  border-color: rgba(220,38,38,0.22);
  background: #fef2f2;
  color: #b91c1c;
}

.followup-card .followup-due-pill.today,
.followup-card .followup-due-pill.tomorrow {
  border-color: rgba(245,158,11,0.26);
  background: #fffbeb;
  color: #92400e;
}

.followup-card .followup-due-pill.upcoming,
.followup-card .followup-due-pill.later {
  border-color: rgba(37,99,235,0.18);
  background: #eff6ff;
  color: var(--blue);
}

.followup-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
}

.followup-card-actions .secondary-btn {
  min-height: 36px;
  padding-inline: 13px;
  white-space: nowrap;
}

.followup-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.followup-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.followup-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.followup-extension-dialog form {
  width: min(560px, calc(100vw - 28px));
}

.followup-extension-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.followup-extension-option {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.followup-extension-option:hover,
.followup-extension-option:focus-visible {
  border-color: rgba(37,99,235,0.34);
  box-shadow: 0 14px 28px rgba(37,99,235,0.1);
  transform: translateY(-1px);
  outline: none;
}

.followup-extension-option span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.followup-extension-option strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.followup-extension-custom {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.followup-extension-custom input {
  min-height: 48px;
}

.billing-panel {
  display: grid;
  gap: 16px;
}

.billing-price {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.billing-price strong {
  font-size: 24px;
  letter-spacing: 0;
}

.billing-price span {
  color: var(--muted);
  line-height: 1.45;
}

.billing-guide {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 12px;
  background: #eff6ff;
}

.billing-guide strong {
  color: #1d4ed8;
  font-size: 15px;
}

.billing-guide p {
  margin: 0;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.45;
}

.billing-details {
  margin: 0;
}

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-plan-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(148,163,184,0.32);
  background:
    linear-gradient(180deg, rgba(248,251,255,0.92) 0%, #fff 58%),
    #fff;
}

.settings-plan-panel .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.settings-plan-panel .panel-head > div:not(.settings-head-actions) {
  width: 100%;
  min-width: 0;
}

.settings-plan-panel .settings-head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.settings-plan-panel .settings-head-actions {
  align-self: start;
  width: auto;
  margin-left: 0;
  white-space: nowrap;
}

.settings-plan-panel .settings-head-copy h2,
.settings-plan-panel .settings-head-copy p {
  max-width: 720px;
}

.settings-plan-panel .settings-head-copy p {
  overflow-wrap: normal;
  word-break: normal;
}

#planDetailsBody:not([hidden]) {
  display: grid;
  gap: 14px;
}

.settings-plan-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.settings-plan-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(37,99,235,0.07);
}

.settings-plan-pill.amount {
  border-color: rgba(22,163,74,0.16);
  background: #f0fdf4;
  color: #15803d;
}

.settings-plan-pill.expired {
  border-color: rgba(220,38,38,0.18);
  background: #fef2f2;
  color: #991b1b;
}

.settings-plan-panel .billing-price {
  border-color: rgba(37,99,235,0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(219,234,254,0.82) 0%, rgba(248,251,255,0.92) 55%, #fff 100%);
  box-shadow: 0 12px 26px rgba(37,99,235,0.08);
}

.plan-status {
  white-space: nowrap;
}

.form-panel {
  display: grid;
  gap: 13px;
}

label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.field-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.1;
}

.field-title .icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--blue);
}

.field-title .icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lead-address-save-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lead-address-save-pill.is-saved {
  background: #dcfce7;
  color: #15803d;
}

.lead-address-save-pill.is-error {
  background: #fee2e2;
  color: #991b1b;
}

.lead-address-save-pill[hidden] {
  display: none;
}

.travel-fee-preview {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.travel-fee-preview.is-active {
  color: #1d4ed8;
}

.travel-fee-preview.is-warning {
  color: #b45309;
}

.lead-address-distance-box {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
}

.lead-address-distance-box[hidden] {
  display: none;
}

.lead-address-distance-box .icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.lead-address-distance-box .icon svg {
  width: 18px;
  height: 18px;
}

.lead-address-distance-box strong,
.lead-address-distance-box small {
  display: block;
  min-width: 0;
}

.lead-address-distance-box strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.lead-address-distance-box small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.lead-address-distance-box.is-warning {
  border-color: rgba(180,83,9,0.24);
  background: #fffbeb;
}

.lead-address-distance-box.is-warning .icon {
  background: #fef3c7;
  color: #b45309;
}

.travel-fee-settings-grid {
  margin-top: 14px;
}

.lead-headlights-section .field-title .icon[data-icon="headlights"] {
  width: 30px;
  height: 20px;
  color: var(--blue);
}

.lead-headlights-section .field-title .icon[data-icon="headlights"] svg.headlight-svg {
  width: 30px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.field-title .icon svg.service-type-svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

input,
textarea,
select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 13px 14px;
  outline: none;
  text-transform: none;
  font-size: 17px;
  line-height: 1.35;
}

input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-inline-size: 0;
  min-height: 52px;
  padding-block: 13px;
}

.schedule-time-source-hidden {
  display: none !important;
}

.fixed-slot-time-select[hidden] {
  display: none !important;
}

.app-date-picker-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.app-date-picker-source {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.app-date-picker-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 1px solid #d7e0ec;
  border-radius: 7px;
  background: #fff;
  color: #667085;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.app-date-picker-trigger .icon,
.app-date-picker-trigger .icon svg {
  width: 19px;
  height: 19px;
}

.app-date-picker-trigger .icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.app-date-picker-trigger-value {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 17px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-date-picker-trigger-caret {
  justify-self: end;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #64748b;
  transform: rotate(45deg) translateY(-2px);
}

.app-date-picker-trigger.has-value {
  background: #fff;
  border-color: #d7e0ec;
  color: #111827;
  box-shadow: none;
}

.app-date-picker-trigger.has-value:focus-visible {
  border-color: #d7e0ec;
  box-shadow: none;
}

.app-date-picker-trigger.has-value .app-date-picker-trigger-caret {
  width: 7px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #16a34a;
  transform: rotate(45deg) translate(-1px, -1px);
}

.app-date-picker-trigger:hover,
.app-date-picker-trigger:focus-visible,
.app-date-picker-source:focus + .app-date-picker-trigger {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
  outline: none;
}

.app-date-picker-trigger.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.app-date-picker-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

textarea { resize: vertical; }

select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
  padding: 13px 44px 13px 14px;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%) calc(100% - 22px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--blue) 50%, transparent 50%) calc(100% - 17px) 50% / 7px 7px no-repeat,
    linear-gradient(#eff6ff, #eff6ff) calc(100% - 42px) 50% / 1px 28px no-repeat,
    #fff;
  font-weight: 850;
}

select option {
  color: var(--ink);
  background: #fff;
  font-weight: 800;
}

select::-ms-expand {
  display: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
}

select:hover {
  border-color: rgba(37,99,235,0.44);
}

.page-preview {
  overflow: hidden;
}

.hero-image-field {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

.hero-image-head {
  display: grid;
  gap: 4px;
}

.hero-image-head strong {
  font-size: 15px;
  color: var(--ink);
}

.hero-image-head span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.hero-image-upload {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px dashed rgba(37,99,235,0.36);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.hero-image-upload-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.hero-image-upload small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-image-overlay-label {
  display: grid;
  gap: 8px;
}

.hero-image-overlay-label span {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
}

.hero-image-overlay-label input[type="range"] {
  width: 100%;
}

.preview-hero {
  --preview-hero-overlay: 0.56;
  --preview-hero-image: url('/images/pilotafter.JPG');
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(10,15,30,0.1), rgba(10,15,30,var(--preview-hero-overlay))),
    var(--preview-hero-image) center / cover;
}

.preview-hero span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-hero h2 {
  margin-bottom: 8px;
  font-size: 30px;
}

.preview-hero p {
  max-width: 440px;
  margin-bottom: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

.preview-hero a {
  flex: 0 0 auto;
  min-width: 86px;
  padding: 12px 14px;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  font-weight: 900;
}

.preview-form {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.preview-form button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

/* Public quote pages */
.public-page-body {
  min-height: 100vh;
  background: #f8fafc;
}

.public-page {
  min-height: 100vh;
}

.public-hero {
  --public-hero-overlay: 0.72;
  --public-hero-image: url('/images/pilotafter.JPG');
  min-height: 58vh;
  display: grid;
  align-items: end;
  padding: clamp(26px, 5vw, 62px);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(10,15,30,0.12), rgba(10,15,30,var(--public-hero-overlay))),
    var(--public-hero-image) center / cover;
}

.public-hero-inner {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin: 0 auto;
}

.public-hero span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-brand-logo {
  display: block;
  width: min(220px, 70vw);
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 18px;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.24));
}

.public-hero h1 {
  max-width: 780px;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(42px, 7vw, 82px);
  line-height: 0.98;
}

.public-hero p {
  max-width: 680px;
  margin-bottom: 0;
  color: rgba(255,255,255,0.84);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
}

.public-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}

.public-content {
  width: min(1080px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.64fr);
  gap: 24px;
  align-items: start;
  margin: -58px auto 0;
  padding-bottom: 48px;
  position: relative;
  z-index: 2;
}

.public-proof,
.public-quote-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.public-proof {
  padding: 22px;
}

.public-proof h2,
.public-quote-card h2 {
  font-size: 22px;
}

.public-proof p,
.public-quote-card p {
  color: var(--muted);
  line-height: 1.55;
}

.public-proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.public-proof-list div {
  min-height: 88px;
  padding: 14px;
  border-radius: 8px;
  background: var(--wash);
}

.public-proof-list strong,
.public-proof-list span {
  display: block;
}

.public-proof-list span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.public-quote-card {
  padding: 20px;
}

.public-lead-form {
  display: grid;
  gap: 12px;
}

.public-lead-form button {
  min-height: 48px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.public-thanks {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
}

.public-thanks strong {
  color: #15803d;
}

.public-fine-print {
  margin: 4px 0 0;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.45;
}

/* Generated website preview */
.rl-site-body {
  min-height: 100vh;
  background: #fff;
}

.rl-site {
  min-height: 100vh;
  color: #0f172a;
  background: #fff;
}

.rl-site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 54px);
  border-bottom: 1px solid rgba(226,232,240,0.82);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
}

.rl-site-brand,
.rl-site-nav a {
  color: #0f172a;
  text-decoration: none;
}

.rl-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 950;
}

.rl-site-brand img {
  width: auto;
  max-width: 150px;
  max-height: 42px;
  object-fit: contain;
}

.rl-site-brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-site-nav > div {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #475569;
  font-size: 14px;
  font-weight: 850;
}

.rl-site-nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  background: #2563eb;
  color: #fff !important;
}

.rl-site-hero {
  --rl-site-hero-overlay: 0.56;
  --rl-site-hero-image: url('/images/pilotafter.JPG');
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  align-items: end;
  padding: clamp(32px, 7vw, 86px) clamp(18px, 5vw, 64px);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.18), rgba(15,23,42,var(--rl-site-hero-overlay))),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-hero-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.rl-site-hero span,
.rl-site-section-head span {
  display: block;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rl-site-hero span {
  color: rgba(255,255,255,0.82);
  margin-bottom: 12px;
}

.rl-site-hero h1 {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 0.96;
}

.rl-site-hero p {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 750;
  line-height: 1.45;
}

.rl-site-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.rl-site-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-weight: 950;
  text-decoration: none;
}

.rl-site-hero-actions a + a {
  background: rgba(255,255,255,0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}

.rl-site-section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 78px) 0;
}

.rl-site-band {
  width: 100%;
  padding-inline: max(16px, calc((100vw - 1120px) / 2));
  background: #f8fafc;
}

.rl-site-section-head {
  display: grid;
  gap: 9px;
  max-width: 760px;
  margin-bottom: 22px;
}

.rl-site-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.rl-site-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.5;
}

.rl-site-card-grid,
.rl-site-proof-grid,
.rl-site-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rl-site-card,
.rl-site-review-box,
.rl-site-placeholder,
.rl-site-contact-card,
.rl-site-video-card,
.rl-site-faq-list details {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15,23,42,0.06);
}

.rl-site-card,
.rl-site-review-box,
.rl-site-placeholder,
.rl-site-contact-card,
.rl-site-video-card {
  padding: 18px;
}

.rl-site-card strong,
.rl-site-review-box strong,
.rl-site-placeholder strong,
.rl-site-contact-card strong,
.rl-site-video-card strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

.rl-site-card p,
.rl-site-review-box p,
.rl-site-placeholder span,
.rl-site-video-card p {
  margin: 8px 0 0;
  color: #64748b;
  font-weight: 750;
  line-height: 1.45;
}

.rl-site-proof-card {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15,23,42,0.06);
}

.rl-site-proof-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.rl-site-proof-card figcaption {
  padding: 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.rl-site-review-box a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: 7px;
  background: #2563eb;
  color: #fff;
  font-weight: 950;
  text-decoration: none;
}

.rl-site-slider {
  --rl-slider-bg: #ffffff;
  --rl-slider-border: #e2e8f0;
  --rl-slider-text: #0f172a;
  --rl-slider-muted: #64748b;
  --rl-slider-accent: #2563eb;
  --rl-slider-control-bg: rgba(15,23,42,0.03);
  width: min(100%, 920px);
  overflow: hidden;
  border: 1px solid var(--rl-slider-border);
  border-radius: 8px;
  background: var(--rl-slider-bg);
  box-shadow: 0 18px 48px rgba(15,23,42,0.07);
}

.rl-site-slider-proof {
  width: min(100%, 760px);
}

.rl-site-slider-viewport {
  overflow: hidden;
  outline: none;
}

.rl-site-slider-track {
  display: flex;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.rl-site-proof-slide,
.rl-site-review-slide {
  flex: 0 0 100%;
  min-width: 100%;
  opacity: 0.56;
  transform: scale(0.985);
  transition: opacity 360ms ease, transform 620ms cubic-bezier(.22,.61,.36,1);
}

.rl-site-proof-slide.is-active,
.rl-site-review-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.rl-site-proof-slide {
  padding: 0;
}

.rl-site-proof-card {
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.rl-site-proof-meta {
  padding: 22px 24px 26px;
  border-top: 1px solid var(--rl-slider-border);
}

.rl-site-proof-meta span {
  display: block;
  margin-bottom: 9px;
  color: var(--rl-slider-accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rl-site-proof-meta strong {
  display: block;
  color: var(--rl-slider-text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

.rl-site-proof-meta p {
  margin: 8px 0 0;
  color: var(--rl-slider-muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.6;
}

.rl-site-proof-slide-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.rl-site-proof-figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  isolation: isolate;
}

.rl-site-proof-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transform: scale(1.018) translateZ(0);
  backface-visibility: hidden;
  transition: opacity 250ms ease, transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.rl-site-proof-slide.is-active img,
.rl-site-slider:hover .rl-site-proof-slide img {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.rl-site-proof-figure span {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,15,30,0.85);
  color: rgba(245,245,245,0.84);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.rl-site-proof-figure span.is-after {
  border-color: transparent;
  background: rgba(37,99,235,0.88);
  color: #fff;
}

.rl-site-review-slide {
  padding: 36px 28px 32px;
}

.rl-site-review-stars {
  margin-bottom: 14px;
  color: var(--rl-slider-accent);
  font-size: 13px;
  letter-spacing: 0.15em;
}

.rl-site-review-quote {
  max-width: 880px;
  margin: 0 0 20px;
  color: var(--rl-slider-text);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.75;
}

.rl-site-review-meta strong {
  display: block;
  color: var(--rl-slider-text);
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 3px;
}

.rl-site-review-meta span {
  display: block;
  color: var(--rl-slider-muted);
  font-size: 13px;
  font-weight: 800;
}

.rl-site-slider-controls {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--rl-slider-border);
  background: var(--rl-slider-control-bg);
}

.rl-site-slider.is-single .rl-site-slider-controls {
  display: none;
}

.rl-site-slider-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rl-slider-border);
  border-radius: 7px;
  background: rgba(255,255,255,0.74);
  color: var(--rl-slider-text);
  cursor: pointer;
  font-size: 17px;
  font-weight: 950;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.rl-site-slider-btn:hover:not(:disabled) {
  background: var(--rl-slider-accent);
  color: #fff;
}

.rl-site-slider-btn:disabled {
  cursor: default;
  opacity: 0.42;
}

.rl-site-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rl-site-slider-dot {
  display: block;
  flex: 0 0 auto;
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--rl-slider-muted) 36%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rl-site-slider-dot.is-active {
  background: var(--rl-slider-accent);
  transform: scale(1.4);
}

.rl-site-review-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 16px;
  border-radius: 7px;
  background: #2563eb;
  color: #fff;
  font-weight: 950;
  text-decoration: none;
}

.rl-site-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border-radius: 7px;
  background: #0f172a;
}

.rl-site-faq-list {
  display: grid;
  gap: 10px;
}

.rl-site-faq-list details {
  padding: 16px 18px;
}

.rl-site-faq-list summary {
  color: #0f172a;
  font-weight: 950;
  cursor: pointer;
}

.rl-site-faq-list p {
  margin: 10px 0 0;
  color: #64748b;
  font-weight: 750;
  line-height: 1.5;
}

.rl-site-form-frame {
  display: block;
  width: 100%;
  min-height: 820px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15,23,42,0.06);
}

.rl-site-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
  gap: 18px;
  align-items: start;
}

.rl-site-contact-card {
  display: grid;
  gap: 8px;
}

.rl-site-contact-card span {
  color: #64748b;
  font-weight: 800;
}

.rl-site-contact-card a {
  color: #2563eb;
  font-size: 20px;
  font-weight: 950;
  text-decoration: none;
}

.rl-site-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 26px clamp(18px, 4vw, 54px);
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-weight: 850;
}

.rl-site-footer strong {
  color: #0f172a;
}

@media (max-width: 820px) {
  .rl-site-nav {
    position: static;
    display: grid;
    min-height: 0;
    padding: 14px 16px;
  }

  .rl-site-nav > div {
    overflow-x: auto;
    padding-bottom: 2px;
    white-space: nowrap;
  }

  .rl-site-hero {
    min-height: 520px;
    padding: 44px 16px;
  }

  .rl-site-hero h1 {
    font-size: clamp(38px, 12vw, 58px);
  }

  .rl-site-section {
    width: min(100% - 28px, 1120px);
    padding: 42px 0;
  }

  .rl-site-band {
    padding-inline: 14px;
  }

  .rl-site-card-grid,
  .rl-site-proof-grid,
  .rl-site-video-grid,
  .rl-site-contact {
    grid-template-columns: 1fr;
  }

  .rl-site-form-frame {
    min-height: 760px;
  }

  .rl-site-footer {
    display: grid;
    padding: 22px 16px;
  }
}

/* Generated website premium pass */
.rl-site-body {
  background: #f6f8fb;
}

.rl-site {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafc 44%, #ffffff 100%);
  color: #101828;
}

.rl-site-nav {
  min-height: 76px;
  padding: 0 clamp(18px, 5vw, 68px);
  border-bottom: 1px solid rgba(16,24,40,0.08);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px rgba(16,24,40,0.05);
}

.rl-site-brand {
  font-size: 15px;
}

.rl-site-nav > div {
  gap: 18px;
  color: #475467;
}

.rl-site-nav > div > a:not(.rl-site-nav-cta) {
  position: relative;
  padding: 8px 0;
}

.rl-site-nav > div > a:not(.rl-site-nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: #12b76a;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.rl-site-nav > div > a:not(.rl-site-nav-cta):hover::after {
  opacity: 1;
  transform: translateY(0);
}

.rl-site-nav-cta {
  min-height: 42px;
  background: #101828;
  box-shadow: 0 10px 22px rgba(16,24,40,0.16);
}

.rl-site-hero {
  min-height: clamp(650px, 86vh, 860px);
  align-items: end;
  padding: clamp(44px, 7vw, 92px) clamp(18px, 5vw, 68px) 28px;
  background:
    radial-gradient(circle at 78% 24%, rgba(18,183,106,0.22), transparent 24%),
    linear-gradient(90deg, rgba(7,13,24,0.92), rgba(15,23,42,0.72) 50%, rgba(15,23,42,var(--rl-site-hero-overlay))),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: clamp(22px, 5vw, 58px);
  align-items: end;
}

.rl-site-hero-copy {
  min-width: 0;
}

.rl-site-hero span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.06em;
}

.rl-site-hero h1 {
  max-width: 900px;
  font-size: clamp(46px, 7.4vw, 94px);
  letter-spacing: 0;
}

.rl-site-hero p {
  max-width: 680px;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
}

.rl-site-hero-actions {
  gap: 10px;
  margin-top: 30px;
}

.rl-site-hero-actions a {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 8px;
}

.rl-site-hero-actions a:first-child {
  background: #12b76a;
  color: #052e1a;
  box-shadow: 0 18px 36px rgba(18,183,106,0.28);
}

.rl-site-hero-actions a + a {
  background: rgba(255,255,255,0.1);
}

.rl-site-hero-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.11);
  box-shadow: 0 24px 70px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
}

.rl-site-hero-card > strong {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.rl-site-hero-card div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.rl-site-hero-card div span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(18,183,106,0.16);
  color: #86efac;
  font-size: 11px;
  letter-spacing: 0;
}

.rl-site-hero-card p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.rl-site-trust-strip {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
}

.rl-site-trust-strip span {
  display: block;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.rl-site-no-hero-spacer {
  height: 36px;
}

.rl-site-intro {
  width: min(1120px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.6fr);
  gap: 22px;
  align-items: end;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 58px) 0 8px;
}

.rl-site-intro span {
  display: block;
  margin-bottom: 8px;
  color: #1570ef;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rl-site-intro strong {
  display: block;
  color: #101828;
  font-size: clamp(28px, 4.4vw, 50px);
  font-weight: 950;
  line-height: 1;
}

.rl-site-intro p {
  margin: 0;
  color: #667085;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.55;
}

.rl-site-section {
  padding: clamp(50px, 7vw, 86px) 0;
}

.rl-site-component-layout-compact {
  padding-top: clamp(34px, 5vw, 58px);
  padding-bottom: clamp(34px, 5vw, 58px);
}

.rl-site-component-layout-compact .rl-site-section-head {
  max-width: 620px;
}

.rl-site-component-layout-compact .rl-site-section-head h2 {
  font-size: clamp(26px, 3.5vw, 40px);
}

.rl-site-component-layout-featured .rl-site-section-head {
  max-width: 900px;
}

.rl-site-component-layout-featured .rl-site-section-head h2 {
  font-size: clamp(40px, 5.8vw, 72px);
}

.rl-site-band {
  background:
    linear-gradient(180deg, #f8fafc, #eef4f8);
}

.rl-site-section-head {
  gap: 10px;
  margin-bottom: 26px;
}

.rl-site-section-head span {
  color: #1570ef;
}

.rl-site-section-head h2 {
  color: #101828;
  font-size: clamp(32px, 4.4vw, 54px);
  letter-spacing: 0;
}

.rl-site-section-head p {
  color: #667085;
  font-weight: 725;
}

.rl-site-card-grid,
.rl-site-video-grid {
  gap: 16px;
}

.rl-site-card,
.rl-site-review-box,
.rl-site-placeholder,
.rl-site-contact-card,
.rl-site-video-card,
.rl-site-faq-list details {
  border-color: rgba(16,24,40,0.08);
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(16,24,40,0.07);
}

.rl-site-card {
  min-height: 210px;
  display: grid;
  align-content: end;
  padding: 22px;
}

.rl-site-card > span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 34px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #087443;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.rl-site-card strong {
  font-size: 20px;
}

.rl-site-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rl-site-process article {
  min-height: 230px;
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 22px;
  border: 1px solid rgba(16,24,40,0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(16,24,40,0.07);
}

.rl-site-process span {
  color: #f79009;
  font-size: 13px;
  font-weight: 950;
}

.rl-site-process strong {
  display: block;
  color: #101828;
  font-size: 24px;
  font-weight: 950;
}

.rl-site-process p {
  margin: 8px 0 0;
  color: #667085;
  font-weight: 750;
  line-height: 1.45;
}

.rl-site-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rl-site-proof-card.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.rl-site-proof-card {
  border-radius: 10px;
}

.rl-site-proof-card img {
  aspect-ratio: 4 / 3;
}

.rl-site-proof-card.is-featured img {
  aspect-ratio: 16 / 10;
}

.rl-site-proof-card figcaption {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.rl-site-proof-card figcaption strong {
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.rl-site-proof-card figcaption span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.rl-site-review-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 24px;
}

.rl-site-review-box span {
  display: block;
  margin-bottom: 8px;
  color: #f79009;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rl-site-review-box strong {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.04;
}

.rl-site-review-box a {
  min-height: 46px;
  border-radius: 8px;
  background: #101828;
}

.rl-site-quote-section {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
}

.rl-site-quote-copy {
  position: sticky;
  top: 96px;
}

.rl-site-quote-points {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.rl-site-quote-points span {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(16,24,40,0.08);
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(16,24,40,0.05);
}

.rl-site-form-frame {
  min-height: 880px;
  border-radius: 10px;
}

.rl-site-contact {
  align-items: stretch;
}

.rl-site-contact-card {
  align-content: center;
  gap: 10px;
  padding: 24px;
  background:
    linear-gradient(135deg, #101828, #1d2939);
}

.rl-site-contact-card strong,
.rl-site-contact-card span,
.rl-site-contact-card small {
  color: #fff;
}

.rl-site-contact-card small {
  color: rgba(255,255,255,0.7);
  font-weight: 750;
  line-height: 1.45;
}

.rl-site-contact-card a {
  color: #86efac;
}

.rl-site-footer {
  background: #101828;
  color: rgba(255,255,255,0.7);
}

.rl-site-footer strong {
  color: #fff;
}

@media (max-width: 920px) {
  .rl-site-hero-inner,
  .rl-site-intro,
  .rl-site-quote-section {
    grid-template-columns: 1fr;
  }

  .rl-site-hero-card,
  .rl-site-quote-copy {
    position: static;
  }

  .rl-site-trust-strip,
  .rl-site-process,
  .rl-site-card-grid,
  .rl-site-proof-grid,
  .rl-site-video-grid {
    grid-template-columns: 1fr;
  }

  .rl-site-proof-card.is-featured {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .rl-site-nav {
    padding: 14px;
  }

  .rl-site-hero {
    min-height: 0;
    padding: 42px 14px 18px;
  }

  .rl-site-hero h1 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .rl-site-hero-card {
    padding: 16px;
  }

  .rl-site-trust-strip {
    margin-top: 22px;
  }

  .rl-site-intro,
  .rl-site-section {
    width: min(100% - 28px, 1120px);
  }

  .rl-site-review-box {
    grid-template-columns: 1fr;
  }
}

/* Generated website editorial pass */
.rl-site {
  background: #0b0d10;
  color: #f8fafc;
}

.rl-site-nav {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(11,13,16,0.82);
  box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}

.rl-site-brand,
.rl-site-nav a {
  color: #f8fafc;
}

.rl-site-nav > div {
  color: rgba(248,250,252,0.72);
}

.rl-site-nav > div > a:not(.rl-site-nav-cta)::after {
  background: #f30635;
}

.rl-site-nav-cta {
  background: #f30635;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(243,6,53,0.32);
}

.rl-site-hero {
  min-height: clamp(720px, 92vh, 960px);
  padding: clamp(48px, 8vw, 110px) clamp(18px, 5vw, 72px) 36px;
  background:
    radial-gradient(circle at 82% 24%, rgba(243,6,53,0.18), transparent 20%),
    linear-gradient(90deg, rgba(11,13,16,0.98), rgba(11,13,16,0.9) 42%, rgba(11,13,16,0.64)),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.78fr);
  align-items: center;
  gap: clamp(28px, 6vw, 82px);
}

.rl-site-included-mark {
  display: grid;
  grid-template-columns: 112px auto 112px;
  gap: 14px;
  align-items: center;
  width: fit-content;
  margin-bottom: 26px;
}

.rl-site-included-mark span {
  display: block;
  width: auto;
  height: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f30635;
}

.rl-site-included-mark strong {
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.56em;
  line-height: 1;
  text-transform: uppercase;
}

.rl-site-hero-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rl-site-hero h1 {
  max-width: 880px;
  color: #fff;
  font-size: clamp(56px, 7.8vw, 118px);
  font-weight: 900;
  line-height: 0.9;
}

.rl-site-hero p {
  max-width: 760px;
  color: rgba(255,255,255,0.64);
  font-size: clamp(19px, 2.25vw, 30px);
  font-weight: 600;
  line-height: 1.55;
}

.rl-site-hero-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px 34px;
  max-width: 760px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.rl-site-hero-checklist li {
  position: relative;
  min-height: 32px;
  padding-left: 42px;
  color: rgba(255,255,255,0.92);
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 750;
  line-height: 1.25;
}

.rl-site-hero-checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 12px;
  border-left: 7px solid #f30635;
  border-bottom: 7px solid #f30635;
  border-radius: 2px;
  transform: rotate(-45deg);
}

.rl-site-hero-actions {
  margin-top: 34px;
}

.rl-site-hero-actions a:first-child {
  background: #f30635;
  color: #fff;
  box-shadow: 0 18px 42px rgba(243,6,53,0.32);
}

.rl-site-hero-actions a + a {
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.rl-site-hero-showcase {
  min-width: 0;
}

.rl-site-showcase-frame {
  position: relative;
  min-height: clamp(360px, 46vw, 580px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  background: #17191d;
  box-shadow: 0 36px 100px rgba(0,0,0,0.52);
}

.rl-site-showcase-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05);
}

.rl-site-showcase-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(243,6,53,0.88) 0%, rgba(243,6,53,0.88) 32%, transparent 32%),
    linear-gradient(180deg, rgba(11,13,16,0.16), rgba(11,13,16,0.62));
  mix-blend-mode: multiply;
}

.rl-site-showcase-overlay {
  position: absolute;
  right: 0;
  top: 18%;
  z-index: 2;
  width: min(52%, 360px);
  padding: clamp(20px, 3vw, 34px);
  background: rgba(16,18,22,0.94);
  box-shadow: -18px 26px 70px rgba(0,0,0,0.38);
}

.rl-site-showcase-overlay span,
.rl-site-showcase-card span,
.rl-site-showcase-toolbar span {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
}

.rl-site-showcase-overlay span {
  margin-bottom: 24px;
  color: rgba(255,255,255,0.54);
  font-size: 22px;
  font-weight: 900;
}

.rl-site-showcase-overlay strong {
  display: block;
  color: #fff;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.rl-site-showcase-overlay p {
  margin: 16px 0 0;
  color: rgba(255,255,255,0.66);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.rl-site-showcase-card {
  position: absolute;
  right: -1px;
  bottom: 44px;
  z-index: 3;
  width: min(42%, 250px);
  min-height: 120px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(135deg, #f30635, #6d3bff);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
}

.rl-site-showcase-card span {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rl-site-showcase-card strong {
  color: #fff;
  font-size: clamp(26px, 4vw, 54px);
  font-weight: 900;
  line-height: 0.9;
}

.rl-site-showcase-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  background: #101217;
  box-shadow: 0 20px 64px rgba(0,0,0,0.28);
}

.rl-site-showcase-toolbar span {
  padding: 18px 12px;
  color: rgba(255,255,255,0.76);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.rl-site-trust-strip {
  margin-top: 42px;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  border-radius: 0;
}

.rl-site-trust-strip span {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.64);
}

.rl-site-intro,
.rl-site-section {
  color: #101828;
}

.rl-site-intro {
  margin-top: 0;
  padding-top: clamp(48px, 7vw, 86px);
}

@media (max-width: 1020px) {
  .rl-site-hero-inner {
    grid-template-columns: 1fr;
  }

  .rl-site-showcase-frame {
    min-height: 420px;
  }
}

@media (max-width: 700px) {
  .rl-site-hero {
    min-height: 0;
    padding: 38px 14px 18px;
  }

  .rl-site-included-mark {
    grid-template-columns: 70px auto 70px;
    gap: 10px;
    margin-bottom: 20px;
  }

  .rl-site-included-mark strong {
    font-size: 11px;
    letter-spacing: 0.38em;
  }

  .rl-site-hero h1 {
    font-size: clamp(44px, 15vw, 68px);
  }

  .rl-site-hero p {
    font-size: 18px;
  }

  .rl-site-hero-checklist {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .rl-site-showcase-frame {
    min-height: 390px;
    border-radius: 14px;
  }

  .rl-site-showcase-overlay {
    top: auto;
    bottom: 0;
    width: 72%;
    padding: 18px;
  }

  .rl-site-showcase-card {
    top: 18px;
    right: 0;
    bottom: auto;
    width: 56%;
    min-height: 96px;
    border-radius: 14px 0 0 14px;
  }

  .rl-site-showcase-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Generated website RenewaLens index layout pass */
.rl-site-body {
  min-height: 100vh;
  background: #0a0f1e;
}

.rl-site {
  --rl-site-blue: #2563eb;
  --rl-site-blue-light: #93b4ff;
  --rl-site-dark: #111827;
  --rl-site-dark-2: #0b1220;
  --rl-site-dark-3: #07111f;
  --rl-site-max: 1200px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #0a0f1e;
  color: #f5f5f5;
  font-family: "Roboto", "Google Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rl-site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  min-height: 80px;
  padding: 0 max(32px, calc((100vw - var(--rl-site-max)) / 2));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(7,17,31,0.72), rgba(7,17,31,0.24));
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.2);
}

.rl-site-brand,
.rl-site-nav a {
  color: #f5f5f5;
}

.rl-site-brand {
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.rl-site-brand img {
  max-height: 46px;
  max-width: 150px;
}

.rl-site-nav > div {
  gap: 18px;
  color: rgba(245,245,245,0.62);
  font-size: 13px;
  font-weight: 700;
}

.rl-site-nav > div > a:not(.rl-site-nav-cta)::after {
  background: var(--rl-site-blue);
}

.rl-site-nav-cta {
  min-height: 42px;
  border-radius: 0;
  background: var(--rl-site-blue);
  color: #fff !important;
  box-shadow: none;
}

.rl-site-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(160deg, rgba(7,17,31,0.92) 0%, rgba(11,18,32,0.82) 60%, rgba(11,18,32,var(--rl-site-hero-overlay)) 100%),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(37,99,235,0.04) 59px, rgba(37,99,235,0.04) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(37,99,235,0.04) 59px, rgba(37,99,235,0.04) 60px);
  pointer-events: none;
}

.rl-site-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: 180px;
  background: linear-gradient(180deg, rgba(7,17,31,0) 0%, rgba(7,17,31,0.72) 58%, #0a0f1e 100%);
  pointer-events: none;
}

.rl-site-hero-inner {
  position: relative;
  z-index: 3;
  width: min(var(--rl-site-max), calc(100% - 64px));
  display: block;
  margin: 0 auto;
  padding: 120px 0 60px;
}

.rl-site-hero-copy {
  max-width: 760px;
}

.rl-site-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: rgba(245,245,245,0.55);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rl-site-hero-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--rl-site-blue);
  flex: 0 0 auto;
}

.rl-site-hero h1 {
  max-width: 760px;
  margin: 0 0 16px;
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.rl-site-hero p {
  max-width: 540px;
  margin: 0 0 36px;
  color: rgba(245,245,245,0.58);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  line-height: 1.7;
}

.rl-site-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 0 48px;
}

.rl-site-hero-actions a {
  min-height: 60px;
  justify-content: space-between;
  padding: 0 20px 0 24px;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.rl-site-hero-actions a:first-child {
  background: var(--rl-site-blue);
  box-shadow: none;
}

.rl-site-hero-actions a + a {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
  color: rgba(245,245,245,0.8);
}

.rl-site-trust-strip {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  background: rgba(2,6,23,0.42);
  backdrop-filter: blur(14px);
}

.rl-site-trust-strip span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  margin: 0;
  padding: 18px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.rl-site-trust-strip span + span {
  border-left: 1px solid rgba(255,255,255,0.1);
}

.rl-site-trust-strip strong {
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.rl-site-trust-strip small {
  margin-top: 8px;
  color: rgba(245,245,245,0.48);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.rl-site-learn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: center;
  color: rgba(245,245,245,0.45);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.rl-site-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px max(32px, calc((100vw - var(--rl-site-max)) / 2));
  color: #f5f5f5;
}

.rl-site-component-before_after {
  background:
    radial-gradient(ellipse at 14% 96%, rgba(37,99,235,0.18), transparent 54%),
    radial-gradient(ellipse at 86% 10%, rgba(37,99,235,0.1), transparent 48%),
    linear-gradient(180deg, #0a0f1e 0%, #111827 46%, #0b1220 100%);
}

.rl-site-component-services {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(37,99,235,0.18), transparent 52%),
    radial-gradient(ellipse at 12% 96%, rgba(37,99,235,0.08), transparent 50%),
    linear-gradient(180deg, #111827 0%, #0d1525 52%, #0a0f1e 100%);
}

.rl-site-component-why_choose_us,
.rl-site-component-reviews,
.rl-site-component-videos,
.rl-site-component-faq {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(37,99,235,0.15), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(37,99,235,0.1), transparent 45%),
    linear-gradient(180deg, #0d1525 0%, #111827 48%, #08111f 100%);
}

.rl-site-quote-section,
.rl-site-contact {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(37,99,235,0.2), transparent 52%),
    linear-gradient(180deg, #08111f 0%, #0b1220 58%, #0b1220 100%);
}

.rl-site-section-head {
  max-width: 68ch;
  display: block;
  margin: 0 0 48px;
}

.rl-site-section-head span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--rl-site-blue-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rl-site-section-head span::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--rl-site-blue);
  flex: 0 0 auto;
}

.rl-site-section-head h2 {
  margin: 0 0 14px;
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
}

.rl-site-section-head p {
  margin: 0;
  color: rgba(245,245,245,0.55);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.rl-site-card-grid,
.rl-site-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.06);
}

.rl-site-card,
.rl-site-process article,
.rl-site-video-card,
.rl-site-faq-list details {
  min-height: 0;
  padding: 36px 28px 40px;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,0.03);
  box-shadow: none;
}

.rl-site-card > span,
.rl-site-process span {
  display: block;
  width: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rl-site-blue);
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rl-site-card strong,
.rl-site-process strong,
.rl-site-video-card strong,
.rl-site-faq-list summary {
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.rl-site-card p,
.rl-site-process p,
.rl-site-video-card p,
.rl-site-faq-list p {
  margin: 12px 0 0;
  color: rgba(245,245,245,0.5);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.rl-site-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.rl-site-ba-slider {
  display: grid;
  grid-auto-columns: minmax(100%, 1fr);
  grid-auto-flow: column;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(147,180,255,0.45) rgba(255,255,255,0.08);
}

.rl-site-ba-slider::-webkit-scrollbar {
  height: 10px;
}

.rl-site-ba-slider::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
}

.rl-site-ba-slider::-webkit-scrollbar-thumb {
  background: rgba(147,180,255,0.45);
}

.rl-site-ba-slide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  scroll-snap-align: start;
}

.rl-site-ba-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rl-site-ba-slide img + img {
  border-left: 1px solid rgba(255,255,255,0.08);
}

.rl-site-proof-card,
.rl-site-placeholder,
.rl-site-review-box,
.rl-site-contact-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  background: rgba(255,255,255,0.04);
  box-shadow: none;
}

.rl-site-proof-card.is-featured {
  grid-column: auto;
  grid-row: auto;
}

.rl-site-proof-card img,
.rl-site-proof-card.is-featured img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.92;
}

.rl-site-proof-card figcaption {
  display: grid;
  gap: 8px;
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.rl-site-proof-card figcaption strong {
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.rl-site-proof-card figcaption span {
  color: var(--rl-site-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rl-site-placeholder {
  display: grid;
  gap: 8px;
  padding: 28px;
}

.rl-site-placeholder strong {
  color: #f5f5f5;
}

.rl-site-placeholder span {
  color: rgba(245,245,245,0.55);
}

.rl-site-review-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
}

.rl-site-review-box span {
  color: var(--rl-site-blue-light);
}

.rl-site-review-box strong {
  color: #f5f5f5;
  font-family: "Google Sans", "Goldman", system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 42px);
}

.rl-site-review-box p {
  color: rgba(245,245,245,0.55);
}

.rl-site-review-box a,
.rl-site-contact-card a {
  border-radius: 0;
  background: var(--rl-site-blue);
  color: #fff;
}

.rl-site-quote-section {
  grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr);
  gap: 32px;
}

.rl-site-quote-points span {
  border-color: rgba(255,255,255,0.08);
  border-radius: 0;
  background: rgba(255,255,255,0.04);
  color: rgba(245,245,245,0.68);
  box-shadow: none;
}

.rl-site-form-frame {
  border-color: rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: none;
}

.rl-site-contact {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rl-site-contact-card {
  padding: 28px;
  background: rgba(255,255,255,0.04);
}

.rl-site-contact-card strong,
.rl-site-contact-card span,
.rl-site-contact-card small {
  color: #f5f5f5;
}

.rl-site-footer {
  padding: 32px max(32px, calc((100vw - var(--rl-site-max)) / 2));
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #0b1220;
  color: rgba(245,245,245,0.52);
}

.rl-site-footer strong {
  color: #f5f5f5;
}

@media (max-width: 900px) {
  .rl-site-nav {
    position: fixed;
    display: flex;
    min-height: 72px;
    padding: 0 20px;
  }

  .rl-site-nav > div {
    overflow-x: auto;
    white-space: nowrap;
  }

  .rl-site-hero-inner {
    width: calc(100% - 40px);
    padding: 112px 0 52px;
  }

  .rl-site-section,
  .rl-site-quote-section,
  .rl-site-contact {
    grid-template-columns: 1fr;
    padding: 72px 20px;
  }

  .rl-site-card-grid,
  .rl-site-process,
  .rl-site-proof-grid,
  .rl-site-video-grid,
  .rl-site-review-box {
    grid-template-columns: 1fr;
  }

  .rl-site-quote-copy {
    position: static;
  }
}

@media (max-width: 520px) {
  .rl-site-nav {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
  }

  .rl-site-hero-inner {
    width: calc(100% - 32px);
    padding-top: 132px;
  }

  .rl-site-hero-actions a {
    width: 100%;
  }

  .rl-site-trust-strip {
    width: 100%;
  }

  .rl-site-trust-strip span {
    min-height: 82px;
    padding: 14px 10px;
  }

  .rl-site-trust-strip strong {
    font-size: 20px;
  }

  .rl-site-trust-strip small {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .rl-site-proof-card figcaption,
  .rl-site-card,
  .rl-site-process article {
    padding: 24px 20px;
  }
}

.embedded-form-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.1), transparent 34%),
    #f8fafc;
}

.embedded-form-shell {
  width: min(760px, calc(100% - 28px));
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) 0;
}

.embedded-form-card {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15,23,42,0.09);
}

.embedded-form-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.embedded-form-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  max-width: min(190px, 58vw);
  min-height: 46px;
  margin-bottom: 2px;
  border-radius: 8px;
  transition: background 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}

.embedded-form-logo-wrap.needs-logo-backdrop {
  padding: 9px 11px;
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 10px 24px rgba(15,23,42,0.14);
}

.embedded-form-logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
}

.embedded-form-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.embedded-form-head h1 {
  color: var(--ink);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
}

.embedded-form-head p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.embedded-lead-form {
  display: grid;
  gap: 13px;
}

.public-form-field {
  display: grid;
  gap: 8px;
}

.public-form-field strong,
.public-form-checks legend,
.public-form-vehicle legend,
.public-form-schedule legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-form-field strong span,
.public-form-checks legend span,
.public-form-vehicle legend span,
.public-form-schedule legend span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 10px;
}

.public-form-field strong .optional,
.public-form-checks legend .optional,
.public-form-vehicle legend .optional,
.public-form-schedule legend .optional {
  background: #f1f5f9;
  color: var(--muted);
}

.public-form-checks {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.public-form-vehicle {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.public-form-schedule {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.public-form-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.public-form-vehicle-grid label,
.public-form-schedule-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.public-form-vehicle-grid label > span,
.public-form-schedule-grid label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.public-form-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.public-schedule-date-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-self: start;
}

.public-schedule-date-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.public-schedule-date-picker {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.public-schedule-date-picker-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.public-schedule-date-picker-head strong {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.public-schedule-date-picker-head button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 22px;
  font-weight: 950;
  cursor: pointer;
}

.public-schedule-date-picker-head button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.public-schedule-date-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.public-schedule-date-option {
  display: grid;
  place-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 8px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,0.04);
  scroll-snap-align: start;
}

.public-schedule-date-option strong,
.public-schedule-date-option span {
  display: block;
}

.public-schedule-date-option strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.public-schedule-date-option span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.public-schedule-date-option[aria-pressed="true"] {
  border-color: var(--blue);
  background: #eff6ff;
  color: var(--blue);
  box-shadow: 0 10px 24px rgba(37,99,235,0.12);
}

.public-schedule-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.public-schedule-feedback.is-warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.public-address-search {
  position: relative;
  display: grid;
  gap: 8px;
}

.public-address-dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,0.16);
}

.public-address-dropdown[hidden] {
  display: none;
}

.public-address-option {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.public-address-option:hover,
.public-address-option:focus-visible {
  background: #eff6ff;
  color: var(--blue);
  outline: none;
}

.public-address-option strong,
.public-address-option span {
  display: block;
}

.public-address-option strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
}

.public-address-option span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.public-form-quote-preview {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
  color: var(--ink);
}

.public-form-quote-preview strong {
  font-size: 28px;
  line-height: 1;
}

.public-form-quote-preview span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.public-form-checks label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-weight: 850;
}

.public-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.embedded-lead-form button[type="submit"] {
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.embedded-form-status {
  min-height: 20px;
  color: #b91c1c;
  font-weight: 850;
}

.embedded-form-thanks {
  display: grid;
  gap: 8px;
}

.embedded-form-thanks[hidden] {
  display: none;
}

.details-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.details-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.details-list div:last-child { border-bottom: 0; }
.details-list dt { color: var(--muted); font-weight: 800; }
.details-list dd { margin: 0; text-align: right; }

.plain-list {
  margin: 0;
  padding-left: 19px;
  color: var(--muted);
  line-height: 1.7;
}

.app-date-picker-modal {
  width: min(438px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  color: #252a33;
  box-shadow: 0 26px 80px rgba(30,41,59,0.18);
}

.app-date-picker-card {
  display: grid;
  gap: 20px;
  width: 100%;
  padding: 22px;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  background: #fff;
}

.app-date-picker-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

.app-date-picker-tabs button,
.app-date-picker-title,
.app-date-picker-nav,
.app-date-picker-day,
.app-date-picker-month {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.app-date-picker-tabs button {
  min-height: 38px;
  border-radius: 7px;
  color: #475467;
  font-size: 15px;
  font-weight: 750;
}

.app-date-picker-tabs button:hover,
.app-date-picker-tabs button:focus-visible,
.app-date-picker-title:hover,
.app-date-picker-title:focus-visible,
.app-date-picker-nav:hover,
.app-date-picker-nav:focus-visible {
  background: #eff6ff;
  color: var(--blue);
  outline: none;
}

.app-date-picker-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
}

.app-date-picker-nav {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  color: #475467;
  font-size: 0;
  font-weight: 700;
  line-height: 0;
}

.app-date-picker-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 8px;
  color: #252a33;
  font-size: 18px;
  font-weight: 760;
}

.app-date-picker-title-caret {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.app-date-picker-title-caret {
  color: #64748b;
  transform: rotate(45deg) translateY(-2px);
}

.app-date-picker-nav svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateZ(0);
  pointer-events: none;
}

.app-date-picker-weekdays,
.app-date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.app-date-picker-weekdays span {
  display: grid;
  place-items: center;
  height: 24px;
  color: #8b95a5;
  font-size: 14px;
  font-weight: 700;
}

.app-date-picker-grid {
  gap: 6px 8px;
}

.app-date-picker-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 999px;
  color: #252a33;
  font-size: 18px;
  font-weight: 650;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.app-date-picker-day span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.app-date-picker-day.is-muted {
  color: #c3c9d3;
}

.app-date-picker-day.is-today:not(.is-selected) {
  color: #1d6df2;
}

.app-date-picker-day.is-today:not(.is-selected)::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: -7px;
  border-radius: 999px;
  background: currentColor;
}

.app-date-picker-day:hover:not(:disabled),
.app-date-picker-day:focus-visible:not(:disabled) {
  background: #1f6ff2;
  color: #fff;
  box-shadow: 0 10px 20px rgba(31,111,242,0.24);
  outline: none;
}

.app-date-picker-day.is-selected {
  background: #1f6ff2;
  color: #fff;
  font-weight: 760;
  box-shadow: 0 10px 20px rgba(31,111,242,0.24);
}

.app-date-picker-day.is-selected:hover:not(:disabled),
.app-date-picker-day.is-selected:focus-visible:not(:disabled) {
  background: #1f6ff2;
  color: #fff;
  box-shadow: 0 10px 20px rgba(31,111,242,0.24);
}

.app-date-picker-day:disabled {
  color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.58;
}

.app-date-picker-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 8px 0 4px;
}

.app-date-picker-month {
  min-height: 50px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 650;
}

.app-date-picker-month:hover,
.app-date-picker-month:focus-visible {
  background: #edf5ff;
  color: #1d6df2;
  outline: none;
}

.app-date-picker-month.is-current:not(.is-selected) {
  color: #1d6df2;
}

.app-date-picker-month.is-selected {
  background: #1f6ff2;
  color: #fff;
  box-shadow: 0 10px 20px rgba(31,111,242,0.24);
}

.app-date-picker-card menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}

.app-date-picker-modal::backdrop {
  background: rgba(15,23,42,0.18);
  backdrop-filter: blur(2px);
}

@media (max-width: 520px) {
  .app-date-picker-card {
    gap: 18px;
    padding: 18px;
  }

  .app-date-picker-tabs button {
    font-size: 14px;
  }

  .app-date-picker-head {
    gap: 9px;
  }

  .app-date-picker-day {
    font-size: 16px;
  }
}

.lead-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 30px 90px rgba(15,23,42,0.28);
  transform-origin: 50% 42%;
}

.lead-dialog > form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#leadDetailDialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#leadDetailDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#leadDetailDialog.requires-assessment {
  width: min(760px, calc(100vw - 28px));
}

#leadAddressEditDialog.is-address-search-active {
  min-height: min(560px, calc(100dvh - 28px));
}

#leadAddressEditDialog .lead-address-edit-field.app-address-search {
  align-content: start;
}

#leadAddressEditDialog .lead-address-edit-field .app-address-dropdown {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 7px;
  max-height: min(460px, calc(100dvh - 270px));
}

#leadAddressEditDialog.is-address-search-active .lead-address-edit-field .app-address-dropdown:not([hidden]) {
  min-height: 300px;
}

#quoteAssessmentDialog {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#quoteAssessmentDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#customerDialog {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#customerDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#jobDetailDialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#jobDetailDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#jobDetailSub {
  display: grid;
  gap: 4px;
}

#jobDetailSub small {
  display: block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

#jobWorkflowDialog {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

#jobWorkflowDialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (pointer: coarse) {
  .lead-dialog > form,
  #customerDialog form,
  #leadDetailDialog form,
  #quoteAssessmentDialog form,
  .create-dialog form,
  #jobDetailDialog form,
  #jobWorkflowDialog form {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: rgba(37,99,235,0.76) rgba(226,232,240,0.9);
  }

  .lead-dialog > form::-webkit-scrollbar,
  #customerDialog form::-webkit-scrollbar,
  #leadDetailDialog form::-webkit-scrollbar,
  #quoteAssessmentDialog form::-webkit-scrollbar,
  .create-dialog form::-webkit-scrollbar,
  #jobDetailDialog form::-webkit-scrollbar,
  #jobWorkflowDialog form::-webkit-scrollbar {
    width: 12px;
  }

  .lead-dialog > form::-webkit-scrollbar-track,
  #customerDialog form::-webkit-scrollbar-track,
  #leadDetailDialog form::-webkit-scrollbar-track,
  #quoteAssessmentDialog form::-webkit-scrollbar-track,
  .create-dialog form::-webkit-scrollbar-track,
  #jobDetailDialog form::-webkit-scrollbar-track,
  #jobWorkflowDialog form::-webkit-scrollbar-track {
    background: rgba(226,232,240,0.9);
    border-radius: 999px;
  }

  .lead-dialog > form::-webkit-scrollbar-thumb,
  #customerDialog form::-webkit-scrollbar-thumb,
  #leadDetailDialog form::-webkit-scrollbar-thumb,
  #quoteAssessmentDialog form::-webkit-scrollbar-thumb,
  .create-dialog form::-webkit-scrollbar-thumb,
  #jobDetailDialog form::-webkit-scrollbar-thumb,
  #jobWorkflowDialog form::-webkit-scrollbar-thumb {
    min-height: 64px;
    border: 3px solid rgba(226,232,240,0.9);
    border-radius: 999px;
    background: rgba(37,99,235,0.76);
  }
}

.payment-dialog {
  width: min(720px, calc(100vw - 28px));
}

.payment-dialog form {
  position: relative;
}

.payment-error-popover {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  justify-self: center;
  width: min(520px, 100%);
  margin: -2px auto 12px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff7f7;
  color: #b91c1c;
  box-shadow: 0 18px 42px rgba(185,28,28,0.14);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.payment-error-popover[hidden] {
  display: none;
}

.payment-error-popover.show {
  opacity: 1;
  transform: translateY(0);
}

.payment-error-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.payment-error-popover strong,
.payment-error-popover span:not(.payment-error-icon) {
  display: block;
}

.payment-error-popover strong {
  color: #991b1b;
  font-size: 13px;
  line-height: 1.2;
}

.payment-error-popover span:not(.payment-error-icon) {
  margin-top: 2px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.create-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

.create-dialog form {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dealership-info-dialog {
  width: min(760px, calc(100vw - 40px));
  border-radius: 14px;
}

.dealership-info-dialog form {
  gap: 14px;
  padding: 22px 24px 22px;
}

.dealership-info-dialog .dialog-head {
  align-items: flex-start;
  gap: 18px;
}

.dealership-info-dialog .dialog-head h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
}

.dealership-info-dialog .dialog-sub {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 750;
}

.service-address-required-dialog {
  width: min(440px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
}

.upgrade-plan-dialog {
  width: min(720px, calc(100vw - 28px));
}

.upgrade-plan-dialog form {
  gap: 22px;
  padding: 28px clamp(18px, 4vw, 38px) 32px;
}

.upgrade-plan-close-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -12px;
}

.upgrade-plan-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.upgrade-plan-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}

.upgrade-plan-head p {
  margin: 0;
  color: #64748b;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.upgrade-plan-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(420px, 100%);
  margin: 14px auto 0;
}

.upgrade-plan-option {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #4b5563;
  font-size: 22px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
}

.upgrade-plan-option span {
  color: #2563eb;
  font-size: 16px;
  font-weight: 750;
}

.upgrade-plan-option.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 14px 28px rgba(15,23,42,0.22);
}

.upgrade-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.upgrade-plan-price strong {
  color: #111827;
  font-size: clamp(54px, 8vw, 76px);
  line-height: 0.95;
}

.upgrade-plan-price span {
  color: #64748b;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 650;
}

.upgrade-plan-features {
  display: grid;
  gap: 16px;
  width: min(610px, 100%);
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
}

.upgrade-plan-features li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  color: #4b5563;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 650;
  line-height: 1.35;
}

.upgrade-plan-features li span {
  color: #2563eb;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.upgrade-plan-checkout-btn {
  width: min(620px, 100%);
  min-height: 58px;
  justify-self: center;
  border-radius: 8px;
  background: #0f172a;
  font-size: clamp(19px, 2.5vw, 26px);
}

.upgrade-plan-note {
  margin: -4px 0 0;
  color: #64748b;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.lead-dialog[open] {
  animation: dialog-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.revenue-breakdown-dialog {
  width: min(880px, calc(100vw - 28px));
}

@media (min-width: 1181px) {
  .revenue-breakdown-dialog {
    width: min(1040px, calc(100vw - 56px));
  }
}

.revenue-breakdown-dialog[open] {
  animation: dialog-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.revenue-breakdown-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: -2px;
}

.revenue-breakdown-controls label {
  display: grid;
  gap: 6px;
}

.revenue-breakdown-controls label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.revenue-breakdown-controls select {
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.revenue-breakdown-pro-hint {
  margin: -2px 0 2px;
  padding: 10px 12px;
  border: 1px dashed rgba(37,99,235,0.32);
  border-radius: 10px;
  background: #f8fbff;
  color: #53637b;
  font-size: 12px;
  font-weight: 750;
}

.revenue-breakdown-hero {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 22px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

@media (min-width: 1181px) {
  .revenue-breakdown-hero {
    min-height: 360px;
    padding: 32px;
  }
}

.revenue-breakdown-kicker {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.revenue-breakdown-hero strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.08;
}

.revenue-breakdown-hero small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.revenue-breakdown-donut-wrap {
  width: 210px;
  height: 210px;
  position: relative;
  display: grid;
  justify-self: center;
  place-items: center;
}

.revenue-breakdown-donut {
  --metric-donut-gradient: conic-gradient(#bfdbfe 0 100%);
  width: 174px;
  height: 174px;
  border-radius: 999px;
  background: var(--metric-donut-gradient);
  position: relative;
  transition: transform 0.22s ease;
}

.revenue-breakdown-donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 1;
}

.revenue-donut-track {
  fill: none;
  stroke: #dbeafe;
  stroke-width: 15;
}

.revenue-donut-segment {
  fill: none;
  stroke-linecap: butt;
  stroke-width: 15;
  cursor: pointer;
  transition: opacity 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
}

.revenue-donut-segment:hover,
.revenue-donut-segment:focus-visible,
.revenue-donut-segment.is-active {
  opacity: 1;
  stroke-width: 17;
  outline: none;
}

.revenue-breakdown-donut-svg:hover .revenue-donut-segment:not(:hover):not(.is-active),
.revenue-breakdown-donut-svg:focus-within .revenue-donut-segment:not(.is-active) {
  opacity: 0.5;
}

.revenue-breakdown-dialog[open] .revenue-breakdown-donut {
  transform: scale(1);
}

.revenue-breakdown-donut::before {
  content: "";
  position: absolute;
  inset: 29px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbeafe;
}

.revenue-breakdown-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  z-index: 2;
  pointer-events: none;
}

.revenue-breakdown-donut-center strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.revenue-breakdown-donut-center small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (min-width: 1181px) {
  .revenue-breakdown-donut-wrap {
    width: 330px;
    height: 330px;
  }

  .revenue-breakdown-donut {
    width: 280px;
    height: 280px;
  }

  .revenue-donut-track,
  .revenue-donut-segment {
    stroke-width: 18;
  }

  .revenue-donut-segment:hover,
  .revenue-donut-segment:focus-visible,
  .revenue-donut-segment.is-active {
    stroke-width: 20;
  }

  .revenue-breakdown-donut::before {
    inset: 46px;
  }

  .revenue-breakdown-donut-center strong {
    font-size: 34px;
  }

  .revenue-breakdown-donut-center small {
    margin-top: 9px;
    font-size: 13px;
  }
}

.revenue-breakdown-section {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.revenue-breakdown-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.revenue-breakdown-stat {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.revenue-breakdown-stat span {
  color: #596980;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.revenue-breakdown-stat strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.revenue-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.revenue-breakdown-legend:empty {
  display: none;
}

.revenue-breakdown-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.revenue-breakdown-legend-chip small {
  color: #53637b;
  font-size: 11px;
  font-weight: 800;
}

.revenue-breakdown-legend-chip:hover,
.revenue-breakdown-legend-chip:focus-visible,
.revenue-breakdown-legend-chip.is-active {
  border-color: rgba(37,99,235,0.42);
  background: #eff6ff;
  outline: none;
}

.revenue-breakdown-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.revenue-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.revenue-breakdown-list {
  display: grid;
  gap: 8px;
}

.revenue-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.revenue-breakdown-row[data-revenue-slice] {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.revenue-breakdown-row[data-revenue-slice]:hover {
  border-color: rgba(37,99,235,0.36);
  background: #f8fbff;
}

.revenue-breakdown-row.is-active {
  border-color: rgba(37,99,235,0.52);
  background: #eff6ff;
}

.revenue-breakdown-row-main {
  display: grid;
  gap: 5px;
}

.revenue-breakdown-row-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.revenue-breakdown-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
}

.revenue-breakdown-row-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.revenue-breakdown-row-amount {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.revenue-breakdown-list.compact .revenue-breakdown-row {
  padding: 9px 11px;
}

.revenue-breakdown-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.lead-dialog::backdrop {
  background: rgba(10,15,30,0.56);
}

.lead-dialog[open]::backdrop {
  animation: dialog-backdrop 0.18s ease;
}

@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dialog-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-dialog[open],
  .lead-dialog[open]::backdrop {
    animation: none;
  }

  .metric-card-action,
  .revenue-breakdown-donut {
    transition: none;
  }
}

.lead-dialog form {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 18px;
}

#leadDialog input,
#leadDialog textarea,
#leadDialog select {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 650;
}

#leadDialog select {
  font-weight: 700;
}

#leadDialog select option {
  font-weight: 650;
}

#leadDialog input::placeholder,
#leadDialog textarea::placeholder {
  color: #98a4b8;
  font-weight: 600;
}

#dealershipAccountDialog input,
#dealershipAccountDialog textarea,
#dealershipAccountDialog select {
  min-height: 46px;
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
}

#dealershipAccountDialog input::placeholder,
#dealershipAccountDialog textarea::placeholder {
  color: #98a4b8;
  font-weight: 600;
}

#dealershipAccountDialog .dealership-access-row input {
  min-height: 42px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}

.dialog-head > div {
  min-width: 0;
}

.dialog-head h2 {
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.1;
}

.dialog-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.dialog-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.job-begin-mode-dialog {
  width: min(760px, calc(100vw - 28px));
}

.job-begin-mode-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.job-begin-mode-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

button.job-begin-mode-option {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

button.job-begin-mode-option:hover,
button.job-begin-mode-option:focus-visible {
  transform: translateY(-1px);
  border-color: #bfdbfe;
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(37,99,235,0.1);
  outline: none;
}

.job-begin-mode-option .icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--blue);
}

.job-begin-mode-option .icon svg {
  width: 20px;
  height: 20px;
}

.job-begin-mode-option strong,
.job-begin-mode-option small {
  display: block;
  min-width: 0;
}

.job-begin-mode-option strong {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.job-begin-mode-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.job-begin-manual-option {
  align-items: start;
  grid-template-columns: 38px minmax(0, 1fr);
}

.job-begin-manual-option > .icon,
.job-begin-manual-option > span {
  align-self: center;
}

.job-begin-manual-option label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.job-begin-manual-controls {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.job-begin-manual-option select,
.job-begin-manual-option input[type="time"] {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.job-begin-manual-option .primary-btn {
  grid-column: 2 / -1;
  justify-self: end;
  min-width: 194px;
  min-height: 38px;
  align-self: end;
}

@media (max-width: 640px) {
  .job-begin-mode-option,
  .job-begin-manual-option {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .job-begin-manual-controls,
  .job-begin-manual-option .primary-btn {
    grid-column: 1 / -1;
  }

  .job-begin-manual-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-begin-manual-option .primary-btn {
    grid-row: auto;
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .job-begin-manual-controls {
    grid-template-columns: 1fr;
  }
}

.dialog-title-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #eff6ff;
  color: var(--blue);
}

.dialog-title-icon svg {
  width: 21px;
  height: 21px;
}

.schedule-conflict-dialog {
  width: min(560px, calc(100vw - 28px));
}

.schedule-conflict-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schedule-conflict-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.schedule-conflict-summary span,
.schedule-conflict-list-wrap h3 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.schedule-conflict-summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.24;
}

.schedule-conflict-list-wrap {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.schedule-conflict-list-wrap h3 {
  margin: 0;
}

.schedule-conflict-list {
  display: grid;
  gap: 8px;
}

.schedule-conflict-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 10px;
  background: #fffbeb;
}

.schedule-conflict-item .icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: #b45309;
}

.schedule-conflict-item .icon svg {
  width: 18px;
  height: 18px;
}

.schedule-conflict-item strong,
.schedule-conflict-item span {
  display: block;
}

.schedule-conflict-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.22;
}

.schedule-conflict-item span {
  margin-top: 3px;
  color: #8a5b12;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.lead-filter-dialog {
  width: min(680px, calc(100vw - 28px));
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(37,99,235,0.13), transparent 34%),
    #fff;
}

.lead-filter-dialog form {
  gap: 16px;
  padding: 22px;
}

.lead-filter-panel {
  display: grid;
  gap: 12px;
}

.lead-filter-block {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(248,250,252,0.78);
}

.lead-filter-block-head {
  display: grid;
  gap: 3px;
}

.lead-filter-block-head strong {
  font-size: 15px;
  font-weight: 950;
}

.lead-filter-block-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.completed-message-dialog {
  width: min(780px, calc(100vw - 28px));
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(37,99,235,0.13), transparent 34%),
    #fff;
}

.completed-message-dialog form {
  gap: 16px;
  padding: 22px;
}

.completed-message-settings,
.completed-message-test,
.completed-message-summary,
.completed-message-preview {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(248,250,252,0.82);
}

.completed-message-settings label,
.completed-message-template-head label,
.completed-message-test label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-message-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-form-sms-template-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.completed-message-variable-btn {
  width: auto;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 12px;
  white-space: nowrap;
}

.completed-message-settings textarea,
.completed-message-test input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  outline: none;
}

.completed-message-settings textarea {
  min-height: 124px;
  padding: 12px;
  resize: vertical;
}

.completed-message-test {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.completed-message-test input {
  min-height: 46px;
  padding: 0 12px;
}

.completed-message-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.completed-message-summary div,
.completed-message-preview {
  min-width: 0;
}

.completed-message-summary strong,
.completed-message-preview strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.completed-message-summary span,
.completed-message-preview p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  white-space: pre-wrap;
}

.completed-message-list {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow: auto;
  padding-right: 4px;
}

.completed-message-recipient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.completed-message-recipient.is-selected {
  border-color: rgba(37,99,235,0.46);
  background: #eff6ff;
  box-shadow: 0 12px 28px rgba(37,99,235,0.1);
}

.completed-message-recipient.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.completed-message-recipient input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.completed-message-recipient span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.completed-message-recipient strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.completed-message-recipient small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.completed-message-recipient em {
  justify-self: end;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.completed-message-recipient em.is-ready {
  background: #dcfce7;
  color: #15803d;
}

.completed-message-variable-dialog {
  width: min(660px, calc(100vw - 28px));
  border-radius: 22px;
}

.completed-message-variable-dialog form {
  gap: 16px;
  padding: 22px;
}

.completed-message-variable-list {
  display: grid;
  gap: 10px;
}

.completed-message-variable-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.completed-message-variable-option:hover,
.completed-message-variable-option:focus-visible {
  border-color: rgba(37,99,235,0.42);
  box-shadow: 0 14px 30px rgba(37,99,235,0.1);
  transform: translateY(-1px);
}

.completed-message-variable-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.completed-message-variable-option strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.completed-message-variable-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.completed-message-variable-option em {
  justify-self: end;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.completed-message-variable-example {
  grid-column: 1 / -1;
  padding-top: 2px;
  color: var(--muted);
}

.lead-filter-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.lead-filter-chip-grid button,
.lead-sort-grid button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.lead-filter-chip-grid button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.lead-filter-chip-grid button:hover,
.lead-filter-chip-grid button:focus-visible,
.lead-sort-grid button:hover,
.lead-sort-grid button:focus-visible {
  border-color: rgba(37,99,235,0.34);
  box-shadow: 0 12px 24px rgba(37,99,235,0.1);
  outline: 0;
  transform: translateY(-1px);
}

.lead-filter-chip-grid button.active,
.lead-sort-grid button.active {
  border-color: rgba(37,99,235,0.44);
  background: #eff6ff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.08);
}

.lead-sort-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lead-sort-grid button {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 14px;
  border-radius: 16px;
  text-align: left;
}

.lead-sort-grid button strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.lead-sort-grid button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.32;
}

.lead-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.lead-form-section,
.lead-vehicle-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.lead-form-section-title,
.lead-vehicle-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lead-form-section-title .icon,
.lead-vehicle-title .icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.lead-form-section-title .icon svg,
.lead-vehicle-title .icon svg {
  width: 22px;
  height: 22px;
}

.lead-form-section-title strong,
.lead-form-section-title small,
.lead-vehicle-title strong,
.lead-vehicle-title small {
  display: block;
}

.lead-form-section-title strong,
.lead-vehicle-title strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
  text-transform: none;
}

.lead-form-section-title small,
.lead-vehicle-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.lead-vehicle-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr 1.08fr;
  gap: 10px;
  min-width: 0;
}

.lead-vehicle-grid label {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.lead-vehicle-grid select {
  position: relative;
  z-index: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37,99,235,0.16);
}

.lead-vehicle-preview {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.lead-vehicle-preview[hidden] {
  display: none;
}

.lead-vehicle-preview[data-vehicle-type="suv"] {
  border-color: rgba(217,119,6,0.22);
  background: #fff7ed;
  color: var(--amber);
}

.lead-vehicle-preview[data-vehicle-type="luxury"] {
  border-color: rgba(15,23,42,0.16);
  background: #f8fafc;
  color: var(--ink);
}

.lead-vehicle-preview-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.64);
}

.lead-vehicle-preview-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lead-vehicle-preview strong,
.lead-vehicle-preview small {
  display: block;
  min-width: 0;
}

.lead-vehicle-preview strong {
  color: currentColor;
  font-size: 15px;
  line-height: 1.15;
}

.lead-vehicle-preview small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.32;
}

.lead-quote-setup-section {
  gap: 10px;
}

.lead-quote-setup-fields {
  display: grid;
  gap: 10px;
}

.lead-travel-fee-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.lead-travel-fee-line.is-active {
  border-color: rgba(37,99,235,0.34);
  background: #f8fbff;
}

.lead-travel-fee-line.is-warning {
  border-color: rgba(245,158,11,0.34);
  background: #fffbeb;
}

.lead-travel-fee-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--wash-2);
  color: var(--subtle);
}

.lead-travel-fee-line.is-active .lead-travel-fee-icon {
  background: #eff6ff;
  color: var(--blue);
}

.lead-travel-fee-line.is-warning .lead-travel-fee-icon {
  background: #fef3c7;
  color: #b45309;
}

.lead-travel-fee-icon .icon,
.lead-travel-fee-icon .icon svg {
  width: 20px;
  height: 20px;
}

.lead-travel-fee-copy {
  min-width: 0;
}

.lead-travel-fee-copy strong,
.lead-travel-fee-copy small {
  display: block;
}

.lead-travel-fee-copy strong {
  font-size: 15px;
  line-height: 1.15;
}

.lead-travel-fee-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-travel-fee-value {
  justify-self: end;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.lead-travel-fee-line.is-active .lead-travel-fee-value {
  background: var(--blue);
  color: #fff;
}

.lead-travel-fee-line.is-warning .lead-travel-fee-value {
  background: #f59e0b;
  color: #fff;
}

.quote-travel-fee-line {
  margin-top: 10px;
  margin-bottom: 14px;
}

.quote-travel-fee-line .travel-fee-preview {
  margin-top: 3px;
  white-space: normal;
}

.lead-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lead-source-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lead-address-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lead-add-address-btn {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lead-add-address-btn:hover,
.lead-add-address-btn:focus-visible {
  border-color: rgba(37,99,235,0.36);
  box-shadow: 0 12px 28px rgba(37,99,235,0.1);
  transform: translateY(-1px);
}

.lead-add-address-btn .icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.lead-add-address-btn .icon svg {
  width: 22px;
  height: 22px;
}

.lead-add-address-btn strong,
.lead-add-address-btn small {
  display: block;
}

.lead-add-address-btn strong {
  font-size: 14px;
  line-height: 1.15;
}

.lead-add-address-btn small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.34;
}

.lead-address-edit-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lead-address-input-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.lead-address-input-row input {
  padding-right: 14px;
}

.lead-address-location-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(37,99,235,0.24);
  border-radius: 10px;
  background: #eff6ff;
  color: var(--blue);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.lead-address-location-btn:hover,
.lead-address-location-btn:focus-visible {
  border-color: rgba(37,99,235,0.46);
  background: #dbeafe;
  transform: translateY(-1px);
  outline: none;
}

.lead-address-location-btn.is-loading {
  opacity: 0.68;
  cursor: wait;
}

.lead-address-location-btn .icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.lead-address-location-btn .icon svg,
.lead-address-location-btn .icon svg.target-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.lead-address-edit-status {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.34;
}

.lead-address-edit-last-saved {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}

.app-address-search {
  position: relative;
  min-width: 0;
}

.app-address-dropdown {
  position: absolute;
  z-index: 90;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,0.16);
}

#leadAddressEditDialog .app-address-dropdown {
  max-height: min(460px, calc(100dvh - 270px));
}

.app-address-dropdown[hidden] {
  display: none;
}

.app-address-option {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.app-address-option:hover,
.app-address-option:focus-visible {
  background: #eff6ff;
  color: var(--blue);
  outline: none;
}

.app-address-option strong,
.app-address-option span {
  display: block;
}

.app-address-option strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
}

.app-address-option span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.app-address-loading,
.app-address-empty {
  padding: 10px 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.lead-headlights-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.lead-headlights-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.lead-headlights-title .icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
}

.lead-headlights-title .icon svg {
  width: 20px;
  height: 20px;
}

.lead-headlights-title strong,
.lead-headlights-title small {
  display: block;
}

.lead-headlights-title strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}

.lead-headlights-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.lead-headlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.assessment-service-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 10px;
}

.assessment-service-picker > .field-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.assessment-service-picker > .field-title .icon {
  width: 18px;
  height: 18px;
}

.assessment-service-picker > .field-title .icon svg {
  width: 17px;
  height: 17px;
}

.assessment-service-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.assessment-service-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.assessment-service-option::after {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.75px solid #c5d1e3;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transform: scale(0.98);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.assessment-service-option:hover {
  border-color: rgba(37,99,235,0.34);
  background: #f8fbff;
}

.assessment-service-option:hover::after {
  border-color: #93b4f0;
}

.assessment-service-option.active {
  border-color: var(--blue);
  background: linear-gradient(180deg, #f2f7ff 0%, #e9f2ff 100%);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.assessment-service-option.active::after {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37,99,235,0.3);
  transform: scale(1);
}

.assessment-service-option:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.resealing-options {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(37,99,235,0.38);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
}

.assessment-service-picker + label,
.resealing-options + label {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.resealing-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.headlight-card.is-restoration-off .headlight-slider-row {
  opacity: 0.42;
}

.headlight-card {
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 8px;
  overflow: visible;
}

.headlight-card legend {
  padding: 0 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.headlight-slider-row {
  display: grid;
  gap: 8px;
  overflow: visible;
}

.headlight-slider-row .field-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 6px;
  min-width: 0;
}

.headlight-slider-title-text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.headlight-slider-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.headlight-slider-track {
  --slider-percent: 66.6667%;
  --slider-active: var(--blue);
  --slider-rest: #d8e3f4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: visible;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.headlight-slider-range {
  --slider-thumb-size: 24px;
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding-top: 28px;
  overflow: visible;
}

.headlight-slider-badge {
  position: absolute;
  top: 0;
  left: clamp(
    calc(var(--slider-thumb-size, 24px) / 2),
    var(--slider-thumb-center, var(--slider-percent)),
    calc(100% - (var(--slider-thumb-size, 24px) / 2))
  );
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 8px);
  min-width: 0;
  height: 26px;
  padding-inline: clamp(8px, 1ch, 12px);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
}

.headlight-slider-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--blue);
}

@property --slider-percent {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.headlight-slider-row input[type="range"] {
  --slider-percent: 66.6667%;
  --slider-fill: var(--blue);
  --slider-fill-2: var(--blue);
  --slider-rest: #e2e8f0;
  --slider-height: 8px;
  --slider-thumb-size: 24px;
  --slider-thumb-offset: -8px;
  width: 100%;
  height: var(--slider-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      var(--slider-fill) 0%,
      var(--slider-fill-2) var(--slider-percent),
      var(--slider-rest) var(--slider-percent),
      var(--slider-rest) 100%
    );
  background-clip: padding-box;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: visible;
  touch-action: pan-y;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.headlight-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-height);
  border-radius: 999px;
  border: 0;
  background: transparent;
}

.headlight-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: var(--slider-thumb-offset);
  border-radius: 999px;
  border: 2px solid var(--blue-dark);
  background: #fff;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.headlight-slider-row input[type="range"]::-moz-range-track {
  height: var(--slider-height);
  border-radius: 999px;
  border: 0;
  background: transparent;
}

.headlight-slider-row input[type="range"]::-moz-range-progress {
  height: var(--slider-height);
  border-radius: 999px;
  background: transparent;
}

.headlight-slider-row input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 999px;
  border: 2px solid var(--blue-dark);
  background: #fff;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.headlight-slider-row input[type="range"]:hover {
  filter: saturate(1.05) brightness(1.03);
  box-shadow: none;
}

.headlight-slider-row input[type="range"]:active::-webkit-slider-thumb,
.headlight-slider-row input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.08);
  box-shadow: none;
}

.headlight-slider-row input[type="range"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 0 3px rgba(255,255,255,0.2);
}

.headlight-slider-row input[type="range"]:focus-visible::-webkit-slider-thumb,
.headlight-slider-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: none;
}

.headlight-slider-row output {
  display: inline-grid;
  justify-items: center;
  margin-left: auto;
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #4f83d9;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

@media (prefers-reduced-motion: reduce) {
  .headlight-slider-row input[type="range"],
  .headlight-slider-row input[type="range"]::-webkit-slider-thumb,
  .headlight-slider-row input[type="range"]::-moz-range-thumb {
    transition: none;
  }
}

.headlight-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.headlight-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.headlight-toggle .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.headlight-toggle .icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.headlight-toggle [data-icon="innerMoisture"] {
  color: var(--blue-dark);
}

.headlight-toggle [data-icon="crack"] {
  color: var(--blue-dark);
}

.headlight-toggle [data-icon="pitting"] {
  color: var(--blue-dark);
}

.headlight-toggle:hover {
  border-color: rgba(37,99,235,0.34);
  background: #f8fbff;
}

.headlight-toggle.active {
  border-color: var(--blue);
  background: #eff6ff;
  color: var(--blue-dark);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.headlight-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.headlight-card.is-muted {
  opacity: 0.55;
}

.headlight-card.is-disabled-by-coverage {
  opacity: 0.46;
  pointer-events: none;
  user-select: none;
}

.headlight-card.is-disabled-by-coverage legend {
  color: #64748b;
}

.headlight-card.is-disabled-by-coverage legend::after {
  content: "Not Included";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.headlight-card.is-disabled-by-coverage .headlight-slider-row,
.headlight-card.is-disabled-by-coverage .headlight-toggle-grid {
  opacity: 0.5;
}

.lead-quote-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.lead-quote-toggle:hover {
  border-color: rgba(37,99,235,0.34);
  background: #f8fbff;
}

.lead-quote-toggle.active {
  border-color: rgba(37,99,235,0.5);
  background: #eff6ff;
  box-shadow: 0 12px 28px rgba(37,99,235,0.12);
}

.lead-quote-check {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--wash-2);
  color: var(--subtle);
}

.lead-quote-toggle.active .lead-quote-check {
  background: var(--blue);
  color: #fff;
}

.lead-quote-check .icon,
.lead-quote-check .icon svg {
  width: 20px;
  height: 20px;
}

.lead-quote-copy {
  min-width: 0;
}

.lead-quote-copy strong,
.lead-quote-copy small {
  display: block;
}

.lead-quote-copy strong {
  font-size: 15px;
  line-height: 1.15;
}

.lead-quote-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.32;
}

.lead-quote-price {
  justify-self: end;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.lead-quote-toggle.active .lead-quote-price {
  background: var(--blue);
  color: #fff;
}

.lead-quote-text-toggle:disabled {
  cursor: not-allowed;
}

.lead-quote-text-toggle:disabled .lead-quote-check,
.lead-quote-text-toggle:disabled .lead-quote-copy,
.lead-quote-text-toggle:disabled .lead-quote-price {
  opacity: 0.62;
}

.lead-detail-quote-launch.is-complete {
  border-color: rgba(37,99,235,0.34);
  background:
    radial-gradient(circle at 12% 20%, rgba(37,99,235,0.14), transparent 32%),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(37,99,235,0.11);
}

.lead-detail-quote-launch.is-complete:hover,
.lead-detail-quote-launch.is-complete:focus-visible {
  border-color: rgba(37,99,235,0.55);
  background:
    radial-gradient(circle at 12% 20%, rgba(37,99,235,0.18), transparent 34%),
    linear-gradient(135deg, #f5f9ff 0%, #eaf3ff 100%);
  box-shadow: 0 16px 36px rgba(37,99,235,0.16);
}

.lead-detail-quote-launch.is-complete .lead-quote-check,
.lead-detail-job-launch.is-scheduled .lead-quote-check {
  position: relative;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(37,99,235,0.22);
}

.lead-detail-quote-launch.is-complete::after,
.lead-detail-job-launch.is-scheduled::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 5px 12px rgba(34,197,94,0.24);
}

.lead-detail-quote-launch.is-complete::before,
.lead-detail-job-launch.is-scheduled::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 3;
  width: 12px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.lead-detail-quote-launch.is-complete .lead-quote-copy small {
  color: var(--muted);
}

.lead-detail-quote-launch.is-complete .lead-quote-price {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,0.18);
}

.lead-detail-quote-launch {
  position: relative;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  height: auto;
  align-content: start;
  align-items: center;
  padding: 14px 14px 14px 14px;
}

.lead-detail-quote-launch .lead-quote-check {
  width: 46px;
  height: 46px;
}

.lead-detail-quote-launch .lead-quote-copy strong {
  font-size: 16px;
}

.lead-detail-quote-launch .lead-quote-price {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.lead-detail-quote-launch .lead-quote-copy {
  padding-right: 84px;
}

.lead-detail-quote-launch.is-next-action {
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
}

.lead-detail-quote-launch.is-next-action .lead-quote-check {
  background: #eff6ff;
  color: var(--blue);
}

.lead-detail-quote-launch.is-next-action:hover,
.lead-detail-quote-launch.is-next-action:focus-visible {
  border-color: rgba(37,99,235,0.36);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,0.1);
  transform: translateY(-1px);
  outline: 0;
}

.lead-detail-job-launch {
  margin-top: 12px;
}

.lead-detail-communication-launch {
  align-content: center;
}

.lead-detail-communication-launch .lead-quote-check,
.lead-detail-communication-launch .lead-quote-copy {
  align-self: center;
}

.lead-detail-job-launch.is-scheduled {
  border-color: rgba(37,99,235,0.34);
  background:
    radial-gradient(circle at 12% 20%, rgba(37,99,235,0.12), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}

.lead-detail-job-launch.is-scheduled .lead-quote-price {
  background: var(--blue);
  color: #fff;
}

.lead-detail-quote-launch.is-disabled,
.lead-detail-job-launch.is-disabled,
.lead-quote-toggle:disabled {
  border-color: #dbe4ef;
  background: #eef2f7;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

.lead-detail-quote-launch.is-disabled:hover,
.lead-detail-job-launch.is-disabled:hover,
.lead-quote-toggle:disabled:hover,
.lead-detail-quote-launch.is-disabled:focus-visible,
.lead-detail-job-launch.is-disabled:focus-visible,
.lead-quote-toggle:disabled:focus-visible {
  border-color: #dbe4ef;
  background: #eef2f7;
  color: #64748b;
  box-shadow: none;
  transform: none;
  outline: none;
}

.lead-detail-quote-launch.is-disabled::before,
.lead-detail-quote-launch.is-disabled::after,
.lead-detail-job-launch.is-disabled::before,
.lead-detail-job-launch.is-disabled::after {
  content: none;
}

.lead-detail-quote-launch.is-disabled .lead-quote-check,
.lead-detail-job-launch.is-disabled .lead-quote-check,
.lead-quote-toggle:disabled .lead-quote-check {
  background: #d6deea;
  color: #6b7a90;
  box-shadow: none;
}

.lead-detail-quote-launch.is-disabled .lead-quote-copy strong,
.lead-detail-job-launch.is-disabled .lead-quote-copy strong,
.lead-quote-toggle:disabled .lead-quote-copy strong {
  color: #64748b;
}

.lead-detail-quote-launch.is-disabled .lead-quote-copy small,
.lead-detail-job-launch.is-disabled .lead-quote-copy small,
.lead-quote-toggle:disabled .lead-quote-copy small {
  color: #7a8aa2;
}

.lead-detail-quote-launch.is-disabled .lead-quote-price,
.lead-detail-job-launch.is-disabled .lead-quote-price,
.lead-quote-toggle:disabled .lead-quote-price {
  background: #dbe3ee;
  color: #5f7088;
  box-shadow: none;
}

.quote-save-schedule-btn.is-disabled {
  border-color: #dbe4ef;
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
  cursor: help;
}

.quote-save-schedule-btn.is-disabled:hover,
.quote-save-schedule-btn.is-disabled:focus-visible {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #475569;
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

.quote-assessment-dialog {
  width: min(1120px, calc(100vw - 28px));
}

.quote-assessment-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.quote-assessment-panel {
  margin: 0;
}

.quote-assessment-side {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.quote-schedule-toggle {
  min-height: 104px;
}

.lead-schedule-toggle {
  min-height: 96px;
}

.quote-delivery-panel {
  display: grid;
  gap: 9px;
}

.quote-delivery-panel[hidden] {
  display: none;
}

.quote-delivery-toggle {
  min-height: 82px;
}

.quote-delivery-toggle.active {
  border-color: rgba(37,99,235,0.48);
  background: #eff6ff;
}

.quote-delivery-toggle.active .lead-quote-check {
  background: var(--blue);
  color: #fff;
}

.quote-delivery-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.quote-delivery-status.is-error {
  color: #b91c1c;
}

.quote-delivery-status.is-success {
  color: #1d4ed8;
}

.quote-sms-template-settings {
  display: grid;
  gap: 12px;
}

.quote-sms-template-settings textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.35;
}

.quote-sms-template-settings textarea:focus {
  outline: 3px solid rgba(37, 99, 235, 0.16);
  border-color: #8fb4ff;
}

.quote-sms-template-settings .lead-form-sms-preview {
  margin: 0;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.quote-sms-template-settings .lead-form-sms-preview strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}

.quote-vin-scanner {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.quote-vin-scanner-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.quote-vin-scanner-head .icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--blue);
}

.quote-vin-scanner-head .icon svg {
  width: 18px;
  height: 18px;
}

.quote-vin-scanner-head strong,
.quote-vin-scanner-head small {
  display: block;
}

.quote-vin-scanner-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.quote-vin-scanner-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
}

.quote-vin-actions {
  display: grid;
  gap: 8px;
}

.quote-vin-scan-btn {
  width: 100%;
}

.quote-vin-actions small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.quote-vin-actions small.is-error {
  color: #b91c1c;
}

.quote-vin-actions small.is-success {
  color: #1d4ed8;
}

.quote-schedule-toggle.is-scheduled {
  border-color: rgba(37,99,235,0.28);
  background:
    linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.quote-schedule-toggle.is-scheduled .lead-quote-check {
  background: #2563eb;
  color: #fff;
}

.quote-schedule-toggle.is-scheduled .lead-quote-copy strong::after {
  content: "Scheduled";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

.lead-schedule-toggle.is-scheduled .lead-quote-copy strong::after {
  content: none;
}

.quote-schedule-fields {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.business-hours-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px dashed rgba(37,99,235,0.26);
  border-radius: 9px;
  background: #eff6ff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.business-hours-note .icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
}

.schedule-hours-feedback {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  background: #eff6ff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.quote-schedule-required-address {
  margin: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.3;
}

.quote-schedule-required-address .icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #dc2626;
}

.quote-schedule-required-address .icon svg {
  width: 16px;
  height: 16px;
}

.lead-scheduler .schedule-hours-feedback {
  grid-column: 1 / -1;
}

.lead-scheduler .business-hours-note {
  grid-column: 1 / -1;
}

.schedule-hours-feedback[data-tone="success"] {
  border-color: rgba(37,99,235,0.24);
  background: #eff6ff;
  color: #2563eb;
}

.schedule-hours-feedback[data-tone="error"] {
  border-color: rgba(239,68,68,0.24);
  background: #fef2f2;
  color: #b91c1c;
}

.schedule-hours-feedback[data-tone="warning"] {
  border-color: rgba(245,158,11,0.34);
  background: #fffbeb;
  color: #b45309;
}

.schedule-input-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}

.workflow-summary {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.workflow-summary strong,
.workflow-summary span,
.workflow-summary small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.workflow-summary span {
  color: var(--muted);
  font-size: 13px;
}

.workflow-summary small {
  margin-top: 4px;
  color: var(--blue);
  font-weight: 800;
}

.create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dealership-action-dialog .create-grid {
  grid-template-columns: 1fr;
}

.create-option {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.22rem 0.85rem;
  align-items: center;
  align-content: center;
  min-height: 104px;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.create-option:disabled {
  cursor: wait;
}

.create-option.is-disabled:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  background: #f8fafc;
}

.create-option.is-disabled:disabled:hover,
.create-option.is-disabled:disabled:focus-visible {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

.create-option:hover,
.create-option:focus-visible {
  border-color: rgba(37,99,235,0.36);
  box-shadow: 0 12px 28px rgba(15,23,42,0.1);
  transform: translateY(-1px);
}

.create-option.is-sent {
  border-color: #86efac;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), #fff);
}

.create-option.is-sent .icon {
  background: #dcfce7;
  color: #16a34a;
}

.create-option.is-sent small {
  color: #166534;
}

.create-option.is-loading,
.create-option.is-modal-click-loading {
  border-color: rgba(37,99,235,0.42);
  background: #f8fbff;
  box-shadow: 0 12px 28px rgba(37,99,235,0.1);
  transform: none;
}

.create-option.is-loading .icon,
.create-option.is-loading strong,
.create-option.is-loading small,
.create-option.is-loading .dealership-portal-text-meta,
.create-option.is-modal-click-loading .icon,
.create-option.is-modal-click-loading strong,
.create-option.is-modal-click-loading small,
.create-option.is-modal-click-loading .dealership-portal-text-meta {
  opacity: 0.34;
}

.create-option.is-loading::after,
.create-option.is-modal-click-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(37,99,235,0.18);
  border-top-color: var(--blue);
  border-right-color: var(--blue);
  border-radius: 999px;
  animation: button-spinner-spin 0.68s linear infinite;
}

.assessment-required-option {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.assessment-required-option:hover,
.assessment-required-option:focus-visible {
  border-color: rgba(37,99,235,0.5);
  box-shadow: 0 16px 34px rgba(37,99,235,0.12);
}

.create-option .icon {
  grid-row: 1 / span 2;
  place-self: center;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 14px;
  background: #eff6ff;
  color: var(--blue);
}

.create-option.requires-assessment-option .icon,
.create-option.requires-address-option .icon {
  background: #eff6ff;
  color: var(--blue);
}

.create-option.requires-assessment-option .icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(245,158,11,0.24);
  background: #fff7ed;
  color: #d97706;
}

.create-option.requires-assessment-option .icon svg {
  width: 27px;
  height: 27px;
}

.create-option.requires-address-option .icon svg {
  width: 30px;
  height: 30px;
}

.create-option strong,
.create-option small {
  display: block;
}

.create-option strong {
  align-self: end;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.1;
}

.create-option small {
  align-self: start;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.34;
}

.dealership-portal-text-meta {
  grid-column: 2;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

.create-option .icon svg {
  display: block;
  width: 25px;
  height: 25px;
}

.customer-action-panel {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.customer-actions-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.customer-inline-cancel-btn,
.customer-inline-save-btn {
  min-height: 46px;
  padding-inline: 22px;
}

.customer-inline-delete-btn {
  min-height: 46px;
  margin-right: auto;
  padding-inline: 18px;
}

.lead-scheduler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

.lead-scheduler[hidden] {
  display: none;
}

.lead-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  max-width: 100%;
  min-width: 0;
  gap: 18px;
  align-items: start;
}

.lead-detail-grid.is-assessment-focus {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
}

.lead-detail-grid.is-assessment-focus #leadDetailInfoSection,
.lead-detail-grid.is-assessment-focus #leadFollowUpSection {
  display: none;
}

#leadDetailAssessmentSection,
#leadFollowUpSection {
  margin: 0;
}

.lead-detail-side-stack {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 18px;
}

.lead-detail-panel {
  display: grid;
  min-width: 0;
  max-width: 100%;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
}

#leadDetailInfoSection {
  align-self: start;
}

#leadFollowUpSection {
  align-self: start;
}

#leadFollowUpSection label:has(#leadFollowUpType) .field-title,
#leadFollowUpSection label:has(#leadFollowUpMessage) .field-title {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #6b7a90;
}

#leadFollowUpType {
  font-size: 13px;
  font-weight: 650;
}

#leadFollowUpMessage {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

#leadFollowUpMessage::placeholder {
  font-size: 12.5px;
  font-weight: 550;
  color: #98a4b8;
}

#leadDetailAssessmentSection {
  align-self: start;
}

.lead-detail-panel.is-guided {
  border-color: rgba(37,99,235,0.18);
  box-shadow: none;
}

.lead-detail-panel.is-next-focus {
  border-color: var(--line);
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.lead-detail-panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lead-detail-panel h3 .icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  color: var(--blue);
}

.lead-detail-panel h3 .icon svg {
  width: 20px;
  height: 20px;
}

.lead-detail-grid .primary-btn {
  width: 100%;
  min-height: 44px;
}

.lead-inline-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.lead-inline-save {
  justify-self: start;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lead-inline-save[data-mode="saving"],
.lead-inline-save[data-mode="editing"] {
  border-color: rgba(37,99,235,0.22);
  background: #eff6ff;
  color: var(--blue);
}

.lead-inline-save[data-mode="saved"] {
  border-color: rgba(22,163,74,0.18);
  background: #f0fdf4;
  color: #15803d;
}

.lead-inline-save[data-mode="error"] {
  border-color: rgba(220,38,38,0.2);
  background: #fef2f2;
  color: #b91c1c;
}

.lead-detail-info-groups {
  display: grid;
  gap: 12px;
}

.lead-detail-info-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lead-detail-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-detail-info-group h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-detail-group-edit {
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid #d6e2f4;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.lead-customer-address-input[readonly],
#quoteAssessmentAddress[readonly] {
  cursor: pointer;
  background: #f8fbff;
}

#leadAddressInput[readonly] {
  cursor: pointer;
  background: #f8fbff;
}

.lead-detail-info-group h4 .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--blue);
}

.lead-detail-info-group h4 .icon svg {
  width: 16px;
  height: 16px;
}

.lead-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
}

.lead-detail-list:has(.app-address-search) {
  overflow: visible;
}

.lead-detail-list div {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.lead-detail-list .lead-detail-row-headlights {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 8px;
}

.lead-detail-list div:has(#leadDetailHeadlights) {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.lead-detail-list .lead-detail-row-headlights dt {
  display: none;
}

.lead-detail-list div:has(#leadDetailHeadlights) dt {
  display: none;
}

.lead-detail-list .lead-detail-row-headlights dd {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 8px;
}

.lead-detail-list div:has(#leadDetailHeadlights) dd {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lead-detail-list div:last-child {
  border-bottom: 0;
}

.lead-detail-list dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-detail-list dt .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--blue);
}

.lead-detail-list dt .icon svg {
  width: 16px;
  height: 16px;
}

.lead-detail-list dd {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.lead-inline-value {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.lead-inline-value:hover,
.lead-inline-value:focus-visible {
  color: var(--blue);
  outline: none;
}

.lead-inline-value.is-headlight-summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lead-headlight-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.lead-headlight-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead-headlight-summary-label .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--blue);
}

.lead-headlight-summary-label .icon svg {
  width: 16px;
  height: 16px;
}

.lead-headlight-summary {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #d9e5f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
}

.lead-headlight-summary-content {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lead-headlight-resealing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lead-headlight-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  max-width: min(100%, max-content);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-headlight-chip--service {
  border-color: rgba(37,99,235,0.28);
  background: #dbeafe;
}

.lead-headlight-sides {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
}

.lead-headlight-side {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 13px 14px 14px;
  border: 1px solid #d8e5f5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.09), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  align-content: start;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.lead-headlight-side::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2563eb 0%, #7dd3fc 100%);
  z-index: 0;
}

.lead-headlight-side[data-headlight-side-summary="right"]::before {
  inset: 0 0 0 auto;
  background: linear-gradient(180deg, #1d4ed8 0%, #a5b4fc 100%);
}

.lead-headlight-side::after {
  content: "L";
  position: absolute;
  right: 16px;
  bottom: -14px;
  z-index: 0;
  color: #2563eb;
  font-size: clamp(64px, 8vw, 92px);
  font-weight: 950;
  line-height: 0.78;
  opacity: 0.055;
  pointer-events: none;
}

.lead-headlight-side > * {
  position: relative;
  z-index: 1;
}

.lead-headlight-side[data-headlight-side-summary="right"]::after {
  content: "R";
}

.lead-headlight-side.is-not-included {
  opacity: 0.7;
  filter: saturate(0.82);
  cursor: not-allowed;
}

.lead-headlight-side-title {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0 8px 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.lead-headlight-side-badge {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: var(--blue);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.lead-headlight-side-title > div > strong,
.lead-headlight-side-title > div > span {
  display: block;
}

.lead-headlight-side-title > div > strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.12;
}

.lead-headlight-side-title > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.lead-headlight-service-row,
.lead-headlight-oxidation-row,
.lead-headlight-extra-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 8px;
  min-width: 0;
  margin-left: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(213, 224, 239, 0.86);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.lead-headlight-service-row .lead-headlight-chip,
.lead-headlight-oxidation-row .lead-headlight-chip {
  justify-self: end;
  max-width: 100%;
}

.lead-headlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.lead-headlight-meta-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow-wrap: normal;
}

.lead-headlight-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #cbd8ea;
  border-radius: 999px;
  background: #f7faff;
  color: #5a6a83;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  max-width: min(100%, max-content);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-headlight-tag .icon {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--blue);
}

.lead-headlight-tag .icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.lead-headlight-tag .icon svg:not(.crack-svg):not(.pitting-svg):not(.inner-moisture-svg):not(.resealing-service-svg) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.lead-headlight-chip.is-muted,
.lead-headlight-tag.is-muted,
.lead-headlight-empty {
  color: var(--muted);
  border-color: #d3dbe9;
  background: #f4f7fb;
}

.lead-inline-edit-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-inline-value.is-headlight-summary .lead-inline-edit-mark {
  align-self: center;
  justify-self: auto;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid #d6e2f4;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.lead-inline-input {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgba(37,99,235,0.32);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}

textarea.lead-inline-input {
  resize: vertical;
  line-height: inherit;
}

.lead-inline-input.has-error {
  border-color: rgba(220,38,38,0.44);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.08);
}

.lead-inline-vehicle-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lead-inline-select {
  min-height: 38px;
  padding: 9px 36px 9px 10px;
  border: 1px solid rgba(37,99,235,0.32);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--blue) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.lead-inline-select:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.lead-inline-select:focus {
  border-color: rgba(37,99,235,0.58);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}

@media (max-width: 860px) {
  .lead-inline-vehicle-editor {
    grid-template-columns: 1fr;
  }

  .lead-inline-value.is-headlight-summary {
    grid-template-columns: 1fr;
  }

  .lead-inline-value.is-headlight-summary .lead-inline-edit-mark {
    justify-self: auto;
  }

  .lead-headlight-sides {
    grid-template-columns: 1fr;
  }

  .lead-headlight-side {
    width: 100%;
    padding: 13px;
  }

  .lead-headlight-service-row,
  .lead-headlight-oxidation-row,
  .lead-headlight-extra-row {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-left: 4px;
    padding: 9px 10px;
  }

  .lead-headlight-meta-label {
    padding-top: 0;
  }
}

.job-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.job-detail-actions[hidden] {
  display: none;
}

.job-progress-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 12px;
  background: #eff6ff;
}

.job-progress-strip[hidden] {
  display: none;
}

.job-progress-strip.is-launching {
  border-color: rgba(37,99,235,0.32);
  background: #eef6ff;
}

.job-progress-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.job-progress-status strong {
  min-width: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

.job-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.job-progress-pill.active {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.job-progress-pill.launching {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.28);
}

.job-progress-pill.launching .button-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.job-progress-pill .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-progress-pill .icon svg {
  width: 16px;
  height: 16px;
}

.job-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.job-progress-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #d4e0f3;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.job-progress-meta-item .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.job-progress-meta-item .icon svg {
  width: 14px;
  height: 14px;
}

.job-progress-meta-item--elapsed {
  background: #dbeafe;
  border-color: rgba(37,99,235,0.26);
  color: #1e40af;
}

.job-progress-meta-item--elapsed strong {
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.job-progress-meta-item--launching {
  background: #fff;
  border-color: rgba(37,99,235,0.28);
  color: #1d4ed8;
}

.job-progress-meta-item--launching .button-spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.job-payment-panel,
.job-notes-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 10px;
  background: #eff6ff;
}

.job-payment-panel[hidden],
.job-notes-panel[hidden] {
  display: none;
}

.job-payment-panel.is-paid {
  border-color: rgba(22,163,74,0.22);
  background: #f0fdf4;
}

.job-payment-panel .icon,
.job-notes-panel .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
}

.job-payment-panel.is-paid .icon {
  color: #15803d;
}

.job-payment-panel .icon svg,
.job-notes-panel .icon svg {
  width: 20px;
  height: 20px;
}

.job-payment-panel strong,
.job-payment-panel small,
.job-notes-panel strong,
.job-notes-panel small {
  display: block;
}

.job-payment-panel strong,
.job-notes-panel strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.job-payment-panel small,
.job-notes-panel small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

.job-notes-panel small {
  white-space: pre-wrap;
}

.job-notes-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.job-notes-source {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.job-notes-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.job-notes-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.job-notes-list dt,
.job-notes-list dd {
  margin: 0;
  min-width: 0;
}

.job-notes-list dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
}

.job-notes-list dd,
.job-notes-freeform {
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.job-notes-freeform {
  margin: 0;
  white-space: pre-wrap;
}

.job-communication-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 10px;
  background: #eff6ff;
}

.job-communication-panel[hidden] {
  display: none;
}

.job-communication-panel.is-text {
  border-color: rgba(22,163,74,0.22);
  background: #f0fdf4;
}

.job-communication-panel .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
}

.job-communication-panel.is-text .icon {
  color: #15803d;
}

.job-communication-panel .icon svg {
  width: 20px;
  height: 20px;
}

.job-communication-panel strong,
.job-communication-panel small {
  display: block;
}

.job-communication-panel strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.job-communication-panel small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

.job-communication-panel .job-communication-subject {
  color: #1e3a8a;
}

.payment-summary-box,
.payment-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.payment-summary-box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-summary-box label:last-of-type,
.payment-summary-box p {
  grid-column: 1 / -1;
}

.payment-summary-box p,
.payment-section p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

.payment-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.payment-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 74px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.payment-option:hover,
.payment-option:focus-visible {
  border-color: rgba(37,99,235,0.38);
  box-shadow: 0 10px 24px rgba(37,99,235,0.1);
  outline: none;
  transform: translateY(-1px);
}

.payment-option .icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  grid-row: 1 / span 2;
  border-radius: 9px;
  background: #eff6ff;
  color: var(--blue);
}

.payment-option .icon svg {
  width: 18px;
  height: 18px;
}

.payment-option strong,
.payment-option small,
.payment-option em {
  display: block;
  min-width: 0;
}

.payment-option strong {
  font-size: 13.5px;
  line-height: 1.15;
}

.payment-option small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.payment-option em {
  grid-column: 2;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.payment-provider-option {
  opacity: 0.78;
}

.payment-option[data-payment-method="check"] .icon {
  background: #e7f8ef;
  color: #15803d;
}

.payment-option[data-payment-method="cash"] .icon {
  background: #ecfdf3;
  color: #0f766e;
}

.payment-option[data-payment-method="venmo"] .icon {
  background: #eef4ff;
  color: #2563eb;
}

.payment-option[data-payment-method="cashapp"] .icon {
  background: #e9fbef;
  color: #16a34a;
}

.payment-option[data-payment-method="zelle"] .icon {
  background: #fff1f2;
  color: #be123c;
}

.payment-option[data-payment-method="card_reader"] .icon {
  background: #eff6ff;
  color: #1d4ed8;
}

.payment-option[data-payment-method="other"] .icon {
  background: #f1f5f9;
  color: #475569;
}

.payment-provider-option.is-configured {
  opacity: 1;
}

.payment-provider-option.is-configured em {
  background: #dbeafe;
  color: #1d4ed8;
}

.payment-provider-option.is-unconfigured em {
  background: #f1f5f9;
  color: var(--muted);
}

.payment-settings-shortcut {
  width: fit-content;
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
}

.payment-provider-option[data-payment-provider="stripe"] .icon {
  background: #f3f2ff;
}

.payment-provider-option[data-payment-provider="stripe"] .icon svg {
  width: 28px;
  height: 28px;
}

.payment-provider-option[data-payment-provider="square"] .icon {
  background: #e8f0fe;
  color: #2c63d8;
}

.payment-provider-option[data-payment-provider="paypal"] .icon {
  background: #e7f3ff;
  color: #065fbd;
}

.payment-provider-option[data-payment-provider="venmo_business"] .icon {
  background: #eef4ff;
  color: #2563eb;
}

.payment-provider-option[data-payment-provider="cashapp_business"] .icon {
  background: #e9fbef;
  color: #16a34a;
}

.proof-container {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,0.09), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.headlight-workflow-container {
  display: grid;
  gap: 14px;
}

.headlight-workflow-list {
  display: grid;
  gap: 12px;
}

.headlight-workflow-side {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.94);
}

.headlight-workflow-side[hidden] {
  display: none;
}

.headlight-workflow-summary {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.headlight-workflow-summary::-webkit-details-marker {
  display: none;
}

.headlight-workflow-summary div,
.headlight-workflow-summary span,
.headlight-workflow-summary strong {
  min-width: 0;
}

.headlight-workflow-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.headlight-workflow-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.12;
}

.headlight-workflow-summary .headlight-workflow-chevron {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 0;
  font-weight: initial;
  line-height: 0;
  text-transform: none;
  transition: background 0.16s ease;
}

.headlight-workflow-chevron-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%);
}

.headlight-workflow-chevron-icon.is-open {
  display: none;
}

.headlight-workflow-side[open] .headlight-workflow-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
}

.headlight-workflow-side[open] .headlight-workflow-chevron-icon.is-closed {
  display: none;
}

.headlight-workflow-side[open] .headlight-workflow-chevron-icon.is-open {
  display: block;
}

.headlight-workflow-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  padding: 0 14px 14px;
}

.headlight-workflow-side[open] .headlight-workflow-summary {
  border-bottom: 1px solid rgba(37,99,235,0.12);
}

.headlight-workflow-proof-grid {
  gap: clamp(20px, 2.4vw, 34px);
  padding-top: clamp(18px, 2.4vw, 28px);
}

.headlight-workflow-procedure {
  min-width: 0;
}

.headlight-workflow-procedure-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 8px;
  background: #f8fbff;
}

.headlight-workflow-procedure-card.is-empty {
  background: #fff;
}

.headlight-workflow-procedure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.headlight-workflow-procedure-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.headlight-workflow-procedure-head strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.14;
}

.dealership-vehicle-jobs-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,0.09), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.dealership-vehicle-jobs-panel[hidden] {
  display: none;
}

.dealership-vehicle-job-list {
  display: grid;
  gap: 14px;
}

.dealership-vehicle-job-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
}

.dealership-vehicle-job-card.is-active {
  border-color: rgba(37,99,235,0.34);
  box-shadow: 0 16px 34px rgba(37,99,235,0.08);
}

.dealership-vehicle-job-card.is-focused {
  border-color: rgba(37,99,235,0.58);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12), 0 18px 42px rgba(37,99,235,0.12);
}

.dealership-vehicle-job-card.is-done {
  border-color: rgba(22,163,74,0.28);
  background: linear-gradient(180deg, #f7fef9 0%, #fff 100%);
}

.dealership-vehicle-job-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.dealership-vehicle-job-head::-webkit-details-marker {
  display: none;
}

.dealership-vehicle-job-body {
  display: grid;
  gap: 14px;
}

.dealership-vehicle-job-card:not([open]) {
  gap: 0;
}

.dealership-vehicle-summary-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.dealership-vehicle-collapse-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.dealership-vehicle-job-card[open] .dealership-vehicle-collapse-icon {
  transform: rotate(225deg);
}

.dealership-vehicle-job-head h3,
.dealership-vehicle-job-head p {
  margin: 0;
}

.dealership-vehicle-job-head h3 {
  font-size: 22px;
  line-height: 1.1;
}

.dealership-vehicle-job-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.dealership-vehicle-job-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dealership-vehicle-status-pill {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.dealership-vehicle-job-card.is-done .dealership-vehicle-status-pill {
  background: #dcfce7;
  color: #166534;
}

.dealership-vehicle-timer {
  margin: 0;
}

.dealership-vehicle-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 9px;
  background: rgba(248,251,255,0.82);
}

.dealership-vehicle-section .proof-container-head {
  margin-bottom: 0;
}

.dealership-vehicle-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.dealership-vehicle-procedure-control {
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
  align-items: start;
}

.dealership-headlight-procedure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.dealership-headlight-procedure-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.9));
  box-shadow: 0 14px 30px rgba(15,23,42,0.04);
}

.dealership-headlight-procedure-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-bottom: 8px;
  border: 0;
  border-bottom: 1px solid rgba(37,99,235,0.12);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workflow-headlight-procedure-head {
  cursor: default;
}

.dealership-headlight-procedure-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dealership-headlight-procedure-head div > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dealership-headlight-procedure-head strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.15;
}

.dealership-headlight-procedure-grit {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

.dealership-headlight-procedure-chevron {
  display: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.dealership-headlight-procedure-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.dealership-headlight-procedure-body {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.dealership-headlight-procedure-steps {
  gap: 7px;
}

.dealership-headlight-procedure-steps .job-procedure-step {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.dealership-headlight-procedure-steps .job-procedure-step > span {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.dealership-headlight-procedure-steps .job-procedure-heading strong {
  font-size: 14px;
}

.dealership-headlight-procedure-steps .job-procedure-detail {
  font-size: 13px;
}

.dealership-vehicle-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.dealership-vehicle-job-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.dealership-vehicle-job-actions small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.dealership-vehicle-done-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #166534;
  font-size: 13px;
  font-weight: 950;
}

.job-procedure-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,0.09), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.job-procedure-panel[hidden] {
  display: none;
}

.job-procedure-list {
  display: grid;
  gap: 9px;
}

.job-procedure-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 10px;
  background: rgba(239,246,255,0.78);
  overflow: hidden;
}

.job-procedure-control label {
  display: grid;
  gap: 7px;
}

.job-procedure-control select {
  width: 100%;
  min-height: 48px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 9px;
  background:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%) calc(100% - 18px) 50% / 8px 8px no-repeat,
    linear-gradient(135deg, var(--blue) 50%, transparent 50%) calc(100% - 13px) 50% / 8px 8px no-repeat,
    #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  appearance: none;
  box-shadow: 0 10px 24px rgba(37,99,235,0.07);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.job-procedure-control select:focus {
  outline: none;
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12), 0 12px 26px rgba(37,99,235,0.08);
}

.job-procedure-control select:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  box-shadow: none;
}

.job-procedure-control.is-saving {
  border-color: rgba(148,163,184,0.38);
  background: #eef3f9;
}

.job-procedure-control.is-saving label,
.job-procedure-control.is-saving p {
  opacity: 0.34;
  filter: grayscale(0.65);
}

.job-procedure-saving-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: inherit;
  background: rgba(241,245,249,0.78);
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: auto;
}

.job-procedure-saving-overlay .button-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.job-procedure-control p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.job-procedure-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.86);
}

.job-procedure-step > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.job-procedure-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.job-procedure-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.job-procedure-heading strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.job-procedure-detail {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.job-procedure-step small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-job-headlight-procedures {
  display: grid;
  gap: 12px;
}

.customer-job-headlight-procedure {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
}

.customer-job-headlight-procedure-head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(37,99,235,0.12);
  cursor: pointer;
}

.customer-job-headlight-procedure-head::-webkit-details-marker {
  display: none;
}

.customer-job-headlight-procedure:not([open]) {
  gap: 0;
}

.customer-job-headlight-procedure:not([open]) .customer-job-headlight-procedure-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.customer-job-headlight-procedure-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-job-headlight-procedure-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.customer-job-headlight-procedure-head strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.customer-job-headlight-procedure-grit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(37,99,235,0.28);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.customer-job-headlight-procedure-grit::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 160ms ease;
}

.customer-job-headlight-procedure[open] .customer-job-headlight-procedure-grit::after {
  transform: translateY(2px) rotate(225deg);
}

.proof-container-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.proof-container-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.headlight-workflow-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.headlight-workflow-title-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.14);
}

.headlight-workflow-title-icon svg {
  width: 21px;
  height: 21px;
}

.proof-container-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.proof-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.proof-panel[hidden] {
  display: none;
}

.proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.proof-head h3 {
  margin: 0;
}

.proof-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.proof-upload {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.proof-upload.locked {
  cursor: not-allowed;
}

.proof-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.proof-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(37,99,235,0.38);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  overflow: hidden;
  text-align: center;
  font-weight: 800;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.proof-upload:not(.locked):hover .proof-preview,
.proof-upload:not(.locked):focus-within .proof-preview {
  border-color: var(--blue);
  background: #eff6ff;
  box-shadow: 0 12px 26px rgba(37,99,235,0.12);
}

.proof-upload.locked .proof-preview {
  border-color: rgba(148,163,184,0.6);
  background: #f1f5f9;
  color: #64748b;
  box-shadow: none;
}

.proof-preview.is-uploading {
  opacity: 1;
  pointer-events: none;
}

.proof-preview.is-uploading::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  border-radius: 999px;
  border: 3px solid rgba(37,99,235,0.2);
  border-top-color: var(--blue);
  border-right-color: var(--blue);
  box-shadow: 0 0 0 8px rgba(255,255,255,0.46);
  animation: proof-upload-spin 0.72s linear infinite;
}

.proof-preview.is-uploading .proof-plus,
.proof-preview.is-uploading strong,
.proof-preview.is-uploading small {
  opacity: 0;
}

.proof-preview.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.08), rgba(15,23,42,0.42));
}

.proof-preview.has-photo.is-clean-photo::after {
  display: none;
}

.proof-preview[data-proof-photo-viewer] {
  cursor: zoom-in;
}

.proof-preview strong,
.proof-preview small {
  position: relative;
  z-index: 1;
  display: block;
}

.proof-preview strong {
  color: var(--ink);
  font-size: 16px;
}

.proof-preview small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.proof-preview.has-photo small {
  color: #fff;
  text-shadow: 0 1px 2px rgba(15,23,42,0.45);
}

.proof-preview.has-photo .proof-plus {
  width: 42px;
  height: 42px;
  font-size: 28px;
  background: rgba(37,99,235,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.proof-plus {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(37,99,235,0.24);
}

.proof-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

.proof-photo-viewer-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 13, 24, 0.94);
  color: #fff;
}

.proof-photo-viewer-dialog::backdrop {
  background: rgba(8, 13, 24, 0.72);
}

.proof-photo-viewer-frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 72px 18px 22px;
}

.proof-photo-viewer-frame img {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.proof-photo-viewer-frame figcaption {
  justify-self: center;
  max-width: min(720px, calc(100vw - 36px));
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.proof-photo-viewer-close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.proof-photo-viewer-close:hover,
.proof-photo-viewer-close:focus-visible {
  background: rgba(255,255,255,0.2);
  outline: none;
}

@keyframes proof-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.workflow-lock-hint {
  position: fixed;
  z-index: 82;
  display: grid;
  gap: 3px;
  max-width: min(320px, calc(100vw - 20px));
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  box-shadow: 0 16px 36px rgba(15,23,42,0.34);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.workflow-lock-hint strong {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workflow-lock-hint span {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.workflow-lock-hint.show {
  opacity: 1;
  transform: translateY(0);
}

.action-toast {
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 25px;
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 0;
  overflow: visible;
  box-shadow: none;
  opacity: 0;
  --toast-drag-y: 0px;
  --toast-drag-x: 0px;
  --toast-offset-y: 16px;
  pointer-events: none;
  transition: opacity 0.22s ease;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

dialog.action-toast {
  border: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  outline: none;
}

.action-toast:focus,
.action-toast:focus-visible,
dialog.action-toast:focus,
dialog.action-toast:focus-visible {
  outline: none;
}

dialog.action-toast::backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.toast-card {
  position: relative;
  overflow: hidden;
  width: min(760px, calc(100vw - 50px));
  border-radius: 16px;
  border: 0;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  pointer-events: none;
  cursor: pointer;
  transform: translate(var(--toast-drag-x), calc(var(--toast-offset-y) + var(--toast-drag-y)));
  transition: transform 0.22s ease;
  touch-action: pan-x;
}

.toast-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 11px;
}

.toast-title {
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.toast-close-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}

.toast-close-btn:hover,
.toast-close-btn:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.toast-body {
  padding: 9px 14px 12px;
  border-top: 0;
}

.toast-body span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.toast-body strong {
  color: #1d4ed8;
  font-weight: 900;
}

.action-toast.show {
  opacity: 1;
  --toast-offset-y: 0px;
  pointer-events: auto;
}

.action-toast.show .toast-card {
  pointer-events: auto;
}

.action-toast.hiding {
  opacity: 0;
  --toast-offset-y: 16px;
  pointer-events: none;
}

.action-toast.swipe-out {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0s linear;
}

.action-toast.swipe-out .toast-card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.action-toast.dragging {
  transition: none;
}

.action-toast.dragging .toast-card {
  transition: none;
}

.action-toast.success {
  color: #0f172a;
}

.action-toast.success .toast-icon {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}

.action-toast.error {
  color: #0f172a;
}

.action-toast.error .toast-icon {
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}

.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

menu,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}

@keyframes message-dot {
  0%, 70%, 100% { opacity: 0.35; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

body.nav-open .sidebar {
  transform: translateX(0);
}

@media (max-width: 1180px) {
  .metric-grid,
  .customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-breakdown-controls {
    grid-template-columns: 1fr;
  }

  .revenue-breakdown-hero {
    grid-template-columns: 1fr;
  }

  .revenue-breakdown-donut-wrap {
    justify-self: center;
  }

  .revenue-breakdown-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .pipeline,
  .job-board,
  .quote-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-layout,
  .public-builder,
  .settings-grid,
  .public-content,
  .website-builder-split,
  .lead-forms-layout,
  .lead-form-builder-grid,
  .messages-layout {
    grid-template-columns: 1fr;
  }

  .messages-layout {
    height: auto;
    min-height: 0;
  }

  .messages-sidebar {
    max-height: 360px;
  }

  .message-thread-panel {
    height: clamp(430px, 62dvh, 620px);
  }

  .message-thread-body {
    min-height: 0;
  }

  #view-overview .split-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-overview .pipeline {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  #view-overview .pipeline-stack:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  #view-settings .settings-grid,
  #view-admin .settings-grid {
    grid-template-columns: 1fr;
  }

  .video-help-form,
  .video-help-item {
    grid-template-columns: 1fr;
  }

  .video-help-actions,
  .video-help-item-actions {
    align-items: stretch;
    justify-content: stretch;
  }

  .video-help-actions .settings-save-note {
    flex: 1 0 100%;
  }

  .video-help-actions .secondary-btn,
  .video-help-actions .primary-btn {
    width: 100%;
  }

  .settings-toggle-group {
    grid-template-columns: 1fr;
  }

  .settings-scheduling-blocks {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-scheduling-blocks.settings-inline-toggle-row {
    align-items: center;
    flex-direction: row;
  }

  .fixed-scheduling-slot-row {
    grid-template-columns: 1fr;
  }

  .fixed-scheduling-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fixed-scheduling-editor-actions .secondary-btn {
    width: 100%;
  }

  .settings-hours-row {
    grid-template-columns: 1fr;
  }

  .settings-hours-chip {
    justify-self: start;
  }

  .settings-hours-actions {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .settings-hours-actions .settings-save-note {
    flex: 1 1 100%;
  }

  .settings-hours-actions .primary-btn,
  .settings-hours-actions .secondary-btn {
    width: auto;
  }

  .settings-support-row {
    grid-template-columns: 1fr;
  }

  .settings-review-channel-row {
    grid-template-columns: 1fr;
  }

  .admin-workspaces-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-workspaces-actions,
  .admin-workspaces-actions .secondary-btn,
  .admin-workspaces-actions .primary-btn {
    width: 100%;
  }

  .admin-workspace-search-box {
    margin-top: 8px;
  }

  .admin-workspace-meta {
    grid-template-columns: 1fr;
  }

  .admin-workspace-detail-grid,
  .admin-create-workspace-form {
    grid-template-columns: 1fr;
  }

  .admin-prospect-browser .admin-workspaces-box {
    grid-template-columns: 1fr;
  }

  .admin-prospect-browser .admin-workspaces-box .primary-btn {
    width: 100%;
  }

  .admin-prospect-directory-head {
    align-items: stretch;
  }

  .admin-prospect-directory-card .primary-btn {
    width: auto;
  }

  .admin-prospect-form,
  .admin-prospecting-settings,
  .admin-prospect-main,
  .admin-prospect-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-prospect-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-prospect-main > .secondary-btn {
    justify-self: end;
  }

  .admin-prospect-toggles .demo-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .admin-workspace-detail-list {
    grid-template-columns: 1fr;
  }

  .procedure-builder-form {
    grid-template-columns: 1fr;
  }

  .procedure-builder-form .secondary-btn {
    width: 100%;
  }

  .lead-form-field-main {
    grid-template-columns: 1fr;
  }

  .lead-form-pricing-rule-grid {
    grid-template-columns: 1fr;
  }

  .lead-form-analytics-grid {
    grid-template-columns: 1fr;
  }

  .lead-form-year-threshold-flow {
    grid-template-columns: 1fr;
  }

  .lead-form-year-threshold-flow > span {
    align-self: start;
  }

  .lead-form-pricing-wide {
    grid-column: auto;
  }

  .lead-form-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-form-platform-field {
    min-width: 0;
    max-width: none;
  }

  .lead-form-list-controls {
    justify-self: end;
  }

  .lead-form-header-toggle {
    width: 118px;
    min-width: 118px;
  }

  .lead-form-field-row-head {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .lead-form-field-controls {
    justify-self: stretch;
    width: 100%;
  }

  .lead-form-required-toggle {
    align-self: stretch;
    justify-content: space-between;
    margin-right: 0;
    padding-left: 0;
  }

  .lead-form-footer-actions {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }

  .lead-detail-grid {
    grid-template-columns: 1fr;
  }

  .lead-detail-grid.is-assessment-focus {
    max-width: 680px;
  }

  .lead-detail-side-stack {
    order: 1;
  }

  #leadDetailInfoSection {
    order: 2;
  }

  .lead-detail-quote-launch {
    min-height: 98px;
    padding: 20px 18px 20px 18px;
  }

  .lead-detail-quote-launch .lead-quote-price {
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
  }

  .lead-detail-quote-launch .lead-quote-copy {
    padding-right: 88px;
  }
}

@media (max-width: 920px) {
  body.auth-active {
    min-height: auto;
    overflow-y: auto;
  }

  .auth-screen {
    display: block;
    min-height: 0;
    place-items: start center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .auth-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(440px, 100%);
    max-width: 440px;
    margin: 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .auth-access-panel {
    place-content: start center;
    gap: 22px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .auth-mobile-value {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    max-width: 390px;
    margin: -4px auto 0;
    text-align: center;
  }

  .auth-mobile-value p {
    margin: 0;
    color: rgba(226,232,240,0.78);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .auth-mobile-feature-rail {
    position: relative;
    width: min(330px, 100%);
    min-height: 32px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  }

  .auth-mobile-feature-track {
    position: absolute;
    inset: 0;
  }

  .auth-mobile-feature-group {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding-right: 8px;
    will-change: transform;
  }

  .auth-mobile-feature-group:first-child {
    animation: auth-mobile-features-a 24s linear infinite;
  }

  .auth-mobile-feature-group:last-child {
    animation: auth-mobile-features-b 24s linear infinite;
  }

  .auth-mobile-value span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid rgba(147,180,255,0.16);
    border-radius: 999px;
    background: rgba(15,23,42,0.3);
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    font-weight: 900;
  }

  .auth-mobile-value svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #93b4ff;
  }

  @keyframes auth-mobile-features-a {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
  }

  @keyframes auth-mobile-features-b {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
  }

  .auth-feature-panel {
    display: none;
  }

  .auth-card {
    max-width: 100%;
    padding: 8px;
  }
}

@media (max-width: 820px) {
  #leadAddressEditDialog {
    position: fixed;
    top: max(12px, calc(env(safe-area-inset-top) + 8px));
    left: 14px;
    right: 14px;
    margin: 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - max(12px, calc(env(safe-area-inset-top) + 8px)) - 14px);
  }

  .auth-screen {
    align-items: start;
    place-items: start center;
    padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  }

  .auth-layout {
    max-width: 430px;
  }

  .auth-card {
    padding: 8px;
  }

  .auth-card-head h2 {
    font-size: 30px;
  }

  .auth-brand img {
    width: 126px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    z-index: 20;
    width: min(290px, 86vw);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, calc(18px + env(safe-area-inset-bottom)));
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  .sidebar-foot {
    margin-top: 18px;
  }

  .logout-btn {
    flex: 0 0 auto;
    margin-bottom: env(safe-area-inset-bottom);
  }

  .nav-list {
    gap: 12px;
  }

  .nav-item {
    min-height: 48px;
  }

  .brand-row {
    gap: 10px;
  }

  .brand-message-btn {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: block;
    border: 0;
    background: rgba(8,13,28,0);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity 0.18s ease, background 0.18s ease, backdrop-filter 0.18s ease;
  }

  body.nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    background: rgba(8,13,28,0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.nav-open {
    overflow: hidden;
  }

  .main {
    padding: 16px 18px 18px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .mobile-menu {
    grid-column: 1;
  }

  .top-actions,
  .topbar.topbar-overview .top-actions {
    grid-column: 3;
  }

  .section-titlebar {
    grid-column: 1 / -1;
    order: 2;
    grid-template-columns: minmax(0, 1fr);
    align-items: baseline;
    justify-items: stretch;
    column-gap: 12px;
    margin-top: 8px;
  }

  .section-title-row {
    width: 100%;
    gap: 0;
  }

  .section-title-row h1 {
    flex: 0 1 auto;
  }

  .video-help-launcher {
    width: auto;
    min-width: 0;
    max-width: min(210px, 48vw);
    min-height: 38px;
    margin-left: 8px;
    padding: 0 10px;
    justify-content: center;
  }

  .trial-strip {
    justify-content: stretch;
    margin-bottom: 8px;
  }

  .trial-pill {
    width: 100%;
    justify-content: space-between;
  }

  .upgrade-plan-dialog form {
    gap: 18px;
    padding: 22px 18px 24px;
  }

  .upgrade-plan-toggle {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
  }

  .upgrade-plan-option {
    min-height: 54px;
    font-size: 19px;
  }

  .upgrade-plan-price {
    margin-top: 12px;
  }

  .upgrade-plan-features {
    gap: 12px;
  }

  .upgrade-plan-features li {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
  }

  .plan-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .plan-notice-actions {
    justify-content: flex-start;
  }

  .mobile-menu {
    display: block;
    flex: 0 0 42px;
  }

  .top-actions,
  .topbar.topbar-overview .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-column: 2 / -1;
    width: 100%;
    min-width: 0;
    gap: 8px;
    justify-content: stretch;
    justify-self: stretch;
  }

  .top-actions-scroll {
    min-width: 0;
    margin: -8px -8px -8px -6px;
    padding: 8px 10px 8px 6px;
    scroll-padding-inline: 6px 10px;
  }

  .message-thread-contact {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .message-thread-context {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .message-context-pill,
  .message-context-action,
  .message-delete-chat-btn {
    min-height: 36px;
  }

  .message-group,
  .message-group.is-mine {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-controls {
    gap: 6px;
  }

  .demo-toggle {
    min-height: 34px;
    min-width: 108px;
    padding: 4px 5px 4px 10px;
    font-size: 12px;
  }

  .demo-switch-track {
    width: 36px;
    height: 22px;
    flex-basis: 36px;
  }

  .demo-switch-thumb {
    width: 22px;
    height: 22px;
  }

  .demo-toggle.active .demo-switch-thumb {
    transform: translateX(14px);
  }

  .top-actions-scroll > *,
  .new-menu-btn {
    flex: 0 0 auto;
  }

  .app-online-pill {
    max-width: 132px;
    min-height: 34px;
    padding: 6px 10px;
  }

  .workspace-cache-pill {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
  }

  .app-online-names {
    display: none;
  }

  .metric-grid,
  .pipeline,
  .job-board,
  .quote-board,
  .workflow-card,
  .customer-grid {
    grid-template-columns: 1fr;
  }

  .metric-card .metric-card-bg-icon {
    right: -14px;
    bottom: -20px;
    width: 96px;
    height: 96px;
    opacity: 0.075;
  }

  .metric-revenue-meta {
    margin-right: 0;
  }

  .revenue-breakdown-dialog form {
    padding: 14px;
  }

  .revenue-breakdown-donut-wrap {
    width: 128px;
    height: 128px;
  }

  .revenue-breakdown-donut {
    width: 108px;
    height: 108px;
  }

  .revenue-donut-track,
  .revenue-donut-segment {
    stroke-width: 14;
  }

  .revenue-breakdown-donut::before {
    inset: 17px;
  }

  .revenue-breakdown-donut-center strong {
    font-size: 13px;
  }

  .revenue-breakdown-donut-center small {
    font-size: 10px;
  }

  .revenue-breakdown-stats {
    grid-template-columns: 1fr;
  }

  .warranty-issue-card {
    grid-template-columns: 1fr;
  }

  .warranty-issue-side {
    justify-items: stretch;
  }

  .warranty-issue-side .secondary-btn,
  .warranty-issue-side .ghost-btn {
    width: 100%;
  }

  .warranty-issue-side .job-actions-btn {
    justify-self: end;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    font-size: 14px;
  }

  .warranty-issue-side .job-actions-btn .icon,
  .warranty-issue-side .job-actions-btn .icon svg {
    width: 17px;
    height: 17px;
  }

  #view-overview .split-layout {
    gap: 14px;
  }

  #view-overview .panel {
    min-width: 0;
    padding: 16px;
    overflow: hidden;
  }

  #view-overview .pipeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #view-overview .pipeline-stack:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }

  #view-overview .pipeline-lane {
    padding: 12px;
  }

  #view-overview .lead-mini {
    padding: 14px;
  }

  #view-overview .setup-item {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px 0;
  }

  #view-overview .setup-check {
    width: 34px;
    height: 34px;
  }

  #view-overview .setup-item .text-btn {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    white-space: normal;
    text-align: left;
  }

  .lead-inbox-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  .settings-email-verify-row {
    grid-template-columns: 1fr;
  }

  .settings-email-state-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-email-state-head span {
    align-self: flex-start;
  }

  .settings-email-state-guide {
    grid-template-columns: 1fr;
  }

  .settings-provider-toggles {
    grid-template-columns: 1fr;
  }

  .settings-dealership-row {
    grid-template-columns: 1fr;
  }

  .dealership-card {
    padding: 16px;
    border-radius: 14px;
  }

  .dealership-card-info {
    padding: 14px;
  }

  .dealership-card-head {
    flex-direction: column;
  }

  .dealership-card-head-actions {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }

  .dealership-card-pills {
    justify-content: flex-start;
  }

  .dealership-card-details-toggle {
    flex: 0 0 auto;
  }

  .dealership-card-body,
  .dealership-info-overview,
  .dealership-info-history-row {
    grid-template-columns: 1fr;
  }

  .dealership-packet-row {
    align-items: center;
    flex-direction: row;
  }

  .dealership-packet-toggle {
    width: 48px;
  }

  .dealership-info-dialog {
    width: min(520px, calc(100vw - 28px));
    border-radius: 10px;
  }

  .dealership-info-dialog form {
    gap: 14px;
    padding: 18px;
  }

  .dealership-info-dialog .dialog-head h2 {
    font-size: 22px;
  }

  .dealership-info-dialog .dialog-sub {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
  }

  .dealership-info-overview {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 10px;
  }

  .dealership-info-overview div,
  .dealership-info-overview div.is-wide {
    grid-column: 1 / -1;
  }

  .dealership-info-overview span {
    font-size: 11px;
  }

  .dealership-info-overview strong {
    font-size: 13px;
    line-height: 1.35;
  }

  .dealership-info-dialog .lead-form-section {
    gap: 12px;
    padding: 13px;
    border-radius: 8px;
  }

  .dealership-info-dialog .lead-form-section-title {
    gap: 10px;
  }

  .dealership-info-dialog .lead-form-section-title .icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
  }

  .dealership-info-dialog .lead-form-section-title strong {
    font-size: 15px;
  }

  .dealership-info-dialog .lead-form-section-title small {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 700;
  }

  .dealership-info-dialog .empty-state.table-empty {
    min-height: 0;
    padding: 18px;
  }

  .dealership-card-actions {
    justify-content: stretch;
  }

  .dealership-card-actions .btn-sm {
    width: 100%;
  }

  .dealerships-head-actions {
    width: auto;
    justify-content: flex-end;
  }

  .dealerships-panel > .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .dealerships-panel > .panel-head > div:first-child {
    min-width: 0;
  }

  .dealerships-head-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .dealerships-head-actions .status {
    order: 2;
  }

  .lead-follow-up-actions {
    grid-template-columns: 1fr;
  }

  .workflow-mileage-bar {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .workflow-mileage-bar > .icon {
    width: 38px;
    height: 38px;
  }

  .workflow-mileage-bar .secondary-btn,
  .workflow-mileage-stats {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .workflow-mileage-stats span {
    flex: 1 1 130px;
    justify-content: center;
  }

  .lead-search-box,
  .lead-filter-trigger {
    min-height: 54px;
  }

  .lead-search-box {
    grid-template-columns: 44px minmax(0, 1fr) 30px;
  }

  .lead-search-box .icon {
    width: 44px;
  }

  .lead-search-box input {
    font-size: 13px;
  }

  .lead-filter-trigger {
    width: auto;
    min-width: 54px;
    padding: 0 14px;
    gap: 0;
  }

  .lead-filter-trigger > span:not(.icon) {
    display: none;
  }

  .lead-filter-trigger .icon,
  .lead-filter-trigger .icon svg {
    width: 20px;
    height: 20px;
  }

  .job-filter-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-filter-results div {
    padding: 10px 12px;
  }

  .job-filter-results strong {
    font-size: 17px;
  }

  .lead-sort-grid {
    grid-template-columns: 1fr;
  }

  .quote-card-footer {
    justify-content: flex-end;
  }

  .quote-card-actions-btn {
    width: auto;
  }

  .workflow-side {
    justify-items: start;
    min-width: 0;
  }

  .workflow-lens-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .workflow-lens-head span {
    text-align: left;
  }

  .lead-vehicle-grid {
    grid-template-columns: 1fr;
  }

  .lead-source-grid {
    grid-template-columns: 1fr;
  }

  .dealership-vehicle-fields,
  .dealership-request-schedule-grid {
    grid-template-columns: 1fr;
  }

  .dealership-vehicle-fields label,
  .dealership-vehicle-fields label:nth-child(4),
  .dealership-vehicle-fields label:nth-child(5) {
    grid-column: 1 / -1;
  }

  .dealership-request-assessments-toolbar,
  .dealership-request-assessment-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dealership-request-assessment-title {
    padding-right: 0;
  }

  .dealership-vehicle-expand-copy small {
    white-space: normal;
  }

  .dealership-request-assessments-toolbar .btn-sm {
    width: 100%;
    justify-content: center;
  }

  .lead-headlights-grid {
    grid-template-columns: 1fr;
  }

  .lead-quote-toggle,
  .lead-travel-fee-line {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px;
  }

  .lead-quote-check,
  .lead-travel-fee-icon {
    width: 40px;
    height: 40px;
  }

  .lead-quote-copy strong,
  .lead-travel-fee-copy strong {
    font-size: 14px;
  }

  .lead-quote-copy small,
  .lead-travel-fee-copy small {
    font-size: 12px;
    line-height: 1.28;
  }

  .lead-quote-price,
  .lead-travel-fee-value {
    grid-column: auto;
    justify-self: end;
    padding: 7px 9px;
    font-size: 12px;
  }

  .lead-detail-quote-launch {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    min-height: 96px;
    height: auto;
    padding: 18px 16px 18px 16px;
  }

  .lead-detail-quote-launch .lead-quote-check {
    width: 40px;
    height: 40px;
  }

  .lead-detail-quote-launch .lead-quote-price {
    right: 16px;
  }

  .lead-detail-quote-launch .lead-quote-copy {
    padding-right: 86px;
  }

  .quote-assessment-shell {
    grid-template-columns: 1fr;
  }

  .quote-assessment-side {
    position: static;
  }

  .lead-scheduler {
    grid-template-columns: 1fr;
  }

  .job-progress-strip {
    gap: 9px;
  }

  .job-progress-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .job-progress-status strong {
    font-size: 16px;
  }

  .job-progress-meta {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .job-progress-meta-item {
    width: 100%;
  }

  .job-detail-actions {
    justify-content: stretch;
  }

  .job-detail-actions .primary-btn,
  .job-detail-actions .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .payment-summary-box,
  .payment-option-grid {
    grid-template-columns: 1fr;
  }

  .preview-hero {
    display: block;
  }

  .preview-hero a {
    display: inline-flex;
    margin-top: 18px;
  }

  .public-hero-inner {
    grid-template-columns: 1fr;
  }

  .public-content {
    margin-top: -34px;
  }

  .public-proof-list {
    grid-template-columns: 1fr;
  }

  .create-grid {
    grid-template-columns: 1fr;
  }

  .create-option {
    grid-template-columns: 58px minmax(0, 1fr);
    align-content: center;
    min-height: 118px;
    padding: 18px;
  }

  .create-option .icon {
    width: 52px;
    height: 52px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .dealership-vehicle-jobs-panel > .proof-container-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .dealership-vehicle-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
  }

  .customer-vehicle-grid,
  .customer-import-grid,
  .customer-import-photo-grid,
  .customer-vcf-upload {
    grid-template-columns: 1fr;
  }

  .customer-import-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .customer-import-actions .primary-btn,
  .customer-import-actions .secondary-btn {
    width: 100%;
  }

  .dealership-vehicle-panel-actions .primary-btn,
  .dealership-vehicle-panel-actions .secondary-btn {
    width: 100%;
    min-height: 50px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .dealership-headlight-procedure-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dealership-headlight-procedure-card {
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .dealership-headlight-procedure-head {
    align-items: center;
    padding: 14px;
    border-bottom: 0;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-head {
    border-bottom: 1px solid rgba(37,99,235,0.12);
  }

  .dealership-headlight-procedure-grit {
    margin-left: auto;
  }

  .dealership-headlight-procedure-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-chevron {
    transform: rotate(180deg);
  }

  .dealership-headlight-procedure-body {
    display: none;
    padding: 12px 14px 14px;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-body {
    display: grid;
  }

  .dealership-vehicle-procedure-control {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dealership-vehicle-procedure-control p {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .app-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .completed-message-test,
  .completed-message-summary {
    grid-template-columns: 1fr;
  }

  .completed-message-recipient {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .completed-message-recipient em {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }

  .completed-message-variable-option {
    grid-template-columns: 1fr;
  }

  .completed-message-variable-option em {
    justify-self: start;
  }

  .app-action-panel,
  .app-modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .app-action-panel > button,
  .app-action-panel > a,
  .app-modal-footer > button,
  .app-modal-footer > a {
    width: 100%;
  }

  .followup-card {
    grid-template-columns: 1fr;
  }

  .followup-card-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .followup-card-actions .secondary-btn {
    flex: 1 1 120px;
  }

  .followup-extension-options {
    grid-template-columns: 1fr;
  }

  .company-logo-uploader {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .company-logo-preview {
    width: 100%;
    max-width: 220px;
  }

  .company-logo-uploader .secondary-btn {
    width: 100%;
    min-height: 48px;
  }

  .dealership-vehicle-jobs-panel > .proof-container-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .dealership-vehicle-jobs-panel > .proof-container-head h3 {
    font-size: 20px;
  }

  .dealership-vehicle-jobs-panel > .proof-container-head p {
    max-width: 30rem;
    line-height: 1.28;
  }

  .dealership-vehicle-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
  }

  .dealership-vehicle-panel-actions .primary-btn,
  .dealership-vehicle-panel-actions .secondary-btn {
    width: 100%;
    min-height: 50px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .lead-quote-toggle,
  .lead-travel-fee-line {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  .lead-quote-check,
  .lead-travel-fee-icon,
  .lead-detail-quote-launch .lead-quote-check {
    width: 38px;
    height: 38px;
  }

  .lead-detail-quote-launch {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    min-height: 96px;
    padding: 18px 14px 18px 14px;
  }

  .lead-detail-quote-launch .lead-quote-price {
    right: 14px;
  }

  .lead-detail-quote-launch .lead-quote-copy {
    padding-right: 82px;
  }

  .lead-quote-copy strong,
  .lead-travel-fee-copy strong,
  .lead-detail-quote-launch .lead-quote-copy strong {
    font-size: 13.5px;
  }

  .lead-quote-copy small,
  .lead-travel-fee-copy small {
    font-size: 11.5px;
  }

  .lead-quote-price,
  .lead-travel-fee-value {
    padding: 6px 8px;
    font-size: 11.5px;
  }

  .check-grid,
  .onboarding-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .panel-head,
  .details-list div {
    display: block;
  }

  #view-customers .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  #view-customers .panel-head > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  #view-customers .panel-head > button {
    flex: 0 0 auto;
    margin-left: auto;
  }

  #view-customers .customer-add-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #view-customers .customer-card {
    padding: 14px;
  }

  .lead-forms-panel > .panel-head {
    display: flex;
    align-items: flex-start;
  }

  .public-form-vehicle-grid,
  .public-form-schedule-grid {
    grid-template-columns: 1fr;
  }

  .lead-forms-panel > .panel-head > .lead-form-create-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .lead-form-create-btn .lead-form-create-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lead-form-create-btn .icon {
    display: inline-flex;
  }

  #view-leads .panel-head,
  #view-quotes .panel-head,
  #view-messages .messages-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  #view-leads .panel-head > div:first-child,
  #view-quotes .panel-head > div:first-child,
  #view-messages .messages-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  #view-messages .messages-head > button {
    flex: 0 0 auto;
    margin-left: auto;
  }

  #view-leads .panel-head-actions,
  #view-quotes .panel-head-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  #view-quotes .panel-title-inline {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  #view-leads .panel-head-actions .secondary-btn {
    min-height: 44px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  #view-leads .lead-add-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #view-quotes .quote-add-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .lead-filter-dialog form {
    padding: 18px;
  }

  .lead-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #view-settings .settings-action-head,
  #view-admin .settings-action-head,
  #view-settings .panel-head:has(> button),
  #view-admin .panel-head:has(> button) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    justify-content: space-between;
  }

  .settings-head-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .settings-head-copy {
    width: 100%;
    min-width: 0;
  }

  .lead-detail-list div {
    display: block;
  }

  .lead-detail-list dt {
    margin-bottom: 6px;
  }

  .headlight-slider-control {
    gap: 8px;
    padding: 0;
  }

  .headlight-slider-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .headlight-slider-range {
    min-height: 58px;
    padding-top: 24px;
  }

  .headlight-slider-row input[type="range"] {
    --slider-height: 6px;
    --slider-thumb-size: 22px;
    --slider-thumb-offset: -8px;
  }

  .headlight-slider-row output { min-width: 0; }

  .assessment-service-buttons,
  .resealing-options-grid {
    grid-template-columns: 1fr;
  }

  .details-list dd {
    margin-top: 4px;
    text-align: left;
  }

  .demo-settings-box {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-inline-field {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .demo-settings-box .clear-demo-btn {
    width: 100%;
  }

  .procedure-step-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .procedure-step-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .job-procedure-control {
    grid-template-columns: 1fr;
  }

  .customer-job-headlight-procedure-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-job-headlight-procedure-grit {
    align-self: flex-start;
  }

  .dealership-headlight-procedure-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dealership-headlight-procedure-card {
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .dealership-headlight-procedure-head {
    align-items: center;
    padding: 14px;
    border-bottom: 0;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-head {
    border-bottom: 1px solid rgba(37,99,235,0.12);
  }

  .dealership-headlight-procedure-grit {
    margin-left: auto;
  }

  .dealership-headlight-procedure-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-chevron {
    transform: rotate(180deg);
  }

  .dealership-headlight-procedure-body {
    display: none;
    padding: 12px 14px 14px;
  }

  .dealership-headlight-procedure-card.is-open .dealership-headlight-procedure-body {
    display: grid;
  }

  .dealership-vehicle-procedure-control {
    grid-template-columns: 1fr;
  }

  .dealership-vehicle-procedure-control p {
    margin: 0;
  }

  .job-procedure-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .job-procedure-step > span {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .action-toast,
  dialog.action-toast {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 18px;
  }

  .toast-card {
    width: min(440px, calc(100vw - 36px));
  }

  .toast-header {
    gap: 8px;
    padding: 10px 12px 9px;
  }

  .toast-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .toast-title {
    font-size: 16px;
    line-height: 1.18;
  }

  .toast-body {
    padding: 8px 12px 10px;
  }

  .toast-body span {
    font-size: 12px;
    line-height: 1.3;
  }

}

@media (max-width: 720px) {
  #view-admin .panel-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-accordion-head-actions {
    gap: 6px;
    align-items: flex-start;
  }

  .admin-mode-head-actions {
    gap: 6px;
    align-items: center;
  }

  .admin-accordion-head-actions .status {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .admin-mode-head-actions .status {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .admin-accordion-toggle {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 380px) {
  .video-help-launcher {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
  }

  .video-help-launcher .video-help-label {
    display: none;
  }

  .dealership-vehicle-panel-actions {
    grid-template-columns: 1fr;
  }
}

.rl-site-template-standard .rl-site-hero {
  min-height: 66vh;
}

.rl-site-template-standard .rl-site-section,
.rl-site-template-standard .rl-site-band,
.rl-site-template-standard .rl-site-quote-section {
  background: #fff;
}

.rl-site-template-standard .rl-site-card,
.rl-site-template-standard .rl-site-review-box,
.rl-site-template-standard .rl-site-placeholder,
.rl-site-template-standard .rl-site-contact-card {
  border-radius: 8px;
  box-shadow: none;
}

.rl-site-template-renewalens-index .rl-site-hero {
  min-height: 78vh;
}

.rl-site-template-renewalens-index .rl-site-card,
.rl-site-template-renewalens-index .rl-site-review-box,
.rl-site-template-renewalens-index .rl-site-contact-card {
  box-shadow: 0 22px 60px rgba(15,23,42,0.12);
}

.rl-site-template-renewalens-index .rl-site-slider {
  --rl-slider-bg: rgba(15,23,42,0.88);
  --rl-slider-border: rgba(255,255,255,0.1);
  --rl-slider-text: #ffffff;
  --rl-slider-muted: rgba(229,231,235,0.55);
  --rl-slider-accent: #60a5fa;
  --rl-slider-control-bg: rgba(0,0,0,0.2);
  border-radius: 0;
  box-shadow: 0 28px 80px rgba(2,6,23,0.28);
}

.rl-site-template-renewalens-index .rl-site-slider-proof {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.rl-site-template-renewalens-index .rl-site-proof-figure + .rl-site-proof-figure {
  border-left: 1px solid rgba(255,255,255,0.08);
}

.rl-site-template-renewalens-index .rl-site-proof-meta {
  border-top-color: rgba(255,255,255,0.06);
}

.rl-site-template-renewalens-index .rl-site-review-quote {
  color: rgba(255,255,255,0.88);
  font-style: italic;
}

.rl-site-template-renewalens-index .rl-site-slider-btn {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.rl-site-template-renewalens-index .rl-site-slider-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
}

.rl-site-template-renewalens-index .rl-site-review-link {
  background: #2563eb;
  color: #fff;
}

.rl-site-slider-proof {
  width: min(100%, 760px);
}

.rl-site-slider-proof .rl-site-proof-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rl-site-slider-proof .rl-site-proof-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0.9;
}

.rl-site-slider-proof .rl-site-proof-slide.is-active img,
.rl-site-slider-proof:hover .rl-site-proof-slide img {
  opacity: 1;
}

.rl-site-slider-proof .rl-site-proof-meta {
  border-top: 1px solid var(--rl-slider-border);
}

.rl-site-template-standard .rl-site {
  background: #fff;
}

.rl-site-template-standard .rl-site-nav {
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255,255,255,0.94);
  box-shadow: none;
}

.rl-site-template-standard .rl-site-hero {
  min-height: 620px;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.08), rgba(15,23,42,var(--rl-site-hero-overlay))),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-template-standard .rl-site-hero-inner {
  display: block;
}

.rl-site-template-standard .rl-site-trust-strip {
  max-width: 760px;
  margin-right: auto;
  margin-left: 0;
}

.rl-site-template-renewalens-index .rl-site {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef4ff 36%, #ffffff 100%);
}

.rl-site-template-renewalens-index .rl-site-nav {
  min-height: 82px;
  border-bottom: 1px solid rgba(37,99,235,0.16);
  background: rgba(8,13,25,0.9);
  box-shadow: 0 22px 54px rgba(8,13,25,0.22);
}

.rl-site-template-renewalens-index .rl-site-brand,
.rl-site-template-renewalens-index .rl-site-nav a {
  color: #fff;
}

.rl-site-template-renewalens-index .rl-site-nav > div > a:not(.rl-site-nav-cta) {
  color: rgba(255,255,255,0.76);
}

.rl-site-template-renewalens-index .rl-site-nav-cta {
  background: #2563eb;
  color: #fff;
}

.rl-site-template-renewalens-index .rl-site-hero-premium {
  min-height: clamp(720px, 92vh, 940px);
  padding-top: clamp(70px, 8vw, 118px);
  background:
    radial-gradient(circle at 78% 18%, rgba(37,99,235,0.38), transparent 25%),
    radial-gradient(circle at 22% 88%, rgba(18,183,106,0.24), transparent 28%),
    linear-gradient(90deg, rgba(4,9,18,0.96), rgba(7,13,26,0.8) 48%, rgba(7,13,26,var(--rl-site-hero-overlay))),
    var(--rl-site-hero-image) center / cover;
}

.rl-site-template-renewalens-index .rl-site-hero-premium .rl-site-hero-inner {
  width: min(1180px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  margin: 0 auto;
}

.rl-site-template-renewalens-index .rl-site-hero-premium h1 {
  max-width: 880px;
  color: #fff;
  font-size: clamp(54px, 8vw, 108px);
}

.rl-site-template-renewalens-index .rl-site-hero-premium p {
  max-width: 690px;
}

.rl-site-template-renewalens-index .rl-site-hero-card {
  align-self: end;
}

.rl-site-template-renewalens-index .rl-site-hero-card p b {
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.rl-site-template-renewalens-index .rl-site-trust-strip {
  width: min(1180px, 100%);
}

.rl-site-template-renewalens-index .rl-site-section {
  width: min(1180px, calc(100% - 40px));
}

.rl-site-template-renewalens-index .rl-site-section-head h2 {
  font-size: clamp(40px, 5.6vw, 76px);
}

.rl-site-template-renewalens-index .rl-site-card,
.rl-site-template-renewalens-index .rl-site-review-box,
.rl-site-template-renewalens-index .rl-site-placeholder,
.rl-site-template-renewalens-index .rl-site-contact-card,
.rl-site-template-renewalens-index .rl-site-video-card,
.rl-site-template-renewalens-index .rl-site-faq-list details {
  border-color: rgba(37,99,235,0.14);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15,23,42,0.12);
}

@media (max-width: 820px) {
  .rl-site-template-renewalens-index .rl-site-nav {
    background: #08111f;
  }

  .rl-site-template-renewalens-index .rl-site-hero-premium {
    min-height: 680px;
  }

  .rl-site-template-renewalens-index .rl-site-hero-premium .rl-site-hero-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rl-site-review-slide {
    padding: 12px;
  }

  .rl-site-proof-slide {
    padding: 0;
  }

  .rl-site-proof-slide-images {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rl-site-template-renewalens-index .rl-site-proof-figure + .rl-site-proof-figure {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 0;
  }

  .rl-site-proof-meta {
    padding: 18px;
  }

  .rl-site-review-quote {
    font-size: 15px;
    line-height: 1.65;
  }

  .rl-site-slider-controls {
    grid-template-columns: 42px 1fr 42px;
    gap: 8px;
    padding: 10px;
  }

  .rl-site-slider-btn {
    width: 38px;
    height: 38px;
  }
}