:root {
  color-scheme: light;
  --app-bg: #f4f2ee;
  --surface: #ffffff;
  --surface-soft: #eeece7;
  --ink: #202126;
  --muted: #6e6d73;
  --line: #dedbd4;
  --green: #3157d5;
  --green-dark: #223d9f;
  --green-soft: #e9edff;
  --blue: #0f7d86;
  --blue-soft: #e3f3f2;
  --coral: #d45f47;
  --coral-soft: #faeae5;
  --amber: #a96c0d;
  --amber-soft: #fff1d8;
  --violet: #744fa1;
  --violet-soft: #f0eafb;
  --danger: #b83c45;
  --shadow-soft: 0 9px 28px rgba(37, 35, 31, 0.09);
  --shadow-high: 0 22px 64px rgba(29, 28, 33, 0.2);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.view-switch button.active {
  background: var(--green);
  color: white;
  box-shadow: 0 2px 8px rgba(12, 87, 73, 0.16);
}

/* Mega Update 3.0: clearer home, comparison and Yaqin Scan */
.trust-ribbon {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  margin: 9px 0 4px;
  color: var(--muted);
  scrollbar-width: none;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.trust-ribbon::-webkit-scrollbar { display: none; }
.trust-ribbon span { display: inline-flex; align-items: center; gap: 5px; }
.trust-ribbon svg { width: 13px; height: 13px; color: var(--green); }
.trust-ribbon span:first-child svg { fill: var(--green); }

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

.home-tool {
  position: relative;
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: end;
  gap: 3px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.home-tool:active { transform: scale(0.98); }
.home-tool > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}
.home-tool > span svg { width: 18px; height: 18px; }
.home-tool > svg { position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; color: var(--muted); }
.home-tool strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.home-tool small { overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.home-tool-ai { background: var(--green-dark); border-color: var(--green-dark); color: white; }
.home-tool-ai > span { background: rgba(255,255,255,0.13); color: #9de1cd; }
.home-tool-ai > svg, .home-tool-ai small { color: rgba(255,255,255,0.66); }
.home-tool-scan { background: #fff8eb; border-color: #f0dfbe; }
.home-tool-scan > span { background: #ffe8b8; color: #8b560e; }

.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.nav-scan { color: var(--green-dark); }
.nav-scan-icon {
  width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}
.nav-scan-icon svg { width: 19px; height: 19px; }

.compare-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(18, 28, 23, 0.12);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}
.compare-button:active { transform: scale(0.92); }
.compare-button svg { width: 18px; height: 18px; }
.compare-button.active { background: var(--green); color: white; }
.place-image-wrap .compare-button { position: absolute; top: 56px; right: 10px; }
.sheet-compare { position: absolute; top: 17px; right: 60px; z-index: 6; }

.compare-tray {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 42;
  width: min(452px, calc(100% - 20px));
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px auto;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 11px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(23,32,27,0.96);
  color: white;
  box-shadow: 0 14px 40px rgba(18,28,23,0.24);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  animation: compare-tray-in 220ms ease both;
}
.compare-tray[hidden] { display: none !important; }
@keyframes compare-tray-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.compare-tray-places { display: flex; padding-left: 7px; }
.compare-tray-places img { width: 29px; height: 29px; margin-left: -7px; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; }
.compare-tray-copy { min-width: 0; display: grid; gap: 2px; }
.compare-tray-copy strong, .compare-tray-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.compare-tray-copy strong { font-size: 11px; }
.compare-tray-copy small { color: rgba(255,255,255,0.62); font-size: 8px; }
.compare-tray .compare-clear { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: white; }
.compare-tray .compare-clear svg { width: 15px; height: 15px; stroke: currentColor; }
.compare-open { min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; background: #7bd7bb; color: #113b30; font-size: 10px; font-weight: 850; cursor: pointer; }
.compare-open:disabled { opacity: 0.38; cursor: not-allowed; }
.compare-open[hidden] { display: none; }
body.sheet-open .compare-tray { pointer-events: none; opacity: 0; }

.compare-sheet,
.scanner-sheet { background: var(--app-bg); }
.compare-body { padding: 16px 14px calc(30px + env(safe-area-inset-bottom)); }
.compare-verdict {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfe7de;
  border-radius: 8px;
  background: var(--green-soft);
}
.compare-verdict > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: white; }
.compare-verdict > span svg { width: 20px; height: 20px; }
.compare-verdict > div { min-width: 0; display: grid; gap: 3px; }
.compare-verdict small { color: var(--green-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.compare-verdict strong { font-size: 16px; }
.compare-verdict p { margin: 3px 0 0; color: #42665b; font-size: 10px; line-height: 1.45; }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(var(--compare-count), minmax(170px, 1fr));
  gap: 8px;
  overflow-x: auto;
  margin: 14px -14px 0;
  padding: 0 14px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.compare-grid::-webkit-scrollbar { display: none; }
.compare-column { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; scroll-snap-align: center; }
.compare-column.winner { border-color: #8bbdaf; box-shadow: inset 0 3px 0 var(--green); }
.compare-place-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; }
.compare-place-head img { width: 48px; height: 48px; border-radius: 7px; object-fit: cover; }
.compare-place-head span { min-width: 0; display: grid; gap: 2px; }
.compare-place-head small { color: var(--green); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.compare-place-head strong { overflow: hidden; font-size: 11px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.compare-place-head em { color: var(--muted); font-size: 8px; font-style: normal; }
.compare-cell { min-height: 57px; display: grid; align-content: center; gap: 3px; padding: 9px 10px; border-top: 1px solid var(--line); }
.compare-cell small { color: var(--muted); font-size: 8px; }
.compare-cell strong { font-size: 11px; line-height: 1.35; }
.compare-cell strong em { margin-left: 2px; color: var(--muted); font-size: 8px; font-style: normal; }
.compare-warning { min-height: 72px; }
.compare-warning strong { color: #785018; font-size: 9px; }
.compare-column > button { width: calc(100% - 20px); min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 10px; border: 0; border-radius: 7px; background: var(--ink); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.compare-column > button svg { width: 14px; height: 14px; }
.compare-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.compare-note svg { width: 13px; height: 13px; color: var(--green); }

.scanner-body { padding: 0 14px calc(34px + env(safe-area-inset-bottom)); }
.scanner-header { background: rgba(247,248,246,0.94); backdrop-filter: blur(16px); }
.scan-intro[hidden] { display: none !important; }
.scan-intro { display: grid; justify-items: center; padding: 14px 0 20px; text-align: center; }
.scan-visual {
  position: relative;
  width: min(238px, 72vw);
  aspect-ratio: 1.32;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 5px 0 18px;
  border-radius: 8px;
  background: #17201b;
  color: #8fe0c6;
}
.scan-visual > svg { width: 58px; height: 58px; opacity: 0.76; }
.scan-visual > b { position: absolute; left: 13%; right: 13%; top: 50%; height: 2px; background: #ffb855; box-shadow: 0 0 18px rgba(255,184,85,0.7); animation: scan-sweep 2.4s ease-in-out infinite; }
@keyframes scan-sweep { 0%,100% { transform: translateY(-55px); } 50% { transform: translateY(55px); } }
.scan-corner { position: absolute; width: 28px; height: 28px; border-color: white; border-style: solid; }
.scan-corner.top-left { top: 17px; left: 17px; border-width: 2px 0 0 2px; }
.scan-corner.top-right { top: 17px; right: 17px; border-width: 2px 2px 0 0; }
.scan-corner.bottom-left { bottom: 17px; left: 17px; border-width: 0 0 2px 2px; }
.scan-corner.bottom-right { right: 17px; bottom: 17px; border-width: 0 2px 2px 0; }
.scan-kicker { color: var(--green); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.scan-intro h2 { margin: 6px 0 7px; font-size: 23px; line-height: 1.15; }
.scan-intro > p { max-width: 360px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.scan-actions { width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-top: 17px; }
.scan-actions .primary-button, .scan-actions .secondary-button { min-width: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; font-size: 10px; }
.scan-actions svg { width: 16px; height: 16px; }
.scan-upload { cursor: pointer; }
.scan-minor-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.scan-manual-button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 9px; border: 0; background: transparent; color: var(--green-dark); font-size: 9px; font-weight: 800; cursor: pointer; }
.scan-manual-button svg { width: 14px; height: 14px; }

.scan-live[hidden] { display: none; }
.scan-live { display: grid; gap: 10px; padding: 12px 0 18px; }
.scan-live-stage { position: relative; width: 100%; min-height: 340px; max-height: 62vh; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #111713; }
.scan-live-stage video { width: 100%; height: 100%; display: block; object-fit: cover; }
.scan-live-guide { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,10,7,0.16); }
.scan-live-guide::before { content: ""; width: min(86%, 410px); aspect-ratio: 2.35; border: 2px solid rgba(255,255,255,0.92); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(5,10,7,0.34); }
.scan-live-guide span { position: absolute; width: min(76%, 360px); height: 2px; background: #ffb855; box-shadow: 0 0 16px rgba(255,184,85,0.75); animation: live-scan-line 1.8s ease-in-out infinite; }
@keyframes live-scan-line { 0%,100% { transform: translateY(-45px); } 50% { transform: translateY(45px); } }
.scan-live-status { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 7px; background: rgba(20,29,24,0.86); color: white; font-size: 10px; font-weight: 800; text-align: center; backdrop-filter: blur(8px); }
.scan-live-status svg { width: 16px; height: 16px; color: #8fe0c6; }
.scan-live-status[data-state="loading"] svg { animation: spin 850ms linear infinite; }
.scan-live-status[data-state="found"] { background: rgba(12,104,82,0.92); }
.scan-live-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.scan-live-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; }
.scan-live-actions button[hidden] { display: none; }
.scan-live-actions #scanTorch[hidden] + #scanLiveCancel { grid-column: 1 / -1; }
.scan-live-actions button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.scan-live-actions svg { width: 16px; height: 16px; }
.scan-live > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; text-align: center; }

.scan-workspace { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-workspace[hidden], .scan-result[hidden] { display: none !important; }
.scan-preview { position: relative; min-height: 134px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #e8ece9; color: var(--muted); }
.scan-preview > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.scan-preview > svg { width: 28px; height: 28px; }
.scan-preview > span { position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 25px; padding: 3px; border-radius: 5px; background: rgba(23,32,27,0.84); color: white; font-size: 7px; font-weight: 750; text-align: center; }
.scan-preview > span svg { width: 11px; height: 11px; }
.scan-preview.targetable { cursor: crosshair; box-shadow: inset 0 0 0 1px rgba(19,114,95,0.18); }
.scan-preview.targetable:focus-visible { outline: 3px solid rgba(19,114,95,0.2); outline-offset: 2px; }
.scan-preview.targetable:active { box-shadow: inset 0 0 0 2px var(--green); }
.demo-product { width: 100%; height: 100%; min-height: 134px; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 8px; background: #b52026; color: white; text-align: center; }
.demo-product span { font-size: 6px; }
.demo-product strong { font-family: Georgia, serif; font-size: 17px; font-style: italic; }
.demo-product small { font-size: 9px; }
.scan-form { min-width: 0; display: grid; align-content: center; gap: 7px; }
.scan-form > label { color: var(--muted); font-size: 9px; font-weight: 750; }
.scan-detection-status { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.scan-detection-status span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.scan-detection-status svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--green); }
.scan-detection-status[data-state="loading"] svg { animation: spin 850ms linear infinite; }
.scan-detection-status[data-state="partial"] { color: #755116; }
.scan-detection-status[data-state="partial"] svg { color: var(--amber); }
.scan-detection-status[data-state="error"] { color: #8a5d1d; }
.scan-detection-status[data-state="error"] svg { color: var(--amber); }
.scan-code-input { height: 43px; display: grid; grid-template-columns: minmax(0, 1fr) 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }
.scan-code-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); }
.scan-code-input input { min-width: 0; width: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; font-size: 11px; font-weight: 800; }
.scan-code-input button { display: grid; place-items: center; border: 0; border-left: 1px solid var(--line); background: var(--green-soft); color: var(--green-dark); cursor: pointer; }
.scan-code-input button svg { width: 15px; height: 15px; }
.scan-kind-block, .scan-focus-block, .scan-product-editor, .scan-ingredient-entry, .scan-price-grid, .scan-planned, .scan-analyze { grid-column: 1 / -1; }
.scan-kind-block, .scan-focus-block { display: grid; gap: 7px; padding-top: 2px; }
.scan-kind-block > span, .scan-focus-block > span, .scan-price-grid label > span { color: var(--muted); font-size: 8px; font-weight: 750; }
.scan-kind-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scan-kind-options button { min-width: 0; min-height: 42px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); font-size: 7px; font-weight: 800; cursor: pointer; }
.scan-kind-options button svg { width: 15px; height: 15px; color: var(--green); }
.scan-kind-options button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.scan-focus-block { padding-top: 4px; border-top: 1px solid var(--line); }
.scan-focus-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.scan-focus-options button { min-width: 0; min-height: 43px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 7px; font-weight: 800; cursor: pointer; }
.scan-focus-options button svg { width: 15px; height: 15px; color: var(--green); }
.scan-focus-options button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); box-shadow: inset 0 0 0 1px rgba(19,114,95,0.08); }
.scan-product-editor { overflow: hidden; border: 1px solid #a9cfc3; border-radius: 7px; background: #f6fbf9; }
.scan-product-editor[hidden] { display: none !important; }
.scan-product-editor > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; list-style: none; cursor: pointer; }
.scan-product-editor > summary::-webkit-details-marker { display: none; }
.scan-product-editor > summary > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.scan-product-editor > summary > span > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); }
.scan-product-editor > summary > span > span { min-width: 0; display: grid; gap: 2px; }
.scan-product-editor > summary strong { font-size: 9px; }
.scan-product-editor > summary small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.scan-product-editor > summary > svg { width: 15px; height: 15px; color: var(--muted); transition: transform 160ms ease; }
.scan-product-editor[open] > summary > svg { transform: rotate(180deg); }
.scan-product-editor-body { display: grid; gap: 10px; padding: 10px; border-top: 1px solid #cfe2dc; background: white; }
.scan-product-editor-body > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.scan-product-identity-grid, .scan-product-nutrition-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.scan-product-identity-grid .wide { grid-column: 1 / -1; }
.scan-product-identity-grid label, .scan-product-nutrition-grid label { min-width: 0; display: grid; gap: 5px; }
.scan-product-identity-grid label > span, .scan-product-nutrition-grid label > span { color: var(--muted); font-size: 7px; font-weight: 800; }
.scan-product-identity-grid input, .scan-product-nutrition-grid input, .scan-product-nutrition-grid select { min-width: 0; width: 100%; height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--surface-soft); color: var(--ink); font-size: 10px; }
.scan-product-identity-grid input:focus, .scan-product-nutrition-grid input:focus, .scan-product-nutrition-grid select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); background: white; }
.scan-product-nutrition-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.scan-product-nutrition-title strong { font-size: 9px; }
.scan-product-nutrition-title small, .scan-product-editor-note { color: var(--muted); font-size: 7px; line-height: 1.45; }
.scan-product-editor-body > .secondary-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.scan-product-editor-body > .secondary-button svg { width: 15px; height: 15px; }
.scan-ingredient-entry { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }
.scan-ingredient-entry > summary { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; list-style: none; cursor: pointer; }
.scan-ingredient-entry > summary::-webkit-details-marker { display: none; }
.scan-ingredient-entry > summary > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.scan-ingredient-entry > summary > span > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--green); }
.scan-ingredient-entry > summary > span > span { min-width: 0; display: grid; gap: 2px; }
.scan-ingredient-entry strong { font-size: 9px; }
.scan-ingredient-entry small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.scan-ingredient-entry > summary > svg { width: 15px; height: 15px; color: var(--muted); transition: transform 160ms ease; }
.scan-ingredient-entry[open] > summary > svg { transform: rotate(180deg); }
.scan-ingredient-entry > label { display: grid; gap: 6px; padding: 9px; border-top: 1px solid var(--line); }
.scan-ingredient-entry > label > span { font-size: 8px; font-weight: 800; }
.scan-ingredient-entry textarea { width: 100%; min-height: 88px; resize: vertical; padding: 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--surface-soft); color: var(--ink); font: inherit; font-size: 10px; line-height: 1.45; }
.scan-ingredient-entry textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); background: white; }
.scan-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.scan-price-grid label { min-width: 0; display: grid; gap: 5px; }
.scan-price-input { height: 43px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; }
.scan-price-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); }
.scan-price-input input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; font-weight: 800; }
.scan-price-input em { color: var(--muted); font-size: 8px; font-style: normal; }
.scan-planned { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.scan-planned > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.scan-planned > span > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--green); }
.scan-planned > span > span { min-width: 0; display: grid; gap: 2px; }
.scan-planned strong { font-size: 9px; }
.scan-planned small { color: var(--muted); font-size: 7px; }
.scan-planned > input { position: absolute; opacity: 0; pointer-events: none; }
.scan-planned > i { position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: #d9dfdb; transition: background 160ms ease; }
.scan-planned > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform 160ms ease; }
.scan-planned > input:checked + i { background: var(--green); }
.scan-planned > input:checked + i::after { transform: translateX(16px); }
.scan-analyze { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; }
.scan-analyze svg { width: 15px; height: 15px; }
.scan-analyze.loading svg { animation: spin 850ms linear infinite; }

.scan-result { scroll-margin-top: 74px; margin-top: 12px; }
.scan-verdict { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 13px; border: 1px solid #cfe7de; border-radius: 8px; background: var(--green-soft); }
.scan-verdict.caution { border-color: #f1d59e; background: var(--amber-soft); }
.scan-verdict.pause { border-color: #f1c6c2; background: var(--coral-soft); }
.scan-verdict > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: white; }
.scan-verdict.caution > span { background: var(--amber); }
.scan-verdict.pause > span { background: var(--danger); }
.scan-verdict > span svg { width: 20px; height: 20px; }
.scan-verdict > div { display: grid; gap: 2px; }
.scan-verdict small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.scan-verdict h3 { margin: 0; font-size: 16px; }
.scan-verdict p { margin: 2px 0 0; color: #4f5b54; font-size: 10px; line-height: 1.45; }
.scan-product-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 0 2px; }
.scan-product-title > div { min-width: 0; }
.scan-product-title span { color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.scan-product-title h2 { margin: 3px 0; font-size: 18px; }
.scan-product-title p { margin: 0; color: var(--muted); font-size: 9px; }
.scan-product-title > strong { flex: 0 0 auto; font-size: 13px; }
.scan-source-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.scan-source-row > span { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.scan-source-row svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--green); }
.scan-source-row b { flex: 0 0 auto; padding: 4px 6px; border-radius: 999px; background: var(--amber-soft); color: #785018; font-size: 8px; }
.scan-source-row b.confirmed { background: var(--green-soft); color: var(--green-dark); }
.scan-source-row b.refined { background: #e9f0f8; color: #315d86; }
.scan-focus-result { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; margin-top: 8px; padding: 10px 11px; border-left: 3px solid var(--green); background: white; }
.scan-focus-result.warning, .scan-focus-result.pause { border-color: var(--amber); }
.scan-focus-result > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green); }
.scan-focus-result.warning > span, .scan-focus-result.pause > span { background: var(--amber-soft); color: #966313; }
.scan-focus-result svg { width: 16px; height: 16px; }
.scan-focus-result > div { min-width: 0; display: grid; gap: 2px; }
.scan-focus-result small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.scan-focus-result strong { font-size: 11px; }
.scan-focus-result p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.scan-section-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scan-section-title > span { display: grid; gap: 2px; }
.scan-section-title strong { font-size: 13px; }
.scan-section-title small { color: var(--muted); font-size: 9px; }
.scan-answer-section, .scan-nutrition-section { margin-top: 15px; }
.scan-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.scan-answer-grid article { min-width: 0; min-height: 124px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-content: start; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-answer-grid article > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #eef1ef; color: var(--muted); }
.scan-answer-grid article.good > span { background: var(--green-soft); color: var(--green); }
.scan-answer-grid article.warning > span, .scan-answer-grid article.pause > span { background: var(--amber-soft); color: #966313; }
.scan-answer-grid article.pause { border-color: #efc6c0; }
.scan-answer-grid svg { width: 14px; height: 14px; }
.scan-answer-grid article > div { min-width: 0; display: grid; align-content: start; gap: 3px; }
.scan-answer-grid small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.scan-answer-grid strong { font-size: 11px; line-height: 1.3; }
.scan-answer-grid p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.42; }
.scan-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 11px; }
.scan-metrics > div { min-width: 0; display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-metrics span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.scan-metrics span svg { width: 13px; height: 13px; color: var(--green); }
.scan-metrics strong { font-size: 14px; }
.scan-metrics small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.scan-value-legend { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; padding: 8px 9px; border-radius: 7px; background: #f1f5f3; color: #53615a; font-size: 9px; line-height: 1.45; }
.scan-value-legend svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--green); }
.scan-value-legend b { color: var(--ink); }
.scan-nutrition-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 0; }
.scan-nutrition-metrics > div { min-height: 96px; padding: 9px; }
.scan-nutrition-reference { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 7px; margin-top: 8px; padding: 9px 10px; background: #f0f4f1; color: #4f5b54; }
.scan-nutrition-reference > svg { width: 16px; height: 16px; color: var(--green); }
.scan-nutrition-reference p { margin: 0; font-size: 9px; line-height: 1.48; }
.scan-nutrition-reference span { color: var(--muted); font-weight: 700; }
.scan-price-detail { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-price-detail > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green); }
.scan-price-detail svg { width: 16px; height: 16px; }
.scan-price-detail > div { display: grid; gap: 2px; }
.scan-price-detail small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.scan-price-detail strong { font-size: 12px; }
.scan-price-detail p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.scan-ingredients { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-ingredients > strong { font-size: 11px; }
.scan-ingredients ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.scan-ingredients li { display: flex; align-items: flex-start; gap: 7px; color: #4f5b54; font-size: 9px; line-height: 1.4; }
.scan-ingredients li svg { width: 14px; height: 14px; color: var(--green); }
.scan-ingredients li.warning { display: flex; padding: 0; background: transparent; color: #785018; }
.scan-ingredients li.warning svg { color: var(--amber); }
.scan-ingredients li.neutral svg { color: var(--muted); }
.scan-insight-grid { display: grid; gap: 8px; }
.scan-decision-card, .scan-alternative { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; margin-top: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-decision-card > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.scan-decision-card svg, .scan-alternative > svg { width: 17px; height: 17px; }
.scan-decision-card > div, .scan-alternative > div { min-width: 0; display: grid; gap: 4px; }
.scan-decision-card strong, .scan-alternative strong { font-size: 11px; }
.scan-decision-card p, .scan-alternative p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.scan-details { margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-details > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; list-style: none; cursor: pointer; }
.scan-details > summary::-webkit-details-marker { display: none; }
.scan-details > summary > span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; }
.scan-details > summary svg { width: 15px; height: 15px; color: var(--green); }
.scan-details > summary > svg { color: var(--muted); transition: transform 160ms ease; }
.scan-details[open] > summary > svg { transform: rotate(180deg); }
.scan-details > div { display: grid; gap: 8px; padding: 0 11px 11px; border-top: 1px solid var(--line); }
.scan-details p { margin: 10px 0 0; color: #4f5b54; font-size: 9px; line-height: 1.55; }
.scan-details small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.scan-details small + small { margin-top: -4px; }
.scan-details .scan-translation-note { margin-top: -4px; color: #496d62; }
.scan-details dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.scan-details dl > div { min-width: 0; display: grid; gap: 2px; padding: 8px; background: white; }
.scan-details dt { color: var(--muted); font-size: 8px; }
.scan-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 800; }
.scan-data-quality { margin-top: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-data-quality-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scan-data-quality-head > span { display: grid; gap: 2px; }
.scan-data-quality-head strong { font-size: 10px; }
.scan-data-quality-head small { color: var(--muted); font-size: 8px; }
.scan-data-quality-head b { color: #966313; font-size: 13px; }
.scan-data-quality.high .scan-data-quality-head b { color: var(--green); }
.scan-quality-bar { height: 6px; overflow: hidden; margin: 9px 0 10px; border-radius: 999px; background: #e3e8e5; }
.scan-quality-bar i { display: block; height: 100%; border-radius: inherit; background: var(--amber); }
.scan-data-quality.high .scan-quality-bar i { background: var(--green); }
.scan-missing { display: grid; gap: 6px; }
.scan-missing > strong { font-size: 9px; }
.scan-missing ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.scan-missing li, .scan-missing .complete { display: flex; align-items: flex-start; gap: 5px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.scan-missing svg { flex: 0 0 auto; width: 12px; height: 12px; color: var(--green); }
.scan-complete-data { width: 100%; min-height: 50px; display: grid; grid-template-columns: 28px minmax(0,1fr) 15px; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 9px; border: 1px solid #a9cfc3; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); text-align: left; cursor: pointer; }
.scan-complete-data > svg:first-child { width: 17px; height: 17px; }
.scan-complete-data > svg:last-child { width: 14px; height: 14px; }
.scan-complete-data > span { min-width: 0; display: grid; gap: 2px; }
.scan-complete-data strong { font-size: 9px; }
.scan-complete-data small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.scan-source-note { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 7px; line-height: 1.4; }
.scan-alternative { grid-template-columns: 20px minmax(0, 1fr); background: var(--green-soft); border-color: #cfe7de; }
.scan-alternative > svg { color: var(--green); }
.scan-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin: 9px 2px 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.scan-disclaimer svg { flex: 0 0 auto; width: 12px; height: 12px; color: var(--green); }
.scan-result-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.scan-result-actions button { min-width: 0; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; font-size: 9px; }
.scan-reset { width: 100%; }
.scan-reset svg { width: 15px; height: 15px; }

.guard-config { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.guard-config > summary { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; }
.guard-config > summary::-webkit-details-marker { display: none; }
.guard-config > summary > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
.guard-config > summary > span > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--green); }
.guard-config > summary > span > span { min-width: 0; display: grid; gap: 3px; }
.guard-config > summary strong, .guard-config > summary small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guard-config > summary strong { font-size: 11px; }
.guard-config > summary small { color: var(--muted); font-size: 8px; }
.guard-config > summary > svg { width: 16px; height: 16px; color: var(--muted); transition: transform 160ms ease; }
.guard-config[open] > summary > svg { transform: rotate(180deg); }
.guard-settings { display: grid; gap: 9px; padding: 0 12px 12px; }
.guard-settings .switch-row { border-top: 1px solid var(--line); border-radius: 0; }
.guard-field { display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; gap: 10px; min-height: 46px; }
.guard-field > span { color: #4f5b54; font-size: 9px; font-weight: 700; }
.guard-field > div { height: 38px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; }
.guard-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; font-weight: 800; }
.guard-field em { color: var(--muted); font-size: 8px; font-style: normal; }
.guard-field select { width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 9px; }
.scan-history { margin-top: 14px; }
.scan-history[hidden] { display: none; }
.scan-history-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 0 2px; }
.scan-history-title > span { display: grid; gap: 2px; }
.scan-history-title strong { font-size: 12px; }
.scan-history-title small { color: var(--muted); font-size: 8px; }
.scan-history-title button { min-height: 30px; padding: 0 7px; border: 0; background: transparent; color: var(--green); font-size: 8px; font-weight: 800; cursor: pointer; }
.scan-history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.scan-history-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; cursor: pointer; }
.scan-history-list > button:last-child { border-bottom: 0; }
.scan-history-list > button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green); }
.scan-history-list > button > span:first-child svg { width: 16px; height: 16px; }
.scan-history-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.scan-history-list strong, .scan-history-list small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scan-history-list strong { font-size: 10px; }
.scan-history-list small { color: var(--muted); font-size: 8px; }
.scan-history-list em { overflow: hidden; color: var(--green-dark); font-size: 7px; font-style: normal; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.scan-history-list > button > svg { width: 15px; height: 15px; color: var(--muted); }

@media (hover: hover) {
  .home-tool:hover { border-color: #a9cfc3; box-shadow: 0 8px 22px rgba(24,36,30,0.08); }
}

@media (max-width: 360px) {
  .home-tools { grid-template-columns: 1fr; }
  .home-tool { min-height: 84px; }
  .scan-workspace { grid-template-columns: 90px minmax(0,1fr); padding: 10px; gap: 9px; }
  .scan-preview, .demo-product { min-height: 125px; }
  .scan-kind-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-focus-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .scan-answer-grid { grid-template-columns: 1fr; }
  .scan-answer-grid article { min-height: 0; }
  .scan-nutrition-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scan-price-grid { grid-template-columns: 1fr; }
  .scan-product-identity-grid, .scan-product-nutrition-grid { grid-template-columns: 1fr; }
  .scan-product-identity-grid .wide { grid-column: auto; }
  .guard-field { grid-template-columns: minmax(0,1fr) 125px; }
  .compare-tray { grid-template-columns: auto minmax(0,1fr) 30px auto; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #e9ece8;
}

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

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

button {
  color: inherit;
}

svg {
  width: 20px;
  height: 20px;
}

.client-page {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

.client-page,
.client-page * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.client-page::-webkit-scrollbar,
.client-page *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.client-page.sheet-open {
  overflow: hidden;
}

.app-shell {
  width: min(480px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  background: var(--app-bg);
  box-shadow: 0 0 60px rgba(27, 39, 32, 0.09);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 18px 8px;
  background: rgba(247, 248, 246, 0.92);
  border-bottom: 1px solid rgba(226, 230, 225, 0.7);
  backdrop-filter: blur(18px);
}

.location-button,
.icon-button,
.category-tile,
.text-button,
.filter-chips button,
.favorite-button,
.primary-button,
.secondary-button,
.service-options button,
.slot-button,
.nav-item,
.settings-list button,
.prompt-suggestions button,
.booking-actions button,
.empty-state button,
.ai-result-card {
  border: 0;
  cursor: pointer;
}

.location-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  text-align: left;
}

.location-button > span:not(.brand-mark) {
  width: clamp(108px, 14vw, 152px);
  min-width: 0;
  display: grid;
  gap: 1px;
}

.location-button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.location-button strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.location-button > svg {
  width: 16px;
  color: var(--muted);
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-weight: 850;
  font-size: 18px;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.icon-button:active,
.favorite-button:active,
.nav-item:active,
.category-tile:active {
  transform: scale(0.94);
}

.notification-button {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid white;
}

.app-content {
  min-height: calc(100dvh - 70px);
  padding: 18px 16px calc(98px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.client-page.compare-active .app-content { padding-bottom: calc(162px + env(safe-area-inset-bottom)); }

.app-panel {
  display: none;
}

.app-panel.active {
  display: block;
  animation: panel-in 260ms ease both;
}

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

.home-heading {
  margin: 0 2px 18px;
}

.home-heading p,
.page-heading p,
.profile-head p {
  margin: 0;
  color: var(--muted);
}

.home-heading p {
  font-size: 14px;
  margin-bottom: 4px;
}

.home-heading h1,
.page-heading h1,
.profile-head h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.search-shell {
  position: relative;
  z-index: 30;
}

.home-search {
  height: 54px;
  display: grid;
  grid-template-columns: 24px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 5px 18px rgba(28, 44, 36, 0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.home-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(19, 114, 95, 0.12);
}

.home-search > svg {
  color: var(--muted);
}

.home-search input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}

.home-search input::placeholder,
textarea::placeholder {
  color: #99a19d;
}

.home-search input::-webkit-search-cancel-button {
  display: none;
  appearance: none;
}

.search-clear {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 160ms ease, transform 160ms ease;
}

.search-clear.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.search-clear svg {
  width: 16px;
  height: 16px;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: min(390px, calc(100dvh - 170px));
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 46px rgba(22, 38, 31, 0.18);
  backdrop-filter: blur(16px);
  overscroll-behavior: contain;
}

.search-suggestions[hidden] { display: none !important; }

.search-suggestions button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(76px, auto) 14px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.search-suggestions button + button { border-top: 1px solid #edf0ee; }
.search-suggestions button:hover,
.search-suggestions button:focus-visible { background: var(--green-soft); outline: 0; }

.search-suggestion-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green);
}
.search-suggestion-icon svg { width: 18px; height: 18px; }
.search-suggestion-copy,
.search-suggestion-meta { min-width: 0; display: grid; gap: 2px; }
.search-suggestion-copy small { color: var(--green-dark); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.search-suggestion-copy strong { overflow: hidden; color: var(--ink); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.search-suggestion-copy em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.search-suggestion-meta { justify-items: end; text-align: right; }
.search-suggestion-meta strong { font-size: 10px; white-space: nowrap; }
.search-suggestion-meta small { max-width: 118px; overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.search-suggestion-chevron { width: 14px; height: 14px; color: #9ba6a0; }

.category-rail {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  margin: 18px -16px 22px;
  padding: 6px 16px 5px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.category-rail::-webkit-scrollbar,
.filter-chips::-webkit-scrollbar,
.prompt-suggestions::-webkit-scrollbar {
  display: none;
}

.category-tile {
  flex: 0 0 64px;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  scroll-snap-align: start;
  transition: color 180ms ease, transform 160ms ease;
}

.category-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.category-icon svg {
  width: 23px;
  height: 23px;
}

.category-all { background: #e9eeeb; color: #526059; }
.category-clinic { background: var(--coral-soft); color: var(--coral); }
.category-beauty { background: var(--violet-soft); color: var(--violet); }
.category-food { background: var(--amber-soft); color: var(--amber); }
.category-pc { background: var(--blue-soft); color: var(--blue); }
.category-sport { background: var(--green-soft); color: var(--green); }

.category-tile.active {
  color: var(--ink);
}

.category-tile.active .category-icon {
  border-color: currentColor;
  box-shadow: 0 5px 15px rgba(28, 44, 36, 0.1);
  transform: translateY(-2px);
}

.upcoming-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow-soft);
}

.upcoming-date {
  min-height: 56px;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  padding: 5px 4px;
  text-align: center;
}

.upcoming-date strong { font-size: 16px; }
.upcoming-date span { font-size: 10px; line-height: 1.15; color: rgba(255,255,255,0.7); }
.upcoming-copy { min-width: 0; display: grid; gap: 2px; }
.upcoming-copy small { color: #9bd5c7; font-size: 11px; }
.upcoming-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.upcoming-copy span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,0.66); font-size: 11px; }
.upcoming-card .icon-button { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: white; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 25px 2px 12px;
}

.section-heading h2 {
  margin: 0 0 3px;
  font-size: 20px;
  letter-spacing: 0;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
}

.text-button svg { width: 16px; height: 16px; }

.filter-chips,
.prompt-suggestions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px 13px;
  padding: 0 16px 4px;
  scrollbar-width: none;
  transition: background 240ms ease;
}

.filter-chips.attention {
  animation: filter-attention 650ms ease;
}

@keyframes filter-attention {
  50% { transform: translateX(5px); }
}

.filter-chips button,
.prompt-suggestions button {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: #526059;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.filter-chips button svg { width: 15px; height: 15px; }

.filter-chips button.active {
  background: var(--green-soft);
  border-color: #8bbdaf;
  color: var(--green-dark);
}

.place-list {
  display: grid;
  gap: 14px;
}

.place-card {
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(28, 44, 36, 0.06);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.place-card.entering { animation: card-in 260ms ease both; animation-delay: var(--delay); }

.place-card:active {
  transform: scale(0.985);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.place-image-wrap {
  position: relative;
  height: 176px;
  overflow: hidden;
  background: #dde3df;
}

.place-image-wrap img,
.sheet-cover img,
.booking-visual img,
.ai-result-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.place-card:hover .place-image-wrap img {
  transform: scale(1.025);
}

.place-image-wrap img {
  transition: transform 500ms ease;
}

.availability-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(20, 29, 24, 0.85);
  color: white;
  font-size: 11px;
  font-weight: 750;
  backdrop-filter: blur(8px);
}

.availability-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #69d3ac;
  box-shadow: 0 0 0 3px rgba(105, 211, 172, 0.17);
}

.favorite-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(18, 28, 23, 0.12);
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.place-image-wrap .favorite-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.favorite-button svg { width: 19px; height: 19px; }
.favorite-button.active { color: var(--danger); background: #fff7f7; }
.favorite-button.active svg { fill: currentColor; }

.place-card-body {
  padding: 14px;
}
.place-card[data-category="clinic"] { --place-accent: var(--coral); }
.place-card[data-category="beauty"] { --place-accent: var(--violet); }
.place-card[data-category="food"] { --place-accent: var(--amber); }
.place-card[data-category="pc"] { --place-accent: var(--blue); }
.place-card[data-category="sport"] { --place-accent: var(--green); }
.place-card[data-category] .place-card-body { border-top: 3px solid var(--place-accent, var(--green)); }
.place-card[data-category] .place-category { color: var(--place-accent, var(--green)); }

.place-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.place-title-row > div {
  min-width: 0;
}

.place-category {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.place-title-row h3,
.booking-card h3,
.ai-answer h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}

.rating-pill,
.sheet-rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.rating-pill svg,
.sheet-rating svg {
  width: 15px;
  height: 15px;
  color: #d88d12;
  fill: #d88d12;
}

.place-location,
.sheet-address {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.place-location svg,
.sheet-address svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.place-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signal {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--surface-soft);
  color: #56625c;
  font-size: 10px;
  font-weight: 720;
}

.signal svg { flex: 0 0 auto; width: 13px; height: 13px; }
.signal.verified, .signal.calm { background: var(--green-soft); color: var(--green-dark); }
.signal.halal { background: #e9f5e8; color: #42733f; }
.signal.caution { background: var(--amber-soft); color: #8b560e; }

.place-card-footer {
  min-height: 39px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.place-card-footer > span:first-child {
  display: grid;
  gap: 1px;
}

.place-card-footer small { color: var(--muted); font-size: 10px; }
.place-card-footer strong { font-size: 14px; }
.open-hint { display: inline-flex; align-items: center; padding: 5px 0; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 750; }
.open-hint svg { width: 16px; height: 16px; }

.empty-state {
  display: grid;
  justify-items: center;
  padding: 42px 24px;
  border: 1px dashed #cbd2cd;
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
  text-align: center;
}

.empty-state > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}

.empty-state h3 { margin: 0 0 6px; font-size: 17px; }
.empty-state p { max-width: 280px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-state button { min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: white; font-size: 13px; font-weight: 750; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  width: min(480px, 100%);
  height: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 30px rgba(24, 36, 30, 0.06);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.nav-item {
  min-width: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 4px;
  background: transparent;
  color: #7a837e;
  font-size: 10px;
  font-weight: 700;
  transition: color 180ms ease, transform 160ms ease;
}

.nav-item > svg,
.nav-icon-wrap > svg {
  width: 22px;
  height: 22px;
}

.nav-item.active { color: var(--green); }
.nav-item.active > svg, .nav-item.active .nav-icon-wrap > svg { stroke-width: 2.5; }
.nav-icon-wrap { position: relative; display: grid; place-items: center; }
.nav-icon-wrap b { position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--danger); color: white; border: 2px solid var(--surface); font-size: 9px; }
.nav-icon-wrap b[hidden] { display: none !important; }
.notification-button.has-alert > svg { color: var(--danger); }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(12, 20, 16, 0.46);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 240ms ease;
}

.sheet-backdrop.visible { opacity: 1; }

.place-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  width: min(480px, 100%);
  max-height: 92dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-high);
  transform: translate(-50%, 102%);
  transition: transform 300ms cubic-bezier(.2,.75,.25,1);
}

.place-sheet.open { transform: translate(-50%, 0); }

.sheet-panel-loading {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.sheet-panel-loading svg { width: 24px; height: 24px; color: var(--green); }

.sheet-handle {
  position: sticky;
  top: 7px;
  z-index: 5;
  width: 40px;
  height: 4px;
  margin: 7px auto -11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.sheet-close {
  position: absolute;
  top: 17px;
  left: 14px;
  z-index: 6;
  border: 0;
  background: rgba(255,255,255,0.93);
}

.sheet-cover {
  position: relative;
  height: 235px;
  overflow: hidden;
  background: #dfe4e1;
}

.sheet-favorite {
  position: absolute;
  top: 17px;
  right: 14px;
}

.sheet-body {
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
}

.sheet-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.sheet-title-row h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: 0;
}

.sheet-rating {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  gap: 0 4px;
}

.sheet-rating small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.trust-summary {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.7fr;
  gap: 1px;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.trust-summary > div {
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 10px;
  background: var(--surface);
}

.trust-summary > div:first-child {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.trust-summary > div:first-child span:last-child { display: grid; gap: 2px; }
.trust-summary strong { font-size: 14px; }
.trust-summary small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.trust-score { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 13px; font-weight: 850; }

.notice-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--amber-soft);
  color: #785018;
}

.notice-card.positive { background: var(--green-soft); color: var(--green-dark); }
.notice-card > svg { width: 20px; height: 20px; }
.notice-card > span { display: grid; gap: 3px; }
.notice-card strong { font-size: 12px; }
.notice-card small { font-size: 11px; line-height: 1.4; }

.sheet-section {
  margin-top: 22px;
}

.sheet-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sheet-section-title h3 { margin: 0; font-size: 16px; }
.sheet-section-title span { color: var(--muted); font-size: 10px; }

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

.service-options button {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: #55605a;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.service-options button.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}

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

.booking-day-rail {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 2px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}
.booking-day-rail::-webkit-scrollbar { display: none; }
.booking-day-rail[hidden], .booking-time-heading[hidden] { display: none; }
.booking-day-button {
  flex: 0 0 112px;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}
.booking-day-button strong { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.booking-day-button span { color: var(--muted); font-size: 8px; }
.booking-day-button.active { border-color: var(--green); background: var(--green); color: white; }
.booking-day-button.active span { color: rgba(255,255,255,0.76); }
.booking-time-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 9px; }
.booking-time-heading strong { font-size: 11px; }
.booking-time-heading span { color: var(--muted); font-size: 8px; }
.booking-time-grid .slot-button { min-height: 52px; }
.booking-time-grid .slot-button strong { font-size: 13px; }
.booking-time-grid .slot-button span { font-size: 8px; }
.booking-slots-empty { grid-column: 1 / -1; }
.provider-filter-rail { max-width: 100%; display: flex; gap: 8px; margin: 0; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x; }
.provider-filter-rail::-webkit-scrollbar { display: none; }
.provider-filter-button { flex: 0 0 148px; min-width: 0; min-height: 60px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: left; scroll-snap-align: start; cursor: pointer; }
.provider-filter-button > span:last-child { min-width: 0; display: grid; gap: 3px; }
.provider-filter-button strong, .provider-filter-button small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.provider-filter-button strong { font-size: 10px; }
.provider-filter-button small { color: var(--muted); font-size: 8px; }
.provider-filter-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-soft); color: var(--green); }
.provider-filter-avatar > img, .provider-filter-avatar > .provider-icon { width: 100%; height: 100%; }
.provider-filter-avatar img { object-fit: cover; }
.provider-filter-avatar .provider-icon { display: grid; place-items: center; }
.provider-filter-avatar svg { width: 17px; height: 17px; }
.provider-filter-button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.provider-filter-button:disabled { opacity: 0.48; cursor: not-allowed; }
.slot-alert-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.slot-alert-card.active { border-color: #9ac9bb; background: var(--green-soft); }
.slot-alert-icon { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: white; color: var(--green); }
.slot-alert-icon svg { width: 18px; height: 18px; }
.slot-alert-copy { grid-column: 2 / -1; min-width: 0; display: grid; gap: 3px; }
.slot-alert-copy strong { font-size: 10px; }
.slot-alert-copy small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.slot-alert-period { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.slot-alert-period select { min-width: 0; height: 34px; padding: 0 24px 0 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: 9px; }
.slot-alert-card > button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: var(--green); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.slot-alert-card.active > button { background: white; color: var(--green-dark); }

.slot-alert-period .yaqin-select { width: 100%; }
.slot-alert-period .yaqin-select-trigger { min-height: 34px; padding-right: 7px; padding-left: 8px; }
.slot-alert-period .yaqin-select-value { font-size: 9px; }
.guard-field .yaqin-select-trigger { min-height: 38px; }
.settings-field .yaqin-select-trigger { min-height: 48px; }

.slot-button {
  min-width: 0;
  min-height: 57px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #b8d5cc;
  background: #f7fcfa;
  color: var(--green-dark);
  transition: transform 160ms ease, background 160ms ease;
}

.slot-button:active:not(:disabled) { transform: scale(0.96); background: var(--green-soft); }
.slot-button span { font-size: 10px; color: var(--muted); }
.slot-button strong { font-size: 13px; }
.slot-button.booked { border-color: var(--line); background: var(--surface-soft); color: #939b97; cursor: not-allowed; text-decoration: line-through; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(432px, calc(100% - 32px));
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px 11px 16px;
  border-radius: 8px;
  background: #17201b;
  color: white;
  box-shadow: var(--shadow-high);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 200ms ease, transform 220ms ease;
}

.toast.visible { opacity: 1; pointer-events: none; transform: translate(-50%, 0); }
.toast.visible.actionable { pointer-events: auto; }
.client-page.compare-active:not(.sheet-open) .toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
.toast span { font-size: 13px; font-weight: 650; }
.toast button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: rgba(255,255,255,0.12); color: #8fe0c6; font-size: 12px; font-weight: 800; cursor: pointer; }

.page-heading {
  margin: 5px 2px 22px;
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px !important;
  color: var(--green) !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.page-kicker svg { width: 16px; height: 16px; }
.page-heading h1 { max-width: 380px; margin-bottom: 10px; font-size: 27px; }
.page-heading > p:last-child { max-width: 390px; font-size: 13px; line-height: 1.5; }
.compact-heading { margin-bottom: 18px; }

.prompt-suggestions {
  margin-bottom: 13px;
}

.prompt-suggestions button {
  min-height: 34px;
  background: var(--green-soft);
  border-color: #cce4dc;
  color: var(--green-dark);
}

.ai-compose-card,
.decision-checker,
.booking-card,
.profile-stats,
.settings-list,
.business-entry {
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(28, 44, 36, 0.05);
}

.ai-compose-card {
  padding: 15px;
}

.ai-compose-card label,
.decision-body label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
}

.ai-compose-card textarea,
.decision-body textarea {
  width: 100%;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.primary-button,
.secondary-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-size: 13px;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease;
}

.primary-button:hover { background: var(--green-dark); }
.primary-button:active, .secondary-button:active { transform: scale(0.97); }
.primary-button svg { width: 17px; height: 17px; }
.secondary-button { width: 100%; background: var(--ink); }

.ai-output {
  margin-top: 13px;
}

.output-placeholder {
  min-height: 116px;
  display: grid;
  justify-items: center;
  place-content: center;
  gap: 10px;
  padding: 20px;
  border: 1px dashed #cdd4cf;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.output-placeholder svg { width: 26px; height: 26px; color: var(--blue); }
.output-placeholder p { max-width: 300px; margin: 0; font-size: 12px; line-height: 1.5; }

.ai-answer {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  padding: 14px;
  border-radius: 8px;
  background: var(--blue-soft);
  border: 1px solid #dae4f8;
}

.ai-answer-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue);
  color: white;
}

.ai-answer h3 { margin-bottom: 5px; font-size: 15px; }
.ai-answer p { margin: 0; color: #5a6988; font-size: 12px; line-height: 1.5; }

.ai-result-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
}

.ai-result-card img { width: 64px; height: 60px; border-radius: 6px; }
.ai-result-card > span { min-width: 0; display: grid; gap: 3px; }
.ai-result-card small, .ai-result-card em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 10px; font-style: normal; }
.ai-result-card strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.ai-result-card > svg { color: var(--green); }
.ai-alternatives { margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.decision-checker {
  overflow: hidden;
  margin-top: 14px;
}

.decision-checker summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
}

.decision-checker summary::-webkit-details-marker { display: none; }
.decision-checker summary span { display: inline-flex; align-items: center; gap: 8px; }
.decision-checker summary span svg { color: var(--violet); }
.decision-checker summary > svg { width: 17px; color: var(--muted); transition: transform 180ms ease; }
.decision-checker[open] summary > svg { transform: rotate(180deg); }
.decision-body { padding: 13px 14px 14px; border-top: 1px solid var(--line); }
.decision-body textarea { min-height: 96px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.decision-output { margin-top: 10px; padding: 11px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.5; }
.decision-output strong { color: var(--ink); }

.booking-list {
  display: grid;
  gap: 13px;
}

.booking-card {
  overflow: hidden;
}

.booking-visual {
  position: relative;
  height: 128px;
  background: #dfe4e1;
}

.booking-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,24,20,0.48), transparent 70%);
}

.booking-date {
  position: absolute;
  left: 15px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 1px;
  color: white;
}

.booking-date strong { font-size: 25px; line-height: 1; }
.booking-date span { font-size: 12px; color: rgba(255,255,255,0.78); }
.booking-body { padding: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 9px; padding: 5px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status-pill svg { width: 13px; height: 13px; }
.status-pill.confirmed { background: var(--green-soft); color: var(--green-dark); }
.status-pill.pending { background: var(--amber-soft); color: #865510; }
.booking-body p { margin: 5px 0 13px; color: var(--muted); font-size: 12px; }
.booking-actions { display: flex; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line); }
.booking-actions button { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; background: var(--surface-soft); font-size: 11px; font-weight: 750; }
.booking-actions button svg { width: 15px; height: 15px; }
.booking-actions .danger-text { margin-left: auto; background: transparent; color: var(--danger); }
.bookings-empty { margin-top: 30px; }

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 5px 2px 18px;
}

.profile-head > div:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.profile-settings-button { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--green-dark); cursor: pointer; }
.profile-settings-button svg { width: 19px; height: 19px; }

.profile-head h1 { font-size: 22px; margin-bottom: 4px; }
.profile-head p { font-size: 12px; }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 22px; font-weight: 850; box-shadow: 0 7px 18px rgba(19,114,95,0.2); }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin-bottom: 14px;
}

.profile-stats div { min-width: 0; min-height: 76px; display: grid; place-content: center; justify-items: center; gap: 3px; border-right: 1px solid var(--line); }
.profile-stats div:last-child { border-right: 0; }
.profile-stats strong { font-size: 19px; }
.profile-stats span { color: var(--muted); font-size: 10px; }

.settings-list {
  overflow: hidden;
}

.settings-list button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.settings-list button:last-child { border-bottom: 0; }
.settings-list button > svg { width: 17px; color: #9ca49f; }

.business-entry {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 12px;
  color: var(--ink);
  text-decoration: none;
}

.business-entry-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.business-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.business-entry strong { font-size: 13px; }
.business-entry small { color: var(--muted); font-size: 11px; }
.business-entry > svg { color: var(--blue); }

.profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 2px 10px;
}

.profile-section-heading h2 {
  margin: 0;
  font-size: 17px;
}

.profile-section-heading button {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.favorite-preview {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.favorite-preview > button {
  min-height: 66px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.favorite-preview img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
}

.favorite-preview button > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.favorite-preview strong,
.favorite-preview small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.favorite-preview strong { font-size: 12px; }
.favorite-preview small { color: var(--muted); font-size: 10px; }
.favorite-preview button > svg { width: 16px; color: var(--muted); }

.favorites-empty {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #cbd2cd;
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.favorites-empty svg {
  flex: 0 0 auto;
  color: var(--coral);
}

.photo-count {
  position: absolute;
  right: 62px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(20, 29, 24, 0.75);
  color: white;
  font-size: 10px;
  font-weight: 750;
  backdrop-filter: blur(7px);
}

.photo-count svg { width: 14px; height: 14px; }

.sheet-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 16px 0 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.sheet-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sheet-tabs button.active {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(28, 44, 36, 0.08);
}

.sheet-tabs button span {
  margin-left: 3px;
  color: var(--muted);
  font-size: 9px;
}

.sheet-view {
  animation: panel-in 220ms ease both;
}

.service-options-detailed {
  grid-template-columns: 1fr;
}

.service-options-detailed button {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
}

.service-options-detailed button > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.service-options-detailed button strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

.service-options-detailed button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.service-options-detailed button b {
  flex: 0 0 auto;
  font-size: 11px;
}

.provider-preview {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.provider-stack {
  flex: 0 0 auto;
  display: flex;
  padding-left: 8px;
}

.provider-stack > span {
  width: 39px;
  height: 39px;
  margin-left: -8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.provider-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-stack .provider-icon {
  display: grid;
  place-items: center;
}

.provider-stack svg { width: 18px; height: 18px; }
.provider-preview > div:last-child { min-width: 0; display: grid; gap: 3px; }
.provider-preview strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.provider-preview small { color: var(--muted); font-size: 9px; }

.cancellation-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 10px;
}

.cancellation-note svg { width: 15px; height: 15px; color: var(--green); }

.review-teaser {
  margin-top: 20px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.review-teaser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d18a13;
  font-size: 10px;
  font-weight: 800;
}

.review-teaser-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
}

.review-teaser-head svg { width: 14px; height: 14px; }
.review-teaser p { margin: 10px 0; color: #4f5b54; font-size: 11px; line-height: 1.55; }
.review-teaser button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.review-teaser button svg { width: 14px; height: 14px; }

.reputation-overview {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 16px;
  margin-top: 16px;
  padding: 15px;
  border-radius: 8px;
  background: #fbfcfb;
  border: 1px solid var(--line);
}

.reputation-score {
  display: grid;
  align-content: center;
  justify-items: center;
}

.reputation-score strong { font-size: 36px; line-height: 1; }
.reputation-score span { margin: 5px 0; color: #d88d12; font-size: 11px; }
.reputation-score small { color: var(--muted); font-size: 8px; text-align: center; }
.rating-bars { display: grid; align-content: center; gap: 5px; }
.rating-bars > div { display: grid; grid-template-columns: 10px 1fr 25px; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.rating-bars i { height: 5px; overflow: hidden; border-radius: 999px; background: #e7ebe8; }
.rating-bars b { display: block; height: 100%; border-radius: inherit; background: #d88d12; }
.rating-bars small { text-align: right; }

.review-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.review-metrics div {
  min-height: 58px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.review-metrics strong { font-size: 16px; }
.review-metrics span { color: var(--muted); font-size: 9px; }

.review-policy {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  padding: 12px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green-dark);
}

.review-policy > svg { width: 19px; height: 19px; }
.review-policy > span { display: grid; gap: 3px; }
.review-policy strong { font-size: 11px; }
.review-policy small { font-size: 9px; line-height: 1.45; }
.review-list { display: grid; gap: 10px; margin-top: 12px; }
.review-card { min-width: 0; display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.review-card header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.review-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--green); font-size: 12px; font-weight: 850; }
.review-card header > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.review-card header strong { font-size: 11px; }
.review-card header small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 8px; }
.review-card header b { color: #d88d12; font-size: 8px; }
.review-card > p { margin: 0; color: #4f5953; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.review-card footer { position: relative; z-index: 1; min-width: 0; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-card footer > span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 8px; font-weight: 750; }
.review-card footer svg { width: 13px; height: 13px; }
.review-card footer button { min-height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 9px; cursor: pointer; }
.review-card footer button.active { background: var(--green-soft); color: var(--green); }
.review-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.review-tags span { padding: 4px 7px; border-radius: 6px; background: var(--surface-soft); color: var(--green-dark); font-size: 8px; font-weight: 750; }

.booking-sheet,
.utility-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 65;
  width: min(480px, 100%);
  height: min(92dvh, 850px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px 22px 0 0;
  background: var(--app-bg);
  box-shadow: var(--shadow-high);
  transform: translate(-50%, 102%);
  transition: transform 300ms cubic-bezier(.2,.75,.25,1);
}

.booking-sheet.open,
.utility-sheet.open { transform: translate(-50%, 0); }

.overlay-header {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 246, 0.94);
  backdrop-filter: blur(16px);
}

.overlay-header > strong { text-align: center; font-size: 14px; }
.overlay-header .icon-button { width: 40px; height: 40px; }
.header-spacer { width: 40px; height: 40px; }

#bookingSheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#bookingContent {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.place-sheet,
.booking-sheet-body,
.settings-sheet {
  overflow-anchor: none;
}

.booking-sheet-body {
  min-height: 0;
  padding: 14px 14px 24px;
  overflow-y: auto;
}

.booking-summary-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.booking-summary-card img { width: 62px; height: 62px; border-radius: 6px; object-fit: cover; }
.booking-summary-card > div { min-width: 0; display: grid; gap: 3px; }
.booking-summary-card span { color: var(--green); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.booking-summary-card strong, .booking-summary-card small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-summary-card strong { font-size: 12px; }
.booking-summary-card small { color: var(--muted); font-size: 9px; }
.booking-summary-card > b { padding-right: 5px; font-size: 10px; }

.booking-time-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.booking-time-card > span {
  min-width: 0;
  min-height: 72px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 6px;
  background: white;
  text-align: center;
}

.booking-time-card svg { width: 16px; height: 16px; color: var(--green); }
.booking-time-card small { color: var(--muted); font-size: 8px; }
.booking-time-card strong { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }

.booking-hold-strip {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #b9ded2;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green-dark);
}
.booking-hold-strip > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: white; }
.booking-hold-strip > span svg { width: 16px; height: 16px; }
.booking-hold-strip.loading > span svg { animation: spin 850ms linear infinite; }
.booking-hold-strip > div { min-width: 0; display: grid; gap: 3px; }
.booking-hold-strip strong,
.booking-hold-strip small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-hold-strip strong { font-size: 10px; }
.booking-hold-strip small { color: var(--muted); font-size: 8px; }
.booking-hold-strip small b { color: var(--green-dark); font-size: 9px; }
.booking-hold-strip.error,
.booking-hold-strip.expired { border-color: #ead5b0; background: var(--amber-soft); color: #785018; }
.booking-hold-strip.error small,
.booking-hold-strip.expired small { color: #8a6a3a; }
.booking-hold-strip button { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid currentColor; border-radius: 7px; background: transparent; color: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.booking-hold-strip button[hidden] { display: none; }
.booking-hold-strip button svg { width: 12px; height: 12px; }

.checkout-section {
  margin-top: 20px;
}

.checkout-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}

.checkout-title h3 { margin: 0; font-size: 15px; }
.checkout-title > span { color: var(--muted); font-size: 9px; }
.provider-options, .payment-options { display: grid; gap: 7px; }
.attendee-options { display: flex; gap: 7px; margin: 0 -14px; padding: 1px 14px 7px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.attendee-options::-webkit-scrollbar { display: none; }
.attendee-options > button { flex: 0 0 178px; min-width: 0; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 17px; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: left; scroll-snap-align: start; cursor: pointer; }
.attendee-options > button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.attendee-options > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.attendee-options strong, .attendee-options small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attendee-options strong { font-size: 10px; }
.attendee-options small { color: var(--muted); font-size: 8px; }
.attendee-options svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--green); color: white; opacity: 0; }
.attendee-options > button.active { border-color: var(--green); background: #f7fcfa; }
.attendee-options > button.active svg { opacity: 1; }
.checkout-hint { margin: 6px 2px 0; color: var(--muted); font-size: 8px; }

.provider-options > button,
.payment-options > button {
  min-height: 61px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  cursor: pointer;
}

.provider-options > button.active,
.payment-options > button.active {
  border-color: var(--green);
  background: #f7fcfa;
}

.provider-options > button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  background: var(--surface-soft);
}

.provider-options button > img,
.provider-options button > .provider-icon,
.provider-any,
.payment-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-soft);
  color: var(--green);
}

.provider-options button > span:nth-child(2),
.payment-options button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.provider-options strong, .payment-options strong { font-size: 11px; }
.provider-options small, .payment-options small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }
.provider-options button > svg:last-child, .payment-options button > svg:last-child { width: 17px; height: 17px; padding: 2px; border-radius: 50%; background: var(--green); color: white; opacity: 0; }
.provider-options button.active > svg:last-child, .payment-options button.active > svg:last-child { opacity: 1; }

.payment-options {
  grid-template-columns: repeat(3, 1fr);
}

.payment-options > button {
  min-width: 0;
  min-height: 89px;
  grid-template-columns: 1fr;
  grid-template-rows: 36px auto 0;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.payment-options button > span:nth-child(2) { justify-items: center; }
.payment-options button > svg:last-child { position: absolute; }
.payment-logo { width: 36px; height: 36px; border-radius: 8px; font-size: 15px; font-weight: 900; }
.payment-logo.payme { background: #5ad4cf; color: #113e42; }
.payment-logo.click { background: #365ddb; color: white; }
.payment-logo.cash { background: var(--green-soft); color: var(--green); }

.compact-checkout {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.checkout-line {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}

.checkout-line:last-child { border-bottom: 0; }
.checkout-line span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.checkout-line svg { width: 15px; height: 15px; color: var(--green); }
.checkout-line strong { max-width: 55%; font-size: 9px; line-height: 1.35; text-align: right; }

.booking-checkout-bar {
  position: static;
  z-index: 9;
  width: 100%;
  min-height: calc(78px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 -10px 28px rgba(24,36,30,0.06);
  backdrop-filter: blur(16px);
}

.booking-checkout-bar > span { display: grid; gap: 2px; }
.booking-checkout-bar small { color: var(--muted); font-size: 8px; }
.booking-checkout-bar strong { font-size: 13px; }
.booking-checkout-bar .primary-button { flex: 0 1 230px; }
.booking-checkout-bar .primary-button:disabled { cursor: not-allowed; opacity: .5; }

.booking-submit-error {
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid #edc5bf;
  border-radius: 8px;
  background: var(--coral-soft);
  color: var(--danger);
  font-size: 9px;
  font-weight: 750;
}
.booking-submit-error svg { width: 16px; height: 16px; }
.booking-submit-error[hidden] { display: none; }
.booking-success { grid-row: 1 / -1; overflow-y: auto; }

.booking-success {
  min-height: calc(92dvh - 65px);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 30px 20px;
  text-align: center;
}

.success-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  box-shadow: 0 10px 30px rgba(19,114,95,0.26);
  animation: success-pop 460ms cubic-bezier(.2,.8,.2,1.2) both;
}

.success-mark svg { width: 34px; height: 34px; stroke-width: 3; }
@keyframes success-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
.booking-success > p:first-of-type { margin: 0 0 6px; color: var(--green); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.booking-success h2 { max-width: 330px; margin: 0 0 18px; font-size: 24px; line-height: 1.2; }
.success-ticket { width: 100%; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); text-align: left; }
.success-ticket div { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: white; }
.success-ticket span { color: var(--muted); font-size: 9px; }
.success-ticket strong { max-width: 68%; font-size: 11px; text-align: right; }
.success-note { display: flex; align-items: center; gap: 7px; max-width: 310px; margin: 15px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.success-note svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--green); }
.success-primary { width: 100%; }
.success-secondary { min-height: 40px; margin-top: 5px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }

.booking-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.booking-facts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.booking-facts svg { width: 12px; height: 12px; }

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 20, 16, 0.46);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 220ms ease;
}

.panel-backdrop.visible { opacity: 1; }
.utility-sheet { z-index: 75; height: min(86dvh, 760px); background: var(--app-bg); }
.utility-body { padding: 5px 14px 100px; }

.filter-group {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { margin: 0 0 11px; font-size: 14px; }
.filter-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filter-label-row output { color: var(--green); font-size: 11px; font-weight: 800; }

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 8px;
  background: #e9ece9;
}

.segmented-control button {
  min-height: 38px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.segmented-control button.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(28,44,36,0.08); }
.range-control { width: 100%; height: 22px; margin: 2px 0; accent-color: var(--green); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }

.switch-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.switch-row:last-child { border-bottom: 0; }
.switch-row > span { min-width: 0; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; }
.switch-row > span > svg { width: 19px; height: 19px; color: var(--green); }
.switch-row > span > span { min-width: 0; display: grid; gap: 2px; }
.switch-row strong { font-size: 11px; }
.switch-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 8px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row > i { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: #cfd5d1; transition: background 180ms ease; }
.switch-row > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform 180ms ease; }
.switch-row input:checked + i { background: var(--green); }
.switch-row input:checked + i::after { transform: translateX(18px); }

.utility-footer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  min-height: calc(76px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}

.reset-button { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }

.notification-actions {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  background: white;
  color: var(--muted);
  font-size: 10px;
}

.notification-actions button { padding: 5px 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.notification-list { display: grid; padding: 7px 12px calc(20px + env(safe-area-inset-bottom)); }
.notification-item { position: relative; min-height: 88px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 8px; align-items: start; gap: 10px; padding: 13px 5px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.notification-item.read { opacity: .62; }
.notification-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.notification-icon.slot, .notification-icon.move { background: var(--blue-soft); color: var(--blue); }
.notification-icon.cancel { background: var(--coral-soft); color: var(--coral); }
.notification-icon svg { width: 19px; height: 19px; }
.notification-item > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.notification-item strong { font-size: 11px; }
.notification-item small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.notification-item em { color: #9ba39f; font-size: 8px; font-style: normal; }
.unread-mark { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--coral); }
.notifications-empty { display: grid; justify-items: center; gap: 9px; padding: 70px 20px; color: var(--muted); }
.notifications-empty svg { width: 28px; height: 28px; }
.notifications-empty p { margin: 0; font-size: 11px; }

/* Business workspace */
.business-page {
  min-height: 100vh;
  background: #f4f6f4;
  color: var(--ink);
}

.business-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.business-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.business-topbar h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: 0; }
.business-topbar p { margin: 0; }
.eyebrow { margin: 0 0 8px !important; color: var(--green) !important; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.muted { color: var(--muted); }

.business-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}

.business-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(28,44,36,0.05);
}

.metric strong { font-size: 25px; }
.metric span { color: var(--muted); font-size: 12px; }

.business-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.business-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(28,44,36,0.05);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2 { margin: 0; font-size: 19px; }
.section-title span { color: var(--muted); font-size: 12px; }
.ops-list, .slot-manager { display: grid; gap: 9px; }

.ops-filters {
  display: flex;
  gap: 6px;
  margin: 0 0 11px;
  padding-bottom: 2px;
  overflow-x: auto;
}

.ops-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.ops-filters button.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}

.op-card,
.slot-row,
.backend-map div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.place-head { display: flex; justify-content: space-between; gap: 12px; }
.place-head h3 { margin: 0; font-size: 15px; }
.place-head p { margin: 5px 0 0; font-size: 12px; }
.tag, .warning { display: inline-flex; padding: 5px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.tag { background: var(--blue-soft); color: var(--blue); }
.tag.good { background: var(--green-soft); color: var(--green-dark); }
.warning { background: var(--amber-soft); color: var(--amber); }
.warning.high { background: #fbe9e8; color: var(--danger); }
.warnings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.assistant-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.assistant-controls button { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; font-size: 11px; font-weight: 700; }
.assistant-controls button.primary { background: var(--green); border-color: var(--green); color: white; }

.op-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.op-details span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: var(--surface-soft);
}

.op-details i {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.op-details strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
}

.select-box { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.select-box select { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.slot-manager { margin-top: 12px; }
.slot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot-row div, .backend-map div { display: grid; gap: 3px; }
.slot-row span, .backend-map span { color: var(--muted); font-size: 11px; }
.backend-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.empty { padding: 20px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; font-size: 13px; }

@media (hover: hover) {
  .place-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(28, 44, 36, 0.1); }
  .settings-list button:hover { background: #fafbfa; }
}

@media (max-width: 860px) {
  .business-shell { padding: 14px; }
  .business-topbar, .business-grid { display: grid; grid-template-columns: 1fr; }
  .business-dashboard { grid-template-columns: repeat(2, 1fr); }
  .backend-map { grid-template-columns: 1fr; }
  .business-topbar h1 { font-size: 30px; }
  .business-link { justify-self: start; }
}

@media (max-width: 360px) {
  .app-content { padding-left: 12px; padding-right: 12px; }
  .category-rail, .filter-chips, .prompt-suggestions { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .home-heading h1, .page-heading h1 { font-size: 25px; }
  .place-image-wrap { height: 158px; }
  .trust-summary { grid-template-columns: 1.35fr 0.8fr 0.7fr; }
  .trust-summary > div { padding: 7px; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upcoming-card { grid-template-columns: 64px minmax(0, 1fr) 38px; gap: 8px; }
}

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

/* Usability pass: one accent, quieter cards, explicit history and rescheduling. */
.upcoming-card[hidden] { display: none !important; }

.upcoming-card {
  background: var(--green-dark);
  box-shadow: 0 8px 22px rgba(12, 87, 73, 0.16);
}

.category-icon,
.category-clinic,
.category-beauty,
.category-food,
.category-pc,
.category-sport {
  background: #dff1ea;
  color: var(--green);
}

.category-tile.active .category-icon,
.filter-chips button.active,
.view-switch button.active {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.place-card,
.booking-card,
.business-card,
.metric {
  box-shadow: none;
}

.place-image-wrap { height: 154px; }

.booking-group,
.booking-history { display: grid; gap: 10px; }
.booking-history { margin-top: 24px; }
.booking-group-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-group-title h2 { margin: 0; font-size: 16px; }
.booking-group-title span { color: var(--muted); font-size: 11px; }

.booking-card-compact { padding: 12px; }
.booking-card-main[role="button"] { cursor: pointer; }
.booking-card-main[role="button"]:focus-visible,
.history-row-open:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.booking-card-main { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
.booking-card-main .booking-open-chevron { position: absolute; top: 3px; right: 0; width: 16px; height: 16px; color: var(--muted); }
.booking-card-main .booking-body { padding-right: 18px; }
.booking-date-tile {
  min-height: 76px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green-dark);
}
.booking-date-tile strong { font-size: 18px; }
.booking-date-tile span { font-size: 10px; }
.booking-card-compact .booking-body { min-width: 0; padding: 0; }
.booking-card-compact .booking-body p { margin-bottom: 0; line-height: 1.5; }
.booking-card-footer-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.booking-card-footer-line > strong { font-size: 12px; white-space: nowrap; }
.booking-card-footer-line .booking-actions { padding: 0; border: 0; }

.history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.history-row { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.history-row:last-child { border-bottom: 0; }
.history-row-open { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.history-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.history-icon svg { width: 16px; height: 16px; }
.history-row-open > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.history-row strong, .history-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.history-row strong { font-size: 12px; }
.history-row small { color: var(--muted); font-size: 9px; }
.history-status { color: var(--green); font-size: 9px; font-weight: 800; }
.history-row-actions { display: grid; justify-items: end; gap: 5px; }
.history-row-actions button { min-height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--green); border-radius: 7px; background: white; color: var(--green); font-size: 8px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.history-row-actions button svg { width: 12px; height: 12px; }
.history-row-actions button[data-view-review] { border-color: transparent; background: var(--green-soft); }

.booking-detail-sheet { background: #f7f8f6; }
.booking-detail-body { display: grid; gap: 18px; padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); }

.booking-detail-hero {
  min-height: 132px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 18px;
  border-radius: 8px;
  background: var(--green-dark);
  color: white;
}
.booking-detail-hero.pending { background: #76541e; }
.booking-detail-hero.completed { background: #155f51; }
.booking-detail-hero.cancelled { background: #713c3c; }
.booking-detail-status-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.14); }
.booking-detail-status-icon svg { width: 21px; height: 21px; }
.booking-detail-hero > div { min-width: 0; }
.booking-detail-hero small { display: block; margin: 2px 0 7px; color: rgba(255,255,255,0.75); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.booking-detail-hero h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 22px; line-height: 1.15; }
.booking-detail-hero p { margin: 7px 0 0; color: rgba(255,255,255,0.8); font-size: 11px; }

.booking-detail-time {
  display: grid;
  grid-template-columns: 1.25fr .75fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.booking-detail-time > span { min-width: 0; min-height: 68px; display: grid; align-content: center; gap: 5px; padding: 10px 12px; border-right: 1px solid var(--line); }
.booking-detail-time > span:last-child { border-right: 0; }
.booking-detail-time small { color: var(--muted); font-size: 8px; }
.booking-detail-time strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }

.booking-detail-tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.booking-detail-tools button { min-width: 0; min-height: 64px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--green-dark); cursor: pointer; }
.booking-detail-tools button:active { transform: scale(.97); }
.booking-detail-tools svg { width: 18px; height: 18px; }
.booking-detail-tools span { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; font-weight: 800; }

.booking-detail-section { display: grid; gap: 9px; }
.booking-detail-section > h3 { margin: 0 2px; font-size: 15px; }
.booking-detail-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.booking-detail-list > div { min-height: 60px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.booking-detail-list > div:last-child { border-bottom: 0; }
.booking-detail-list > div > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green); }
.booking-detail-list svg { width: 16px; height: 16px; }
.booking-detail-list p { min-width: 0; display: grid; gap: 4px; margin: 0; }
.booking-detail-list small { color: var(--muted); font-size: 8px; }
.booking-detail-list strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }

.booking-reference { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #b9ded2; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); }
.booking-reference > span { min-width: 0; display: grid; gap: 3px; }
.booking-reference small { font-size: 8px; }
.booking-reference strong { font-size: 22px; letter-spacing: 0; }
.booking-reference em { color: var(--muted); font-size: 8px; font-style: normal; }
.booking-reference > svg { width: 30px; height: 30px; flex: 0 0 auto; }

.visit-code-panel {
  min-height: 104px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #91cabc;
  border-radius: 8px;
  background: #f2faf7;
  color: var(--green-dark);
}
.visit-code-panel.verified { grid-template-columns: 40px minmax(0, 1fr); border-color: #b9ded2; background: var(--green-soft); }
.visit-code-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: white; }
.visit-code-icon svg { width: 20px; height: 20px; }
.visit-code-panel > div { min-width: 0; display: grid; gap: 4px; }
.visit-code-panel small { color: var(--green); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.visit-code-panel strong { font-size: 24px; line-height: 1; letter-spacing: 0; }
.visit-code-panel.verified strong { font-size: 12px; line-height: 1.25; }
.visit-code-panel p { margin: 1px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.visit-code-panel > button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #b9ded2; border-radius: 8px; background: white; color: var(--green); cursor: pointer; }
.visit-code-panel > button:active { transform: scale(.96); }
.visit-code-panel > button svg { width: 17px; height: 17px; }

.booking-timeline { padding: 4px 2px 0; }
.booking-timeline > div { position: relative; min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.booking-timeline > div:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 15px; bottom: -1px; width: 2px; background: var(--line); }
.booking-timeline i { position: relative; z-index: 1; width: 16px; height: 16px; border: 4px solid #f7f8f6; border-radius: 50%; background: #c3cac6; box-shadow: 0 0 0 1px #c3cac6; }
.booking-timeline .done i,
.booking-timeline .current i { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.booking-timeline .cancelled i { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.booking-timeline > div > span { min-width: 0; display: grid; align-content: start; gap: 3px; padding-bottom: 13px; }
.booking-timeline strong { font-size: 10px; }
.booking-timeline small { color: var(--muted); font-size: 8px; }
.booking-timeline .future { opacity: .6; }

.booking-detail-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding-top: 2px; }
.booking-detail-footer .primary-button,
.booking-detail-footer .secondary-button,
.booking-detail-footer .danger-button { width: 100%; min-height: 46px; }
.booking-detail-footer .primary-button svg,
.booking-detail-footer .secondary-button svg { width: 16px; height: 16px; }
.booking-detail-footer .danger-button { border: 1px solid #e7caca; border-radius: 8px; background: #fff5f4; color: var(--danger); font-size: 11px; font-weight: 800; cursor: pointer; }
.booking-detail-footer .danger-button:active { transform: scale(.97); }

.move-body { padding: 16px 14px 28px; }

.review-form-body { display: grid; gap: 0; padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }
.review-visit-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.review-visit-summary > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.review-visit-summary > span svg { width: 19px; height: 19px; }
.review-visit-summary > div { min-width: 0; display: grid; gap: 3px; }
.review-visit-summary small { color: var(--green); font-size: 8px; font-weight: 800; }
.review-visit-summary strong,
.review-visit-summary em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.review-visit-summary strong { font-size: 13px; }
.review-visit-summary em { color: var(--muted); font-size: 9px; font-style: normal; }
.review-form-section { padding: 20px 2px; border-bottom: 1px solid var(--line); }
.review-form-section h2 { margin: 0; font-size: 14px; }
.review-form-section > p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.review-rating-section { text-align: center; }
.review-star-input { display: grid; grid-template-columns: repeat(5, 44px); justify-content: center; gap: 6px; margin-top: 13px; }
.review-star-input button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; color: #aab1ad; cursor: pointer; }
.review-star-input button svg { width: 22px; height: 22px; }
.review-star-input button.active { border-color: #e0a73d; background: #fff7e7; color: #d88d12; }
.review-star-input button.active svg { fill: currentColor; }
.review-tag-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.review-tag-picker button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: 9px; font-weight: 700; cursor: pointer; }
.review-tag-picker button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.review-text-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.review-text-label span { font-size: 11px; font-weight: 800; }
.review-text-label small { color: var(--muted); font-size: 8px; }
.review-form-section textarea { width: 100%; min-height: 126px; resize: vertical; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: white; color: var(--ink); font: inherit; font-size: 11px; line-height: 1.5; }
.review-form-section textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); }
.review-text-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.review-recommend-row { min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.review-recommend-row > span { display: grid; gap: 3px; }
.review-recommend-row strong { font-size: 11px; }
.review-recommend-row small { color: var(--muted); font-size: 8px; }
.review-recommend-switch { display: grid; grid-template-columns: repeat(2, 42px); gap: 3px; padding: 3px; border-radius: 8px; background: var(--surface-soft); }
.review-recommend-switch button { min-height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.review-recommend-switch button.active { background: white; color: var(--green); box-shadow: 0 1px 4px rgba(18, 36, 28, 0.12); }
.review-honesty-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; margin: 16px 0; padding: 11px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); }
.review-honesty-note > svg { width: 19px; height: 19px; }
.review-honesty-note span { display: grid; gap: 3px; }
.review-honesty-note strong { font-size: 10px; }
.review-honesty-note small { font-size: 8px; line-height: 1.4; }
.review-submit { min-height: 48px; }
.review-form-error { margin: 0 0 10px; padding: 9px 10px; border-radius: 7px; background: var(--coral-soft); color: var(--danger); font-size: 9px; font-weight: 750; line-height: 1.4; }
.review-form-error[hidden] { display: none; }
.review-sheet #closeReview { color: var(--ink); }
.review-sheet #closeReview svg { display: block; stroke: currentColor; }

@media (max-width: 380px) {
  .history-row { grid-template-columns: 1fr; }
  .history-row-actions { grid-template-columns: auto auto; align-items: center; justify-content: space-between; width: 100%; padding-left: 44px; }
  .review-star-input { grid-template-columns: repeat(5, 40px); gap: 5px; }
  .review-star-input button { width: 40px; height: 40px; }
}
.move-current { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.move-current > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.move-current > div { min-width: 0; display: grid; gap: 3px; }
.move-current small, .move-current em { color: var(--muted); font-size: 9px; font-style: normal; }
.move-current strong { font-size: 13px; }
.move-section { margin-top: 20px; }
.move-section h2 { margin: 0 0 10px; font-size: 15px; }
.move-day-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.move-day-tabs::-webkit-scrollbar { display: none; }
.move-day-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); font-size: 11px; font-weight: 800; }
.move-day-tabs button.active { border-color: var(--green); background: var(--green); color: white; }
.move-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.move-time-grid button { min-height: 46px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 12px; font-weight: 800; }
.move-time-grid button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green); }
.move-confirm { width: 100%; margin-top: 22px; }
.move-confirm:disabled { cursor: not-allowed; opacity: 0.45; }
.move-loading { min-height: 56dvh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 30px; color: var(--muted); text-align: center; }
.move-loading > svg { width: 30px; height: 30px; color: var(--green); }
.move-loading strong { color: var(--ink); font-size: 14px; }
.move-loading small { font-size: 10px; }
.move-loading button { min-height: 40px; margin-top: 6px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--green); color: white; font-weight: 800; }
.loading-spinner { width: 28px; height: 28px; border: 3px solid var(--green-soft); border-top-color: var(--green); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.map-preview-stack { display: grid; gap: 6px; }
.map-yandex-link { justify-self: end; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border-radius: 7px; background: rgba(255,255,255,.96); color: var(--green-dark); box-shadow: 0 4px 12px rgba(24,36,30,.12); font-size: 9px; font-weight: 800; text-decoration: none; pointer-events: auto; }
.map-yandex-link svg { width: 13px; height: 13px; }

.integration-details { padding: 0; }
.integration-details > summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.integration-details > summary::-webkit-details-marker { display: none; }
.integration-details > summary span { display: grid; gap: 4px; }
.integration-details > summary strong { font-size: 15px; }
.integration-details > summary small { color: var(--muted); font-size: 10px; }
.integration-details > summary > svg { width: 17px; color: var(--muted); transition: transform 180ms ease; }
.integration-details[open] > summary > svg { transform: rotate(180deg); }
.integration-details .backend-map { margin: 0 16px 16px; }
.business-page .business-card,
.business-page .metric { border-color: #dfe5e1; }
.business-page .metric { min-height: 76px; }
.business-page .metric strong { color: var(--green-dark); font-size: 21px; }

@media (max-width: 420px) {
  .booking-card-main { grid-template-columns: 68px minmax(0, 1fr); }
  .booking-card-footer-line { align-items: flex-end; }
  .booking-actions button { padding: 0 8px; }
}

/* Major Update 2.0: map view and layout hardening */
.results-mode-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 2px 0 12px;
}

.results-mode-bar > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 10px;
}

.view-switch {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border-radius: 8px;
  background: #e8ebe8;
}

.view-switch button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.view-switch button svg {
  width: 15px;
  height: 15px;
}

.view-switch button.active {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(28, 44, 36, 0.08);
}

.map-view {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #dfe7e2;
  animation: panel-in 220ms ease both;
}

#serviceMap {
  width: 100%;
  height: clamp(420px, 56dvh, 510px);
  z-index: 1;
  background: #e4ebe7;
}

.map-loading {
  min-height: inherit;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
}

.map-loading strong { font-size: 11px; }

.yaqin-map-marker {
  position: relative;
  min-width: 58px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 2px solid white;
  border-radius: 8px;
  background: white;
  color: var(--green-dark);
  box-shadow: 0 6px 18px rgba(24, 36, 30, 0.2);
  cursor: pointer;
  transform: translate(-50%, calc(-100% - 7px));
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.yaqin-map-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px;
  height: 10px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.yaqin-map-marker strong {
  position: relative;
  z-index: 1;
  font-size: 10px;
  white-space: nowrap;
}

.yaqin-map-marker span {
  position: relative;
  z-index: 1;
  max-width: 94px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yaqin-map-marker.active {
  min-width: 112px;
  height: 43px;
  align-content: center;
  gap: 1px;
  background: var(--green);
  color: white;
  transform: translate(-50%, calc(-100% - 7px)) scale(1.04);
}

.map-preview {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 11px;
  z-index: 500;
  pointer-events: none;
}

.map-preview-card {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(24, 36, 30, 0.2);
  text-align: left;
  pointer-events: auto;
  backdrop-filter: blur(16px);
  animation: map-card-in 220ms ease both;
  cursor: pointer;
}

@keyframes map-card-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.map-preview-card img {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  object-fit: cover;
}

.map-preview-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.map-preview-card small,
.map-preview-card strong,
.map-preview-card em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.map-preview-card small {
  color: var(--green);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.map-preview-card strong { font-size: 13px; }
.map-preview-card em { color: var(--muted); font-size: 9px; font-style: normal; }
.map-preview-card em b { color: var(--ink); }

.map-preview-action {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: white;
}

.map-preview-action svg {
  width: 17px;
  height: 17px;
}

.map-fallback {
  min-height: 420px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.map-fallback svg { color: var(--green); }
.map-fallback p { max-width: 260px; margin: 0; font-size: 11px; line-height: 1.45; }

.place-sheet[aria-hidden="true"],
.booking-sheet[aria-hidden="true"],
.utility-sheet[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.place-sheet.open,
.booking-sheet.open,
.utility-sheet.open {
  visibility: visible;
  pointer-events: auto;
}

.sheet-backdrop[hidden],
.panel-backdrop[hidden] {
  display: none !important;
}

.booking-summary-card > b {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 380px) {
  .results-mode-bar > span {
    display: none;
  }

  .view-switch {
    width: 100%;
  }

  .map-preview-card {
    grid-template-columns: 62px minmax(0, 1fr) 34px;
  }

  .map-preview-card img {
    width: 62px;
    height: 62px;
  }

  .map-preview-action {
    width: 32px;
    height: 32px;
  }

  .payment-options {
    grid-template-columns: 1fr;
  }

  .payment-options > button {
    min-height: 58px;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    grid-template-rows: none;
    justify-items: stretch;
    text-align: left;
  }

  .payment-options button > span:nth-child(2) {
    justify-items: start;
  }

  .payment-options button > svg:last-child {
    position: static;
  }

  .booking-summary-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .booking-summary-card img {
    width: 54px;
    height: 54px;
  }

  .booking-summary-card > b {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }
}

.view-switch button.active {
  background: var(--green);
  color: white;
  box-shadow: 0 2px 8px rgba(12, 87, 73, 0.16);
}

.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Mega Update 3.0: focused business workspace */
.business-page { background: #f3f5f2; }
.business-shell { width: min(1240px, 100%); padding: 20px 24px 40px; }
.business-topbar { min-height: 68px; margin-bottom: 14px; }
.business-brand,
.business-header-actions,
.business-pulse-main,
.pulse-fact,
.metric,
.metric-copy,
.section-title-copy,
.week-heading,
.connection-list > div { min-width: 0; display: flex; align-items: center; }
.business-brand { gap: 12px; }
.business-logo { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: white; font-size: 20px; font-weight: 900; }
.business-brand > div { min-width: 0; }
.business-brand .eyebrow { margin-bottom: 2px !important; font-size: 9px; }
.business-topbar .business-brand h1 { margin: 0 0 2px; font-size: 24px; }
.business-brand .muted { font-size: 11px; text-transform: capitalize; }
.business-header-actions { justify-content: flex-end; gap: 8px; }
.sync-pill,
.live-label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 1px solid #cfe6dc; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.sync-pill svg,
.business-link svg,
.live-label svg { width: 14px; height: 14px; }
.sync-pill[data-state="syncing"] svg { animation: spin 900ms linear infinite; }
.sync-pill[data-state="local"] { border-color: #e7dcc6; background: var(--amber-soft); color: var(--amber); }
.sync-pill[data-state="offline"] { border-color: #efcfcc; background: var(--coral-soft); color: var(--danger); }
.business-link { gap: 7px; min-height: 38px; padding: 0 11px; font-size: 11px; }
.business-pulse { display: grid; grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(170px, 1fr)); margin-bottom: 12px; border: 1px solid #dfe5e1; border-radius: 8px; background: white; overflow: hidden; }
.business-pulse > div { min-height: 64px; padding: 10px 14px; border-right: 1px solid var(--line); }
.business-pulse > div:last-child { border-right: 0; }
.business-pulse-main { gap: 10px; }
.pulse-icon,
.metric-icon,
.connection-icon,
.slot-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); }
.pulse-icon svg,
.metric-icon svg,
.connection-icon svg,
.slot-icon svg { width: 16px; height: 16px; }
.business-pulse-main > span:last-child,
.pulse-fact > span { min-width: 0; display: grid; gap: 3px; }
.business-pulse small { color: var(--muted); font-size: 9px; }
.business-pulse strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.business-pulse-main strong { font-size: 13px; }
.pulse-fact { gap: 8px; }
.pulse-fact > svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--green); }
.business-dashboard { gap: 10px; margin-bottom: 12px; }
.business-dashboard .metric { min-height: 82px; display: flex; align-content: initial; gap: 11px; padding: 12px; box-shadow: none; }
.business-dashboard .metric:nth-child(2) .metric-icon { background: #e9f0f8; color: #315d86; }
.business-dashboard .metric:nth-child(3) .metric-icon { background: #edf4e8; color: #4d762f; }
.business-dashboard .metric:nth-child(4) .metric-icon { background: var(--amber-soft); color: var(--amber); }
.metric-copy { align-items: flex-start; display: grid; gap: 1px; }
.business-page .metric-copy strong { color: var(--ink); font-size: 18px; line-height: 1.15; }
.metric-copy > span { color: var(--ink); font-size: 10px; font-weight: 750; }
.metric-copy > small { color: var(--muted); font-size: 8px; }
.business-grid { gap: 12px; margin-bottom: 12px; }
.business-card { padding: 14px; border-color: #dfe5e1; box-shadow: none; }
.section-title { min-height: 38px; margin-bottom: 10px; }
.section-title-copy { align-items: flex-start; display: grid; gap: 2px; }
.section-title-copy > small { color: var(--green); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.section-title-copy h2 { font-size: 16px; }
.section-title > span:last-child { font-size: 9px; }
.live-label { min-height: 27px; padding: 0 8px; border: 0; font-size: 8px; }
.live-label svg { width: 11px; height: 11px; }
.availability-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.select-box { gap: 4px; font-size: 9px; }
.select-box select { min-height: 38px; font-size: 11px; }
.week-availability { margin: 12px 0 0; padding: 11px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.week-heading { justify-content: space-between; margin-bottom: 8px; }
.week-heading > span { display: grid; gap: 2px; }
.week-heading strong { font-size: 10px; }
.week-heading small { color: var(--muted); font-size: 8px; }
.week-heading > svg { width: 15px; height: 15px; color: var(--green); }
.week-load { height: 86px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day { min-width: 0; display: grid; grid-template-rows: 15px minmax(0, 1fr) 13px; justify-items: center; gap: 3px; }
.week-day > strong { color: var(--muted); font-size: 8px; }
.week-day > span { width: min(18px, 70%); height: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 2px 2px; background: #edf0ed; overflow: hidden; }
.week-day > span i { width: 100%; display: block; border-radius: inherit; background: var(--green); transition: height 220ms ease; }
.week-day > small { color: var(--muted); font-size: 7px; white-space: nowrap; }
.slot-manager { max-height: 370px; overflow-y: auto; padding-right: 2px; }
.slot-row { justify-content: initial; padding: 9px; }
.slot-icon { flex-basis: 30px; width: 30px; height: 30px; }
.slot-icon svg { width: 14px; height: 14px; }
.slot-copy { min-width: 0; flex: 1 1 auto; }
.slot-copy strong { font-size: 10px; }
.slot-row .slot-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.slot-row > .tag { flex: 0 0 auto; }
.business-empty { min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 5px; }
.business-empty svg { width: 24px; height: 24px; margin-bottom: 3px; color: #9aa49e; }
.business-empty strong { color: var(--ink); font-size: 12px; }
.business-empty span { max-width: 280px; font-size: 9px; line-height: 1.45; }
.connection-card { margin-bottom: 12px; }
.connection-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.connection-list > div { gap: 9px; min-height: 62px; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.connection-list > div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
.connection-list > div:nth-child(even) { padding-left: 14px; }
.connection-icon { flex-basis: 32px; width: 32px; height: 32px; background: var(--surface-soft); color: var(--green); }
.connection-list > div > span:nth-child(2) { min-width: 0; display: grid; flex: 1 1 auto; gap: 2px; }
.connection-list strong { font-size: 10px; }
.connection-list small { color: var(--muted); font-size: 8px; }
.connection-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 850; }
.connection-status.ready { background: var(--green-soft); color: var(--green-dark); }
.connection-status.staged { background: #e9f0f8; color: #315d86; }
.connection-status.pilot { background: var(--amber-soft); color: var(--amber); }

@media (max-width: 900px) {
  .business-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-pulse > div:nth-child(2) { border-right: 0; }
  .business-pulse > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .business-shell { padding: 12px 10px 28px; }
  .business-topbar { align-items: flex-start; }
  .business-header-actions { width: 100%; justify-content: space-between; }
  .business-link { font-size: 0; }
  .business-link::after { content: "Клиент"; font-size: 10px; }
  .business-pulse { grid-template-columns: 1fr; }
  .business-pulse > div { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  .business-pulse > div:last-child { border-bottom: 0; }
  .business-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-dashboard .metric { min-height: 74px; gap: 8px; padding: 9px; }
  .metric-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .metric-icon svg { width: 14px; height: 14px; }
  .business-page .metric-copy strong { font-size: 15px; }
  .metric-copy > span { font-size: 8px; }
  .metric-copy > small { display: none; }
  .availability-selects { grid-template-columns: 1fr; }
  .op-details { grid-template-columns: 1fr 1fr; }
  .connection-list { grid-template-columns: 1fr; }
  .connection-list > div:nth-child(odd),
  .connection-list > div:nth-child(even) { padding: 9px 6px; border-right: 0; }
  .connection-status { max-width: 74px; text-align: center; }
}

/* Business location and resource layout builder */
.business-location-map-shell { position: relative; min-height: 250px; margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
#businessLocationMap { width: 100%; height: 250px; }
#businessLocationMapFallback { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: left; }
#businessLocationMapFallback[hidden] { display: none; }
#businessLocationMapFallback > svg { width: 28px; height: 28px; color: var(--theme-accent); }
#businessLocationMapFallback > span { display: grid; gap: 4px; }
#businessLocationMapFallback strong { font-size: 12px; }
#businessLocationMapFallback small { max-width: 360px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.business-location-map-actions { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-top: 1px solid var(--line); background: var(--surface); }
.business-location-map-actions :is(button, a) { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 9px; font-weight: 800; text-decoration: none; cursor: pointer; }
.business-location-map-actions svg { width: 15px; height: 15px; }
.venue-builder-head { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 14px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--theme-accent); border-radius: 8px; background: var(--surface); }
.venue-builder-head > div:first-child { min-width: 0; }
.venue-builder-head small { color: var(--theme-accent); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.venue-builder-head h2 { margin: 6px 0 5px; font-size: 20px; }
.venue-builder-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.venue-builder-head > div:last-child { flex: 0 0 auto; display: flex; gap: 8px; }
.venue-builder-head button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--theme-accent); border-radius: 7px; background: var(--theme-accent); color: var(--theme-accent-contrast); font-size: 10px; font-weight: 800; cursor: pointer; }
.venue-builder-head button.secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
.venue-builder-head svg { width: 16px; height: 16px; }
.venue-builder-layout { display: grid; grid-template-columns: minmax(240px, .58fr) minmax(0, 1.65fr); align-items: start; gap: 14px; }
.venue-builder-tools { display: grid; gap: 12px; }
.venue-field { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.venue-field :is(input, select) { width: 100%; min-width: 0; min-height: 43px; box-sizing: border-box; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); outline: 0; }
.venue-field :is(input, select):focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.venue-size-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.venue-resource-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.venue-resource-heading strong { font-size: 11px; }
.venue-resource-heading small { color: var(--muted); font-size: 8px; }
.venue-resource-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; }
.venue-resource-list > button { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink); text-align: left; cursor: pointer; }
.venue-resource-list > button:hover, .venue-resource-list > button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 8%, var(--surface)); }
.venue-resource-list > button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--surface); color: var(--theme-accent); }
.venue-resource-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.venue-resource-list strong, .venue-resource-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-resource-list strong { font-size: 10px; }
.venue-resource-list small { color: var(--muted); font-size: 8px; }
.venue-resource-list svg { width: 15px; height: 15px; }
.venue-resource-empty { min-height: 74px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); }
.venue-resource-empty > svg { width: 20px; height: 20px; color: var(--theme-accent); }
.venue-resource-empty span { display: grid; gap: 3px; }
.venue-resource-empty strong { color: var(--ink); font-size: 10px; }
.venue-resource-empty small { font-size: 8px; }
.venue-stage-panel { min-width: 0; }
.venue-stage-scroll { max-width: 100%; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.venue-grid { width: max(100%, 620px); min-height: 520px; display: grid; grid-template-columns: repeat(var(--venue-columns), minmax(38px, 1fr)); grid-template-rows: repeat(var(--venue-rows), minmax(38px, 1fr)); gap: 3px; position: relative; }
.venue-cell { min-width: 0; min-height: 0; border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--surface) 72%, transparent); cursor: crosshair; }
.venue-cell:hover { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 9%, var(--surface)); }
.venue-item { z-index: 2; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding: 4px; border: 2px solid var(--theme-accent); border-radius: 6px; background: color-mix(in srgb, var(--theme-accent) 12%, var(--surface)); color: var(--ink); cursor: pointer; }
.venue-item:hover, .venue-item.active { background: var(--theme-accent); color: var(--theme-accent-contrast); }
.venue-item > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.venue-item > span { min-width: 0; display: grid; gap: 1px; text-align: left; }
.venue-item strong, .venue-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-item strong { font-size: 9px; }
.venue-item small { font-size: 7px; opacity: .76; }
.venue-inspector { min-height: 76px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(120px, .8fr) minmax(120px, .7fr) minmax(90px, .45fr) auto; align-items: end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.venue-inspector > div:first-child { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; }
.venue-inspector > div:first-child > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
.venue-inspector > div:first-child > span:last-child { min-width: 0; display: grid; gap: 2px; }
.venue-inspector strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.venue-inspector small { color: var(--muted); font-size: 8px; }
.venue-inspector label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.venue-inspector :is(input, select) { width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.venue-move-controls { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.venue-move-controls button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.venue-move-controls button.danger { width: auto; grid-template-columns: 16px auto; gap: 5px; padding: 0 9px; color: var(--danger); }
.venue-move-controls svg { width: 14px; height: 14px; }
.venue-inspector-empty { grid-column: 1 / -1 !important; min-height: 65px; justify-content: center; }

@media (max-width: 1080px) {
  .venue-builder-layout { grid-template-columns: 1fr; }
  .venue-builder-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-builder-tools .workspace-panel-title, .venue-resource-heading, .venue-resource-list, .venue-builder-tools > .business-inline-action { grid-column: 1 / -1; }
  .venue-inspector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venue-inspector > div:first-child, .venue-move-controls { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .venue-builder-head { align-items: stretch; flex-direction: column; padding: 15px; }
  .venue-builder-head > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .venue-builder-tools { grid-template-columns: 1fr; }
  .venue-builder-tools .workspace-panel-title, .venue-resource-heading, .venue-resource-list, .venue-builder-tools > .business-inline-action { grid-column: auto; }
  .venue-size-fields { grid-template-columns: 1fr 1fr; }
  .venue-grid { width: 620px; min-height: 480px; }
  .venue-inspector { grid-template-columns: 1fr; }
  .venue-inspector > div:first-child, .venue-move-controls { grid-column: auto; }
  .venue-move-controls { justify-content: flex-start; flex-wrap: wrap; }
  .business-location-map-actions { align-items: stretch; flex-direction: column; }
  .business-location-map-actions :is(button, a) { width: 100%; box-sizing: border-box; }
}

.client-venue-shell { display: grid; gap: 9px; }
.client-venue-legend { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; }
.client-venue-legend span { display: inline-flex; align-items: center; gap: 5px; }
.client-venue-legend span i { width: 9px; height: 9px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface-soft); }
.client-venue-legend span:nth-child(2) i { border-color: var(--theme-accent); background: var(--theme-accent); }
.client-venue-legend small { margin-left: auto; font-size: 9px; font-weight: 800; }
.client-venue-zone-filter { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: none; }
.client-venue-zone-filter::-webkit-scrollbar { display: none; }
.client-venue-zone-filter button { min-height: 32px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 850; cursor: pointer; transition: .16s ease; }
.client-venue-zone-filter button:hover, .client-venue-zone-filter button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 10%, var(--surface)); color: var(--theme-accent); }
.client-venue-zone-filter button[data-tier="pro"] { --theme-accent: #079a9f; }
.client-venue-zone-filter button[data-tier="vip"] { --theme-accent: #b57609; }
.client-venue-zone-filter button[data-tier="playstation"] { --theme-accent: #7558d9; }
.client-venue-selection { min-height: 54px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #b9c5ff; border-radius: 10px; background: linear-gradient(135deg, #f6f8ff, #eef1ff); }
.client-venue-selection.empty { grid-template-columns: auto minmax(0, 1fr); border-style: dashed; background: #fafbff; }
.client-venue-selection > span { padding: 5px 8px; border-radius: 999px; background: #e7ebff; color: #4459d6; font-size: 8px; font-weight: 950; }
.client-venue-selection > span[data-tier="pro"] { background: #dcf7f5; color: #087c80; }
.client-venue-selection > span[data-tier="vip"] { background: #fff1d4; color: #936007; }
.client-venue-selection > span[data-tier="playstation"] { background: #eee8ff; color: #6747c5; }
.client-venue-selection > i, .client-venue-selection > svg { width: 21px; height: 21px; color: var(--theme-accent); }
.client-venue-selection div { min-width: 0; display: grid; gap: 2px; }
.client-venue-selection small { color: var(--muted); font-size: 8px; font-weight: 750; }
.client-venue-selection strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.client-venue-scroll { max-width: 100%; overflow: auto; padding: 10px; border: 1px solid #d8deea; border-radius: 10px; background: #eef2f7; }
.client-venue-grid { width: max(100%, calc(var(--client-venue-columns) * 28px)); min-height: 300px; aspect-ratio: var(--client-venue-columns) / var(--client-venue-rows); display: block; background-color: #f8fafc; background-image: linear-gradient(to right, rgba(148,163,184,.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,.14) 1px, transparent 1px); background-size: calc(100% / var(--client-venue-columns)) calc(100% / var(--client-venue-rows)); }
.client-venue-item { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; padding: 1px; border: 1px solid #7765e8; border-radius: 5px; background: #fff; color: #26324a; box-shadow: 0 1px 3px rgba(24,33,54,.16); cursor: pointer; }
.client-venue-item:hover { border-color: var(--theme-accent); }
.client-venue-item.active { border-color: #4f46e5; background: #4f46e5; color: #fff; box-shadow: 0 0 0 2px rgba(79,70,229,.22); }
.client-venue-item.unavailable, .client-venue-item:disabled { opacity: .38; cursor: not-allowed; }
.client-venue-item > svg { width: 11px; height: 11px; flex: 0 0 auto; }
.client-venue-item > span { min-width: 0; display: grid; gap: 1px; text-align: left; }
.client-venue-item strong, .client-venue-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-venue-item strong { max-width: 100%; overflow: hidden; font-size: 7px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.client-venue-item small { font-size: 7px; opacity: .72; }
.client-venue-any { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.client-venue-any > svg:first-child { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
.client-venue-any > span { display: grid; gap: 2px; }
.client-venue-any strong { font-size: 10px; }
.client-venue-any small { color: var(--muted); font-size: 8px; }
.client-venue-any > svg:last-child { width: 16px; height: 16px; opacity: 0; }
.client-venue-any.active { border-color: var(--theme-accent); }
.client-venue-any.active > svg:last-child { opacity: 1; color: var(--theme-accent); }

/* Universal venue editor 2.0 */
.venue-stepper { display: grid; gap: 5px; padding: 5px; border-radius: 8px; background: var(--surface-soft); }
.venue-stepper button { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.venue-stepper button b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 9px; }
.venue-stepper button span { min-width: 0; display: grid; gap: 2px; }
.venue-stepper button strong { color: var(--ink); font-size: 10px; }
.venue-stepper button small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.venue-stepper button.active { border-color: color-mix(in srgb, var(--theme-accent) 32%, var(--line)); background: var(--surface); box-shadow: var(--shadow-soft); }
.venue-stepper button.active b { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); }
.venue-step-panel { display: grid; gap: 9px; }
.venue-step-panel[hidden] { display: none; }
.venue-step-copy { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.venue-step-copy > svg { width: 34px; height: 34px; box-sizing: border-box; padding: 8px; border-radius: 7px; background: var(--surface); color: var(--theme-accent); }
.venue-step-copy > span { min-width: 0; display: grid; gap: 3px; }
.venue-step-copy strong { font-size: 10px; }
.venue-step-copy small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.venue-primary-tool, .venue-secondary-tool { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--theme-accent); border-radius: 7px; background: var(--theme-accent); color: var(--theme-accent-contrast); font-size: 9px; font-weight: 900; cursor: pointer; }
.venue-secondary-tool { border-color: var(--line); background: var(--surface); color: var(--ink); }
.venue-primary-tool svg, .venue-secondary-tool svg { width: 16px; height: 16px; }
.venue-canvas-settings { border-top: 1px solid var(--line); }
.venue-canvas-settings summary { padding: 10px 0; color: var(--muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.venue-canvas-settings .venue-size-fields { padding-bottom: 8px; }
.venue-layer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 0 10px; }
.venue-layer-list label { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.venue-layer-list input { accent-color: var(--theme-accent); }
.venue-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.venue-file-actions button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 8px; font-weight: 900; cursor: pointer; }
.venue-file-actions button:hover { border-color: var(--theme-accent); color: var(--theme-accent); }
.venue-file-actions svg { width: 14px; height: 14px; }
.venue-stage-title { gap: 14px; }
.venue-stage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.venue-stage-actions > span { color: var(--muted); font-size: 8px; font-weight: 800; }
.venue-stage-actions button { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 8px; font-weight: 900; cursor: pointer; }
.venue-stage-actions button[data-venue-finish] { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); }
.venue-stage-actions button[hidden] { display: none; }
.venue-stage-actions button:disabled { opacity: .35; cursor: default; }
.venue-stage-actions svg { width: 15px; height: 15px; }
.venue-stage-title small b { display: inline-flex; align-items: center; min-height: 18px; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); font-size: 7px; font-weight: 900; }
.venue-stage-title small b.dirty { background: color-mix(in srgb, var(--amber) 16%, var(--surface)); color: var(--amber); }
[data-save-venue].has-changes { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 14%, transparent); }
.venue-palette-section { display: grid; gap: 8px; }
.venue-palette-grid, .venue-object-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.venue-palette-grid button, .venue-object-grid button { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 8px; font-weight: 800; text-align: left; cursor: pointer; }
.venue-palette-grid button:hover, .venue-palette-grid button.active, .venue-object-grid button:hover, .venue-object-grid button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 10%, var(--surface)); color: var(--theme-accent); }
.venue-palette-grid svg, .venue-object-grid svg { width: 17px; height: 17px; }
.venue-stage-scroll { max-height: min(68vh, 760px); overscroll-behavior: contain; scrollbar-gutter: stable; }
.venue-grid.venue-canvas { width: max(100%, 820px); min-height: 0; aspect-ratio: var(--venue-columns) / var(--venue-rows); isolation: isolate; touch-action: none; user-select: none; display: grid; grid-template-columns: repeat(var(--venue-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--venue-rows), minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 7px; background-color: color-mix(in srgb, var(--surface) 96%, var(--theme-accent)); background-image: linear-gradient(to right, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px); background-size: calc(100% / var(--venue-columns)) calc(100% / var(--venue-rows)); }
.venue-grid.venue-canvas.is-panning { cursor: grabbing; }
.venue-stage-actions [data-venue-tool="pan"].active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 10%, var(--surface)); color: var(--theme-accent); }
.venue-shortcuts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; padding: 8px 2px 0; color: var(--muted); font-size: 7px; font-weight: 800; }
.venue-shortcuts span { display: inline-flex; align-items: center; gap: 4px; }
.venue-shortcuts kbd { min-width: 20px; min-height: 18px; display: inline-grid; place-items: center; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 7px; }
.venue-blueprint { z-index: 1; grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: 100%; overflow: visible; }
.venue-outline-shape { fill: color-mix(in srgb, var(--surface) 94%, var(--theme-accent)); stroke: var(--ink); stroke-width: .13; vector-effect: non-scaling-stroke; cursor: pointer; }
.venue-outline-shape.active { stroke: var(--theme-accent); stroke-width: .2; }
.venue-room-shape { --room-color: #3d6fa5; fill: color-mix(in srgb, var(--room-color) 14%, var(--surface)); stroke: color-mix(in srgb, var(--room-color) 70%, var(--line)); stroke-width: .08; vector-effect: non-scaling-stroke; cursor: move; }
.venue-room-shape.active { stroke: var(--theme-accent); stroke-width: .18; }
.venue-room-shape[data-tone="violet"] { --room-color: #7857d8; }
.venue-room-shape[data-tone="cyan"] { --room-color: #159baa; }
.venue-room-shape[data-tone="green"] { --room-color: #278766; }
.venue-room-shape[data-tone="amber"] { --room-color: #ad741e; }
.venue-room-shape[data-tone="neutral"] { --room-color: #727981; }
.venue-wall-line { fill: none; stroke: var(--ink); stroke-width: .16; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: move; pointer-events: stroke; }
.venue-wall-line.door { stroke: var(--theme-accent); stroke-width: .25; stroke-dasharray: .2 .12; }
.venue-wall-line.active { stroke: var(--theme-accent); stroke-width: .24; }
.venue-polyline-draft { fill: none; stroke: var(--theme-accent); stroke-width: .14; stroke-dasharray: .2 .12; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.venue-draft-point { fill: var(--surface); stroke: var(--theme-accent); stroke-width: .1; vector-effect: non-scaling-stroke; pointer-events: none; }
.venue-vertex { fill: var(--surface); stroke: var(--theme-accent); stroke-width: .1; vector-effect: non-scaling-stroke; cursor: grab; pointer-events: all; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .22)); }
.venue-vertex:active { cursor: grabbing; }
.venue-room-label { z-index: 2; position: absolute; transform: translate(-50%, -50%); max-width: 120px; display: grid; gap: 1px; padding: 3px 5px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 84%, transparent); text-align: center; pointer-events: none; }
.venue-room-label strong, .venue-room-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-room-label strong { color: var(--ink); font-size: 7px; }
.venue-room-label small { color: var(--muted); font-size: 6px; }
.venue-outline-tip { min-width: 180px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.venue-outline-tip svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--theme-accent); }
.venue-polygon-info { display: grid; align-content: center; gap: 2px; min-height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.venue-polygon-info strong { font-size: 11px; }
.venue-polygon-info small { color: var(--muted); font-size: 7px; }
.venue-room { z-index: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; overflow: hidden; padding: 8px; border: 1px solid color-mix(in srgb, var(--room-color) 48%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--room-color) 9%, var(--surface)); color: var(--ink); text-align: left; cursor: move; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-color) 7%, transparent); }
.venue-room strong, .venue-room span { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.venue-room small { color: var(--muted); font-size: 7px; }
.venue-room.active { outline: 2px solid var(--theme-accent); outline-offset: -2px; }
.venue-room[data-tone="blue"], .client-venue-room[data-tone="blue"] { --room-color: #3d6fa5; }
.venue-room[data-tone="violet"], .client-venue-room[data-tone="violet"] { --room-color: #7857d8; }
.venue-room[data-tone="cyan"], .client-venue-room[data-tone="cyan"] { --room-color: #159baa; }
.venue-room[data-tone="green"], .client-venue-room[data-tone="green"] { --room-color: #278766; }
.venue-room[data-tone="amber"], .client-venue-room[data-tone="amber"] { --room-color: #ad741e; }
.venue-room[data-tone="neutral"], .client-venue-room[data-tone="neutral"] { --room-color: #727981; }
.venue-wall { z-index: 6; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; background: var(--ink); color: var(--surface); cursor: move; }
.venue-wall.horizontal { align-self: start; height: 5px; margin-top: -2px; }
.venue-wall.vertical { justify-self: start; width: 5px; margin-left: -2px; }
.venue-wall.door { z-index: 7; border: 2px solid var(--theme-accent); border-radius: 4px; background: var(--surface); color: var(--theme-accent); }
.venue-wall.door.horizontal { height: 18px; margin-top: -8px; }
.venue-wall.door.vertical { width: 18px; margin-left: -8px; }
.venue-wall.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 35%, transparent); }
.venue-wall svg { width: 12px; height: 12px; }
.venue-object { z-index: 3; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; padding: 4px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ink)); border-radius: 5px; background: color-mix(in srgb, var(--surface-soft) 88%, var(--surface)); color: var(--muted); cursor: move; }
.venue-object:hover, .venue-object.active { border-color: var(--theme-accent); color: var(--theme-accent); }
.venue-object svg { width: 16px; height: 16px; flex: 0 0 auto; }
.venue-object span { min-width: 0; overflow: hidden; font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.venue-item { z-index: 4; cursor: move; }
.venue-item[data-item-kind="pc"], .venue-item[data-item-kind="console"] { border-color: #7059df; background: linear-gradient(135deg, color-mix(in srgb, #23c9d8 13%, var(--surface)), color-mix(in srgb, #7857d8 14%, var(--surface))); box-shadow: inset 0 -3px 0 color-mix(in srgb, #23c9d8 65%, #7857d8); }
.venue-item[data-item-kind="pc"]:hover, .venue-item[data-item-kind="pc"].active, .venue-item[data-item-kind="console"]:hover, .venue-item[data-item-kind="console"].active { background: #403572; color: white; }
.venue-draw-preview { z-index: 8; min-width: 0; min-height: 0; pointer-events: none; border: 2px dashed var(--theme-accent); border-radius: 5px; background: color-mix(in srgb, var(--theme-accent) 14%, transparent); }
.venue-draw-preview.wall, .venue-draw-preview.door { align-self: center; min-height: 5px; border-style: solid; border-radius: 1px; }
.venue-inspector { grid-template-columns: minmax(160px, 1.1fr) repeat(5, minmax(90px, .7fr)) auto; }
.venue-inspector :is(input, select) { color: var(--ink); }

.client-venue-editor-view .client-venue-scroll { padding: 0; overflow: auto; border-color: #d8deea; background: radial-gradient(circle at 50% 35%, #f9fbff 0, #edf1f7 52%, #e2e7ef 100%); }
.client-venue-editor-scene { width: max(100%, 720px); height: auto; display: block; aspect-ratio: var(--client-venue-ratio); background: #fff; }
.client-venue-editor-scene :is(use, text, polygon, polyline, line, rect) { pointer-events: none; }
.client-venue-editor-scene rect.client-editor-hit { fill: transparent; stroke: none; pointer-events: all; }
.client-editor-room-fill { fill: rgba(105,126,247,.07); }
.client-editor-room-name { fill: #98a3b7; font-size: .194px; pointer-events: none; }
.client-editor-room-outline { fill: none; stroke: #aab5c8; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.client-editor-corridor { fill: none; stroke: #dce6f1; stroke-linecap: round; stroke-linejoin: round; }
.client-editor-wall { fill: none; stroke: #3d485c; stroke-linecap: round; stroke-linejoin: round; }
.client-editor-door { stroke: #e99b2c; stroke-linecap: round; }
.client-editor-shell { fill: none; stroke: #111b2f; stroke-width: 5px; vector-effect: non-scaling-stroke; }
.client-editor-free-label { fill: #818ca0; font-size: .236px; font-weight: 700; }
.client-editor-scene-item { cursor: pointer; transition: opacity .14s ease, filter .14s ease; }
.client-editor-decor { cursor: default; }
.client-editor-status-plate { fill: #f1f5ff; stroke: #8fa1f7; stroke-width: .028; }
.client-editor-item-label { fill: #273249; font-size: .167px; font-weight: 750; }
.client-editor-resource:hover { filter: brightness(1.04) drop-shadow(0 2px 3px rgba(25,36,56,.2)); }
.client-editor-resource.active .client-editor-status-plate { fill: #eef0ff; stroke: #5267f7; stroke-width: .065; }
.client-editor-resource[data-venue-tier="pro"] .client-editor-status-plate { fill: #e4faf8; stroke: #20aaa9; }
.client-editor-resource[data-venue-tier="vip"] .client-editor-status-plate { fill: #fff4da; stroke: #d29a2b; }
.client-editor-resource[data-venue-tier="playstation"] .client-editor-status-plate { fill: #f0ebff; stroke: #8067dc; }
.client-editor-resource.active .client-editor-status-plate { fill: #dfe4ff; stroke: #5267f7; }
.client-editor-resource.zone-muted { opacity: .08; pointer-events: none; }
.client-editor-resource.unavailable { opacity: .24; cursor: not-allowed; }
.client-editor-resource.unavailable:hover { filter: none; }

.booking-place-required { min-height: 66px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 12px; border: 1px dashed #abb8fb; border-radius: 10px; background: #f7f8ff; }
.booking-place-required > i, .booking-place-required > svg { width: 24px; height: 24px; color: var(--theme-accent); }
.booking-place-required span { display: grid; gap: 3px; }
.booking-place-required strong { font-size: 10px; }
.booking-place-required small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.booking-selected-place { min-height: 66px; display: grid; grid-template-columns: auto 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #b9c5ff; border-radius: 10px; background: linear-gradient(135deg, #fafbff, #f1f4ff); }
.booking-place-tier { padding: 5px 7px; border-radius: 999px; background: #e6ebff; color: #4459d6; font-size: 8px; font-weight: 950; }
.booking-place-tier[data-tier="pro"] { background: #dcf7f5; color: #087c80; }
.booking-place-tier[data-tier="vip"] { background: #fff1d4; color: #936007; }
.booking-place-tier[data-tier="playstation"] { background: #eee8ff; color: #6747c5; }
.booking-place-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--theme-accent); box-shadow: 0 3px 10px rgba(31,45,76,.08); }
.booking-place-icon svg { width: 20px; height: 20px; }
.booking-selected-place > span:nth-child(3) { min-width: 0; display: grid; gap: 2px; }
.booking-selected-place strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.booking-selected-place small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.booking-selected-place button { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--theme-accent); font-size: 8px; font-weight: 850; cursor: pointer; }

@media (max-width: 520px) {
  .booking-selected-place { grid-template-columns: auto 34px minmax(0, 1fr); }
  .booking-selected-place button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 1280px) {
  .venue-inspector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venue-inspector > div:first-child, .venue-move-controls { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .venue-stage-title { display: grid; grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
  .venue-stage-title > span { width: 100%; }
  .venue-stage-actions { width: 100%; display: grid; grid-template-columns: minmax(64px, 1fr) repeat(7, 32px); align-items: center; justify-content: stretch; gap: 4px; overflow-x: auto; }
  .venue-stage-actions > span { width: auto; text-align: left; }
  .venue-palette-grid, .venue-object-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venue-palette-grid button, .venue-object-grid button { min-height: 54px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .venue-grid.venue-canvas { width: 760px; }
  .venue-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venue-stepper button { min-height: 66px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .venue-stepper button span { justify-items: center; }
  .venue-stepper button small { display: none; }
  .venue-stage-scroll { max-height: 58vh; }
  .venue-shortcuts { display: none; }
  .venue-layer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .venue-stage-actions button { min-width: 32px; padding: 0 7px; }
  .venue-inspector { grid-template-columns: 1fr 1fr; }
  .venue-inspector > div:first-child, .venue-move-controls, .venue-inspector-empty { grid-column: 1 / -1 !important; }
}

/* Profile and settings workspace 1.0 */
.place-sheet .sheet-cover { height: 174px; }
.place-sheet .sheet-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.place-sheet .sheet-tabs button { min-width: 0; padding: 0 5px; font-size: 10px; }
.booking-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 14px 0 4px; }
.booking-trust-strip > span { min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 8px; white-space: nowrap; }
.booking-trust-strip svg { width: 13px; height: 13px; color: var(--green); }
.booking-trust-strip strong { color: var(--ink); font-size: 10px; }
.booking-warning { width: 100%; min-height: 50px; display: grid; grid-template-columns: 20px minmax(0,1fr) 16px; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--amber-soft); color: #785018; text-align: left; cursor: pointer; }
.booking-warning > svg { width: 17px; height: 17px; }
.booking-warning > span { min-width: 0; display: grid; gap: 2px; }
.booking-warning strong, .booking-warning small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-warning strong { font-size: 10px; }
.booking-warning small { font-size: 8px; }
.sheet-inline-link { width: 100%; min-height: 44px; display: grid; grid-template-columns: 20px minmax(0,1fr) 18px; align-items: center; gap: 7px; margin-top: 16px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--green-dark); font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
.sheet-inline-link svg { width: 16px; height: 16px; }
.sheet-inline-link svg:last-child { justify-self: end; color: var(--muted); }
.show-more-slots { width: 100%; min-height: 38px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--green-dark); font-size: 9px; font-weight: 800; cursor: pointer; }
.place-info-list { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.place-info-list > div { min-height: 62px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
.place-info-list > div > svg { width: 19px; height: 19px; color: var(--green); }
.place-info-list > div > span { min-width: 0; display: grid; gap: 3px; }
.place-info-list strong { font-size: 10px; }
.place-info-list small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.profile-settings-group { margin-top: 20px; }
.profile-settings-group > h2 { margin: 0 2px 9px; font-size: 15px; }
.profile-settings-group .settings-list { box-shadow: none; }
.profile-settings-group .settings-list > button,
.profile-settings-group .language-setting {
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  gap: 11px;
  padding: 9px 14px;
}
.profile-settings-group .settings-list > button > svg { width: 17px; }
.setting-row-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.setting-row-icon svg { width: 18px; height: 18px; }
.profile-settings-group .setting-row-copy { min-width: 0; display: grid; align-content: center; justify-items: start; gap: 3px; }
.profile-settings-group .setting-row-copy strong,
.profile-settings-group .setting-row-copy small { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-settings-group .setting-row-copy strong { font-size: 12px; font-weight: 750; }
.profile-settings-group .setting-row-copy small { color: var(--muted); font-size: 9px; font-weight: 600; }
.profile-settings-group .language-switch { justify-self: end; }
.settings-page-header { min-height: 64px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin: 2px 0 18px; }
.settings-page-header > span { min-width: 0; display: grid; gap: 3px; }
.settings-page-header .page-kicker { margin: 0; }
.settings-page-header h1 { margin: 0; font-size: 27px; line-height: 1.1; }
.settings-page-group { margin-top: 16px; }
.settings-page-group:first-of-type { margin-top: 0; }
.settings-page .business-entry { border-color: #d8e4ef; background: #f6faff; }
.settings-page .settings-list > :nth-child(2) .setting-row-icon { background: var(--blue-soft); color: var(--blue); }
.settings-page .settings-list > :nth-child(3) .setting-row-icon { background: var(--amber-soft); color: var(--amber); }
.settings-page .settings-list > :nth-child(4) .setting-row-icon { background: var(--violet-soft); color: var(--violet); }
.settings-page .settings-list > :nth-child(5) .setting-row-icon { background: var(--coral-soft); color: var(--coral); }
.profile-settings-group .settings-list { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.settings-sheet { height: min(90dvh, 800px); }
.settings-header strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.settings-header .icon-button[hidden] { display: grid; visibility: hidden; }
.settings-body { padding: 8px 14px calc(30px + env(safe-area-inset-bottom)); }
.settings-lead { display: grid; gap: 5px; padding: 9px 1px 17px; }
.settings-lead h2 { margin: 0; font-size: 19px; }
.settings-lead p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-form { display: grid; gap: 13px; }
.settings-field { display: grid; gap: 6px; }
.settings-field > span { font-size: 10px; font-weight: 800; }
.settings-field input,
.settings-field select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: white; color: var(--ink); font-size: 13px; }
.settings-field input:focus,
.settings-field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); }
.settings-field input:disabled { background: var(--surface-soft); color: var(--muted); }
.settings-input-prefix { height: 48px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.settings-input-prefix:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,114,95,0.1); }
.settings-input-prefix b { display: grid; place-items: center; height: 100%; border-right: 1px solid var(--line); color: var(--green-dark); font-size: 13px; }
.settings-input-prefix input { height: 46px; border: 0; border-radius: 0; box-shadow: none !important; }
.settings-save { min-height: 48px; margin-top: 3px; }
.settings-action { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--green-dark); font-size: 11px; font-weight: 800; cursor: pointer; }
.settings-action svg { width: 17px; height: 17px; }
.sync-status {
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.sync-status-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; }
.sync-status-icon svg { width: 21px; height: 21px; }
.sync-status > span:last-child { min-width: 0; display: grid; gap: 3px; }
.sync-status small { font-size: 8px; font-weight: 850; }
.sync-status strong { font-size: 12px; }
.sync-status em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.4; text-overflow: ellipsis; }
.sync-status.online { border-color: #9bc9bd; background: var(--green-soft); }
.sync-status.online .sync-status-icon { background: white; color: var(--green); }
.sync-status.online small { color: var(--green-dark); }
.sync-status.offline { border-color: #ecc58e; background: var(--amber-soft); }
.sync-status.offline .sync-status-icon { background: white; color: var(--amber); }
.sync-status.offline small { color: var(--amber); }
.sync-status.local .sync-status-icon { background: var(--surface-soft); color: var(--muted); }
.sync-form .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sync-form .primary-button svg { width: 17px; height: 17px; }
.sync-steps { display: grid; gap: 9px; margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.sync-steps > strong { font-size: 10px; }
.sync-steps > span { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; color: #53605a; font-size: 9px; line-height: 1.4; }
.sync-steps b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--green); font-size: 8px; }
.sync-disconnect { margin-top: 10px; color: var(--danger); }
.about-yaqin { display: grid; justify-items: center; padding: 21px 16px 18px; text-align: center; }
.about-yaqin-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: var(--green); color: white; font-size: 26px; font-weight: 900; box-shadow: 0 8px 22px rgba(19,114,95,.18); }
.about-yaqin h2 { margin: 11px 0 4px; font-size: 23px; }
.about-yaqin p { max-width: 300px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.about-version { min-height: 30px; margin-top: 12px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); font-size: 9px; font-weight: 750; cursor: pointer; user-select: none; }
.about-facts { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.about-facts > span { min-height: 64px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.about-facts > span:last-child { border-bottom: 0; }
.about-facts > span > svg { width: 20px; color: var(--green); }
.about-facts > span > span { min-width: 0; display: grid; gap: 3px; }
.about-facts strong { font-size: 11px; }
.about-facts small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.developer-tools { min-height: 70px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 12px; padding: 11px; border: 1px solid #e7c58f; border-radius: 8px; background: var(--amber-soft); }
.developer-tools > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: white; color: var(--amber); }
.developer-tools > span svg { width: 18px; }
.developer-tools > div { min-width: 0; display: grid; gap: 3px; }
.developer-tools strong { font-size: 10px; }
.developer-tools small { color: var(--muted); font-size: 8px; }
.developer-tools button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--ink); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.developer-disable { margin-top: 8px; color: var(--muted); }
.about-note { text-align: center; }
.city-search { position: relative; margin-bottom: 11px; }
.city-search svg { position: absolute; left: 12px; top: 50%; width: 17px; color: var(--muted); transform: translateY(-50%); }
.city-search input { width: 100%; height: 46px; padding: 0 12px 0 39px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: white; font-size: 12px; }
.city-list { display: grid; gap: 7px; margin-top: 12px; }
.city-option { width: 100%; min-height: 55px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.city-option > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--green); font-size: 10px; font-weight: 850; }
.city-option > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.city-option strong { font-size: 12px; }
.city-option small { color: var(--muted); font-size: 8px; }
.city-option > svg { width: 17px; color: var(--green); opacity: 0; }
.city-option.active { border-color: #8bbdaf; background: var(--green-soft); }
.city-option.active > svg { opacity: 1; }
.settings-list-stack { display: grid; gap: 8px; }
.settings-choice { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.settings-choice-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--green); font-size: 12px; font-weight: 900; }
.settings-choice-copy { min-width: 0; display: grid; gap: 3px; }
.settings-choice-copy strong { font-size: 11px; }
.settings-choice-copy small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.settings-choice button { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--green); font-size: 9px; font-weight: 800; cursor: pointer; }
.settings-choice.active { border-color: #8bbdaf; background: var(--green-soft); }
.settings-choice.active button { border-color: var(--green); background: var(--green); color: white; }
.settings-choice-actions { display: flex; gap: 6px; }
.settings-choice-actions .icon-button { min-width: 34px; width: 34px; padding: 0; color: var(--danger); }
.slot-alert-choice { grid-template-columns: 36px minmax(0, 1fr); }
.slot-alert-choice .settings-choice-copy small { line-height: 1.5; }
.slot-alert-choice .settings-choice-actions { grid-column: 2; justify-self: start; }
.family-choice { grid-template-columns: 36px minmax(0, 1fr); }
.family-choice .settings-choice-actions { grid-column: 2; justify-self: start; }
.settings-preferences { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.settings-preferences .switch-row { padding: 0 12px; }
.settings-note { margin: 12px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.settings-empty { display: grid; justify-items: center; gap: 7px; padding: 27px 18px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.settings-empty svg { width: 26px; height: 26px; color: var(--green); }
.settings-empty strong { color: var(--ink); font-size: 12px; }
.settings-empty span { font-size: 9px; line-height: 1.45; }
.profile-review-list { display: grid; gap: 8px; }
.profile-review-list > button { position: relative; min-height: 104px; display: grid; gap: 4px; padding: 12px 38px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.profile-review-list > button > svg { position: absolute; top: 50%; right: 12px; width: 17px; color: var(--muted); transform: translateY(-50%); }
.profile-review-list strong { font-size: 12px; }
.profile-review-list small { color: var(--muted); font-size: 8px; }
.profile-review-list p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: #4f5953; font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.profile-review-rating { color: #d88d12; font-size: 10px; }
.interest-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.interest-fieldset legend { margin-bottom: 7px; font-size: 10px; font-weight: 800; }
.interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.interest-option { min-width: 0; cursor: pointer; }
.interest-option input { position: absolute; opacity: 0; pointer-events: none; }
.interest-option > span { min-height: 58px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.interest-option svg { width: 18px; color: var(--green); }
.interest-option svg:last-child { width: 15px; opacity: 0; }
.interest-option strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.interest-option input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.interest-option input:checked + span svg:last-child { opacity: 1; }

/* Release 0.8: client identity and onboarding */
.profile-phone {
  display: block;
  margin-top: 3px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 750;
}

.language-setting {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.language-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-soft);
}

@media (max-width: 380px) {
  .profile-settings-group .settings-list > button,
  .profile-settings-group .language-setting {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    padding-right: 11px;
    padding-left: 11px;
  }

  .profile-settings-group .setting-row-icon {
    width: 34px;
    height: 34px;
  }

  .profile-settings-group .setting-row-copy strong { font-size: 11px; }
  .profile-settings-group .setting-row-copy small { font-size: 8px; }
  .profile-settings-group .language-switch button { min-width: 38px; }
}

.language-switch button {
  min-width: 42px;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.language-switch button.active { background: var(--surface); color: var(--green-dark); box-shadow: 0 2px 8px rgba(28,44,36,0.08); }
.profile-logout {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.profile-logout svg { width: 16px; height: 16px; }

/* Mobile runtime: avoid continuous GPU blur and full-panel raster animations. */
.client-page.native-app .app-topbar,
.client-page.native-app .bottom-nav,
.client-page.native-app .scanner-header,
.client-page.native-app .overlay-header,
.client-page.native-app .booking-checkout-bar,
.client-page.native-app .filter-actions,
.client-page.native-app .compare-tray,
.client-page.native-app .search-suggestions,
.client-page.native-app .availability-badge,
.client-page.native-app .yaqin-select-menu,
.client-page.native-app .photo-count,
.client-page.native-app .map-preview-card,
.client-page.native-app .map-core-controls button,
.client-page.native-app .scan-live-status,
.client-page.native-app .sheet-backdrop,
.client-page.native-app .panel-backdrop {
  backdrop-filter: none;
}
.client-page.native-app .app-topbar,
.client-page.native-app .scanner-header,
.client-page.native-app .overlay-header { background: #f7f8f6; }
.client-page.native-app .bottom-nav,
.client-page.native-app .booking-checkout-bar,
.client-page.native-app .filter-actions { background: white; }
.client-page.native-app .app-panel.active { animation: none; }
.client-page.native-app .place-card.entering { animation-duration: 190ms; }
.client-page.native-app .place-card { transition: none; }
.client-page.native-app .place-card:active { transform: none; }
.client-page.native-app .place-card:hover .place-image-wrap img { transform: none; }
.client-page.native-app .place-sheet,
.client-page.native-app .booking-sheet,
.client-page.native-app .utility-sheet { transition-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .app-panel.active,
  .place-card.entering,
  .booking-card,
  .map-preview-card { animation: none !important; }
}

/* Product audit 0.9: safer business workflow and compact history */
.history-row.cancelled .history-icon { background: var(--coral-soft); color: var(--danger); }
.history-row.cancelled .history-status { color: var(--danger); }

.business-logout { flex: 0 0 38px; }
.business-logout[hidden] { display: none; }
.business-auth {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(243,245,242,0.96);
  backdrop-filter: blur(16px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 160ms ease, visibility 160ms ease;
}
.business-auth.open { visibility: visible; opacity: 1; }
.business-auth.instant { transition: none; }
.business-auth-panel {
  width: min(390px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-high);
}
.business-auth-panel .auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.business-auth-panel .auth-brand > strong { font-size: 18px; }
.business-auth-copy { margin: 38px 0 24px; }
.business-auth-copy > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.business-auth-copy > span svg { width: 23px; height: 23px; }
.business-auth-copy h1 { margin: 0 0 8px; font-size: 25px; letter-spacing: 0; }
.business-auth-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.business-auth-panel form { display: grid; gap: 13px; }
.business-auth-panel .auth-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.business-auth-panel .auth-field input,
.business-auth-panel .auth-field select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 12px;
  border: 1px solid #d7ddd8;
  border-radius: 8px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}
.business-auth-panel .auth-field input::placeholder { color: var(--muted); opacity: .78; }
.business-auth-panel .auth-field input:focus,
.business-auth-panel .auth-field select:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.business-auth-panel .auth-error { min-height: 0; margin: -2px 0 0; color: var(--danger); font-size: 11px; line-height: 1.4; }
.business-auth-panel .auth-submit { width: 100%; min-height: 54px; margin-top: 6px; }

.op-card { padding: 13px; background: var(--surface); }
.op-card.archived { background: #fbfcfb; }
.op-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.op-card-header > div { min-width: 0; }
.op-card-header h3 { overflow: hidden; margin: 0; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.op-card-header p { overflow: hidden; margin: 4px 0 0; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.op-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px; font-size: 8px; font-weight: 850; }
.op-status.good { background: var(--green-soft); color: var(--green-dark); }
.op-status.warning { background: var(--amber-soft); color: var(--amber); }
.op-status.cancelled { background: var(--coral-soft); color: var(--danger); }
.op-customer { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 12px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.op-customer > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.op-customer > div { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 8px; }
.op-customer small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.op-customer strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.op-customer a { color: var(--green-dark); font-size: 9px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.op-customer em { color: var(--muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.op-card .op-details { margin-top: 9px; }
.op-card .op-details span { padding: 7px 8px; background: var(--surface-soft); }
.op-card-footer { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.op-card-footer > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.op-card-footer > span svg { width: 13px; height: 13px; }
.op-reference { font-variant-numeric: tabular-nums; }
.op-card .assistant-controls { margin: 0; }
.op-card .assistant-controls button { min-height: 32px; font-size: 9px; }
.op-card .assistant-controls button:disabled { opacity: 0.5; cursor: wait; }
.op-card .assistant-controls .danger-text { border-color: transparent; background: transparent; color: var(--danger); }

.business-review-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.business-review-card header { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.business-review-card header > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.business-review-card header strong { font-size: 11px; }
.business-review-card header small { overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.business-review-card header b { color: #d88d12; font-size: 10px; }
.business-review-card p { margin: 11px 0; color: #4f5953; font-size: 10px; line-height: 1.55; }
.business-review-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.business-review-card footer span { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; font-weight: 800; }
.business-review-card footer span svg { width: 13px; height: 13px; }
.business-review-card footer em { color: var(--muted); font-size: 8px; font-style: normal; }

.business-dialog {
  width: min(360px, calc(100% - 28px));
  padding: 22px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  box-shadow: var(--shadow-high);
}
.business-dialog::backdrop { background: rgba(16,28,22,0.45); backdrop-filter: blur(3px); }
.business-dialog-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); }
.business-dialog h2 { margin: 0 0 7px; font-size: 18px; }
.business-dialog p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.business-visit-code { display: grid; gap: 7px; margin-top: 16px; }
.business-visit-code[hidden] { display: none; }
.business-visit-code > span { color: var(--ink); font-size: 10px; font-weight: 800; }
.business-visit-code input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #f7f9f7; color: var(--ink); font-size: 22px; font-weight: 850; letter-spacing: 0; text-align: center; }
.business-visit-code input:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 3px rgba(18,126,105,.1); }
.business-visit-code small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.business-dialog .business-dialog-error { margin-top: 8px; color: var(--danger); font-size: 9px; font-weight: 750; }
.business-dialog .business-dialog-error[hidden] { display: none; }
.business-dialog > div:last-child { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.business-dialog button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 10px; font-weight: 800; cursor: pointer; }
.business-dialog button.primary { border-color: var(--green); background: var(--green); color: white; }
.business-dialog button.danger { border-color: var(--danger); background: var(--danger); color: white; }
.business-toast { position: fixed; left: 50%; bottom: 22px; z-index: 160; max-width: min(360px, calc(100% - 28px)); padding: 11px 14px; border-radius: 8px; background: var(--ink); color: white; box-shadow: var(--shadow-high); font-size: 10px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 160ms ease, transform 160ms ease; }
.business-toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .business-auth { padding: 0; align-items: stretch; }
  .business-auth-panel { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; border: 0; padding: 24px 20px; box-shadow: none; }
  .op-card-header { align-items: center; }
  .op-card .op-details { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .op-card-footer { align-items: flex-end; }
  .op-card .assistant-controls { justify-content: flex-end; }
  .op-customer > div { grid-template-columns: 1fr; }
  .op-customer small { grid-column: auto; }
  .op-customer a { margin-top: 1px; }
}

/* Core experience 0.23: location-aware discovery and clearer booking lifecycle */
.home-tools-secondary {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.location-context {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.location-context > svg { width: 17px; height: 17px; color: var(--green); }
.location-context > span { min-width: 0; display: grid; gap: 1px; }
.location-context strong,
.location-context small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.location-context strong { color: var(--ink); font-size: 11px; }
.location-context small { font-size: 9px; }
.location-context.active { border-color: #c8ded7; background: var(--green-soft); }
.location-context.loading > svg { animation: spin 700ms linear infinite; }

#mapAreaFilter {
  border-color: #b7d5cb;
  background: var(--green-soft);
  color: var(--green-dark);
}
#mapAreaFilter[hidden],
#searchMapArea[hidden] { display: none !important; }
#mapAreaFilter svg:last-child { width: 12px; height: 12px; }

.map-core-controls {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 520;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.map-core-controls button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  color: var(--ink);
  box-shadow: 0 7px 20px rgba(24,36,30,.16);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
.map-core-controls button:first-child { width: 38px; padding: 0; }
.map-core-controls button.active { background: var(--green); color: white; }
.map-core-controls button:disabled { opacity: .55; cursor: wait; }
.map-core-controls svg { width: 16px; height: 16px; }

.availability-badge.unavailable { background: rgba(44,53,48,.86); }
.availability-badge.unavailable > span { background: #cfd7d2; box-shadow: none; }

.place-core-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin: 12px 0 2px;
}
.place-core-actions button {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--green-dark);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.place-core-actions svg { flex: 0 0 auto; width: 15px; height: 15px; }
.place-core-actions span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.place-sheet .sheet-cover { height: 154px; }
.place-sheet .sheet-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  margin-top: 10px;
  background: var(--surface-soft);
}

.booking-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 3px;
  margin: 14px 0 18px;
  padding: 3px;
  border-radius: 8px;
  background: #e8ebe8;
}
.booking-mode-switch button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.booking-mode-switch button.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(28,44,36,.08); }
.booking-mode-switch span {
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #dfe4e1;
  font-size: 8px;
}
.booking-mode-switch button.active span { background: var(--green-soft); color: var(--green-dark); }
.booking-mode-panel { margin: 0; }
.booking-mode-empty { margin-top: 6px; }
.history-row.awaiting .history-icon { background: var(--amber-soft); color: var(--amber); }
.history-row.awaiting .history-status { color: var(--amber); }
.booking-detail-hero.awaiting { background: var(--amber-soft); }
.booking-detail-hero.awaiting .booking-detail-status-icon { background: rgba(255,255,255,.72); color: var(--amber); }

@media (max-width: 380px) {
  .search-suggestions button { grid-template-columns: 36px minmax(0, 1fr) 78px 12px; gap: 7px; padding-inline: 7px; }
  .search-suggestion-meta small { max-width: 78px; }
  .results-mode-bar .view-switch { width: 100%; }
  .location-context { width: 100%; grid-template-columns: 24px minmax(0,1fr); }
  .place-core-actions button { font-size: 8px; }
}

/* Yaqin Business 4.0: operational partner workspace */
.business-v2 {
  min-width: 0;
  background: #f4f6f4;
}

.business-v2 .business-app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
}

.business-v2 .business-sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 18px 12px 14px;
  border-right: 1px solid #dde3df;
  background: #fbfcfb;
}

.business-side-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 7px 18px;
}
.business-side-brand > span:last-child { min-width: 0; display: grid; line-height: 1.05; }
.business-side-brand strong { font-size: 15px; }
.business-side-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.business-v2 .business-logo { flex: 0 0 36px; width: 36px; height: 36px; font-size: 17px; }

.business-navigation { display: grid; gap: 3px; }
.business-navigation button,
.business-side-footer a,
.business-side-footer button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #66716b;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.business-navigation button svg,
.business-side-footer svg { width: 17px; height: 17px; }
.business-navigation button.active { background: var(--green-soft); color: var(--green-dark); }
.business-navigation button.active svg { stroke-width: 2.5; }
.business-navigation button b { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--coral); color: white; font-size: 8px; }
.business-navigation button b[hidden] { display: none; }
.business-side-footer { display: grid; gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.business-side-footer button[hidden] { display: none; }
.business-mobile-more { display: grid; gap: 3px; }
.business-mobile-more button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #66716b;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.business-mobile-more button svg { width: 17px; height: 17px; }
.business-mobile-more button.active { background: var(--green-soft); color: var(--green-dark); }
.business-mobile-more button b { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 8px; }
.business-mobile-more button b[hidden],
.business-mobile-more[hidden] { display: none; }
.business-more-toggle { display: none !important; }

.business-workspace {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 18px 24px 42px;
  margin: 0;
}

.business-v2 .business-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 15px;
}
.business-page-heading { min-width: 0; }
.business-page-heading p { margin: 0 0 3px; color: var(--green); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.business-page-heading h1 { margin: 0; color: var(--ink); font-size: 25px; line-height: 1.15; }
.business-page-heading > span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; text-transform: capitalize; }
.business-v2 .business-header-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.business-primary-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: white;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.business-primary-action svg { width: 15px; height: 15px; }

.business-view[hidden] { display: none !important; }
.business-view.active { animation: business-view-in 150ms ease both; }
@keyframes business-view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.business-mobile-quick-actions { display: none; }
.business-mobile-hub { display: none; }

.business-health {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(175px, 1fr));
  margin-bottom: 11px;
  border: 1px solid #dde3df;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}
.business-health > div { min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-right: 1px solid var(--line); }
.business-health > div:last-child { border-right: 0; }
.business-health > div > svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--green); }
.business-health > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.business-health small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.business-health strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.business-health-main strong { font-size: 12px; }

.business-v2 .business-dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 11px; }
.business-v2 .business-dashboard .metric { min-height: 78px; padding: 11px; border: 1px solid #dde3df; border-radius: 8px; background: white; }
.business-v2 .metric-icon { flex-basis: 32px; width: 32px; height: 32px; }
.business-v2 .metric-copy strong { font-size: 17px; }
.business-v2 .metric-copy > span { font-size: 9px; }
.business-v2 .metric-copy > small { font-size: 7px; }

.business-overview-grid,
.calendar-layout,
.analytics-grid,
.integration-workspace { min-width: 0; display: grid; gap: 11px; }
.business-overview-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); }
.calendar-layout { grid-template-columns: 1fr; }
.analytics-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.integration-workspace { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }

.business-action-center {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--theme-accent);
  border-radius: 8px;
  background: var(--surface);
}
.business-focus-copy { min-width: 0; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 10px; }
.business-focus-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); }
.business-focus-icon svg { width: 17px; height: 17px; }
.business-focus-copy > span:last-child { min-width: 0; display: grid; gap: 2px; }
.business-focus-copy small { color: var(--theme-accent); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.business-focus-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.business-focus-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.business-focus-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.business-focus-actions button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--theme-accent); border-radius: 7px; background: var(--theme-accent); color: var(--theme-accent-contrast); font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.business-focus-actions button.secondary { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.business-focus-actions svg { width: 14px; height: 14px; }

.workspace-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dde3df;
  border-radius: 8px;
  background: white;
}
.workspace-panel-title,
.view-section-title { min-width: 0; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.workspace-panel-title > span:first-child,
.view-section-title > span:first-child { min-width: 0; display: grid; gap: 2px; }
.workspace-panel-title small,
.view-section-title small { color: var(--green); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.workspace-panel-title h2,
.view-section-title h2 { margin: 0; font-size: 14px; }
.workspace-panel-title > button {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: var(--green-dark);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.workspace-panel-title > button svg { width: 13px; height: 13px; }
.workspace-panel-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.workspace-panel-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: white;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.workspace-panel-actions button.secondary { border-color: #cbd9d2; background: white; color: var(--green-dark); }
.workspace-panel-actions button svg { width: 13px; height: 13px; }
.workspace-panel-title > span:last-child,
.view-section-title > span:last-child { color: var(--muted); font-size: 8px; }

.overview-agenda { display: grid; }
.agenda-row {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 48px minmax(150px, 1fr) minmax(78px, auto) 76px 15px;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.agenda-time { font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.agenda-main { min-width: 0; display: grid; gap: 3px; }
.agenda-main strong,
.agenda-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-main strong { font-size: 10px; }
.agenda-main small { color: var(--muted); font-size: 8px; }
.agenda-price { color: #4e5953; font-size: 9px; font-weight: 750; text-align: right; }
.agenda-state { min-height: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 999px; font-size: 7px; font-weight: 850; }
.agenda-state.pending, .agenda-state.attention { background: var(--amber-soft); color: var(--amber); }
.agenda-state.confirmed { background: var(--green-soft); color: var(--green-dark); }
.agenda-row > svg { width: 14px; height: 14px; color: #97a19b; }

.overview-alerts { display: grid; gap: 7px; }
.overview-alert {
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfb;
  text-align: left;
  cursor: pointer;
}
.overview-alert > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--green); }
.overview-alert.warning > span:first-child { background: var(--amber-soft); color: var(--amber); }
.overview-alert.danger > span:first-child { background: var(--coral-soft); color: var(--danger); }
.overview-alert.info > span:first-child { background: #e8f0f8; color: #315d86; }
.overview-alert svg { width: 14px; height: 14px; }
.overview-alert > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.overview-alert strong { font-size: 9px; }
.overview-alert small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.overview-alert > svg { color: #97a19b; }

.view-toolbar {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.business-search { flex: 1 1 640px; width: 100%; min-width: 0; height: 50px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.business-search svg { width: 18px; height: 18px; color: var(--muted); }
.business-search input { min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.view-toolbar > span { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.bookings-controls {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(560px, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.business-v2 .bookings-controls .view-toolbar > span {
  min-width: max-content;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 750;
}
.business-v2 .ops-filters { width: 100%; max-width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
.business-v2 .ops-filters::-webkit-scrollbar { display: none; }
.business-v2 .bookings-controls .ops-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--surface-soft);
}
.business-v2 .ops-filters button { min-height: 42px; padding: 0 12px; border-color: transparent; background: transparent; font-size: 10px; }
.business-v2 .ops-filters button.active { background: var(--surface); box-shadow: 0 2px 9px rgba(28, 35, 32, .08); }
.business-records { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.business-records > .business-empty,
.business-review-list > .business-empty {
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(360px, 58dvh, 680px);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.business-v2 .op-card { border: 1px solid #dde3df; border-radius: 8px; box-shadow: none; }
.op-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 7px 8px; border-radius: 6px; background: var(--amber-soft); color: #70501d; font-size: 8px; line-height: 1.45; }
.op-note svg { flex: 0 0 auto; width: 13px; height: 13px; }
.op-waiting { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; }
.op-waiting svg { width: 12px; height: 12px; }

.calendar-control-panel {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 10px 18px;
}
.calendar-control-panel .workspace-panel-title { grid-column: 1 / -1; margin-bottom: 0; }
.calendar-control-panel .week-availability { margin-top: 0; border-top: 0; }
.calendar-slots-panel { min-height: 0; }
.business-v2 .slot-manager { max-height: none; align-content: start; }
.business-v2 .slot-row { min-height: 49px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.business-v2 .slot-row:last-child { border-bottom: 0; }
.slot-row > button { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #cfe2da; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); cursor: pointer; }
.slot-row > button svg { width: 14px; height: 14px; }
.tag.manual { background: #fff1d8; color: #9b5d00; }
.managed-slot-section { margin-bottom: 12px; border: 1px solid #d7e5df; border-radius: 8px; overflow: hidden; background: #f7fbf9; }
.managed-slot-section > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid #d7e5df; }
.managed-slot-section > header > span { min-width: 0; display: grid; gap: 2px; }
.managed-slot-section > header strong { font-size: 10px; }
.managed-slot-section > header small { color: var(--muted); font-size: 8px; }
.managed-slot-section > header > svg { width: 16px; height: 16px; color: var(--green); }
.managed-slot-section .managed-slot-row { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid #e2ebe6; }
.managed-slot-section .managed-slot-row:last-child { border-bottom: 0; }
.managed-slot-row > button { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #ead5d2; border-radius: 7px; background: #fff4f2; color: var(--danger); cursor: pointer; }
.managed-slot-row > button svg { width: 14px; height: 14px; }

.client-directory { display: grid; gap: 8px; }
.client-directory-card {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(160px, 1fr) minmax(110px, .35fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dde3df;
  border-radius: 8px;
  background: white;
}
.client-directory-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 900; }
.client-directory-main,
.client-directory-value { min-width: 0; display: grid; gap: 2px; }
.client-directory-main strong { font-size: 10px; }
.client-directory-main small,
.client-directory-main span,
.client-directory-value small,
.client-directory-value span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.client-directory-value { justify-items: end; }
.client-directory-value strong { font-size: 10px; }
.client-directory-card > a,
.client-no-phone { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); }
.client-no-phone { background: var(--surface-soft); color: var(--muted); }
.client-directory-card > a svg,
.client-no-phone svg { width: 14px; height: 14px; }

.catalog-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.catalog-workspace > section { min-width: 0; }
.business-service-list,
.business-team-list { display: grid; gap: 8px; }
.business-service-card,
.business-team-card {
  min-width: 0;
  min-height: 74px;
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dde3df;
  border-radius: 8px;
  background: white;
}
.business-service-card { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.business-team-card { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.business-service-card > span:first-child { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); }
.business-service-card > span svg { width: 15px; height: 15px; }
.business-service-card > div,
.business-team-card > div { min-width: 0; display: grid; gap: 3px; }
.business-service-card strong,
.business-team-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.business-service-card small,
.business-team-card small,
.business-service-card em,
.business-team-card em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.business-service-card > b { font-size: 10px; white-space: nowrap; }
.business-team-avatar { width: 41px; height: 41px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e4ebe7; color: var(--green-dark); font-size: 12px; font-weight: 900; }
.business-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-load { display: grid; justify-items: end; gap: 1px; }
.team-load strong { font-size: 12px; }
.team-load small { color: var(--muted); font-size: 7px; }

.review-workspace-summary,
.analytics-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.review-workspace-summary > div,
.analytics-kpis > div { min-width: 0; min-height: 78px; display: grid; align-content: center; gap: 3px; padding: 11px 13px; border: 1px solid #dde3df; border-radius: 8px; background: white; }
.review-workspace-summary small,
.review-workspace-summary span,
.analytics-kpis small { color: var(--muted); font-size: 8px; }
.review-workspace-summary strong,
.analytics-kpis strong { font-size: 18px; }
.business-review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.business-v2 .business-review-card { min-width: 0; }
.business-review-card footer > div { display: flex; align-items: center; gap: 7px; }
.business-review-card footer button { min-height: 28px; padding: 0 8px; border: 1px solid #cfe2da; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-weight: 800; cursor: pointer; }
.business-review-reply { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; margin: 10px 0; padding: 9px; border-radius: 7px; background: var(--surface-soft); }
.business-review-reply > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: white; color: var(--green); }
.business-review-reply svg { width: 13px; height: 13px; }
.business-review-reply > div { min-width: 0; }
.business-review-reply strong { font-size: 8px; }
.business-review-reply p { margin: 3px 0 0; font-size: 9px; }
.review-reply-editor { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.review-reply-editor[hidden] { display: none; }
.review-reply-editor textarea { width: 100%; min-height: 84px; padding: 9px; resize: vertical; border: 1px solid #d8dfda; border-radius: 7px; outline: 0; background: #fbfcfb; color: var(--ink); font: inherit; font-size: 9px; }
.review-reply-editor textarea:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 3px rgba(18,126,105,.08); }
.review-reply-editor > span { display: flex; justify-content: flex-end; gap: 7px; margin-top: 7px; }
.review-reply-editor button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.review-reply-editor button.primary { border-color: var(--green); background: var(--green); color: white; }

.analytics-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-kpis > div { grid-template-columns: 30px minmax(0, 1fr); align-items: center; }
.analytics-kpis > div > span { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); }
.analytics-kpis svg { width: 14px; height: 14px; }
.analytics-kpis small,
.analytics-kpis strong { grid-column: 2; }
.analytics-kpis strong { font-size: 15px; }
.analytics-health-panel { margin-bottom: 11px; }
.analytics-health { min-width: 0; display: grid; grid-template-columns: 142px minmax(0, 1fr); align-items: center; gap: 18px; }
.analytics-donut { width: 122px; aspect-ratio: 1; display: grid; place-content: center; align-content: center; gap: 3px; margin-inline: auto; border-radius: 50%; background: radial-gradient(var(--surface) 0 52%, transparent 53%), conic-gradient(var(--green) 0 var(--completed), var(--theme-accent) 0 calc(var(--completed) + var(--active)), var(--danger) 0 100%); text-align: center; }
.analytics-donut strong { max-width: 92px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-donut small { color: var(--muted); font-size: 7px; }
.analytics-health-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.analytics-health-list > div { min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.analytics-health-list > div > span { grid-row: 1 / 4; width: 8px; height: 26px; border-radius: 999px; background: var(--green); }
.analytics-health-list > div > span.active { background: var(--theme-accent); }
.analytics-health-list > div > span.cancelled { background: var(--danger); }
.analytics-health-list strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-health-list b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-health-list small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-week { height: 260px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 9px; padding: 14px 4px 0; }
.analytics-week > div { min-width: 0; height: 100%; display: grid; grid-template-rows: 18px minmax(0, 1fr) 17px; justify-items: center; gap: 5px; }
.analytics-week strong { color: var(--muted); font-size: 8px; }
.analytics-week > div > span { width: min(28px, 72%); height: 100%; display: flex; align-items: flex-end; overflow: hidden; border-radius: 5px 5px 2px 2px; background: #edf0ed; }
.analytics-week > div > span i { width: 100%; display: block; border-radius: inherit; background: var(--green); }
.analytics-week small { color: var(--muted); font-size: 7px; }
.service-analytics { display: grid; gap: 12px; padding-top: 7px; }
.service-analytics > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
.service-analytics > div > span { min-width: 0; display: grid; gap: 2px; }
.service-analytics strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.service-analytics small { color: var(--muted); font-size: 7px; }
.service-analytics b { align-self: center; font-size: 9px; }
.service-analytics > div > i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: #edf0ed; }
.service-analytics > div > i span { height: 100%; display: block; border-radius: inherit; background: var(--green); }

.integration-events { align-self: start; }
.integration-events > div:not(.workspace-panel-title) { min-height: 56px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid var(--line); }
.integration-events > div > svg { width: 15px; height: 15px; color: var(--green); }
.integration-events > div > span { min-width: 0; display: grid; gap: 2px; }
.integration-events strong { font-size: 9px; }
.integration-events small { color: var(--muted); font-size: 8px; }
.integration-events em { color: var(--muted); font-size: 7px; font-style: normal; }

.business-empty.compact { min-height: 130px; }

.business-v2 .manual-booking-dialog { width: min(620px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; overflow-x: hidden; overflow-y: auto; }
.manual-booking-dialog form { padding: 18px; }
.business-v2 .custom-slot-dialog { width: min(720px, calc(100% - 28px)); max-height: min(860px, calc(100dvh - 28px)); padding: 0; overflow-x: hidden; overflow-y: auto; }
.custom-slot-dialog form { padding: 18px; }
.custom-slot-intro { margin: -5px 0 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.custom-slot-step { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.custom-slot-step > header { display: flex; align-items: center; gap: 9px; }
.custom-slot-step > header > b { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; border-radius: 50%; background: var(--theme-accent); color: var(--theme-accent-contrast); font-size: 9px; }
.custom-slot-step > header > span { min-width: 0; display: grid; gap: 2px; }
.custom-slot-step > header strong { font-size: 11px; }
.custom-slot-step > header small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.custom-slot-date-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.custom-slot-date-picker button { min-width: 0; min-height: 70px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 7px 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.custom-slot-date-picker button small { color: var(--muted); font-size: 7px; text-transform: capitalize; }
.custom-slot-date-picker button strong { font-size: 16px; line-height: 1; }
.custom-slot-date-picker button span { color: var(--muted); font-size: 7px; text-transform: capitalize; }
.custom-slot-date-picker button.active { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); box-shadow: 0 5px 14px color-mix(in srgb, var(--theme-accent) 22%, transparent); }
.custom-slot-date-picker button.active small,
.custom-slot-date-picker button.active span { color: inherit; opacity: .78; }
.custom-time-picker { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(180px, 1.1fr); align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.custom-time-wheel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; }
.custom-time-wheel > b { font-size: 24px; }
.custom-time-column { display: grid; grid-template-columns: 34px minmax(42px, 1fr) 34px; grid-template-rows: 50px auto; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.custom-time-column button { width: 34px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--ink); cursor: pointer; }
.custom-time-column button svg { width: 16px; height: 16px; }
.custom-time-column strong { font-size: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.custom-time-column small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; text-align: center; }
.custom-time-manual { display: grid; gap: 6px; color: var(--ink); font-size: 8px; font-weight: 800; }
.custom-time-manual input { width: 100%; min-height: 52px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.custom-time-suggestions { display: grid; gap: 7px; }
.custom-time-suggestions > span { color: var(--muted); font-size: 8px; font-weight: 800; }
.custom-time-suggestions > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.custom-time-suggestions > div::-webkit-scrollbar { display: none; }
.custom-time-suggestions button { flex: 0 0 auto; min-width: 61px; min-height: 43px; display: grid; place-content: center; gap: 2px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; }
.custom-time-suggestions button:hover { border-color: var(--theme-accent); background: var(--green-soft); }
.custom-time-suggestions button strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.custom-time-suggestions button small { color: var(--muted); font-size: 7px; white-space: nowrap; }
.custom-time-suggestions .no-suggestions { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 9px; border: 1px dashed var(--line); border-radius: 7px; line-height: 1.4; }
.custom-time-suggestions .no-suggestions svg { flex: 0 0 auto; width: 14px; height: 14px; }
.custom-slot-provider-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.custom-slot-provider-picker > button { min-width: 0; min-height: 60px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.custom-slot-provider-picker > button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 8%, var(--surface)); }
.custom-slot-provider-picker > button:disabled { opacity: .52; cursor: not-allowed; }
.custom-slot-provider-picker > button[data-slot-status="busy"] { border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); }
.custom-slot-provider-picker > button[data-slot-status="outside"] { border-style: dashed; }
.custom-slot-provider-picker > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.custom-slot-provider-picker > button strong,
.custom-slot-provider-picker > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-slot-provider-picker > button strong { font-size: 10px; }
.custom-slot-provider-picker > button small { color: var(--muted); font-size: 8px; }
.custom-slot-provider-picker > button > svg { width: 17px; height: 17px; color: var(--theme-accent); }
.custom-provider-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-soft); font-size: 11px; font-weight: 900; }
.custom-provider-avatar img { width: 100%; height: 100%; object-fit: cover; }
.custom-provider-empty { grid-column: 1 / -1; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 9px; }
.custom-provider-empty svg { width: 17px; height: 17px; }
.custom-slot-preview { min-height: 48px; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border: 1px solid #cfe3db; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); }
.custom-slot-preview svg { flex: 0 0 17px; width: 17px; height: 17px; }
.custom-slot-preview span { font-size: 10px; font-weight: 750; }
.custom-slot-preview[data-state="error"] { border-color: #ecd0ca; background: #fff2ef; color: var(--danger); }
.manual-booking-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; align-items: center; gap: 10px; margin-bottom: 16px; }
.manual-booking-heading > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); }
.manual-booking-heading > span svg { width: 17px; height: 17px; }
.manual-booking-heading > div { min-width: 0; }
.manual-booking-heading small { color: var(--green); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.manual-booking-heading h2 { margin: 2px 0 0; }
.manual-booking-heading > button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; }
.manual-booking-heading > button svg { width: 16px; height: 16px; }
.manual-booking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.manual-booking-grid label { min-width: 0; display: grid; gap: 5px; color: var(--ink); font-size: 8px; font-weight: 800; }
.manual-booking-grid input,
.manual-booking-grid select,
.manual-booking-grid textarea { width: 100%; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid #d8dfda; border-radius: 7px; outline: 0; background: #fbfcfb; color: var(--ink); font: inherit; font-size: 10px; }
.manual-booking-grid textarea { min-height: 80px; padding-block: 9px; resize: vertical; }
.manual-booking-grid input:focus,
.manual-booking-grid select:focus,
.manual-booking-grid textarea:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 3px rgba(18,126,105,.08); }

.client-business-reply {
  position: static;
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  margin: 0;
  padding: 11px;
  border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
  background: #f2f8f5;
}
.client-business-reply > div { min-width: 0; }
.client-business-reply > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #dff1ea; color: var(--green); }
.client-business-reply svg { width: 15px; height: 15px; }
.client-business-reply strong { display: block; margin-bottom: 3px; font-size: 11px; }
.client-business-reply p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.manual-slot-field,
.manual-notes { grid-column: 1 / -1; }
.manual-slot-field small { color: var(--muted); font-size: 7px; font-weight: 500; }
.manual-booking-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }
.manual-booking-actions button { min-height: 38px; }

@media (hover: hover) {
  .business-navigation button:hover,
  .business-side-footer a:hover,
  .business-side-footer button:hover { background: var(--surface-soft); color: var(--ink); }
  .agenda-row:hover { background: #f8faf8; }
  .overview-alert:hover,
  .client-directory-card:hover,
  .business-service-card:hover,
  .business-team-card:hover { border-color: #b9d2c8; }
}

@media (max-width: 1080px) {
  .business-v2 .business-app { grid-template-columns: 190px minmax(0, 1fr); }
  .business-overview-grid,
  .calendar-layout,
  .analytics-grid,
  .integration-workspace { grid-template-columns: 1fr; }
  .calendar-control-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); gap: 14px; }
  .calendar-control-panel .workspace-panel-title { grid-column: 1 / -1; margin-bottom: 0; }
  .calendar-control-panel .week-availability { margin-top: 0; border-top: 0; }
}

@media (max-width: 860px) {
  .business-v2 .business-app { display: block; }
  /* On phones and tablets the navigation is a reachable dock, not a squeezed desktop header. */
  .business-v2 .business-sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 50;
    height: auto;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -10px 28px rgba(20, 25, 29, .14);
  }
  .business-side-brand,
  .business-side-footer { display: none; }
  .business-navigation { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .business-more-toggle { display: grid !important; }
  .business-navigation button {
    position: relative;
    width: 100%;
    min-height: 48px;
    grid-template-columns: 1fr;
    grid-template-rows: 18px 12px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 4px;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .business-navigation button svg { width: 15px; height: 15px; }
  .business-navigation button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 9px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    text-overflow: ellipsis;
  }
  .business-navigation button b { position: absolute; top: 5px; right: max(7px, 12%); margin: 0; }
  .business-navigation button:active { transform: scale(.96); }
  .business-navigation button[hidden] { display: none; }
  .business-mobile-more {
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    right: 10px;
    left: 10px;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(20, 25, 29, .16);
  }
  .business-mobile-more[hidden] { display: none; }
  .business-mobile-more button {
    position: relative;
    min-height: 46px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .business-mobile-more button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, var(--surface)); color: var(--ink); }
  .business-mobile-more button[hidden] { display: none; }
  .business-mobile-more button svg { width: 16px; height: 16px; }
  .business-mobile-more button b { min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 8px; }
  .business-mobile-more button b[hidden] { display: none; }
  .business-v2 .business-topbar {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 12px;
  }
  .business-v2 .business-header-actions { width: auto; align-items: flex-start; justify-content: flex-end; }
  .business-v2 .business-actor-pill,
  .business-v2 .sync-pill { display: none; }
  .business-primary-action { min-height: 40px; padding-inline: 12px; }
  .business-mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 11px;
  }
  .business-mobile-quick-actions button {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .business-mobile-quick-actions button.primary { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); }
  .business-mobile-quick-actions button > i { width: 19px; height: 19px; }
  .business-mobile-quick-actions button > span { min-width: 0; display: grid; gap: 3px; }
  .business-mobile-quick-actions strong { overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .business-mobile-quick-actions small { overflow: hidden; color: var(--muted); font-size: 7px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .business-mobile-quick-actions button.primary small { color: color-mix(in srgb, var(--theme-accent-contrast) 70%, transparent); }
  .business-mobile-quick-actions button:active { transform: scale(.98); }
  .business-mobile-hub { display: grid; gap: 14px; }
  .mobile-hub-hero {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--theme-accent);
    border-radius: 8px;
    background: var(--surface);
  }
  .mobile-hub-hero > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
  .mobile-hub-hero svg { width: 19px; height: 19px; }
  .mobile-hub-hero > div { min-width: 0; display: grid; gap: 3px; }
  .mobile-hub-hero small { color: var(--theme-accent); font-size: 8px; font-weight: 850; text-transform: uppercase; }
  .mobile-hub-hero h2 { margin: 0; font-size: 17px; }
  .mobile-hub-hero p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
  .mobile-hub-group { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .mobile-hub-group h3 { margin: 0; padding: 11px 12px 7px; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
  .mobile-hub-group button {
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-hub-group button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
  .mobile-hub-group button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
  .mobile-hub-group button strong { font-size: 10px; }
  .mobile-hub-group button small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-group button > i { width: 15px; height: 15px; color: var(--muted); }
  .mobile-hub-group button:active { background: var(--surface-soft); }
  .business-health { grid-template-columns: 1fr; }
  .business-health > div { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line); }
  .business-health > div:first-child { min-height: 64px; }
  .business-health > div:nth-child(n + 3) { display: none; }
  .business-health > div:nth-child(2) { border-bottom: 0; }
  .business-health > div:nth-child(2) > svg { display: block; }
  .business-health strong,
  .business-health small { overflow: visible; white-space: normal; text-overflow: clip; }
  .business-health strong { font-size: 11px; }
  .business-health small { font-size: 9px; }
  .business-action-center { grid-template-columns: 1fr; align-items: stretch; gap: 11px; padding: 13px; }
  .business-focus-copy strong { overflow: visible; white-space: normal; text-overflow: clip; }
  .business-focus-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .business-focus-actions button:first-child { grid-column: 1 / -1; }
  .business-focus-actions button { min-width: 0; min-height: 38px; padding-inline: 8px; }
  .business-workspace { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); }
  .business-records,
  .business-review-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .business-v2 .business-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
  .business-v2 .business-header-actions { width: auto; align-items: flex-start; justify-content: flex-end; flex-direction: row; }
  .business-v2 .business-actor-pill,
  .business-v2 .sync-pill { display: none; }
  .business-primary-action { min-height: 40px; padding-inline: 12px; }
  .business-v2 .business-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-action-center { grid-template-columns: 1fr; align-items: stretch; gap: 11px; }
  .business-focus-actions { justify-content: flex-start; }
  .agenda-row { grid-template-columns: 43px minmax(0, 1fr) 64px 14px; }
  .agenda-price { display: none; }
  .catalog-workspace { grid-template-columns: 1fr; }
  .calendar-control-panel { display: block; }
  .calendar-control-panel .workspace-panel-title { margin-bottom: 10px; }
  .calendar-control-panel .week-availability { margin-top: 12px; border-top: 1px solid var(--line); }
  .calendar-slots-panel .workspace-panel-title { align-items: stretch; flex-direction: column; }
  .calendar-slots-panel .workspace-panel-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-slots-panel .workspace-panel-actions button:last-child { grid-column: 1 / -1; }
  .calendar-slots-panel .workspace-panel-actions button { width: 100%; }
  .review-workspace-summary { grid-template-columns: 1fr; }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-health { grid-template-columns: 1fr; gap: 12px; }
  .analytics-health-list { grid-template-columns: 1fr; }
  .client-directory-card { grid-template-columns: 38px minmax(0, 1fr) 34px; }
  .client-directory-value { grid-column: 2; grid-row: 2; justify-items: start; }
  .client-directory-card > a,
  .client-no-phone { grid-column: 3; grid-row: 1 / 3; }
  .bookings-controls { display: block; padding: 9px; }
  .bookings-controls .view-toolbar { margin-bottom: 8px; }
  .bookings-controls .business-search { flex: 0 0 50px; }
  .business-v2 .bookings-controls .ops-filters { display: flex; }
  .business-v2 .bookings-controls .ops-filters button { min-width: max-content; }

  /* Booking and availability are focused mobile tasks, not a tiny dialog inside a page. */
  .business-v2 .manual-booking-dialog,
  .business-v2 .custom-slot-dialog {
    width: 100dvw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .manual-booking-dialog form,
  .custom-slot-dialog form {
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom));
  }
  .manual-booking-grid { grid-template-columns: 1fr; gap: 13px; }
  .manual-booking-grid textarea { min-height: 92px; }
  .manual-booking-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 18px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
  }
  .manual-booking-actions button { flex: 1 1 0; min-height: 46px; }
}

@media (max-width: 460px) {
  .business-navigation button { min-width: 0; grid-template-rows: 17px 11px; }
  .business-navigation button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 9px;
    font-weight: 800;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .business-navigation button b { top: 5px; right: 6px; }
  .business-mobile-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-workspace { padding-inline: 9px; }
  .business-page-heading h1 { font-size: 22px; }
  .business-v2 .business-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .business-header-actions .business-primary-action span { display: none; }
  .business-header-actions .business-primary-action { width: 40px; padding: 0; }
  .business-health > div { min-height: 54px; padding: 8px 10px; }
  .business-health > div:first-child { min-height: 58px; padding: 9px 10px; }
  .business-health strong { font-size: 10px; }
  .business-mobile-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .business-mobile-quick-actions button:first-child { grid-column: 1 / -1; }
  .business-mobile-quick-actions button { min-height: 54px; grid-template-columns: 23px minmax(0, 1fr); padding: 8px 10px; }
  .business-mobile-quick-actions strong { font-size: 10px; }
  .business-mobile-quick-actions small { font-size: 8px; }
  .business-v2 .business-dashboard .metric { min-height: 70px; padding: 9px; }
  .business-focus-copy strong { white-space: normal; }
  .business-focus-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-focus-actions button:first-child { grid-column: 1 / -1; }
  .business-focus-actions button { min-width: 0; padding-inline: 7px; }
  .business-focus-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .business-v2 .metric-copy strong { font-size: 14px; }
  .agenda-row { grid-template-columns: 40px minmax(0, 1fr) 14px; }
  .agenda-state { display: none; }
  .view-toolbar { align-items: stretch; flex-direction: column; gap: 6px; }
  .view-toolbar > span { align-self: flex-end; }
  .business-v2 .op-card .op-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-v2 .op-card .op-details span:last-child { grid-column: 1 / -1; }
  .op-card-footer { align-items: stretch; flex-direction: column; }
  .op-card .assistant-controls { justify-content: space-between; }
  .manual-booking-grid { grid-template-columns: 1fr; }
  .manual-slot-field,
  .manual-notes { grid-column: auto; }
  .custom-slot-dialog form { padding: 14px; }
}

/* Responsive foundation and shared select controls */
.business-v2 { overflow-x: clip; }
.business-v2 .business-app { width: 100%; max-width: 100%; min-width: 0; }
.business-v2 .business-sidebar { max-width: 100%; overflow-x: hidden; }
.business-v2.business-starting .business-app,
.business-v2 .business-app[aria-hidden="true"] { visibility: hidden; }
.business-boot {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: #f4f6f4;
}
.business-boot[hidden] { display: none; }
.business-boot > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 32px rgba(18, 83, 70, .14);
}
.business-boot > i {
  width: 28px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce5e0;
}
.business-boot > i::after {
  content: "";
  display: block;
  width: 12px;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  animation: business-boot-progress 900ms ease-in-out infinite alternate;
}
@keyframes business-boot-progress {
  from { transform: translateX(0); }
  to { transform: translateX(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .business-boot > i::after { animation: none; width: 100%; opacity: .6; }
}

/* Partner workspace typography must stay readable during long shifts. */
.business-navigation button,
.business-side-footer a,
.business-side-footer button { font-size: 11px; }
.business-side-brand small { font-size: 9px; }
.business-page-heading p { font-size: 9px; }
.business-page-heading > span { font-size: 11px; }
.business-primary-action { font-size: 11px; }
.business-health small { font-size: 9px; }
.business-health strong { font-size: 11px; }
.business-health-main strong { font-size: 13px; }
.business-v2 .metric-copy > span { font-size: 10px; }
.business-v2 .metric-copy > small { font-size: 8px; }
.workspace-panel-title small,
.view-section-title small { font-size: 8px; }
.workspace-panel-title h2,
.view-section-title h2 { font-size: 15px; }
.workspace-panel-title > button,
.workspace-panel-title > span:last-child,
.view-section-title > span:last-child { font-size: 9px; }
.agenda-main strong { font-size: 11px; }
.agenda-main small { font-size: 9px; }
.agenda-price { font-size: 10px; }
.agenda-state { font-size: 8px; }
.overview-alert strong { font-size: 10px; }
.overview-alert small { font-size: 9px; }
.business-search input { font-size: 11px; }
.view-toolbar > span { font-size: 10px; }
.client-directory-main strong,
.client-directory-value strong,
.business-service-card strong,
.business-team-card strong,
.business-service-card > b { font-size: 11px; }
.client-directory-main small,
.client-directory-main span,
.client-directory-value small,
.client-directory-value span,
.business-service-card small,
.business-team-card small,
.business-service-card em,
.business-team-card em { font-size: 9px; }
.review-workspace-summary small,
.review-workspace-summary span,
.analytics-kpis small { font-size: 9px; }
.service-analytics strong,
.service-analytics b,
.integration-events strong { font-size: 10px; }
.service-analytics small,
.integration-events small { font-size: 9px; }
.manual-booking-heading small,
.manual-booking-grid label { font-size: 9px; }
.manual-booking-grid input,
.manual-booking-grid textarea { font-size: 11px; }

.yaqin-select {
  position: relative;
  min-width: 0;
  display: block;
  width: 100%;
}

.yaqin-native-select {
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.yaqin-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #d7ded9;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.yaqin-select-trigger:hover { border-color: #a8beb5; }
.yaqin-select-trigger:focus-visible,
.yaqin-select-trigger[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18,126,105,.1); }
.yaqin-select-trigger:disabled { cursor: not-allowed; opacity: .58; background: #f2f4f2; }
.yaqin-select-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yaqin-select-trigger > i { width: 8px; height: 8px; justify-self: center; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 140ms ease; }
.yaqin-select-trigger[aria-expanded="true"] > i { transform: translateY(2px) rotate(225deg); }

.yaqin-select-scrim {
  position: fixed;
  inset: 0;
  z-index: 238;
  border: 0;
  background: rgba(18, 27, 22, .2);
  backdrop-filter: blur(1px);
}
.yaqin-select-scrim[hidden] { display: none; }

.yaqin-select-menu {
  position: fixed;
  z-index: 240;
  max-height: min(360px, calc(100dvh - 24px));
  overflow: hidden;
  border: 1px solid #d7ded9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(19, 33, 26, .2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.yaqin-select-menu[hidden] { display: none; }
.yaqin-select-menu.open { opacity: 1; transform: translateY(0); }
.yaqin-select-menu header { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--line); }
.yaqin-select-menu header strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.yaqin-select-menu header button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--ink); font-size: 19px; cursor: pointer; }
.yaqin-select-options { max-height: min(304px, calc(100dvh - 78px)); padding: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.yaqin-select-options > button { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 11px; font-weight: 680; text-align: left; cursor: pointer; }
.yaqin-select-options > button:hover,
.yaqin-select-options > button:focus-visible { outline: 0; background: #f0f6f3; }
.yaqin-select-options > button[aria-selected="true"] { background: var(--green-soft); color: var(--green-dark); font-weight: 820; }
.yaqin-select-options > button:disabled { opacity: .42; cursor: not-allowed; }
.yaqin-select-options > button i { display: none; width: 10px; height: 6px; justify-self: center; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.yaqin-select-options > button[aria-selected="true"] i { display: block; }

.business-v2 .business-workspace {
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
}
.business-v2 .business-view,
.business-v2 .workspace-panel,
.business-v2 .view-toolbar { min-width: 0; }

@media (min-width: 700px) {
  .client-page { background: #edf1ed; }
  .client-page .app-shell { width: min(960px, 100%); }
  .client-page .app-content { padding-inline: 24px; }
  .client-page .place-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .client-page .bottom-nav { width: min(680px, calc(100% - 48px)); bottom: 14px; height: 64px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
  .client-page .place-sheet,
  .client-page .booking-sheet,
  .client-page .utility-sheet { width: min(720px, calc(100% - 40px)); bottom: 12px; border-radius: 12px; }
  .client-page .compare-tray { width: min(620px, calc(100% - 48px)); bottom: 88px; }
}

@media (min-width: 1000px) {
  .client-page .app-shell { width: 100%; margin: 0; box-shadow: none; }
  .client-page .app-content { padding-inline: clamp(28px, 4vw, 76px); }
  .client-page .place-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-page .app-panel:not(#discover) { width: min(1200px, 100%); margin-inline: auto; }
  .client-page .bottom-nav { width: min(960px, calc(100% - 64px)); }
}

@media (min-width: 1500px) {
  .client-page .place-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .business-v2 .business-workspace { padding-inline: clamp(30px, 2.4vw, 48px); }
}

@media (max-width: 1350px) {
  .bookings-controls { grid-template-columns: 1fr; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .business-v2 .business-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-v2 .business-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-v2 .business-health > div:nth-child(2) { border-right: 0; }
  .business-v2 .business-health > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (min-width: 1500px) {
  .business-v2 .business-workspace { padding-inline: 30px; }
}

@media (max-width: 699px) {
  .yaqin-select-menu {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto !important;
    max-height: min(68dvh, 520px);
    transform: translateY(12px);
  }
  .yaqin-select-menu.open { transform: translateY(0); }
  .yaqin-select-menu header { min-height: 52px; }
  .yaqin-select-options { max-height: calc(min(68dvh, 520px) - 58px); padding: 6px; }
  .yaqin-select-options > button { min-height: 48px; font-size: 12px; }
  body.yaqin-select-open { overflow: hidden; }
}

@media (max-width: 340px) {
  .client-page .app-topbar { padding-inline: 10px; }
  .client-page .app-content { padding-inline: 10px; }
  .client-page .category-rail,
  .client-page .filter-chips,
  .client-page .prompt-suggestions { margin-inline: -10px; padding-inline: 10px; }
  .business-workspace { padding-inline: 7px; }
  .business-v2 .business-dashboard { grid-template-columns: 1fr; }
  .business-v2 .business-topbar { gap: 8px; }
}

/* Vaqto 1.0: warmer consumer UI and a focused business builder */
.client-page,
.business-v2 { background: var(--app-bg); }

.client-startup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: #ececeb;
  color: #25262d;
}
.client-startup-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
}
.client-startup-brand span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #25262d;
  color: #fff;
  font-weight: 900;
}
.client-startup-status {
  align-self: center;
  justify-self: center;
  width: min(430px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.client-startup-status > strong { font-size: clamp(22px, 4vw, 30px); }
.client-startup-status > p { margin: 0; color: #73767d; line-height: 1.5; }
.client-startup-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border: 3px solid #d4d5d3;
  border-top-color: #25262d;
  border-radius: 50%;
  animation: client-startup-spin .8s linear infinite;
}
.client-startup-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.client-startup-actions[hidden] { display: none; }
.client-startup-actions button { min-height: 52px; }
@keyframes client-startup-spin { to { transform: rotate(360deg); } }

[data-theme="midnight"] .client-startup { background: #111317; color: #f5f6f7; }
[data-theme="midnight"] .client-startup-brand span { background: #f5f6f7; color: #17191e; }
[data-theme="midnight"] .client-startup-status > p { color: #abb0b8; }
[data-theme="midnight"] .client-startup-spinner { border-color: #353a43; border-top-color: #f5f6f7; }

.client-page .app-shell {
  background: #f8f7f4;
  box-shadow: 0 0 0 1px rgba(54, 50, 43, .04), 0 24px 70px rgba(45, 42, 37, .08);
}

.client-page .app-topbar {
  border-bottom-color: #ded9d0;
  background: rgba(250, 249, 246, .94);
}

.client-page .brand-mark,
.client-page .city-button > span:first-child,
.business-logo {
  background: #25262d;
  color: #fff;
}

.client-page .category-tile .category-icon {
  border: 1px solid #ded9d0;
  background: #fff;
  color: #55545b;
}

.client-page .category-tile.active .category-icon {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 20px rgba(49, 87, 213, .22);
}

.client-page .search-box,
.client-page .place-card,
.client-page .profile-summary,
.client-page .settings-group {
  border-color: #ded9d0;
  box-shadow: 0 8px 22px rgba(47, 43, 38, .055);
}

.client-page .place-card[data-category="sport"] { --place-accent: #3157d5; }
.client-page .place-card[data-category="clinic"] { --place-accent: #d45f47; }
.client-page .place-card[data-category="beauty"] { --place-accent: #8555a8; }
.client-page .place-card[data-category="food"] { --place-accent: #b8750b; }
.client-page .place-card[data-category="pc"] { --place-accent: #0f7d86; }

.home-tool-ai,
.compare-tray {
  border-color: #25262d;
  background: #25262d;
}

.home-tool-ai > span { color: #bfcaff; }
.home-tool-scan { border-color: #ead4c6; background: #fff4ed; }
.home-tool-scan > span { background: #ffe0d0; color: #b64d35; }
.bottom-nav { background: rgba(255, 255, 255, .96); }
.nav-item.active { color: var(--green); }
.nav-scan-icon { background: var(--coral-soft); color: var(--coral); }

.business-v2 .business-sidebar {
  border-right-color: #303139;
  background: #24252b;
  color: #fff;
}

.business-side-brand strong { color: #fff; }
.business-side-brand small { color: #a9aab3; }
.business-navigation button,
.business-side-footer a,
.business-side-footer button { color: #b8b9c2; }
.business-navigation button.active {
  background: #fff;
  color: #25262d;
  box-shadow: 0 5px 16px rgba(0,0,0,.17);
}
.business-side-footer { border-top-color: #3a3b43; }
.business-v2 .business-workspace { background: #f4f2ee; }
.business-v2 .workspace-panel,
.business-v2 .metric,
.business-v2 .op-card,
.business-v2 .business-service-card,
.business-v2 .business-team-card {
  border-color: #ddd8cf;
  box-shadow: 0 7px 20px rgba(43, 39, 34, .045);
}

.business-v2 .business-health {
  border-color: #d9d5cc;
  background: #fff;
}
.business-v2 .business-health-main { background: #25262d; color: #fff; }
.business-v2 .business-health-main small { color: #b8b9c2; }
.business-v2 .metric:nth-child(2) .metric-icon { background: var(--blue-soft); color: var(--blue); }
.business-v2 .metric:nth-child(3) .metric-icon { background: var(--violet-soft); color: var(--violet); }
.business-v2 .metric:nth-child(4) .metric-icon { background: var(--amber-soft); color: var(--amber); }

.catalog-builder-head {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #d9d4ca;
  border-left: 4px solid var(--coral);
  border-radius: 8px;
  background: #fff;
}
.catalog-builder-head > div:first-child { min-width: 0; }
.catalog-builder-head small { color: var(--coral); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.catalog-builder-head h2 { margin: 5px 0 4px; font-size: 18px; }
.catalog-builder-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.catalog-builder-head > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }
.catalog-builder-head button,
.business-form-actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.catalog-builder-head button.secondary { border-color: #d7d2c9; background: #fff; color: var(--ink); }
.catalog-builder-head svg,
.business-form-actions button svg { width: 15px; height: 15px; }

.business-service-card,
.business-team-card { position: relative; padding-right: 10px; }
.business-service-card.inactive,
.business-team-card.inactive { background: #f1efeb; opacity: .72; }
.catalog-card-actions {
  position: static;
  display: flex !important;
  grid-auto-flow: column;
  gap: 5px !important;
}
.catalog-card-actions button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ddd8cf;
  border-radius: 6px;
  background: #fff;
  color: #55545b;
  cursor: pointer;
}
.catalog-card-actions button:hover { border-color: var(--green); color: var(--green); }
.catalog-card-actions button.danger { color: var(--danger); }
.catalog-card-actions button.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.catalog-card-actions svg { width: 13px; height: 13px; }
.catalog-empty-action {
  width: 100%;
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed #c9c2b7;
  border-radius: 8px;
  background: rgba(255,255,255,.56);
  color: var(--ink);
  cursor: pointer;
}
.catalog-empty-action svg { width: 24px; height: 24px; color: var(--green); }
.catalog-empty-action strong { font-size: 11px; }
.catalog-empty-action span { color: var(--muted); font-size: 9px; }

.business-settings-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 14px; align-items: start; }
.business-profile-form { grid-row: span 2; }
.business-profile-form,
.business-hours-form { margin: 0; }
.business-form-grid,
.entity-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.business-form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.business-form-grid label,
.entity-form-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
}
.business-form-grid label.wide,
.entity-form-grid label.wide { grid-column: 1 / -1; }
.business-form-grid input,
.business-form-grid select,
.business-form-grid textarea,
.entity-form-grid input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid #d8d3ca;
  border-radius: 7px;
  outline: 0;
  background: #faf9f7;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.business-form-grid textarea { min-height: 106px; padding-block: 10px; resize: vertical; }
.business-form-grid input:focus,
.business-form-grid select:focus,
.business-form-grid textarea:focus,
.entity-form-grid input:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(49,87,213,.1); }
.business-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.business-form-actions > span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.weekday-selector { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; margin-bottom: 14px; }
.weekday-selector button { min-width: 0; min-height: 36px; padding: 0; border: 1px solid #ddd8cf; border-radius: 6px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.weekday-selector button.active { border-color: var(--green); background: var(--green); color: #fff; }
.setup-readiness .workspace-panel-title b { color: var(--green); font-size: 18px; }
.setup-readiness > div:last-child { display: grid; gap: 9px; }
.setup-readiness > div:last-child > div { min-height: 38px; display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.setup-readiness > div:last-child > div.ready { color: var(--ink); }
.setup-readiness svg { width: 17px; height: 17px; color: #aaa7a1; }
.setup-readiness .ready svg { color: var(--blue); }
.business-structure-panel { grid-column: 1 / -1; }
.business-structure-copy { max-width: 720px; margin: -2px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.business-location-list { display: grid; gap: 7px; }
.business-location-list > button { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 31px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink); text-align: left; cursor: pointer; }
.business-location-list > button > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); }
.business-location-list > button svg { width: 14px; height: 14px; }
.business-location-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.business-location-list strong,
.business-location-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-location-list strong { font-size: 10px; }
.business-location-list small { color: var(--muted); font-size: 8px; }
.business-location-list > button > svg { color: var(--muted); }
.business-inline-action { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.business-inline-action svg { width: 14px; height: 14px; color: var(--theme-accent); }
.business-actor-pill { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink); font-size: 8px; font-weight: 850; white-space: nowrap; }
.business-actor-pill svg { width: 14px; height: 14px; color: var(--theme-accent); }
.business-access-panel { grid-column: 1 / -1; }
.business-access-list { display: grid; gap: 7px; }
.business-access-list > div { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.business-access-list > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); }
.business-access-list svg { width: 14px; height: 14px; }
.business-access-list strong, .business-access-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-access-list strong { font-size: 10px; }
.business-access-list small { color: var(--muted); font-size: 8px; }

.owner-admin-hero { min-height: 136px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--theme-accent); border-radius: 8px; background: var(--surface); }
.owner-admin-hero > div { min-width: 0; }
.owner-admin-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 7px; background: var(--green-soft); color: var(--theme-accent); }
.owner-admin-icon svg { width: 18px; height: 18px; }
.owner-admin-hero small { color: var(--theme-accent); font-size: 8px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.owner-admin-hero h2 { margin: 4px 0 4px; font-size: 20px; }
.owner-admin-hero p { max-width: 620px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.owner-admin-hero .business-primary-action { flex: 0 0 auto; }
.owner-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.owner-admin-stats > div { min-height: 78px; display: grid; grid-template-columns: 29px minmax(0, 1fr); grid-template-rows: 1fr 18px; align-items: center; column-gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.owner-admin-stats span { width: 29px; height: 29px; display: grid; grid-row: 1 / 3; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--theme-accent); }
.owner-admin-stats svg { width: 15px; height: 15px; }
.owner-admin-stats strong { align-self: end; font-size: 16px; }
.owner-admin-stats small { align-self: start; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.owner-admin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr); gap: 14px; align-items: start; }
.owner-admin-access-list { display: grid; gap: 7px; }
.owner-admin-account { min-width: 0; min-height: 68px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.owner-admin-account.suspended { opacity: .72; }
.owner-admin-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--theme-accent); }
.owner-admin-avatar svg { width: 16px; height: 16px; }
.owner-admin-account > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.owner-admin-account strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.owner-admin-account small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.owner-admin-account code { width: max-content; max-width: 100%; overflow: hidden; padding: 2px 5px; border-radius: 4px; background: var(--surface); color: var(--muted); font-family: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.owner-admin-state { width: max-content; max-width: 100%; min-height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; background: var(--green-soft); color: var(--theme-accent); font-size: 8px; font-weight: 800; white-space: nowrap; }
.owner-admin-state.paused { background: var(--coral-soft); color: var(--muted); }
.owner-admin-account-actions { display: grid; grid-template-columns: auto 30px 30px; align-items: center; gap: 5px; }
.owner-admin-account-actions button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.owner-admin-account-actions button svg { width: 14px; height: 14px; }
.owner-admin-empty { min-height: 108px; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 14px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); text-align: center; }
.owner-admin-empty svg { width: 22px; height: 22px; color: var(--theme-accent); }
.owner-admin-empty strong { color: var(--ink); font-size: 10px; }
.owner-admin-empty span { max-width: 280px; font-size: 8px; line-height: 1.4; }
.owner-admin-structure-list { display: grid; gap: 2px; }
.owner-admin-structure-list > div { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.owner-admin-structure-list > div:last-child { border-bottom: 0; }
.owner-admin-structure-list > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--theme-accent); }
.owner-admin-structure-list svg { width: 14px; height: 14px; }
.owner-admin-structure-list p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.owner-admin-structure-list strong { font-size: 9px; }
.owner-admin-structure-list small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.owner-admin-links { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.owner-admin-links button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--ink); font-size: 9px; font-weight: 800; cursor: pointer; }
.owner-admin-links svg { width: 14px; height: 14px; color: var(--theme-accent); }
.business-access-state { min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); cursor: pointer; }
.business-access-state input { width: 16px; height: 16px; accent-color: var(--theme-accent); }
.business-access-state span { display: grid; gap: 2px; }
.business-access-state strong { font-size: 9px; }
.business-access-state small { color: var(--muted); font-size: 8px; }

.business-v2 .catalog-entity-dialog { width: min(580px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; }
.catalog-entity-dialog form { padding: 18px; }
.entity-provider-picker { display: grid; gap: 7px; margin: 14px 0 0; padding: 12px; border: 1px solid #ddd8cf; border-radius: 8px; }
.entity-provider-picker legend { padding: 0 5px; font-size: 9px; font-weight: 850; }
.entity-provider-picker > label { min-height: 43px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; background: #f7f5f1; cursor: pointer; }
.entity-provider-picker input { width: 16px; height: 16px; accent-color: var(--green); }
.entity-provider-picker label > span { display: grid; gap: 2px; font-size: 10px; font-weight: 800; }
.entity-provider-picker small { color: var(--muted); font-size: 8px; font-weight: 500; }
.entity-provider-picker p { margin: 4px; color: var(--muted); font-size: 9px; }

@media (max-width: 860px) {
  .business-v2 .business-sidebar { background: #24252b; border-bottom-color: #303139; }
  .business-settings-layout { grid-template-columns: 1fr; }
  .business-profile-form { grid-row: auto; }
  .owner-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .owner-admin-hero { align-items: flex-start; flex-direction: column; padding: 16px; }
  .owner-admin-hero .business-primary-action { width: 100%; }
  .owner-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .owner-admin-hero h2 { font-size: 17px; }
  .owner-admin-hero h2,
  .owner-admin-hero p { max-width: 100%; overflow-wrap: anywhere; }
  .owner-admin-hero .business-primary-action { width: 100%; }
  .owner-admin-hero .business-primary-action span { display: inline; }
  .owner-admin-stats small { line-height: 1.15; white-space: normal; }
  .owner-admin-account { grid-template-columns: 32px minmax(0, 1fr); }
  .owner-admin-account-actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 32px 32px; }
  .owner-admin-state { justify-content: center; }
}

@media (max-width: 560px) {
  .catalog-builder-head { align-items: stretch; flex-direction: column; padding: 15px; }
  .catalog-builder-head > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .business-form-grid,
  .business-form-grid.compact,
  .entity-form-grid { grid-template-columns: 1fr; }
  .business-form-grid label.wide,
  .entity-form-grid label.wide { grid-column: auto; }
  .business-form-actions { align-items: stretch; flex-direction: column; }
  .business-form-actions button { width: 100%; }
  .business-inline-action { width: 100%; }
  .business-actor-pill { display: none; }
  .business-service-card,
  .business-team-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding-right: 10px;
  }
  .business-service-card > b,
  .business-team-card > .team-load { grid-column: 2; justify-self: start; }
  .business-service-card > .catalog-card-actions,
  .business-team-card > .catalog-card-actions { grid-column: 3; grid-row: 1 / 3; }
}

/* Vaqto 1.1: coherent themes and simplified scheduling */
:root,
:root[data-theme="graphite"] {
  color-scheme: light;
  --app-bg: #eff0f0;
  --surface: #ffffff;
  --surface-soft: #f4f5f4;
  --ink: #17191d;
  --muted: #5f656d;
  --line: #d5d9d9;
  --green: #2b2e34;
  --green-dark: #17191d;
  --green-soft: #e9ebed;
  --blue: #41474f;
  --blue-soft: #e9ebed;
  --coral: #50545c;
  --coral-soft: #eff1f2;
  --amber: #575c64;
  --amber-soft: #eff1f2;
  --violet: #454a52;
  --violet-soft: #e9ebed;
  --danger: #b94343;
  --theme-accent: #262930;
  --theme-accent-contrast: #ffffff;
  --theme-sidebar: #23252b;
  --brand-mark-tone: #2a2d33;
}

:root[data-theme="snow"] {
  color-scheme: light;
  --app-bg: #eef2f4;
  --surface: #ffffff;
  --surface-soft: #e8eef1;
  --ink: #17222a;
  --muted: #5c6b75;
  --line: #cfd9df;
  --green: #405866;
  --green-dark: #263b46;
  --green-soft: #e3ebef;
  --blue: #405866;
  --blue-soft: #e3ebef;
  --coral: #596b75;
  --coral-soft: #edf2f4;
  --amber: #596b75;
  --amber-soft: #edf2f4;
  --violet: #4d606b;
  --violet-soft: #e3ebef;
  --danger: #b94343;
  --theme-accent: #38546d;
  --theme-accent-contrast: #ffffff;
  --theme-sidebar: #20272d;
  --brand-mark-tone: #56636e;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --app-bg: #101419;
  --surface: #1a2027;
  --surface-soft: #252d36;
  --ink: #f4f7f9;
  --muted: #b8c1c8;
  --line: #3c4854;
  --green: #d3dbe1;
  --green-dark: #f4f7f9;
  --green-soft: #2a3540;
  --blue: #d3dbe1;
  --blue-soft: #2a3540;
  --coral: #d3dbe1;
  --coral-soft: #2a3540;
  --amber: #d3dbe1;
  --amber-soft: #2a3540;
  --violet: #d3dbe1;
  --violet-soft: #2a3540;
  --danger: #ef7373;
  --theme-accent: #d3dbe1;
  --theme-accent-contrast: #151a20;
  --theme-sidebar: #0c1014;
  --brand-mark-tone: #f3f4f5;
}

.vaqto-logo {
  display: block;
  flex: 0 0 auto;
  background: var(--brand-mark-tone);
  -webkit-mask-image: url("./assets/vaqto-mark.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("./assets/vaqto-mark.png");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.client-page,
.business-v2,
.business-v2 .business-workspace { background: var(--app-bg); color: var(--ink); }

.client-page .app-shell,
.client-page .app-topbar,
.bottom-nav,
.workspace-panel,
.metric,
.op-card,
.business-service-card,
.business-team-card,
.catalog-builder-head,
.business-health {
  border-color: var(--line) !important;
  background: var(--surface);
  color: var(--ink);
}

.client-page .app-shell { background: color-mix(in srgb, var(--surface) 72%, var(--app-bg)); }
.client-page .app-topbar,
.bottom-nav { background: color-mix(in srgb, var(--surface) 94%, transparent); }
.client-page .brand-mark,
.client-page .city-button > span:first-child,
.business-logo,
.theme-welcome-mark {
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.client-page .brand-mark.vaqto-logo,
.business-logo.vaqto-logo,
.business-auth-panel .auth-brand > .vaqto-logo,
.business-boot > span.vaqto-logo,
.client-startup-brand > .vaqto-logo {
  background: var(--brand-mark-tone) !important;
  color: transparent !important;
  border-radius: 0;
}
.client-page .brand-mark.vaqto-logo { width: 38px; height: 38px; }
.business-logo.vaqto-logo { width: 36px; height: 36px; }
.business-auth-panel .auth-brand > .vaqto-logo { width: 42px; height: 42px; }
.business-boot > span.vaqto-logo { width: 46px; height: 46px; }
.client-startup-brand > .vaqto-logo { width: 46px; height: 46px; }

/* Keep every theme readable when legacy blocks still use the older white surfaces. */
:root[data-theme="snow"] .client-page :is(input, textarea, select, .yaqin-select-trigger, .yaqin-select-menu, .settings-group, .profile-settings-group, .booking-sheet, .place-sheet, .utility-sheet, dialog),
:root[data-theme="snow"] .business-v2 :is(input, textarea, select, .yaqin-select-trigger, .yaqin-select-menu, .workspace-panel, .business-auth-panel, dialog) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
:root[data-theme="midnight"] .client-page :is(.place-card, .settings-group, .profile-settings-group, .booking-card, .history-row, .notification-item, .city-option, .filter-chips button, .provider-filter-button, .slot-button, .payment-options button, .provider-options button, .settings-list button),
:root[data-theme="midnight"] .business-v2 :is(.workspace-panel, .metric, .op-card, .business-service-card, .business-team-card, .business-review-card, .client-directory-card, .agenda-row, .overview-alert, .connection-list > div, .catalog-builder-head, .business-auth-panel, .business-dialog) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
:root[data-theme="midnight"] .client-page :is(.place-card small, .settings-list small, .history-row small, .notification-item small, .city-option small, .booking-card small),
:root[data-theme="midnight"] .business-v2 :is(.workspace-panel small, .metric small, .op-card small, .business-service-card small, .business-team-card small, .business-review-card small, .agenda-row small, .overview-alert small, .connection-list small) { color: var(--muted) !important; }
:root[data-theme="midnight"] .business-navigation button.active { background: #d3dbe1; color: #151a20; }
:root[data-theme="midnight"] .business-navigation button.active svg { color: currentColor; }
:root[data-theme="midnight"] .business-auth { background: rgba(16, 20, 25, .96); }
:root[data-theme="snow"] .business-auth { background: rgba(238, 242, 244, .96); }
@media (max-width: 420px) {
  .location-button > span:not(.brand-mark) { width: min(40vw, 142px); }
}

.business-v2 .business-sidebar {
  border-color: color-mix(in srgb, var(--theme-sidebar) 72%, #fff) !important;
  background: var(--theme-sidebar);
}

.business-navigation button.active {
  background: #fff;
  color: #17191d;
}

.client-page .category-tile .category-icon,
.client-page .category-tile.active .category-icon,
.nav-scan-icon,
.metric-icon,
.business-service-card > span:first-child,
.setting-row-icon,
.settings-choice-icon {
  border-color: var(--line);
  background: var(--green-soft);
  color: var(--green-dark);
  box-shadow: none;
}

.client-page .category-tile.active .category-icon,
.primary-button,
.business-primary-action,
.workspace-panel-actions button:not(.secondary),
.catalog-builder-head button:not(.secondary),
.business-form-actions button,
.weekday-selector button.active {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.client-page .place-card[data-category] { --place-accent: var(--theme-accent); }
.home-tool-ai,
.compare-tray {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}
.home-tool-ai > span,
.home-tool-scan > span,
.nav-scan-icon { background: var(--green-soft); color: var(--green-dark); }
.home-tool-scan { border-color: var(--line); background: var(--surface); }
.payment-logo.payme,
.payment-logo.click,
.payment-logo.cash {
  background: var(--green-soft);
  color: var(--green-dark);
}
.catalog-builder-head { border-left-color: var(--theme-accent); }
.catalog-builder-head small { color: var(--green-dark); }

:root[data-theme="midnight"] .client-page .app-shell,
:root[data-theme="midnight"] .client-page .app-topbar,
:root[data-theme="midnight"] .bottom-nav,
:root[data-theme="midnight"] .place-card,
:root[data-theme="midnight"] .search-box,
:root[data-theme="midnight"] .settings-group,
:root[data-theme="midnight"] .profile-settings-group,
:root[data-theme="midnight"] .booking-sheet,
:root[data-theme="midnight"] .place-sheet,
:root[data-theme="midnight"] .utility-sheet,
:root[data-theme="midnight"] dialog,
:root[data-theme="midnight"] .booking-summary-card,
:root[data-theme="midnight"] .checkout-section,
:root[data-theme="midnight"] .booking-time-card,
:root[data-theme="midnight"] input,
:root[data-theme="midnight"] textarea,
:root[data-theme="midnight"] select,
:root[data-theme="midnight"] .yaqin-select-trigger,
:root[data-theme="midnight"] .yaqin-select-menu {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
:root[data-theme="midnight"] .business-navigation button.active {
  background: #303b46;
  color: #f3f4f5;
}
:root[data-theme="midnight"] .upcoming-card {
  border: 1px solid #40505e;
  background: #283640;
  color: #f3f4f5;
}
:root[data-theme="midnight"] .upcoming-copy small { color: #a9c2d5; }
:root[data-theme="midnight"] .location-context {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}
:root[data-theme="midnight"] .business-v2 .business-health,
:root[data-theme="midnight"] .business-v2 .business-dashboard .metric {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink);
}
:root[data-theme="midnight"] .business-v2 .business-health-main {
  background: var(--theme-sidebar);
  color: var(--ink);
}
:root[data-theme="midnight"] .business-v2 .business-health > div {
  border-color: var(--line);
}
:root[data-theme="midnight"] .catalog-builder-head button.secondary,
:root[data-theme="midnight"] .workspace-panel-actions button.secondary {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
:root[data-theme="midnight"] .business-dialog button:not(.primary):not(.danger) {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
:root[data-theme="midnight"] .business-dialog button.primary {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}
:root[data-theme="midnight"] .entity-provider-picker,
:root[data-theme="midnight"] .entity-provider-picker > label {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
:root[data-theme="midnight"] .favorite-button,
:root[data-theme="midnight"] .compare-button,
:root[data-theme="midnight"] .sheet-close,
:root[data-theme="midnight"] .place-core-actions button,
:root[data-theme="midnight"] .service-options button,
:root[data-theme="midnight"] .provider-filter-button,
:root[data-theme="midnight"] .booking-day-button,
:root[data-theme="midnight"] .slot-button,
:root[data-theme="midnight"] .slot-alert-card,
:root[data-theme="midnight"] .slot-alert-icon,
:root[data-theme="midnight"] .sheet-inline-link,
:root[data-theme="midnight"] .view-switch,
:root[data-theme="midnight"] .booking-mode-switch,
:root[data-theme="midnight"] .sheet-tabs,
:root[data-theme="midnight"] .overlay-header,
:root[data-theme="midnight"] .booking-time-card > span,
:root[data-theme="midnight"] .attendee-options > button,
:root[data-theme="midnight"] .provider-options > button,
:root[data-theme="midnight"] .payment-options > button,
:root[data-theme="midnight"] .compact-checkout,
:root[data-theme="midnight"] .booking-checkout-bar,
:root[data-theme="midnight"] .booking-hold-strip > span {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
:root[data-theme="midnight"] .view-switch button.active,
:root[data-theme="midnight"] .booking-mode-switch button.active,
:root[data-theme="midnight"] .sheet-tabs button.active,
:root[data-theme="midnight"] .filter-chips button.active {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}
:root[data-theme="midnight"] .place-core-actions button,
:root[data-theme="midnight"] .service-options button {
  color: var(--ink);
}
:root[data-theme="midnight"] .attendee-options > button.active,
:root[data-theme="midnight"] .provider-options > button.active,
:root[data-theme="midnight"] .payment-options > button.active {
  border-color: var(--theme-accent);
  background: var(--surface-soft);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--theme-accent);
}
:root[data-theme="midnight"] .client-page .category-tile.active .category-icon,
:root[data-theme="midnight"] .primary-button,
:root[data-theme="midnight"] .business-primary-action,
:root[data-theme="midnight"] .workspace-panel-actions button:not(.secondary),
:root[data-theme="midnight"] .catalog-builder-head button:not(.secondary),
:root[data-theme="midnight"] .business-form-actions button,
:root[data-theme="midnight"] .weekday-selector button.active {
  color: var(--theme-accent-contrast);
}

.rating-pill svg,
.sheet-rating svg,
.reputation-score span,
.review-card header b,
.business-review-card header b,
.profile-review-rating {
  color: var(--green-dark);
  fill: currentColor;
}
.rating-bars b,
.scan-quality-bar i {
  background: var(--theme-accent);
}
.review-star-input button.active {
  border-color: var(--theme-accent);
  background: var(--green-soft);
  color: var(--green-dark);
}
.signal.caution,
.notice-card,
.compare-warning strong,
.scan-source-row b,
.scan-detection-status[data-state="partial"],
.scan-focus-result.warning > span,
.scan-focus-result.pause > span,
.scan-answer-grid article.warning > span,
.scan-answer-grid article.pause > span,
.scan-ingredients li.warning,
.status-pill.pending,
.booking-hold-strip.expired,
.booking-warning,
.op-note {
  color: var(--ink);
}

.theme-welcome {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 20, 24, .62);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.theme-welcome.open { opacity: 1; pointer-events: auto; }
.theme-welcome-panel {
  width: min(520px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.theme-welcome-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; font-size: 19px; font-weight: 900; }
.theme-welcome-copy { display: grid; gap: 5px; }
.theme-welcome-copy small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.theme-welcome-copy h1 { margin: 0; font-size: 26px; }
.theme-welcome-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.theme-choice-grid > button {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.theme-choice-grid > button.active { border-color: var(--theme-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.theme-choice-grid > button:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}
.theme-choice-grid strong { font-size: 11px; }
.theme-choice-grid small { min-height: 24px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.theme-choice-grid > button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.theme-choice-grid > button > svg { width: 18px; height: 18px; }
.theme-preview { aspect-ratio: 1.5; display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 25% 1fr; gap: 4px; padding: 5px; border: 1px solid #d8dade; border-radius: 6px; overflow: hidden; }
.theme-preview i { display: block; border-radius: 2px; }
.theme-preview i:first-child { grid-row: 1 / -1; }
.theme-preview.graphite { background: #ececeb; }
.theme-preview.graphite i:first-child { background: #23252b; }
.theme-preview.graphite i:nth-child(2) { background: #fff; }
.theme-preview.graphite i:nth-child(3) { background: #d7d8da; }
.theme-preview.snow { background: #f4f6f8; }
.theme-preview.snow i:first-child { background: #38546d; }
.theme-preview.snow i:nth-child(2),
.theme-preview.snow i:nth-child(3) { background: #fff; }
.theme-preview.midnight { border-color: #41454d; background: #111317; }
.theme-preview.midnight i:first-child { background: #08090b; }
.theme-preview.midnight i:nth-child(2) { background: #2b2e34; }
.theme-preview.midnight i:nth-child(3) { background: #f0f1f2; }
.theme-welcome-continue { min-height: 48px; }

.appearance-options { display: grid; gap: 9px; }
.appearance-options .theme-choice-grid { grid-template-columns: 1fr; }
.appearance-options .theme-choice-grid > button { grid-template-columns: 92px minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 11px; }
.appearance-options .theme-choice-grid small { min-height: 0; }
.business-model-badge { width: max-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 24px; margin-top: 10px; padding: 0 8px; border-radius: 999px; background: var(--surface-soft); color: var(--theme-accent); font-size: 8px; font-weight: 850; }
.business-form-grid label > small { color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.4; }
.business-records > .op-card:only-child,
.business-review-list > .business-review-card:only-child { grid-column: 1 / -1; }

.booking-calendar {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.booking-calendar > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-calendar > header strong { font-size: 12px; text-transform: capitalize; }
.booking-calendar > header span { color: var(--muted); font-size: 8px; }
.booking-calendar-weekdays { display: none; }
.booking-calendar-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
  overflow: visible;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.booking-calendar-days::-webkit-scrollbar { display: none; }
.booking-calendar-days button {
  min-height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 6px 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  scroll-snap-align: start;
}
.booking-calendar-days button strong { font-size: 15px; }
.booking-calendar-days button small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.booking-calendar-days button em { color: var(--muted); font-size: 7px; font-style: normal; }
.booking-calendar-days button.active {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}
.booking-calendar-days button.active small { color: currentColor; opacity: .72; }
.booking-calendar-days button.active em { color: currentColor; background: transparent; opacity: .88; }

.booking-time-wheel {
  position: relative;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 5px 2px 9px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.booking-time-wheel::-webkit-scrollbar { display: none; }
.booking-time-wheel .slot-button {
  flex: 0 0 92px;
  min-height: 58px;
  scroll-snap-align: center;
  border-color: var(--line);
  background: var(--surface);
}

.business-record-day,
.schedule-day-section {
  display: grid;
  align-self: start;
  gap: 9px;
  margin-bottom: 14px;
}
.business-record-day > header,
.business-record-day > summary,
.schedule-day-section > header,
.schedule-day-section > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 0 4px;
  border-bottom: 1px solid var(--line);
}
.business-record-day > summary {
  list-style: none;
  cursor: pointer;
}
.business-record-day > summary::-webkit-details-marker { display: none; }
.schedule-day-section > summary {
  list-style: none;
  cursor: pointer;
}
.schedule-day-section > summary::-webkit-details-marker { display: none; }
.business-record-day > header span,
.business-record-day > summary span,
.schedule-day-section > header span,
.schedule-day-section > summary > span { display: grid; gap: 2px; }
.business-record-day > header strong,
.business-record-day > summary strong,
.schedule-day-section > header strong,
.schedule-day-section > summary strong { font-size: 11px; text-transform: capitalize; }
.business-record-day > header small,
.business-record-day > summary small,
.schedule-day-section > header small,
.schedule-day-section > summary small { color: var(--muted); font-size: 8px; }
.schedule-day-summary { display: flex; align-items: center; gap: 8px; }
.schedule-day-summary > svg { width: 15px; height: 15px; color: var(--muted); transition: transform 160ms ease; }
.schedule-day-section[open] .schedule-day-summary > svg { transform: rotate(180deg); }
.business-record-day > summary > svg { width: 15px; height: 15px; color: var(--muted); transition: transform 160ms ease; }
.business-record-day[open] > summary > svg { transform: rotate(180deg); }
.business-record-day-list { display: grid; gap: 9px; padding-top: 9px; }
.schedule-day-counts { display: flex; gap: 6px; }
.schedule-day-counts b {
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 8px;
}
.schedule-day-bookings,
.schedule-day-free { display: grid; gap: 6px; }
.schedule-day-free { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.schedule-lane { display: grid; gap: 7px; padding-top: 8px; }
.schedule-lane + .schedule-lane { margin-top: 5px; border-top: 1px solid var(--line); }
.schedule-lane > header { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.schedule-lane > header svg { width: 13px; height: 13px; }
.schedule-lane > header strong { color: var(--ink); font-size: 9px; }
.schedule-lane > header span { margin-left: auto; min-width: 21px; padding: 3px 5px; border-radius: 5px; background: var(--surface-soft); font-size: 8px; font-weight: 800; text-align: center; }
.schedule-free-slot,
.schedule-booked-slot {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.schedule-free-slot > span:not(.schedule-free-actions),
.schedule-booked-slot > span { min-width: 0; display: grid; gap: 2px; }
.schedule-free-slot strong,
.schedule-booked-slot strong { font-size: 10px; }
.schedule-free-slot small,
.schedule-booked-slot small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-free-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin-left: auto; }
.schedule-free-actions button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.schedule-free-actions button svg { width: 14px; height: 14px; }
.schedule-free-actions button.danger { border-color: color-mix(in srgb, var(--danger) 34%, var(--line)); color: var(--danger); }
.schedule-booked-slot { border-left: 3px solid var(--theme-accent); }

.availability-selects { grid-template-columns: repeat(3, minmax(0,1fr)); }
.payment-policy-note { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.business-payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.business-payment-methods > label { position: relative; min-width: 0; cursor: pointer; }
.business-payment-methods input { position: absolute; opacity: 0; pointer-events: none; }
.business-payment-methods label > span {
  min-height: 64px;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.business-payment-methods label > span > i,
.business-payment-methods label > span > b { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; }
.business-theme-options { grid-template-columns: repeat(3, minmax(0,1fr)); }
.business-theme-options > button { grid-template-columns: 58px minmax(0,1fr); align-items: center; }
.business-theme-options .theme-preview { grid-row: 1 / 3; }
.business-theme-options small { min-height: 0; }
.business-payment-methods svg { width: 16px; height: 16px; }
.business-payment-methods strong { font-size: 10px; }
.business-payment-methods small { color: var(--muted); font-size: 8px; }
.business-payment-methods input:checked + span { border-color: var(--theme-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 12%, transparent); }
.business-payment-methods input:checked + span::after { content: "✓"; grid-column: 3; grid-row: 1 / 3; color: var(--green-dark); font-size: 12px; font-weight: 900; }
.provider-schedule-fields { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.provider-schedule-fields > strong { display: block; margin-bottom: 4px; font-size: 10px; }
.provider-schedule-fields > p { margin: 0 0 10px; color: var(--muted); font-size: 8px; }
.provider-workdays { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; margin-bottom: 10px; }
.provider-workdays label { cursor: pointer; }
.provider-workdays input { position: absolute; opacity: 0; }
.provider-workdays span { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 8px; font-weight: 850; }
.provider-workdays input:checked + span { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); }
.provider-schedule-time { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.provider-schedule-time label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.payment-rule-field { margin-top: 12px; }
.payment-rule-field select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 0 10px; }
.service-payment-tag { display: inline-flex; width: fit-content; margin-top: 3px; color: var(--muted); font-size: 8px; font-style: normal; }
.manual-date-field,
.manual-slot-field { min-width: 0; display: grid; gap: 6px; }
.manual-date-field > span,
.manual-slot-field > span { color: var(--ink); font-size: 9px; font-weight: 800; }
.manual-date-picker {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 7px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.manual-date-picker::-webkit-scrollbar,
.manual-time-wheel::-webkit-scrollbar { display: none; }
.manual-date-picker button {
  flex: 0 0 58px;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  scroll-snap-align: start;
  cursor: pointer;
}
.manual-date-picker button small { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.manual-date-picker button strong { font-size: 13px; }
.manual-date-picker button em { color: var(--muted); font-size: 7px; font-style: normal; }
.manual-date-picker button.active,
.manual-time-wheel button.active { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-contrast); }
.manual-date-picker button.active small,
.manual-date-picker button.active em,
.manual-time-wheel button.active small { color: currentColor; opacity: .7; }
.manual-time-wheel {
  min-width: 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.manual-time-wheel button {
  flex: 0 0 96px;
  min-height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  scroll-snap-align: center;
  cursor: pointer;
}
.manual-time-wheel button strong { font-size: 11px; }
.manual-time-wheel button small { color: var(--muted); font-size: 7px; }
.manual-time-wheel > span,
.manual-picker-loading { min-height: 50px; display: grid; place-items: center; color: var(--muted); font-size: 8px; }
.manual-date-field,
.manual-slot-field { grid-column: 1 / -1; }

.business-payment-notice,
.payment-unavailable {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}
.business-payment-notice > svg,
.payment-unavailable > svg { width: 18px; height: 18px; color: var(--green-dark); }
.business-payment-notice > span,
.payment-unavailable > span { display: grid; gap: 2px; }
.business-payment-notice strong,
.payment-unavailable strong { font-size: 9px; }
.business-payment-notice small,
.payment-unavailable small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.payment-unavailable { grid-column: 1 / -1; }

.client-booking-day { display: grid; gap: 8px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.client-booking-day > header {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 3px;
  border-bottom: 1px solid var(--line);
}
.client-booking-day > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  list-style: none;
  cursor: pointer;
}
.client-booking-day > summary::-webkit-details-marker { display: none; }
.client-booking-day > summary span { display: grid; gap: 2px; }
.client-booking-day > summary strong { font-size: 11px; text-transform: capitalize; }
.client-booking-day > summary small { color: var(--muted); font-size: 8px; }
.client-booking-day > summary svg { width: 15px; height: 15px; color: var(--muted); transition: transform 160ms ease; }
.client-booking-day[open] > summary svg { transform: rotate(180deg); }
.client-booking-day > header span { display: grid; gap: 1px; }
.client-booking-day > header strong { font-size: 11px; text-transform: capitalize; }
.client-booking-day > header small { color: var(--muted); font-size: 8px; }
.client-booking-day > div { display: grid; gap: 9px; padding: 0 9px 9px; }
.client-booking-day .booking-card,
.client-booking-day .history-row { margin: 0; }
.booking-card.needs-finish { border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--line)); }
.business-delete-confirm { display: grid; gap: 6px; margin-top: 13px; text-align: left; }
.business-delete-confirm[hidden] { display: none; }
.business-delete-confirm > span { color: var(--ink); font-size: 9px; font-weight: 800; }
.business-delete-confirm input { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; }
.business-delete-confirm small { color: var(--muted); font-size: 8px; }

@media (hover: hover) {
  :root[data-theme="midnight"] .settings-list button:hover,
  :root[data-theme="midnight"] .agenda-row:hover,
  :root[data-theme="midnight"] .business-navigation button:hover,
  :root[data-theme="midnight"] .business-side-footer a:hover,
  :root[data-theme="midnight"] .business-side-footer button:hover,
  :root[data-theme="midnight"] .yaqin-select-options > button:hover,
  :root[data-theme="midnight"] .yaqin-select-options > button:focus-visible,
  :root[data-theme="midnight"] .catalog-card-actions button:not(.danger):hover {
    border-color: #4b535e;
    background: #30353d;
    color: #f3f4f5;
  }
}
:root[data-theme="midnight"] .manual-booking-grid input:focus,
:root[data-theme="midnight"] .manual-booking-grid select:focus,
:root[data-theme="midnight"] .manual-booking-grid textarea:focus {
  border-color: #707986;
  background: #252930;
  color: #f3f4f5;
}
.schedule-day-empty { min-height: 46px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 8px; }

.review-star-input button.active {
  border-color: var(--theme-accent);
  background: var(--green-soft);
  color: var(--green-dark);
}
.business-review-card header b,
.profile-review-rating { color: var(--green-dark); }
.booking-detail-hero.pending,
.booking-detail-hero.completed { background: var(--theme-accent); color: var(--theme-accent-contrast); }
.business-v2 .business-dashboard .metric:nth-child(n) .metric-icon,
.business-v2 .metric:nth-child(n) .metric-icon {
  background: var(--green-soft);
  color: var(--green-dark);
}
.settings-page .settings-list > :nth-child(n) .setting-row-icon,
.notification-icon.slot,
.notification-icon.move {
  background: var(--green-soft);
  color: var(--green-dark);
}
.overview-alert.info > span:first-child,
.connection-status.staged {
  background: var(--green-soft);
  color: var(--green-dark);
}

@media (max-width: 700px) {
  .theme-welcome-panel { padding: 18px; }
  .theme-choice-grid { grid-template-columns: 1fr; }
  .theme-choice-grid > button { grid-template-columns: 84px minmax(0,1fr); align-items: center; }
  .theme-choice-grid > button small { min-height: 0; }
  .theme-preview { grid-row: 1 / 3; }
  .appearance-options .theme-choice-grid > button { grid-template-columns: 78px minmax(0,1fr) 18px; }
  .availability-selects { grid-template-columns: 1fr; }
  .business-payment-methods { grid-template-columns: 1fr; }
  .schedule-day-free { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .booking-calendar-days {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .booking-calendar-days button { flex: 0 0 68px; }
  .custom-slot-date-picker { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .custom-slot-date-picker button { flex: 0 0 72px; scroll-snap-align: start; }
  .custom-time-picker { grid-template-columns: 1fr; }
  .custom-slot-provider-picker { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .booking-calendar { padding: 7px; }
  .booking-calendar-days { gap: 5px; }
  .booking-calendar-days button { flex-basis: 64px; min-height: 62px; }
  .schedule-day-free { grid-template-columns: 1fr; }
  .custom-slot-dialog form { padding: 12px; }
  .custom-time-column { grid-template-columns: 32px minmax(38px, 1fr) 32px; }
  .custom-slot-step > header small { max-width: 260px; }
}

/* Vaqto Business 5.0: role-aware CRM workspace */
.business-v2 .business-app { grid-template-columns: 248px minmax(0, 1fr); background: var(--app-bg); }
.business-v2 .business-sidebar { padding: 22px 15px 16px; border-color: var(--line); background: var(--surface); }
.business-v2 .business-side-brand { padding: 0 8px 24px; }
.business-v2 .business-navigation,
.business-v2 .business-mobile-more { gap: 5px; }
.business-v2 .business-navigation button,
.business-v2 .business-mobile-more button,
.business-v2 .business-side-footer a,
.business-v2 .business-side-footer button { min-height: 46px; padding-inline: 12px; border-radius: 7px; color: var(--muted); font-size: 12px; }
.business-v2 .business-navigation button:hover,
.business-v2 .business-mobile-more button:hover,
.business-v2 .business-side-footer a:hover,
.business-v2 .business-side-footer button:hover { background: var(--surface-soft); color: var(--ink); }
.business-v2 .business-navigation button.active,
.business-v2 .business-mobile-more button.active { background: color-mix(in srgb, var(--theme-accent) 14%, var(--surface)); color: var(--ink); }
.business-v2 .business-workspace { padding: clamp(22px, 2.2vw, 38px) clamp(20px, 2.5vw, 44px) 52px; }
.business-v2 .business-topbar { min-height: 66px; margin-bottom: 13px; }
.business-v2 .business-page-heading p { font-size: 10px; }
.business-v2 .business-page-heading h1 { font-size: clamp(27px, 2.2vw, 36px); }
.business-v2 .business-page-heading > span { font-size: 12px; }
.business-v2 .business-primary-action,
.business-v2 .sync-pill,
.business-v2 .business-actor-pill { min-height: 42px; font-size: 12px; }

.business-scope-bar { min-width: 0; min-height: 68px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, .9fr) minmax(180px, .55fr); align-items: stretch; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.business-scope-identity,
.business-scope-role,
.business-scope-location { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-right: 1px solid var(--line); }
.business-scope-role { border-right: 0; }
.business-scope-identity > span:first-child,
.business-scope-role > span:first-child,
.business-scope-location > span > i { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
.business-scope-identity svg,
.business-scope-role svg,
.business-scope-location svg { width: 17px; height: 17px; }
.business-scope-identity > span:last-child,
.business-scope-role > span:last-child,
.business-scope-location > span > span { min-width: 0; display: grid; gap: 2px; }
.business-scope-bar small { color: var(--muted); font-size: 9px; }
.business-scope-bar strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.business-scope-location { position: relative; cursor: pointer; }
.business-scope-location > span { min-width: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.business-scope-location select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.business-scope-location .yaqin-select { position: absolute; inset: 0; width: 100%; }
.business-scope-location .yaqin-select-trigger { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.business-scope-location:has(select:not(:disabled))::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }

.business-role-command { min-width: 0; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; padding: 17px 19px; border: 1px solid var(--line); border-left: 4px solid var(--theme-accent); border-radius: 8px; background: var(--surface); }
.business-role-command-copy { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; }
.business-role-command-copy > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--theme-accent) 12%, var(--surface)); color: var(--theme-accent); }
.business-role-command-copy svg { width: 20px; height: 20px; }
.business-role-command-copy > span:last-child { min-width: 0; display: grid; gap: 3px; }
.business-role-command-copy small { color: var(--theme-accent); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.business-role-command-copy h2 { margin: 0; font-size: 18px; }
.business-role-command-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.business-role-capabilities { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.business-role-capabilities span { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--ink); font-size: 10px; font-weight: 750; }
.business-role-capabilities svg { width: 13px; height: 13px; color: var(--theme-accent); }

.business-v2 .business-health { grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(170px, 1fr)); border-color: var(--line); background: var(--surface); }
.business-v2 .business-health > div { min-height: 68px; padding: 11px 14px; }
.business-v2 .business-health small { font-size: 10px; }
.business-v2 .business-health strong { font-size: 12px; }
.business-v2 .business-health-main strong { font-size: 14px; }
.business-v2 .business-dashboard .metric { min-height: 92px; padding: 14px; border-color: var(--line); background: var(--surface); }
.business-v2 .metric-copy strong { font-size: 20px; }
.business-v2 .metric-copy > span { font-size: 11px; }
.business-v2 .metric-copy > small { font-size: 9px; }
.business-v2 .business-action-center { min-height: 112px; padding: 16px 18px; border-radius: 8px; background: var(--surface); }
.business-v2 .business-focus-copy strong { font-size: 15px; }
.business-v2 .business-focus-copy p { font-size: 10px; }
.business-v2 .business-focus-actions button { min-height: 40px; font-size: 10px; }
.business-v2 .business-overview-grid { grid-template-columns: minmax(420px, 1.5fr) minmax(280px, .8fr) minmax(260px, .7fr); align-items: start; }
.business-v2 .workspace-panel { border-color: var(--line); background: var(--surface); }
.business-v2 .workspace-panel-title h2 { font-size: 16px; }
.business-v2 .workspace-panel-title small,
.business-v2 .workspace-panel-title > span:last-child { font-size: 9px; }
.business-v2 .workspace-panel-title button { font-size: 10px; }

.overview-team { display: grid; gap: 4px; }
.overview-team-row { width: 100%; min-width: 0; min-height: 52px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 7px 3px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.overview-team-row:last-child { border-bottom: 0; }
.overview-team-row:hover { background: var(--surface-soft); }
.overview-team-row > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-soft); color: var(--theme-accent); font-size: 11px; font-weight: 850; }
.overview-team-row img { width: 100%; height: 100%; object-fit: cover; }
.overview-team-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.overview-team-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.overview-team-row small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.overview-team-row em { min-height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.overview-team-row em.free { background: var(--green-soft); color: var(--theme-accent); }
.overview-team-row em.busy { background: var(--amber-soft); color: var(--amber); }
.overview-team-row > svg { width: 14px; height: 14px; color: var(--muted); }

.owner-role-blueprint { margin: 0 0 14px; }
.owner-role-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.owner-role-matrix article { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 4px 9px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.owner-role-matrix article > span { width: 34px; height: 34px; display: grid; grid-row: 1 / 3; place-items: center; border-radius: 7px; background: var(--surface); color: var(--theme-accent); }
.owner-role-matrix svg { width: 17px; height: 17px; }
.owner-role-matrix article > div { min-width: 0; display: grid; gap: 2px; }
.owner-role-matrix strong { font-size: 11px; }
.owner-role-matrix small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.owner-role-matrix em { color: var(--theme-accent); font-size: 8px; font-style: normal; font-weight: 800; }
.business-access-locations { margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
.business-access-locations legend { padding-inline: 5px; font-size: 10px; font-weight: 800; }
.business-access-locations > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.business-access-locations label { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.business-access-locations label > span { min-width: 0; display: grid; gap: 2px; }
.business-access-locations strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.business-access-locations small { color: var(--muted); font-size: 8px; }

@media (max-width: 1240px) and (min-width: 861px) {
  .business-v2 .business-app { grid-template-columns: 218px minmax(0, 1fr); }
  .business-v2 .business-workspace { padding-inline: 22px; }
  .business-v2 .business-overview-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }
  .business-v2 .overview-team-panel { grid-column: 1 / 2; }
  .business-v2 .business-overview-grid > aside:last-child { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 860px) {
  .business-v2 .business-app { display: block; }
  .business-v2 .business-workspace { padding: 14px 12px calc(88px + env(safe-area-inset-bottom)); }
  .business-v2 .business-sidebar { background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .business-v2 .business-navigation { grid-template-columns: repeat(var(--business-nav-count, 5), minmax(0, 1fr)); }
  .business-v2 .business-navigation button { min-height: 58px; padding: 6px 3px; font-size: 9px; }
  .business-v2 .business-topbar { min-height: 56px; margin-bottom: 9px; }
  .business-v2 .business-page-heading h1 { font-size: 25px; }
  .business-scope-bar { min-height: 54px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 10px; }
  .business-scope-identity { display: none; }
  .business-scope-location,
  .business-scope-role { min-height: 54px; padding: 8px 10px; }
  .business-scope-location { border-right: 1px solid var(--line); }
  .business-scope-role { max-width: 150px; }
  .business-scope-identity > span:first-child,
  .business-scope-role > span:first-child,
  .business-scope-location > span > i { flex-basis: 30px; width: 30px; height: 30px; }
  .business-scope-bar small { font-size: 8px; }
  .business-scope-bar strong { font-size: 10px; }
  .business-role-command { min-height: 0; align-items: stretch; flex-direction: column; gap: 11px; padding: 13px; }
  .business-role-command-copy { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; }
  .business-role-command-copy > span:first-child { width: 36px; height: 36px; }
  .business-role-command-copy h2 { font-size: 15px; }
  .business-role-command-copy p { font-size: 9px; }
  .business-role-capabilities { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .business-role-capabilities::-webkit-scrollbar { display: none; }
  .business-role-capabilities span { flex: 0 0 auto; min-height: 27px; font-size: 9px; }
  .business-v2 .business-health { grid-template-columns: 1fr; }
  .business-v2 .business-health > div { min-height: 58px; }
  .business-v2 .business-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-v2 .business-dashboard .metric { min-height: 82px; padding: 11px; }
  .business-v2 .business-overview-grid { grid-template-columns: 1fr; }
  .business-v2 .overview-team-panel,
  .business-v2 .business-overview-grid > aside:last-child { grid-column: auto; grid-row: auto; }
  .mobile-hub-group:not(:has(button:not([hidden]))) { display: none; }
  .owner-role-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-access-locations > div { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .business-v2 .business-workspace { padding-inline: 9px; }
  .business-scope-role > span:first-child { display: none; }
  .business-scope-role { max-width: 112px; }
  .business-v2 .business-dashboard .metric { min-height: 78px; }
  .business-v2 .metric-copy strong { font-size: 17px; }
  .owner-role-matrix { grid-template-columns: 1fr; }
  .owner-role-matrix article { min-height: 70px; }
}

/* Vaqto Control */
.platform-page [hidden] { display: none !important; }
.platform-page { min-height: 100vh; margin: 0; background: var(--page-bg, #eef0f2); color: var(--ink, #20242a); font-family: Inter, Arial, sans-serif; }
.platform-page button, .platform-page input, .platform-page select, .platform-page textarea { font: inherit; color: inherit; }
.platform-boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.platform-boot .vaqto-logo { width: 52px; height: 52px; }
.platform-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.platform-login-card { width: min(100%, 430px); display: grid; gap: 15px; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 24px 70px rgba(20, 27, 36, .12); }
.platform-brand { display: flex; align-items: center; gap: 12px; }
.platform-brand .vaqto-logo { width: 40px; height: 40px; flex: 0 0 auto; }
.platform-brand > span:last-child { display: grid; gap: 2px; }
.platform-brand strong { font-size: 17px; }
.platform-brand small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.platform-login-copy { margin: 28px 0 6px; }
.platform-login-copy > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 8px; background: var(--surface-soft); color: var(--theme-accent); }
.platform-login-copy h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: 0; }
.platform-login-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.platform-login-card label, .platform-dialog label { display: grid; gap: 7px; font-size: 11px; font-weight: 800; }
.platform-login-card input, .platform-dialog input, .platform-dialog select, .platform-dialog textarea, .platform-toolbar input, .platform-toolbar select { min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); outline: 0; }
.platform-dialog textarea { min-height: 82px; padding-block: 11px; resize: vertical; }
.platform-login-card input:focus, .platform-dialog :is(input, select, textarea):focus, .platform-toolbar :is(input, select):focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.platform-page button.primary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid var(--theme-accent); border-radius: 7px; background: var(--theme-accent); color: var(--theme-on-accent, #fff); font-weight: 800; cursor: pointer; }
.platform-page button.primary svg { width: 17px; height: 17px; }
.platform-page button:disabled { opacity: .55; cursor: wait; }
.platform-form-error { margin: 0; color: var(--danger); font-size: 11px; line-height: 1.45; }
.platform-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.platform-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 20px 14px; background: #20242a; color: #f8f9fa; }
.platform-sidebar > .platform-brand { padding: 0 8px 24px; }
.platform-sidebar nav { display: grid; gap: 5px; }
.platform-sidebar nav button, .platform-sidebar-footer button { min-height: 46px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #c9ced5; text-align: left; cursor: pointer; }
.platform-sidebar nav button:hover { background: #2c3138; color: #fff; }
.platform-sidebar nav button.active { background: #f7f8f9; color: #20242a; }
.platform-sidebar nav svg, .platform-sidebar-footer svg { width: 18px; height: 18px; }
.platform-sidebar nav b { min-width: 20px; min-height: 20px; display: grid; place-items: center; border-radius: 999px; background: #d64646; color: #fff; font-size: 9px; }
.platform-sidebar-footer { margin-top: auto; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid #373c43; }
.platform-sidebar-footer > span { min-width: 0; display: grid; gap: 3px; padding: 0 10px; }
.platform-sidebar-footer strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-sidebar-footer small { color: #9ca3ad; font-size: 9px; }
.platform-workspace { min-width: 0; padding: 26px clamp(20px, 2.4vw, 44px) 50px; }
.platform-topbar { min-height: 62px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.platform-topbar > div:first-child { display: grid; gap: 4px; }
.platform-topbar small { color: var(--theme-accent); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.platform-topbar h1 { margin: 0; font-size: 29px; letter-spacing: 0; }
.platform-topbar > div:last-child { display: flex; align-items: center; gap: 10px; }
.platform-live { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 800; }
.platform-live svg { width: 16px; height: 16px; color: var(--theme-accent); }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.platform-metrics article { min-height: 98px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 3px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-metrics article > span { width: 42px; height: 42px; display: grid; grid-row: 1 / 3; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--theme-accent); }
.platform-metrics article svg { width: 20px; height: 20px; }
.platform-metrics strong { align-self: end; font-size: 23px; }
.platform-metrics small { align-self: start; color: var(--muted); font-size: 10px; }
.platform-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.platform-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.platform-panel > header span { display: grid; gap: 3px; }
.platform-panel > header small { color: var(--theme-accent); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.platform-panel > header h2 { margin: 0; font-size: 17px; }
.platform-panel > header button { display: inline-flex; align-items: center; gap: 5px; padding: 6px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.platform-panel > header button svg { width: 14px; height: 14px; }
.platform-queue-row { width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.platform-queue-row > span { min-width: 0; display: grid; gap: 4px; }
.platform-queue-row strong, .platform-table td > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-queue-row small, .platform-table td > small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.platform-queue-row > svg { width: 15px; height: 15px; color: var(--muted); }
.platform-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.platform-toolbar label { width: min(100%, 540px); position: relative; }
.platform-toolbar label svg { position: absolute; left: 14px; top: 15px; width: 17px; height: 17px; color: var(--muted); }
.platform-toolbar input { width: 100%; padding-left: 42px; }
.platform-toolbar select { width: 190px; }
.platform-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.platform-table th { height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; text-align: left; text-transform: uppercase; }
.platform-table td { height: 70px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 10px; }
.platform-table tr:last-child td { border-bottom: 0; }
.platform-table td:first-child, .platform-table td:nth-child(2) { min-width: 180px; }
.platform-table td > strong, .platform-table td > small { display: block; max-width: 260px; }
.platform-table td > small { margin-top: 4px; }
.status, .risk { min-height: 25px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 8px; font-weight: 900; white-space: nowrap; }
.status.review, .status.contract, .risk.medium { background: var(--amber-soft); color: var(--amber); }
.status.approved, .risk.low { background: var(--green-soft); color: var(--theme-accent); }
.status.rejected, .status.suspended, .risk.high { background: var(--danger-soft, #fae9e7); color: var(--danger); }
.platform-row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.platform-row-actions button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.platform-row-actions button:hover { border-color: var(--theme-accent); color: var(--theme-accent); }
.platform-row-actions svg { width: 15px; height: 15px; }
.platform-empty { min-height: 170px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.platform-empty svg { width: 27px; height: 27px; }
.platform-empty strong { color: var(--ink); font-size: 12px; }
.platform-empty span { font-size: 9px; }
.platform-audit { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-audit article { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.platform-audit article:last-child { border-bottom: 0; }
.platform-audit article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: var(--theme-accent); }
.platform-audit article svg { width: 16px; height: 16px; }
.platform-audit article > div { min-width: 0; display: grid; gap: 4px; }
.platform-audit strong { font-size: 10px; }
.platform-audit small, .platform-audit time { color: var(--muted); font-size: 9px; }
.platform-dialog { width: min(820px, calc(100vw - 28px)); max-height: min(900px, calc(100dvh - 28px)); box-sizing: border-box; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 26px 90px rgba(11, 16, 23, .28); }
.platform-dialog.compact { width: min(520px, calc(100vw - 28px)); }
.platform-dialog::backdrop { background: rgba(18, 23, 29, .58); backdrop-filter: blur(3px); }
.platform-dialog > form { max-height: inherit; overflow: auto; padding: 22px; }
.platform-dialog header { position: sticky; top: -22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -22px -22px 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.platform-dialog header span { display: grid; gap: 3px; }
.platform-dialog header small { color: var(--theme-accent); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.platform-dialog h2 { margin: 0; font-size: 20px; }
.platform-dialog header button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.platform-dialog header svg { width: 18px; height: 18px; }
.platform-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.platform-form-grid .wide { grid-column: 1 / -1; }
.platform-dialog footer { position: sticky; bottom: -22px; display: flex; justify-content: flex-end; gap: 8px; margin: 20px -22px -22px; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.platform-dialog footer > button:not(.primary) { min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-weight: 800; cursor: pointer; }
.platform-dialog-note { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.platform-dialog.compact form > label { margin-bottom: 13px; }
.platform-coordinates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.platform-toast { position: fixed; z-index: 999; left: 50%; bottom: 24px; max-width: min(460px, calc(100vw - 30px)); transform: translateX(-50%); padding: 13px 18px; border-radius: 7px; background: #20242a; color: #fff; box-shadow: 0 14px 35px rgba(0,0,0,.22); font-size: 11px; font-weight: 800; }

:root[data-theme="midnight"] .platform-page { --page-bg: #101419; }
:root[data-theme="midnight"] .platform-sidebar { background: #0b0e12; }
:root[data-theme="midnight"] .platform-sidebar nav button:hover { background: #20262d; }
:root[data-theme="midnight"] .platform-sidebar nav button.active { background: var(--theme-accent); color: var(--theme-on-accent); }
:root[data-theme="midnight"] .platform-page :is(.platform-login-card, .platform-panel, .platform-table-wrap, .platform-audit, .platform-dialog, .platform-metrics article) { background: var(--surface); }

@media (max-width: 900px) {
  .platform-shell { display: block; padding-bottom: 72px; }
  .platform-sidebar { position: fixed; z-index: 20; top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 68px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); }
  .platform-sidebar > .platform-brand, .platform-sidebar-footer { display: none; }
  .platform-sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .platform-sidebar nav button { min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 3px; font-size: 9px; text-align: center; }
  .platform-sidebar nav button b { position: absolute; margin: -28px 0 0 26px; }
  .platform-workspace { padding: 18px 14px 32px; }
  .platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .platform-login { padding: 0; align-items: stretch; }
  .platform-login-card { width: 100%; min-height: 100dvh; box-sizing: border-box; align-content: center; border: 0; padding: 24px 20px; box-shadow: none; }
  .platform-topbar { align-items: stretch; flex-direction: column; margin-bottom: 16px; }
  .platform-topbar > div:last-child { display: grid; grid-template-columns: 1fr; }
  .platform-live { display: none; }
  .platform-topbar h1 { font-size: 25px; }
  .platform-metrics article { min-height: 84px; padding: 12px; }
  .platform-toolbar { flex-direction: column; }
  .platform-toolbar label, .platform-toolbar select { width: 100%; }
  .platform-table-wrap { border-inline: 0; border-radius: 0; margin-inline: -14px; }
  .platform-dialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .platform-dialog > form { min-height: 100%; box-sizing: border-box; }
  .platform-form-grid, .platform-coordinates { grid-template-columns: 1fr; }
  .platform-form-grid .wide { grid-column: auto; }
}