:root {
  --navy: #1E293B;
  --navy-dark: #0F172A;
  --orange: #E07A2A;
  --orange-dark: #B86012;
  --orange-soft: #FFF1E5;
  --orange-dim: #C68A5C;
  --cream: #F2EEE6;
  --bg: #F8F9FA;
  --card: #FFFFFF;
  --card-tint: #F4F5F7;
  --text: #1D1D1F;
  --text-muted: #86868B;
  --border: #E4E4E7;
  --border-soft: #ECECEE;
  --success: #15803D;
  --success-bg: #DCFCE7;
  --warning-bg: #FEF3C7;
  --warning-text: #92400E;
  --error: #B91C1C;
  --error-bg: #FEE2E2;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.10);
}

html { font-feature-settings: "tnum" 1, "ss01" 1; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.embed-mode { background: transparent; }

a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--text-muted); font-size: 0.9rem; }
.mt { margin-top: 16px; }

/* Header */
.site-header {
  background: var(--navy);
  color: #fff;
  padding: 18px 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: 44px; height: 44px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }
.brand-text small { font-size: 0.78rem; opacity: 0.75; margin-top: 2px; }
.phone-cta {
  background: #fff;
  color: var(--orange-dark);
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.18s, color 0.18s;
}
.phone-cta:hover { background: var(--orange); color: #fff; text-decoration: none; }

/* Footer */
.site-footer {
  margin-top: 80px;
  padding: 30px 0;
  background: var(--navy-dark);
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  text-align: center;
}

/* Booking page */
.booking-page { padding: 48px 24px 80px; }
body.embed-mode .booking-page { padding: 24px; }
.hero { text-align: center; margin-bottom: 36px; }
.hero h1 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.hero-sub {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
  font-weight: 400;
}

/* Stepper — unified pills with a thin connecting line behind */
.stepper {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0 auto 36px;
  position: relative;
  max-width: 500px;
}
.stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 14%;
  right: 14%;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.stepper .step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  margin: 0 6px;
  transition: color 0.2s, background 0.2s;
}
.stepper .step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: all 0.2s;
}
.stepper .step.active { color: var(--navy); }
.stepper .step.active span {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.stepper .step.done { color: var(--text); cursor: pointer; }
.stepper .step.done span {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.stepper .step.done:hover { color: var(--navy); }

/* Step panels — luminous card with light-catch inner highlight */
.step-panel {
  background: var(--card);
  border-radius: 22px;
  padding: 36px 40px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 12px 32px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(15, 23, 42, 0.02);
  max-width: 820px;
  margin: 0 auto;
  transform-origin: top center;
  will-change: transform, opacity;
  overflow: hidden;
}
.step-panel[data-step="1"] {
  max-width: 880px;
  padding: 32px 0 0;
}
.step-panel[data-step="1"] > h2,
.step-panel[data-step="1"] > p,
.step-panel[data-step="1"] > .zip-field,
.step-panel[data-step="1"] > #zone-message {
  margin-left: 36px;
  margin-right: 36px;
}
.step-panel[data-step="1"] > .zip-field { margin-bottom: 24px; }
.step-panel:not([hidden]) { animation: stepIn 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.step-panel.exiting { animation: stepOut 0.22s ease-in forwards; }
.step-panel h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.step-panel h2 + p.muted { margin-top: 0; margin-bottom: 24px; }

@keyframes stepIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stepOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Hero entrance */
.hero { animation: heroIn 0.6s ease-out; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.service-card { cursor: pointer; }
.service-card input { position: absolute; opacity: 0; pointer-events: none; }
.service-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 18px 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s, background 0.2s;
  min-height: 84px;
  font-weight: 500;
  color: var(--text);
}
.service-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.service-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.service-card input:checked + .service-card-inner .service-desc { color: var(--orange-dark); }

/* Locked work-summary — appears only after a service is picked */
.work-summary-wrap.is-locked {
  opacity: 0.4;
  pointer-events: none;
  filter: saturate(0.6);
  transition: opacity 0.32s ease, filter 0.32s ease;
}
.work-summary-wrap {
  transition: opacity 0.32s ease, filter 0.32s ease;
}
.service-card:hover .service-card-inner {
  border-color: var(--orange);
  background: #FFFBF6;
}
.service-card input:checked + .service-card-inner {
  border-color: var(--orange);
  background: #FFF6EE;
  color: var(--navy);
  animation: servicePop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes servicePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Forms */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: span 2; }
.field > span { font-weight: 500; font-size: 0.92rem; color: var(--text); }
.field input, .field textarea, .field select {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.field input:hover:not(:focus), .field textarea:hover:not(:focus) {
  border-color: #C9C2B5;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.18);
}
.field small { font-size: 0.8rem; }

@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: auto; }
  .step-panel { padding: 24px; }
}

/* Buttons — flat */
.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); transition: transform 0.08s ease, background 0.18s ease; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--orange-dark); }
.btn-secondary { background: var(--card-tint); color: var(--navy); }
.btn-secondary:hover:not(:disabled) { background: var(--cream); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--card-tint); }
.btn-block { width: 100%; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-secondary.is-loading::after { border-color: rgba(31,44,68,0.3); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}
.actions .btn-primary { margin-left: auto; }

/* Address field on step 1 — wider than ZIP since it accepts a full address */
.address-field {
  max-width: 520px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.address-field > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.address-input-wrap {
  position: relative;
  display: block;
  /* Establish a stacking context so .pac-container (which Google appends
     to <body>) remains positioned correctly relative to the page, while
     the input below sits cleanly above any sibling layers. */
  z-index: 1;
}
.address-field input {
  /* Opaque white background — non-negotiable. With transparent we were
     letting browser autofill suggestion chips and password-manager icon
     bars bleed through underneath the input, which produced the row of
     mystery glyphs in the user's screenshot. */
  background: #FFFFFF !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  width: 100%;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Suppress browser-native UI that loves to live inside text inputs. */
  -webkit-text-fill-color: var(--text);
  caret-color: var(--orange);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 2;
}
/* Kill the yellow autofill background some browsers paint behind the text. */
.address-field input:-webkit-autofill,
.address-field input:-webkit-autofill:hover,
.address-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* Hide WebKit-injected contact-card / strong-password buttons. */
.address-field input::-webkit-contacts-auto-fill-button,
.address-field input::-webkit-credentials-auto-fill-button,
.address-field input::-webkit-credit-card-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
}
.address-field input::-webkit-search-cancel-button,
.address-field input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
.address-field input::placeholder { color: #B4ADA0; font-weight: 400; }
.address-field input:hover:not(:focus) { border-color: #C9C2B5; }
.address-field input:focus {
  outline: none;
  background: #FFFFFF !important;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.18);
}
.address-field input.is-valid { border-color: var(--border); }

/* Fallback split-field address form — appears if Google Places JS fails
   to initialize so customers can still book. Visually demoted vs the
   primary autocomplete so it's clear this is the "plan B" path. */
.address-fallback {
  margin-top: 18px;
  padding: 18px;
  background: #FFFBF5;
  border: 1px dashed #E6C28A;
  border-radius: 14px;
  animation: alertIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.address-fallback-banner {
  margin-bottom: 14px;
}
.address-fallback-banner strong {
  display: block;
  font-size: 0.95rem;
  color: var(--orange-dark);
  margin-bottom: 2px;
}
.address-fallback-banner p { margin: 0; }
.address-fallback .grid { margin-bottom: 12px; }
.address-fallback .field input {
  background: #fff !important;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  width: 100%;
}
.address-fallback .field input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.16);
}
.address-fallback #fb-status { min-height: 18px; }
.address-field .address-hint {
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Google Places autocomplete dropdown — Google appends `.pac-container` to
   document.body and absolutely-positions it under the input. Without our own
   styles the suggestions inherit zero font-family from <body> in some Safari
   versions and render as fallback glyphs. These rules force the same look
   as our other surfaces, plus a clean drop-shadow + rounded card. */
.pac-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 6px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  background: #fff;
  overflow: hidden;
  /* Above any browser-injected autofill chip bar (typically ~10000) and
     iOS Safari's contact-card overlay. */
  z-index: 2147483647 !important;
}
.pac-container:after { display: none !important; } /* hide "powered by Google" attribution row that breaks rounded corners */
.pac-item {
  font-family: inherit !important;
  font-size: 0.92rem;
  color: var(--text);
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover,
.pac-item.pac-item-selected,
.pac-item-selected {
  background: var(--orange-soft);
}
.pac-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0;
  background-position: center;
  background-size: 18px 18px;
}
.pac-item-query {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  padding-right: 4px;
}
.pac-matched {
  font-weight: 700;
  color: var(--orange-dark);
}
.pac-item span:not(.pac-item-query):not(.pac-icon):not(.pac-matched) {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

/* ZIP field on step 1 — clean stroked input, no fill */
.zip-field {
  max-width: 280px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zip-field > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zip-input-wrap {
  position: relative;
  display: block;
}
.zip-field input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.zip-field input::placeholder {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.18;
}
.zip-field input:hover:not(:focus) { border-color: #C9C2B5; }
.zip-field input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.18);
  animation: none;
}
.zip-field input.is-valid {
  border-color: var(--border);
  background: transparent;
}
.zip-field input:not(.is-valid):not(:focus) {
  animation: zipPulse 2.4s ease-in-out infinite;
}
@keyframes zipPulse {
  0%, 100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(245, 133, 54, 0);
  }
  50% {
    border-color: rgba(245, 133, 54, 0.55);
    box-shadow: 0 0 0 4px rgba(245, 133, 54, 0.06);
  }
}
.zip-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translateX(10px) scale(0.4);
  color: #fff;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.28s ease-out, transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.zip-icon svg { width: 14px; height: 14px; display: block; }
.zip-icon.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

.booking-summary {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.booking-summary:empty { display: none; }

/* Calendar (Calendly-style, premium) */
.calendar-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  align-items: stretch;
  animation: calendarUnfurl 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  border-top: 1px solid var(--border-soft);
  transform-origin: top center;
}
@keyframes calendarUnfurl {
  0%   { opacity: 0; transform: translateY(-12px) scaleY(0.96); }
  60%  { opacity: 1; transform: translateY(0) scaleY(1.005); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.cal-pane {
  min-width: 0;
  padding: 28px 28px 32px 36px;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  animation: dayRowIn 0.32s ease-out backwards;
}
.cal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.cal-nav {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cal-nav:hover:not(:disabled) { background: var(--cream); }
.cal-nav:disabled { opacity: 0.25; cursor: not-allowed; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cal-cell {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  padding: 0;
}
.cal-empty { cursor: default; }
.cal-day { color: #B8B3A4; opacity: 0.5; }
.cal-day:disabled { cursor: not-allowed; }
.cal-day.cal-available {
  color: var(--navy);
  font-weight: 700;
  opacity: 1;
  transition: color 0.15s;
}
/* Row-staggered fade for ALL cells (50ms per row, after header) */
.cal-cell {
  animation: dayRowIn 0.32s ease-out backwards;
  animation-delay: calc(0.1s + var(--row-delay, 0s));
}
.cal-dow {
  animation: dayRowIn 0.32s ease-out backwards;
  animation-delay: 0.05s;
}
@keyframes dayRowIn {
  from { opacity: 0; transform: translateY(6px); }
}
/* Subtle dot under available date numbers (small — never fights the number) */
.cal-day.cal-available::before {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.8;
  transform: translateX(-50%);
  z-index: 0;
  transition: transform 0.15s, opacity 0.15s;
}
.cal-day.cal-available:hover { color: var(--orange-dark); }
.cal-day.cal-available:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1.3);
}
/* Ghost slab on hover — premium "this is interactive" cue */
.cal-day.cal-available::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(224, 122, 42, 0.08);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
  z-index: -1;
  border: 0 solid transparent;
}
.cal-day.cal-available:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cal-day.cal-available.cal-selected::after { opacity: 0; }
/* Today: persistent orange outline ring + bolder orange number.
   Selected-today drops the ring (the solid slab takes over). */
.cal-day.cal-today::after {
  background: transparent;
  border: 1.5px solid var(--orange);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cal-day.cal-today:hover::after {
  background: rgba(224, 122, 42, 0.10);
}
.cal-day.cal-today.cal-selected::after { opacity: 0; }
.cal-day.cal-today { color: var(--orange-dark); font-weight: 800; }
.cal-day.cal-today.cal-selected { color: #fff; }
/* Pulsing "live" dot for the earliest available date */
.cal-day.cal-earliest:not(.cal-selected)::before {
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(224, 122, 42, 0.55);
  animation: dotIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) backwards,
             earliestPulse 2.2s ease-in-out 0.6s infinite;
}
@keyframes earliestPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(224, 122, 42, 0.55);
  }
  50% {
    transform: translateX(-50%) scale(1.25);
    box-shadow: 0 0 0 5px rgba(224, 122, 42, 0);
  }
}
/* Selected: rounded slab (not circle) — premium "selection" feel */
.cal-day.cal-available.cal-selected::before,
.cal-day.cal-selected::before {
  bottom: auto;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--orange), #D86F22);
  opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgba(224, 122, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: selectPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cal-day.cal-available.cal-selected:hover::before,
.cal-day.cal-selected:hover::before {
  transform: translate(-50%, -50%);
  opacity: 1;
}
@keyframes selectPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  60% { transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cal-day.cal-selected,
.cal-day.cal-selected:hover {
  color: #fff;
  font-weight: 700;
}
.cal-num {
  line-height: 1;
  position: relative;
  z-index: 1;
}
.cal-dot { display: none; }
.cal-legend { display: none; }

.slots-pane {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--card-tint);
  padding: 28px 28px 24px;
  border-left: 1px solid var(--border-soft);
}
.slots-prompt {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 16px;
  font-size: 0.92rem;
  color: var(--text-muted);
  animation: fadeIn 0.3s ease-out;
}
.slots-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
  animation: slotSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.slots-date {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  animation: slotSlideIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.slots-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slots-list .slot-btn-block {
  animation: slotSlideIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--slot-delay, 0s);
}
@keyframes slotSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.slot-btn-block {
  width: 100%;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  border-radius: 14px;
}
.slot-time {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Floating EARLIEST badge — overlaps top-left of the slot button */
.slot-badge-inline {
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(224, 122, 42, 0.30);
  z-index: 2;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.slot-btn.selected .slot-badge-inline {
  color: var(--orange-dark);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.slots-pane-actions {
  margin-top: 22px;
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
  justify-content: stretch;
  animation: continueRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--continue-delay, 0.4s);
}
.slots-pane-actions .btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
}
@keyframes continueRise {
  0%   { opacity: 0; transform: translateY(15px) scale(1); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.trust-line {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.4;
  animation: fadeIn 0.4s ease-out backwards;
  animation-delay: var(--trust-delay, 1.1s);
}

@media (max-width: 760px) {
  .calendar-wrap { grid-template-columns: 1fr; }
  .slots-pane {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
    padding: 24px;
    min-height: 0;
  }
  .slots-prompt { padding: 40px 12px; }
  .step-panel[data-step="1"] { padding-top: 28px; }
  .step-panel[data-step="1"] > h2,
  .step-panel[data-step="1"] > p,
  .step-panel[data-step="1"] > .zip-field {
    margin-left: 24px;
    margin-right: 24px;
  }
  .cal-pane { padding: 24px; }
}

/* Legacy date-list (still used by tests / fallback) */
.date-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.date-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.date-label { font-weight: 600; color: var(--navy); }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.slot-btn:hover:not(.selected) {
  border-color: var(--orange);
  background: #FFFBF6;
  color: var(--orange-dark);
}
.slot-btn:active:not(:disabled) { transform: scale(0.98); }
/* Selected slot — same gradient + glow as the calendar slab */
.slot-btn.selected {
  background: linear-gradient(180deg, var(--orange), #D86F22);
  color: #fff;
  border: 1.5px solid var(--orange);
  box-shadow:
    0 0 0 3px rgba(224, 122, 42, 0.18),
    0 4px 14px rgba(224, 122, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: slotPop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes slotPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.date-row { animation: rowIn 0.4s ease-out backwards; }
.date-row:nth-child(1) { animation-delay: 0.02s; }
.date-row:nth-child(2) { animation-delay: 0.06s; }
.date-row:nth-child(3) { animation-delay: 0.10s; }
.date-row:nth-child(4) { animation-delay: 0.14s; }
.date-row:nth-child(5) { animation-delay: 0.18s; }
.date-row:nth-child(n+6) { animation-delay: 0.22s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Calendar-shaped loading state — feels alive while data fetches */
.calendar-loading { animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cal-title-skeleton {
  width: 130px;
  height: 16px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  animation: titleBreathe 1.6s ease-in-out infinite;
}
@keyframes titleBreathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Skeleton cells — quiet, no orange pulse. Just a soft fade-in that matches
   the look of unavailable date cells, so the swap to the real calendar
   feels like numbers being drawn over the same grid. */
.cal-skeleton-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: skeletonDot 1.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.cal-skeleton-cell::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.16);
}
@keyframes skeletonDot {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.slots-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.18s ease-out;
}
.slots-loading-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.ld-dot {
  display: inline-block;
  margin-left: 1px;
  opacity: 0.2;
  animation: dotFade 1.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes dotFade {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}
.slots-skeleton-bar {
  height: 50px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  animation: barEnter 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) backwards,
             barWave 1.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.4s);
}
@keyframes barEnter {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes barWave {
  0%, 100% { background: rgba(15, 23, 42, 0.05); }
  50% { background: rgba(224, 122, 42, 0.14); }
}

@media (max-width: 600px) {
  .date-row { grid-template-columns: 1fr; }
}

/* Alerts */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  font-size: 0.92rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  animation: alertIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.alert::before {
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.alert:empty { display: none; }
.alert[hidden] { display: none; }
.alert-error {
  background: var(--error-bg);
  color: var(--error);
  border-color: #FECACA;
}
.alert-error::before { content: '⚠'; }
.alert-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: #FCD34D;
}
.alert-warning::before { content: '⚠'; }
.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border-color: #BBF7D0;
}
.alert-success::before { content: '✓'; }
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Success */
.success-card { text-align: center; padding: 24px 8px; }
.success-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 24px;
  position: relative;
}
.success-mark svg { width: 100%; height: 100%; }
.success-mark .ring {
  fill: none;
  stroke: var(--success);
  stroke-width: 4;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: drawRing 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}
.success-mark .check {
  fill: none;
  stroke: var(--success);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}
@keyframes drawRing {
  to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}
.success-card h2 {
  color: var(--navy);
  margin-bottom: 12px;
  animation: fadeUp 0.5s ease-out 0.7s backwards;
}
.success-card p {
  animation: fadeUp 0.5s ease-out 0.85s backwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Auth pages — match the booking page warmth, premium card */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224, 122, 42, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(30, 41, 59, 0.04), transparent 60%),
    var(--bg);
  padding: 24px;
}
.auth-card {
  background: var(--card);
  padding: 40px 44px;
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 48px rgba(15, 23, 42, 0.08);
  animation: authIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-card-wide { max-width: 560px; }
@keyframes authIn {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.auth-brand img { display: block; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.auth-brand-text strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.auth-brand-text small {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}
.auth-card h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.018em;
}
.auth-card > p.muted { margin: 0 0 22px; }
.auth-card .field { margin-bottom: 16px; }
.auth-card .btn { margin-top: 12px; }

/* Storage diagnostic banner on setup */
.storage-banner {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  margin: 4px 0 22px;
  border: 1px solid var(--border-soft);
}
.storage-banner.storage-ok {
  background: #ECFDF3;
  border-color: #BBF7D0;
  color: #14532D;
}
.storage-banner.storage-warn {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #78350F;
}
.storage-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}
.storage-ok .storage-icon { color: var(--success); }
.storage-warn .storage-icon { color: var(--warning-text); }
.storage-body { flex: 1; min-width: 0; }
.storage-body strong { display: block; font-size: 0.95rem; }
.storage-body p { margin: 2px 0 0; }
.storage-body code {
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 5px;
  border-radius: 4px;
}
.kv.compact li { padding: 4px 0; font-size: 0.8rem; border: 0; }
.kv.compact { margin: 8px 0 0; }

/* Admin */
.admin-body { background: var(--bg); }
.admin-page { padding: 36px 24px 120px; }

/* ───── Admin shell — left rail + main content ───── */
.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 80px);
}
.admin-nav {
  position: sticky;
  top: 0;
  padding: 22px 16px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--border-soft);
}

/* Location switcher (top of nav) */
.loc-switcher {
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loc-current {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-current .badge { font-size: 0.6rem; }
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.loc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.loc-item:hover { background: rgba(255,255,255,0.7); color: var(--text); text-decoration: none; }
.loc-item.is-current { background: #fff; color: var(--text); font-weight: 600; }
.loc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
  opacity: 0.4;
}
.loc-item.is-current .loc-dot { opacity: 1; }
.loc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.loc-add {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.loc-add input {
  flex: 1;
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
.loc-add input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(245,133,54,0.15); }
.loc-add .btn-sm { padding: 6px 10px; font-size: 0.82rem; }

/* Map preview */
.map-preview {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-tint);
}
.map-preview img { display: block; width: 100%; height: auto; }

/* Globals save bar — slightly different visual to make distinction obvious */
.globals-save-bar { background: rgba(255, 251, 240, 0.95); }
.globals-save-bar .btn-primary { background: var(--navy); }
.globals-save-bar .btn-primary:hover { background: var(--navy-dark); }
.admin-nav-section { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 12px 6px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-nav-item:hover {
  background: var(--card-tint);
  text-decoration: none;
}
.admin-nav-item.is-active {
  background: var(--card);
  border-color: var(--border-soft);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-nav-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.admin-nav-item.is-active .admin-nav-icon { color: var(--orange); }
.admin-nav-icon svg { width: 100%; height: 100%; }
.admin-nav-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(224,122,42,0.5);
  animation: navDotPulse 2.4s ease-in-out infinite;
}
@keyframes navDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,122,42,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(224,122,42,0); }
}

/* Main column */
.admin-content {
  padding: 32px 36px 120px;
  min-width: 0;
}

/* Section pages — only one visible at a time */
.section-page { display: none; animation: sectionIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.section-page.is-visible { display: block; }
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.018em;
}
.section-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Two-column form rows — Stripe/Linear style */
.form-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.form-card .subhead {
  padding: 18px 24px 0;
  margin: 0 0 4px;
}
.form-card > .form-card-intro,
.form-card > p.muted {
  padding: 0 24px;
  margin: 0 0 12px;
}
.form-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 32px;
  padding: 18px 24px;
  border-top: 1px solid var(--border-soft);
  align-items: start;
}
.form-row:first-child { border-top: 0; }
.form-row-label { display: flex; flex-direction: column; gap: 2px; }
.form-row-label strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-row-label p.muted { margin: 0; line-height: 1.45; }
.form-row-control { display: flex; flex-direction: column; gap: 4px; }
.form-row-control input[type="text"],
.form-row-control input[type="number"],
.form-row-control input[type="password"],
.form-row-control textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.form-row-control input:focus,
.form-row-control textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224, 122, 42, 0.16);
}
.form-row-narrow input { max-width: 140px; }
.form-row-control-end { align-items: flex-end; flex-direction: row; justify-content: flex-end; }

/* Help tip — small (?) bubble next to label */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card-tint);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: help;
  border: 1px solid var(--border);
}
.help-tip:hover { background: var(--orange-soft); color: var(--orange-dark); border-color: rgba(224,122,42,0.3); }

/* iOS-style switch (replaces toggle-row) */
.ios-switch { position: relative; cursor: pointer; display: inline-block; }
.ios-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ios-switch-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #D1D1D6;
  position: relative;
  transition: background 0.22s ease;
}
.ios-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ios-switch input:checked ~ .ios-switch-track { background: var(--orange); }
.ios-switch input:checked ~ .ios-switch-track .ios-switch-thumb { transform: translateX(18px); }

/* Health checklist */
.health-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.health-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: border-color 0.18s;
}
.health-item:hover { border-color: var(--border); }
.health-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.health-ok .health-dot { background: var(--success-bg); color: var(--success); }
.health-warn .health-dot { background: var(--warning-bg); color: var(--warning-text); }
.health-info .health-dot { background: var(--orange-soft); color: var(--orange-dark); }
.health-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.health-detail { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.health-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  white-space: nowrap;
  text-decoration: none;
}
.health-action:hover { color: var(--orange); text-decoration: none; }

/* Overview cards row */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.overview-card { padding: 20px 22px; }
@media (max-width: 780px) {
  .overview-grid { grid-template-columns: 1fr; }
}

/* Empty state */
.empty-state {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 18px;
}
.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  color: var(--text-muted);
  border-radius: 16px;
}
.empty-icon svg { width: 28px; height: 28px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 1.05rem; }
.empty-state p { margin: 0 0 16px; }

/* Smart suggestion card */
.suggestion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--orange-soft);
  border: 1px solid rgba(224,122,42,0.22);
  border-radius: 12px;
  margin: 16px 24px;
  font-size: 0.9rem;
}
.suggestion-ok {
  background: var(--success-bg);
  border-color: #BBF7D0;
}
.suggestion-ok strong { color: var(--success); }
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.18s, background 0.18s;
  margin-bottom: 6px;
}
.radio-row:hover { border-color: var(--orange); }
.radio-row:has(input:checked) {
  background: var(--orange-soft);
  border-color: var(--orange);
}
.radio-row input { accent-color: var(--orange); }

/* API key status rows */
.api-key-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 18px;
}
.api-key-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  align-items: start;
}
.api-key-row.is-ok { background: var(--success-bg); border-color: #BBF7D0; }
.api-key-row.is-warn { background: var(--warning-bg); border-color: #FCD34D; }
.api-key-row.is-info { background: var(--card-tint); border-color: var(--border-soft); }
.api-key-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.api-key-row.is-ok .api-key-icon { color: var(--success); }
.api-key-row.is-warn .api-key-icon { color: var(--warning-text); }
.api-key-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.api-key-name code {
  font-size: 0.78rem;
  background: rgba(255,255,255,0.55);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
}
.api-key-body p { margin: 4px 0 0; }
.suggestion-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.suggestion strong { color: var(--orange-dark); display: block; }
.suggestion p { margin: 2px 0 0; }

/* Tech pills + avatars */
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-soft);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.tech-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB572, var(--orange));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.tech-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.tech-option:hover { border-color: var(--orange); }
.tech-option input { position: absolute; opacity: 0; pointer-events: none; }
.tech-option .tech-name { font-size: 0.9rem; font-weight: 500; color: var(--text); }
.tech-option.is-checked {
  background: var(--orange-soft);
  border-color: var(--orange);
}
.tech-option.is-checked .tech-name { color: var(--orange-dark); font-weight: 600; }

/* Saved toast */
.saved-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(15,23,42,0.18);
  animation: toastIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.saved-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.4s, transform 0.4s;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Calendar audit */
.audit-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audit-controls input[type="text"] {
  width: 140px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.audit-controls input[type="number"] { width: 80px; }
.audit-summary {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.audit-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.audit-day {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.audit-day.is-closed { background: var(--card-tint); opacity: 0.85; }
.audit-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
.audit-stat {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.audit-stat-full { background: var(--success-bg); color: var(--success); }
.audit-stat-partial { background: var(--warning-bg); color: var(--warning-text); }
.audit-stat-empty { background: var(--error-bg); color: var(--error); }
.audit-stat-closed { background: var(--card-tint); color: var(--text-muted); border: 1px solid var(--border-soft); }
.audit-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.audit-slot {
  display: grid;
  grid-template-columns: 100px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
}
.audit-slot.is-empty { background: #FFF8F8; border-color: #FECACA; }
.audit-slot.is-toosoon { background: var(--card-tint); opacity: 0.7; }
.audit-slot-time {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.audit-slot-counts {
  display: flex;
  gap: 6px;
}
.audit-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.audit-count-free { background: var(--success-bg); color: var(--success); }
.audit-count-busy { background: var(--card-tint); color: var(--text-muted); }
.audit-slot-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.audit-tech {
  display: inline-flex;
  cursor: help;
  position: relative;
}
.audit-tech .tech-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.66rem;
  border: 1.5px solid transparent;
}
.audit-tech-free .tech-avatar { border-color: var(--success); }
.audit-tech-busy .tech-avatar {
  background: linear-gradient(135deg, #BFBFBF, #8E8E8E);
  border-color: #DDD;
  opacity: 0.55;
}
.audit-reason {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 700px) {
  .audit-slot { grid-template-columns: 1fr; }
  .audit-controls { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav {
    position: relative;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 16px;
  }
  .admin-nav-section { flex-direction: row; }
  .admin-nav-eyebrow { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .admin-content { padding: 24px 20px 100px; }
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn-ghost {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}
.header-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.header-actions form { margin: 0; }
.btn-sm { font-size: 0.85rem; padding: 8px 16px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.18);
}
.status-pill.status-ok { color: #B7F0CB; }
.status-pill.status-error { color: #FFC4C4; }

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.stat-card:hover { border-color: #D6D0C2; }
.stat-row .stat-card:nth-child(1) { animation-delay: 0.02s; }
.stat-row .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-row .stat-card:nth-child(3) { animation-delay: 0.14s; }
.stat-row .stat-card:nth-child(4) { animation-delay: 0.20s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-radius: 12px;
  flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; display: block; }
.stat-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
  line-height: 1;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--navy);
  font-weight: 600;
  margin-top: 4px;
}
.stat-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stat-row { grid-template-columns: 1fr; } }

/* Layout */
.admin-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.admin-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.admin-main { display: flex; flex-direction: column; gap: 20px; }
.admin-main > form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
@media (max-width: 1000px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
}

/* Card */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 28px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.admin-main > form > .card:nth-of-type(1) { animation-delay: 0.06s; }
.admin-main > form > .card:nth-of-type(2) { animation-delay: 0.12s; }
.admin-main > form > .card:nth-of-type(3) { animation-delay: 0.18s; }
.admin-main > form > .card:nth-of-type(4) { animation-delay: 0.24s; }
.admin-main > form > .card:nth-of-type(5) { animation-delay: 0.30s; }
.admin-sidebar > .card:nth-of-type(1) { animation-delay: 0.04s; }
.admin-sidebar > .card:nth-of-type(2) { animation-delay: 0.10s; }
.admin-sidebar > .card:nth-of-type(3) { animation-delay: 0.16s; }
.card-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.subhead {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-tint);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
}
.badge-success { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.badge-warning { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.badge-error { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }

/* Sidebar bits */
.diag-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.diag-link::before {
  content: '→';
  color: var(--orange);
  font-weight: 700;
  transition: transform 0.2s;
}
.diag-link:hover {
  background: var(--card-tint);
  border-color: var(--border-soft);
  text-decoration: none;
}
.diag-link:hover::before { transform: translateX(3px); }
.summary-link {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--orange-dark);
  padding: 6px 0;
  font-weight: 600;
}
.summary-link:hover { color: var(--orange); }
.small { font-size: 0.85rem; }

/* Day pills */
.day-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.day-pill { cursor: pointer; }
.day-pill input { display: none; }
.day-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28),
              background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.day-pill:hover span {
  border-color: var(--orange);
  color: var(--orange-dark);
}
.day-pill input:checked + span {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.day-pill:active span { transform: scale(0.96); }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.toggle-row:hover { border-color: #D6D0C2; background: #F6F1E8; }
.toggle { position: relative; flex-shrink: 0; margin-top: 2px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #CCCCCC;
  border-radius: 999px;
  transition: background 0.2s;
  position: relative;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.toggle input:checked ~ .toggle-track { background: var(--orange); }
.toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { display: flex; flex-direction: column; line-height: 1.3; }
.toggle-label small { margin-top: 2px; font-weight: 400; }

/* Tag input */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  min-height: 48px;
  align-items: center;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.tag-input:hover:not(:focus-within) { border-color: #C9C2B5; }
.tag-input:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 133, 54, 0.18);
}
.tag-input input[type="text"] {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 180px;
  padding: 4px 6px;
  font-size: 0.92rem;
  font-family: inherit;
  background: transparent;
  color: var(--navy);
}
.tag-input input[type="text"]::placeholder { color: #B4ADA0; }
.tag-input .chip-list { display: contents; }
.shake { animation: shake 0.35s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: chipIn 0.2s ease-out;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.chip-static {
  background: var(--cream);
  color: var(--text);
  border: 1px solid var(--border);
}
.chip-removable button {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0 0 4px;
  transition: color 0.15s;
}
.chip-removable button:hover { color: #fff; }
.chip-tech {
  background: #FFF6EE;
  color: var(--orange-dark);
  border: 1px solid #FFD9B8;
  font-weight: 600;
}

/* Zone cards */
.zone-grid { display: grid; gap: 14px; }
.zone-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--card-tint);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.zone-card:hover {
  border-color: #D6D0C2;
  background: #FFFEFA;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.zone-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.zone-card-head strong { color: var(--navy); font-size: 1rem; }
.zone-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.zone-pros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Service toggles */
.service-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.service-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.service-toggle:hover { border-color: var(--orange); background: #FFFBF6; }
.service-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.service-toggle-name { font-weight: 500; color: var(--text); font-size: 0.92rem; }
.service-toggle-state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.service-toggle-state::before {
  content: 'Shown';
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--success);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--success-bg);
}
.service-toggle.is-hidden { background: var(--card-tint); border-style: dashed; }

/* Service-override editors (admin) */
.service-overrides {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.service-override {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.service-override.is-hidden { background: var(--card-tint); opacity: 0.7; }
.service-override-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.service-override-hcp {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.service-toggle.is-hidden .service-toggle-name {
  color: var(--text-muted);
  text-decoration: line-through;
}
.service-toggle.is-hidden .service-toggle-state::before {
  content: 'Hidden';
  color: var(--text-muted);
  background: var(--cream);
}

/* Employee chips */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.employee-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  font-size: 0.9rem;
  font-weight: 500;
}
.employee-chip:hover { border-color: var(--orange); background: #FFFBF6; }
.employee-chip:has(input:checked) {
  background: #FFF7ED;
  border-color: var(--orange);
}
.employee-chip input { position: absolute; opacity: 0; pointer-events: none; }
.employee-chip span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.15s;
}
.employee-chip input:checked + span {
  color: var(--orange-dark);
}
.employee-chip input:checked + span::before {
  background: var(--orange) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.5 12L2 7.5l1.5-1.5L6.5 9 12.5 3l1.5 1.5z"/></svg>') center/12px no-repeat;
  border-color: var(--orange);
}

/* KV list */
.kv { list-style: none; padding: 0; margin: 0 0 14px; font-size: 0.88rem; }
.kv li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv li:last-child { border-bottom: 0; }
.kv-k {
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  /* let labels shrink + wrap rather than push the value off-screen */
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
}
.kv-v {
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* values can wrap to a second line under the key on narrow viewports */
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  flex: 0 1 auto;
}

/* Google API diagnostic — constrain widths and let long status lines wrap
   instead of pushing the layout sideways. */
#google-diagnose-result {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#google-diagnose-result h4 {
  margin: 14px 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}
#google-diagnose-result h4 .muted {
  font-weight: 400;
}
#google-diagnose-result code { word-break: break-all; }
#google-diagnose-result > div {
  max-width: 100%;
}
#google-diagnose-result a { color: var(--orange-dark); }

/* Misc */
.link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-tint);
  border: 1px solid var(--border-soft);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin-top: 10px;
}
.link-box code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.78rem;
}
.codeblock {
  background: var(--navy-dark);
  color: #DFE8F5;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

.mt-sm { margin-top: 8px; }
.mt-lg { margin-top: 24px; }

/* Save bar */
.save-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 8px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.save-bar .btn-primary { padding: 10px 22px; }

select[multiple] { padding: 8px; min-height: 140px; }
textarea { font-family: inherit; resize: vertical; }

/* Stepper line connector */
.stepper { position: relative; }
.stepper .step { position: relative; z-index: 1; transition: all 0.25s; }
.stepper .step.done { animation: stepDone 0.4s ease-out; }
@keyframes stepDone {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Inline field errors (replace popup/toast for validation) */
.field-error {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--error);
  font-weight: 500;
  animation: fieldErrorIn 0.25s ease-out;
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.field input.has-error,
.field textarea.has-error,
input.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
  animation: fieldShake 0.35s ease-in-out;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}