:root, html[data-theme="night"] {
  --bg: #0e0e0f;
  --bg-2: #141416;
  --ink: #f4f2ee;
  --muted: #8e8a84;
  --line: #2a2a2c;
  --card: #18181a;
  --fill: #121214;
  --input: #121214;
  --danger: #e23b57;
  --danger-bg: rgba(226, 59, 87, .12);
  --btn-bg: #f4f2ee;
  --btn-ink: #1c1917;
  --solid: #0e0e0f;
  --on: #f4f2ee;
  --rail-bg: #0e0e0f;
  --shadow: 0 1px 0 rgba(255,255,255,.04);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --dock: calc(68px + env(safe-area-inset-bottom));
  --font: "e-Ukraine", "Segoe UI", system-ui, sans-serif;
  --serif: "e-Ukraine", "Segoe UI", system-ui, sans-serif;
  --rail: 240px;
  --fs: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh: 1.5;
  color-scheme: dark;
}
html[data-theme="day"] {
  --bg: #f4f3ef;
  --bg-2: #eceae4;
  --ink: #111110;
  --muted: #5c5852;
  --line: #e6e3dc;
  --card: #ffffff;
  --fill: #f0eee8;
  --input: #ffffff;
  --danger: #b4232c;
  --danger-bg: rgba(180, 35, 44, .08);
  --btn-bg: #111110;
  --btn-ink: #fafafa;
  --solid: #ffffff;
  --on: #111110;
  --rail-bg: #f4f3ef;
  --shadow: 0 1px 0 rgba(17,17,16,.04);
  color-scheme: light;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Medium.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Bold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs); font-weight: 400;
  line-height: var(--lh); letter-spacing: 0; word-spacing: 0;
  overflow-wrap: break-word; word-break: normal;
  -webkit-font-smoothing: antialiased;
}
body.app-body { min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: min(var(--rail), 86vw);
  display: flex; flex-direction: column; padding: 20px 14px;
  background: var(--rail-bg); border-right: 1px solid var(--line); z-index: 30;
  transform: translateX(-105%); transition: transform .2s ease;
  overflow: auto;
}
.rail.is-open { transform: none; }
.rail-scrim {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25;
}
.rail-scrim.is-on { display: block; }
.shell { min-height: 100dvh; padding: 16px 16px var(--dock); max-width: 760px; margin: 0 auto; overflow-x: clip; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.top-left { display: flex; align-items: flex-end; gap: 10px; min-width: 0; flex: 1; }
.top-left > div { min-width: 0; }
.top-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.burger {
  width: 40px; height: 40px; border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-sm); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none;
}
.burger svg { width: 20px; height: 20px; }
.eyebrow {
  margin: 0 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.top h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--btn-bg); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-ink); font-weight: 500; font-size: 15px;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; word-spacing: 0; letter-spacing: 0;
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-clay, .btn-moss { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-wide { width: 100%; white-space: normal; }
.btn svg { width: 18px; height: 18px; }
.flash { padding: 12px 14px; border-radius: var(--r); margin-bottom: 12px; border: 1px solid var(--line); background: var(--fill); font-size: var(--fs-sm); }
.flash-ok { color: var(--ink); }
.flash-err { color: var(--ink); border-color: var(--danger); background: var(--danger-bg); }
.flash a { text-decoration: underline; font-weight: 600; }
.sound-hint {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--dock, 68px) + 10px);
  z-index: 40; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
  font-size: var(--fs-sm); line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.grid { display: grid; gap: 10px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
  max-width: 100%; overflow-x: clip;
}
.import-cta { display: block; margin-bottom: 14px; text-decoration: none; color: inherit; }
.import-cta p, .import-way p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.import-ways { display: grid; gap: 10px; margin: 16px 0; }
.import-way { display: block; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.import-way input[type="file"] { display: none; }
.import-file { margin: 14px 0 0; }
.import-file .file-btn {
  width: 100%; gap: 10px; min-height: 48px;
  border-radius: var(--r); font-size: 15px;
  box-shadow: none;
}
.import-file .file-btn svg { width: 20px; height: 20px; flex: none; }
.import-file .js-import-file-name { display: block; margin-top: 8px; font-size: 12px; }
.import-way textarea { min-height: 110px; margin-top: 10px; }
.import-row input { margin-top: 4px; }
.import-row.is-dim { opacity: .55; }
.stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.stat span { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.stat.good b, .stat.warn b, .cost { color: var(--ink); }
.list { display: grid; gap: 10px; }
.visit, .row-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  text-decoration: none; color: inherit; width: 100%; text-align: left; cursor: pointer;
}
.visit b, .visit p, .visit span { text-decoration: none; }
.visit.is-risk, .row-card.is-risk, .svc-card.is-risk, .card.is-risk {
  border-color: var(--danger); background: var(--danger-bg);
}
.visit.is-risk b, .is-risk .grow b { color: var(--danger); }
.phone-warn { margin-top: 6px; font-size: var(--fs-sm); color: var(--danger); font-weight: 500; }
input.is-dup, select.is-dup { border-color: var(--danger) !important; background: var(--danger-bg); color: var(--ink); }
.theme-btn {
  width: 40px; height: 40px; border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-sm); color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.theme-btn svg { width: 18px; height: 18px; }
.modal-x {
  width: 40px; height: 40px; border: 1px solid var(--line); background: var(--fill);
  border-radius: var(--r-sm); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none;
}
.modal-x svg { width: 16px; height: 16px; }
.op-hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); min-height: 16px; }
.pub-theme { position: absolute; top: 16px; right: 16px; z-index: 5; }
.pub-body:has(.book-page) .pub-theme { display: none; }
.hero-pub, .login-wrap { position: relative; }
.time-col { width: 54px; flex: none; padding-top: 1px; }
.time-col b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.time-col small { color: var(--muted); font-size: 11px; font-weight: 500; }
.grow { flex: 1; min-width: 0; }
.grow b { display: block; font-size: 15px; font-weight: 500; overflow-wrap: break-word; }
.grow p, .muted { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: break-word; }
.chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 8px; font-size: 11px; font-weight: 500; background: var(--fill); color: var(--ink);
  border: 1px solid var(--line);
}
.chip-ok, .chip-bad, .chip-wait { background: var(--fill); color: var(--ink); }
.note-preview {
  margin-top: 6px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--fill); color: var(--muted); font-size: 12px; line-height: 1.4;
}
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.dock a, .dock button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--muted); font-size: 10px; font-weight: 500;
  padding: 6px 2px; background: none; border: 0; cursor: pointer; min-height: 50px;
  overflow-wrap: normal; word-spacing: 0; letter-spacing: 0;
}
.dock svg { width: 22px; height: 22px; }
.dock a.is-on, .dock button.is-on { color: var(--ink); }
.alert-sheet { width: min(420px, 100%); }
.alert-sheet .js-alert-title { font-size: 22px; font-weight: 600; }
.js-alert-body { white-space: pre-line; }
.rail-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; margin-bottom: 20px; color: inherit; }
.rail-brand .mark { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.rail-brand .mark svg, .hero-mark svg { width: 20px; height: 20px; display: block; }
.rail-brand b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.rail-brand small { color: var(--muted); font-size: 12px; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 9px 10px; border-radius: var(--r-sm);
}
.rail-nav svg { width: 18px; height: 18px; flex: none; }
.rail-nav a.is-on { color: var(--ink); background: var(--fill); }
.rail-user { margin-top: auto; display: block; text-decoration: none; padding-top: 16px; color: inherit; font-weight: 500; font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; min-width: 0; }
.field span { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea,
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="tel"], input[type="search"],
select, textarea {
  width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--input); color: var(--ink);
  border-radius: var(--r-sm); padding: 11px 12px; outline: none; color-scheme: inherit;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
.search {
  width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; color-scheme: inherit;
}
.section-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0 8px; }
.section-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-width: 0; }
.section-h a { text-decoration: none; }
.tabs { display: flex; gap: 6px; overflow: auto; padding-bottom: 4px; }
.tabs a, .tabs button {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 7px 12px; white-space: nowrap; cursor: pointer; text-decoration: none; color: inherit;
  font-size: var(--fs-sm); font-weight: 500;
}
.tabs .is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cal-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.day {
  width: 100%; font: inherit; text-align: center; padding: 8px 2px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; cursor: pointer;
  min-height: 64px; min-width: 0;
}
.day small { display: block; font-size: 10px; color: var(--muted); text-transform: lowercase; font-weight: 500; }
.day b { display: block; font-size: 15px; font-weight: 600; }
.day em { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.day.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.day.is-on small, .day.is-on em { color: color-mix(in srgb, var(--bg) 72%, var(--ink)); }
.day.off { opacity: .32; pointer-events: none; }
.slot[disabled], .slot.is-busy { opacity: .35; cursor: not-allowed; }
.slot.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.price-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin: 6px 0; flex-wrap: wrap; }
.price-line b { font-weight: 600; }
.bar { height: 6px; background: var(--fill); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); }
.svc-card { cursor: pointer; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--card); text-decoration: none; color: inherit; min-width: 0; }
.svc-card.is-on { border-color: var(--ink); }
.svc-card.js-svc {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
  width: 100%; text-align: left; padding: 15px 16px; min-height: 64px;
}
.svc-card.has-photo { grid-template-columns: 22px 56px minmax(0, 1fr) auto; }
.svc-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: transparent; background: transparent; flex: none;
}
.svc-check svg { width: 12px; height: 12px; display: block; }
.svc-card.js-svc.is-on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.svc-card.js-svc.is-on .svc-check {
  background: var(--bg); border-color: var(--bg); color: var(--ink);
}
.svc-card.js-svc.is-on .svc-time,
.svc-card.js-svc.is-on .svc-card-body em { color: color-mix(in srgb, var(--bg) 72%, var(--ink)); }
.svc-thumb, .svc-list-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--fill); flex: none;
}
.svc-list-thumb { display: block; }
.svc-time {
  display: inline-flex; align-items: center; margin-top: 4px;
  padding: 2px 8px; border-radius: 999px; background: var(--fill);
  font-size: 12px; font-weight: 500; white-space: nowrap; word-spacing: 0; letter-spacing: 0;
}
.svc-card.js-svc.is-on .svc-time { background: color-mix(in srgb, var(--bg) 16%, transparent); }
.svc-price { white-space: nowrap; font-weight: 600; font-size: 15px; }
body.pub-body {
  overflow-wrap: break-word; word-break: normal; letter-spacing: 0; word-spacing: 0;
  font-size: 16px; line-height: 1.5;
}
.hero-pub {
  min-height: 100dvh; padding: 20px 16px 36px;
  background: var(--bg);
}
.book-page { padding-bottom: calc(148px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.book-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.book-top .hero-mark { width: 40px; height: 40px; border-radius: var(--r-sm); }
.book-top-actions { display: flex; align-items: center; gap: 8px; }
.book-icon-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); display: grid; place-items: center;
  text-decoration: none; cursor: pointer; flex: none;
}
.book-icon-btn svg { width: 18px; height: 18px; }
.book-id {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 18px 18px;
}
.book-id .eyebrow { margin-bottom: 10px; letter-spacing: .06em; }
.book-id h1 { margin: 0 0 6px; font-size: clamp(26px, 7vw, 32px); letter-spacing: -.02em; line-height: 1.2; }
.book-id .lead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; max-width: none; }
.book-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.book-soc {
  width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--line);
  background: var(--fill); color: var(--ink); display: grid; place-items: center;
  text-decoration: none;
}
.book-soc svg { width: 18px; height: 18px; display: block; }
.book-spec { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.4; font-weight: 500; }
.book-addr-chip {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 16px 0 0;
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--fill); color: inherit; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.45;
}
.book-addr-chip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.book-addr-chip span { min-width: 0; }
.cal-nav {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.cal-nav b { text-align: center; font-size: 15px; font-weight: 600; text-transform: capitalize; }
.cal-nav .js-cal-next svg { transform: rotate(180deg); }
.cal-nav .book-back:disabled { opacity: .28; pointer-events: none; }
.day[hidden] { display: none !important; }
.book-gallery {
  display: flex; gap: 8px; overflow-x: auto; margin: 16px 0 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.book-gallery img {
  width: min(78%, 280px); height: 168px; object-fit: cover; border-radius: var(--r);
  flex: none; scroll-snap-align: start; background: var(--fill);
}
.book-addr {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 6px;
  font-size: 14px; line-height: 1.45;
}
.book-addr span { min-width: 0; flex: 1; }
.book-map-btn {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.book-map-btn svg { width: 18px; height: 18px; }
.book-contacts { margin: 0; font-size: 14px; line-height: 1.45; }
.book-dots {
  list-style: none; margin: 22px 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center;
  position: relative;
}
.book-dots::before {
  content: ""; position: absolute; top: 13px; left: 16%; right: 16%;
  height: 1px; background: var(--line); z-index: 0;
}
.book-dots li { position: relative; z-index: 1; color: var(--muted); font-size: 11px; cursor: pointer; font-weight: 500; }
.book-dots i {
  display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 6px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  font-style: normal; font-weight: 600; font-size: 12px;
}
.book-dots .is-on { color: var(--ink); }
.book-dots .is-on i { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.book-dots .is-done i { background: var(--fill); color: var(--ink); border-color: var(--ink); }
.book-step { display: none; }
.book-step.is-on { display: block; }
.book-step-title { margin: 0 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.book-step-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.book-step-top h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.book-step-top .muted { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.35; }
.book-back {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.book-back svg { width: 18px; height: 18px; }
.book-slots-cap { margin: 4px 0 10px; font-size: var(--fs-sm); color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot {
  min-width: 0; min-height: 48px; text-align: center; padding: 12px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); cursor: pointer; color: inherit;
  white-space: nowrap; word-spacing: 0; letter-spacing: 0; font-size: 15px; font-weight: 500;
}
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 28;
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--card);
  box-shadow: 0 -10px 32px rgba(14,14,15,.12);
  border-top: 1px solid var(--line);
}
.book-bar-sum { min-width: 0; flex: 1; }
.book-bar-sum b { display: block; font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.book-bar-sum small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-bar.is-wait .book-bar-sum small { color: var(--danger); font-weight: 600; }
.book-bar .btn { flex: none; min-width: 140px; max-width: 52%; }
.book-bar .btn.is-wait, .btn.is-wait {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.book-map {
  position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center; padding: 12px;
}
.book-map[hidden] { display: none !important; }
.book-map-card {
  width: min(440px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--r) var(--r); padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.book-map-card .js-map-addr { margin: 0 0 6px; }
.book-map-hint { margin: 0 0 18px; line-height: 1.4; }
.book-map-card .btn-wide + .btn-wide { margin-top: 8px; }
.pub-body .js-toast {
  bottom: calc(104px + env(safe-area-inset-bottom));
  font-weight: 500; text-align: center;
}
.hero-mark { width: 48px; height: 48px; border-radius: var(--r); background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.hero-mark svg { width: 24px; height: 24px; }
.hero-pub h1 { font-size: clamp(26px, 7vw, 32px); font-weight: 600; margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: break-word; }
.lead { font-size: 15px; color: var(--muted); max-width: 36rem; line-height: 1.55; overflow-wrap: break-word; }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(400px, 100%); }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); font-size: 14px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 6px; font-weight: 500; }
.table td { padding: 10px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.menu-grid { display: grid; gap: 8px; }
.menu-grid a {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px;
  text-decoration: none; color: inherit;
}
.menu-grid a b { display: block; font-size: 15px; font-weight: 500; }
.hours-grid { display: grid; gap: 8px; min-width: 0; max-width: 100%; }
.hours-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px; align-items: center; min-width: 0; max-width: 100%;
}
.hours-row b { min-width: 0; font-size: 13px; font-weight: 500; }
.hours-start { grid-column: 2; }
.hours-end { grid-column: 3; }
.hours-row input[type="time"] { min-width: 0; width: 100%; max-width: 100%; }
.hours-row label, .check-inline {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.hidden { display: none !important; }
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 15;
  width: 52px; height: 52px; border-radius: var(--r); border: 0; background: var(--btn-bg); color: var(--btn-ink);
  display: grid; place-items: center;
}
.fab svg { width: 22px; height: 22px; }
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
  display: none; align-items: flex-end; justify-content: center; padding: 12px;
}
.modal.is-open { display: flex; }
.sheet {
  width: min(560px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--r) var(--r);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 90dvh; overflow: auto;
}
.sheet-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-h h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; min-width: 0; }
.phone-line { display: inline; text-decoration: none; word-spacing: .12em; }
.phone-line a { text-decoration: none; }
.file-pick { display: block; margin: 12px 0 18px; }
.file-pick input[type="file"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
.file-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 500; cursor: pointer;
}
.file-pick .js-file-name { display: block; margin-top: 8px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.photo-pair figure { margin: 0; }
.photo-pair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--fill); }
.photo-pair figcaption { margin-top: 6px; font-size: 12px; }
.photo-pair a { text-decoration: none; }

input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; padding: 0; flex: none;
  border: 1.5px solid var(--ink); border-radius: 4px; background: var(--input);
  display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--ink); }
input[type="checkbox"]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
}
input[type="time"], input[type="date"] {
  color-scheme: inherit;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  display: block;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.field:has(> input[type="date"]),
.field:has(> input[type="time"]) { overflow: hidden; max-width: 100%; }
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
  width: 100%;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  padding: 0 1px;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .7;
  width: 16px; height: 16px; padding: 0; margin: 0 0 0 6px; flex: none;
}
html[data-theme="night"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="night"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.switch {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin: 8px 0 14px; color: var(--ink); font-size: 14px;
}
.switch span { min-width: 0; line-height: 1.35; padding-top: 3px; }
.switch input[type="checkbox"] {
  width: 40px; height: 24px; border-radius: 999px; position: relative;
  background: var(--fill); border: 1.5px solid var(--line);
}
.switch input[type="checkbox"]::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
  transform: none; border: 0;
}
.switch input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.switch input[type="checkbox"]:checked::after { left: 19px; background: var(--bg); }
.svc-card:has(input[type="checkbox"]) { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.svc-card input[type="checkbox"] { margin-top: 3px; }
.svc-card-body { min-width: 0; display: grid; gap: 3px; }
.svc-card-body b { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.svc-card-body em { font-style: normal; color: var(--muted); font-size: var(--fs-sm); }
.sale-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px;
  background: var(--card);
}
.sale-card input[type="number"] { margin: 0; min-height: 40px; text-align: center; }
.sms-box .sms-to { margin: 0 0 10px; }
.sms-box textarea { min-height: 110px; }
.field select { max-width: 100%; }
.recipe-row { margin-bottom: 4px; min-width: 0; }

html[data-theme="day"] .dock { background: color-mix(in srgb, #f4f3ef 92%, transparent); }
html[data-theme="day"] .dock a.is-on, html[data-theme="day"] .dock button.is-on { color: #111110; }
html[data-theme="day"] .rail-nav a.is-on { background: #eceae4; }
html[data-theme="day"] .rail-brand .mark, html[data-theme="day"] .hero-mark {
  background: #111110; color: #f4f3ef;
}
html[data-theme="day"] .field input, html[data-theme="day"] .field select, html[data-theme="day"] .field textarea,
html[data-theme="day"] input[type="text"], html[data-theme="day"] input[type="number"],
html[data-theme="day"] input[type="email"], html[data-theme="day"] input[type="password"],
html[data-theme="day"] input[type="date"], html[data-theme="day"] input[type="time"],
html[data-theme="day"] input[type="tel"], html[data-theme="day"] input[type="search"],
html[data-theme="day"] select, html[data-theme="day"] textarea, html[data-theme="day"] .search,
html[data-theme="day"] .slot {
  background: #ffffff; color-scheme: light;
}
html[data-theme="day"] input[type="time"], html[data-theme="day"] input[type="date"] { color-scheme: light; }
html[data-theme="day"] .field input:focus, html[data-theme="day"] .field select:focus,
html[data-theme="day"] .field textarea:focus { border-color: #111110; }
html[data-theme="day"] .tabs .is-on, html[data-theme="day"] .day.is-on, html[data-theme="day"] .slot.is-on {
  background: #111110; color: #f4f3ef; border-color: #111110;
}
html[data-theme="day"] .day.is-on,
html[data-theme="day"] .day.is-on b { color: #f4f3ef; }
html[data-theme="day"] .day.is-on small,
html[data-theme="day"] .day.is-on em { color: #d6d3d1; }
html[data-theme="day"] .svc-card.is-on { border-color: #111110; }
html[data-theme="day"] .svc-card.js-svc.is-on { background: #111110; color: #f4f3ef; }
html[data-theme="day"] .svc-card.js-svc.is-on .svc-check { background: #f4f3ef; border-color: #f4f3ef; color: #111110; }
html[data-theme="day"] .book-id { box-shadow: none; }
html[data-theme="day"] .book-bar { background: #ffffff; box-shadow: 0 -8px 28px rgba(17,17,16,.06); }
html[data-theme="day"] .book-addr-chip, html[data-theme="day"] .book-soc { background: #f0eee8; }
html[data-theme="day"] .book-map { background: rgba(17,17,16,.4); }
html[data-theme="day"] .book-back, html[data-theme="day"] .book-map-btn,
html[data-theme="day"] .book-icon-btn { background: #ffffff; }
html[data-theme="day"] .book-dots .is-on i { background: #111110; color: #f4f3ef; border-color: #111110; }
html[data-theme="day"] .sheet { background: #ffffff; }
html[data-theme="day"] input[type="checkbox"] { background: #ffffff; border-color: #111110; }
html[data-theme="day"] input[type="checkbox"]:checked { background: #111110; }
html[data-theme="day"] input[type="checkbox"]:checked::after { border-color: #f4f3ef; }
html[data-theme="day"] .switch input[type="checkbox"] { background: #ffffff; border-color: #e6e3dc; }
html[data-theme="day"] .switch input[type="checkbox"]::after { background: #111110; }
html[data-theme="day"] .switch input[type="checkbox"]:checked { background: #111110; }
html[data-theme="day"] .switch input[type="checkbox"]:checked::after { background: #f4f3ef; }
html[data-theme="day"] .bar { background: #e6e3dc; }
html[data-theme="day"] .bar i { background: #111110; }
html[data-theme="day"] .fab { background: #111110; color: #fafafa; }

@media (min-width: 980px) {
  .app-body { display: grid; grid-template-columns: var(--rail) 1fr; }
  .rail { position: sticky; top: 0; height: 100dvh; transform: none; width: var(--rail); }
  .rail-scrim, .burger, .dock { display: none !important; }
  .shell { max-width: 880px; padding: 28px 32px 48px; margin: 0; }
  .top h1 { font-size: 28px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hero-pub { padding: 40px 24px 48px; }
  .book-page.hero-pub { padding: 32px 24px 140px; max-width: 440px; }
  .modal { align-items: center; }
  .sheet { border-radius: var(--r-lg); }
  .btn { min-height: 44px; }
}
@media (max-width: 979px) {
  .burger { display: none; }
}
@media (max-width: 640px) {
  .shell { padding: 12px 14px var(--dock); }
  .top { gap: 8px; margin-bottom: 14px; }
  .top h1 { font-size: 22px; }
  .top-actions .btn, .btn-add { min-height: 40px; padding: 0 12px; }
  .btn-add .btn-label { display: none; }
  .btn-add { width: 40px; padding: 0; font-size: 20px; }
  .theme-btn { width: 40px; height: 40px; flex: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2.grid-keep, .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 .stat:last-child { grid-column: span 2; }
  .stat b { font-size: 20px; }
  .hours-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "day off"
      "start end";
    gap: 8px 10px;
  }
  .hours-row b { grid-area: day; }
  .hours-row .check-inline { grid-area: off; justify-self: end; }
  .hours-start { grid-area: start; }
  .hours-end { grid-area: end; }
  .table-wrap { overflow: auto; }
  .table td:first-child { white-space: nowrap; overflow-wrap: normal; }
  input[type="date"], input[type="time"],
  .field input, .field select, .field textarea,
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"] {
    font-size: 16px;
  }
  input[type="date"], input[type="time"] { padding: 12px; }
  .flash { overflow-wrap: break-word; }
  .cal-strip { gap: 4px; }
  .day { padding: 7px 0; min-height: 60px; }
  .day b { font-size: 15px; }
  .slots { gap: 8px; }
  .slot { font-size: 15px; padding: 13px 4px; }
  .book-page { max-width: 100%; }
  .hero-pub { padding: 16px 16px 32px; }
  .book-id { padding: 18px 16px 16px; }
  .book-bar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .hero-pub { padding: 14px 12px 28px; }
  .book-id { padding: 16px 14px 14px; }
  .book-id h1, .hero-pub h1 { font-size: 24px; }
  .svc-card.js-svc { padding: 13px 12px; gap: 8px 10px; }
  .svc-card-body b { font-size: 15px; }
  .svc-price { font-size: 14px; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-strip { gap: 3px; }
  .day { min-height: 56px; padding: 6px 0; }
  .day small, .day em { font-size: 9px; }
  .book-bar {
    flex-wrap: wrap; gap: 10px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .book-bar-sum { flex: 1 1 auto; }
  .book-bar .btn { width: 100%; max-width: none; min-width: 0; }
  .book-soc, .book-icon-btn { width: 42px; height: 42px; }
}