/* Booking and owner pages. Builds on the site's styles.css and its --primary / --accent colors. */
.booking-page { background: #f7f7f5; }
.bk-back { font-weight: 600; text-decoration: none; color: var(--primary); }
.bk-back:hover { text-decoration: underline; }
.bk-main { padding: 36px 0 80px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.bk-progress { list-style: none; display: flex; gap: 8px; margin: 0 auto 28px; max-width: 980px; counter-reset: none; }
.bk-progress li { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: #8a8f88;
  padding-bottom: 12px; border-bottom: 3px solid #dfe1dd; }
.bk-progress li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dfe1dd; color: #fff; font-size: .85rem; flex: none; }
.bk-progress li.is-current { color: var(--primary); border-color: var(--accent); }
.bk-progress li.is-current span { background: var(--accent); }
.bk-progress li.is-done { color: var(--primary); border-color: var(--primary); }
.bk-progress li.is-done span { background: var(--primary); }

.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; max-width: 980px; margin: 0 auto; }
.bk-panel { background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); min-width: 0; }
.bk-panel h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); color: var(--primary); margin-bottom: 6px; }
.bk-sub { color: var(--muted, #5d6270); margin-bottom: 20px; }
.bk-small { color: #6b706a; font-size: .9rem; margin-top: 16px; }
.bk-small a { color: var(--accent-text); font-weight: 600; }
.bk-center { text-align: center; justify-content: center; }

.bk-services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.bk-service { text-align: left; font: inherit; background: #fff; border: 1.5px solid #e2e4e0; border-radius: 14px; padding: 16px 18px; cursor: pointer;
  display: grid; gap: 4px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bk-service:hover { border-color: var(--accent); transform: translateY(-2px); }
.bk-service.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.bk-svc-name { font-weight: 700; font-size: 1.05rem; color: var(--primary); }
.bk-svc-note { color: #6b706a; font-size: .9rem; }
.bk-svc-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: .92rem; color: #6b706a; }
.bk-svc-meta b { color: var(--ink, #1b1d22); }

.bk-days-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: thin; flex: 1; }
.bk-scroll { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e4e0; background: #fff; font-size: 1.3rem; cursor: pointer; color: var(--primary); }
.bk-day { flex: none; scroll-snap-align: start; width: 64px; padding: 10px 0; border-radius: 14px; border: 1.5px solid #e2e4e0; background: #fff;
  font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 1px; color: var(--primary); }
.bk-day small { font-size: .72rem; color: #8a8f88; text-transform: uppercase; letter-spacing: .04em; }
.bk-day b { font-size: 1.25rem; }
.bk-day:hover { border-color: var(--accent); }
.bk-day.is-selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.bk-day.is-selected small { color: rgba(255,255,255,.75); }

.bk-day-label { font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.bk-time-group { margin-bottom: 16px; }
.bk-time-group > p { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #8a8f88; margin-bottom: 8px; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bk-time { font: inherit; font-weight: 600; padding: 11px 0; border-radius: 12px; border: 1.5px solid #e2e4e0; background: #fff; cursor: pointer; color: var(--primary); }
.bk-time:hover { border-color: var(--accent); }
.bk-time.is-selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bk-none { background: #f7f7f5; border-radius: 12px; padding: 18px; color: #6b706a; }

.bk-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.bk-form { display: grid; gap: 14px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.bk-form input, .bk-form textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: 12px 14px; border: 1.5px solid #d6d8de; border-radius: 12px; width: 100%; }
.bk-form input:focus, .bk-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.bk-opt { font-weight: 400; color: #8a8f88; }
.bk-error { color: #b42318; font-weight: 600; }

.bk-review { display: grid; gap: 0; border: 1px solid #e8e9e6; border-radius: 14px; overflow: hidden; margin-top: 16px; }
.bk-review div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid #e8e9e6; }
.bk-review div:first-child { border-top: 0; }
.bk-review dt { color: #8a8f88; font-weight: 600; font-size: .9rem; }
.bk-review dd { font-weight: 600; overflow-wrap: anywhere; }

.bk-done { text-align: center; padding: 20px 0; }
.bk-check { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 2.2rem; display: grid; place-items: center; margin: 0 auto 18px; }

.bk-summary { position: sticky; top: 96px; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); border-top: 5px solid var(--accent); }
.bk-sum-title { font-family: var(--display); font-size: 1.3rem; color: var(--primary); margin-bottom: 12px; }
.bk-summary dl { display: grid; gap: 10px; }
.bk-summary dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #8a8f88; font-weight: 600; }
.bk-summary dd { font-weight: 600; color: var(--ink, #1b1d22); }
.bk-where { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e8e9e6; font-size: .9rem; color: #6b706a; }

/* Owner view */
.ow-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ow-head h1 { color: var(--primary); font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.ow-note { background: var(--tint); border-radius: 14px; padding: 14px 18px; color: var(--primary); margin-bottom: 22px; font-size: .95rem; }
.ow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.ow-stats div { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.25); }
.ow-stats small { display: block; color: #8a8f88; font-size: .82rem; font-weight: 600; }
.ow-stats b { font-size: 1.6rem; color: var(--primary); }
.ow-day { margin-bottom: 22px; }
.ow-day > h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: #6b706a; margin-bottom: 8px; letter-spacing: 0; }
.ow-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #fff; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 8px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.25); }
.ow-item.is-new { box-shadow: 0 0 0 2px var(--accent), 0 6px 20px -14px rgba(0,0,0,.25); }
.ow-item.is-cancelled { opacity: .5; }
.ow-time { font-weight: 700; color: var(--primary); }
.ow-time small { display: block; font-weight: 400; color: #8a8f88; font-size: .8rem; }
.ow-who b { display: block; }
.ow-who span { color: #6b706a; font-size: .9rem; }
.ow-who a { color: var(--accent-text); font-weight: 600; text-decoration: none; margin-right: 12px; }
.ow-who em { display: block; font-style: normal; color: #6b706a; font-size: .88rem; margin-top: 4px; }
.ow-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; margin-left: 8px; vertical-align: 2px; }
.ow-item button { font: inherit; font-size: .88rem; font-weight: 600; background: none; border: 1px solid #e2e4e0; border-radius: 10px; padding: 7px 12px; cursor: pointer; color: #6b706a; }
.ow-item button:hover { border-color: #b42318; color: #b42318; }
.ow-empty { background: #fff; border-radius: 14px; padding: 28px; text-align: center; color: #6b706a; }

/* Preview helpers */
.bk-demo-next { margin: 22px auto 0; max-width: 520px; background: var(--tint); border-radius: 14px; padding: 16px 20px; display: grid; gap: 6px; text-align: left; }
.bk-demo-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b706a; }
.bk-demo-next a { color: var(--primary); font-weight: 600; text-decoration: none; }
.bk-demo-next a:hover { text-decoration: underline; }
.bk-status { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; background: #e3f6ec; color: #166b43; margin-bottom: 10px; }
.bk-status.is-cancelled { background: #fdecea; color: #b42318; }

/* Demo inbox */
.ib-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid #e2e4e0; }
.ib-tabs button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; color: #6b706a; margin-bottom: -1px; }
.ib-tabs button[aria-selected="true"] { color: var(--primary); border-color: var(--accent); }
.ib-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.ib-list { display: grid; gap: 8px; }
.ib-item { text-align: left; font: inherit; background: #fff; border: 1.5px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.25); }
.ib-item.is-selected { border-color: var(--primary); }
.ib-item b { font-size: .95rem; color: var(--ink, #1b1d22); }
.ib-to, .ib-item small { font-size: .8rem; color: #8a8f88; }
.ib-view { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); overflow: hidden; }
.ib-meta { padding: 16px 22px; border-bottom: 1px solid #e8e9e6; display: grid; gap: 4px; font-size: .9rem; }
.ib-meta span { display: inline-block; width: 70px; color: #8a8f88; }
.ib-email { padding: 26px 28px 30px; background: #fbfbfa; }
.em-brand { font-family: var(--display); font-size: 1.15rem; color: var(--primary); padding-bottom: 14px; border-bottom: 2px solid var(--accent); margin-bottom: 18px; }
.em-title { font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--primary); margin-bottom: 10px; }
.ib-email p { margin-bottom: 12px; }
.em-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; background: #fff; border-radius: 12px; overflow: hidden; }
.em-table td { padding: 10px 14px; border-bottom: 1px solid #eee; vertical-align: top; }
.em-table td:first-child { color: #8a8f88; width: 90px; font-size: .9rem; }
.em-table tr:last-child td { border-bottom: 0; }
.em-btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; padding: 11px 22px; border-radius: 999px; }
.em-small { font-size: .88rem; color: #6b706a; }
.em-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e8e9e6; font-size: .8rem; color: #8a8f88; }

/* Owner extras */
.ow-signin { max-width: 460px; margin: 20px auto; }
.ow-signout { font: inherit; background: none; border: 0; cursor: pointer; }
.ow-h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--primary); margin-bottom: 6px; }
.ow-block { background: repeating-linear-gradient(135deg, #fff 0 12px, #f4f5f3 12px 24px); }
.ow-block .ow-time { color: #6b706a; }
.ow-check { display: flex !important; align-items: center; gap: 10px; font-weight: 600; }
.ow-check input { width: 18px !important; height: 18px; accent-color: var(--primary); }
.ow-badge-soft { background: var(--tint); color: var(--primary); }

/* Team: the "who would you like?" row on the booking page */
.bk-staff-wrap { margin-bottom: 20px; }
.bk-staff-label { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #8a8f88; margin-bottom: 8px; }
.bk-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bk-person { --person: var(--primary); font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1.5px solid #e2e4e0; background: #fff; cursor: pointer; transition: border-color .15s; }
.bk-person:hover { border-color: var(--person); }
.bk-person.is-selected { border-color: var(--person); box-shadow: 0 0 0 2px var(--person); }
.bk-person b { display: block; font-size: .95rem; color: var(--ink, #1b1d22); }
.bk-person small { display: block; font-size: .78rem; color: #8a8f88; line-height: 1.3; }
.bk-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--person, var(--primary)); color: #fff; font-weight: 700; font-size: .85rem; }
.bk-avatar-any, .bk-person .bk-avatar-any { background: var(--tint, #eef0ec); color: var(--primary); }

/* Owner: team colors */
.ow-item.has-staff { border-left: 6px solid var(--person); }
.ow-assign { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .85rem; color: #6b706a; font-weight: 600; }
.ow-assign select { font: inherit; font-size: .88rem; padding: 5px 8px; border-radius: 8px; border: 1px solid #d6d8de; background: #fff; color: var(--ink, #1b1d22); }
.ow-any { display: block; color: #8a8f88; font-size: .8rem; margin-top: 2px; }
.ow-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ow-filter button { --person: var(--primary); font: inherit; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 999px; border: 1.5px solid #e2e4e0; background: #fff; cursor: pointer; color: #4b5049; }
.ow-filter button.is-on { border-color: var(--person); background: color-mix(in srgb, var(--person) 12%, #fff); color: var(--ink, #1b1d22); }
.ow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--person); display: inline-block; }
.ow-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ow-tabs button { white-space: nowrap; }

/* Owner: day view */
.ow-daynav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ow-daynav input { font: inherit; padding: 7px 10px; border: 1.5px solid #d6d8de; border-radius: 10px; }
.ow-daynav .bk-scroll { display: inline-block; }
.ow-cal-wrap { overflow-x: auto; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); padding: 14px 14px 18px 0; }
.ow-cal { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(52px + var(--cols) * 150px); }
.ow-cal-times { position: relative; margin-top: 52px; }
.ow-cal-times span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .72rem; color: #8a8f88; white-space: nowrap; }
.ow-cal-col { --person: #9aa0a6; border-left: 1px solid #eceeea; }
.ow-cal-head { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 3px solid var(--person); }
.ow-cal-head .bk-avatar { width: 30px; height: 30px; font-size: .75rem; background: var(--person); }
.ow-cal-head b { font-size: .92rem; color: var(--ink, #1b1d22); }
.ow-cal-body { position: relative; }
.ow-cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f0f1ee; }
.ow-cal-col.is-off .ow-cal-body { background: repeating-linear-gradient(135deg, #fafaf9 0 10px, #f2f3f1 10px 20px); }
.ow-cal-col.is-off .ow-cal-head { opacity: .55; }
.ow-cal-offnote { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: .82rem; font-weight: 600; color: #8a8f88; }
.ow-cal-appt { position: absolute; left: 5px; right: 5px; border-radius: 8px; padding: 4px 8px; overflow: hidden; font-size: .78rem; line-height: 1.25;
  background: color-mix(in srgb, var(--person) 16%, #fff); border-left: 4px solid var(--person); color: var(--ink, #1b1d22); }
.ow-cal-appt b { display: block; font-size: .8rem; }
.ow-cal-appt span { color: #4b5049; }
.ow-cal-appt.is-new { box-shadow: 0 0 0 2px var(--accent); }
.ow-cal-block { position: absolute; left: 5px; right: 5px; border-radius: 8px; padding: 4px 8px; font-size: .76rem; font-weight: 600; color: #6b706a;
  background: repeating-linear-gradient(135deg, #f4f5f3 0 8px, #e9eae7 8px 16px); overflow: hidden; }

/* Owner: settings */
.st-form { gap: 18px; }
.st-section { padding: 26px 28px; }
.st-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; flex-wrap: wrap; }
.st-head .bk-sub { margin-bottom: 14px; max-width: 560px; }
.st-toggle { margin-bottom: 14px; font-weight: 600; }
.st-team, .st-services { display: grid; gap: 12px; }
.st-person { --person: #9aa0a6; border: 1.5px solid #e6e7e4; border-left: 6px solid var(--person); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; }
.st-person-top { display: flex; gap: 14px; align-items: end; }
.st-avatar { width: 44px; height: 44px; background: var(--person); font-size: 1rem; margin-bottom: 4px; }
.st-grow { flex: 1; min-width: 0; }
.st-line { display: flex; gap: 12px; align-items: start; }
.st-label { flex: none; width: 54px; padding-top: 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a8f88; }
.st-swatches, .st-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-swatch { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d6d8de; cursor: pointer; }
.st-swatch.is-on { box-shadow: 0 0 0 2px var(--ink, #1b1d22); }
.st-custom { display: inline-flex !important; align-items: center; gap: 6px; font-size: .82rem !important; color: #6b706a; margin-left: 4px; cursor: pointer; }
.st-custom input { width: 30px !important; height: 30px; padding: 0 !important; border: 0 !important; background: none; cursor: pointer; }
.st-chip { display: inline-flex !important; align-items: center; gap: 6px; font-size: .86rem !important; font-weight: 600 !important; padding: 5px 11px;
  border: 1.5px solid #e2e4e0; border-radius: 999px; cursor: pointer; background: #fff; }
.st-chip input { width: 15px !important; height: 15px; padding: 0 !important; accent-color: var(--person); }
.st-chip:has(input:checked) { border-color: var(--person); background: color-mix(in srgb, var(--person) 10%, #fff); }
.st-chip.is-muted { opacity: .5; }
.st-remove { font: inherit; font-size: .85rem; font-weight: 600; background: none; border: 1px solid #e2e4e0; border-radius: 10px; padding: 8px 12px; cursor: pointer; color: #6b706a; margin-bottom: 4px; }
.st-remove:hover { border-color: #b42318; color: #b42318; }
.st-service { display: grid; grid-template-columns: minmax(0, 1.4fr) 84px 110px 120px minmax(0, 1.6fr) auto; gap: 10px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid #eef0ec; }
.st-service:last-child { border-bottom: 0; padding-bottom: 0; }
.st-form select { font: inherit; font-weight: 400; font-size: 1rem; padding: 11px 12px; border: 1.5px solid #d6d8de; border-radius: 12px; background: #fff; width: 100%; }
.st-hours { display: grid; gap: 8px; max-width: 460px; }
.st-hour { display: grid; grid-template-columns: 90px 1fr auto 1fr; gap: 10px; align-items: center; }
.st-hour input[type=time] { padding: 8px 10px; }
.st-closed { grid-column: 2 / -1; color: #8a8f88; font-size: .92rem; }
.st-rules { grid-template-columns: repeat(3, 1fr); }
.st-bar { position: sticky; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 10px 34px -12px rgba(0,0,0,.35); }
.st-bar-btns { display: flex; gap: 10px; }
.st-msg { font-size: .9rem; color: #6b706a; flex: 1; min-width: 200px; }
.st-msg.is-warn { color: #9a5b00; }
.st-msg.is-error { color: #b42318; font-weight: 600; }
.st-msg.is-ok { color: #166b43; font-weight: 600; }
.st-msg a { color: inherit; }

@media (max-width: 760px) {
  .st-service { grid-template-columns: 1fr 1fr; }
  .st-svc-name, .st-svc-note { grid-column: 1 / -1; }
  .st-rules { grid-template-columns: 1fr; }
  .st-person-top { flex-wrap: wrap; }
  .st-person-top .st-grow { flex-basis: 100%; order: 3; }
  .st-person-top .st-remove { margin-left: auto; }
  .st-line { flex-direction: column; gap: 6px; }
  .st-label { padding-top: 0; }
  .st-section { padding: 22px 18px; }
}

@media (max-width: 880px) {
  .ib-layout { grid-template-columns: 1fr; }
  .bk-layout { grid-template-columns: 1fr; }
  .bk-summary { position: static; }
}
@media (max-width: 600px) {
  .bk-staff { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bk-person { padding: 8px 10px; gap: 8px; }
  .bk-person small { display: none; }
  .bk-person b { font-size: .88rem; line-height: 1.25; }
  .bk-person .bk-avatar { width: 30px; height: 30px; font-size: .75rem; }
  .bk-panel { padding: 22px 18px; }
  .bk-services, .bk-row { grid-template-columns: 1fr; }
  .bk-progress li { font-size: 0; gap: 0; justify-content: center; }
  .bk-progress li span { font-size: .85rem; }
  .bk-scroll { display: none; }
  .ow-item { grid-template-columns: 1fr; gap: 8px; }
  .ow-stats { grid-template-columns: 1fr 1fr; }
}

/* Pop-ups (add-ons, checkout, product, camera) */
.bk-modal { margin: auto; border: 0; padding: 0; border-radius: 20px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); color: var(--ink, #1b1d22); }
.bk-modal::backdrop { background: rgba(20, 24, 20, .5); }
.bk-modal-body { padding: 28px 28px 24px; }
.bk-modal h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--primary); margin-bottom: 4px; line-height: 1.2; }
.bk-modal .bk-sub { margin-bottom: 16px; }
.bk-modal-kicker { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-text); margin-bottom: 4px; }
.bk-addons { display: grid; gap: 8px; }
.bk-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid #e2e4e0; border-radius: 14px; cursor: pointer; }
.bk-addon:hover { border-color: var(--accent); }
.bk-addon:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 4%, #fff); }
.bk-addon input { width: 20px; height: 20px; accent-color: var(--primary); }
.bk-addon b { display: block; font-size: .98rem; }
.bk-addon small { display: block; color: #6b706a; font-size: .84rem; }
.bk-addon-meta { text-align: right; }
.bk-addon-meta b { color: var(--primary); }
.bk-addon-edit { font: inherit; font-weight: 600; font-size: .9rem; color: var(--accent-text); background: none; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, #fff); border-radius: 999px; padding: 6px 14px; cursor: pointer; margin: -8px 0 18px; }
.bk-addon-edit:hover { border-style: solid; }

/* Owner: segmented buttons, toolbars */
.ow-seg { display: inline-flex; background: #ecedeb; border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.ow-seg button { font: inherit; font-size: .9rem; font-weight: 600; border: 0; background: none; padding: 7px 14px; border-radius: 9px; cursor: pointer; color: #4b5049; }
.ow-seg button.is-on { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ow-calbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ow-calbar .ow-daynav { margin-bottom: 0; }
.ow-cal-title { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--primary); margin: 4px 0 12px; }

/* Owner: checkout queue and card buttons */
.ow-queue { background: #fff; border-radius: 18px; padding: 20px 22px; margin-bottom: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, #fff), 0 10px 30px -18px rgba(0,0,0,.25); }
.ow-queue h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--primary); }
.ow-queue > .bk-small { margin: 2px 0 12px; }
.ow-q-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0 10px 12px; border-top: 1px solid #eef0ec; }
.ow-q-row.has-staff { border-left: 4px solid var(--person); }
.ow-q-row b { display: block; }
.ow-q-row small { display: block; color: #6b706a; font-size: .84rem; }
.ow-q-when { font-weight: 700; font-size: .9rem; color: var(--primary); }
.ow-item-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ow-item button.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ow-item button.is-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.ow-paid-line { display: inline-block; margin-top: 4px; font-size: .84rem !important; font-weight: 700; color: #166b43 !important; }
.ow-paid-line.is-bad { color: #b42318 !important; }
.ow-paid, .ow-noshow { font-style: normal; font-weight: 700; margin-left: 4px; color: #166b43; }
.ow-noshow { color: #b42318; }
.ow-cal-appt.is-click, .ow-chip.is-click { cursor: pointer; }
.ow-cal-appt.is-click:hover, .ow-chip.is-click:hover { filter: brightness(.96); }
.ow-cal-appt.is-noshow, .ow-chip.is-noshow { opacity: .55; text-decoration: line-through; }

/* Owner: week view (a row per person) */
.ow-wk-wrap { overflow-x: auto; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); }
.ow-wk { display: grid; grid-template-columns: 110px repeat(7, minmax(118px, 1fr)); min-width: calc(110px + 7 * 118px); }
.ow-wk-corner { border-bottom: 1px solid #eceeea; position: sticky; left: 0; z-index: 2; background: #fff; }
.ow-wk-day { font: inherit; background: none; border: 0; border-left: 1px solid #eceeea; border-bottom: 1px solid #eceeea; padding: 10px 6px; cursor: pointer; display: grid; justify-items: center; gap: 0; color: var(--primary); }
.ow-wk-day:hover { background: #f7f7f5; }
.ow-wk-day small { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f88; }
.ow-wk-day b { font-size: 1.2rem; }
.ow-wk-day span { font-size: .75rem; color: #8a8f88; }
.ow-wk-day.is-today b { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 9px; }
.ow-wk-day.is-closed { opacity: .55; }
.ow-wk-person { --person: #9aa0a6; display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #eceeea; border-left: 4px solid var(--person);
  position: sticky; left: 0; z-index: 2; background: #fff; }
.ow-wk-person .bk-avatar { width: 28px; height: 28px; font-size: .72rem; background: var(--person); }
.ow-wk-person b { font-size: .9rem; }
.ow-wk-cell { border-left: 1px solid #eceeea; border-bottom: 1px solid #eceeea; padding: 6px; display: grid; gap: 4px; align-content: start; min-height: 84px; }
.ow-wk-cell.is-off, .ow-wk-cell.is-closed { background: repeating-linear-gradient(135deg, #fafaf9 0 10px, #f0f1ee 10px 20px); }
.ow-off { display: block; text-align: center; font-size: .82rem; font-weight: 700; color: #8a8f88; padding-top: 22px; }
.ow-wk-hours { font-size: .7rem; color: #a3a7a1; }
.ow-chip { --person: #9aa0a6; border-radius: 7px; padding: 4px 7px; font-size: .74rem; line-height: 1.25; background: color-mix(in srgb, var(--person) 15%, #fff); border-left: 3px solid var(--person); overflow: hidden; }
.ow-chip b { display: block; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-chip small { display: block; color: #4b5049; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-chip.is-block { background: repeating-linear-gradient(135deg, #f4f5f3 0 8px, #e9eae7 8px 16px); border-left-color: #b9bcb6; color: #6b706a; }

/* Owner: month view */
.ow-mo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); }
.ow-mo-head { text-align: center; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a8f88; padding: 10px 0; border-bottom: 1px solid #eceeea; }
.ow-mo-cell { --person: var(--primary); font: inherit; text-align: left; background: #fff; border: 0; border-left: 1px solid #eceeea; border-bottom: 1px solid #eceeea; min-height: 96px; padding: 6px 7px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink, #1b1d22); }
.ow-mo-cell:nth-child(7n + 1) { border-left: 0; }
.ow-mo-cell:hover { background: #f7f7f5; }
.ow-mo-cell.is-out { opacity: .4; }
.ow-mo-cell.is-off, .ow-mo-cell.is-closed { background: repeating-linear-gradient(135deg, #fafaf9 0 10px, #f0f1ee 10px 20px); }
.ow-mo-num { font-weight: 700; font-size: .9rem; color: var(--primary); }
.ow-mo-cell.is-today .ow-mo-num { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; align-self: flex-start; }
.ow-mo-note { font-size: .78rem; font-weight: 700; color: #8a8f88; }
.ow-mo-note.is-free { font-weight: 600; color: #a3a7a1; }
.ow-mo-count { font-size: .78rem; font-weight: 700; color: var(--ink, #1b1d22); border-left: 3px solid var(--person); padding-left: 5px; }
.ow-mo-line { font-size: .72rem; color: #4b5049; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-mo-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.ow-mo-dot { min-width: 20px; height: 20px; border-radius: 999px; background: var(--person); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.ow-mo-off { font-size: .7rem; color: #8a8f88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
.ow-mo-key { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .84rem; color: #6b706a; margin-top: 12px; }
.ow-mo-key span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink, #1b1d22); }

/* Owner: checkout */
.ow-modal { width: min(620px, calc(100vw - 24px)); }
.co-h3 { font-family: var(--sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8a8f88; margin: 18px 0 8px; }
.co-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f1ee; }
.co-line:has(.co-qty) { grid-template-columns: minmax(0, 1fr) auto 70px; }
.co-line.is-off { opacity: .6; }
.co-line b { display: block; font-size: .96rem; }
.co-line small { display: block; color: #8a8f88; font-size: .82rem; }
.co-addon { font-weight: 400 !important; }
.co-addon input { flex: none; }
.co-money { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid #d6d8de; border-radius: 10px; padding: 0 0 0 10px; background: #fff; }
.co-money span { color: #8a8f88; font-weight: 600; }
.co-money input { font: inherit; width: 76px; border: 0; padding: 8px 10px 8px 0; background: none; text-align: right; }
.co-money input:focus { outline: none; }
.co-money:focus-within { border-color: var(--accent); }
.co-money input:disabled { color: #a3a7a1; }
.co-scan { display: flex; gap: 8px; flex-wrap: wrap; }
.co-scan input { flex: 1; min-width: 180px; font: inherit; padding: 10px 12px; border: 1.5px solid #d6d8de; border-radius: 12px; }
.co-scan input:focus { outline: none; border-color: var(--accent); }
.co-msg { font-size: .86rem; color: #6b706a; min-height: 1.3em; margin: 6px 0 2px; }
.co-msg.is-ok { color: #166b43; }
.co-msg.is-error { color: #b42318; }
.co-warn { font-style: normal; color: #9a5b00; font-weight: 600; }
.co-qty { display: inline-flex; align-items: center; gap: 4px; }
.co-qty button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d6d8de; background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: var(--primary); padding: 0; }
.co-qty b { min-width: 26px; text-align: center; }
.co-amt { text-align: right; font-weight: 700; }
.co-tips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.co-tips > button { font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #e2e4e0; background: #fff; cursor: pointer; color: #4b5049; }
.co-tips > button.is-on { border-color: var(--primary); background: var(--primary); color: #fff; }
.co-tips .co-money { margin-left: auto; }
.co-totals { margin-top: 18px; background: #f7f7f5; border-radius: 14px; padding: 12px 16px; display: grid; gap: 6px; }
.co-totals div { display: flex; justify-content: space-between; gap: 12px; }
.co-totals dt { color: #6b706a; }
.co-totals dd { font-weight: 600; text-align: right; }
.co-totals small { font-weight: 600; font-size: .78rem; margin-left: 6px; }
.co-totals small.is-up { color: #166b43; }
.co-totals small.is-down { color: #b42318; }
.co-grand { border-top: 1px solid #e2e4e0; padding-top: 8px; margin-top: 2px; font-size: 1.1rem; }
.co-grand dt, .co-grand dd { color: var(--ink, #1b1d22); font-weight: 700; }
.co-actions { align-items: center; margin-top: 16px; }
.co-right { display: flex; gap: 10px; flex-wrap: wrap; }
.ow-cam { width: 100%; border-radius: 14px; background: #111; aspect-ratio: 4 / 3; object-fit: cover; }

/* Owner: reports */
.rp-span { font-weight: 700; color: #6b706a; margin: 4px 0 12px; }
.rp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rp-cards div { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.25); }
.rp-cards small { display: block; color: #8a8f88; font-size: .82rem; font-weight: 600; }
.rp-cards b { display: block; font-size: 1.6rem; color: var(--primary); }
.rp-cards span { display: block; font-size: .8rem; color: #8a8f88; }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.rp-grid .bk-panel, .rp-table-wrap { padding: 20px 22px; }
.rp-grid .co-h3, .rp-table-wrap .co-h3 { margin-top: 0; }
.rp-table-wrap { margin-bottom: 16px; }
.rp-gap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f1ee; }
.rp-gap span small { display: block; color: #8a8f88; font-size: .8rem; }
.rp-gap a { color: var(--accent-text); font-weight: 600; }
.rp-gap-total { border-bottom: 0; border-top: 2px solid var(--primary); margin-top: 4px; font-weight: 700; color: var(--primary); }
.rp-scroll { overflow-x: auto; }
.rp-tx { max-height: 520px; overflow-y: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rp-table th, .rp-table td { padding: 9px 10px; text-align: right; border-bottom: 1px solid #f0f1ee; white-space: nowrap; }
.rp-table thead th { position: sticky; top: 0; background: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f88; }
.rp-table th:first-child, .rp-table td:first-child { text-align: left; }
.rp-table tbody th { font-weight: 600; text-align: left; }
.rp-table tbody th .ow-dot { margin-right: 8px; }
.rp-tx .rp-table :is(td, th):nth-child(2), .rp-tx .rp-table :is(td, th):nth-child(3), .rp-tx .rp-table :is(td, th):nth-child(4) { text-align: left; }
.rp-tx .rp-table td:nth-child(4) { white-space: normal; min-width: 200px; color: #4b5049; }
.rp-table tr.is-muted td { color: #8a8f88; }
.rp-tag { font: inherit; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--accent) 18%, #fff); color: var(--accent-text); cursor: pointer; }
.rp-tag.is-bad { background: #fdecea; color: #b42318; cursor: default; }
.rp-link { font: inherit; background: none; border: 0; padding: 0; color: var(--ink, #1b1d22); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: #d6d8de; text-underline-offset: 3px; }
.rp-top ol { list-style: none; display: grid; gap: 6px; }
.rp-top li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f1ee; }
.rp-top li small { color: #8a8f88; }

/* Owner: retail */
.rt-stats { grid-template-columns: repeat(4, 1fr); }
.rt-warn { color: #9a5b00 !important; }
.rt-scan { padding: 22px 24px; margin-bottom: 24px; }
.rt-scan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rt-scan .bk-sub { margin-bottom: 12px; }
.rt-cart { margin-top: 10px; border-top: 1px solid #eef0ec; }
.rt-cart-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rt-head { align-items: center; margin-bottom: 10px; }
.rt-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-list { display: grid; gap: 8px; }
.rt-item { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto 96px auto auto; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.25); border-left: 5px solid #d8e9df; }
.rt-item.is-low { border-left-color: #f0b44c; }
.rt-item.is-out { border-left-color: #d14b3c; }
.rt-name b { display: block; }
.rt-name small { color: #8a8f88; font-size: .82rem; }
.rt-code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: #6b706a; user-select: all; }
.rt-price { font-weight: 700; color: var(--primary); text-align: right; }
.rt-badge { font-size: .76rem; font-weight: 700; text-align: center; }
.rt-item.is-low .rt-badge { color: #8a5300; }
.rt-item.is-out .rt-badge { color: #b42318; }
.rt-web { font-size: .86rem; font-weight: 600 !important; }
.rt-item .st-remove { margin-bottom: 0; }
.rt-log { padding: 8px 20px; }
.rt-log-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0f1ee; }
.rt-log-row:last-child { border-bottom: 0; }
.rt-log-row b { display: block; font-size: .94rem; }
.rt-log-row small { color: #8a8f88; font-size: .8rem; }
.rt-change { font-weight: 700; text-align: center; border-radius: 8px; padding: 3px 0; }
.rt-change.is-up { background: #e3f6ec; color: #166b43; }
.rt-change.is-down { background: #fdecea; color: #b42318; }
.st-addon-with { grid-column: 1 / -1; }
#pr-form h2 { margin-bottom: 14px; }

/* Owner: POS hand-off barcodes */
.pos-list { display: grid; gap: 10px; }
.pos-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1.5px solid #e6e7e4; border-radius: 14px; }
.pos-text b { display: block; }
.pos-text small { display: block; color: #6b706a; font-size: .86rem; }
.pos-flag { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--tint, #eef0ec); color: var(--primary); }
.pos-flag.is-warn { background: #fff4de; color: #8a5300; border-radius: 10px; }
.pos-code { background: #fff; line-height: 0; }
.pos-code svg { display: block; max-width: 100%; height: auto; }
.pos-nocode { font-size: .84rem; color: #8a5300; max-width: 200px; }
.pos-plain { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; }
#pr-form .bk-actions { align-items: center; }

@media (max-width: 760px) {
  .rp-cards { grid-template-columns: 1fr 1fr; }
  .rp-grid { grid-template-columns: 1fr; }
  .rt-stats { grid-template-columns: 1fr 1fr; }
  .rt-item { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name name" "price stock edit" "web web badge"; row-gap: 8px; }
  .rt-name { grid-area: name; }
  .rt-price { grid-area: price; text-align: left; }
  .rt-stock { grid-area: stock; }
  .rt-item .st-remove { grid-area: edit; }
  .rt-web { grid-area: web; }
  .rt-badge { grid-area: badge; text-align: right; }
  .ow-mo-cell { min-height: 70px; padding: 4px; }
  .ow-mo-line, .ow-mo-off { display: none; }
  .ow-mo-count { font-size: .7rem; border-left-width: 2px; padding-left: 3px; }
  .ow-mo-note { font-size: .68rem; }
  .ow-mo-dot { min-width: 16px; height: 16px; font-size: .62rem; padding: 0 3px; }
}
@media (max-width: 600px) {
  .pos-item { grid-template-columns: 1fr; }
  .pos-code { justify-self: center; }
  .st-hour { grid-template-columns: 62px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .st-hour input[type=time] { min-width: 0; padding: 8px 6px; font-size: .92rem; }
  .ow-wk { grid-template-columns: 52px repeat(7, minmax(112px, 1fr)); min-width: calc(52px + 7 * 112px); }
  .ow-wk-person { padding: 10px 6px; justify-content: center; }
  .ow-wk-person b { display: none; }
  .bk-modal-body { padding: 22px 18px 18px; }
  .bk-addon { grid-template-columns: auto minmax(0, 1fr); }
  .bk-addon-meta { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .ow-q-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ow-q-when { grid-column: 1 / -1; }
  .ow-item-btns { flex-direction: row; }
  .co-tips .co-money { margin-left: 0; }
  .co-actions { flex-direction: column-reverse; align-items: stretch; }
  .co-right { justify-content: flex-end; }
  .ow-calbar { align-items: stretch; }
}