:root {
  --primary: #ef3957;
  --primary-hover: #de2947;
  --secondary: #27a387;
  --orange: #ee620b;
  --text: #2a323d;
  --muted: #68717d;
  --light: #f5f6f9;
  --white: #ffffff;
  --border: #d9e0ec;
  --dark: #222e3c;
  --blue: #087cff;
  --pink-soft: #fee8ec;
  --green-soft: #e8fffa;
  --shadow: 0 24px 70px rgba(34, 46, 60, .16);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--light); color: var(--text); font: 400 16px/1.55 "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(44px, 5.6vw, 78px); line-height: 1.02; letter-spacing: 0; }
h2 { margin-bottom: 14px; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: 0; }
h3 { margin-bottom: 8px; font-size: 24px; line-height: 1.18; letter-spacing: 0; }
.wrap { width: min(1220px, calc(100% - 32px)); margin: 0 auto; }
.muted { color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 14px; padding: 0 10px; border-radius: 5px; background: rgba(255,255,255,.18); color: inherit; font-size: 13px; font-weight: 700; }
.eyebrow.light { background: var(--pink-soft); color: var(--primary-hover); }
.btn, .chip, .slot, .tool-btn { min-height: 44px; border: 2px solid transparent; border-radius: 5px; font-weight: 700; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.btn:hover, .chip:hover, .slot:hover, .tool-btn:hover { transform: scale(.98); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .72em 1.2em; background: var(--primary); color: var(--white); white-space: nowrap; }
.btn:hover { background: var(--primary-hover); }
.btn-dark { background: var(--text); color: var(--white); }
.btn-white { background: var(--white); color: var(--primary); }
.btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 5px; background: var(--light); color: var(--muted); font-size: 12px; font-weight: 700; }
.tag.good { background: var(--green-soft); color: var(--secondary); }
.tag.hot { background: var(--pink-soft); color: var(--primary-hover); }
.stars { color: var(--primary); font-weight: 700; }

.site-header { position: sticky; top: 0; z-index: 30; background: var(--primary); color: var(--white); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 25px; font-weight: 700; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 5px; background: var(--white); color: var(--primary); }
.navlinks, .nav-actions { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.94); font-size: 15px; font-weight: 700; }
.navlinks a.active { color: var(--white); text-decoration: underline; text-underline-offset: 7px; }

.hero-wrap { position: relative; overflow: hidden; background: var(--primary); color: var(--white); }
.hero-wrap::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -68px; height: 140px; border-radius: 50% 50% 0 0; background: var(--light); }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.46fr) minmax(520px,.54fr); gap: 34px; align-items: start; min-height: 760px; padding: 62px 0 96px; }
.hero p { max-width: 680px; color: rgba(255,255,255,.92); font-size: 20px; }
.hero-search { margin-top: 26px; padding: 12px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow); color: var(--text); }
.search-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr auto; gap: 10px; align-items: end; }
label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
input, select, textarea { width: 100%; min-height: 46px; border: 2px solid var(--border); border-radius: 5px; background: var(--white); color: var(--text); padding: 0 12px; outline: none; }
textarea { padding: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }

.device-stage { position: relative; min-height: 650px; overflow: visible; }
.showcase-phone { position: absolute; right: -72px; top: 74px; width: min(660px,58vw); min-height: 760px; border: 14px solid #f8f9fc; border-radius: 42px; background: #fff; color: var(--text); box-shadow: 0 34px 90px rgba(34,46,60,.22); transform: rotate(17deg); overflow: hidden; }
.showcase-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 68px; height: 7px; border-radius: 99px; background: #eef1f6; transform: translateX(-50%); z-index: 3; }
.showcase-map, .map-canvas { position: relative; min-height: 410px; background: linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px), linear-gradient(0deg,rgba(255,255,255,.55) 1px,transparent 1px), #f3efe8; background-size: 44px 44px; overflow: hidden; }
.showcase-road { position: absolute; height: 18px; background: #f8c569; opacity: .68; border-radius: 99px; transform: rotate(-18deg); }
.showcase-road.one { left: -30px; right: 80px; top: 155px; }
.showcase-road.two { left: 140px; right: -60px; top: 248px; transform: rotate(13deg); }
.showcase-park { position: absolute; right: 26px; top: 42px; width: 86px; height: 112px; border-radius: 18px; background: #bce5ad; }
.showcase-user { position: absolute; left: 50%; top: 48%; width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: #1684ff; box-shadow: 0 0 0 14px rgba(22,132,255,.13); }
.map-drop, .map-pin { position: absolute; display: grid; place-items: center; border: 0; color: #fff; box-shadow: 0 12px 22px rgba(34,46,60,.18); }
.map-drop { width: 46px; height: 46px; border-radius: 50% 50% 50% 8px; background: #344154; transform: rotate(-45deg); }
.map-drop span { width: 13px; height: 13px; border: 4px solid #fff; border-radius: 50%; transform: rotate(45deg); }
.map-drop.hot { background: var(--primary); }
.drop-a { left: 34%; top: 44%; } .drop-b { left: 55%; top: 38%; } .drop-c { left: 66%; top: 54%; } .drop-d { left: 42%; top: 66%; } .drop-e { left: 78%; top: 72%; }
.floating-map-tools { position: absolute; right: 110px; top: 365px; display: flex; gap: 10px; z-index: 4; }
.floating-map-tools button, .map-tool { min-height: 44px; border: 0; border-radius: 24px; padding: 0 15px; background: var(--dark); color: #fff; font-weight: 700; box-shadow: 0 12px 26px rgba(34,46,60,.24); }
.phone-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); padding: 12px 10px 16px; border-top: 1px solid var(--border); background: #fff; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.phone-tabs span.active { color: var(--primary); }
.showcase-cards { display: flex; gap: 14px; padding: 18px; transform: translateY(-18px); }
.showcase-salon { min-width: 190px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 12px 26px rgba(34,46,60,.13); overflow: hidden; }
.showcase-salon-img { height: 108px; background: url('hero-dog-grooming.png') center/cover, linear-gradient(135deg,#dffbff,#fee8ec); }
.showcase-salon-body { padding: 11px; }

.section { padding: 72px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-hero { padding: 68px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(280px,.2fr); gap: 22px; align-items: end; }
body[data-page="search"] .page-hero { padding: 30px 0; }
body[data-page="search"] .page-hero h1 { max-width: 780px; margin-bottom: 10px; font-size: clamp(38px,4.2vw,58px); }
body[data-page="search"] .section { padding-top: 34px; }
.app-shell { display: grid; grid-template-columns: 300px minmax(0,1fr) 330px; gap: 18px; align-items: start; }
.marketplace-shell { display: grid; gap: 18px; }
.search-filter-bar { padding: 18px; }
.filter-bar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.filter-bar-head h3 { margin: 0 0 4px; font-size: 24px; }
.search-filter-grid { grid-template-columns: repeat(6,minmax(0,1fr)); align-items: end; }
.search-filter-grid .wide { grid-column: span 2; }
.market-toggles { grid-column: span 4; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.market-toggles .switch-row { min-height: 50px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--light); }
.search-filter-grid .range-line { grid-column: span 2; display: flex; align-items: end; gap: 12px; }
.search-filter-grid .filter-actions { grid-column: span 2; align-self: end; margin-top: 0; }
.market-results-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; }
.market-side { position: sticky; top: 92px; }
.card-link-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.panel, .result-card, .profile-card, .plan, .faq-item, .metric-card { border: 1px solid var(--border); border-radius: 8px; background: var(--white); box-shadow: 0 12px 32px rgba(34,46,60,.06); }
.panel { padding: 18px; }
.app-shell > aside.panel, .side-stack { position: sticky; top: 92px; }
.filter-stack { display: grid; gap: 12px; }
.filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-weight: 700; }
.switch-row input { width: 20px; min-height: 20px; }
.chip-row, .pill-line { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 0 12px; background: var(--white); border-color: var(--border); color: var(--text); }
.chip.active { background: var(--text); color: var(--white); border-color: var(--text); }
.results-top, .map-head, .result-top, .screen-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.map-panel { margin-top: 14px; margin-bottom: 14px; overflow: hidden; }
.map-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.map-canvas { min-height: 300px; background-color: #e8edf5; }
.map-route { position: absolute; inset: 16% 12%; border: 3px solid rgba(42,50,61,.12); border-left: 0; border-bottom: 0; border-radius: 50%; transform: rotate(-12deg); }
.map-river { position: absolute; left: -10%; right: -10%; top: 52%; height: 34px; background: rgba(8,124,255,.14); transform: rotate(-8deg); }
.map-pin { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); min-width: 136px; gap: 3px; padding: 9px 10px; border-radius: 8px; background: var(--white); color: var(--text); text-align: left; transform: translate(-50%, -50%); }
.map-pin strong, .map-pin span { position: relative; z-index: 1; }
.map-pin span { color: var(--muted); font-size: 12px; font-weight: 700; }
.map-pin.active { background: var(--primary); color: var(--white); }
.map-pin.active span { color: rgba(255,255,255,.8); }
.map-tools { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.results { display: grid; gap: 14px; }
.result-card { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px; }
.market-card { grid-template-columns: 220px 1fr; padding: 16px; }
.result-top h3 a { color: var(--text); }
.result-card.is-focused { border-color: var(--primary); box-shadow: 0 0 0 3px var(--pink-soft), 0 12px 32px rgba(34,46,60,.06); }
.result-photo { min-height: 150px; border-radius: 7px; background: linear-gradient(135deg,#fee8ec,#27a387); background-size: cover; background-position: center; }
.meta-line { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.heart { width: 44px; min-width: 44px; min-height: 44px; border: 0; border-radius: 5px; background: var(--pink-soft); color: var(--primary); font-size: 22px; }
.heart.saved { background: var(--primary); color: var(--white); }
.card-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 14px; }
.quick-book { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--pink-soft); }
.quick-book div { display: grid; gap: 2px; }
.quick-book span { color: var(--muted); font-size: 13px; font-weight: 700; }
.slot-row { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { min-height: 38px; padding: 0 10px; background: var(--light); border-color: var(--border); color: var(--text); }
.slot.active { background: var(--green-soft); border-color: var(--secondary); color: var(--secondary); }
.booking-form, .review-form, .review-breakdown, .date-planner, .filter-drawer { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--light); }
.review-breakdown, .date-planner, .filter-drawer { background: var(--white); border: 1px solid var(--border); }
.booking-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 10px; }
.review-bars, .booking-list, .side-stack, .auth-form { display: grid; gap: 10px; }
.review-bar { display: grid; grid-template-columns: 92px 1fr 40px; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.bar-track { height: 8px; border-radius: 99px; background: var(--light); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--primary); }
.pet-options, .date-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.pet-option { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 92px; padding: 10px 8px; border: 2px solid var(--border); border-radius: 8px; background: var(--white); font-size: 12px; font-weight: 700; text-align: center; }
.pet-option input { position: absolute; opacity: 0; pointer-events: none; }
.pet-face { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--pink-soft); color: var(--primary); font-size: 20px; }
.pet-option:has(input:checked) { border-color: #47d63a; box-shadow: 0 0 0 3px rgba(71,214,58,.16); }
.date-cell { min-height: 54px; border: 1px solid var(--border); border-radius: 7px; background: var(--light); color: var(--text); font-weight: 700; }
.date-cell span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.map-market-body { background: #f4f6fa; }
.map-market-body .site-header { position: sticky; top: 0; z-index: 30; }
.map-market-page { min-height: 100vh; padding-bottom: 42px; }
.map-explorer { position: relative; min-height: 640px; background: #f3efe7; overflow: hidden; border-bottom: 1px solid var(--border); }
.map-hero-canvas { position: absolute; inset: 0; min-height: 640px; background:
  linear-gradient(90deg, rgba(232,225,211,.72) 1px, transparent 1px),
  linear-gradient(0deg, rgba(232,225,211,.72) 1px, transparent 1px),
  #f7f2e9; background-position: var(--map-pan-x,0px) var(--map-pan-y,0px), var(--map-pan-x,0px) var(--map-pan-y,0px), 0 0; background-size: 76px 76px; cursor: grab; touch-action: none; user-select: none; }
.map-hero-canvas.is-dragging { cursor: grabbing; }
.real-map-canvas { position: absolute; inset: 0; z-index: 1; display: none; background: #e7ecf1; }
.map-hero-canvas.has-real-map { cursor: auto; touch-action: auto; }
.map-hero-canvas.has-real-map .real-map-canvas { display: block; }
.map-hero-canvas.has-real-map .map-pan-layer { display: none; }
.real-map-canvas .leaflet-control-container { font-family: "DM Sans", sans-serif; }
.real-map-canvas .leaflet-control-attribution { font-size: 10px; }
.map-loading-note { position: absolute; left: 50%; top: 50%; display: grid; gap: 4px; padding: 16px 18px; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--text); box-shadow: 0 18px 38px rgba(42,50,61,.16); transform: translate(-50%,-50%); text-align: center; }
.map-loading-note span, .google-map-popup span { display: block; margin-top: 3px; color: #6c7480; font-size: 12px; font-weight: 700; }
.google-map-popup { font-family: "DM Sans", sans-serif; }
.google-map-popup strong { display: block; font-size: 14px; }
.kailo-map-pin { display: grid; width: 38px; height: 38px; place-items: center; border: 4px solid #fff; border-radius: 50% 50% 50% 8px; background: #344154; box-shadow: 0 12px 24px rgba(34,46,60,.25); transform: rotate(-45deg); }
.kailo-map-pin::after { content:""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.kailo-map-pin.active { width: 44px; height: 44px; background: var(--primary); }
.kailo-map-popup .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 18px 38px rgba(42,50,61,.18); }
.kailo-map-popup .leaflet-popup-content { margin: 12px 14px; font-family: "DM Sans", sans-serif; }
.kailo-map-popup strong, .kailo-map-popup span { display: block; }
.kailo-map-popup span { margin-top: 3px; color: #6c7480; font-size: 12px; font-weight: 700; }
.map-pan-layer { position: absolute; inset: 0; transform: translate(var(--map-pan-x,0px), var(--map-pan-y,0px)); will-change: transform; }
.map-hero-canvas::before { content:""; position: absolute; inset: -10%; background:
  linear-gradient(28deg, transparent 0 37%, rgba(235,154,54,.45) 38% 39.1%, #fff9ec 39.2% 40.4%, rgba(235,154,54,.45) 40.5% 41.3%, transparent 42%),
  linear-gradient(-18deg, transparent 0 52%, rgba(235,154,54,.36) 53% 54.1%, #fff9ec 54.2% 55.3%, rgba(235,154,54,.36) 55.4% 56.1%, transparent 57%),
  linear-gradient(88deg, transparent 0 22%, rgba(207,198,181,.5) 23% 23.4%, transparent 24%),
  radial-gradient(ellipse at 71% 22%, rgba(134,206,151,.34), transparent 19%),
  radial-gradient(ellipse at 18% 70%, rgba(134,206,151,.28), transparent 24%),
  radial-gradient(ellipse at 54% 52%, rgba(105,172,255,.12), transparent 14%); opacity: .95; }
.lt-map-outline { position: absolute; right: 5%; top: 7%; width: 340px; height: 245px; opacity: .72; clip-path: polygon(25% 13%, 45% 5%, 66% 14%, 82% 31%, 77% 48%, 91% 63%, 73% 76%, 55% 88%, 35% 80%, 20% 92%, 9% 73%, 15% 52%, 6% 34%); background: linear-gradient(135deg, rgba(211,231,216,.78), rgba(246,239,221,.82)); border: 2px solid rgba(39,163,135,.25); box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }
.lt-city { position: absolute; color: rgba(42,50,61,.48); font-size: 11px; font-weight: 700; }
.lt-city.vilnius { right: 18%; bottom: 21%; color: var(--primary); }
.lt-city.kaunas { left: 45%; bottom: 37%; }
.lt-city.klaipeda { left: 9%; top: 43%; }
.lt-city.siauliai { left: 38%; top: 25%; }
.lt-city.panevezys { left: 54%; top: 32%; }
.map-hero-canvas .map-route { inset: 12% 14%; border-color: rgba(199,143,68,.24); border-width: 6px; }
.map-hero-canvas .map-river { top: 53%; height: 48px; background: rgba(83,159,238,.18); border-block: 1px solid rgba(83,159,238,.12); }
.map-street { position: absolute; left: -8%; right: -8%; height: 16px; border-block: 1px solid rgba(199,143,68,.28); background: #fff8eb; box-shadow: 0 0 0 3px rgba(255,255,255,.48); }
.map-street.s1 { top: 20%; transform: rotate(-13deg); }
.map-street.s2 { top: 42%; transform: rotate(8deg); }
.map-street.s3 { top: 73%; transform: rotate(-5deg); }
.map-street.s4 { top: 34%; transform: rotate(29deg); }
.map-street.s5 { top: 61%; transform: rotate(-31deg); }
.map-green-zone { position: absolute; display: grid; place-items: center; min-width: 135px; min-height: 58px; padding: 8px 14px; border-radius: 40px; background: rgba(119,197,137,.32); color: rgba(42,91,56,.58); font-size: 12px; font-weight: 700; transform: rotate(-10deg); }
.map-green-zone.g1 { left: 10%; top: 58%; }
.map-green-zone.g2 { right: 17%; top: 28%; min-width: 120px; }
.map-neighbourhood { position: absolute; color: rgba(42,50,61,.42); font-size: 12px; font-weight: 700; transform: rotate(-11deg); text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.map-neighbourhood.n1 { left: 18%; top: 21%; }
.map-neighbourhood.n2 { left: 55%; top: 41%; }
.map-neighbourhood.n3 { left: 33%; top: 70%; }
.map-neighbourhood.n4 { left: 68%; top: 58%; transform: rotate(8deg); }
.map-neighbourhood.n5 { left: 42%; top: 36%; transform: rotate(-4deg); color: rgba(239,57,87,.48); }
.map-user-dot { position: absolute; left: 50%; top: 52%; width: 22px; height: 22px; border: 5px solid #fff; border-radius: 50%; background: #1677ff; box-shadow: 0 0 0 16px rgba(22,119,255,.14), 0 10px 20px rgba(22,119,255,.2); }
.map-market-body .map-pin { min-width: 0; width: 42px; height: 42px; padding: 0; border-radius: 50% 50% 50% 10px; background: #344154; color: transparent; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 16px 30px rgba(34,46,60,.24); z-index: 5; }
.map-market-body .map-pin::after { content:""; width: 12px; height: 12px; border: 4px solid #fff; border-radius: 50%; transform: rotate(45deg); }
.map-market-body .map-pin strong, .map-market-body .map-pin span { display: none; }
.map-market-body .map-pin.active { width: 48px; height: 48px; background: var(--primary); }
.map-address-label { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 4; min-width: 154px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--text); text-align: left; box-shadow: 0 14px 28px rgba(42,50,61,.14); transform: translate(-50%, -50%); }
.map-address-label::after { content:""; position: absolute; left: 50%; bottom: -17px; width: 2px; height: 18px; background: rgba(42,50,61,.32); transform: rotate(18deg); transform-origin: top; }
.map-address-label strong, .map-address-label span { display: block; }
.map-address-label strong { font-size: 13px; line-height: 1.1; }
.map-address-label span { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.map-address-label.active { border-color: rgba(239,57,87,.5); box-shadow: 0 16px 34px rgba(239,57,87,.16); }
.map-overlay { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(260px,380px) minmax(0,1fr); gap: 18px; align-items: start; padding-top: 34px; }
.map-title-panel { display: none; padding: 22px; border-radius: 8px; background: rgba(239,57,87,.95); color: #fff; box-shadow: 0 22px 44px rgba(239,57,87,.24); }
.map-title-panel h1 { margin: 8px 0; font-size: clamp(34px,5vw,64px); line-height: .96; }
.map-title-panel p { margin: 0; color: rgba(255,255,255,.86); font-weight: 700; }
.map-filter-card { position: fixed; left: 50%; top: 50%; z-index: 81; display: none; width: min(920px,calc(100% - 32px)); max-height: calc(100vh - 64px); overflow: auto; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.72); border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 30px 90px rgba(42,50,61,.26); backdrop-filter: blur(16px); transform: translate(-50%,-50%); }
.map-market-page.filters-open::before { content:""; position: fixed; inset: 0; z-index: 70; background: rgba(31,42,56,.34); backdrop-filter: blur(3px); }
.map-market-page.filters-open .map-overlay { z-index: 80; pointer-events: auto; }
.map-market-page.filters-open .map-filter-card { display: grid; }
.map-filter-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.map-filter-pop-head strong, .map-filter-pop-head span { display: block; }
.map-filter-pop-head strong { font-size: 24px; }
.map-filter-pop-head span { color: var(--muted); font-size: 13px; font-weight: 700; }
.map-filter-main, .map-filter-more { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.map-filter-main .wide { grid-column: span 2; }
.map-filter-more .range-line { display: flex; align-items: end; gap: 10px; }
.map-toggle-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.map-toggle-row .switch-row { min-height: 46px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--light); }
.map-filter-actions { display: flex; justify-content: flex-end; gap: 10px; }
.map-pill-btn, .map-round-btn { min-height: 48px; border: 0; background: var(--dark); color: #fff; font-weight: 700; box-shadow: 0 14px 28px rgba(34,46,60,.18); }
.map-pill-btn { padding: 0 26px; border-radius: 28px; }
.map-round-btn { width: 48px; border-radius: 50%; font-size: 20px; }
.map-results-wrap { position: relative; z-index: 8; margin-top: -120px; }
.map-results-head { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; gap: 14px; align-items: center; margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 18px 36px rgba(42,50,61,.1); }
.map-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
.map-salon-card { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 18px 36px rgba(42,50,61,.09); }
.map-salon-card.is-focused { border-color: rgba(239,57,87,.5); box-shadow: 0 22px 46px rgba(239,57,87,.14); }
.map-card-photo { position: relative; display: block; min-height: 190px; background: var(--pink-soft) center/cover; }
.map-card-badge { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.map-card-badge.good { background: var(--secondary); }
.map-card-heart { position: absolute; right: 12px; bottom: -22px; display: grid; width: 52px; height: 52px; place-items: center; border: 0; border-radius: 8px; background: #ffe3ec; color: var(--primary); font-size: 26px; box-shadow: 0 10px 22px rgba(239,57,87,.18); }
.map-card-heart.saved { background: var(--primary); color: #fff; }
.map-card-body { display: grid; gap: 9px; padding: 16px; }
.map-card-status, .map-card-address, .map-card-rating { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.status-dot { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #77d64c; color: #fff; }
.map-card-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.map-card-title-row h3 { margin: 0; font-size: 25px; line-height: 1.05; }
.map-card-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.map-card-tags span { padding: 6px 9px; border-radius: 999px; background: var(--light); color: var(--muted); font-size: 12px; font-weight: 700; }
.map-card-book { display: grid; gap: 8px; margin-top: 4px; }
.map-card-book select { min-height: 42px; border: 1px solid var(--border); border-radius: 5px; padding: 0 10px; background: #fff; color: var(--text); font-weight: 700; }
.map-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-card-actions strong { font-size: 22px; }
.map-market-page.map-hidden .map-explorer { min-height: auto; }
.map-market-page.map-hidden .map-hero-canvas, .map-market-page.map-hidden .map-title-panel { display: none; }
.map-market-page.map-hidden .map-overlay { padding: 18px 0 0; grid-template-columns: 1fr; }
.map-market-page.map-hidden .map-results-wrap { margin-top: 18px; }
.map-floating-tools { position: relative; z-index: 12; display: flex; justify-content: center; gap: 12px; margin-top: -94px; margin-bottom: 18px; }
.map-bottom-nav { display: none; }
.salon-public-page { background: var(--light); }
.salon-profile-hero { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); min-height: 520px; background: #fff; }
.salon-profile-cover { min-height: 520px; background: linear-gradient(135deg,#fee8ec,#dff8f1); background-size: cover; background-position: center; }
.salon-profile-summary { display: grid; align-content: center; gap: 18px; padding: clamp(28px,5vw,64px); }
.back-link { width: max-content; font-weight: 700; }
.salon-profile-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.salon-profile-title h1 { margin: 8px 0 10px; font-size: clamp(42px,6vw,76px); line-height: .96; }
.salon-profile-title p { max-width: 620px; color: var(--muted); font-size: 18px; }
.salon-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.salon-profile-stats article { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.salon-profile-stats span, .salon-profile-stats small { display: block; color: var(--muted); font-weight: 700; }
.salon-profile-stats strong { display: block; margin: 4px 0; font-size: 22px; }
.salon-profile-layout { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 18px; width: min(1180px,calc(100% - 32px)); margin: 22px auto 48px; align-items: start; }
.salon-profile-main { display: grid; gap: 18px; }
.salon-gallery-panel { overflow: hidden; }
.salon-gallery { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: 148px; gap: 10px; margin-top: 14px; }
.gallery-tile { position: relative; display: grid; align-items: end; min-height: 148px; border: 0; border-radius: 8px; overflow: hidden; padding: 12px; background: linear-gradient(135deg,#fee8ec,#f7b5c2); background-size: cover; background-position: center; color: #fff; text-align: left; box-shadow: inset 0 -70px 80px rgba(31,42,56,.38); cursor: pointer; }
.gallery-tile.large { grid-row: span 2; min-height: 306px; }
.gallery-tile.teal { background: linear-gradient(135deg,#dff8f1,#27a387); }
.gallery-tile.warm { background: linear-gradient(135deg,#ffe4cb,#ee620b); }
.gallery-tile.violet { background: linear-gradient(135deg,#e9e1ff,#7a5cff); }
.gallery-tile.dark { background: linear-gradient(135deg,#5b6675,#1f2a38); }
.gallery-tile span { position: relative; z-index: 1; max-width: 180px; font-weight: 700; text-shadow: 0 1px 10px rgba(31,42,56,.32); }
.public-service-list { display: grid; gap: 8px; margin-top: 12px; }
.public-service-list div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.public-service-list span { color: var(--muted); font-weight: 700; }
.public-service-list b { color: var(--primary); }
.salon-booking-panel { position: sticky; top: 92px; }
.public-booking { background: transparent; padding: 0; }
.date-cell.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.pet-flags-picker { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.flag-picker, .pet-flag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.flag-option { cursor: pointer; }
.flag-option input { position: absolute; opacity: 0; pointer-events: none; }
.flag-option span, .pet-flag-list span { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); padding: 4px 10px; font-size: 13px; font-weight: 700; }
.flag-option input:checked + span, .pet-flag-list span:nth-child(2n) { border-color: var(--blue); background: var(--blue); color: #fff; }
.pet-flag-list span:nth-child(3n) { border-color: var(--primary); background: var(--pink-soft); color: var(--primary); }
.modal-flags { margin-top: 12px; }
.client-hero { overflow: hidden; padding: 54px 0 38px; background: var(--primary); color: #fff; }
.client-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 46px; align-items: center; }
.client-hero-copy h1 { max-width: 760px; margin: 10px 0 14px; color: #fff; font-size: clamp(46px,6vw,82px); line-height: .94; }
.client-hero-copy p { max-width: 640px; color: rgba(255,255,255,.82); font-size: 18px; font-weight: 700; }
.client-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.client-phone-preview { position: relative; display: grid; gap: 12px; min-height: 420px; padding: 24px; border: 12px solid #f8f9fc; border-radius: 36px; background: #fff; color: var(--text); box-shadow: 0 28px 80px rgba(31,42,56,.25); transform: rotate(6deg); }
.client-phone-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.client-phone-top span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; }
.client-phone-card, .client-phone-slot { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.client-phone-card small, .client-phone-slot span { display: block; color: var(--muted); font-weight: 700; }
.client-phone-card.muted { opacity: .8; }
.client-phone-slot { grid-template-columns: 1fr; margin-top: auto; background: var(--pink-soft); }
.client-dashboard { padding-top: 26px; }
.client-summary-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.client-summary-row .metric-card { padding: 18px; }
.client-summary-row .metric-card span, .client-summary-row .metric-card small { display: block; color: var(--muted); font-weight: 700; }
.client-summary-row .metric-card strong { display: block; margin: 6px 0; font-size: 30px; }
.client-main-grid { display: grid; grid-template-columns: minmax(260px,300px) minmax(0,1fr); gap: 28px; align-items: start; }
.client-sidebar { position: sticky; top: 92px; display: grid; gap: 12px; min-width: 0; }
.client-main-grid > .client-sidebar:last-child { grid-column: 1 / -1; position: static; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.client-main-grid > .client-sidebar:last-child .profile-card:last-child { grid-column: 1 / -1; }
.client-content { display: grid; gap: 18px; min-width: 0; }
.client-content .profile-card { min-width: 0; overflow: hidden; }
.client-content .profile-card h2 { font-size: clamp(30px,2.6vw,40px); line-height: 1.08; }
.client-owner-card { background: linear-gradient(135deg,#fff,#fff5f7); }
.upcoming-card { display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: var(--light); }
.upcoming-card h3 { margin: 4px 0 0; font-size: 28px; }
.pet-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.pet-profile-card { display: grid; grid-template-columns: 76px minmax(0,1fr) minmax(160px,220px) 170px; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(34,46,60,.06); }
.pet-profile-photo { width: 76px; height: 76px; border-radius: 8px; background: var(--pink-soft) center/cover; }
.pet-row-main h3 { margin: 0 0 2px; font-size: 22px; }
.pet-row-main p { margin: 0; }
.pet-row-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.pet-row-note { color: var(--muted); font-size: 13px; font-weight: 700; }
.pet-row-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-row-flags span { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--light); color: var(--muted); padding: 3px 9px; font-size: 12px; font-weight: 700; }
.pet-row-main, .pet-row-flags, .pet-row-actions { min-width: 0; }
.pet-row-actions { display: grid; gap: 8px; justify-items: stretch; }
.pet-row-actions .heart { justify-self: end; }
.pet-history-box { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--light); }
.pet-history-box strong { display: block; margin-bottom: 4px; }
.pet-history-box p { margin: 0; }
.client-booking-timeline { display: grid; gap: 8px; margin-top: 14px; }
.client-timeline-item { position: relative; display: grid; gap: 3px; width: 100%; min-height: 74px; padding: 12px 12px 12px 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); text-align: left; }
.client-timeline-item:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--pink-soft); }
.timeline-dot { position: absolute; left: 14px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px var(--pink-soft); }
.client-pet-form { margin-top: 16px; }
.client-reminder-list { display: grid; gap: 8px; margin-top: 10px; }
.client-reminder { display: grid; gap: 2px; padding: 12px; border-radius: 8px; background: var(--light); }
.client-reminder span { color: var(--primary); font-weight: 700; }
.client-reminder small { color: var(--muted); font-weight: 700; }
.client-record-body { background: #f5f6f9; }
.client-record-stage { padding: 34px 0 68px; }
.client-record-page-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.client-record-page-head h1 { max-width: 760px; margin: 8px 0 8px; font-size: clamp(42px,4.8vw,68px); line-height: .98; }
.client-record-page-head p { max-width: 720px; font-size: 18px; }
.client-record-frame { display: grid; grid-template-columns: minmax(280px,360px) minmax(0,1fr); gap: 18px; width: min(1180px,calc(100% - 32px)); margin: 0 auto; align-items: start; }
.client-record-side { position: sticky; top: 92px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(34,46,60,.06); }
.client-record-side:before { content: none; }
.client-record-side > * { position: relative; z-index: 1; }
.client-record-close { display: none; }
.client-record-view-icons { display: none; }
.client-record-view-icons span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 5px; background: #e9edf5; color: #97a0ad; font-size: 13px; }
.client-record-view-icons .active { background: #4b7cff; color: #fff; }
.client-card-head { display: grid; justify-items: center; gap: 5px; margin: 0 0 22px; text-align: center; }
.client-avatar-photo { width: 86px; height: 86px; border-radius: 50%; background: url('gallery-before-after.png') center/cover; box-shadow: 0 10px 28px rgba(42,50,61,.15); }
.client-online { width: 16px; height: 16px; margin-top: -22px; margin-left: 58px; border: 3px solid #fff; border-radius: 50%; background: #62ce43; }
.client-card-head h1 { margin: 4px 0 0; font-size: 20px; line-height: 1.1; }
.client-card-head p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.client-new-pill { display: inline-flex; align-items: center; min-height: 28px; margin-top: 4px; padding: 0 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; }
.booking-summary-card { overflow: hidden; border: 1px solid #f2a11d; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: none; }
.booking-summary-card header { display: flex; gap: 8px; align-items: center; min-height: 50px; padding: 0 18px; border-bottom: 1px solid #f2a11d; background: #fff6df; }
.booking-summary-card dl { margin: 0; padding: 14px 18px; }
.booking-summary-card dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.booking-summary-card dl div:last-child { border-bottom: 0; }
.booking-summary-card dt { color: var(--muted); font-weight: 700; }
.booking-summary-card dd { margin: 0; text-align: right; }
.booking-summary-card dd strong, .booking-summary-card dd small { display: block; }
.booking-summary-card dd strong { color: var(--text); }
.booking-summary-card dd:first-line, #clientBalance { color: #e08d00; }
.client-fold { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: none; }
.client-fold summary { display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 18px; cursor: pointer; font-weight: 700; }
.client-fold p { margin: 0; padding: 0 18px 14px; color: var(--muted); font-size: 14px; font-weight: 700; }
.record-mini-form { display: grid; gap: 10px; padding: 0 18px 16px; }
.record-mini-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.record-mini-form input, .record-mini-form textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; background: #fff; color: var(--text); }
.client-record-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(34,46,60,.06); overflow: hidden; }
.record-tabs { display: flex; gap: 22px; min-height: 74px; padding: 30px 28px 0; border-bottom: 1px solid var(--border); }
.record-tabs button { min-height: 44px; padding: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 700; }
.record-tabs button.active { border-bottom-color: #3f79ff; color: #216bff; }
.record-panel { display: none; padding: 28px; overflow: auto; }
.record-panel.active { display: block; }
.record-section { margin-bottom: 30px; }
.record-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.record-section-head h2 { margin-bottom: 0; }
.record-section h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 20px; line-height: 1.2; }
.record-pet-selector { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; min-height: 154px; padding: 10px; border-radius: 8px; background: #f1f4f9; }
.record-pet-card { position: relative; display: grid; min-height: 190px; border: 2px solid transparent; border-radius: 8px; background: #fff; text-align: center; overflow: hidden; }
.record-pet-card.active { border-color: #4b7cff; box-shadow: inset 0 0 0 2px rgba(75,124,255,.2); }
.record-pet-select { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; min-height: 116px; border: 0; background: transparent; color: var(--text); text-align: center; }
.record-pet-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--pink-soft) center/cover; }
.record-pet-card strong, .record-pet-card small { display: block; }
.record-pet-card small { color: var(--muted); font-weight: 700; }
.record-pet-card .pet-row-flags { justify-content: center; min-height: 28px; }
.record-pet-edit { min-height: 34px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--light); color: var(--muted); font-size: 12px; font-weight: 700; }
.record-pet-add { place-items: center; align-content: center; gap: 6px; color: var(--muted); cursor: pointer; }
.record-pet-add span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #fff; border: 1px dashed var(--border); color: var(--primary); font-size: 30px; }
.record-pet-editor { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.record-pet-editor[hidden] { display: none; }
.record-photo-field { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.record-photo-preview { width: 84px; height: 84px; border-radius: 8px; background: var(--pink-soft) center/cover; border: 1px solid var(--border); }
.record-photo-field label { display: grid; gap: 6px; margin: 0; font-weight: 700; }
.record-photo-field span { font-size: 14px; font-weight: 700; }
.record-photo-field input { width: 100%; min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); font-weight: 700; }
.record-flag-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.record-flag-card p { margin: 4px 0 0; }
.record-flag-card .flag-picker { margin-top: 0; }
.record-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.record-service-box { border-radius: 8px; background: #f4f6fa; }
.record-service-box div { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 14px 16px; border-bottom: 1px dashed #ccd5e3; }
.record-service-box span { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.record-service-box b { grid-row: span 2; align-self: center; }
.record-service-box footer { display: flex; gap: 9px; align-items: center; padding: 14px 16px; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); }
.record-accordion details { border-bottom: 1px solid var(--border); }
.record-accordion summary { padding: 14px 0; cursor: pointer; font-weight: 700; }
.record-accordion p, .record-accordion .pet-flag-list { margin: 0; padding-bottom: 14px; }
.record-timeline { display: grid; gap: 0; }
.record-event { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.record-event i { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: #59b887; }
.record-event i.blue { background: #4b7cff; }
.record-event i.red { background: var(--primary); }
.record-event strong, .record-event small { display: block; }
.record-event small { color: var(--muted); font-weight: 700; }
.record-info-note { min-height: 38px; margin-bottom: 22px; padding: 9px 12px; border-radius: 5px; background: #dcecff; color: var(--text); font-weight: 700; }
.record-notes-list { display: grid; gap: 22px; }
.record-note { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.record-note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.record-note-pet { display: flex; gap: 12px; align-items: center; }
.record-note-pet .record-pet-avatar { width: 52px; height: 52px; }
.record-note p { max-width: 760px; margin: 0 0 10px; font-size: 16px; }
.record-note small { color: var(--muted); font-weight: 700; }
.finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.finance-lines { display: grid; gap: 0; }
.finance-lines > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 46px; border-bottom: 1px dashed #ccd5e3; }
.finance-lines span small { display: block; color: var(--muted); font-size: 12px; font-style: italic; }
.finance-lines em { display: inline-flex; margin-left: 4px; padding: 1px 5px; border: 1px solid #58b85d; border-radius: 4px; color: #58b85d; font-size: 10px; font-style: normal; text-transform: uppercase; }
.finance-lines button:not(.btn) { min-height: 30px; border: 0; background: transparent; color: var(--primary); }
.finance-add, .finance-refund { justify-self: end; margin: 10px 0; color: var(--muted) !important; font-weight: 700; }
.finance-total, .finance-due { border-top: 2px solid #cdd6e6; border-bottom: 0 !important; font-weight: 700; }
.finance-due strong { font-size: 30px; }
.charge-row { grid-template-columns: 90px 1fr !important; gap: 8px !important; border-bottom: 0 !important; margin-top: 10px; }
.charge-row input, .charge-row select { min-height: 54px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: #fff; }
.record-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; min-height: 78px; padding: 16px 28px; border-top: 1px solid var(--border); }
.range-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.range-line input { padding: 0; accent-color: var(--primary); }
.profile-card { padding: 18px; }
.avatar-row { display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 10px; background: var(--pink-soft); color: var(--primary); font-weight: 700; }
.booking-item, .pet-row { padding: 12px; border-radius: 7px; background: var(--light); }
.pink-showcase { position: relative; overflow: hidden; background: var(--primary); color: #fff; min-height: 820px; }
.pink-showcase .wrap { position: relative; min-height: 820px; }
.pink-showcase h2 { max-width: 650px; padding-top: 72px; color: #fff; font-size: clamp(42px,5vw,70px); }
.account-phone { position: absolute; right: -80px; top: 230px; width: min(690px,65vw); min-height: 690px; border: 14px solid #f8f9fc; border-radius: 42px; background: #fff; color: var(--text); box-shadow: 0 34px 90px rgba(34,46,60,.22); transform: rotate(-28deg); overflow: hidden; }
.account-top { padding: 34px 44px; background: #3d4a5d; color: #fff; font-weight: 700; font-size: 21px; }
.account-row { display: grid; grid-template-columns: 72px 1fr 24px; gap: 16px; align-items: center; padding: 18px 36px; border-bottom: 1px solid var(--border); background: #fff; }
.account-row.header { grid-template-columns: 86px 1fr 24px; padding-top: 28px; padding-bottom: 28px; }
.account-photo { width: 62px; height: 62px; border-radius: 50%; background: url('hero-dog-grooming.png') center/cover, var(--pink-soft); }
.account-row.add .account-photo { display: grid; place-items: center; background: var(--light); color: var(--muted); font-size: 42px; }
.account-section-label { padding: 12px 36px; background: var(--light); color: var(--muted); font-weight: 700; }
.login-grid, .pricing-grid, .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.login-grid { grid-template-columns: 1fr 1fr; }
.auth-card, .plan, .metric-card { padding: 24px; }
.dashboard-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 18px; align-items: start; }
.dashboard-menu { position: sticky; top: 92px; display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); box-shadow: 0 12px 32px rgba(34,46,60,.06); }
.dashboard-menu button { min-height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-weight: 700; text-align: left; padding: 0 12px; }
.dashboard-menu button.active { background: var(--primary); color: var(--white); }
.dashboard-main { display: grid; gap: 14px; }
.metric-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.dashboard-panel { display: none; }
.dashboard-panel.active { display: block; }
.service-editor { display: grid; gap: 10px; }
.salon-app-body { background: #eef2f7; overflow: hidden; }
.salon-app { display: grid; grid-template-columns: 248px minmax(0,1fr); height: 100vh; color: var(--text); }
.salon-sidebar { position: relative; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 12px; min-height: 0; height: 100vh; overflow: hidden; padding: 14px; background: #fff; border-right: 1px solid var(--border); }
.sidebar-collapse { position: absolute; top: 88px; right: -15px; z-index: 10; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--text); font-size: 20px; font-weight: 700; box-shadow: 0 8px 18px rgba(34,46,60,.12); cursor: pointer; }
.salon-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; }
.salon-logo span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: var(--primary); color: #fff; }
.salon-account { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 8px; background: var(--light); }
.salon-account small { display: block; color: var(--muted); font-weight: 700; }
.salon-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--pink-soft); color: var(--primary); font-weight: 700; }
.salon-nav { display: grid; align-content: start; gap: 6px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; }
.salon-nav::-webkit-scrollbar { width: 6px; }
.salon-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: #d4dbe6; }
.salon-nav button { min-height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-weight: 700; text-align: left; padding: 0 12px; }
.salon-nav button.active { background: #eaf1ff; color: var(--blue); }
.salon-nav button.is-locked { color: #9aa5b1; }
.salon-nav button.is-locked::after { content: " Pro"; float: right; color: var(--primary); font-size: 11px; }
.salon-nav button[data-plan-min="multi"].is-locked::after { content: " Multi"; }
.sidebar-subnav { display: none; gap: 3px; margin: -2px 0 4px 12px; padding-left: 10px; border-left: 2px solid #e1e7f0; }
.sidebar-subnav.open { display: grid; }
.sidebar-subnav button { min-height: 34px; color: var(--muted); padding: 0 10px; font-size: 13px; }
.sidebar-subnav button.active { background: #fff4f6; color: var(--primary); }
.salon-sidebar-card { display: grid; gap: 8px; padding: 10px; border-radius: 8px; background: var(--primary); color: #fff; }
.salon-sidebar-card strong { font-size: 14px; line-height: 1.1; }
.salon-sidebar-card p { display: none; }
.salon-sidebar-card .btn { min-height: 32px; padding: 0 10px; font-size: 12px; }
.plan-switcher { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 0; }
.plan-switcher button { min-height: 28px; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; background: transparent; color: #fff; font-size: 12px; font-weight: 700; }
.plan-switcher button.active { background: #fff; color: var(--primary); }
.salon-workspace { min-width: 0; height: 100vh; overflow: auto; padding: 22px; }
.salon-app-body.sidebar-collapsed .salon-app { grid-template-columns: 78px minmax(0,1fr); }
.salon-app-body.sidebar-collapsed .salon-sidebar { padding: 18px 12px; justify-items: center; }
.salon-app-body.sidebar-collapsed .salon-logo strong, .salon-app-body.sidebar-collapsed .salon-account div, .salon-app-body.sidebar-collapsed .salon-sidebar-card, .salon-app-body.sidebar-collapsed .salon-nav button::after, .salon-app-body.sidebar-collapsed .sidebar-subnav { display: none; }
.salon-app-body.sidebar-collapsed .salon-account { grid-template-columns: 44px; padding: 0; background: transparent; }
.salon-app-body.sidebar-collapsed .salon-nav button { display: grid; width: 48px; min-height: 48px; place-items: center; padding: 0; color: transparent; font-size: 0; }
.salon-app-body.sidebar-collapsed .salon-nav button::before { color: var(--muted); font-size: 20px; }
.salon-app-body.sidebar-collapsed .salon-nav button.active::before { color: var(--blue); }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="calendar"]::before { content: "▦"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="clients"]::before { content: "◉"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="reports"]::before { content: "◔"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="messages"]::before { content: "✉"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="services"]::before { content: "☷"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="invoices"]::before { content: "▤"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="team"]::before { content: "♙"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="settings"]::before { content: "⚙"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="addons"]::before { content: "⊞"; }
.salon-app-body.sidebar-collapsed [data-dashboard-tab="help"]::before { content: "?"; }
.salon-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.salon-topbar h1 { margin: 0; font-size: 34px; line-height: 1.05; }
.salon-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.salon-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.salon-metrics article { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.salon-metrics span { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.salon-metrics strong { display: block; margin-top: 4px; font-size: 24px; }
.salon-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-items: start; }
.salon-main-panel, .rail-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.salon-main-panel { padding: 16px; min-width: 0; }
.clients-dashboard { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: -16px; min-height: calc(100vh - 250px); background: #f5f7fb; }
.clients-head { grid-column: 1 / -1; padding: 18px 20px 0; background: #fff; border-bottom: 1px solid var(--border); }
.clients-head h2 { margin: 0; font-size: 24px; }
.client-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.client-search { display: flex; align-items: center; gap: 8px; width: min(390px,100%); min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--light); color: var(--muted); font-weight: 700; }
.client-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.client-table-wrap { min-width: 0; overflow: auto; padding: 16px 20px 20px; }
.client-table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.client-table th { height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: left; white-space: nowrap; }
.client-table td { height: 58px; padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; white-space: nowrap; }
.client-table tr { cursor: pointer; }
.client-table tbody tr:hover, .client-table tbody tr.active { background: #f6f9ff; }
.client-table td small, .client-pet small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
.client-table a { color: var(--text); }
.client-person { display: flex; align-items: center; gap: 10px; }
.client-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--pink-soft); color: var(--primary); font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 2px #fff; }
.client-avatar.big { width: 56px; height: 56px; font-size: 16px; }
.client-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.client-detail-head h3 { margin: 0; font-size: 24px; }
.client-detail-head p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }
.client-photo-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.client-photo-strip div { display: grid; min-height: 92px; place-items: center; border-radius: 8px; background: var(--light); color: var(--primary); font-size: 24px; font-weight: 700; background-size: cover; background-position: center; }
.client-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px 0; }
.client-pet-card { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.client-pet-card > strong { display: block; font-size: 18px; }
.client-pet-card p:last-child { margin-bottom: 0; color: var(--text); font-weight: 700; }
.client-empty { text-align: center; color: var(--muted); }
.services-dashboard { display: grid; gap: 16px; margin: -16px; min-height: calc(100vh - 250px); padding: 18px; background: #f5f7fb; }
.services-tabs { display: inline-flex; width: max-content; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.services-tabs button { min-height: 38px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); padding: 0 16px; font-weight: 700; cursor: pointer; }
.services-tabs button.active { background: var(--light); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.services-board { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start; }
.services-table-card, .service-editor-panel { border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.services-table-card { min-width: 0; overflow: hidden; }
.services-title { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.services-title h2 { margin: 0; font-size: 24px; }
.service-table-wrap { overflow: auto; }
.service-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.service-table th { height: 48px; padding: 0 18px; border-bottom: 2px solid #d8eaff; color: var(--muted); font-size: 12px; text-align: left; }
.service-table td { height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-weight: 700; white-space: nowrap; }
.service-table tr { cursor: pointer; }
.service-table tbody tr:hover, .service-table tbody tr.active { background: #f7faff; }
.service-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.service-name-cell { display: flex; align-items: center; gap: 12px; }
.service-color-dot { display: inline-flex; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); }
.service-actions-cell { position: relative; text-align: right; }
.service-action-menu { position: absolute; top: 48px; right: 16px; z-index: 20; display: grid; min-width: 150px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 18px 40px rgba(34,46,60,.18); }
.service-action-menu button { min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--text); padding: 0 12px; text-align: left; font-weight: 700; cursor: pointer; }
.service-action-menu button:hover { background: var(--light); color: var(--primary); }
.service-editor-panel { display: none; padding: 0; border: 1px solid var(--border); background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); overflow: hidden; }
.service-editor-panel.open { display: block; }
.service-editor-panel > .muted { padding: 18px; }
.service-form { display: grid; gap: 13px; }
.service-create-layout { grid-template-columns: minmax(420px,1.05fr) minmax(360px,.95fr); align-items: start; padding: 18px; background: #f8fafc; }
.service-inline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: #fff; }
.service-inline-head strong { display: block; font-size: 18px; }
.service-inline-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.service-side-stack { display: grid; gap: 16px; }
.service-create-card, .service-save-panel { padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.service-card-title { display: flex; align-items: center; gap: 10px; margin: -18px -18px 18px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.service-card-title span { color: var(--muted); font-weight: 700; }
.service-card-title h3 { margin: 0; font-size: 22px; }
.service-desc-field { position: relative; }
.service-desc-field span { position: absolute; right: 14px; bottom: 12px; color: #b2bac6; font-size: 12px; font-weight: 700; }
.service-colour-picker { display: grid; gap: 10px; margin-top: 12px; }
.service-colour-options { display: flex; flex-wrap: wrap; gap: 8px; }
.service-colour-options label { cursor: pointer; }
.service-colour-options input { position: absolute; opacity: 0; pointer-events: none; }
.service-colour-options span { display: block; width: 42px; height: 42px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 0 0 1px var(--border); }
.service-colour-options input:checked + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.service-colour-picker p, .pricing-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 6px; background: #dcebff; color: var(--text); font-size: 13px; font-weight: 700; }
.service-colour-picker b, .pricing-note b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; }
.pricing-models { display: grid; gap: 10px; margin-bottom: 12px; }
.pricing-models label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; cursor: pointer; }
.pricing-models input { width: 22px; height: 22px; accent-color: var(--blue); }
.assignee-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.assignee-picker strong { width: 100%; }
.service-save-panel { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.calendar-commandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; }
.calendar-navline, .calendar-iconbar { display: flex; align-items: center; gap: 8px; }
.calendar-navline strong { font-size: 15px; }
.calendar-legend { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.legend-dot.paid { background: var(--secondary); }
.legend-dot.booked { background: var(--primary); }
.legend-dot.yellow { background: #f0b429; }
.legend-dot.purple { background: #7a5cff; }
.legend-dot.break { background: #a4adba; }
.icon-btn { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; }
.icon-btn:hover, .icon-btn.active { border-color: var(--primary); color: var(--primary); background: var(--pink-soft); }
.calendar-toolbar { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; margin-bottom: 14px; }
.block-time-form { display: grid; grid-template-columns: minmax(130px,1.2fr) minmax(84px,.7fr) minmax(96px,.8fr) minmax(130px,1.1fr) auto; gap: 8px; align-items: end; max-width: 100%; }
.week-calendar { --staff-count: 3; --slot-height: 29px; position: relative; display: none; grid-template-columns: 70px repeat(var(--staff-count),minmax(190px,1fr)); grid-template-rows: 58px 68px; grid-auto-rows: var(--slot-height); border: 1px solid var(--border); border-radius: 8px; overflow: auto; height: min(790px,calc(100vh - 385px)); min-height: 500px; background: #fff; scroll-behavior: smooth; }
.week-calendar.active { display: grid; }
.calendar-app-head { position: sticky; top: 0; z-index: 40; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fff; box-shadow: 0 1px 0 var(--border); }
.calendar-app-head strong { display: block; font-size: 15px; }
.calendar-app-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.calendar-staff-strip { display: flex; align-items: center; gap: 12px; overflow-x: auto; }
.calendar-staff-strip span { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.calendar-staff-strip i { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--pink-soft); box-shadow: 0 0 0 1px var(--border); color: var(--primary); font-size: 10px; font-style: normal; }
.week-head, .time-cell, .week-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.time-cell, .week-cell { min-height: var(--slot-height); }
.week-head { position: sticky; top: 58px; z-index: 35; display: grid; place-items: center; min-height: 68px; background: #f8fafc; font-weight: 700; text-align: center; box-shadow: 0 1px 0 var(--border); }
.employee-head { grid-template-columns: 34px 1fr; justify-items: start; gap: 8px; padding: 9px; text-align: left; }
.employee-head span { grid-column: 2; color: var(--muted); font-size: 11px; }
.employee-avatar { grid-row: 1 / span 2; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--pink-soft); color: var(--primary); font-size: 12px; }
.time-head span { display: block; color: var(--muted); font-size: 11px; }
.time-cell { position: sticky; left: 0; z-index: 20; display: grid; place-items: start end; padding: 8px; color: var(--muted); font-size: 12px; font-weight: 700; background: #fbfcfe; }
.time-head { left: 0; z-index: 45; }
.time-cell.half-hour { color: #b4bac4; font-size: 11px; }
.time-cell.quarter-hour { color: transparent; font-size: 0; }
.now-dot { position: absolute; right: -5px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(239,57,87,.14); }
.week-cell { position: relative; z-index: 1; padding: 0; background: #fff; overflow: visible; }
.week-cell.half-hour, .week-cell.quarter-hour { min-height: var(--slot-height); }
.now-line { position: absolute; left: 0; right: 0; top: 23px; z-index: 2; height: 2px; background: var(--primary); box-shadow: 0 0 0 3px rgba(239,57,87,.08); pointer-events: none; }
.week-cell.available { background: repeating-linear-gradient(0deg,#fff,#fff 10px,#f4f6fa 11px); }
.week-cell.available.half-hour { background: repeating-linear-gradient(0deg,#fbfcfe,#fbfcfe 10px,#eef2f7 11px); }
.appointment { position: absolute; z-index: 3; display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 0; margin: 5px 6px; border: 1px solid rgba(239,57,87,.18); border-left: 4px solid var(--primary); border-radius: 6px; padding: 8px; background: var(--pink-soft); color: var(--text); text-align: left; box-shadow: 0 7px 14px rgba(34,46,60,.09); overflow: hidden; cursor: pointer; }
.appointment:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(34,46,60,.14); }
.appointment.paid { border-left-color: var(--secondary); background: #ddfbef; }
.appointment.booked { border-left-color: var(--primary); background: #ffdce3; }
.appointment.yellow { border-left-color: #f0b429; background: #fff4cf; }
.appointment.purple { border-left-color: #7a5cff; background: #e9e1ff; }
.appointment.break { border-left-color: #a4adba; background: #eef1f5; color: var(--muted); }
.appt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appointment .appt-time { color: var(--text); font-size: 11px; font-weight: 700; }
.appt-status { flex: none; padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.72); color: var(--text); font-size: 9px; font-weight: 700; }
.appointment strong { font-size: 14px; line-height: 1.05; }
.appointment span { font-size: 10px; color: var(--muted); font-weight: 700; }
.appt-client { color: #475467; }
.appt-service { color: var(--text); font-size: 11px; }
.appt-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.appointment small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; padding: 6px; border-radius: 5px; background: rgba(255,255,255,.52); color: #667085; font-size: 11px; line-height: 1.25; }
.appointment small b { display: block; color: var(--text); font-size: 10px; text-transform: uppercase; }
.appt-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.appointment em { width: max-content; max-width: 100%; padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.72); color: var(--text); font-size: 9px; font-style: normal; font-weight: 700; }
.appointment.is-selected { outline: 3px solid var(--blue); outline-offset: -2px; background: #fff; }
.salon-app-body.calendar-expanded .salon-topbar, .salon-app-body.calendar-expanded .salon-metrics, .salon-app-body.calendar-expanded .calendar-rail-top { display: none; }
.salon-app-body.calendar-expanded .salon-app { grid-template-columns: 236px minmax(0,1fr); }
.salon-app-body.calendar-expanded .salon-sidebar { min-height: 100vh; }
.salon-app-body.calendar-expanded .salon-workspace { height: 100vh; padding: 14px; }
.salon-app-body.calendar-expanded .salon-main-panel { min-height: calc(100vh - 28px); }
.salon-app-body.calendar-expanded .calendar-commandbar { margin-bottom: 8px; padding: 8px; background: #fff; }
.salon-app-body.calendar-expanded .calendar-toolbar { display: none; }
.salon-app-body.calendar-expanded .week-calendar { grid-template-columns: 66px repeat(var(--staff-count),minmax(180px,1fr)); height: calc(100vh - 118px); max-height: none; }
.salon-app-body.calendar-expanded.sidebar-collapsed .salon-app { grid-template-columns: 78px minmax(0,1fr); }
.salon-app-body.sidebar-collapsed .clients-dashboard { min-height: calc(100vh - 180px); }
.month-calendar { display: none; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.month-calendar.active { display: grid; }
.month-day { min-height: 118px; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 10px; }
.month-day strong { display: block; margin-bottom: 8px; }
.month-dot { display: block; margin-top: 5px; padding: 4px 6px; border-radius: 5px; background: var(--pink-soft); color: var(--primary-hover); font-size: 11px; font-weight: 700; }
.salon-right-rail { display: grid; gap: 14px; }
.calendar-rail-top { grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); margin-bottom: 14px; }
.rail-card { padding: 14px; }
.calendar-rail-top .booking-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.calendar-rail-top .booking-item { margin: 0; }
.appointment-detail { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--light); }
.appointment-detail strong { display: block; font-size: 18px; margin-bottom: 4px; }
.appointment-detail p:not(.muted) { margin: 8px 0; padding: 8px; border-radius: 5px; background: #fff; color: var(--text); font-size: 13px; }
.modal-open { overflow: hidden; }
.visit-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 22px; }
.visit-modal.open { display: flex; }
.visit-modal-backdrop { position: absolute; inset: 0; background: rgba(31,42,56,.62); backdrop-filter: blur(4px); }
.visit-dialog { position: relative; z-index: 1; width: min(720px,100%); max-height: min(760px,calc(100vh - 44px)); overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgba(31,42,56,.32); padding: 22px; }
.visit-close { position: absolute; top: 14px; right: 14px; }
.visit-modal-head { padding-right: 48px; }
.visit-modal-head h2 { margin: 10px 0 4px; font-size: 34px; line-height: 1; }
.visit-modal-head p { margin: 0; color: var(--muted); font-weight: 700; }
.visit-info-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.visit-info-grid article { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--light); }
.visit-info-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.visit-info-grid strong { display: block; margin-top: 4px; font-size: 16px; }
.visit-note { padding: 14px; border-radius: 8px; background: var(--pink-soft); }
.visit-note strong { display: block; margin-bottom: 6px; }
.visit-note p { margin: 0; color: var(--text); }
.visit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.gallery-dialog { width: min(860px,100%); padding: 0; overflow: hidden; }
.gallery-preview { display: grid; align-items: end; min-height: min(58vh,520px); padding: clamp(22px,4vw,42px); background: linear-gradient(135deg,#fee8ec,#f7b5c2); background-size: cover; background-position: center; color: #fff; box-shadow: inset 0 -160px 180px rgba(31,42,56,.42); }
.gallery-preview.teal { background: linear-gradient(135deg,#dff8f1,#27a387); }
.gallery-preview.warm { background: linear-gradient(135deg,#ffe4cb,#ee620b); }
.gallery-preview.violet { background: linear-gradient(135deg,#e9e1ff,#7a5cff); }
.gallery-preview.dark { background: linear-gradient(135deg,#5b6675,#1f2a38); }
.gallery-preview span { max-width: 620px; font-size: clamp(34px,5vw,64px); line-height: 1; font-weight: 700; text-shadow: 0 8px 30px rgba(31,42,56,.32); }
.gallery-caption { padding: 22px; }
.gallery-caption h2 { margin: 10px 0 6px; font-size: 32px; line-height: 1; }
.settings-grid { display: grid; gap: 8px; margin-top: 14px; }
.settings-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.settings-grid .wide { grid-column: 1 / -1; }
.settings-shell { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: -16px; min-height: 680px; background: #f3f6fb; }
.settings-content { padding: 22px; }
.settings-section { display: none; margin-top: 14px; }
.settings-section.active { display: grid; gap: 14px; }
.settings-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(34,46,60,.05); }
.settings-card.highlighted { grid-template-columns: minmax(0,1fr) 220px; align-items: center; border-color: #8bbcff; box-shadow: 0 0 0 1px #8bbcff; }
.settings-card h3 { margin: 0; font-size: 22px; }
.settings-card p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }
.field.compact { margin: 0; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.preference-row:last-child { border-bottom: 0; }
.preference-row strong { display: block; font-size: 18px; }
.preference-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.switch-toggle { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.switch-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch-toggle i { position: relative; display: block; width: 54px; height: 30px; border-radius: 999px; background: #d9e0ea; transition: .2s ease; }
.switch-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(34,46,60,.2); transition: .2s ease; }
.switch-toggle input:checked + i { background: var(--blue); }
.switch-toggle input:checked + i::after { left: 27px; }
.hours-grid { display: grid; grid-template-columns: 1fr 110px 110px auto; gap: 10px; align-items: center; }
.hours-grid span { font-weight: 700; }
.hours-grid input { min-height: 42px; border: 1px solid var(--border); border-radius: 5px; padding: 0 10px; font: inherit; }
.plan-mini { display: grid; gap: 4px; padding: 14px; border-radius: 8px; background: var(--light); }
.plan-mini strong { font-size: 22px; }
.plan-mini span { color: var(--muted); font-weight: 700; }
.settings-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; margin: 18px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--border); background: rgba(243,246,251,.94); backdrop-filter: blur(8px); }
.report-grid, .team-grid, .addon-grid, .help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.report-card, .team-card, .addon-card { border: 1px solid var(--border); border-radius: 8px; background: var(--light); padding: 14px; }
.report-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.report-card strong { display: block; margin: 4px 0; font-size: 28px; }
.team-card { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; }
.addon-card { display: grid; gap: 12px; align-content: space-between; }
.message-compose { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 8px; background: var(--light); }
.upgrade-note { padding: 18px; border: 1px dashed var(--primary); border-radius: 8px; background: var(--pink-soft); color: var(--text); }
.upgrade-note p { color: var(--muted); }
.demo-accounts { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 8px; background: var(--light); }
.demo-accounts button { min-height: 42px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); font-weight: 700; text-align: left; padding: 0 12px; }
.demo-accounts button:hover { border-color: var(--primary); color: var(--primary); }
.salon-app-body[data-business-plan="start"] [data-dashboard-panel="messages"] .message-compose { opacity: .42; pointer-events: none; }
.pricing { background: var(--dark); color: var(--white); }
.pricing h2, .pricing h3 { color: var(--white); }
.plan { min-height: 540px; color: var(--text); display: grid; align-content: space-between; }
.plan.featured-plan { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,124,255,.13), 0 18px 42px rgba(34,46,60,.14); }
.plan.muted { background: #7f8790; color: var(--white); border-color: #7f8790; }
.plan .price { color: var(--blue); font-size: 42px; font-weight: 700; }
.plan-label { display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 10px; padding: 0 9px; border-radius: 5px; background: var(--pink-soft); color: var(--primary-hover); font-size: 12px; font-weight: 700; }
.plan.muted .plan-label { background: rgba(255,255,255,.16); color: #fff; }
.payment-box { margin: 16px 0; padding: 12px; border-radius: 8px; background: #eef7ff; border: 1px solid #cfe4ff; }
.payment-box strong { color: var(--blue); }
.payment-box p { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.payment-box.light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.payment-box.light strong, .payment-box.light p { color: rgba(255,255,255,.88); }
.plan-calendar-preview { margin: 18px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(34,46,60,.08); }
.plan-calendar-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border); background: #f8fafc; font-size: 12px; }
.plan-calendar-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; padding: 10px; background: repeating-linear-gradient(-45deg,#fff,#fff 9px,#f7f9fd 9px,#f7f9fd 18px); }
.plan-day { color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.plan-appt { min-height: 72px; border: 0; border-left: 4px solid var(--primary); border-radius: 6px; padding: 8px; text-align: left; color: var(--text); box-shadow: 0 7px 16px rgba(34,46,60,.08); }
.plan-appt strong, .plan-appt span { display: block; }
.plan-appt strong { font-size: 12px; }
.plan-appt span { color: var(--muted); font-size: 10px; font-weight: 700; }
.plan-appt.green { background: #ddfbef; border-left-color: var(--secondary); }
.plan-appt.purple { background: #e9e1ff; border-left-color: #7a5cff; }
.plan-appt.yellow { background: #fff4cf; border-left-color: #f0b429; }
.plan-appt.pink { background: var(--pink-soft); border-left-color: var(--primary); }
.plan-appt.gray { background: #eef1f5; border-left-color: #9aa5b1; }
.feature-list { display: grid; gap: 12px; padding: 0; margin: 22px 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-weight: 700; }
.check { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #5bcbb6; border-radius: 50%; color: #5bcbb6; font-size: 13px; }
.admin-demo { background: var(--primary); color: var(--white); }
.admin-demo h2, .admin-demo h3 { color: var(--white); }
.tablet { padding: 16px; border: 14px solid var(--text); border-radius: 24px; background: var(--white); color: var(--text); box-shadow: var(--shadow); transform: rotate(2deg); }
.tablet-layout { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.tablet-nav { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 8px; background: var(--light); font-size: 12px; font-weight: 700; }
.tablet-nav span { padding: 8px; border-radius: 5px; }
.tablet-nav .active { background: var(--white); color: var(--primary); }
.calendar-board { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.cal-cell { min-height: 62px; padding: 7px; border: 0; border-radius: 5px; background: var(--light); color: var(--muted); font-size: 11px; font-weight: 700; text-align: left; }
.cal-cell.booked { background: var(--pink-soft); color: var(--primary-hover); }
.cal-cell.paid { background: var(--green-soft); color: var(--secondary); }
.cal-cell.is-selected { outline: 3px solid var(--blue); background: var(--white); color: var(--text); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 24px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { overflow: hidden; padding: 0; }
.faq-question { width: 100%; min-height: 58px; display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--white); padding: 16px; color: var(--text); font-weight: 700; text-align: left; }
.faq-answer { display: none; padding: 0 16px 16px; color: var(--muted); }
.faq-item.open .faq-answer { display: block; }
.footer { padding: 42px 0; background: var(--text); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 20px; }
.footer a, .footer p { color: rgba(255,255,255,.74); display: block; margin: 6px 0; }

@media (max-width: 1180px) {
  .client-main-grid { grid-template-columns: 1fr; }
  .client-sidebar { position: static; }
  .client-record-frame { grid-template-columns: 1fr; }
  .client-record-side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .client-card-head { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .hero, .app-shell, .faq-grid, .page-hero .wrap, .dashboard-shell { grid-template-columns: 1fr; }
  .client-hero-grid, .client-main-grid { grid-template-columns: 1fr; }
  .client-summary-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pet-profile-card { grid-template-columns: 76px minmax(0,1fr); }
  .pet-row-flags, .pet-row-actions { grid-column: 2; }
  .client-main-grid > .client-sidebar:last-child { grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-sidebar { position: static; }
  .client-phone-preview { width: min(520px,100%); margin-inline: auto; transform: rotate(2deg); }
  .search-grid, .pricing-grid, .feature-grid, .metric-row { grid-template-columns: repeat(2,1fr); }
  .panel, .side-stack, .dashboard-menu { position: static; }
  .salon-app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .salon-app-body.sidebar-collapsed .salon-app, .salon-app-body.calendar-expanded.sidebar-collapsed .salon-app { grid-template-columns: 1fr; }
  .salon-app-body { overflow: auto; }
  .salon-sidebar { position: sticky; top: 0; z-index: 20; grid-template-rows: auto; height: auto; min-height: 0; overflow: visible; }
  .sidebar-collapse { display: none; }
  .salon-nav { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; padding-right: 0; }
  .salon-sidebar-card { display: none; }
  .salon-workspace { height: auto; overflow: visible; }
  .salon-layout { grid-template-columns: 1fr; }
  .salon-right-rail { position: static; }
  .search-filter-grid, .market-results-grid, .salon-profile-hero, .salon-profile-layout { grid-template-columns: 1fr; }
  .map-overlay { grid-template-columns: 1fr; }
  .map-filter-main, .map-filter-more, .map-toggle-row, .map-results-head, .map-card-grid { grid-template-columns: 1fr 1fr; }
  .map-filter-main .wide { grid-column: span 2; }
  .search-filter-grid .wide, .search-filter-grid .range-line, .search-filter-grid .filter-actions, .market-toggles { grid-column: auto; }
  .market-toggles, .salon-profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .salon-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-tile.large { grid-column: 1 / -1; grid-row: span 1; }
  .market-side, .salon-booking-panel { position: static; }
  .salon-profile-cover { min-height: 340px; }
  .block-time-form { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .clients-dashboard { grid-template-columns: 1fr; }
  .client-table-wrap { padding-right: 20px; }
  .services-board, .service-create-layout { grid-template-columns: 1fr; }
  .device-stage { min-height: 720px; }
  .showcase-phone { right: 50%; width: min(640px,92vw); transform: translateX(50%) rotate(12deg); }
  .account-phone { right: 50%; width: min(660px,92vw); transform: translateX(50%) rotate(-14deg); }
}
@media (max-width: 760px) {
  .navlinks { display: none; }
  .nav { align-items: flex-start; padding-top: 14px; }
  .nav-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .hero { min-height: auto; padding-top: 34px; grid-template-columns: 1fr; }
  h1, .pink-showcase h2 { font-size: 40px; }
  .device-stage { min-height: 610px; overflow: hidden; margin-inline: -12px; }
  .showcase-phone { top: 42px; right: -190px; width: 540px; min-height: 650px; border-width: 10px; border-radius: 34px; transform: rotate(14deg); }
  .showcase-map { min-height: 330px; }
  .floating-map-tools { right: 72px; top: 320px; }
  .search-grid, .login-grid, .pricing-grid, .feature-grid, .booking-grid, .result-card, .metric-row, .client-summary-row, .pet-dashboard-grid, .pet-profile-card { grid-template-columns: 1fr; }
  .client-main-grid > .client-sidebar:last-child { grid-template-columns: 1fr; }
  .client-hero { padding-top: 34px; }
  .client-phone-preview { min-height: 360px; border-width: 8px; border-radius: 28px; transform: none; }
  .client-hero-actions { display: grid; }
  .pet-profile-photo { width: 100%; height: 180px; }
  .pet-row-flags, .pet-row-actions { grid-column: auto; }
  .client-record-stage { padding: 20px 0 44px; }
  .client-record-page-head { display: grid; align-items: start; }
  .client-record-frame, .client-record-side, .finance-grid { grid-template-columns: 1fr; }
  .record-tabs { gap: 12px; overflow-x: auto; padding-inline: 16px; }
  .record-panel { padding: 18px 16px; }
  .record-photo-field { grid-template-columns: 1fr; }
  .record-photo-preview { width: 100%; height: 180px; }
  .record-pet-selector { overflow-x: auto; }
  .record-actions { justify-content: stretch; flex-wrap: wrap; padding-inline: 16px; }
  .record-actions .btn { flex: 1; }
  .filter-bar-head, .quick-book { display: grid; }
  .search-filter-grid, .market-toggles, .salon-profile-stats, .public-service-list div { grid-template-columns: 1fr; }
  .map-explorer, .map-hero-canvas { min-height: 760px; }
  .map-filter-main, .map-filter-more, .map-toggle-row, .map-results-head, .map-card-grid { grid-template-columns: 1fr; }
  .map-filter-main .wide { grid-column: auto; }
  .map-results-wrap { margin-top: -70px; }
  .map-title-panel h1 { font-size: 38px; }
  .map-card-photo { min-height: 220px; }
  .map-market-body .site-header { display: none; }
  .map-market-page { padding-bottom: 92px; background: #fff; }
  .map-explorer { min-height: 470px; border-bottom: 0; border-radius: 0 0 34px 34px; }
  .map-hero-canvas { min-height: 470px; background-size: 58px 58px; }
  .lt-map-outline { right: -70px; top: 8px; width: 260px; height: 190px; opacity: .55; }
  .lt-city { font-size: 9px; }
  .map-green-zone { min-width: 104px; min-height: 44px; font-size: 10px; }
  .map-green-zone.g1 { left: 3%; top: 61%; }
  .map-green-zone.g2 { right: 5%; top: 23%; }
  .map-street { height: 12px; }
  .map-title-panel { display: none; }
  .map-overlay { position: absolute; inset: 0; display: block; width: 100%; padding: 0; pointer-events: none; }
  .map-filter-card { position: fixed; left: 12px; right: 12px; top: 14px; z-index: 81; display: none; max-height: calc(100vh - 120px); overflow: auto; pointer-events: auto; transform: none; }
  .map-market-page.filters-open .map-filter-card { display: grid; }
  .map-filter-actions { justify-content: stretch; }
  .map-filter-actions .map-pill-btn { flex: 1; }
  .map-filter-actions #toggleSearchMap { display: none; }
  .map-market-body .map-pin { width: 34px; height: 34px; }
  .map-market-body .map-pin.active { width: 42px; height: 42px; }
  .map-user-dot { width: 17px; height: 17px; left: 52%; top: 49%; box-shadow: 0 0 0 12px rgba(22,119,255,.14), 0 8px 18px rgba(22,119,255,.2); }
  .map-neighbourhood { font-size: 10px; }
  .map-address-label { min-width: 120px; padding: 7px 9px; }
  .map-address-label strong { font-size: 11px; }
  .map-address-label span { font-size: 10px; }
  .map-floating-tools { position: relative; z-index: 12; display: flex; justify-content: center; gap: 12px; margin-top: -94px; margin-bottom: 18px; }
  .map-floating-tools .map-pill-btn { min-height: 56px; padding: 0 28px; border-radius: 30px; text-transform: uppercase; }
  .map-floating-tools .map-round-btn { min-width: 56px; min-height: 56px; }
  .map-results-wrap { width: 100%; margin-top: 0; padding: 0 0 0 18px; }
  .map-results-head { display: none; }
  .map-card-grid.results { display: flex; gap: 16px; overflow-x: auto; padding: 0 18px 28px 0; scroll-snap-type: x mandatory; }
  .map-salon-card { flex: 0 0 min(78vw,330px); scroll-snap-align: start; border-radius: 18px; box-shadow: 0 20px 40px rgba(42,50,61,.16); }
  .map-card-photo { min-height: 190px; border-radius: 18px 18px 0 0; }
  .map-card-body { padding: 18px; gap: 8px; }
  .map-card-title-row h3 { font-size: 27px; }
  .map-card-tags, .map-card-book select:nth-of-type(2), .map-card-book select:nth-of-type(3) { display: none; }
  .map-card-actions .btn { width: auto; min-width: 132px; }
  .map-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; padding: 9px 10px 13px; border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 -16px 34px rgba(42,50,61,.12); backdrop-filter: blur(14px); }
  .map-bottom-nav a { display: grid; justify-items: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
  .map-bottom-nav span { font-size: 23px; line-height: 1; }
  .map-bottom-nav a.active { color: var(--primary); }
  .salon-gallery { grid-template-columns: 1fr; grid-auto-rows: 160px; }
  .gallery-tile.large { min-height: 240px; }
  .card-link-actions { justify-content: stretch; }
  .card-link-actions .btn, .card-link-actions button { width: 100%; }
  .salon-profile-summary { padding: 24px 16px; }
  .salon-profile-title { display: grid; }
  .result-photo { min-height: 220px; }
  .card-actions { grid-template-columns: 1fr; }
  .section-head, .results-top, .map-head { display: grid; align-items: start; }
  .map-pin { min-width: 112px; padding: 8px; font-size: 13px; }
  .map-market-body .map-pin { min-width: 0; padding: 0; font-size: 0; }
  .pet-options, .date-strip { grid-template-columns: 1fr 1fr; }
  .pink-showcase, .pink-showcase .wrap { min-height: 720px; }
  .account-phone { top: 260px; right: -230px; width: 560px; border-width: 10px; transform: rotate(-18deg); }
  .tablet { transform: none; border-width: 8px; padding: 10px; }
  .tablet-layout { grid-template-columns: 1fr; }
  .calendar-board, .tablet-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .salon-sidebar { padding: 12px; gap: 10px; }
  .salon-account { display: none; }
  .salon-nav { display: flex; overflow-x: auto; overflow-y: hidden; }
  .salon-nav button { min-width: max-content; }
  .salon-workspace { padding: 14px; }
  .salon-topbar { display: grid; }
  .salon-metrics { grid-template-columns: 1fr 1fr; }
  .report-grid, .team-grid, .addon-grid, .help-grid { grid-template-columns: 1fr; }
  .calendar-toolbar, .block-time-form { grid-template-columns: 1fr; }
  .week-calendar { grid-template-columns: 56px repeat(var(--staff-count),180px); }
  .calendar-commandbar, .visit-actions { align-items: stretch; flex-direction: column; }
  .visit-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .wrap { width: min(100% - 24px,1220px); }
  .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .map-canvas { min-height: 420px; }
  .visit-info-grid { grid-template-columns: 1fr; }
}