:root {
  color-scheme: light;
  --paper: #f5f0e7;
  --paper-high: #fffdf8;
  --card: rgba(255, 253, 248, 0.9);
  --card-solid: #fffdf8;
  --ink: #2c211b;
  --brown: #3e291f;
  --brown-2: #5b3c2c;
  --soft: #796d63;
  --muted: #eee6da;
  --line: rgba(126, 99, 62, 0.2);
  --gold: #b5965c;
  --gold-deep: #806536;
  --gold-pale: #e8dcc4;
  --sage: #607c69;
  --sage-pale: #eef4ef;
  --danger: #a64f43;
  --shadow-sm: 0 10px 28px rgba(59, 39, 28, 0.08);
  --shadow-md: 0 20px 60px rgba(48, 30, 20, 0.14);
  --spring: cubic-bezier(0.2, 0.84, 0.24, 1.08);
  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ui: "Han Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "Han Serif", "Songti SC", "STSong", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(181, 150, 92, 0.2), transparent 32rem),
    radial-gradient(circle at 100% 42%, rgba(96, 124, 105, 0.1), transparent 38rem),
    linear-gradient(145deg, #f9f5ee, var(--paper));
}

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

button {
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(181, 150, 92, 0.38);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
}

.customer-app,
.confirm-app {
  position: relative;
  display: grid;
  grid-template-rows: 88px 64px minmax(0, 1fr) 80px;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 590px;
  overflow: hidden;
  isolation: isolate;
}

.customer-app::before,
.confirm-app::before {
  position: absolute;
  z-index: -1;
  inset: -20% 52% 40% -15%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  filter: blur(50px);
  content: "";
  pointer-events: none;
}

.app-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: max(10px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 8px max(22px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(181, 150, 92, 0.25);
  background: rgba(250, 247, 240, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}

.brand-button {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 0;
  min-height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
}

.brand-button img {
  display: block;
  width: 168px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.header-title {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.header-title strong {
  color: var(--brown);
  font: 600 clamp(22px, 2.2vw, 31px)/1.2 var(--display);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.header-title span {
  color: var(--soft);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.header-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.store-pill,
.connection-pill,
.guest-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.74);
  color: var(--soft);
  font-size: 11px;
  white-space: nowrap;
}

.connection-pill {
  width: 34px;
  min-height: 34px;
  justify-content: center;
  padding: 0;
}

.connection-pill::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 5px rgba(96, 124, 105, 0.11);
  content: "";
}

.connection-pill.offline::before {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(181, 150, 92, 0.12);
}

.reset-button,
.icon-button,
.ghost-button,
.outline-button,
.solid-button,
.detail-button,
.add-button,
.base-change,
.footer-back {
  border-radius: 13px;
  transition: transform 180ms var(--spring), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.reset-button:active,
.icon-button:active,
.ghost-button:active,
.outline-button:active,
.solid-button:active,
.detail-button:active,
.add-button:active,
.base-change:active,
.footer-back:active,
.concern-chip:active,
.care-card:active,
.service-choice:active {
  transform: scale(0.975);
}

.reset-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.76);
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 700;
}

.base-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 8px 20px 7px;
  padding: 7px 9px 7px 14px;
  border: 1px solid rgba(181, 150, 92, 0.3);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: enter-down 520ms var(--ease) both;
}

.base-label {
  display: grid;
  gap: 1px;
  min-width: 116px;
}

.base-label strong {
  color: var(--brown);
  font: 600 15px var(--display);
}

.base-label span {
  color: var(--soft);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.base-current {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.base-current strong {
  color: var(--brown);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-current span {
  color: var(--soft);
  font-size: 10px;
  white-space: nowrap;
}

.base-current.empty strong {
  color: var(--gold-deep);
}

.base-change {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(128, 101, 54, 0.32);
  background: linear-gradient(180deg, #fffdf9, #f5eee2);
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 5px 14px rgba(70, 48, 30, 0.07);
}

.selection-stage {
  display: grid;
  grid-template-columns: minmax(260px, 0.31fr) minmax(0, 0.69fr);
  gap: 12px;
  min-height: 0;
  padding: 0 20px 9px;
}

.glass-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.concern-panel,
.care-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 15px;
  animation: panel-enter 620ms var(--ease) both;
}

.care-panel {
  animation-delay: 70ms;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 11px;
}

.section-heading > div {
  display: grid;
  gap: 1px;
}

.section-heading strong {
  color: var(--brown);
  font: 600 clamp(17px, 1.65vw, 23px) var(--display);
  letter-spacing: 0.02em;
}

.section-heading span,
.section-heading small {
  color: var(--soft);
  font-size: 9px;
}

.section-heading small {
  max-width: 45%;
  text-align: right;
  line-height: 1.5;
}

.concern-groups {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

.concern-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding: 8px;
  border: 1px solid rgba(126, 99, 62, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.47);
}

.concern-group header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: var(--gold-deep);
}

.concern-group header span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--muted);
  font: 600 10px var(--display);
}

.concern-group header strong {
  font-size: 10px;
  letter-spacing: 0.07em;
}

.concern-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
}

.concern-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
  text-align: center;
  font-size: clamp(9px, 0.82vw, 12px);
  line-height: 1.25;
  transition: transform 180ms var(--spring), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.concern-chip.selected {
  border-color: rgba(181, 150, 92, 0.75);
  background: linear-gradient(145deg, rgba(239, 224, 195, 0.9), rgba(255, 253, 248, 0.95));
  color: var(--brown);
  box-shadow: inset 0 0 0 1px rgba(181, 150, 92, 0.15), 0 5px 13px rgba(88, 61, 38, 0.08);
}

.concern-chip.selected::after {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 8px;
  content: "✓";
  animation: pop 280ms var(--spring) both;
}

.care-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
}

.care-card {
  --accent: var(--sage);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(252, 248, 240, 0.83));
  box-shadow: 0 7px 20px rgba(52, 34, 22, 0.055);
  transition: transform 220ms var(--spring), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  animation: card-enter 560ms var(--ease) both;
}

.care-card::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.65) 42%, transparent 58%);
  content: "";
  transform: translateX(-120%);
  pointer-events: none;
}

.care-card:hover {
  transform: translateY(-2px);
  border-color: rgba(181, 150, 92, 0.42);
  box-shadow: 0 13px 30px rgba(52, 34, 22, 0.09);
}

.care-card.selected {
  border-color: var(--gold);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--gold));
  background: rgba(255, 253, 248, 0.96);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, #fff), rgba(255, 253, 248, 0.96));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.care-card.selected::before {
  animation: sheen 700ms ease both;
}

.care-card.recommended::after {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--sage-pale);
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  content: "适合今天";
}

.care-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.care-symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: #fff;
  font: 600 24px var(--display);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 18px color-mix(in srgb, var(--accent) 17%, transparent);
}

.care-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.care-title strong {
  color: var(--brown);
  font-size: clamp(12px, 1.12vw, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-title span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-copy {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
}

.care-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--soft);
  font-size: clamp(9px, 0.75vw, 11px);
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.care-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 3px;
}

.care-meta span {
  color: var(--soft);
  font-size: 9px;
}

.care-meta strong {
  color: var(--accent);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 650;
}

.care-meta strong small {
  margin-right: 1px;
  font-size: 11px;
}

.care-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6px;
}

.detail-button,
.add-button {
  min-width: 0;
  min-height: 40px;
  padding: 0 7px;
  font-size: clamp(9px, 0.78vw, 11px);
  font-weight: 750;
}

.detail-button {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.85);
  color: var(--gold-deep);
}

.add-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 15px color-mix(in srgb, var(--accent) 19%, transparent);
}

.add-button.selected {
  background: #fffaf1;
  background: color-mix(in srgb, var(--accent) 11%, #fff);
  color: var(--accent);
  box-shadow: none;
}

.app-footer {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 10px max(22px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  border-top: 1px solid rgba(181, 150, 92, 0.23);
  background: rgba(252, 249, 243, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 -12px 36px rgba(48, 30, 20, 0.055);
}

.footer-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.footer-count {
  display: grid;
  gap: 1px;
  min-width: 124px;
}

.footer-count span {
  color: var(--soft);
  font-size: 9px;
}

.footer-count strong {
  color: var(--brown);
  font: 600 15px var(--display);
}

.footer-hint {
  min-width: 0;
  overflow: hidden;
  color: var(--soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.solid-button {
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--brown);
  background: linear-gradient(145deg, #543628, var(--brown));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px rgba(62, 41, 31, 0.22), inset 0 1px rgba(255, 255, 255, 0.13);
}

.solid-button:disabled {
  border-color: #cfc6ba;
  background: #cfc6ba;
  box-shadow: none;
  color: #f8f5f0;
}

.sheet-overlay,
.drawer-overlay,
.activation-overlay,
.complete-overlay,
.notice-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(38, 25, 18, 0.48);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  backdrop-filter: blur(14px) saturate(0.9);
  animation: fade-in 220ms ease both;
}

.sheet-overlay.closing,
.drawer-overlay.closing {
  animation: fade-out 180ms ease both;
}

.base-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1160px, 96vw);
  height: min(830px, 90vh);
  height: min(830px, 90svh);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(181, 150, 92, 0.38);
  border-radius: 28px;
  background: rgba(252, 249, 243, 0.98);
  box-shadow: 0 38px 100px rgba(30, 18, 12, 0.32);
  animation: sheet-in 460ms var(--spring) both;
}

.sheet-header,
.drawer-header,
.confirm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--line);
}

.sheet-heading,
.drawer-heading {
  display: grid;
  gap: 3px;
}

.eyebrow {
  color: var(--gold-deep);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sheet-heading h2,
.drawer-heading h2 {
  margin: 0;
  color: var(--brown);
  font: 600 25px var(--display);
}

.sheet-heading p,
.drawer-heading p {
  margin: 0;
  color: var(--soft);
  font-size: 11px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-solid);
  color: var(--soft);
  font-size: 22px;
}

.service-catalog {
  display: grid;
  grid-auto-rows: minmax(96px, auto);
  align-content: start;
  gap: 9px;
  min-height: 0;
  padding: 13px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.service-category {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  min-height: 96px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.68);
}

.category-label {
  display: grid;
  place-content: center start;
  gap: 5px;
  padding-left: 9px;
}

.category-label span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--muted);
  color: var(--gold-deep);
  font: 600 14px var(--display);
}

.category-label strong {
  color: var(--brown);
  font-size: 13px;
}

.category-label small {
  color: var(--soft);
  font-size: 9px;
}

.service-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-height: 0;
}

.service-choice {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card-solid);
  text-align: left;
  transition: transform 180ms var(--spring), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.service-select {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.service-info {
  position: absolute;
  right: 7px;
  bottom: 6px;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.92);
  color: var(--gold-deep);
  font-size: 8px;
  font-weight: 750;
}

.service-choice strong {
  color: var(--brown);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-choice span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: var(--soft);
  font-size: 9px;
  padding-right: 42px;
}

.service-choice em,
.service-choice b {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-choice b {
  color: var(--gold-deep);
}

.service-choice.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, #f7edda, #fffdf8);
  box-shadow: inset 0 0 0 1px rgba(181, 150, 92, 0.2);
}

.service-choice.selected::after {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 10px;
  content: "✓";
  animation: pop 280ms var(--spring) both;
}

.sheet-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.84);
}

.sheet-footer p {
  margin: 0;
  color: var(--soft);
  font-size: 11px;
}

.sheet-footer p strong {
  color: var(--brown);
}

.drawer-overlay {
  place-items: stretch end;
  padding: 0;
}

.detail-drawer {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(690px, 58vw);
  height: 100%;
  min-width: 500px;
  overflow: hidden;
  border-left: 1px solid rgba(181, 150, 92, 0.35);
  background: rgba(252, 249, 243, 0.985);
  box-shadow: -28px 0 80px rgba(30, 18, 12, 0.25);
  animation: drawer-in 460ms var(--spring) both;
}

.drawer-overlay.closing .detail-drawer {
  animation: drawer-out 180ms ease both;
}

.drawer-summary {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}

.drawer-symbol {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--drawer-accent, var(--sage));
  color: #fff;
  font: 600 34px var(--display);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 12px 24px color-mix(in srgb, var(--drawer-accent, var(--sage)) 18%, transparent);
}

.drawer-summary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.drawer-summary-copy strong {
  color: var(--brown);
  font: 600 22px var(--display);
}

.drawer-summary-copy span {
  color: var(--soft);
  font-size: 11px;
}

.drawer-price {
  color: var(--drawer-accent, var(--sage));
  font-size: 28px;
  font-weight: 650;
}

.drawer-price small {
  font-size: 13px;
}

.detail-frame-wrap {
  position: relative;
  min-height: 0;
  margin: 14px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fffdf8;
}

.detail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fffdf8;
}

.drawer-footer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9px;
  padding: 13px 20px max(13px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.outline-button,
.ghost-button,
.footer-back {
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 750;
}

.activation-overlay {
  background:
    radial-gradient(circle at 10% 15%, rgba(181, 150, 92, 0.24), transparent 34rem),
    radial-gradient(circle at 90% 80%, rgba(96, 124, 105, 0.12), transparent 32rem),
    var(--paper);
}

.activation-card,
.complete-card,
.notice-card {
  position: relative;
  width: min(470px, 100%);
  overflow: hidden;
  border: 1px solid rgba(181, 150, 92, 0.4);
  border-radius: 30px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: modal-in 520ms var(--spring) both;
}

.activation-card::before,
.complete-card::before {
  position: absolute;
  inset: -90px -110px auto auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(181, 150, 92, 0.11);
  content: "";
}

.activation-card {
  padding: 38px;
}

.activation-card img,
.complete-card img {
  position: relative;
  width: 208px;
  height: auto;
}

.activation-card .eyebrow,
.complete-card .eyebrow {
  margin: 24px 0 8px;
}

.activation-card h1,
.complete-card h1,
.notice-card h2 {
  position: relative;
  margin: 0;
  color: var(--brown);
  font: 600 31px var(--display);
}

.activation-card > p,
.complete-card > p,
.notice-card p {
  position: relative;
  margin: 10px auto 0;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.75;
}

.activation-form {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 25px;
  text-align: left;
}

.activation-field {
  display: grid;
  gap: 7px;
}

.activation-field > span {
  color: var(--brown);
  font-size: 12px;
  font-weight: 650;
}

.activation-select,
.activation-input {
  width: 100%;
  min-height: 58px;
  padding: 0 17px;
  border: 1px solid rgba(181, 150, 92, 0.55);
  border-radius: 16px;
  background: #fff;
  color: var(--brown);
  font-size: 16px;
  font-weight: 600;
  outline: 0;
  box-shadow: inset 0 2px 5px rgba(55, 34, 20, 0.04);
}

.activation-input {
  letter-spacing: 0.08em;
}

.activation-select:focus,
.activation-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(181, 150, 92, 0.13);
}

.activation-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid rgba(181, 150, 92, 0.22);
  border-radius: 13px;
  background: rgba(246, 241, 232, 0.72);
  color: var(--soft);
  font-size: 11px;
  line-height: 1.55;
}

.activation-help b {
  color: var(--gold-deep);
  white-space: nowrap;
}

.activation-form .solid-button {
  width: 100%;
}

.form-error {
  min-height: 20px;
  margin: 4px 0 0 !important;
  color: var(--danger) !important;
  font-size: 11px !important;
}

.activation-note {
  display: block;
  margin-top: 16px;
  color: #9b9087;
  font-size: 10px;
}

.activation-switch {
  position: relative;
  display: inline-block;
  margin-top: 13px;
  color: var(--gold-deep);
  font-size: 10px;
  font-weight: 650;
  text-decoration: none;
}

.activation-switch:focus-visible {
  outline: 3px solid rgba(181, 150, 92, 0.22);
  outline-offset: 4px;
  border-radius: 4px;
}

.confirm-app {
  grid-template-rows: 88px minmax(0, 1fr) 80px;
}

.confirm-main {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
  gap: 14px;
  min-height: 0;
  padding: 14px 22px;
}

.receipt-panel,
.confirm-side {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: panel-enter 540ms var(--ease) both;
}

.receipt-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 21px;
}

.confirm-side {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  animation-delay: 80ms;
}

.receipt-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.receipt-title > div {
  display: grid;
  gap: 3px;
}

.receipt-title h1 {
  margin: 0;
  color: var(--brown);
  font: 600 26px var(--display);
}

.receipt-title p {
  margin: 0;
  color: var(--soft);
  font-size: 10px;
}

.receipt-title span {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--gold-deep);
  font-size: 9px;
}

.receipt-list {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.receipt-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.receipt-number {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: var(--muted);
  color: var(--gold-deep);
  font: 600 14px var(--display);
}

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

.receipt-copy strong {
  color: var(--brown);
  font-size: 14px;
}

.receipt-copy span {
  color: var(--soft);
  font-size: 10px;
  line-height: 1.45;
}

.receipt-price {
  color: var(--gold-deep);
  font-size: 15px;
  font-weight: 750;
}

.confirm-box {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
}

.confirm-box > strong {
  color: var(--brown);
  font: 600 16px var(--display);
}

.confirm-box > small {
  color: var(--soft);
  font-size: 10px;
  line-height: 1.45;
}

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--muted);
}

.segment button {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
}

.segment button strong {
  font-size: 12px;
}

.segment button span {
  color: var(--soft);
  font-size: 9px;
}

.segment button.selected {
  border-color: var(--gold-pale);
  background: var(--card-solid);
  color: var(--brown);
  box-shadow: 0 5px 13px rgba(56, 36, 22, 0.08);
}

.concern-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.concern-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sage-pale);
  color: var(--sage);
  font-size: 9px;
  font-weight: 700;
}

.total-box {
  background: linear-gradient(145deg, rgba(239, 224, 195, 0.7), rgba(255, 253, 248, 0.84));
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.total-row span {
  color: var(--soft);
  font-size: 11px;
}

.total-row strong {
  color: var(--brown);
  font: 650 31px var(--display);
}

.total-breakdown {
  color: var(--soft);
  font-size: 9px;
  line-height: 1.6;
}

.confirm-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 22px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(181, 150, 92, 0.23);
  background: rgba(252, 249, 243, 0.88);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.confirm-footer p {
  margin: 0;
  color: var(--soft);
  text-align: center;
  font-size: 10px;
}

.complete-overlay {
  background: rgba(245, 240, 231, 0.92);
}

.complete-card {
  width: min(600px, 100%);
  padding: 40px;
}

.complete-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 24px auto 20px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 34px;
  box-shadow: 0 0 0 12px rgba(96, 124, 105, 0.1);
  animation: success-pop 650ms var(--spring) both;
}

.complete-summary {
  display: grid;
  gap: 8px;
  margin: 24px 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.56);
  text-align: left;
}

.complete-summary div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.complete-summary span {
  color: var(--soft);
  font-size: 10px;
}

.complete-summary strong {
  color: var(--brown);
  font-size: 12px;
}

.complete-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9px;
}

.notice-card {
  padding: 30px;
}

.notice-card .solid-button {
  width: 100%;
  margin-top: 22px;
}

.toast {
  position: fixed;
  z-index: 300;
  right: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: calc(100% - 40px);
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(44, 33, 27, 0.94);
  box-shadow: 0 13px 36px rgba(0, 0, 0, 0.24);
  color: #fff;
  text-align: center;
  font-size: 11px;
  transform: translateX(50%);
  animation: toast-in 340ms var(--spring) both;
}

.rotate-ipad {
  display: none;
}

.loading-screen,
.fatal-screen {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 30px;
  text-align: center;
}

.loading-screen img,
.fatal-screen img {
  width: 210px;
  height: auto;
}

.loading-orbit {
  width: 38px;
  height: 38px;
  border: 2px solid var(--gold-pale);
  border-top-color: var(--gold-deep);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.loading-screen span,
.fatal-screen span {
  color: var(--soft);
  font-size: 12px;
}

.fatal-screen strong {
  color: var(--brown);
  font: 600 28px var(--display);
}

@keyframes enter-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.45); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(42px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes drawer-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(22px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes success-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-10deg); }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(50%, 12px) scale(0.94); }
  to { opacity: 1; transform: translate(50%, 0) scale(1); }
}

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

@media (max-width: 1100px) {
  .customer-app,
  .confirm-app {
    grid-template-rows: 76px 60px minmax(0, 1fr) 72px;
  }

  .confirm-app {
    grid-template-rows: 76px minmax(0, 1fr) 72px;
  }

  .app-header {
    grid-template-columns: minmax(158px, 1fr) auto minmax(158px, 1fr);
    padding-inline: 14px;
  }

  .brand-button img {
    width: 145px;
    height: 50px;
  }

  .header-title strong {
    font-size: 22px;
  }

  .store-pill,
  .reset-button {
    padding-inline: 9px;
    font-size: 9px;
  }

  .base-strip {
    margin-inline: 13px;
  }

  .selection-stage {
    grid-template-columns: minmax(235px, 0.31fr) minmax(0, 0.69fr);
    gap: 9px;
    padding-inline: 13px;
  }

  .concern-panel,
  .care-panel {
    padding: 11px;
  }

  .section-heading {
    min-height: 34px;
    margin-bottom: 7px;
  }

  .care-card {
    gap: 5px;
    padding: 8px;
    border-radius: 14px;
  }

  .care-head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }

  .care-symbol {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 20px;
  }

  .care-copy p {
    -webkit-line-clamp: 1;
  }

  .detail-button,
  .add-button {
    min-height: 44px;
  }

  .concern-group {
    gap: 4px;
    padding: 6px;
  }

  .concern-options {
    gap: 4px;
  }

  .concern-chip {
    min-height: 40px;
  }

  .app-footer,
  .confirm-footer {
    padding-inline: 14px;
  }

  .solid-button {
    min-height: 48px;
    padding-inline: 22px;
  }
}

@media (max-height: 720px) and (orientation: landscape) {
  .customer-app {
    grid-template-rows: 66px 54px minmax(0, 1fr) 64px;
  }

  .confirm-app {
    grid-template-rows: 66px minmax(0, 1fr) 64px;
  }

  .brand-button img {
    width: 130px;
    height: 43px;
  }

  .header-title strong {
    font-size: 19px;
  }

  .header-title span,
  .base-label span,
  .connection-pill,
  .section-heading small,
  .footer-hint {
    display: none;
  }

  .base-strip {
    margin-block: 5px;
    padding-block: 5px;
  }

  .base-change {
    min-height: 36px;
  }

  .section-heading {
    min-height: 28px;
    margin-bottom: 5px;
  }

  .concern-panel,
  .care-panel {
    padding: 8px;
  }

  .care-grid,
  .concern-groups {
    gap: 5px;
  }

  .care-card {
    padding: 7px;
  }

  .care-meta,
  .care-copy {
    gap: 2px;
  }

  .care-copy p {
    display: none;
  }

  .care-actions {
    gap: 4px;
  }

  .detail-button,
  .add-button {
    min-height: 32px;
  }

  .service-category {
    grid-template-columns: 115px minmax(0, 1fr);
  }
}

@media (orientation: portrait) and (min-width: 700px) {
  .rotate-ipad {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 30px;
    background: var(--paper);
    color: var(--brown);
    text-align: center;
  }

  .rotate-ipad span {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 22px;
    border: 1px solid var(--gold-pale);
    border-radius: 24px;
    background: var(--card-solid);
    color: var(--gold-deep);
    font-size: 42px;
    box-shadow: var(--shadow-sm);
  }

  .rotate-ipad strong {
    font: 600 29px var(--display);
  }

  .rotate-ipad small {
    margin-top: 9px;
    color: var(--soft);
    font-size: 12px;
  }
}

@media (max-width: 699px) {
  body {
    overflow: auto;
  }

  .customer-app,
  .confirm-app {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .app-header {
    grid-template-columns: 138px 1fr auto;
    position: sticky;
    top: 0;
  }

  .brand-button img {
    width: 130px;
  }

  .header-title {
    justify-items: start;
    text-align: left;
  }

  .header-title strong {
    font-size: 16px;
  }

  .header-title span,
  .store-pill,
  .connection-pill,
  .reset-button {
    display: none;
  }

  .base-strip,
  .selection-stage,
  .confirm-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .selection-stage {
    min-height: 1100px;
  }

  .care-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(180px, auto));
  }

  .app-footer,
  .confirm-footer {
    position: sticky;
    bottom: 0;
  }

  .detail-drawer {
    width: 100%;
    min-width: 0;
  }

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

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

/* iPad landscape visual system · 4.1 */
.concern-panel,
.care-panel,
.care-card,
.receipt-panel,
.confirm-side,
.base-sheet,
.detail-drawer,
.notice-card,
.sheet-overlay,
.drawer-overlay,
.notice-overlay {
  animation: none;
}

.home-entering .concern-panel,
.home-entering .care-panel {
  animation: panel-enter 300ms var(--ease) both;
}

.home-entering .care-panel {
  animation-delay: 55ms;
}

.home-entering .care-card {
  animation: card-enter 300ms var(--ease) both;
}

.confirm-entering .receipt-panel,
.confirm-entering .confirm-side {
  animation: panel-enter 280ms var(--ease) both;
}

.confirm-entering .confirm-side {
  animation-delay: 45ms;
}

.sheet-overlay.opening,
.drawer-overlay.opening,
.notice-overlay.opening {
  animation: fade-in 180ms ease both;
}

.sheet-overlay.opening .base-sheet {
  animation: sheet-in 320ms var(--ease) both;
}

.drawer-overlay.opening .detail-drawer {
  animation: drawer-in 300ms var(--ease) both;
}

.notice-overlay.opening .notice-card {
  animation: modal-in 280ms var(--ease) both;
}

.sheet-overlay.closing,
.drawer-overlay.closing,
.notice-overlay.closing {
  pointer-events: none;
  animation: fade-out 180ms ease both;
}

.sheet-overlay.closing .base-sheet {
  animation: sheet-out 180ms ease both;
}

.notice-overlay.closing .notice-card {
  animation: modal-out 180ms ease both;
}

.step-label,
.section-index {
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.care-title .recommend-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--sage-pale);
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.care-card.recommended::after {
  display: none;
}

.care-copy p b {
  display: inline-flex;
  margin-right: 6px;
  color: var(--accent);
  font-size: 0.88em;
  letter-spacing: 0.08em;
}

.reset-button,
.icon-button,
.outline-button,
.solid-button,
.detail-button,
.add-button,
.base-change,
.footer-back,
.service-info {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.reset-button::after,
.icon-button::after,
.outline-button::after,
.solid-button::after,
.detail-button::after,
.add-button::after,
.base-change::after,
.footer-back::after,
.service-info::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.38) 47%, transparent 68%);
  content: "";
  transform: translateX(-135%);
  pointer-events: none;
}

.reset-button:active,
.icon-button:active,
.outline-button:active,
.solid-button:active,
.detail-button:active,
.add-button:active,
.base-change:active,
.footer-back:active,
.service-info:active {
  transform: translateY(1px) scale(0.965);
  transition-duration: 80ms;
}

.reset-button:active::after,
.icon-button:active::after,
.outline-button:active::after,
.solid-button:active::after,
.detail-button:active::after,
.add-button:active::after,
.base-change:active::after,
.footer-back:active::after,
.service-info:active::after {
  animation: button-sheen 320ms ease both;
}

.care-card:active {
  transform: none;
}

.care-card.selected::before {
  animation: none;
}

.care-card.pulse {
  animation: card-confirm 300ms var(--spring) both;
}

.care-card.pulse::before {
  animation: sheen 520ms ease both;
}

.care-card.pulse .care-symbol {
  animation: seal-confirm 360ms var(--spring) both;
}

.concern-chip.pulse,
.service-choice.pulse {
  animation: option-confirm 260ms var(--spring) both;
}

.concern-chip.selected::after,
.service-choice.selected::after {
  animation: none;
}

.concern-chip.pulse::after,
.service-choice.pulse::after {
  animation: pop 260ms var(--spring) both;
}

.notice-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border: 1px solid var(--gold-pale);
  border-radius: 20px;
  background: linear-gradient(145deg, #fffdf8, #efe4d2);
  color: var(--gold-deep);
  font: 600 32px var(--display);
  box-shadow: var(--shadow-sm);
}

.notice-actions {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10px;
  margin-top: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .care-card:hover {
    transform: translateY(-3px);
    border-color: rgba(181, 150, 92, 0.48);
    box-shadow: 0 16px 34px rgba(52, 34, 22, 0.11);
  }
}

@media (hover: none), (pointer: coarse) {
  .care-card:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: 0 7px 20px rgba(52, 34, 22, 0.055);
  }

  .care-card.selected:hover {
    border-color: var(--accent);
    box-shadow: 0 13px 30px rgba(74, 48, 30, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.75);
  }
}

@media (orientation: landscape) and (min-width: 900px) {
  :root {
    --soft: #675c53;
    --line: rgba(111, 83, 51, 0.25);
    --shadow-sm: 0 10px 28px rgba(58, 39, 27, 0.1);
  }

  .customer-app {
    grid-template-rows: 78px 68px minmax(0, 1fr) 82px;
  }

  .confirm-app {
    grid-template-rows: 78px minmax(0, 1fr) 82px;
  }

  .app-header {
    padding-inline: max(18px, env(safe-area-inset-left));
  }

  .brand-button img {
    width: 164px;
    height: 56px;
  }

  .header-title strong {
    font-size: clamp(27px, 2.5vw, 32px);
  }

  .header-title span {
    max-width: 54vw;
    overflow: hidden;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .store-pill,
  .reset-button {
    min-height: 44px;
    padding-inline: 13px;
    font-size: 13px;
  }

  .connection-pill {
    width: 44px;
    min-height: 44px;
  }

  .base-strip {
    gap: 16px;
    margin: 8px 18px 7px;
    padding: 8px 10px 8px 16px;
    border-color: rgba(181, 150, 92, 0.38);
    border-radius: 18px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 8px 24px rgba(61, 42, 28, 0.09);
  }

  .base-label {
    gap: 3px;
    min-width: 170px;
  }

  .base-label strong {
    font-size: 19px;
  }

  .base-label > span:not(.step-label) {
    display: none;
  }

  .base-current {
    gap: 12px;
    padding-left: 17px;
  }

  .base-current strong {
    font-size: 17px;
  }

  .base-current span {
    font-size: 13px;
  }

  .base-change {
    min-height: 48px;
    padding-inline: 20px;
    border-radius: 14px;
    font-size: 14px;
  }

  .selection-stage {
    grid-template-columns: minmax(320px, 0.34fr) minmax(0, 0.66fr);
    gap: 15px;
    padding: 0 18px 10px;
  }

  .glass-panel {
    border-radius: 24px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .concern-panel,
  .care-panel {
    padding: 13px 14px 14px;
  }

  .concern-panel {
    border-color: rgba(143, 111, 69, 0.25);
    background: linear-gradient(155deg, #f4ede3, #fbf8f2);
    box-shadow: 0 8px 22px rgba(64, 45, 32, 0.07);
  }

  .care-panel {
    border-color: rgba(181, 150, 92, 0.36);
    background: linear-gradient(150deg, #fffefb, #faf5ed);
    box-shadow: 0 16px 40px rgba(54, 36, 24, 0.13), inset 0 1px rgba(255, 255, 255, 0.9);
  }

  .section-heading {
    align-items: center;
    min-height: 52px;
    margin-bottom: 10px;
    padding: 0 2px 9px 9px;
    border-bottom: 1px solid rgba(126, 99, 62, 0.19);
    border-left: 4px solid var(--gold);
  }

  .section-heading > div {
    gap: 2px;
  }

  .section-heading strong {
    font-size: clamp(23px, 2vw, 27px);
    line-height: 1.12;
  }

  .section-heading .section-copy,
  .section-heading small {
    font-size: 13px;
  }

  .section-heading small {
    color: #74685f;
    font-weight: 600;
  }

  .concern-groups {
    grid-template-rows: 1.24fr 0.88fr 0.88fr;
    gap: 9px;
  }

  .concern-group {
    gap: 7px;
    padding: 8px;
    border-color: rgba(126, 99, 62, 0.2);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.78);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
  }

  .concern-group header {
    gap: 8px;
    min-height: 25px;
  }

  .concern-group header span {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 15px;
  }

  .concern-group header strong {
    font-size: 14px;
  }

  .concern-options {
    gap: 6px;
  }

  .concern-chip {
    min-height: 38px;
    padding: 5px 8px;
    border-color: rgba(111, 83, 51, 0.23);
    border-radius: 11px;
    background: #fffdf9;
    font-size: clamp(13px, 1.18vw, 15px);
    font-weight: 560;
    line-height: 1.22;
  }

  .concern-chip.selected {
    border-width: 2px;
    border-color: #b5965c;
    background: linear-gradient(145deg, #efe0c4, #fffaf1);
    box-shadow: 0 6px 16px rgba(111, 80, 42, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }

  .concern-chip.selected::after {
    top: 5px;
    right: 6px;
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .care-grid {
    gap: 10px;
  }

  .care-card {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 11px;
    border-color: rgba(111, 83, 51, 0.24);
    border-radius: 19px;
    background: linear-gradient(150deg, #fff, #fdf9f2);
    box-shadow: 0 7px 18px rgba(52, 34, 22, 0.075), inset 0 1px rgba(255, 255, 255, 0.9);
  }

  .care-card.selected {
    border-width: 2px;
    border-color: var(--accent);
    background: rgba(255, 253, 248, 0.98);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, #fff), #fffdf8);
    box-shadow: 0 13px 30px rgba(74, 48, 30, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.75);
  }

  .care-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
  }

  .care-symbol {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 38px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(44, 28, 18, 0.24);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.34), inset 0 -5px 12px rgba(52, 27, 13, 0.12), 0 9px 19px rgba(58, 37, 24, 0.17);
  }

  .care-title {
    align-content: center;
    gap: 2px;
  }

  .care-title strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(17px, 1.55vw, 19px);
    line-height: 1.2;
    text-overflow: initial;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .care-title > span {
    font-size: 12px;
  }

  .care-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .care-copy p {
    font-size: 13px;
    line-height: 1.42;
    -webkit-line-clamp: 2;
  }

  .care-meta {
    margin-top: auto;
  }

  .care-meta span {
    font-size: 13px;
  }

  .care-meta strong {
    font-size: clamp(28px, 2.55vw, 33px);
    line-height: 1;
  }

  .care-meta strong small {
    font-size: 15px;
  }

  .care-actions {
    gap: 8px;
  }

  .detail-button,
  .add-button {
    min-height: 46px;
    border-radius: 13px;
    font-size: 14px;
  }

  .add-button {
    box-shadow: 0 7px 16px rgba(60, 39, 25, 0.16);
  }

  .app-footer {
    padding-inline: 18px;
  }

  .footer-count {
    min-width: 158px;
  }

  .footer-count span,
  .footer-hint {
    font-size: 13px;
  }

  .footer-count strong {
    font-size: 18px;
  }

  .solid-button {
    min-height: 56px;
    padding-inline: 28px;
    border-radius: 16px;
    font-size: 17px;
  }

  .base-sheet {
    width: min(1280px, 96vw);
    height: min(880px, 94vh);
    height: min(880px, 94svh);
    border-radius: 30px;
  }

  .sheet-header,
  .drawer-header {
    padding: 18px 24px;
  }

  .eyebrow {
    font-size: 11px;
  }

  .sheet-heading h2,
  .drawer-heading h2 {
    font-size: 30px;
  }

  .sheet-heading p,
  .drawer-heading p {
    max-width: 78vw;
    font-size: 14px;
    line-height: 1.5;
  }

  .icon-button {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 25px;
  }

  .service-catalog {
    grid-auto-rows: minmax(104px, auto);
    gap: 10px;
    padding: 12px 16px;
  }

  .service-category {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 11px;
    min-height: 104px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(90deg, #f1e8da 0 142px, rgba(255, 253, 248, 0.88) 142px);
  }

  .category-label {
    gap: 4px;
    padding-left: 6px;
    border-right: 1px solid rgba(126, 99, 62, 0.18);
  }

  .category-label span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e7dac6;
    font-size: 21px;
  }

  .category-label strong {
    font-size: 17px;
  }

  .category-label small {
    font-size: 12px;
  }

  .service-options {
    gap: 8px;
  }

  .service-choice {
    min-height: 84px;
    padding: 11px;
    border-color: rgba(111, 83, 51, 0.24);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(65, 44, 29, 0.045);
  }

  .service-choice strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: initial;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .service-choice span {
    gap: 8px;
    padding-right: 57px;
    font-size: 12px;
  }

  .service-info {
    right: 7px;
    bottom: 7px;
    min-width: 50px;
    min-height: 44px;
    padding-inline: 9px;
    border-radius: 10px;
    font-size: 13px;
  }

  .service-choice.selected {
    border-width: 2px;
    background: linear-gradient(145deg, #f2e3c8, #fffdf8);
    box-shadow: 0 8px 18px rgba(95, 66, 39, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  }

  .service-choice.selected::after {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .sheet-footer {
    min-height: 78px;
    padding-inline: 22px;
  }

  .sheet-footer p {
    font-size: 14px;
  }

  .sheet-footer .solid-button {
    min-height: 54px;
  }

  .detail-drawer {
    width: min(720px, 62vw);
  }

  .drawer-summary-copy strong {
    font-size: 25px;
  }

  .drawer-summary-copy span {
    font-size: 14px;
  }

  .outline-button,
  .ghost-button,
  .footer-back {
    min-height: 52px;
    font-size: 14px;
  }

  .receipt-title h1 {
    font-size: 30px;
  }

  .receipt-title p,
  .receipt-copy span,
  .confirm-footer p {
    font-size: 13px;
  }

  .receipt-copy strong,
  .receipt-price {
    font-size: 17px;
  }

  .confirm-box > strong {
    font-size: 19px;
  }

  .segment button strong {
    font-size: 15px;
  }

  .segment button span,
  .concern-tags span,
  .total-breakdown {
    font-size: 12px;
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 720px) {
  .customer-app {
    grid-template-rows: 72px 62px minmax(0, 1fr) 74px;
  }

  .confirm-app {
    grid-template-rows: 72px minmax(0, 1fr) 74px;
  }

  .brand-button img {
    width: 150px;
    height: 50px;
  }

  .header-title strong {
    font-size: 25px;
  }

  .header-title span,
  .base-label span,
  .section-heading small,
  .footer-hint {
    display: initial;
  }

  .connection-pill {
    display: inline-flex;
  }

  .base-strip {
    margin-block: 6px;
    padding-block: 7px;
  }

  .base-change {
    min-height: 46px;
  }

  .section-heading {
    min-height: 45px;
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .section-heading strong {
    font-size: 22px;
  }

  .concern-panel,
  .care-panel {
    padding: 10px 11px 11px;
  }

  .concern-groups,
  .care-grid {
    gap: 7px;
  }

  .concern-group {
    gap: 4px;
    padding: 6px;
  }

  .concern-group header {
    min-height: 22px;
  }

  .concern-group header span {
    width: 23px;
    height: 23px;
    font-size: 13px;
  }

  .concern-chip {
    min-height: 34px;
    font-size: 13px;
  }

  .care-card {
    gap: 5px;
    padding: 8px;
  }

  .care-head {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 9px;
  }

  .care-symbol {
    width: 54px;
    height: 54px;
    font-size: 36px;
  }

  .care-title strong {
    font-size: 16px;
  }

  .care-title > span,
  .care-title .recommend-badge {
    font-size: 11px;
  }

  .care-copy {
    display: flex;
  }

  .care-copy p {
    display: -webkit-box;
    font-size: 12px;
    -webkit-line-clamp: 1;
  }

  .care-meta span {
    font-size: 12px;
  }

  .care-meta strong {
    font-size: 27px;
  }

  .detail-button,
  .add-button {
    min-height: 44px;
    font-size: 13px;
  }

  .solid-button {
    min-height: 52px;
    font-size: 16px;
  }

  .service-category {
    grid-template-columns: 126px minmax(0, 1fr);
  }
}

/* iPad typography and menu grid refinement · 4.2 */
@media (orientation: landscape) and (min-width: 900px) {
  :root {
    --ui: "Han Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    --display: "Han Serif", "Songti SC", "STSong", serif;
    --ink: #2e241f;
    --brown: #3a2921;
    --soft: #71665e;
  }

  .customer-app,
  .confirm-app,
  .base-sheet,
  .detail-drawer {
    font-family: var(--ui);
    font-variant-numeric: tabular-nums;
  }

  .customer-app {
    grid-template-rows: 76px 68px minmax(0, 1fr) 76px;
  }

  .confirm-app {
    grid-template-rows: 76px minmax(0, 1fr) 76px;
  }

  .header-title {
    gap: 4px;
  }

  .header-title strong {
    max-width: 52vw;
    overflow: hidden;
    font-family: var(--display);
    font-size: clamp(25px, 2.35vw, 29px);
    font-weight: 600;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-title span {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.09em;
  }

  .store-pill,
  .reset-button {
    min-height: 44px;
    font-size: 12.5px;
    font-weight: 500;
  }

  .connection-pill {
    width: 44px;
    min-height: 44px;
  }

  .base-strip {
    gap: 15px;
    margin-block: 7px 6px;
    padding: 7px 9px 7px 15px;
    border-radius: 17px;
  }

  .base-label {
    gap: 4px;
    min-width: 158px;
  }

  .step-label,
  .section-index {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    color: var(--gold-deep);
    font-family: var(--ui);
    font-weight: 600;
    letter-spacing: 0;
  }

  .step-label b,
  .section-index b {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 18px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #eadfcf;
    color: #765f39;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .step-label i,
  .section-index i {
    color: #85796e;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .base-label strong {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
  }

  .base-current {
    gap: 10px;
    padding-left: 15px;
  }

  .base-current strong {
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .base-current span {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .base-change {
    min-height: 46px;
    padding-inline: 19px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 600;
  }

  .selection-stage {
    grid-template-columns: minmax(312px, 0.335fr) minmax(0, 0.665fr);
    gap: 14px;
    padding: 0 18px 9px;
  }

  .concern-panel,
  .care-panel {
    padding: 10px 11px;
  }

  .concern-panel {
    border-color: rgba(126, 99, 62, 0.16);
    box-shadow: 0 7px 18px rgba(64, 45, 32, 0.055);
  }

  .care-panel {
    border-color: rgba(181, 150, 92, 0.22);
    box-shadow: 0 14px 34px rgba(54, 36, 24, 0.105), inset 0 1px rgba(255, 255, 255, 0.9);
  }

  .section-heading {
    min-height: 46px;
    margin-bottom: 6px;
    padding: 0 2px 6px 8px;
    border-left-width: 3px;
  }

  .section-heading > div {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 3px;
  }

  .section-heading .section-index {
    grid-column: 1;
    grid-row: 1;
  }

  .section-heading > div > strong {
    grid-column: 2;
    grid-row: 1;
  }

  .section-heading .section-copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .section-heading strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--display);
    font-size: clamp(20px, 1.85vw, 23px);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.14;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .section-heading .section-copy,
  .section-heading small {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
  }

  .section-heading small {
    color: #7b7067;
  }

  .concern-groups {
    grid-template-rows: 1.25fr 0.875fr 0.875fr;
    gap: 6px;
  }

  .concern-group {
    gap: 4px;
    padding: 5px;
    border-color: rgba(126, 99, 62, 0.14);
    border-radius: 15px;
  }

  .concern-group header {
    gap: 7px;
    min-height: 23px;
  }

  .concern-group header span {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
  }

  .concern-group header strong {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  .concern-options {
    gap: 4px;
  }

  .concern-chip {
    min-height: 44px;
    padding: 5px 7px;
    border-color: rgba(111, 83, 51, 0.16);
    border-radius: 10px;
    font-size: clamp(13.5px, 1.15vw, 14.5px);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.22;
  }

  .care-grid {
    gap: 9px;
  }

  .care-card {
    grid-template-rows: auto auto auto;
    align-content: space-between;
    gap: 5px;
    padding: 10px;
    border-color: rgba(111, 83, 51, 0.16);
    border-radius: 18px;
  }

  .care-head {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .care-symbol {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-family: var(--display);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
  }

  .care-title {
    gap: 2px;
  }

  .care-title strong {
    font-family: var(--ui);
    overflow-wrap: anywhere;
    font-size: clamp(16px, 1.45vw, 17px);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.22;
  }

  .care-title > span {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
  }

  .care-title .recommend-badge {
    min-height: 18px;
    padding-inline: 6px;
    font-size: 9.5px;
    font-weight: 600;
  }

  .care-copy {
    display: grid;
    align-content: start;
    gap: 7px;
  }

  .care-copy p {
    min-height: 34px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.38;
    -webkit-line-clamp: 2;
  }

  .care-copy p b {
    margin-right: 5px;
    font-size: 11px;
    font-weight: 600;
  }

  .care-meta {
    margin-top: 0;
    padding-top: 0;
  }

  .care-meta span {
    font-size: 12px;
    font-weight: 400;
  }

  .care-meta strong {
    font-family: var(--display);
    font-size: clamp(26px, 2.4vw, 29px);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .care-meta strong small {
    font-size: 12px;
    font-weight: 500;
  }

  .care-actions {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 7px;
  }

  .detail-button,
  .add-button {
    min-height: 44px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.015em;
  }

  .footer-count {
    min-width: 148px;
  }

  .footer-count span,
  .footer-hint {
    font-size: 11.5px;
    font-weight: 400;
  }

  .footer-count strong {
    font-family: var(--ui);
    font-size: 16px;
    font-weight: 600;
  }

  .solid-button {
    min-height: 52px;
    padding-inline: 27px;
    border-radius: 15px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.025em;
  }

  .base-sheet {
    height: min(850px, 92vh);
    height: min(850px, 92svh);
    border-radius: 28px;
  }

  .sheet-header,
  .drawer-header {
    padding: 17px 22px;
  }

  .eyebrow {
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
  }

  .sheet-heading,
  .drawer-heading {
    gap: 4px;
  }

  .sheet-heading h2,
  .drawer-heading h2 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.18;
  }

  .sheet-heading p,
  .drawer-heading p {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
  }

  .icon-button {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 23px;
  }

  .service-catalog {
    grid-auto-rows: minmax(96px, auto);
    gap: 9px;
    padding: 11px 14px;
  }

  .service-category {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 9px;
    min-height: 96px;
    padding: 9px;
    border-radius: 17px;
    border-color: rgba(126, 99, 62, 0.16);
    background: rgba(255, 253, 248, 0.9);
  }

  .category-label {
    gap: 3px;
    padding: 8px 7px 8px 10px;
    border-radius: 12px;
    background: #f1e8da;
  }

  .category-label span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
  }

  .category-label strong {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
  }

  .category-label small {
    font-size: 10.5px;
    font-weight: 400;
  }

  .service-options {
    gap: 7px;
  }

  .service-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: minmax(76px, 1fr);
    gap: 0;
    min-height: 76px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
  }

  .service-select {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto 1fr;
    gap: 5px;
    min-height: 76px;
    padding: 11px 9px 9px 11px;
  }

  .service-name {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--ui);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.22;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .service-choice .service-meta {
    display: flex;
    align-self: end;
    justify-content: space-between;
    gap: 5px;
    padding: 0;
    color: #81766d;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
  }

  .service-choice .service-meta b {
    color: var(--gold-deep);
    font-weight: 600;
  }

  .service-info {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-content: center;
    gap: 1px;
    width: 48px;
    min-width: 48px;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(111, 83, 51, 0.18);
    border-radius: 0;
    background: #faf5ec;
    color: #7b633a;
  }

  .service-choice .service-info span {
    display: block;
    padding: 0;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
  }

  .service-info i {
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
  }

  .reset-button:active,
  .icon-button:active,
  .outline-button:active,
  .solid-button:active,
  .detail-button:active,
  .add-button:active,
  .base-change:active,
  .footer-back:active,
  .service-info:active {
    transform: translateY(1px) scale(0.985);
  }

  .service-choice.selected::after {
    top: 6px;
    right: 54px;
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .service-choice.selected .service-select {
    padding-right: 33px;
  }

  .sheet-footer {
    min-height: 72px;
    padding-inline: 20px;
  }

  .sheet-footer p {
    font-size: 12.5px;
  }

  .sheet-footer .solid-button {
    min-height: 50px;
    font-size: 15px;
  }

  .header-title,
  .base-current,
  .footer-summary,
  .footer-count {
    min-width: 0;
  }

  .store-pill,
  .footer-count strong,
  .footer-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 720px) {
  .customer-app {
    grid-template-rows: 68px 62px minmax(0, 1fr) 68px;
  }

  .confirm-app {
    grid-template-rows: 70px minmax(0, 1fr) 70px;
  }

  .header-title strong {
    font-size: 23px;
  }

  .base-strip {
    margin-block: 5px;
    padding-block: 6px;
  }

  .base-label strong {
    font-size: 13.5px;
  }

  .base-current strong {
    font-size: 16px;
  }

  .base-change {
    min-height: 44px;
  }

  .section-heading {
    min-height: 42px;
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .section-heading strong {
    font-size: 19px;
  }

  .concern-panel,
  .care-panel {
    padding: 7px 8px;
  }

  .concern-groups,
  .care-grid {
    gap: 6px;
  }

  .concern-group {
    gap: 3px;
    padding: 4px;
  }

  .concern-group header {
    min-height: 20px;
  }

  .concern-group header span {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .concern-group header strong {
    font-size: 12.5px;
  }

  .concern-chip {
    min-height: 44px;
    font-size: 13px;
  }

  .care-card {
    gap: 4px;
    padding: 8px;
  }

  .care-head {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
  }

  .care-symbol {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 34px;
  }

  .care-title strong {
    font-size: 15.5px;
  }

  .care-title > span {
    font-size: 10.5px;
  }

  .care-copy {
    gap: 4px;
  }

  .care-copy p {
    min-height: 17px;
    font-size: 12px;
    -webkit-line-clamp: 1;
  }

  .care-meta span {
    font-size: 11px;
  }

  .care-meta strong {
    font-size: 25px;
  }

  .detail-button,
  .add-button {
    min-height: 44px;
    font-size: 12px;
  }

  .solid-button {
    min-height: 48px;
    font-size: 14.5px;
  }

  .sheet-heading h2,
  .drawer-heading h2 {
    font-size: 24px;
  }

  .service-catalog {
    grid-auto-rows: minmax(92px, auto);
  }

  .service-category {
    min-height: 92px;
  }
}

@keyframes sheet-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(0.99); }
}

@keyframes modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(12px) scale(0.985); }
}

@keyframes seal-confirm {
  0% { transform: scale(0.96); }
  58% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes card-confirm {
  0% { transform: scale(0.985); }
  55% { transform: translateY(-2px) scale(1.008); }
  100% { transform: scale(1); }
}

@keyframes option-confirm {
  0% { transform: scale(0.975); }
  65% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes button-sheen {
  from { transform: translateX(-135%); }
  to { transform: translateX(135%); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}

/* Premium chain-store iPad interface · 5.1 */
:root {
  --ui: "Han Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "Han Serif", "Songti SC", "STSong", serif;
  --paper: #f5f0e7;
  --paper-high: #fffdf8;
  --card-solid: #fffdf8;
  --ink: #30231c;
  --brown: #43271b;
  --brown-2: #65402b;
  --soft: #80746a;
  --muted: #f0e8dc;
  --line: rgba(119, 84, 47, 0.19);
  --gold: #aa8046;
  --gold-deep: #7a532b;
  --gold-pale: #ddc9a6;
  --shadow-sm: 0 8px 22px rgba(62, 39, 23, 0.07), 0 2px 4px rgba(62, 39, 23, 0.04);
  --shadow-md: 0 20px 58px rgba(50, 30, 18, 0.15), 0 3px 8px rgba(50, 30, 18, 0.07);
}

body {
  background:
    radial-gradient(circle at 5% -10%, rgba(255, 255, 255, 0.98), transparent 38rem),
    radial-gradient(circle at 100% 52%, rgba(170, 128, 70, 0.08), transparent 40rem),
    linear-gradient(145deg, #faf7f1, #f1eadf);
}

.customer-v5 {
  grid-template-rows: 82px 52px 62px minmax(0, 1fr) 78px;
  min-height: 650px;
  background: transparent;
}

.customer-v5 .app-header,
.confirm-v5 .app-header {
  padding: max(9px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 7px max(22px, env(safe-area-inset-left));
  border-bottom-color: rgba(170, 128, 70, 0.19);
  background: rgba(250, 247, 241, 0.84);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}

.customer-v5 .brand-button img,
.confirm-v5 .brand-button img {
  width: 176px;
  height: 58px;
}

.customer-v5 .header-title strong,
.confirm-v5 .header-title strong {
  max-width: 52vw;
  overflow: hidden;
  color: #332018;
  font-family: var(--display);
  font-size: clamp(25px, 2.25vw, 31px);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-v5 .header-title span,
.confirm-v5 .header-title span {
  max-width: 50vw;
  overflow: hidden;
  color: #746a61;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.customer-v5 .header-tools,
.confirm-v5 .header-tools { gap: 9px; }

.customer-v5 .store-pill,
.confirm-v5 .store-pill,
.customer-v5 .reset-button,
.confirm-v5 .reset-button {
  min-height: 44px;
  border-color: rgba(120, 82, 43, 0.25);
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(248, 241, 230, 0.92));
  color: #6e4b28;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 7px 16px rgba(68, 42, 23, 0.08), inset 0 1px rgba(255, 255, 255, 0.95);
}

.customer-v5 .store-pill i,
.customer-v5 .reset-button i,
.confirm-v5 .store-pill i,
.confirm-v5 .reset-button i { margin-right: 4px; font-size: 16px; font-style: normal; }

.customer-v5 .connection-pill,
.confirm-v5 .connection-pill {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 5px 12px rgba(68, 42, 23, 0.06);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  margin: 6px 20px 3px;
  padding: 5px clamp(18px, 4.5vw, 76px);
  border: 1px solid rgba(120, 82, 43, 0.2);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 7px 19px rgba(62, 39, 23, 0.06), inset 0 1px rgba(255, 255, 255, 0.9);
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px auto minmax(24px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.flow-step:last-child { grid-template-columns: 30px auto; justify-content: end; }

.flow-step > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(120, 82, 43, 0.23);
  border-radius: 50%;
  background: #fffdf8;
  color: #6f6156;
  font: 600 13px var(--display);
  box-shadow: 0 3px 8px rgba(56, 34, 20, 0.06), inset 0 1px rgba(255, 255, 255, 0.95);
}

.flow-step > strong {
  display: flex;
  gap: 7px;
  color: #6f6258;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.flow-step > strong b { color: #948477; font-weight: 500; }
.flow-step > i { height: 1px; margin: 0 18px; background: linear-gradient(90deg, rgba(170, 128, 70, 0.7), rgba(120, 82, 43, 0.14)); }
.flow-step.active > span { border-color: #59331f; background: linear-gradient(145deg, #765035, #452719); color: #fff; box-shadow: 0 6px 13px rgba(67, 39, 24, 0.25), inset 0 1px rgba(255, 255, 255, 0.26); }
.flow-step.complete > span { border-color: #98703a; background: linear-gradient(145deg, #bc965d, #7d572c); color: #fff; }
.flow-step.active > strong,
.flow-step.complete > strong { color: #55351f; font-weight: 650; }
.flow-step.active > strong b,
.flow-step.complete > strong b { color: #8a6436; }

.customer-v5 .base-strip {
  grid-template-columns: 44px auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  margin: 5px 20px 6px;
  padding: 6px 9px 6px 14px;
  border-color: rgba(120, 82, 43, 0.21);
  border-radius: 15px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 8px 20px rgba(61, 38, 22, 0.07), inset 0 1px rgba(255, 255, 255, 0.95);
}

.base-strip-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(170, 128, 70, 0.28);
  border-radius: 12px;
  background: #f5ecdd;
  color: var(--gold-deep);
  font-size: 20px;
}

.customer-v5 .base-label { min-width: auto; }
.customer-v5 .base-label strong { font-family: var(--ui); font-size: 13px; font-weight: 650; white-space: nowrap; }
.customer-v5 .base-current { gap: 14px; padding-left: 18px; }
.customer-v5 .base-current strong { color: #3c251a; font-size: 18px; font-weight: 650; }
.customer-v5 .base-current span { color: #7f7469; font-size: 12px; }
.customer-v5 .base-change { min-height: 44px; padding: 0 19px; border-color: rgba(137, 91, 43, 0.32); border-radius: 12px; color: #704a25; font-size: 12.5px; font-weight: 650; }

.customer-v5 .selection-stage {
  grid-template-columns: minmax(330px, 0.39fr) minmax(0, 0.61fr);
  gap: 13px;
  padding: 0 20px 8px;
}

.customer-v5 .glass-panel {
  border-color: rgba(120, 82, 43, 0.21);
  border-radius: 21px;
  background: rgba(255, 253, 248, 0.87);
  box-shadow: 0 12px 31px rgba(55, 34, 20, 0.085), inset 0 1px rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

.customer-v5 .concern-panel,
.customer-v5 .care-panel { padding: 12px 13px; }

.customer-v5 .section-heading {
  align-items: center;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(120, 82, 43, 0.17);
}

.customer-v5 .section-heading > div {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
}

.customer-v5 .section-index { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; }
.customer-v5 .section-index b { color: #966e3b; font-size: 11px; font-weight: 650; }
.customer-v5 .section-index i { color: #7e7064; font-size: 10px; font-style: normal; font-weight: 500; letter-spacing: 0.05em; }
.customer-v5 .section-heading > div > strong { grid-column: 2; grid-row: 1; color: #352117; font-family: var(--display); font-size: clamp(20px, 1.9vw, 25px); font-weight: 650; line-height: 1.15; }
.customer-v5 .section-copy { grid-column: 1 / -1; grid-row: 2; color: #7f7368; font-size: 11px; }
.customer-v5 .section-heading > small { max-width: 42%; color: #7e7268; font-size: 10px; line-height: 1.5; text-align: right; }

.customer-v5 .concern-groups { grid-template-rows: 1.15fr 0.92fr 0.92fr; gap: 0; }
.customer-v5 .concern-group {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 9px 4px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.customer-v5 .concern-group + .concern-group { border-top: 1px solid rgba(120, 82, 43, 0.17); }
.customer-v5 .concern-group header { gap: 9px; min-height: 33px; color: #4b3020; }
.customer-v5 .group-line-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.customer-v5 .group-line-icon svg { width: 34px; height: 30px; fill: none; stroke: #a57a3c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.customer-v5 .concern-group header strong { font-size: 14px; font-weight: 650; letter-spacing: 0.025em; }
.customer-v5 .concern-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.customer-v5 .concern-chip {
  min-height: 45px;
  padding: 6px 9px;
  border-color: rgba(118, 81, 43, 0.19);
  border-radius: 11px;
  background: linear-gradient(150deg, #fff, #fbf7ef);
  color: #4b3a30;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  line-height: 1.23;
  box-shadow: 0 5px 11px rgba(56, 34, 20, 0.045), inset 0 1px rgba(255, 255, 255, 0.95);
}
.customer-v5 .concern-chip i { position: absolute; top: 4px; right: 5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #b58b50, #825b2e); color: #fff; font-size: 9px; font-style: normal; box-shadow: 0 3px 8px rgba(66, 39, 22, 0.18); }
.customer-v5 .concern-chip.selected { border-color: #ad844b; background: linear-gradient(145deg, #fffdf8, #efe1ca); color: #4e2f1e; box-shadow: inset 0 0 0 1px rgba(170, 128, 70, 0.18), 0 7px 15px rgba(65, 40, 23, 0.08); }
.customer-v5 .concern-chip.selected::after { display: none; }

.customer-v5 .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 9px; }
.customer-v5 .care-card {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 5px;
  padding: 11px;
  border-color: rgba(118, 81, 43, 0.19);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(250, 246, 238, 0.91));
  box-shadow: 0 7px 17px rgba(55, 34, 20, 0.06), inset 0 1px rgba(255, 255, 255, 0.95);
}
.customer-v5 .care-card:hover { transform: translateY(-1px); }
.customer-v5 .care-card.selected { border-color: var(--accent); background: linear-gradient(145deg, #fffdf8, #f5ece0); box-shadow: inset 0 0 0 1px rgba(170, 128, 70, 0.18), 0 12px 25px rgba(57, 35, 21, 0.1); }
.customer-v5 .care-card.locked { opacity: 0.72; }
.customer-v5 .care-card.recommended::after { display: none; }
.selected-seal,
.locked-seal { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 50%; background: linear-gradient(145deg, #8a6237, #4d2b1c); color: #fff; font-size: 14px; box-shadow: 0 5px 11px rgba(64, 38, 22, 0.23); }
.locked-seal { border-color: rgba(120, 82, 43, 0.2); background: #f3ece1; color: #9a846f; box-shadow: none; }
.customer-v5 .care-head { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.customer-v5 .care-symbol {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.54);
  border-radius: 17px;
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  font-family: var(--display);
  font-size: 39px;
  font-weight: 650;
  text-shadow: 0 1px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.38), 0 8px 16px rgba(54, 32, 19, 0.15);
}
.customer-v5 .care-title { gap: 2px; padding-right: 24px; }
.customer-v5 .care-title strong { display: -webkit-box; overflow: hidden; color: #352117; font-family: var(--ui); font-size: clamp(15px, 1.35vw, 18px); font-weight: 650; line-height: 1.23; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.customer-v5 .care-title > span { color: var(--accent); font-size: 11px; font-weight: 600; }
.customer-v5 .recommend-badge { align-self: start; margin-right: 28px; padding: 4px 7px; border-radius: 999px; background: #eef4ef; color: #527662; font-size: 8px; font-style: normal; font-weight: 650; white-space: nowrap; }
.customer-v5 .match-copy { margin: 0; overflow: hidden; color: #80746a; font-size: clamp(9px, 0.82vw, 11px); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.customer-v5 .match-copy::first-letter { color: var(--accent); }
.customer-v5 .care-bottom { display: grid; grid-template-columns: minmax(92px, auto) minmax(172px, 1fr); align-items: end; gap: 10px; min-width: 0; }
.customer-v5 .care-meta { display: flex; align-items: baseline; justify-content: flex-start; gap: 9px; padding: 0; }
.customer-v5 .care-meta span { color: #73685e; font-size: 10.5px; white-space: nowrap; }
.customer-v5 .care-meta strong { color: #3b271d; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 650; white-space: nowrap; }
.customer-v5 .care-meta strong small { margin-right: 2px; font-size: 11px; font-weight: 500; }
.customer-v5 .care-actions { grid-template-columns: minmax(65px, 0.82fr) minmax(92px, 1.18fr); gap: 7px; }
.customer-v5 .detail-button,
.customer-v5 .add-button { min-height: 43px; border-radius: 11px; font-size: 11.5px; font-weight: 650; }
.customer-v5 .detail-button { border-color: rgba(118, 81, 43, 0.2); background: #fffdf8; color: #75542f; }
.customer-v5 .add-button { border-color: var(--accent); background: linear-gradient(145deg, var(--accent), #4c3021); color: #fff; box-shadow: 0 6px 14px rgba(59, 35, 21, 0.16), inset 0 1px rgba(255, 255, 255, 0.22); }
.customer-v5 .add-button.selected { border-color: var(--accent); background: #fffaf2; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(170, 128, 70, 0.15); }

.customer-v5 .app-footer {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 18px;
  min-width: 0;
  min-height: 78px;
  padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top-color: rgba(120, 82, 43, 0.18);
  background: rgba(252, 249, 243, 0.92);
  box-shadow: 0 -10px 30px rgba(55, 34, 20, 0.055);
}
.customer-v5 .footer-count { min-width: 150px; padding-right: 18px; border-right: 1px solid var(--line); }
.customer-v5 .footer-count span { color: #83776c; font-size: 9.5px; }
.customer-v5 .footer-count strong { color: #3b261b; font-family: var(--ui); font-size: 15px; font-weight: 650; }
.selected-chips { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.selected-chips > span { overflow: hidden; color: #887b70; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.selected-chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; max-width: 180px; padding: 0 12px; overflow: hidden; border: 1px solid rgba(170, 128, 70, 0.35); border-radius: 11px; background: linear-gradient(150deg, #fff, #f7efe3); color: #543520; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 5px 12px rgba(57, 35, 21, 0.06); }
.selected-chips button i { color: #9a7a58; font-size: 15px; font-style: normal; }
.selection-delta { display: flex; align-items: baseline; gap: 12px; padding: 0 6px; white-space: nowrap; }
.selection-delta span { color: #81756b; font-size: 11px; }
.selection-delta strong { color: #4a2b1c; font: 650 22px var(--display); }
.customer-v5 .app-footer .solid-button { min-width: 245px; min-height: 54px; border: 1px solid #3c2115; border-radius: 16px; background: linear-gradient(145deg, #70472c, #3c2116); font-size: 15px; font-weight: 650; box-shadow: 0 12px 25px rgba(57, 32, 18, 0.23), inset 0 1px rgba(255, 255, 255, 0.22); }

.base-sheet-v5 {
  display: grid;
  grid-template-rows: 92px 54px minmax(0, 1fr) 76px;
  width: min(1420px, calc(100% - 34px));
  height: min(1010px, calc(100% - 30px));
  overflow: hidden;
  border: 1px solid rgba(120, 82, 43, 0.28);
  border-radius: 26px;
  background: rgba(253, 250, 244, 0.98);
  box-shadow: 0 38px 110px rgba(42, 25, 15, 0.3), inset 0 1px rgba(255, 255, 255, 0.98);
}
.base-sheet-v5 .sheet-header { display: grid; grid-template-columns: 205px minmax(0, 1fr) auto 52px; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid rgba(120, 82, 43, 0.16); }
.base-sheet-v5 .sheet-logo img { display: block; width: 180px; height: 57px; object-fit: contain; object-position: left center; }
.base-sheet-v5 .sheet-heading { gap: 2px; }
.base-sheet-v5 .sheet-heading .eyebrow { font-size: 8px; letter-spacing: 0.18em; }
.base-sheet-v5 .sheet-heading h2 { margin: 0; color: #382218; font-family: var(--display); font-size: 27px; font-weight: 650; letter-spacing: 0.03em; }
.base-sheet-v5 .sheet-heading p { margin: 2px 0 0; color: #756a60; font-size: 10px; }
.base-sheet-v5 .sheet-reset { min-height: 44px; padding: 0 15px; }
.base-sheet-v5 .icon-button { width: 48px; min-width: 48px; min-height: 48px; border-color: rgba(120, 82, 43, 0.2); background: #fffdf8; color: #6c5a4b; font-size: 23px; }
.base-sheet-v5 > .flow-steps { margin: 5px 18px 2px 258px; padding: 4px 40px; border-radius: 13px; box-shadow: none; }
.base-catalog-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 8px 18px 10px; }
.category-rail { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 0; padding: 5px; border: 1px solid rgba(120, 82, 43, 0.17); border-radius: 19px; background: linear-gradient(160deg, #f8f1e6, #fffdf8); box-shadow: 0 8px 20px rgba(58, 35, 21, 0.06), inset 0 1px rgba(255, 255, 255, 0.95); }
.category-rail button { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; min-height: 0; padding: 9px 11px; border: 0; border-radius: 14px; background: transparent; text-align: left; transition: transform 180ms var(--spring), background 180ms ease, box-shadow 180ms ease; }
.category-rail button:first-child { background: linear-gradient(145deg, #fffdf8, #efe1ca); box-shadow: inset 4px 0 #94672f, 0 7px 14px rgba(62, 38, 22, 0.07); }
.category-rail button:active { transform: scale(0.985); }
.category-rail button > span { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(170, 128, 70, 0.25); border-radius: 14px; background: #f4ead9; color: #93682f; font: 650 24px var(--display); }
.category-rail button strong { align-self: end; color: #392419; font-size: 14px; font-weight: 650; }
.category-rail button small { align-self: start; color: #887b70; font-size: 9px; }
.base-sheet-v5 .service-catalog { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 0; padding: 0; overflow: auto; scroll-behavior: smooth; }
.base-sheet-v5 .service-category { display: grid; grid-template-columns: 1fr; grid-template-rows: 24px minmax(0, 1fr); gap: 4px; min-height: 0; padding: 8px 9px 9px; border: 1px solid rgba(120, 82, 43, 0.16); border-radius: 16px; background: rgba(255, 253, 248, 0.87); box-shadow: 0 5px 13px rgba(58, 35, 21, 0.045), inset 0 1px rgba(255, 255, 255, 0.95); scroll-margin-top: 4px; }
.category-inline-title { display: flex; align-items: center; gap: 8px; padding: 0 3px; }
.category-inline-title i { width: 4px; height: 18px; border-radius: 999px; background: linear-gradient(#ba9158, #765027); }
.category-inline-title strong { color: #412b1f; font-size: 13px; font-weight: 650; }
.category-inline-title span { color: #8a7e73; font-size: 9px; }
.base-sheet-v5 .service-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; min-height: 0; }
.base-sheet-v5 .service-choice { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 30px; gap: 0; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid rgba(120, 82, 43, 0.18); border-radius: 13px; background: linear-gradient(150deg, #fff, #faf6ee); box-shadow: 0 5px 12px rgba(56, 34, 20, 0.05), inset 0 1px rgba(255, 255, 255, 0.95); animation: card-enter 440ms var(--ease) both; animation-delay: var(--item-delay); }
.base-sheet-v5 .service-choice.selected { border-color: #9b713a; background: linear-gradient(145deg, #fffdf8, #efe1c9); box-shadow: inset 0 0 0 1px rgba(170, 128, 70, 0.18), 0 8px 17px rgba(56, 34, 20, 0.09); }
.base-sheet-v5 .service-choice.selected::after { top: 7px; right: 7px; width: 22px; height: 22px; font-size: 11px; }
.base-sheet-v5 .service-select { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 7px; min-height: 0; padding: 9px 10px 5px; border: 0; background: transparent; text-align: left; }
.base-sheet-v5 .service-name { display: -webkit-box; overflow: hidden; color: #38241a; font-family: var(--ui); font-size: clamp(12px, 1.05vw, 15px); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.base-sheet-v5 .service-meta { display: flex; align-self: end; justify-content: space-between; gap: 5px; min-width: 0; color: #7d7167; font-size: 9px; }
.base-sheet-v5 .service-meta em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.base-sheet-v5 .service-meta b { color: #80603b; font-weight: 600; white-space: nowrap; }
.base-sheet-v5 .service-info { position: relative; right: auto; bottom: auto; grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: auto; min-width: 0; min-height: 30px; padding: 0 10px; border: 0; border-top: 1px solid rgba(120, 82, 43, 0.15); border-radius: 0; background: rgba(248, 242, 233, 0.8); color: #76552f; }
.base-sheet-v5 .service-info span { display: block; color: inherit; font-size: 9px; font-weight: 600; }
.base-sheet-v5 .service-info i { font-size: 14px; font-style: normal; }
.base-sheet-v5 .sheet-footer { min-height: 76px; padding: 10px 20px; border-top-color: rgba(120, 82, 43, 0.18); background: rgba(252, 249, 243, 0.94); }
.base-sheet-v5 .sheet-footer p { color: #776b61; font-size: 12px; }
.base-sheet-v5 .sheet-footer p strong { margin-left: 8px; color: #3d281d; font-size: 14px; }
.base-sheet-v5 .sheet-footer .solid-button { min-width: 250px; min-height: 52px; border-radius: 15px; font-size: 15px; }

.confirm-v5 {
  grid-template-rows: 82px 52px minmax(0, 1fr) 78px;
  min-height: 650px;
}
.confirm-v5 .flow-steps { grid-row: 2; }
.confirm-v5 .confirm-main { grid-row: 3; gap: 14px; padding: 8px 20px 10px; }
.confirm-v5 .receipt-panel,
.confirm-v5 .confirm-box { border-color: rgba(120, 82, 43, 0.2); background: rgba(255, 253, 248, 0.9); box-shadow: 0 12px 31px rgba(55, 34, 20, 0.08), inset 0 1px rgba(255, 255, 255, 0.95); }
.confirm-v5 .confirm-footer { grid-row: 4; }
.complete-order-number { display: inline-flex; margin: 3px auto 14px; padding: 6px 10px; border-radius: 999px; background: #f2eadf; color: #7b5934; font-size: 10px; font-weight: 650; letter-spacing: 0.06em; }

.drawer-overlay { background: rgba(42, 31, 24, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.detail-drawer { border-left: 1px solid rgba(170, 128, 70, 0.35); background: #fffdf8; box-shadow: -26px 0 70px rgba(38, 22, 13, 0.22); }
.drawer-symbol { border: 2px solid rgba(255, 255, 255, 0.5); outline: 1px solid var(--drawer-accent); outline-offset: 2px; }

@media (orientation: landscape) and (min-width: 900px) and (max-height: 800px) {
  .customer-v5 { grid-template-rows: 70px 48px 57px minmax(0, 1fr) 70px; min-height: 620px; }
  .confirm-v5 { grid-template-rows: 70px 48px minmax(0, 1fr) 70px; min-height: 620px; }
  .customer-v5 .brand-button img,
  .confirm-v5 .brand-button img { width: 154px; height: 50px; }
  .customer-v5 .header-title strong,
  .confirm-v5 .header-title strong { font-size: 24px; }
  .customer-v5 .header-title span,
  .confirm-v5 .header-title span { font-size: 9.5px; }
  .customer-v5 .store-pill,
  .confirm-v5 .store-pill,
  .customer-v5 .reset-button,
  .confirm-v5 .reset-button { min-height: 42px; font-size: 11.5px; }
  .flow-steps { margin-block: 4px 2px; padding-block: 3px; }
  .flow-step > span { width: 28px; height: 28px; }
  .customer-v5 .base-strip { margin-block: 4px; padding-block: 5px; }
  .base-strip-icon { width: 34px; height: 34px; }
  .customer-v5 .base-current strong { font-size: 16px; }
  .customer-v5 .selection-stage { grid-template-columns: minmax(325px, 0.39fr) minmax(0, 0.61fr); gap: 10px; padding-bottom: 6px; }
  .customer-v5 .concern-panel,
  .customer-v5 .care-panel { padding: 8px 9px; }
  .customer-v5 .section-heading { min-height: 42px; margin-bottom: 5px; padding-bottom: 5px; }
  .customer-v5 .section-heading > div > strong { font-size: 19px; }
  .customer-v5 .section-copy,
  .customer-v5 .section-heading > small { font-size: 10px; }
  .customer-v5 .concern-panel .section-heading > div { grid-template-columns: 1fr; row-gap: 1px; }
  .customer-v5 .concern-panel .section-index { grid-column: 1; grid-row: 1; }
  .customer-v5 .concern-panel .section-heading > div > strong { grid-column: 1; grid-row: 2; white-space: nowrap; }
  .customer-v5 .concern-panel .section-copy { grid-column: 1; grid-row: 3; }
  .customer-v5 .concern-group { gap: 3px; padding-block: 5px 6px; }
  .customer-v5 .concern-group header { min-height: 26px; gap: 6px; }
  .customer-v5 .group-line-icon { width: 29px; height: 25px; }
  .customer-v5 .group-line-icon svg { width: 27px; height: 24px; }
  .customer-v5 .concern-group header strong { font-size: 12px; }
  .customer-v5 .concern-options { gap: 5px; }
  .customer-v5 .concern-chip { min-height: 44px; padding: 4px 6px; font-size: 11.5px; }
  .customer-v5 .care-grid { gap: 6px; }
  .customer-v5 .care-card { gap: 3px; padding: 8px; }
  .customer-v5 .care-head { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
  .customer-v5 .care-symbol { width: 48px; height: 48px; border-radius: 14px; font-size: 31px; }
  .customer-v5 .care-title strong { font-size: 14px; -webkit-line-clamp: 1; }
  .customer-v5 .care-title > span { font-size: 10.5px; }
  .customer-v5 .recommend-badge { margin-right: 24px; padding: 3px 5px; font-size: 7px; }
  .customer-v5 .match-copy { font-size: 10px; }
  .customer-v5 .care-bottom { grid-template-columns: minmax(82px, auto) minmax(145px, 1fr); gap: 7px; }
  .customer-v5 .care-meta { gap: 6px; }
  .customer-v5 .care-meta span { font-size: 10px; }
  .customer-v5 .care-meta strong { font-size: 19px; }
  .customer-v5 .care-actions { grid-template-columns: 58px minmax(82px, 1fr); gap: 5px; }
  .customer-v5 .detail-button,
  .customer-v5 .add-button { min-height: 44px; font-size: 11.5px; }
  .customer-v5 .app-footer { min-height: 70px; gap: 12px; padding-block: 8px; }
  .customer-v5 .footer-count { min-width: 135px; }
  .selected-chips button { min-height: 34px; }
  .selection-delta { gap: 7px; }
  .selection-delta span { font-size: 9px; }
  .selection-delta strong { font-size: 18px; }
  .customer-v5 .app-footer .solid-button { min-width: 215px; min-height: 48px; font-size: 13px; }
  .base-sheet-v5 { grid-template-rows: 78px 48px minmax(0, 1fr) 66px; }
  .base-sheet-v5 .sheet-header { grid-template-columns: 180px minmax(0, 1fr) auto 45px; padding-block: 9px; }
  .base-sheet-v5 .sheet-logo img { width: 158px; height: 48px; }
  .base-sheet-v5 .sheet-heading h2 { font-size: 23px; }
  .base-sheet-v5 .icon-button { width: 42px; min-width: 42px; min-height: 42px; }
  .base-sheet-v5 > .flow-steps { margin-left: 238px; }
  .base-catalog-layout { grid-template-columns: 195px minmax(0, 1fr); gap: 9px; padding-block: 6px 7px; }
  .category-rail { gap: 5px; }
  .category-rail button { grid-template-columns: 40px 1fr; padding: 5px 8px; }
  .category-rail button > span { width: 39px; height: 39px; font-size: 20px; }
  .category-rail button strong { font-size: 13px; }
  .base-sheet-v5 .service-catalog { gap: 5px; }
  .base-sheet-v5 .service-category { grid-template-rows: 20px minmax(0, 1fr); gap: 3px; padding: 5px 6px 6px; }
  .category-inline-title i { height: 15px; }
  .category-inline-title strong { font-size: 12px; }
  .base-sheet-v5 .service-options { gap: 6px; }
  .base-sheet-v5 .service-choice { grid-template-rows: minmax(0, 1fr) 26px; }
  .base-sheet-v5 .service-select { gap: 3px; padding: 6px 7px 3px; }
  .base-sheet-v5 .service-name { font-size: 12.5px; }
  .base-sheet-v5 .service-meta { font-size: 9.5px; }
  .base-sheet-v5 .service-info { min-height: 26px; }
  .base-sheet-v5 .service-info span { font-size: 10px; }
  .base-sheet-v5 .sheet-footer { min-height: 66px; padding-block: 7px; }
  .base-sheet-v5 .sheet-footer .solid-button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .base-sheet-v5 .service-catalog { scroll-behavior: auto; }
}

/* Reference alignment · 5.1
   Matches the approved iPad layouts while preserving the complete workflow. */
.store-pill svg,
.reset-button svg,
.base-strip-icon svg,
.locked-seal svg,
.clock-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-pill svg,
.reset-button svg { width: 19px; height: 19px; flex: 0 0 auto; }
.base-strip-icon svg { width: 28px; height: 28px; }
.locked-seal svg { width: 15px; height: 15px; }
.clock-icon { width: 14px; height: 14px; flex: 0 0 auto; }

.customer-v5 .header-title strong,
.confirm-v5 .header-title strong {
  color: #332017;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.045em;
}

.customer-v5 .header-title span,
.confirm-v5 .header-title span,
.customer-v5 .store-pill,
.confirm-v5 .store-pill,
.customer-v5 .reset-button,
.confirm-v5 .reset-button {
  font-weight: 500;
}

.customer-v5 .glass-panel,
.customer-v5 .base-strip,
.customer-v5 .care-card,
.customer-v5 .concern-chip {
  border-color: rgba(130, 88, 44, 0.22);
}

.customer-v5 .section-heading > div > strong {
  font-weight: 700;
  letter-spacing: 0.015em;
}

.customer-v5 .concern-chip {
  color: #3f3028;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.customer-v5 .care-title strong { font-weight: 600; }
.customer-v5 .care-title > span,
.customer-v5 .match-copy,
.customer-v5 .care-meta span { font-weight: 400; }

.sheet-overlay { padding: 13px; }

.base-sheet-v5 {
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: 100px 58px minmax(0, 1fr) 82px;
  width: min(1700px, calc(100vw - 28px));
  height: min(1060px, calc(100svh - 26px));
  min-height: 610px;
  border-color: rgba(139, 93, 45, 0.3);
  border-radius: 27px;
  background:
    radial-gradient(circle at 72% 0, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(145deg, #fcf9f3, #f6f0e6);
  box-shadow: 0 38px 112px rgba(42, 25, 15, 0.32), inset 0 1px rgba(255, 255, 255, 0.98);
}

.base-sidebar {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: 120px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(127, 83, 41, 0.19);
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.94), rgba(247, 239, 226, 0.72));
  box-shadow: 10px 0 30px rgba(63, 37, 20, 0.035);
}

.base-sidebar .sheet-logo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 19px 16px 12px;
}

.base-sheet-v5 .base-sidebar .sheet-logo img {
  width: 190px;
  height: 66px;
  object-position: center;
}

.sidebar-botanical {
  position: absolute;
  z-index: 0;
  right: -18px;
  bottom: -15px;
  width: 185px;
  color: #b99a69;
  opacity: 0.2;
  pointer-events: none;
}

.sidebar-botanical svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.base-sheet-v5 .sheet-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 16px 24px 11px 30px;
  border-bottom: 0;
}

.base-sheet-v5 .sheet-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.base-sheet-v5 .sheet-heading .eyebrow {
  color: #896233;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
}

.base-sheet-v5 .sheet-heading h2 {
  color: #342016;
  font-family: var(--display);
  font-size: clamp(27px, 2.15vw, 35px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.035em;
}

.base-sheet-v5 .sheet-heading p {
  margin-top: 3px;
  color: #786d64;
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.sheet-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.base-sheet-v5 .sheet-reset {
  min-height: 48px;
  padding: 0 17px;
  border-color: rgba(126, 81, 37, 0.26);
  border-radius: 14px;
  background: linear-gradient(155deg, #fffefb, #f5eddf);
  color: #6c4927;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 17px rgba(72, 42, 22, 0.09), inset 0 1px rgba(255,255,255,.95);
}

.base-sheet-v5 .icon-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  border-color: rgba(126, 81, 37, 0.2);
  background: rgba(255, 253, 248, 0.86);
  color: #6e6258;
  font-size: 24px;
  font-weight: 300;
  box-shadow: 0 7px 16px rgba(64, 38, 22, 0.06);
}

.base-sheet-v5 > .flow-steps {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0 24px 4px 30px;
  padding: 5px clamp(34px, 5vw, 90px);
  border-color: rgba(126, 82, 40, 0.2);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.78);
  box-shadow: 0 6px 17px rgba(62, 37, 21, 0.045), inset 0 1px rgba(255,255,255,.9);
}

.base-catalog-layout {
  grid-column: 2;
  grid-row: 3;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 5px 23px 12px 29px;
}

.category-rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-height: 0;
  padding: 5px 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.category-rail button,
.category-rail button:first-child {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 13px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px 12px 10px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  text-align: left;
  box-shadow: none;
  transition: transform 210ms var(--spring), border-color 210ms ease, background 210ms ease, box-shadow 210ms ease;
}

.category-rail button::before {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(#c49b5c, #795126);
  content: "";
  opacity: 0;
  transform: scaleY(.45);
  transition: opacity 210ms ease, transform 280ms var(--spring);
}

.category-rail button:hover { background: rgba(255, 253, 249, 0.55); }
.category-rail button:active { transform: scale(0.975); }

.category-rail button.active {
  border-color: rgba(145, 96, 45, 0.27);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247, 237, 220, .91));
  box-shadow: 0 11px 24px rgba(68, 40, 22, 0.1), inset 0 1px rgba(255,255,255,.95);
}

.category-rail button.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.category-rail button > .category-art,
.category-rail button:first-child > .category-art {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a07137;
  font: inherit;
}

.category-art svg {
  display: block;
  width: 62px;
  height: 62px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 280ms var(--spring), color 210ms ease;
}

.category-rail button.active .category-art { color: #805225; }
.category-rail button.active .category-art svg { transform: translateY(-1px) scale(1.045); }

.category-rail button > .category-copy,
.category-rail button:first-child > .category-copy {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  width: auto;
  height: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.category-rail button strong {
  align-self: auto;
  color: #34241b;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}

.category-rail button small {
  align-self: auto;
  color: #8a7b6e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.category-rail button > i {
  grid-column: 3;
  grid-row: 1;
  color: #a18d79;
  font-size: 23px;
  font-style: normal;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 210ms ease, transform 260ms var(--spring);
}

.category-rail button.active > i { opacity: .78; transform: translateX(0); }

.base-sheet-v5 .service-catalog {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.base-sheet-v5 .service-catalog::-webkit-scrollbar { display: none; }

.base-sheet-v5 .service-category {
  position: relative;
  display: grid;
  grid-template-rows: 27px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  min-height: 0;
  padding: 8px 9px 9px;
  border: 1px solid rgba(128, 86, 43, 0.17);
  border-radius: 17px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 6px 16px rgba(58, 35, 21, 0.045), inset 0 1px rgba(255,255,255,.9);
  scroll-margin-top: 3px;
  transition: border-color 250ms ease, background 250ms ease, box-shadow 250ms ease, transform 250ms var(--spring);
}

.base-sheet-v5 .service-category.active {
  border-color: rgba(151, 99, 46, 0.34);
  background: rgba(255, 254, 251, 0.94);
  box-shadow: 0 10px 24px rgba(66, 40, 22, 0.075), inset 3px 0 rgba(172, 126, 66, 0.48), inset 0 1px rgba(255,255,255,.96);
}

.category-inline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 4px;
}

.category-inline-title i {
  width: 4px;
  height: 19px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(#c49959, #765028);
  box-shadow: 0 2px 5px rgba(70,42,24,.12);
}

.category-inline-title strong {
  color: #38251b;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 600;
  letter-spacing: .01em;
}

.category-inline-title span {
  overflow: hidden;
  color: #8b7d71;
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-sheet-v5 .service-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  min-height: 0;
}

.base-sheet-v5 .service-choice {
  grid-template-rows: minmax(0, 1fr) 34px;
  min-width: 0;
  min-height: 0;
  border-color: rgba(124, 82, 41, 0.18);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(249,245,237,.9));
  box-shadow: 0 7px 15px rgba(57, 34, 20, 0.055), inset 0 1px rgba(255,255,255,.96);
}

.base-sheet-v5 .service-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(151, 101, 49, 0.34);
  box-shadow: 0 11px 23px rgba(58, 34, 20, 0.09), inset 0 1px rgba(255,255,255,.98);
}

.base-sheet-v5 .service-choice.selected {
  border-color: #95662f;
  background: linear-gradient(145deg, #fffefb, #efe1c9);
  box-shadow: inset 0 0 0 1px rgba(169, 123, 63, 0.2), 0 11px 24px rgba(62, 37, 21, 0.12);
}

.base-sheet-v5 .service-choice.selected::after {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(145deg, #ab824a, #704824);
  font-size: 12px;
  box-shadow: 0 5px 11px rgba(61,36,20,.2);
}

.base-sheet-v5 .service-select {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: 11px 12px 6px;
}

.base-sheet-v5 .service-name {
  padding-right: 25px;
  color: #342219;
  font-family: var(--ui);
  font-size: clamp(14px, 1.12vw, 18px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .005em;
}

.base-sheet-v5 .service-meta {
  align-self: end;
  gap: 8px;
  color: #7a6d63;
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 400;
}

.base-sheet-v5 .service-meta em {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.base-sheet-v5 .service-meta b {
  color: #7d5c36;
  font-weight: 500;
}

.base-sheet-v5 .service-info {
  min-height: 34px;
  padding: 0 11px;
  border-top-color: rgba(123, 81, 40, 0.15);
  background: rgba(247, 241, 231, 0.72);
  color: #76522d;
}

.base-sheet-v5 .service-info span {
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 500;
  letter-spacing: .02em;
}

.base-sheet-v5 .service-info i { font-size: 16px; }

.base-sheet-v5 .sheet-footer {
  grid-column: 1 / -1;
  grid-row: 4;
  min-height: 82px;
  padding: 11px 22px 11px 31px;
  border-top-color: rgba(125, 82, 40, 0.2);
  background: rgba(253, 250, 245, 0.94);
  box-shadow: 0 -8px 26px rgba(63, 37, 20, 0.04);
}

.base-sheet-v5 .sheet-footer p {
  color: #7e7167;
  font-size: 14px;
  font-weight: 400;
}

.base-sheet-v5 .sheet-footer p strong {
  margin-left: 10px;
  color: #39251a;
  font-size: 16px;
  font-weight: 600;
}

.base-sheet-v5 .sheet-footer .solid-button {
  min-width: 300px;
  min-height: 56px;
  border-color: #5c381f;
  border-radius: 15px;
  background: linear-gradient(145deg, #8a5a2b, #5a351d);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .035em;
  box-shadow: 0 12px 25px rgba(57,32,18,.2), inset 0 1px rgba(255,255,255,.2);
}

.base-sheet-v5 .sheet-footer .solid-button:disabled {
  border-color: #cec5b8;
  background: #cec5b8;
  box-shadow: none;
}

@media (min-width: 1500px) and (min-height: 860px) {
  .base-sheet-v5 { grid-template-columns: 262px minmax(0, 1fr); }
  .base-sidebar { grid-template-rows: 132px minmax(0, 1fr); }
  .base-sheet-v5 .base-sidebar .sheet-logo img { width: 205px; height: 72px; }
  .category-rail { padding-inline: 14px; }
  .category-rail button { grid-template-columns: 74px minmax(0, 1fr) 14px; padding-inline: 12px; }
  .category-rail button > .category-art { width: 72px; height: 72px; }
  .category-art svg { width: 68px; height: 68px; }
  .category-rail button strong { font-size: 18px; }
  .category-rail button small { font-size: 12px; }
  .base-sheet-v5 .service-category { grid-template-rows: 30px minmax(0, 1fr); padding: 9px 10px 10px; }
  .base-sheet-v5 .service-choice { grid-template-rows: minmax(0, 1fr) 38px; }
  .base-sheet-v5 .service-info { min-height: 38px; }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .sheet-overlay { padding: 8px; }
  .base-sheet-v5 {
    grid-template-columns: 194px minmax(0, 1fr);
    grid-template-rows: 82px 48px minmax(0, 1fr) 68px;
    width: calc(100vw - 16px);
    height: calc(100svh - 16px);
    min-height: 590px;
    border-radius: 22px;
  }
  .base-sidebar { grid-template-rows: 92px minmax(0, 1fr); }
  .base-sidebar .sheet-logo { padding: 10px 9px 7px; }
  .base-sheet-v5 .base-sidebar .sheet-logo img { width: 160px; height: 55px; }
  .base-sheet-v5 .sheet-header { padding: 10px 15px 6px 20px; }
  .base-sheet-v5 .sheet-heading .eyebrow { font-size: 7px; }
  .base-sheet-v5 .sheet-heading h2 { font-size: 25px; }
  .base-sheet-v5 .sheet-heading p { margin-top: 1px; font-size: 9.5px; }
  .base-sheet-v5 .sheet-reset { min-height: 42px; padding-inline: 12px; font-size: 11px; }
  .base-sheet-v5 .sheet-reset svg { width: 17px; height: 17px; }
  .base-sheet-v5 .icon-button { width: 42px; min-width: 42px; min-height: 42px; font-size: 21px; }
  .base-sheet-v5 > .flow-steps { margin: 0 15px 3px 20px; padding: 3px 35px; }
  .base-sheet-v5 > .flow-steps .flow-step > span { width: 28px; height: 28px; }
  .base-sheet-v5 > .flow-steps .flow-step > strong { font-size: 10.5px; }
  .base-catalog-layout { padding: 3px 14px 8px 19px; }
  .category-rail { gap: 4px; padding: 3px 8px 10px; }
  .category-rail button,
  .category-rail button:first-child { grid-template-columns: 49px minmax(0, 1fr) 9px; gap: 7px; padding: 5px 6px; border-radius: 13px; }
  .category-rail button > .category-art,
  .category-rail button:first-child > .category-art { width: 49px; height: 49px; }
  .category-art svg { width: 48px; height: 48px; }
  .category-rail button strong { font-size: 15px; }
  .category-rail button small { font-size: 9.5px; }
  .category-rail button > i { font-size: 18px; }
  .sidebar-botanical { width: 140px; }
  .base-sheet-v5 .service-catalog { gap: 5px; }
  .base-sheet-v5 .service-category { grid-template-rows: 20px minmax(0, 1fr); gap: 3px; padding: 5px 6px 6px; border-radius: 13px; }
  .category-inline-title { gap: 6px; padding-inline: 2px; }
  .category-inline-title i { width: 3px; height: 14px; }
  .category-inline-title strong { font-size: 13.5px; }
  .category-inline-title span { font-size: 9.5px; }
  .base-sheet-v5 .service-options { gap: 6px; }
  .base-sheet-v5 .service-choice { grid-template-rows: minmax(0, 1fr) 27px; border-radius: 11px; }
  .base-sheet-v5 .service-select { gap: 3px; padding: 6px 7px 3px; }
  .base-sheet-v5 .service-name { font-size: 13.5px; }
  .base-sheet-v5 .service-meta { gap: 4px; font-size: 9.75px; }
  .base-sheet-v5 .service-meta .clock-icon { width: 11px; height: 11px; }
  .base-sheet-v5 .service-info { min-height: 27px; padding-inline: 7px; }
  .base-sheet-v5 .service-info span { font-size: 10.25px; }
  .base-sheet-v5 .service-info i { font-size: 13px; }
  .base-sheet-v5 .service-choice.selected::after { top: 5px; right: 5px; width: 19px; height: 19px; font-size: 9px; }
  .base-sheet-v5 .sheet-footer { min-height: 68px; padding: 8px 14px 8px 20px; }
  .base-sheet-v5 .sheet-footer p { font-size: 11.5px; }
  .base-sheet-v5 .sheet-footer p strong { margin-left: 7px; font-size: 13px; }
  .base-sheet-v5 .sheet-footer .solid-button { min-width: 240px; min-height: 49px; font-size: 14px; }
}

@media (max-width: 899px) {
  .base-sheet-v5 { grid-template-columns: 1fr; }
  .base-sidebar { display: none; }
  .base-sheet-v5 .sheet-header,
  .base-sheet-v5 > .flow-steps,
  .base-catalog-layout { grid-column: 1; }
}

/* Precision reference recreation · 5.2
   The approved 4:3 iPad artwork is the layout contract.  The interface keeps
   one composition at every landscape iPad size instead of switching to the
   visually compressed tablet variant. */
@media (orientation: landscape) and (min-width: 900px) {
  body {
    background:
      radial-gradient(circle at 18% -12%, rgba(255, 255, 255, 0.98), transparent 42rem),
      radial-gradient(circle at 96% 40%, rgba(181, 148, 91, 0.075), transparent 38rem),
      linear-gradient(145deg, #fbf8f2 0%, #f4eee5 55%, #eee7dc 100%);
  }

  .customer-v5 {
    grid-template-rows:
      clamp(86px, 11.7vh, 122px)
      clamp(52px, 6.2vh, 67px)
      clamp(56px, 6.6vh, 72px)
      minmax(0, 1fr)
      clamp(88px, 11.5vh, 125px);
    min-height: 610px;
  }

  .customer-v5 .app-header {
    padding: max(13px, env(safe-area-inset-top)) max(27px, env(safe-area-inset-right)) 10px max(27px, env(safe-area-inset-left));
    background: rgba(252, 249, 244, 0.91);
  }

  .customer-v5 .brand-button img {
    width: clamp(150px, 14.6vw, 208px);
    height: clamp(54px, 6.6vh, 72px);
  }

  .customer-v5 .header-title { gap: 5px; }
  .customer-v5 .header-title strong {
    font-size: clamp(27px, 2.35vw, 35px);
    line-height: 1.08;
    letter-spacing: 0.075em;
  }
  .customer-v5 .header-title span {
    font-size: clamp(10px, .82vw, 12px);
    line-height: 1.35;
    letter-spacing: .065em;
  }

  .customer-v5 .store-pill,
  .customer-v5 .reset-button {
    min-height: clamp(47px, 5vh, 56px);
    padding-inline: clamp(14px, 1.35vw, 20px);
    border-radius: 14px;
    font-size: clamp(12.5px, 1vw, 15px);
    box-shadow: 0 9px 21px rgba(68, 42, 23, 0.1), inset 0 1px rgba(255, 255, 255, .98);
  }
  .customer-v5 .connection-pill {
    width: clamp(44px, 4.1vw, 53px);
    min-width: clamp(44px, 4.1vw, 53px);
    min-height: clamp(44px, 4.1vw, 53px);
  }

  .customer-v5 > .flow-steps {
    align-self: center;
    min-height: clamp(48px, 5.6vh, 61px);
    margin: 4px clamp(17px, 1.6vw, 24px) 3px;
    padding: 5px clamp(72px, 11vw, 165px);
    border-radius: 16px;
    background: rgba(255, 254, 250, .91);
    box-shadow: 0 8px 21px rgba(66, 41, 23, .075), inset 0 1px rgba(255,255,255,.98);
  }
  .customer-v5 > .flow-steps .flow-step > span {
    width: clamp(31px, 2.7vw, 38px);
    height: clamp(31px, 2.7vw, 38px);
    font-size: clamp(13px, 1.05vw, 15px);
  }
  .customer-v5 > .flow-steps .flow-step > strong {
    gap: 8px;
    font-size: clamp(12px, 1.02vw, 15px);
  }

  .customer-v5 .base-strip {
    align-self: center;
    grid-template-columns: clamp(42px, 3.8vw, 52px) auto minmax(0, 1fr) auto;
    min-height: clamp(48px, 5.6vh, 61px);
    margin: 4px clamp(17px, 1.6vw, 24px) 5px;
    padding: 6px 10px 6px 15px;
    border-color: rgba(126, 86, 44, .26);
    border-radius: 16px;
    background: rgba(255, 254, 250, .93);
    box-shadow: 0 9px 23px rgba(61, 38, 22, .085), inset 0 1px rgba(255,255,255,.98);
  }
  .customer-v5 .base-strip-icon {
    width: clamp(38px, 3.7vw, 48px);
    height: clamp(38px, 3.7vw, 48px);
  }
  .customer-v5 .base-label strong { font-size: clamp(13px, 1.05vw, 16px); }
  .customer-v5 .base-current { gap: clamp(13px, 1.4vw, 21px); padding-left: clamp(15px, 1.5vw, 22px); }
  .customer-v5 .base-current strong { font-size: clamp(18px, 1.55vw, 23px); }
  .customer-v5 .base-current span { font-size: clamp(11px, .92vw, 14px); }
  .customer-v5 .base-change {
    min-height: clamp(44px, 4.9vh, 54px);
    padding-inline: clamp(18px, 1.7vw, 25px);
    font-size: clamp(12px, 1vw, 15px);
    box-shadow: 0 6px 14px rgba(63, 39, 22, .07), inset 0 1px rgba(255,255,255,.95);
  }

  .customer-v5 .selection-stage {
    grid-template-columns: minmax(365px, .394fr) minmax(0, .606fr);
    gap: clamp(13px, 1.3vw, 19px);
    padding: clamp(8px, 1.05vh, 12px) clamp(17px, 1.6vw, 24px) clamp(9px, 1vh, 12px);
  }
  .customer-v5 .glass-panel {
    border-color: rgba(127, 86, 43, .27);
    border-radius: 22px;
    background:
      radial-gradient(circle at 12% 0, rgba(255,255,255,.82), transparent 23rem),
      linear-gradient(145deg, rgba(255,254,251,.97), rgba(249,244,235,.93));
    box-shadow: 0 13px 33px rgba(54, 33, 19, .105), inset 0 1px rgba(255,255,255,.99);
  }
  .customer-v5 .concern-panel,
  .customer-v5 .care-panel { padding: clamp(11px, 1.05vw, 16px); }
  .customer-v5 .care-panel {
    padding-right: clamp(28px, 2.5vw, 36px);
    padding-left: clamp(28px, 2.5vw, 36px);
  }

  .customer-v5 .section-heading {
    min-height: clamp(36px, 3.6vh, 39px);
    margin-bottom: 4px;
    padding: 0 5px 5px;
  }
  .customer-v5 .section-heading > div {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
  }
  .customer-v5 .section-index { grid-column: 1; grid-row: 1; }
  .customer-v5 .section-heading > div > strong { grid-column: 2; grid-row: 1; }
  .customer-v5 .section-copy { grid-column: 1 / -1; grid-row: 2; }
  .customer-v5 .concern-panel .section-heading {
    min-height: clamp(82px, 9.8vh, 106px);
    align-items: start;
  }
  .customer-v5 .concern-panel .section-heading::before { display: none; }
  .customer-v5 .concern-panel .section-heading > small {
    margin-top: 45px;
    padding: 7px 10px;
    border: 1px solid rgba(154, 105, 53, .22);
    border-radius: 10px;
    background: rgba(255, 253, 248, .86);
    box-shadow: 0 5px 12px rgba(58, 35, 21, .055), inset 0 1px rgba(255,255,255,.96);
    white-space: nowrap;
  }
  .customer-v5 .concern-panel .section-heading > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
  .customer-v5 .concern-panel .section-index { grid-column: 1; grid-row: 1; }
  .customer-v5 .concern-panel .section-heading > div > strong {
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
  }
  .customer-v5 .concern-panel .section-copy { grid-column: 1; grid-row: 3; }
  .customer-v5 .section-index b { font-size: clamp(11px, .96vw, 14px); }
  .customer-v5 .section-index i { font-size: clamp(10px, .84vw, 12px); }
  .customer-v5 .section-heading > div > strong {
    font-size: clamp(22px, 1.88vw, 27px);
    line-height: 1.12;
  }
  .customer-v5 .section-copy,
  .customer-v5 .section-heading > small { font-size: clamp(10px, .83vw, 12px); }

  .customer-v5 .concern-groups { grid-template-rows: 1.12fr .94fr .94fr; }
  .customer-v5 .concern-group {
    gap: clamp(5px, .65vh, 8px);
    padding: clamp(7px, .82vh, 10px) 5px clamp(8px, .92vh, 11px);
  }
  .customer-v5 .concern-group header {
    min-height: clamp(34px, 3.9vh, 44px);
    gap: 10px;
  }
  .customer-v5 .group-line-icon {
    width: clamp(35px, 3.4vw, 44px);
    height: clamp(31px, 3.2vw, 41px);
  }
  .customer-v5 .group-line-icon svg {
    width: clamp(33px, 3.2vw, 42px);
    height: clamp(29px, 3vw, 39px);
  }
  .customer-v5 .concern-group header strong { font-size: clamp(14px, 1.2vw, 18px); }
  .customer-v5 .concern-options { gap: clamp(6px, .62vw, 9px); }
  .customer-v5 .concern-chip {
    min-height: clamp(43px, 5.25vh, 57px);
    padding: 6px 8px;
    border-color: rgba(118, 80, 41, .23);
    border-radius: 12px;
    background: linear-gradient(150deg, #fffefb, #faf5ec);
    font-size: clamp(12px, 1.02vw, 15px);
    box-shadow: 0 6px 14px rgba(56,34,20,.065), inset 0 1px rgba(255,255,255,.98);
  }

  .customer-v5 .care-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.1vw, 16px);
  }
  .customer-v5 .care-card {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(5px, .6vh, 8px);
    padding: clamp(10px, .92vw, 14px);
    border-color: rgba(119, 80, 40, .24);
    border-radius: 18px;
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,.9), transparent 16rem),
      linear-gradient(150deg, #fffefb, #faf5ec);
    box-shadow: 0 9px 22px rgba(55,34,20,.08), inset 0 1px rgba(255,255,255,.99);
  }
  .customer-v5 .care-card.selected {
    border-color: #8f5c37;
    box-shadow: inset 0 0 0 1px rgba(144, 91, 49, .26), 0 13px 29px rgba(57,35,21,.12);
  }
  .customer-v5 .care-head {
    grid-template-columns: clamp(58px, 5.3vw, 72px) minmax(0, 1fr) auto;
    gap: clamp(10px, .95vw, 14px);
  }
  .customer-v5 .care-symbol {
    width: clamp(58px, 5.3vw, 72px);
    height: clamp(58px, 5.3vw, 72px);
    border-radius: clamp(16px, 1.4vw, 20px);
    font-size: clamp(38px, 3.45vw, 48px);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.43), 0 9px 19px rgba(54,32,19,.18);
  }
  .customer-v5 .care-title { gap: 3px; }
  .customer-v5 .care-title strong {
    font-size: clamp(16px, 1.38vw, 20px);
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }
  .customer-v5 .care-title > span { font-size: clamp(11px, .92vw, 14px); }
  .customer-v5 .recommend-badge {
    margin-right: 28px;
    padding: 4px 8px;
    font-size: clamp(8px, .65vw, 10px);
  }
  .customer-v5 .match-copy {
    font-size: clamp(10.5px, .88vw, 13px);
    line-height: 1.4;
  }
  .customer-v5 .care-bottom {
    grid-template-columns: minmax(105px, auto) minmax(180px, 1fr);
    gap: clamp(8px, .82vw, 12px);
  }
  .customer-v5 .care-meta { gap: clamp(7px, .65vw, 10px); }
  .customer-v5 .care-meta span { font-size: clamp(10px, .86vw, 13px); }
  .customer-v5 .care-meta strong { font-size: clamp(23px, 2vw, 29px); }
  .customer-v5 .care-meta strong small { font-size: clamp(10px, .86vw, 13px); }
  .customer-v5 .care-actions {
    grid-template-columns: minmax(66px, .8fr) minmax(100px, 1.2fr);
    gap: clamp(7px, .7vw, 10px);
  }
  .customer-v5 .detail-button,
  .customer-v5 .add-button {
    min-height: clamp(47px, 5.1vh, 56px);
    border-radius: 12px;
    font-size: clamp(12px, 1vw, 15px);
  }
  .customer-v5 .selected-seal,
  .customer-v5 .locked-seal {
    top: clamp(10px, .9vw, 14px);
    right: clamp(10px, .9vw, 14px);
    width: clamp(28px, 2.5vw, 34px);
    height: clamp(28px, 2.5vw, 34px);
  }

  .customer-v5 .app-footer {
    grid-template-columns: auto minmax(230px, .9fr) minmax(230px, .8fr) auto;
    gap: clamp(15px, 1.45vw, 22px);
    min-height: 0;
    padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background: rgba(253, 250, 245, .96);
    box-shadow: 0 -11px 30px rgba(55,34,20,.065);
  }
  .customer-v5 .footer-count { min-width: clamp(145px, 13vw, 188px); }
  .customer-v5 .footer-count span { font-size: clamp(10px, .76vw, 12px); }
  .customer-v5 .footer-count strong { font-size: clamp(15px, 1.25vw, 18px); }
  .customer-v5 .selected-chips > span { font-size: clamp(10.5px, .85vw, 13px); }
  .customer-v5 .selected-chips button {
    min-height: clamp(38px, 4.2vh, 46px);
    font-size: clamp(10.5px, .85vw, 13px);
  }
  .customer-v5 .selection-delta span { font-size: clamp(10px, .82vw, 12px); }
  .customer-v5 .selection-delta strong { font-size: clamp(22px, 1.85vw, 27px); }
  .customer-v5 .selection-delta { justify-content: center; }
  .customer-v5 .app-footer .solid-button {
    min-width: clamp(235px, 22vw, 320px);
    min-height: clamp(57px, 6.2vh, 68px);
    border-radius: 17px;
    font-size: clamp(15px, 1.28vw, 19px);
    margin-right: clamp(14px, 1.55vw, 23px);
  }

  /* Base-service page: exact proportions of the approved fourth artwork. */
  .sheet-overlay { padding: clamp(9px, 1.38vw, 20px); }
  .base-sheet-v5 {
    grid-template-columns: clamp(188px, 17.25vw, 244px) minmax(0, 1fr);
    grid-template-rows:
      clamp(82px, 9.2vh, 102px)
      clamp(48px, 5.15vh, 58px)
      minmax(0, 1fr)
      clamp(76px, 9vh, 99px);
    width: calc(100vw - clamp(18px, 2.76vw, 40px));
    height: calc(100svh - clamp(18px, 2.76vw, 40px));
    min-height: 590px;
    border-radius: clamp(22px, 2vw, 28px);
  }
  .base-sidebar { grid-template-rows: clamp(92px, 10.7vh, 120px) minmax(0, 1fr); }
  .base-sidebar .sheet-logo { padding: 12px 10px 8px; }
  .base-sheet-v5 .base-sidebar .sheet-logo img {
    width: clamp(166px, 14.2vw, 198px);
    height: clamp(55px, 6.3vh, 70px);
  }
  .base-sheet-v5 .sheet-header { padding: 11px clamp(16px, 1.75vw, 25px) 7px clamp(21px, 2.1vw, 31px); }
  .base-sheet-v5 .sheet-heading .eyebrow { font-size: clamp(8px, .66vw, 10px); }
  .base-sheet-v5 .sheet-heading h2 { font-size: clamp(26px, 2.3vw, 36px); }
  .base-sheet-v5 .sheet-heading p { font-size: clamp(10px, .8vw, 12px); }
  .base-sheet-v5 .sheet-reset {
    min-height: clamp(44px, 4.6vh, 51px);
    font-size: clamp(11px, .92vw, 14px);
  }
  .base-sheet-v5 .icon-button {
    width: clamp(43px, 3.8vw, 51px);
    min-width: clamp(43px, 3.8vw, 51px);
    min-height: clamp(43px, 3.8vw, 51px);
  }
  .base-sheet-v5 > .flow-steps {
    min-height: clamp(39px, 4.5vh, 50px);
    margin: 0 clamp(15px, 1.65vw, 24px) 3px clamp(20px, 2vw, 30px);
    padding: 3px clamp(35px, 5vw, 76px);
  }
  .base-sheet-v5 > .flow-steps .flow-step > span {
    width: clamp(28px, 2.4vw, 34px);
    height: clamp(28px, 2.4vw, 34px);
  }
  .base-sheet-v5 > .flow-steps .flow-step > strong { font-size: clamp(11px, .9vw, 13.5px); }
  .base-catalog-layout { padding: 4px clamp(14px, 1.55vw, 23px) 10px clamp(19px, 1.95vw, 29px); }

  .category-rail {
    grid-template-rows: repeat(4, clamp(112px, 13.45vh, 146px));
    align-content: start;
    gap: clamp(2px, .36vh, 4px);
    padding: clamp(11px, 1.45vh, 16px) clamp(8px, .85vw, 12px) 13px;
  }
  .category-rail button,
  .category-rail button:first-child {
    grid-template-columns: clamp(49px, 4.7vw, 67px) minmax(0, 1fr) 12px;
    gap: clamp(7px, .75vw, 11px);
    padding: 7px 8px;
    border-radius: 16px;
    align-self: center;
    height: clamp(132px, 13.6vh, 148px);
  }
  .category-rail button > .category-art,
  .category-rail button:first-child > .category-art {
    width: clamp(49px, 4.7vw, 67px);
    height: clamp(49px, 4.7vw, 67px);
  }
  .category-art svg {
    width: clamp(48px, 4.55vw, 65px);
    height: clamp(48px, 4.55vw, 65px);
  }
  .category-rail button strong { font-size: clamp(16px, 1.32vw, 20px); }
  .category-rail button small { font-size: clamp(9.5px, .78vw, 11.5px); }

  .base-sheet-v5 .service-catalog {
    grid-template-rows: 1.14fr .95fr .95fr .95fr;
    gap: clamp(5px, .62vh, 8px);
  }
  .base-sheet-v5 .service-category {
    grid-template-rows: clamp(21px, 2.45vh, 28px) minmax(0, 1fr);
    gap: 4px;
    padding: 6px 7px 7px;
    border-radius: 15px;
  }
  .category-inline-title i { height: clamp(15px, 1.8vh, 20px); }
  .category-inline-title strong { font-size: clamp(14px, 1.13vw, 17px); }
  .category-inline-title span { font-size: clamp(9.5px, .75vw, 11.5px); }
  .base-sheet-v5 .service-options { gap: clamp(6px, .7vw, 10px); }
  .base-sheet-v5 .service-choice {
    grid-template-rows: minmax(0, 1fr) clamp(29px, 3.15vh, 36px);
    border-radius: 13px;
    box-shadow: 0 7px 17px rgba(57,34,20,.07), inset 0 1px rgba(255,255,255,.98);
  }
  .base-sheet-v5 .service-select { gap: 5px; padding: 8px 9px 5px; }
  .base-sheet-v5 .service-name {
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.22;
  }
  .base-sheet-v5 .service-meta { font-size: clamp(10.5px, .88vw, 13px); }
  .base-sheet-v5 .service-meta .clock-icon { width: 13px; height: 13px; }
  .base-sheet-v5 .service-info {
    min-height: clamp(29px, 3.15vh, 36px);
    padding-inline: 9px;
  }
  .base-sheet-v5 .service-info span { font-size: clamp(10.5px, .88vw, 13px); }
  .base-sheet-v5 .service-choice.selected::after {
    top: 7px;
    right: 7px;
    width: clamp(21px, 1.9vw, 26px);
    height: clamp(21px, 1.9vw, 26px);
  }
  .base-sheet-v5 .sheet-footer { padding: 9px clamp(24px, 2.65vw, 38px); }
  .base-footer-selection {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 43px);
    min-width: 0;
  }
  .base-footer-selection > span {
    color: #776b61;
    font-size: clamp(12px, .96vw, 14px);
    white-space: nowrap;
  }
  .base-footer-selection > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
  }
  .base-footer-selection strong {
    color: #3d281d;
    font-size: clamp(14px, 1.12vw, 17px);
  }
  .base-footer-selection button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: clamp(39px, 4.15vh, 46px);
    max-width: 220px;
    padding: 0 clamp(12px, 1.05vw, 16px);
    overflow: hidden;
    border: 1px solid rgba(157, 105, 49, .34);
    border-radius: 12px;
    background: linear-gradient(150deg, #fffefb, #f5ead8);
    color: #4c301f;
    font-size: clamp(11px, .9vw, 13.5px);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(56,34,20,.07), inset 0 1px rgba(255,255,255,.97);
  }
  .base-footer-selection button i {
    color: #98734d;
    font-size: 16px;
    font-style: normal;
  }
  .base-sheet-v5 .sheet-footer .solid-button {
    min-width: clamp(250px, 22.95vw, 332px);
    min-height: clamp(52px, 5.5vh, 62px);
    font-size: clamp(15px, 1.25vw, 18px);
  }
}

/* The 9.7-inch iPad uses the same composition with tighter card internals.
   This preserves full-size touch targets without clipping the action rail. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) {
  .customer-v5 .concern-groups {
    grid-template-rows: 1.08fr .7fr 1.08fr;
  }

  .customer-v5 .concern-group {
    gap: 4px;
    padding: 3px 4px 4px;
  }

  .customer-v5 .concern-group header { min-height: 28px; }
  .customer-v5 .group-line-icon,
  .customer-v5 .group-line-icon svg {
    width: 29px;
    height: 27px;
  }

  .customer-v5 .concern-chip { min-height: 44px; }

  .customer-v5 .care-panel {
    padding-right: 18px;
    padding-left: 18px;
  }

  .customer-v5 .care-grid { gap: 9px; }

  .customer-v5 .care-card {
    gap: 3px;
    padding: 8px;
  }

  .customer-v5 .care-head {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .customer-v5 .care-symbol {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 33px;
  }

  .customer-v5 .care-title strong { font-size: 15px; }
  .customer-v5 .care-title > span { font-size: 10px; }

  .customer-v5 .match-copy {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .customer-v5 .care-bottom {
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    gap: 6px;
  }

  .customer-v5 .care-meta { gap: 5px; }
  .customer-v5 .care-meta span { font-size: 10px; }
  .customer-v5 .care-meta strong { font-size: 22px; }

  .customer-v5 .care-actions {
    grid-template-columns: minmax(52px, .75fr) minmax(78px, 1.25fr);
    gap: 5px;
  }

  .customer-v5 .detail-button,
  .customer-v5 .add-button {
    min-height: 44px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .customer-v5 .recommend-badge {
    margin-right: 24px;
    padding: 3px 5px;
  }
}

/* v5.11.9 · intake-first service flow
   The new pages only change the order of the customer conversation. Existing
   base projects, detection questions, recommendation rules and order fields
   continue to use the original components below. */
.inquiry-app,
.detection-choice-app {
  grid-template-rows: 82px 52px minmax(0, 1fr) 78px;
  min-height: 650px;
}

.inquiry-app > .flow-steps,
.detection-choice-app > .flow-steps { grid-row: 2; }

.inquiry-stage,
.detection-choice-stage {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(12px, 1.4vw, 21px);
  min-width: 0;
  min-height: 0;
  padding: 9px 20px 11px;
}

.inquiry-intro,
.inquiry-options-panel,
.detection-choice-summary,
.detection-choice-actions {
  min-width: 0;
  min-height: 0;
  border-color: rgba(125, 84, 43, .22);
  background:
    radial-gradient(circle at 100% 0, rgba(205, 175, 130, .14), transparent 35%),
    linear-gradient(145deg, rgba(255, 254, 251, .98), rgba(247, 240, 230, .94));
  box-shadow: 0 16px 38px rgba(57, 35, 21, .09), inset 0 1px rgba(255, 255, 255, .98);
}

.inquiry-intro,
.detection-choice-summary {
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.45vh, 18px);
  padding: clamp(18px, 2vw, 28px);
  overflow: hidden;
}

.inquiry-intro > header,
.detection-choice-summary > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(123, 84, 45, .14);
}

.inquiry-intro .eyebrow,
.inquiry-options-panel .eyebrow,
.detection-choice-summary .eyebrow,
.detection-choice-actions .eyebrow {
  color: #977047;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .19em;
}

.inquiry-intro h1,
.detection-choice-summary h1 {
  margin: 4px 0 4px;
  color: #352118;
  font: 700 clamp(24px, 2.25vw, 32px)/1.2 var(--display);
}

.inquiry-intro > header p,
.detection-choice-summary > header p {
  margin: 0;
  color: #75685e;
  font-size: clamp(10px, .92vw, 12.5px);
  line-height: 1.65;
}

.inquiry-script {
  padding: clamp(15px, 1.7vw, 22px);
  border: 1px solid rgba(139, 93, 49, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf8, #efe1cc);
  box-shadow: inset 4px 0 #9d7039, 0 8px 20px rgba(68, 42, 23, .06);
}
.inquiry-script small { color: #9b744c; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.inquiry-script strong { display: block; margin-top: 7px; color: #432a1b; font: 650 clamp(15px, 1.45vw, 20px)/1.55 var(--display); }
.inquiry-script p { margin: 7px 0 0; color: #776a60; font-size: 10.5px; line-height: 1.65; }

.inquiry-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.35fr);
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(126, 86, 46, .16);
  border-radius: 15px;
  background: rgba(255, 255, 255, .58);
}
.inquiry-rule span { color: #523522; font-size: 10.5px; font-weight: 650; text-align: center; }
.inquiry-rule i { color: #aa845b; font-size: 14px; font-style: normal; }

.inquiry-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(236, 226, 210, .58);
  color: #75695f;
  font-size: 10px;
  line-height: 1.6;
}
.inquiry-note b { flex: 0 0 auto; color: #76502e; }

.inquiry-options-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(17px, 1.8vw, 25px);
  overflow: hidden;
}
.inquiry-options-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(123, 84, 45, .14); }
.inquiry-options-panel h2 { margin: 4px 0 0; color: #352118; font: 700 clamp(22px, 2vw, 29px)/1.2 var(--display); }
.inquiry-options-panel > header > small { color: #8c7b6d; font-size: 10px; white-space: nowrap; }

.inquiry-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1vw, 14px);
  min-height: 0;
}
.inquiry-option {
  display: grid;
  grid-template-columns: clamp(46px, 4.4vw, 62px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 1.35vw, 18px);
  border: 1px solid rgba(126, 84, 42, .2);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,237,225,.86));
  color: #3e281d;
  text-align: left;
  box-shadow: 0 8px 20px rgba(58, 35, 21, .06), inset 0 1px rgba(255,255,255,.96);
  animation: card-enter 430ms var(--ease) both;
  animation-delay: var(--option-delay);
  transition: transform 170ms var(--spring), border-color 170ms ease, box-shadow 170ms ease;
}
.inquiry-option:hover { border-color: rgba(119, 73, 32, .48); box-shadow: 0 12px 26px rgba(65, 38, 21, .11), inset 4px 0 #956433; transform: translateY(-2px); }
.inquiry-option:active { transform: scale(.985); }
.inquiry-option:disabled { opacity: .48; box-shadow: none; }
.inquiry-option.selected { border-color: #916236; background: linear-gradient(145deg, #fffdf8, #ecddc6); box-shadow: inset 4px 0 #80512b, 0 11px 24px rgba(68, 40, 21, .1); }
.inquiry-option-symbol {
  display: grid;
  place-items: center;
  width: clamp(46px, 4.4vw, 62px);
  aspect-ratio: 1;
  border: 1px solid rgba(154, 107, 58, .25);
  border-radius: 16px;
  background: linear-gradient(145deg, #f5ead9, #e4ceb0);
  color: #78502d;
  font: 700 clamp(22px, 2.1vw, 30px) var(--display);
}
.inquiry-option-copy { min-width: 0; }
.inquiry-option-copy small { display: block; color: #a18261; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.inquiry-option-copy strong { display: block; margin-top: 2px; color: #3c261a; font: 700 clamp(15px, 1.4vw, 20px) var(--display); }
.inquiry-option-copy em { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #786c62; font-size: clamp(9px, .78vw, 10.5px); font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inquiry-option > i { color: #9b754e; font-size: 22px; font-style: normal; }

.inquiry-assisted {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 14px 7px 9px;
  border: 1px dashed rgba(123, 81, 40, .34);
  border-radius: 15px;
  background: rgba(255, 253, 248, .67);
  color: #654426;
  text-align: left;
}
.inquiry-assisted > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #eee1ce; font: 700 15px var(--display); }
.inquiry-assisted strong { font-size: 11.5px; }
.inquiry-assisted i { color: #8c745d; font-size: 9.5px; font-style: normal; }

.inquiry-footer,
.detection-choice-footer {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(280px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid rgba(120, 82, 43, .18);
  background: rgba(252, 249, 243, .93);
  box-shadow: 0 -10px 30px rgba(55, 34, 20, .05);
}
.inquiry-footer > div span { display: block; color: #91795f; font-size: 9px; }
.inquiry-footer > div strong { display: block; margin-top: 3px; color: #3d281c; font-size: 14px; }
.inquiry-footer p,
.detection-choice-footer p { margin: 0; color: #7e7166; font-size: 10.5px; text-align: right; }

.detection-choice-stage { grid-template-columns: minmax(0, 1.13fr) minmax(300px, .87fr); }
.detection-choice-summary { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.detection-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-self: center; }
.detection-benefits > span { display: grid; gap: 5px; padding: clamp(13px, 1.5vw, 20px); border: 1px solid rgba(126, 85, 44, .17); border-radius: 15px; background: rgba(255,255,255,.66); text-align: center; }
.detection-benefits b { color: #5a3a24; font: 700 clamp(14px, 1.35vw, 18px) var(--display); }
.detection-benefits small { color: #81746a; font-size: 9px; }

.detection-choice-actions {
  display: grid;
  grid-template-rows: auto auto auto minmax(92px, 1fr) minmax(92px, 1fr) auto;
  align-content: center;
  gap: 11px;
  padding: clamp(20px, 2.4vw, 34px);
}
.detection-choice-actions h2 { margin: 3px 0 0; color: #352118; font: 700 clamp(23px, 2.15vw, 31px)/1.2 var(--display); }
.detection-choice-actions > p { margin: 0 0 3px; color: #776a60; font-size: 10.5px; line-height: 1.6; }
.detection-choice-primary,
.detection-choice-secondary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 82px;
  padding: 12px 15px;
  border-radius: 17px;
  text-align: left;
  transition: transform 170ms var(--spring), box-shadow 170ms ease;
}
.detection-choice-primary { border: 1px solid #50301d; background: linear-gradient(145deg, #775039, #3e2418); color: #fff; box-shadow: 0 13px 27px rgba(62, 34, 18, .22), inset 0 1px rgba(255,255,255,.2); }
.detection-choice-secondary { border: 1px solid rgba(123, 81, 41, .25); background: linear-gradient(145deg, #fffdf8, #eee1ce); color: #543621; box-shadow: 0 9px 20px rgba(61, 37, 22, .08), inset 0 1px #fff; }
.detection-choice-primary:active,
.detection-choice-secondary:active { transform: scale(.985); }
.detection-choice-primary > span,
.detection-choice-secondary > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 18px; font-weight: 750; }
.detection-choice-primary > span { background: rgba(255,255,255,.14); }
.detection-choice-secondary > span { background: #e5d2b8; }
.detection-choice-primary strong,
.detection-choice-secondary strong { display: block; font: 700 clamp(15px, 1.4vw, 19px) var(--display); }
.detection-choice-primary small,
.detection-choice-secondary small { display: block; margin-top: 4px; color: inherit; font-size: 9.5px; opacity: .76; }
.detection-choice-primary > i,
.detection-choice-secondary > i { font-size: 23px; font-style: normal; }
.detection-choice-tip { color: #897b70; font-size: 9.5px; line-height: 1.5; text-align: center; }
.detection-choice-footer > button {
  justify-self: start;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(126, 85, 43, .23);
  border-radius: 13px;
  background: rgba(255, 253, 248, .88);
  color: #76502d;
  font-size: 11px;
  font-weight: 650;
}

.sheet-back-intake {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(126, 81, 37, .22);
  border-radius: 13px;
  background: rgba(255, 253, 248, .84);
  color: #704a28;
  font-size: 11px;
  font-weight: 650;
}

.base-sheet-v5 .category-rail.category-count-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.base-sheet-v5 .category-rail.category-count-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.base-sheet-v5 .category-rail.category-count-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.base-sheet-v5 .category-rail.category-count-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.base-sheet-v5 .category-rail[class*="category-count-"] button { height: auto; min-height: 0; }
.base-sheet-v5 .service-catalog.category-count-1 { grid-template-rows: minmax(0, 1fr); }
.base-sheet-v5 .service-catalog.category-count-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.base-sheet-v5 .service-catalog.category-count-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.base-sheet-v5 .service-catalog.category-count-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }

#app.group-mode-root .inquiry-app,
#app.group-mode-root .detection-choice-app { grid-template-rows: 82px 52px 54px minmax(0, 1fr) 78px; }
#app.group-mode-root .inquiry-app > .guest-switchbar,
#app.group-mode-root .detection-choice-app > .guest-switchbar { grid-row: 3; }
#app.group-mode-root .inquiry-app > .inquiry-stage,
#app.group-mode-root .detection-choice-app > .detection-choice-stage { grid-row: 4; }
#app.group-mode-root .inquiry-app > .inquiry-footer,
#app.group-mode-root .detection-choice-app > .detection-choice-footer { grid-row: 5; }

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .inquiry-app,
  .detection-choice-app { grid-template-rows: 70px 48px minmax(0, 1fr) 70px; min-height: 620px; }
  .inquiry-stage,
  .detection-choice-stage { gap: 10px; padding: 6px 16px 7px; }
  .inquiry-intro,
  .detection-choice-summary { gap: 8px; padding: 13px 15px; }
  .inquiry-intro > header,
  .detection-choice-summary > header { gap: 10px; padding-bottom: 8px; }
  .inquiry-intro h1,
  .detection-choice-summary h1 { font-size: 22px; }
  .inquiry-script { padding: 11px 13px; }
  .inquiry-script strong { margin-top: 4px; font-size: 15px; }
  .inquiry-script p { margin-top: 4px; font-size: 9px; }
  .inquiry-rule { padding: 8px; }
  .inquiry-note { padding: 8px 10px; font-size: 9px; }
  .inquiry-options-panel { gap: 8px; padding: 12px 14px; }
  .inquiry-options-panel > header { padding-bottom: 6px; }
  .inquiry-options-panel h2 { font-size: 21px; }
  .inquiry-options { gap: 7px; }
  .inquiry-option { gap: 8px; padding: 9px 10px; border-radius: 14px; }
  .inquiry-assisted { min-height: 45px; }
  .detection-choice-actions { gap: 8px; padding: 15px 18px; }
  .detection-choice-primary,
  .detection-choice-secondary { min-height: 72px; }
  .detection-benefits > span { padding: 10px; }
  #app.group-mode-root .inquiry-app,
  #app.group-mode-root .detection-choice-app { grid-template-rows: 70px 48px 46px minmax(0, 1fr) 70px; }
}

@media (max-width: 820px), (orientation: portrait) {
  .inquiry-app,
  .detection-choice-app,
  #app.group-mode-root .inquiry-app,
  #app.group-mode-root .detection-choice-app { grid-template-rows: auto auto auto auto auto; }
  .inquiry-stage,
  .detection-choice-stage,
  #app.group-mode-root .inquiry-app > .inquiry-stage,
  #app.group-mode-root .detection-choice-app > .detection-choice-stage {
    grid-row: auto;
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .inquiry-options { grid-template-columns: 1fr; grid-template-rows: none; }
  .inquiry-footer,
  .detection-choice-footer,
  #app.group-mode-root .inquiry-app > .inquiry-footer,
  #app.group-mode-root .detection-choice-app > .detection-choice-footer { grid-row: auto; grid-template-columns: 1fr; }
  .inquiry-footer p,
  .detection-choice-footer p { text-align: left; }
  .detection-benefits { grid-template-columns: 1fr; }
  .sheet-back-intake { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-option { animation: none; transition: none; }
}

/* Figurative project icon system · 5.2.1
   Clear silhouettes replace the former abstract strokes; layout is unchanged. */
.category-art svg,
.customer-v5 .group-line-icon svg,
.customer-v5 .base-strip-icon svg {
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(83, 51, 25, .1));
}

.category-art svg {
  stroke-width: 1.78;
}

.customer-v5 .group-line-icon svg {
  stroke: #96632d;
  stroke-width: 1.72;
}

.category-rail button > .category-art,
.category-rail button:first-child > .category-art {
  color: #915f2b;
}

.category-rail button.active .category-art {
  color: #70431e;
}

.category-art .icon-soft,
.customer-v5 .group-line-icon .icon-soft,
.customer-v5 .base-strip-icon .icon-soft {
  fill: currentColor;
  stroke: none;
  opacity: .09;
}

.category-art .icon-dot,
.customer-v5 .group-line-icon .icon-dot,
.customer-v5 .base-strip-icon .icon-dot {
  fill: currentColor;
  stroke: none;
  opacity: .88;
}

.category-rail button.active .category-art svg {
  filter: drop-shadow(0 4px 4px rgba(90, 54, 25, .15));
}

/* Apple-native typography system · 5.5.0
   iPad uses San Francisco + PingFang SC first. The bundled Han fonts remain
   offline-safe fallbacks, while the six care seals keep their oriental form. */
:root {
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Segoe UI", "Han Sans", "Microsoft YaHei", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", "Han Sans", "Microsoft YaHei", sans-serif;
  --seal: "Han Serif", "Songti SC", "STSong", serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ui);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.customer-app,
.confirm-app,
.base-sheet,
.detail-drawer,
.notice-card {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.header-title strong,
.section-heading strong,
.sheet-heading h2,
.drawer-heading h2,
.receipt-title h1,
.confirm-box > strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
}

.care-symbol,
.item-seal,
.notice-mark {
  font-family: var(--seal);
}

.store-pill,
.reset-button,
.base-change,
.detail-button,
.add-button,
.outline-button,
.ghost-button,
.solid-button,
.footer-back,
.service-info {
  font-weight: 600;
  letter-spacing: -0.005em;
}

.header-title span,
.eyebrow {
  font-weight: 500;
}

.care-copy p,
.sheet-heading p,
.drawer-heading p,
.section-copy,
.section-heading small {
  line-height: 1.48;
}

@media (orientation: landscape) and (min-width: 900px) {
  .customer-v5 .header-title strong,
  .confirm-app .header-title strong {
    font-size: clamp(27px, 2.35vw, 34px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
  }

  .customer-v5 .header-title span,
  .confirm-app .header-title span {
    font-size: clamp(11px, .87vw, 13px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .055em;
  }

  .customer-v5 .store-pill,
  .customer-v5 .reset-button,
  .confirm-app .store-pill,
  .confirm-app .reset-button {
    font-size: clamp(12.5px, .96vw, 14px);
    font-weight: 500;
  }

  .customer-v5 > .flow-steps .flow-step > strong,
  .base-sheet-v5 > .flow-steps .flow-step > strong {
    font-size: clamp(12px, .96vw, 14px);
    font-weight: 500;
    letter-spacing: .015em;
  }

  .customer-v5 .base-label strong {
    font-size: clamp(13.5px, 1.08vw, 16px);
    font-weight: 600;
    letter-spacing: .01em;
  }

  .customer-v5 .base-current strong {
    font-size: clamp(18px, 1.55vw, 23px);
    font-weight: 600;
    letter-spacing: -.015em;
  }

  .customer-v5 .base-current span {
    font-size: clamp(11.5px, .94vw, 14px);
    font-weight: 400;
  }

  .customer-v5 .base-change {
    font-size: clamp(12.5px, 1vw, 15px);
  }

  .customer-v5 .section-index b {
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 600;
  }

  .customer-v5 .section-index i {
    font-size: clamp(10.5px, .84vw, 12px);
    font-weight: 500;
    letter-spacing: .035em;
  }

  .customer-v5 .section-heading > div > strong {
    font-size: clamp(21px, 1.86vw, 27px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .customer-v5 .section-copy,
  .customer-v5 .section-heading > small {
    font-size: clamp(10.5px, .86vw, 12.5px);
    font-weight: 400;
    line-height: 1.42;
  }

  .customer-v5 .concern-group header strong {
    font-size: clamp(14.5px, 1.18vw, 17px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.008em;
  }

  .customer-v5 .concern-chip {
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -.008em;
  }

  .customer-v5 .care-title strong {
    font-size: clamp(16px, 1.36vw, 20px);
    font-weight: 600;
    line-height: 1.23;
    letter-spacing: -.018em;
  }

  .customer-v5 .care-title > span {
    font-size: clamp(11px, .91vw, 13.5px);
    font-weight: 500;
    line-height: 1.28;
  }

  .customer-v5 .recommend-badge {
    font-size: clamp(8.5px, .68vw, 10px);
    font-weight: 600;
    letter-spacing: .01em;
  }

  .customer-v5 .match-copy {
    font-size: clamp(10.5px, .87vw, 13px);
    font-weight: 400;
    line-height: 1.42;
  }

  .customer-v5 .care-meta span {
    font-size: clamp(10.5px, .86vw, 13px);
    font-weight: 400;
  }

  .customer-v5 .care-meta strong {
    font-family: var(--display);
    font-size: clamp(23px, 2vw, 29px);
    font-weight: 600;
    letter-spacing: -.035em;
  }

  .customer-v5 .care-meta strong small {
    font-size: clamp(10px, .84vw, 12.5px);
    font-weight: 500;
  }

  .customer-v5 .detail-button,
  .customer-v5 .add-button {
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 600;
  }

  .customer-v5 .footer-count span,
  .customer-v5 .selected-chips > span,
  .customer-v5 .selection-delta span {
    font-size: clamp(10.5px, .83vw, 12.5px);
    font-weight: 400;
  }

  .customer-v5 .footer-count strong {
    font-size: clamp(15px, 1.24vw, 18px);
    font-weight: 600;
  }

  .customer-v5 .selected-chips button {
    font-size: clamp(11px, .88vw, 13px);
    font-weight: 500;
  }

  .customer-v5 .selection-delta strong {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.03em;
  }

  .customer-v5 .app-footer .solid-button {
    font-size: clamp(15px, 1.28vw, 19px);
    font-weight: 600;
    letter-spacing: .01em;
  }

  .base-sheet-v5 .sheet-heading .eyebrow {
    font-size: clamp(9px, .7vw, 10.5px);
    font-weight: 600;
    letter-spacing: .14em;
  }

  .base-sheet-v5 .sheet-heading h2 {
    font-size: clamp(27px, 2.28vw, 35px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.025em;
  }

  .base-sheet-v5 .sheet-heading p {
    font-size: clamp(10.5px, .84vw, 12.5px);
    font-weight: 400;
    line-height: 1.42;
  }

  .base-sheet-v5 .sheet-reset {
    font-size: clamp(11.5px, .94vw, 14px);
    font-weight: 500;
  }

  .category-rail button strong {
    font-size: clamp(16.5px, 1.34vw, 20px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.015em;
  }

  .category-rail button small {
    font-size: clamp(10px, .8vw, 12px);
    font-weight: 400;
    line-height: 1.35;
  }

  .category-inline-title strong {
    font-size: clamp(14.5px, 1.16vw, 17.5px);
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .category-inline-title span {
    font-size: clamp(10px, .78vw, 11.5px);
    font-weight: 400;
  }

  .base-sheet-v5 .service-name {
    font-size: clamp(16.5px, 1.34vw, 20px);
    font-weight: 600;
    line-height: 1.23;
    letter-spacing: -.018em;
  }

  .base-sheet-v5 .service-meta,
  .base-sheet-v5 .service-info span {
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 400;
    line-height: 1.3;
  }

  .base-sheet-v5 .service-info span {
    font-weight: 500;
  }

  .base-footer-selection > span,
  .base-sheet-v5 .sheet-footer p {
    font-size: clamp(12px, .96vw, 14px);
    font-weight: 400;
  }

  .base-footer-selection strong {
    font-size: clamp(14px, 1.12vw, 17px);
    font-weight: 600;
  }

  .base-footer-selection button {
    font-size: clamp(11.5px, .92vw, 13.5px);
    font-weight: 500;
  }

  .base-sheet-v5 .sheet-footer .solid-button {
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 600;
  }

  .drawer-summary-copy strong,
  .receipt-copy strong,
  .confirm-box > strong {
    font-weight: 600;
    letter-spacing: -.018em;
  }

  .drawer-summary-copy span,
  .receipt-copy span,
  .confirm-footer p,
  .segment button span,
  .concern-tags span,
  .total-breakdown {
    font-weight: 400;
    line-height: 1.45;
  }
}

/* Multi-match recommendation states · 5.5.0 */
.customer-v5 .care-card.related {
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(126, 99, 62, 0.14));
}

.customer-v5 .care-card.related:not(.recommended) .recommend-badge {
  background: rgba(244, 237, 225, 0.94);
  color: #7e6847;
}

.customer-v5 .care-card.recommended {
  border-color: color-mix(in srgb, var(--accent) 58%, #9b7644);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 12px 26px rgba(57, 35, 21, 0.1);
}

.customer-v5 .care-card.recommended .recommend-badge {
  background: color-mix(in srgb, var(--accent) 13%, #f8f5ed);
  color: color-mix(in srgb, var(--accent) 82%, #33231b);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .customer-v5 .care-card.related {
    border-color: rgba(143, 111, 67, 0.35);
  }

  .customer-v5 .care-card.recommended {
    border-color: var(--accent);
  }
}

/* Smart recommendation spotlight · 5.9.4 */
.customer-v5 .care-panel.focus-mode {
  border-color: rgba(164, 124, 70, 0.42);
  box-shadow: 0 18px 42px rgba(54, 36, 24, 0.15), inset 0 1px rgba(255, 255, 255, 0.95);
}

.customer-v5 .section-heading .focus-note {
  color: #765a34;
  font-weight: 600;
}

.customer-v5 .care-grid.focus-mode .care-card {
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform 260ms var(--spring),
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

.customer-v5 .care-grid.focus-mode .care-card.focus-muted {
  opacity: 0.42;
  filter: saturate(0.42) grayscale(0.14);
  transform: scale(0.982);
  border-color: rgba(118, 93, 70, 0.12);
  background: rgba(249, 246, 240, 0.72);
  box-shadow: 0 3px 10px rgba(52, 34, 22, 0.025);
}

.customer-v5 .care-grid.focus-mode .care-card.focus-related {
  z-index: 1;
  opacity: 1;
  filter: none;
}

.customer-v5 .care-grid.focus-mode .care-card.focus-primary {
  z-index: 2;
  transform: translateY(-2px) scale(1.012);
  border-width: 2px;
  border-color: var(--accent);
  background: linear-gradient(145deg, #fffefb, #f4eadb);
  box-shadow:
    0 16px 34px rgba(64, 39, 22, 0.16),
    0 0 0 3px rgba(181, 150, 92, 0.11),
    inset 0 1px rgba(255, 255, 255, 0.96);
}

.customer-v5 .care-grid.focus-mode .care-card.focus-primary .care-symbol {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.44),
    0 10px 23px rgba(54, 32, 19, 0.22);
}

.customer-v5 .care-grid.focus-mode .care-card.selected {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: none;
}

.customer-v5 .care-grid.focus-mode .care-card.focus-muted:focus-within {
  opacity: 0.82;
  filter: saturate(0.78);
}

@media (hover: hover) and (pointer: fine) {
  .customer-v5 .care-grid.focus-mode .care-card.focus-muted:hover {
    opacity: 0.82;
    filter: saturate(0.78);
    transform: translateY(-1px) scale(0.992);
  }
}

@media (hover: none), (pointer: coarse) {
  .customer-v5 .care-grid.focus-mode .care-card.focus-primary:hover {
    transform: translateY(-2px) scale(1.012);
    border-color: var(--accent);
    box-shadow:
      0 16px 34px rgba(64, 39, 22, 0.16),
      0 0 0 3px rgba(181, 150, 92, 0.11),
      inset 0 1px rgba(255, 255, 255, 0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-v5 .care-grid.focus-mode .care-card {
    transition: none;
  }
}

/* Immersive full-screen service detail · 5.9.4
   The customer sees the HTML introduction as the main experience instead of
   inside a narrow side drawer. iPad landscape keeps a small safe-area frame;
   desktop caps the reading canvas at a comfortable wide-screen width. */
.drawer-overlay.immersive-detail-overlay {
  place-items: center;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: rgba(35, 26, 20, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(0.82);
  backdrop-filter: blur(20px) saturate(0.82);
}

.detail-drawer.immersive-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1440px, calc(100vw - 20px));
  height: min(940px, calc(100vh - 20px));
  height: min(940px, calc(100dvh - 20px));
  min-width: 0;
  max-width: none;
  overflow: hidden;
  border: 1px solid rgba(179, 139, 82, 0.48);
  border-radius: 26px;
  background: #fbf8f2;
  box-shadow:
    0 34px 110px rgba(29, 17, 11, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  transform-origin: 50% 56%;
}

.drawer-overlay.opening .detail-drawer.immersive-detail {
  animation: immersive-detail-in 380ms var(--spring) both;
}

.drawer-overlay.closing .detail-drawer.immersive-detail {
  animation: immersive-detail-out 180ms ease both;
}

.immersive-detail-header {
  min-height: 86px;
  padding: 12px 17px 12px 18px;
  border-bottom: 1px solid rgba(151, 119, 76, 0.18);
  background:
    radial-gradient(circle at 4% 0%, rgba(181, 150, 92, 0.12), transparent 18rem),
    rgba(255, 253, 248, 0.96);
}

.immersive-detail-identity,
.immersive-detail-tools {
  display: flex;
  align-items: center;
}

.immersive-detail-identity {
  min-width: 0;
  gap: 14px;
}

.immersive-detail-tools {
  flex: 0 0 auto;
  gap: 18px;
}

.immersive-detail .drawer-symbol {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 17px;
  font: 600 34px var(--seal, var(--display));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.21),
    0 8px 20px rgba(46, 30, 20, 0.16);
}

.immersive-detail .drawer-heading {
  min-width: 0;
  gap: 2px;
}

.immersive-detail .drawer-heading .eyebrow {
  color: #947448;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.25;
}

.immersive-detail .drawer-heading h2 {
  overflow: hidden;
  margin: 1px 0 0;
  color: #2f211a;
  font-size: clamp(23px, 2.25vw, 32px);
  font-weight: 650;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.immersive-detail .drawer-heading p {
  overflow: hidden;
  margin: 1px 0 0;
  color: #786a5f;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.immersive-detail .drawer-price {
  min-width: 92px;
  color: var(--drawer-accent, #806536);
  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 650;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.immersive-detail .drawer-price small {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 600;
}

.immersive-detail .icon-button {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-color: rgba(126, 95, 58, 0.2);
  background: rgba(255, 253, 248, 0.86);
  color: #5b4d42;
  font-size: 27px;
  box-shadow: 0 7px 18px rgba(49, 31, 19, 0.08);
}

.immersive-detail .detail-frame-wrap {
  min-height: 0;
  margin: 12px 16px 10px;
  border: 1px solid rgba(156, 123, 78, 0.2);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow:
    0 11px 28px rgba(52, 34, 22, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.immersive-detail .detail-frame {
  width: 100%;
  height: 100%;
  background: #fffdf8;
}

.drawer-footer.immersive-detail-footer {
  grid-template-columns: minmax(160px, 1fr) minmax(142px, 0.45fr) minmax(265px, 0.85fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 9px 16px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(151, 119, 76, 0.18);
  background: rgba(255, 253, 248, 0.97);
}

.immersive-detail-footer .drawer-read-hint {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: #8a7a6d;
  font-size: 12px;
  line-height: 1.35;
}

.immersive-detail-footer .drawer-read-hint::before {
  color: #a77b42;
  font-size: 15px;
  content: "↕";
}

.immersive-detail-footer .drawer-read-hint b {
  color: #604b37;
  font-weight: 650;
}

.immersive-detail-footer .outline-button,
.immersive-detail-footer .solid-button {
  min-height: 54px;
  border-radius: 14px;
  font-size: 14px;
}

.immersive-detail-footer .solid-button {
  box-shadow:
    0 10px 24px rgba(62, 41, 31, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.14);
}

@keyframes immersive-detail-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes immersive-detail-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.982);
  }
}

@media (min-width: 1500px) {
  .detail-drawer.immersive-detail {
    width: min(1500px, calc(100vw - 48px));
    height: min(960px, calc(100vh - 40px));
    height: min(960px, calc(100dvh - 40px));
  }
}

@media (max-width: 780px), (orientation: portrait) and (max-width: 900px) {
  .drawer-overlay.immersive-detail-overlay {
    padding: 0;
  }

  .detail-drawer.immersive-detail {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .immersive-detail-header {
    min-height: 78px;
    padding:
      max(9px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      9px
      max(12px, env(safe-area-inset-left));
  }

  .immersive-detail .drawer-symbol {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 29px;
  }

  .immersive-detail .drawer-heading h2 {
    font-size: 21px;
  }

  .immersive-detail .drawer-heading p {
    max-width: 52vw;
    font-size: 11px;
  }

  .immersive-detail .drawer-price {
    min-width: 0;
    font-size: 24px;
  }

  .immersive-detail .icon-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }

  .immersive-detail .detail-frame-wrap {
    margin: 8px 9px;
    border-radius: 15px;
  }

  .drawer-footer.immersive-detail-footer {
    grid-template-columns: minmax(112px, 0.72fr) minmax(185px, 1.28fr);
    padding-inline:
      max(10px, env(safe-area-inset-left))
      max(10px, env(safe-area-inset-right));
  }

  .immersive-detail-footer .drawer-read-hint {
    display: none;
  }
}

@media (max-width: 620px) {
  .immersive-detail .drawer-heading .eyebrow,
  .immersive-detail .drawer-heading p,
  .immersive-detail .drawer-price {
    display: none;
  }

  .immersive-detail-footer .outline-button,
  .immersive-detail-footer .solid-button {
    min-height: 50px;
    padding-inline: 11px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-overlay.opening .detail-drawer.immersive-detail,
  .drawer-overlay.closing .detail-drawer.immersive-detail {
    animation: none;
  }
}

/* Base category focus filter · 5.9.5 */
.base-sheet-v5 .category-rail {
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}

.base-sheet-v5 .category-rail button,
.base-sheet-v5 .category-rail button:first-child {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-height: none;
}

.category-icon-all .icon-soft {
  fill: rgba(181, 143, 87, 0.08);
  stroke: rgba(159, 116, 60, 0.45);
}

.base-sheet-v5 .category-rail.filtering button:not(.active) {
  opacity: 0.43;
  filter: saturate(0.28);
  transform: scale(0.965);
}

.base-sheet-v5 .category-rail.filtering button:not(.active):hover,
.base-sheet-v5 .category-rail.filtering button:not(.active):focus-visible {
  opacity: 0.78;
  filter: saturate(0.72);
  transform: scale(0.985);
}

.base-sheet-v5 .service-catalog.category-filtered {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0;
  overflow: hidden;
}

.base-sheet-v5 .service-catalog.category-filtered .service-category.category-hidden {
  display: none;
}

.base-sheet-v5 .service-catalog.category-filtered .service-category.category-focus {
  height: 100%;
  padding: clamp(11px, 1.2vw, 18px);
  border-color: rgba(143, 91, 39, 0.38);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 4%, rgba(206, 172, 117, 0.12), transparent 30%),
    rgba(255, 254, 251, 0.97);
  box-shadow:
    0 18px 42px rgba(67, 40, 22, 0.1),
    inset 4px 0 rgba(172, 126, 66, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.98);
  animation: base-category-focus-in 360ms var(--spring) both;
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title {
  min-height: clamp(34px, 4.4vh, 48px);
  padding-inline: 6px;
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title strong {
  font-size: clamp(19px, 1.75vw, 28px);
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title span {
  font-size: clamp(11px, 0.92vw, 15px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, 1fr);
  gap: clamp(10px, 1.05vw, 16px);
  padding: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 83, 42, 0.3) transparent;
}

.base-sheet-v5 .service-catalog.category-filtered .service-choice {
  grid-template-rows: minmax(0, 1fr) clamp(40px, 5vh, 54px);
  border-radius: 17px;
}

.base-sheet-v5 .service-catalog.category-filtered .service-select {
  gap: 10px;
  padding: clamp(14px, 1.25vw, 21px) clamp(14px, 1.4vw, 23px) 9px;
}

.base-sheet-v5 .service-catalog.category-filtered .service-name {
  font-size: clamp(18px, 1.55vw, 25px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-meta {
  font-size: clamp(12px, 0.92vw, 15px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-info {
  min-height: clamp(40px, 5vh, 54px);
  padding-inline: clamp(14px, 1.3vw, 22px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-info span {
  font-size: clamp(12px, 0.94vw, 15px);
}

@keyframes base-category-focus-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateX(12px) scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .base-sheet-v5 .category-rail {
    gap: 3px;
    padding-block: 5px 9px;
  }

  .base-sheet-v5 .category-rail button,
  .base-sheet-v5 .category-rail button:first-child {
    grid-template-columns: 46px minmax(0, 1fr) 9px;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 13px;
  }

  .base-sheet-v5 .category-rail button > .category-art,
  .base-sheet-v5 .category-rail button:first-child > .category-art,
  .base-sheet-v5 .category-art svg {
    width: 45px;
    height: 45px;
  }

  .base-sheet-v5 .category-rail button strong {
    font-size: 14.5px;
  }

  .base-sheet-v5 .category-rail button small {
    font-size: 9px;
  }
}

@media (max-width: 700px) {
  .base-sheet-v5 .service-catalog.category-filtered .service-options {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .base-sheet-v5 .service-catalog.category-filtered .service-category.category-focus {
    animation: none;
  }
}

/* Layered base catalogue and denser category focus · 5.9.6 */
.base-sheet-v5 [data-category-panel="headMini"],
.base-sheet-v5 [data-category="headMini"] {
  --category-accent: #648875;
  --category-accent-deep: #416452;
  --category-rgb: 100, 136, 117;
}

.base-sheet-v5 [data-category-panel="headTherapy"],
.base-sheet-v5 [data-category="headTherapy"] {
  --category-accent: #a66f50;
  --category-accent-deep: #7b4b32;
  --category-rgb: 166, 111, 80;
}

.base-sheet-v5 [data-category-panel="spa"],
.base-sheet-v5 [data-category="spa"] {
  --category-accent: #9b7a43;
  --category-accent-deep: #71562b;
  --category-rgb: 155, 122, 67;
}

.base-sheet-v5 [data-category-panel="carePackage"],
.base-sheet-v5 [data-category="carePackage"] {
  --category-accent: #927064;
  --category-accent-deep: #684c43;
  --category-rgb: 146, 112, 100;
}

.base-sheet-v5 .base-sidebar {
  background:
    radial-gradient(circle at 26% 8%, rgba(255, 255, 255, 0.96), transparent 29%),
    linear-gradient(180deg, #fbf7f0 0%, #f2e9dc 100%);
  box-shadow:
    inset -1px 0 rgba(104, 72, 41, 0.14),
    12px 0 30px rgba(72, 45, 25, 0.035);
}

.base-sheet-v5 .category-rail.show-all button {
  border-color: rgba(var(--category-rgb, 145, 105, 62), 0.13);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.62),
    rgba(var(--category-rgb, 145, 105, 62), 0.055)
  );
}

.base-sheet-v5 .category-rail.show-all button:not(.active) .category-art {
  color: var(--category-accent, #9b713a);
}

.base-sheet-v5 .category-rail.show-all button:not(.active):hover {
  border-color: rgba(var(--category-rgb, 145, 105, 62), 0.28);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92),
    rgba(var(--category-rgb, 145, 105, 62), 0.11)
  );
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active {
  border-color: rgba(103, 68, 37, 0.78);
  background:
    radial-gradient(circle at 18% 5%, rgba(255, 255, 255, 0.2), transparent 36%),
    linear-gradient(145deg, #8b6841 0%, #644426 52%, #482d1d 100%);
  box-shadow:
    0 15px 30px rgba(65, 40, 22, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 238, 207, 0.12);
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active::before {
  background: linear-gradient(#f5dba9, #bd8d4c);
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active .category-art,
.base-sheet-v5 .category-rail.show-all button[data-category="all"].active strong {
  color: #fffaf2;
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active small {
  color: rgba(255, 245, 229, 0.72);
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active > i {
  color: rgba(255, 244, 225, 0.88);
}

.base-sheet-v5 .category-rail.show-all button[data-category="all"].active .category-icon-all .icon-soft {
  fill: rgba(255, 248, 234, 0.12);
  stroke: rgba(255, 244, 225, 0.72);
}

.base-sheet-v5 .service-catalog.show-all {
  padding: 4px;
  border: 1px solid rgba(116, 79, 44, 0.12);
  border-radius: 19px;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.7), transparent 34%),
    linear-gradient(145deg, rgba(238, 228, 214, 0.58), rgba(250, 246, 239, 0.76));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 28px rgba(104, 69, 38, 0.025);
}

.base-sheet-v5 .service-catalog.show-all .service-category {
  border-color: rgba(var(--category-rgb), 0.24);
  background:
    linear-gradient(92deg, rgba(var(--category-rgb), 0.12), rgba(255, 254, 251, 0.94) 19%, rgba(255, 253, 249, 0.9));
  box-shadow:
    0 7px 18px rgba(61, 39, 23, 0.055),
    inset 4px 0 rgba(var(--category-rgb), 0.3),
    inset 0 1px rgba(255, 255, 255, 0.96);
}

.base-sheet-v5 .service-catalog.show-all .category-inline-title i {
  background: linear-gradient(var(--category-accent), var(--category-accent-deep));
  box-shadow: 0 3px 7px rgba(var(--category-rgb), 0.2);
}

.base-sheet-v5 .service-catalog.show-all .category-inline-title strong {
  color: var(--category-accent-deep);
}

.base-sheet-v5 .service-catalog.show-all .service-choice {
  border-color: rgba(var(--category-rgb), 0.22);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.99), rgba(var(--category-rgb), 0.055));
  box-shadow:
    0 7px 16px rgba(50, 32, 20, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.98);
}

.base-sheet-v5 .service-catalog.show-all .service-choice:hover {
  border-color: rgba(var(--category-rgb), 0.45);
  box-shadow:
    0 11px 24px rgba(var(--category-rgb), 0.12),
    inset 0 1px rgba(255, 255, 255, 0.98);
}

.base-sheet-v5 .service-catalog.show-all .service-info {
  border-top-color: rgba(var(--category-rgb), 0.2);
  background: linear-gradient(90deg, rgba(var(--category-rgb), 0.09), rgba(255, 255, 255, 0.62));
  color: var(--category-accent-deep);
}

.base-sheet-v5 .service-catalog.show-all .service-meta b {
  color: var(--category-accent-deep);
}

.base-sheet-v5 .service-focus-copy {
  display: none;
}

.base-sheet-v5 .service-catalog.category-filtered .service-category.category-focus {
  border-color: rgba(var(--category-rgb), 0.4);
  background:
    radial-gradient(circle at 92% 5%, rgba(var(--category-rgb), 0.17), transparent 31%),
    linear-gradient(145deg, rgba(var(--category-rgb), 0.075), rgba(255, 254, 251, 0.98) 37%);
  box-shadow:
    0 18px 42px rgba(67, 40, 22, 0.1),
    inset 4px 0 rgba(var(--category-rgb), 0.62),
    inset 0 1px rgba(255, 255, 255, 0.98);
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title i {
  background: linear-gradient(var(--category-accent), var(--category-accent-deep));
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title strong {
  color: var(--category-accent-deep);
}

.base-sheet-v5 .service-catalog.category-filtered .service-choice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--category-rgb), 0.27);
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.99), rgba(var(--category-rgb), 0.075));
  box-shadow:
    0 10px 24px rgba(62, 39, 23, 0.075),
    inset 0 1px rgba(255, 255, 255, 0.98);
}

.base-sheet-v5 .service-catalog.category-filtered .service-choice::before {
  position: absolute;
  z-index: 0;
  top: 46%;
  right: clamp(20px, 2.2vw, 34px);
  color: rgba(var(--category-rgb), 0.085);
  font-family: var(--display);
  font-size: clamp(72px, 7.4vw, 112px);
  font-weight: 600;
  line-height: 1;
  content: attr(data-category-symbol);
  pointer-events: none;
  transform: translateY(-50%);
}

.base-sheet-v5 .service-catalog.category-filtered .service-select,
.base-sheet-v5 .service-catalog.category-filtered .service-info {
  position: relative;
  z-index: 1;
}

.base-sheet-v5 .service-catalog.category-filtered .service-select {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: clamp(8px, 1.1vh, 13px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-focus-copy {
  display: -webkit-box;
  max-width: min(72%, 430px);
  padding: 0;
  overflow: hidden;
  color: #756a61;
  font-size: clamp(11px, 0.92vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.base-sheet-v5 .service-catalog.category-filtered .service-meta {
  align-self: end;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--category-rgb), 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(8px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-meta b {
  color: var(--category-accent-deep);
  font-weight: 600;
}

.base-sheet-v5 .service-catalog.category-filtered .service-info {
  border-top-color: rgba(var(--category-rgb), 0.22);
  background: linear-gradient(90deg, rgba(var(--category-rgb), 0.12), rgba(255, 255, 255, 0.72));
  color: var(--category-accent-deep);
}

.base-sheet-v5 .service-catalog.category-filtered .service-info::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  opacity: 0.72;
  transform: rotate(45deg);
}

.base-sheet-v5 .service-catalog.category-filtered .service-info > i {
  display: none;
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .base-sheet-v5 .service-catalog.show-all {
    padding: 3px;
    border-radius: 15px;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-select {
    gap: 7px;
    padding: 11px 13px 7px;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-focus-copy {
    max-width: 76%;
    font-size: 11px;
    line-height: 1.45;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-meta {
    min-height: 30px;
    padding: 5px 8px;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-choice::before {
    right: 16px;
    font-size: clamp(62px, 7vw, 82px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .base-sheet-v5 .service-catalog.category-filtered .service-meta {
    background: #fffdf9;
    backdrop-filter: none;
  }
}

/* v5.9.7 · 1–4 person group orders */
.party-button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(117, 76, 39, .22);
  border-radius: 13px;
  background: rgba(255, 253, 248, .78);
  color: #6d5137;
  box-shadow: 0 7px 17px rgba(58, 35, 21, .055), inset 0 1px rgba(255,255,255,.9);
}
.party-button span { font-size: 10px; font-weight: 500; }
.party-button strong { color: #44291b; font-size: 13px; font-weight: 700; }
.party-button.active {
  border-color: rgba(127, 79, 35, .48);
  background: linear-gradient(145deg, #fffaf1, #ecdfcc);
  box-shadow: 0 8px 20px rgba(80, 47, 24, .11), inset 0 1px rgba(255,255,255,.96);
}

.guest-switchbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 4px 20px;
  padding: 5px 7px 5px 13px;
  border: 1px solid rgba(132, 91, 49, .18);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,254,251,.96), rgba(241,232,218,.9));
  box-shadow: 0 8px 20px rgba(58, 36, 22, .055), inset 0 1px rgba(255,255,255,.95);
}
.guest-switch-title { display: grid; gap: 2px; min-width: 100px; }
.guest-switch-title span { color: #92734f; font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.guest-switch-title strong { color: #3e291d; font-size: 11px; font-weight: 650; white-space: nowrap; }
.guest-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.guest-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 37px;
  padding: 4px 9px;
  overflow: hidden;
  border: 1px solid rgba(125, 90, 55, .16);
  border-radius: 11px;
  background: rgba(255,255,255,.62);
  color: #6f6258;
  text-align: left;
  transition: transform 170ms var(--spring), border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}
.guest-tab > span { color: #4d3020; font-size: 12px; font-weight: 750; white-space: nowrap; }
.guest-tab > strong { overflow: hidden; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.guest-tab > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #eee5d8; color: #806949; font-size: 10px; font-style: normal; font-weight: 750; }
.guest-tab.complete > i { background: #e2efe7; color: #3e755b; }
.guest-tab.active {
  border-color: rgba(104, 64, 30, .52);
  background: linear-gradient(145deg, #fffdf8, #f1e3cf);
  box-shadow: 0 7px 16px rgba(70, 42, 22, .11), inset 3px 0 #86582f;
  transform: translateY(-1px);
}
.guest-quick-actions { display: flex; gap: 5px; }
.guest-quick-actions button {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(122, 82, 41, .2);
  border-radius: 10px;
  background: rgba(255,253,249,.78);
  color: #6f4a29;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.guest-quick-actions button:disabled { opacity: .4; }

#app.group-mode-root .customer-v5 {
  grid-template-rows: 82px 52px 54px 62px minmax(0, 1fr) 78px;
}
#app.group-mode-root .base-sheet-v5 {
  grid-template-rows: 100px 58px 52px minmax(0, 1fr) 82px;
}
#app.group-mode-root .base-sheet-v5 .base-sidebar { grid-row: 1 / 5; }
#app.group-mode-root .base-sheet-v5 > .guest-switchbar {
  grid-column: 2;
  grid-row: 3;
  margin: 0 24px 5px 30px;
}
#app.group-mode-root .base-sheet-v5 .base-catalog-layout { grid-row: 4; }
#app.group-mode-root .base-sheet-v5 .sheet-footer { grid-row: 5; }

.party-overlay { z-index: 65; }
.party-card {
  position: relative;
  width: min(720px, calc(100vw - 42px));
  padding: 30px;
  border: 1px solid rgba(127, 85, 44, .28);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0, rgba(201,172,126,.18), transparent 36%),
    linear-gradient(145deg, #fffdf9, #f4ecdf);
  box-shadow: 0 35px 100px rgba(41, 24, 14, .3), inset 0 1px rgba(255,255,255,.98);
}
.party-card > .icon-button { position: absolute; top: 18px; right: 18px; }
.party-card > .eyebrow { color: #986d3d; font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.party-card h2 { margin: 7px 0 5px; color: #372116; font: 700 29px/1.2 var(--display); }
.party-card > p { max-width: 610px; margin: 0; color: #74685e; font-size: 12px; line-height: 1.7; }
.party-count-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.party-count-choice {
  position: relative;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 84px;
  padding: 12px 15px;
  border: 1px solid rgba(126, 87, 49, .18);
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  color: #4b3223;
  text-align: left;
  box-shadow: 0 7px 18px rgba(61, 38, 23, .045);
}
.party-count-choice > span { grid-row: 1 / 3; display: grid; place-items: center; width: 47px; height: 47px; border-radius: 14px; background: #eee4d5; color: #76502f; font: 700 24px var(--display); }
.party-count-choice > strong { font-size: 14px; font-weight: 700; }
.party-count-choice > small { color: #7e7167; font-size: 10px; }
.party-count-choice > i { grid-column: 3; grid-row: 1 / 3; font-size: 17px; font-style: normal; }
.party-count-choice.selected { border-color: #8b5d32; background: linear-gradient(145deg, #fffaf1, #eadcc6); box-shadow: 0 9px 23px rgba(73, 43, 21, .12), inset 3px 0 #83542b; }
.party-count-choice.selected > span { background: linear-gradient(145deg, #9b7248, #603a21); color: #fff; }
.party-tip { display: flex; gap: 11px; margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: rgba(217, 201, 176, .28); color: #6f6358; font-size: 10px; }
.party-tip b { color: #744c29; white-space: nowrap; }

.group-confirm {
  grid-template-rows: 82px 52px auto minmax(0, 1fr) 78px !important;
}
.group-confirm-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 6px 20px 0;
  padding: 11px 17px;
  border: 1px solid rgba(125, 84, 43, .2);
  border-radius: 16px;
  background: rgba(255,253,248,.9);
  box-shadow: 0 8px 20px rgba(57, 35, 21, .05), inset 0 1px rgba(255,255,255,.96);
}
.group-confirm-heading .eyebrow { color: #967047; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.group-confirm-heading h1 { margin: 2px 0 0; color: #382319; font: 700 21px var(--display); }
.group-confirm-heading p { margin: 2px 0 0; color: #796e65; font-size: 10px; }
.group-confirm-total { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 14px; text-align: right; }
.group-confirm-total span { grid-column: 1 / 3; color: #81736a; font-size: 9px; }
.group-confirm-total strong { color: #54321f; font: 700 28px var(--display); }
.group-confirm-total small { color: #8d6a45; font-size: 9px; }
.group-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
  padding: 8px 20px 10px;
  overflow: auto;
}
.group-review-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: 11px 13px;
  border: 1px solid rgba(126, 84, 42, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,254,251,.98), rgba(247,240,230,.92));
  box-shadow: 0 9px 22px rgba(58, 35, 21, .06), inset 0 1px rgba(255,255,255,.98);
}
.group-review-card > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(126,87,48,.13); }
.group-review-card > header > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #9d754c, #624029); color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 5px 12px rgba(72,43,23,.16); }
.group-review-card > header div { min-width: 0; }
.group-review-card > header strong { display: block; overflow: hidden; color: #39251a; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.group-review-card > header small { color: #82766c; font-size: 9px; }
.group-review-card > header button { min-height: 30px; padding: 0 10px; border: 1px solid rgba(123,82,42,.2); border-radius: 9px; background: #fffdf8; color: #744b29; font-size: 9px; font-weight: 650; }
.group-service-list { display: grid; align-content: center; gap: 4px; padding: 7px 0 5px; overflow: auto; }
.group-service-list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 22px; }
.group-service-list i { color: #9a734c; font-size: 8px; font-style: normal; }
.group-service-list strong { overflow: hidden; color: #473226; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.group-service-list span { color: #75685e; font-size: 9px; }
.group-concern-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px dashed rgba(126,87,48,.15); }
.group-concern-line span { color: #92714e; font-size: 8px; }
.group-concern-line strong { overflow: hidden; color: #66584e; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.group-review-card > footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.segment.compact { gap: 5px; }
.segment.compact button { min-height: 37px; padding: 5px 8px; border-radius: 10px; }
.segment.compact button strong { font-size: 9px; }
.segment.compact button span { font-size: 8px; }
.group-guest-total { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.group-guest-total span { color: #8b7a6d; font-size: 8px; }
.group-guest-total strong { color: #573520; font: 700 20px var(--display); }
.group-confirm-footer { grid-row: 5 !important; }
.group-complete-card { width: min(720px, calc(100vw - 40px)); }
.group-complete-list { display: grid; gap: 6px; width: 100%; margin: 8px 0; }
.group-complete-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(124,83,42,.15); border-radius: 11px; background: rgba(250,245,237,.8); }
.group-complete-list span { color: #805b37; font-size: 10px; font-weight: 700; }
.group-complete-list strong { overflow: hidden; color: #49352a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.group-complete-list em { color: #54331f; font: 700 15px var(--display); font-style: normal; }
.complete-group-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; width: 100%; padding: 8px 4px; }
.complete-group-total span { color: #806f62; font-size: 10px; }
.complete-group-total strong { color: #4f301d; font: 700 24px var(--display); }

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .party-button { min-height: 36px; padding-inline: 10px; }
  .party-button span { display: none; }
  .guest-switchbar { min-height: 42px; margin: 3px 16px; padding-block: 3px; }
  .guest-switch-title { min-width: 88px; }
  .guest-tab { min-height: 32px; padding-block: 2px; }
  .guest-quick-actions button { min-height: 30px; padding-inline: 7px; }
  #app.group-mode-root .customer-v5 { grid-template-rows: 70px 48px 46px 57px minmax(0, 1fr) 70px; }
  #app.group-mode-root .base-sheet-v5 { grid-template-rows: 78px 48px 44px minmax(0, 1fr) 66px; }
  #app.group-mode-root .base-sheet-v5 > .guest-switchbar { margin: 0 14px 3px 20px; }
  .group-confirm { grid-template-rows: 70px 48px 62px minmax(0, 1fr) 70px !important; }
  .group-confirm-heading { margin: 4px 16px 0; padding: 7px 12px; }
  .group-confirm-heading h1 { font-size: 17px; }
  .group-confirm-total strong { font-size: 23px; }
  .group-review-grid { gap: 6px; padding: 6px 16px 7px; }
  .group-review-card { padding: 8px 10px; border-radius: 13px; }
  .group-review-card > header { padding-bottom: 5px; }
  .group-review-card > header > span { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
  .group-service-list { gap: 2px; padding-block: 4px 2px; }
  .group-concern-line { padding-block: 4px; }
  .segment.compact button { min-height: 32px; padding: 3px 6px; }
}

@media (max-width: 820px), (orientation: portrait) {
  .party-button { display: none; }
  .guest-switchbar { grid-template-columns: 1fr; }
  .guest-switch-title, .guest-quick-actions { display: none; }
  .guest-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app.group-mode-root .customer-v5 { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  .group-confirm { grid-template-rows: auto auto auto minmax(0, 1fr) auto !important; }
  .group-review-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}

/* v5.9.8 · compact filtered base-service cards */
.base-sheet-v5 .service-catalog.category-filtered .service-category.category-focus {
  grid-template-rows: auto minmax(0, 1fr);
}

.base-sheet-v5 .service-catalog.category-filtered .category-inline-title {
  padding-bottom: clamp(7px, 0.8vh, 10px);
  border-bottom: 1px solid rgba(var(--category-rgb), 0.14);
}

.base-sheet-v5 .service-catalog.category-filtered .service-choice {
  grid-template-rows: minmax(0, 1fr) clamp(42px, 5vh, 52px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-select {
  grid-template-columns: minmax(0, 1fr) clamp(108px, 11vw, 148px);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(11px, 1.15vw, 17px);
  row-gap: clamp(5px, 0.65vh, 8px);
  padding: clamp(13px, 1.25vw, 19px) clamp(13px, 1.35vw, 21px);
}

.base-sheet-v5 .service-catalog.category-filtered .service-name {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.base-sheet-v5 .service-catalog.category-filtered .service-focus-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: none;
  margin: 0;
}

.base-sheet-v5 .service-catalog.category-filtered .service-meta {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: start;
  gap: 7px;
  min-height: 66px;
  padding: 10px 12px;
  border-color: rgba(var(--category-rgb), 0.19);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(var(--category-rgb), 0.07));
  box-shadow:
    inset 3px 0 rgba(var(--category-rgb), 0.23),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.base-sheet-v5 .service-catalog.category-filtered .service-meta em,
.base-sheet-v5 .service-catalog.category-filtered .service-meta b {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1.25;
}

.base-sheet-v5 .service-catalog.category-filtered .service-choice::before {
  top: 50%;
  right: clamp(112px, 12.5vw, 172px);
  font-size: clamp(58px, 6.4vw, 92px);
  opacity: 0.72;
}

.base-sheet-v5 .service-catalog.category-filtered .service-info {
  min-height: clamp(42px, 5vh, 52px);
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .base-sheet-v5 .service-catalog.category-filtered .service-select {
    grid-template-columns: minmax(0, 1fr) clamp(102px, 10.7vw, 128px);
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 12px;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-meta {
    gap: 5px;
    min-height: 56px;
    padding: 7px 9px;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-choice::before {
    right: clamp(104px, 11.5vw, 138px);
    font-size: clamp(52px, 5.9vw, 72px);
  }
}

@media (max-width: 700px) {
  .base-sheet-v5 .service-catalog.category-filtered .service-select {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-name,
  .base-sheet-v5 .service-catalog.category-filtered .service-focus-copy,
  .base-sheet-v5 .service-catalog.category-filtered .service-meta {
    grid-column: 1;
    grid-row: auto;
  }

  .base-sheet-v5 .service-catalog.category-filtered .service-meta {
    align-self: start;
    width: 100%;
    min-height: 0;
  }
}

/* v5.10.0 · optional 60-second detection step */
.observation-app {
  grid-template-rows: 82px 52px minmax(0, 1fr) 78px;
  min-height: 650px;
}

.observation-app > .flow-steps { grid-row: 2; }

.observation-stage {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
  gap: clamp(12px, 1.35vw, 20px);
  min-width: 0;
  min-height: 0;
  padding: 8px 20px 10px;
}

.observation-guide,
.observation-timer-panel {
  min-width: 0;
  min-height: 0;
  border-color: rgba(120, 82, 43, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(207, 181, 143, .13), transparent 34%),
    linear-gradient(145deg, rgba(255, 254, 251, .98), rgba(247, 240, 230, .93));
  box-shadow: 0 16px 38px rgba(57, 35, 21, .09), inset 0 1px rgba(255, 255, 255, .98);
}

.observation-guide {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.05vh, 13px);
  padding: clamp(15px, 1.7vw, 24px);
  overflow: hidden;
}

.observation-guide > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(123, 84, 45, .14);
}

.observation-guide > header .section-index {
  align-self: start;
  margin-top: 1px;
}

.observation-guide .eyebrow,
.observation-timer-panel .eyebrow {
  color: #977047;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .2em;
}

.observation-guide h1 {
  margin: 3px 0 3px;
  color: #352118;
  font: 700 clamp(22px, 2.1vw, 30px)/1.2 var(--display);
  letter-spacing: .02em;
}

.observation-guide > header p,
.observation-timer-panel > p {
  margin: 0;
  color: #786c62;
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.65;
}

.observation-base-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 9px 11px;
  border: 1px solid rgba(125, 85, 45, .17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(239, 227, 208, .58));
  box-shadow: inset 4px 0 #a77a44, 0 7px 17px rgba(61, 38, 23, .05);
}

.observation-base-summary .base-strip-icon {
  width: 42px;
  height: 42px;
}

.observation-base-summary > div { min-width: 0; }
.observation-base-summary small { color: #92714e; font-size: 8.5px; font-weight: 650; letter-spacing: .05em; }
.observation-base-summary strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #3e281c;
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.observation-base-summary p { margin: 2px 0 0; color: #7c7067; font-size: 9.5px; }
.observation-base-summary > button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(126, 85, 43, .23);
  border-radius: 11px;
  background: rgba(255, 253, 248, .88);
  color: #76502d;
  font-size: 10px;
  font-weight: 650;
}

.observation-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, .8vw, 11px);
  min-height: 0;
}

.observation-point {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(11px, 1.25vw, 17px);
  overflow: hidden;
  border: 1px solid rgba(125, 86, 46, .16);
  border-radius: 15px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 7px 19px rgba(61, 38, 23, .045), inset 0 1px rgba(255, 255, 255, .9);
}

.observation-point > span {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.8vw, 52px);
  height: clamp(38px, 3.8vw, 52px);
  margin-bottom: clamp(8px, 1vh, 12px);
  border: 1px solid rgba(152, 108, 61, .28);
  border-radius: 15px;
  background: linear-gradient(145deg, #f7efe2, #e8d6bb);
  color: #845d34;
  font: 700 clamp(18px, 1.9vw, 25px) var(--display);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}

.observation-point small { display: block; color: #aa8458; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.observation-point strong { display: block; margin-top: 2px; color: #432d21; font-size: clamp(12px, 1.1vw, 15px); }
.observation-point p { margin: 6px 0 0; color: #786c63; font-size: clamp(9px, .82vw, 11px); line-height: 1.65; }
.observation-point > i {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(88, 135, 104, .12);
  color: #5c8a69;
  font-size: 10px;
  font-style: normal;
}

.observation-disclaimer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 11px;
  border-radius: 11px;
  background: rgba(231, 220, 202, .38);
  color: #7b6f65;
  font-size: 9px;
}
.observation-disclaimer b { color: #79532f; white-space: nowrap; }

.observation-timer-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(155px, 1fr) auto auto auto;
  justify-items: center;
  align-items: center;
  padding: clamp(17px, 2vw, 28px);
  text-align: center;
}

.observation-timer-panel h2 {
  margin: 5px 0 2px;
  color: #352118;
  font: 700 clamp(20px, 1.95vw, 28px)/1.2 var(--display);
}
.observation-timer-panel > p { max-width: 330px; }

.observation-ring {
  --observation-progress: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 15vw, 205px);
  aspect-ratio: 1;
  margin: 7px 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fffaf2 0 61%, transparent 62%),
    conic-gradient(#80542f 0 var(--observation-progress), rgba(179, 151, 116, .2) var(--observation-progress) 360deg);
  box-shadow: 0 16px 35px rgba(77, 47, 27, .12), inset 0 1px rgba(255, 255, 255, .96);
}

.observation-ring::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(136, 94, 51, .16);
  border-radius: 50%;
}

.observation-ring.running { animation: observation-breathe 1.8s ease-in-out infinite; }
.observation-ring > div { position: relative; z-index: 1; display: grid; justify-items: center; }
.observation-ring strong { color: #4c301f; font: 700 clamp(48px, 5.4vw, 72px)/.9 var(--display); font-variant-numeric: tabular-nums; }
.observation-ring span { margin-top: 8px; color: #9a754f; font-size: 10px; font-weight: 650; letter-spacing: .16em; }
.observation-status { color: #4d3527; font-size: 13px; font-weight: 700; }
.observation-timer-panel > small { margin-top: 2px; color: #8b7d72; font-size: 9px; }

.observation-start,
.observation-restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: min(270px, 100%);
  min-height: 46px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(103, 65, 35, .24);
  border-radius: 13px;
  background: linear-gradient(145deg, #765039, #40251a);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(67, 38, 22, .2), inset 0 1px rgba(255, 255, 255, .2);
}
.observation-restart { background: linear-gradient(145deg, #fffdf8, #eee2d1); color: #6c492b; box-shadow: 0 7px 16px rgba(67, 38, 22, .08), inset 0 1px #fff; }
.observation-restart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.observation-footer {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(250px, .65fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid rgba(120, 82, 43, .18);
  background: rgba(252, 249, 243, .93);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.observation-footer > div { min-width: 0; }
.observation-footer > div span { display: block; color: #8c7d72; font-size: 9px; }
.observation-footer > div strong { display: block; margin-top: 2px; color: #3c281d; font-size: 15px; }
.observation-skip {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(126, 86, 47, .22);
  border-radius: 14px;
  background: rgba(255, 253, 248, .88);
  color: #765435;
  font-size: 11px;
  font-weight: 650;
}
.observation-footer .solid-button { min-height: 50px; border-radius: 15px; font-size: 13px; }

#app.group-mode-root .observation-app {
  grid-template-rows: 82px 52px 54px minmax(0, 1fr) 78px;
}
#app.group-mode-root .observation-app > .guest-switchbar { grid-row: 3; }
#app.group-mode-root .observation-app > .observation-stage { grid-row: 4; }
#app.group-mode-root .observation-app > .observation-footer { grid-row: 5; }

@keyframes observation-breathe {
  0%, 100% { box-shadow: 0 16px 35px rgba(77, 47, 27, .12), 0 0 0 0 rgba(154, 111, 66, .12); }
  50% { box-shadow: 0 18px 39px rgba(77, 47, 27, .16), 0 0 0 10px rgba(154, 111, 66, 0); }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .observation-app { grid-template-rows: 70px 48px minmax(0, 1fr) 70px; min-height: 620px; }
  .observation-stage { gap: 10px; padding: 6px 16px 7px; }
  .observation-guide { gap: 7px; padding: 12px 14px; }
  .observation-guide > header { gap: 10px; padding-bottom: 7px; }
  .observation-guide h1 { font-size: 21px; }
  .observation-base-summary { min-height: 54px; padding-block: 6px; }
  .observation-base-summary .base-strip-icon { width: 35px; height: 35px; }
  .observation-point { padding: 9px 10px; }
  .observation-point > span { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; font-size: 17px; }
  .observation-point p { margin-top: 3px; font-size: 8.5px; line-height: 1.5; }
  .observation-timer-panel { grid-template-rows: auto auto auto minmax(125px, 1fr) auto auto auto; padding: 13px 16px; }
  .observation-timer-panel h2 { font-size: 20px; }
  .observation-ring { width: clamp(128px, 13vw, 165px); }
  .observation-ring strong { font-size: 48px; }
  .observation-start, .observation-restart { min-height: 40px; margin-top: 6px; }
  .observation-footer { padding-block: 8px; }
  #app.group-mode-root .observation-app { grid-template-rows: 70px 48px 46px minmax(0, 1fr) 70px; }
}

@media (max-width: 820px), (orientation: portrait) {
  .observation-app,
  #app.group-mode-root .observation-app { grid-template-rows: auto auto auto auto auto; }
  .observation-stage,
  #app.group-mode-root .observation-app > .observation-stage {
    grid-row: auto;
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .observation-footer,
  #app.group-mode-root .observation-app > .observation-footer {
    grid-row: auto;
    grid-template-columns: 1fr;
  }
  .observation-points { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .observation-ring.running { animation: none; }
}

/* v5.10.0 · 60-second detection question panel */
.observation-guide > header {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.detection-selected-count {
  align-self: center;
  min-width: 92px;
  padding: 8px 10px;
  border: 1px solid rgba(131, 89, 48, .17);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(236, 223, 202, .66));
  color: #826344;
  font-size: 9px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255, 255, 255, .94);
}

.detection-selected-count b {
  color: #51321f;
  font-size: 13px;
  font-weight: 750;
}

.detection-problem-groups {
  display: grid;
  align-content: start;
  gap: clamp(6px, .72vh, 9px);
  min-width: 0;
  min-height: 0;
  padding-right: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 89, 51, .28) transparent;
}

.detection-problem-group {
  display: grid;
  grid-template-columns: clamp(105px, 10.5vw, 138px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(6px, .7vw, 10px);
  padding: clamp(6px, .72vw, 9px);
  border: 1px solid rgba(126, 86, 46, .14);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(236, 222, 199, .46), rgba(255, 255, 255, .7) 27%),
    rgba(255, 255, 255, .58);
  box-shadow: 0 6px 15px rgba(61, 38, 23, .04), inset 0 1px rgba(255, 255, 255, .92);
}

.detection-problem-group > header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 1px 7px;
  min-width: 0;
  padding: 2px 5px 2px 2px;
  border-right: 1px solid rgba(125, 87, 49, .13);
}

.detection-problem-group .group-line-icon {
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 252, 246, .7);
  color: #9a744b;
}

.detection-problem-group .group-line-icon svg {
  width: 25px;
  height: 25px;
}

.detection-problem-group > header strong {
  align-self: end;
  overflow: hidden;
  color: #493022;
  font-size: clamp(10px, .92vw, 12px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detection-problem-group > header small {
  align-self: start;
  color: #9a897b;
  font-size: 8px;
}

.detection-problem-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, .55vw, 7px);
  min-width: 0;
}

.detection-problem-chip {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: clamp(33px, 3.5vh, 40px);
  padding: 5px 22px 5px 7px;
  border: 1px solid rgba(129, 91, 55, .18);
  border-radius: 10px;
  background: rgba(255, 254, 251, .84);
  color: #62564d;
  font-size: clamp(9px, .83vw, 11px);
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 3px 9px rgba(62, 39, 24, .035), inset 0 1px rgba(255, 255, 255, .94);
  transition: transform 180ms var(--spring), border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.detection-problem-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.detection-problem-chip i {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(145deg, #a77b43, #674226);
  color: #fff;
  font-size: 8px;
  font-style: normal;
  box-shadow: 0 3px 8px rgba(66, 39, 22, .2);
  transform: translateY(-50%);
}

.detection-problem-chip.selected {
  border-color: #a77c45;
  background: linear-gradient(145deg, #fffdf7, #ead9bc);
  color: #4d2f1e;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(170, 128, 70, .18), 0 6px 14px rgba(65, 40, 23, .08);
}

.detection-problem-chip:active {
  transform: scale(.97);
}

@media (hover: hover) {
  .detection-problem-chip:hover {
    border-color: rgba(151, 105, 60, .38);
    background: #fffdf8;
    color: #4d3324;
    transform: translateY(-1px);
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .detection-selected-count { min-width: 82px; padding: 6px 8px; }
  .detection-problem-groups { gap: 5px; }
  .detection-problem-group {
    grid-template-columns: clamp(98px, 10vw, 122px) minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
    border-radius: 11px;
  }
  .detection-problem-group > header {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 1px 5px;
  }
  .detection-problem-group .group-line-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }
  .detection-problem-group .group-line-icon svg { width: 22px; height: 22px; }
  .detection-problem-options { gap: 4px; }
  .detection-problem-chip {
    min-height: 31px;
    padding-block: 4px;
    font-size: 8.5px;
  }
}

@media (max-width: 820px), (orientation: portrait) {
  .observation-guide > header { grid-template-columns: auto minmax(0, 1fr); }
  .detection-selected-count {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .detection-problem-group {
    grid-template-columns: 1fr;
  }
  .detection-problem-group > header {
    border-right: 0;
    border-bottom: 1px solid rgba(125, 87, 49, .13);
  }
  .detection-problem-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v5.10.4 · enlarge the detection-question area and mirror the concern layout */
@media (orientation: landscape) and (min-width: 821px) {
  .observation-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(292px, .66fr);
  }

  .detection-problem-groups {
    grid-auto-rows: max-content;
    align-content: start;
    gap: clamp(8px, .88vh, 11px);
    padding: 2px 4px 3px 2px;
  }

  .detection-problem-group {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: clamp(7px, .78vh, 10px);
    padding: clamp(8px, .9vw, 12px);
    overflow: hidden;
    border-color: rgba(126, 86, 46, .19);
    border-radius: 16px;
    background:
      radial-gradient(circle at 100% 0, rgba(208, 183, 148, .16), transparent 34%),
      linear-gradient(150deg, rgba(255, 255, 255, .94), rgba(247, 239, 227, .78));
    box-shadow:
      0 9px 22px rgba(61, 38, 23, .065),
      inset 0 1px rgba(255, 255, 255, .98);
  }

  .detection-problem-group::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #b88c50, #76502f);
    box-shadow: 1px 0 rgba(255, 255, 255, .52);
  }

  .detection-problem-group > header {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    padding: 0 3px clamp(6px, .68vh, 9px);
    border-right: 0;
    border-bottom: 1px solid rgba(125, 87, 49, .14);
  }

  .detection-problem-group .group-line-icon {
    grid-row: auto;
    width: 36px;
    height: 34px;
    border: 1px solid rgba(161, 116, 67, .15);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(237, 224, 203, .75));
    box-shadow: inset 0 1px rgba(255, 255, 255, .98);
  }

  .detection-problem-group .group-line-icon svg {
    width: 28px;
    height: 28px;
  }

  .detection-problem-group > header strong {
    align-self: center;
    font-size: clamp(12px, 1.02vw, 14px);
    letter-spacing: .02em;
  }

  .detection-problem-group > header small {
    align-self: center;
    min-width: 38px;
    padding: 4px 8px;
    border: 1px solid rgba(137, 94, 53, .13);
    border-radius: 999px;
    background: rgba(255, 253, 248, .78);
    color: #90785f;
    font-size: 8.5px;
    font-weight: 650;
    text-align: center;
  }

  .detection-problem-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, .65vw, 9px);
  }

  .detection-problem-chip {
    min-height: clamp(40px, 4.35vh, 49px);
    padding: 7px 27px 7px 10px;
    border-color: rgba(126, 88, 51, .2);
    border-radius: 11px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(251, 247, 239, .96));
    color: #514239;
    font-size: clamp(10.5px, .94vw, 13px);
    font-weight: 550;
    box-shadow:
      0 5px 12px rgba(58, 35, 21, .05),
      inset 0 1px rgba(255, 255, 255, .98);
  }

  .detection-problem-chip i {
    right: 8px;
    width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .detection-problem-chip.selected {
    border-color: #a8793e;
    background:
      radial-gradient(circle at 100% 0, rgba(192, 150, 92, .18), transparent 42%),
      linear-gradient(145deg, #fffdf7, #ead8b9);
    box-shadow:
      inset 0 0 0 1px rgba(170, 128, 70, .2),
      0 8px 17px rgba(65, 40, 23, .1);
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .observation-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(288px, .66fr);
  }

  .observation-guide {
    gap: 6px;
    padding: 10px 12px;
  }

  .detection-problem-groups {
    gap: 5px;
    padding-top: 1px;
  }

  .detection-problem-group {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px;
    padding: 6px 7px;
    border-radius: 12px;
  }

  .detection-problem-group > header {
    grid-template-columns: 29px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    gap: 6px;
    padding: 0 2px 5px;
  }

  .detection-problem-group .group-line-icon {
    grid-row: auto;
    width: 29px;
    height: 28px;
    border-radius: 8px;
  }

  .detection-problem-group .group-line-icon svg {
    width: 23px;
    height: 23px;
  }

  .detection-problem-group > header strong {
    align-self: center;
    font-size: 10.5px;
  }

  .detection-problem-group > header small {
    align-self: center;
    min-width: 32px;
    padding: 3px 6px;
    font-size: 7.5px;
  }

  .detection-problem-options {
    gap: 4px;
  }

  .detection-problem-chip {
    min-height: 34px;
    padding: 5px 23px 5px 7px;
    border-radius: 9px;
    font-size: 9.5px;
  }

  .detection-problem-chip i {
    right: 6px;
    width: 15px;
    height: 15px;
    font-size: 8px;
  }
}

/* v5.10.5 · clearer detection copy and adaptive question capacity */
@media (orientation: landscape) and (min-width: 821px) {
  .observation-guide h1 {
    font-size: clamp(25px, 2.25vw, 34px);
    letter-spacing: 0;
  }

  .detection-problem-groups {
    grid-auto-rows: max-content;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .detection-problem-group > header strong {
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 700;
  }

  .detection-problem-group > header small {
    font-size: 10px;
  }

  .detection-problem-options {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .detection-problem-chip {
    min-height: clamp(43px, 4.6vh, 52px);
    padding: 8px 29px 8px 11px;
    font-size: clamp(13px, 1.08vw, 15px);
    font-weight: 600;
    line-height: 1.35;
  }

  .detection-problem-chip span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .observation-guide h1 {
    font-size: 23px;
  }

  .detection-problem-group > header strong {
    font-size: 12.5px;
  }

  .detection-problem-group > header small {
    font-size: 8.5px;
  }

  .detection-problem-options {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 5px;
  }

  .detection-problem-chip {
    min-height: 38px;
    padding: 5px 24px 5px 8px;
    font-size: 12px;
    line-height: 1.28;
  }
}

/* v5.11.0 · headquarters-defined improvement groups */
.customer-v5 .custom-group-symbol,
.detection-problem-group .custom-group-symbol {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(165, 122, 60, .24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(235, 222, 199, .74));
  color: #916b34;
  font-family: "Han Serif", "Songti SC", "STSong", serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
}

.customer-v5 .concern-groups:not(.concern-group-count-3) {
  grid-template-rows: none;
  grid-auto-rows: minmax(74px, max-content);
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.customer-v5 .concern-groups.concern-group-count-1 {
  grid-auto-rows: minmax(150px, 1fr);
}

.customer-v5 .concern-groups.concern-group-count-2 {
  grid-auto-rows: minmax(102px, 1fr);
}

@media (orientation: landscape) and (max-height: 820px) {
  .customer-v5 .concern-groups:not(.concern-group-count-3) {
    grid-auto-rows: minmax(62px, max-content);
  }

  .customer-v5 .custom-group-symbol,
  .detection-problem-group .custom-group-symbol {
    border-radius: 8px;
    font-size: 15px;
  }
}

/* v5.11.2 · 7+ care items automatically fit the iPad landscape canvas */
.customer-v5 .care-grid.care-grid-many {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, .72vw, 10px);
}

.customer-v5 .care-grid.care-grid-many .care-card {
  gap: 3px;
  padding: clamp(7px, .7vw, 10px);
  border-radius: 14px;
}

.customer-v5 .care-grid.care-grid-many .care-head {
  grid-template-columns: clamp(42px, 3.8vw, 52px) minmax(0, 1fr) auto;
  gap: 7px;
}

.customer-v5 .care-grid.care-grid-many .care-symbol {
  width: clamp(42px, 3.8vw, 52px);
  height: clamp(42px, 3.8vw, 52px);
  border-radius: 13px;
  font-size: clamp(28px, 2.7vw, 35px);
}

.customer-v5 .care-grid.care-grid-many .care-title {
  gap: 1px;
  padding-right: 20px;
}

.customer-v5 .care-grid.care-grid-many .care-title strong {
  font-size: clamp(12px, 1.02vw, 15px);
  line-height: 1.16;
  -webkit-line-clamp: 1;
}

.customer-v5 .care-grid.care-grid-many .care-title > span {
  overflow: hidden;
  font-size: clamp(8.5px, .72vw, 10px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-v5 .care-grid.care-grid-many .recommend-badge {
  margin-right: 21px;
  padding: 3px 5px;
  font-size: 7px;
}

.customer-v5 .care-grid.care-grid-many .match-copy {
  font-size: clamp(8.5px, .72vw, 10px);
  line-height: 1.22;
}

.customer-v5 .care-grid.care-grid-many .care-bottom {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: end;
  gap: 4px;
}

.customer-v5 .care-grid.care-grid-many .care-meta {
  justify-content: space-between;
  gap: 4px;
}

.customer-v5 .care-grid.care-grid-many .care-meta span {
  font-size: 9px;
}

.customer-v5 .care-grid.care-grid-many .care-meta strong {
  font-size: clamp(17px, 1.5vw, 21px);
}

.customer-v5 .care-grid.care-grid-many .care-actions {
  grid-template-columns: minmax(48px, .78fr) minmax(68px, 1.22fr);
  gap: 5px;
}

.customer-v5 .care-grid.care-grid-many .detail-button,
.customer-v5 .care-grid.care-grid-many .add-button {
  min-height: 35px;
  padding-inline: 5px;
  border-radius: 9px;
  font-size: clamp(9px, .78vw, 11px);
}

.customer-v5 .care-grid.care-grid-scroll {
  grid-template-rows: none;
  grid-auto-rows: minmax(142px, 1fr);
  align-content: start;
  padding-right: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .customer-v5 .care-grid.care-grid-many {
    gap: 5px;
  }

  .customer-v5 .care-grid.care-grid-many .care-card {
    padding: 6px;
  }

  .customer-v5 .care-grid.care-grid-many .care-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .customer-v5 .care-grid.care-grid-many .care-symbol {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 26px;
  }

  .customer-v5 .care-grid.care-grid-many .match-copy {
    font-size: 8.5px;
  }

  .customer-v5 .care-grid.care-grid-many .detail-button,
  .customer-v5 .care-grid.care-grid-many .add-button {
    min-height: 32px;
  }
}

/* v5.11.3 · keep headquarters-defined improvement options from overlapping
   on the 9.7-inch iPad when one of the three groups wraps onto extra rows. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) {
  .customer-v5 .concern-panel .section-heading {
    min-height: 68px;
  }

  .customer-v5 .concern-panel .section-heading > small {
    margin-top: 33px;
    padding: 6px 8px;
  }

  .customer-v5 .concern-groups.concern-group-count-3 {
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .customer-v5 .concern-groups.concern-group-count-3 .concern-group {
    grid-template-rows: auto auto;
    gap: 3px;
    min-height: max-content;
    padding: 2px 4px;
  }

  .customer-v5 .concern-groups.concern-group-count-3 .concern-options {
    grid-auto-rows: minmax(44px, auto);
    align-content: start;
    gap: 5px;
  }

  .customer-v5 .concern-groups.concern-group-count-3 .concern-chip {
    height: auto;
    padding: 5px 7px;
  }
}

/* v5.11.9 · final grid placement after legacy iPad precision rules */
.customer-v5.inquiry-app,
.customer-v5.detection-choice-app {
  grid-template-rows: 82px 52px minmax(0, 1fr) 78px;
  min-height: 650px;
}
.customer-v5.inquiry-app > .inquiry-stage,
.customer-v5.detection-choice-app > .detection-choice-stage { grid-row: 3; }
.customer-v5.inquiry-app > .inquiry-footer,
.customer-v5.detection-choice-app > .detection-choice-footer { grid-row: 4; }

#app.group-mode-root .customer-v5.inquiry-app,
#app.group-mode-root .customer-v5.detection-choice-app {
  grid-template-rows: 82px 52px 54px minmax(0, 1fr) 78px;
}
#app.group-mode-root .customer-v5.inquiry-app > .guest-switchbar,
#app.group-mode-root .customer-v5.detection-choice-app > .guest-switchbar { grid-row: 3; }
#app.group-mode-root .customer-v5.inquiry-app > .inquiry-stage,
#app.group-mode-root .customer-v5.detection-choice-app > .detection-choice-stage { grid-row: 4; }
#app.group-mode-root .customer-v5.inquiry-app > .inquiry-footer,
#app.group-mode-root .customer-v5.detection-choice-app > .detection-choice-footer { grid-row: 5; }

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .customer-v5.inquiry-app,
  .customer-v5.detection-choice-app {
    grid-template-rows: 70px 48px minmax(0, 1fr) 70px;
    min-height: 620px;
  }
  #app.group-mode-root .customer-v5.inquiry-app,
  #app.group-mode-root .customer-v5.detection-choice-app {
    grid-template-rows: 70px 48px 46px minmax(0, 1fr) 70px;
  }
}

@media (max-width: 820px), (orientation: portrait) {
  .customer-v5.inquiry-app,
  .customer-v5.detection-choice-app,
  #app.group-mode-root .customer-v5.inquiry-app,
  #app.group-mode-root .customer-v5.detection-choice-app {
    grid-template-rows: auto auto auto auto auto;
  }
  .customer-v5.inquiry-app > .inquiry-stage,
  .customer-v5.detection-choice-app > .detection-choice-stage,
  #app.group-mode-root .customer-v5.inquiry-app > .inquiry-stage,
  #app.group-mode-root .customer-v5.detection-choice-app > .detection-choice-stage,
  .customer-v5.inquiry-app > .inquiry-footer,
  .customer-v5.detection-choice-app > .detection-choice-footer,
  #app.group-mode-root .customer-v5.inquiry-app > .inquiry-footer,
  #app.group-mode-root .customer-v5.detection-choice-app > .detection-choice-footer {
    grid-row: auto;
  }
}