:root {
  --brand: #8f285e;
  --brand-dark: #682044;
  --brand-soft: #f6e7ef;
  --ink: #241c22;
  --muted: #796d75;
  --canvas: #f8f4f7;
  --surface: #ffffff;
  --line: #eadfe6;
  --danger: #a52d43;
  --success: #25704b;
  --shadow: 0 12px 38px rgba(70,34,57,.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 10% -10%, #f5dfeb 0, transparent 32rem), var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0; color: var(--brand); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 12px; font-weight: 760; text-decoration: none; white-space: nowrap; }
.button.primary { color: white; background: var(--brand); box-shadow: 0 7px 18px rgba(143,40,94,.2); }
.button.secondary { color: var(--brand-dark); background: var(--brand-soft); }
.button.quiet { color: var(--muted); background: transparent; }
.button.danger { color: var(--danger); }
.button:disabled { opacity: .5; cursor: wait; }
.full-width { width: 100%; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--brand); background: white; font-size: 1.35rem; }
.text-button, .back-button { border: 0; color: var(--brand); background: transparent; font-weight: 750; }
.topbar { height: 72px; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid rgba(234,223,230,.9); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 3px 10px rgba(65,31,52,.16); }
.brand span { display: grid; }
.brand strong { font-size: 1.2rem; }
.brand small { color: var(--muted); }
.topbar-actions, .account-area { display: flex; align-items: center; gap: 10px; }
#account-name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 680; }
.login-layout { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 28px; }
.login-card { width: min(650px,100%); padding: clamp(34px,7vw,70px); text-align: center; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.login-card h1 { margin: 14px 0 16px; font-size: clamp(2.2rem,7vw,4.2rem); line-height: .98; letter-spacing: -.055em; }
.login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.google-button { min-height: 44px; display: grid; place-items: center; margin: 28px auto 10px; }
.message { min-height: 24px; color: var(--danger) !important; }
.security-note { margin: 22px 0 0; font-size: .88rem; }
.app-shell { min-height: calc(100vh - 72px); }
.app-content { width: min(1060px,100%); min-height: calc(100vh - 72px); margin: 0 auto; padding: 30px 30px 120px; }
.sync-message { min-height: 24px; margin-bottom: 5px; color: var(--muted); font-size: .84rem; text-align: right; }
.sync-message.error { color: var(--danger); }
.view { display: none; }
.view.active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: .3; transform: translateY(4px); } }
.app-nav { position: fixed; left: 50%; bottom: max(14px,env(safe-area-inset-bottom)); z-index: 35; width: min(660px,calc(100% - 28px)); height: 76px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: center; padding: 6px 10px; border: 1px solid rgba(220,205,215,.9); border-radius: 24px; background: rgba(255,255,255,.97); box-shadow: 0 16px 46px rgba(48,24,40,.2); backdrop-filter: blur(16px); }
.nav-item { height: 62px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 16px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 700; }
.nav-icon { font-size: 1.32rem; line-height: 1; }
.nav-item.active { color: var(--brand); background: var(--brand-soft); }
.quick-add { width: 64px; height: 64px; justify-self: center; margin-top: -37px; border: 5px solid var(--canvas); border-radius: 50%; color: white; background: #171417; box-shadow: 0 10px 24px rgba(0,0,0,.24); font-size: 2.1rem; font-weight: 300; }
.home-heading, .page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-heading { margin-bottom: 26px; }
.home-heading h1, .page-heading h1 { margin: 5px 0 0; font-size: clamp(2rem,5vw,3.2rem); line-height: 1; letter-spacing: -.045em; }
.home-heading p:last-child { margin: 8px 0 0; }
.page-heading { min-height: 64px; margin-bottom: 22px; }
.page-heading .back-button { display: block; margin: 0 0 6px; padding: 0; }
.section-heading { margin: 32px 0 14px; }
.section-heading h2 { margin: 4px 0 0; font-size: 1.3rem; }
.home-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.action-card { min-height: 150px; display: grid; align-content: center; gap: 5px; padding: 22px; text-align: left; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: white; box-shadow: 0 8px 24px rgba(73,35,60,.04); }
.action-card > span { color: var(--brand); font-size: 2rem; line-height: 1; }
.action-card strong { margin-top: 10px; font-size: 1.05rem; }
.action-card small { color: var(--muted); }
.action-card.primary-action { color: white; border-color: var(--brand); background: linear-gradient(145deg,#a33870,var(--brand-dark)); }
.action-card.primary-action span, .action-card.primary-action small { color: white; }
.record-list { display: grid; gap: 11px; }
.record-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 18px; color: inherit; background: white; box-shadow: 0 5px 18px rgba(73,35,60,.035); text-align: left; }
button.record-card { width: 100%; }
.record-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--brand); background: var(--brand-soft); font-weight: 850; text-transform: uppercase; }
.record-copy { min-width: 0; display: grid; gap: 3px; }
.record-copy strong, .record-copy span, .record-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-copy span, .record-copy small { color: var(--muted); }
.record-meta { display: grid; justify-items: end; gap: 4px; color: var(--muted); }
.record-meta strong { color: var(--ink); }
.empty-state { padding: 34px 20px; text-align: center; border: 1px dashed #d9c7d3; border-radius: 18px; color: var(--muted); background: rgba(255,255,255,.55); }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; border-radius: 999px; color: var(--brand-dark); background: var(--brand-soft); font-size: .75rem; font-weight: 780; }
.date-toolbar { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 14px; }
.date-picker { min-width: 230px; display: grid; place-items: center; position: relative; padding: 11px 18px; border: 1px solid var(--line); border-radius: 14px; background: white; font-weight: 780; }
.date-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.schedule-mode { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 12px; overflow: hidden; border: 1px solid var(--brand); border-radius: 14px; background: white; }
.schedule-mode button { min-height: 42px; border: 0; border-right: 1px solid var(--brand); color: var(--brand-dark); background: white; font-weight: 730; }
.schedule-mode button:last-child { border-right: 0; }
.schedule-mode button.active { color: white; background: var(--brand); }
.week-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 20px; }
.day-chip { min-height: 62px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: white; }
.day-chip strong { color: var(--ink); font-size: 1rem; }
.day-chip.selected { color: white; border-color: var(--brand); background: var(--brand); }
.day-chip.selected strong { color: white; }
.timeline { display: grid; gap: 10px; }
.timeline-row { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 12px; align-items: stretch; }
.timeline-time { padding-top: 17px; color: var(--muted); font-weight: 780; text-align: right; }
.timeline-card { border-left: 5px solid var(--brand); }
.schedule-add { margin-top: 16px; }
.calendar-grid { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays strong { padding: 9px 4px; text-align: center; font-size: .76rem; }
.calendar-day { min-width: 0; min-height: 82px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; overflow: hidden; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--ink); background: white; text-align: left; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { color: #b8aab4; background: #fcfafb; }
.calendar-day.selected { background: #fff0f7; box-shadow: inset 0 0 0 2px var(--brand); }
.calendar-day-number { font-size: .75rem; font-weight: 800; }
.calendar-entry { overflow: hidden; color: var(--brand); font-size: .65rem; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.calendar-more { color: var(--muted); font-size: .65rem; font-weight: 800; }
.week-calendar { overflow-x: auto; }
.week-calendar .calendar-weekdays, .week-calendar .calendar-days { min-width: 700px; }
.week-calendar .calendar-day { min-height: 180px; }
.search-field { min-height: 50px; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0 16px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: white; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; }
.more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.more-card { min-height: 96px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: 19px; color: var(--ink); background: white; }
.more-card > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--brand); background: var(--brand-soft); font-size: 1.5rem; }
.more-card div { display: grid; gap: 3px; }
.more-card small { color: var(--muted); }
.more-card b { color: var(--muted); font-size: 1.6rem; font-weight: 400; }
.settings-card { display: grid; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.settings-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.settings-row span { color: var(--muted); }
.form-dialog, .problem-dialog { width: min(620px,calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: white; box-shadow: 0 28px 90px rgba(34,20,31,.32); }
.form-dialog::backdrop, .problem-dialog::backdrop, .guide-dialog::backdrop { background: rgba(34,20,31,.62); backdrop-filter: blur(5px); }
.form-dialog form { margin: 0; }
/* Long channel labels and history text must stay inside the reminder dialog. */
.reminder-dialog .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.reminder-dialog .form-grid > * { min-width: 0; }
.reminder-dialog .form-grid > p, .reminder-dialog .form-grid > div { grid-column: 1 / -1; overflow-wrap: anywhere; white-space: pre-wrap; }
.reminder-dialog select { width: 100%; }
.reminder-dialog .button, .reminder-panel .button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) { .reminder-dialog .form-grid { grid-template-columns: 1fr; } }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 5px 0 0; font-size: 1.65rem; }
.dialog-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: white; font-size: 1.6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 23px 26px; overflow: auto; }
.field { display: grid; gap: 7px; color: var(--muted); font-size: .86rem; font-weight: 720; }
.field.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; min-height: 47px; padding: 11px 13px; border: 1px solid #d9ccd5; border-radius: 12px; color: var(--ink); outline: 0; background: white; font-weight: 500; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.checkbox-field { grid-template-columns: auto 1fr; align-items: center; }
.checkbox-field input { width: 20px; min-height: 20px; }
.service-picker { padding: 12px; border: 1px solid #d9ccd5; border-radius: 12px; }
.service-picker > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.service-option { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 9px; background: var(--canvas); }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 17px 26px; border-top: 1px solid var(--line); }
.dialog-actions span { flex: 1; }
.problem-dialog > p { padding: 8px 26px 0; font-size: 1.02rem; }
.problem-dialog pre { max-height: 180px; margin: 12px 26px; padding: 12px; overflow: auto; border-radius: 10px; color: var(--muted); background: var(--canvas); white-space: pre-wrap; font-size: .78rem; }
.success-toast { position: fixed; left: 50%; bottom: 104px; z-index: 80; transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; color: white; background: var(--success); box-shadow: var(--shadow); font-weight: 740; }
.guide-dialog { width: min(1040px,calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: var(--canvas); box-shadow: 0 28px 90px rgba(34,20,31,.28); }
.guide-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 26px 30px 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.guide-heading h2 { margin: 5px 0 0; font-size: clamp(1.6rem,4vw,2.35rem); }
.guide-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: white; font-size: 1.8rem; }
.guide-intro { margin: 24px 30px 0; color: var(--muted); }
.guide-steps { list-style: none; margin: 0; padding: 24px 30px 8px; display: grid; gap: 24px; }
.guide-step { display: grid; grid-template-columns: 42px minmax(220px,.85fr) minmax(300px,1.15fr); gap: 18px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.guide-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--brand); font-weight: 800; }
.guide-copy h3 { margin: 4px 0 8px; }
.guide-copy p { margin: 0; color: var(--muted); }
.guide-shot { margin: 0; overflow: hidden; border: 1px solid #ddd2dc; border-radius: 14px; background: #f8f5f8; box-shadow: 0 7px 20px rgba(73,35,60,.08); }
.guide-shot figcaption { padding: 9px 12px; color: var(--muted); background: white; border-top: 1px solid var(--line); font-size: .8rem; }
.phone-shot { max-height: 330px; }
.phone-shot img { width: 100%; height: 285px; display: block; object-fit: cover; object-position: center bottom; }
.mock-phone { min-height: 245px; }
.mock-appbar { display: flex; gap: 16px; padding: 14px 16px; background: white; border-bottom: 1px solid var(--line); }
.mock-tabs { display: flex; gap: 8px; padding: 10px; background: white; border-bottom: 1px solid var(--line); font-size: .76rem; }
.mock-tabs span { padding: 6px 9px; }
.mock-tabs .selected { color: var(--brand); border-bottom: 3px solid var(--brand); font-weight: 800; }
.mock-settings-row { margin: 12px; padding: 12px 14px; display: grid; border-radius: 10px; background: white; }
.mock-settings-row small { color: var(--muted); }
.mock-settings-row.emphasized { outline: 3px solid #d89aba; background: #fff8fc; }
.mock-web-card { margin: 16px; padding: 20px; display: grid; gap: 8px; text-align: center; border-radius: 14px; background: white; }
.mock-web-card p { margin: 0 0 7px; color: var(--muted); font-size: .84rem; }
.mock-cloud { font-size: 2rem; }
.mock-primary { justify-self: center; padding: 9px 14px; border-radius: 9px; color: white; background: var(--brand); font-weight: 750; font-size: .84rem; }
.mock-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eee9ee; font-size: .74rem; }
.mock-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: #c2b5c0; }
.mock-browser-bar strong { margin-left: 8px; padding: 4px 11px; flex: 1; border-radius: 12px; background: white; }
.mock-login { min-height: 200px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; background: radial-gradient(circle at 20% 10%,#f5e5ef 0,transparent 42%),#faf7fa; }
.mock-login small { color: var(--brand); font-weight: 800; letter-spacing: .12em; }
.mock-login > strong { max-width: 300px; font-size: 1.5rem; line-height: 1.08; }
.mock-google { padding: 9px 18px; border: 1px solid #cfc7cf; border-radius: 999px; background: white; font-size: .82rem; }
.guide-footer { position: sticky; bottom: 0; display: flex; justify-content: end; padding: 16px 30px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
@media (min-width: 1100px) {
  .app-shell { padding-left: 210px; }
  .app-nav { left: 0; top: 72px; bottom: 0; width: 210px; height: auto; transform: none; grid-template-columns: 1fr; grid-template-rows: repeat(5,64px); align-content: start; gap: 5px; padding: 24px 14px; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .nav-item { grid-template-columns: 32px 1fr; justify-items: start; padding: 0 17px; font-size: .9rem; }
  .quick-add { width: auto; height: 54px; order: 5; margin: 10px 0 0; border: 0; border-radius: 15px; background: var(--brand); font-size: 1.7rem; }
  .quick-add::after { content: " Нов час"; font-size: .92rem; font-weight: 760; }
}
@media (max-width: 760px) {
  .topbar { height: 64px; padding: 0 14px; }
  .brand img { width: 38px; height: 38px; }
  .brand small, #account-name, #refresh-button, #guide-button { display: none; }
  .app-shell { min-height: calc(100vh - 64px); }
  .app-content { min-height: calc(100vh - 64px); padding: 20px 14px 114px; }
  .sync-message { min-height: 18px; font-size: .72rem; }
  .home-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .action-card { min-height: 130px; padding: 18px; border-radius: 18px; }
  .page-heading { align-items: end; }
  .page-heading h1, .home-heading h1 { font-size: 2rem; }
  .page-heading .button { min-height: 40px; padding: 0 12px; }
  .record-card { padding: 14px; border-radius: 16px; }
  .record-avatar { width: 44px; height: 44px; }
  .more-grid { grid-template-columns: 1fr; }
  .week-strip { gap: 5px; }
  .day-chip { min-height: 56px; padding: 0; font-size: .67rem; }
  .date-picker { min-width: 190px; }
  .calendar-day { min-height: 66px; padding: 4px; }
  .calendar-entry { font-size: .58rem; }
  .form-grid { grid-template-columns: 1fr; padding: 19px 18px; }
  .field.full { grid-column: auto; }
  .dialog-heading { padding: 20px 18px 15px; }
  .dialog-actions { padding: 14px 18px; flex-wrap: wrap; }
  .service-picker > div { grid-template-columns: 1fr; }
  .guide-heading, .guide-intro, .guide-steps, .guide-footer { padding-left: 16px; padding-right: 16px; }
  .guide-step { grid-template-columns: 34px minmax(0,1fr); padding: 15px; gap: 11px; }
  .guide-number { width: 32px; height: 32px; }
  .guide-shot { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .app-nav { width: calc(100% - 12px); grid-template-columns: 1fr 1fr 66px 1fr 1fr; border-radius: 20px; }
  .nav-item { font-size: .66rem; }
  .quick-add { width: 58px; height: 58px; }
  .action-card small { display: none; }
  .action-card { min-height: 112px; }
}


/* Licavo Android parity: schedule grid + smart appointment pickers. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.picker-search{width:100%;min-height:44px;margin:7px 0 8px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}
.picker-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(143,40,94,.10)}
.picker-count{display:block;margin-top:5px;color:var(--muted);font-size:.76rem}
.service-option-copy{min-width:0;display:grid;gap:2px}.service-option-copy strong,.service-option-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-option-copy small{color:var(--muted)}
.app-time-grid{margin:0 0 18px;overflow:auto;border:1px solid #f0d6e6;border-radius:12px;background:#fff}
.time-grid-header{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:46px repeat(var(--day-count,1),minmax(92px,1fr));min-width:max(100%,420px);border-bottom:1px solid var(--line);background:#fff}
.week-time-grid .time-grid-header{--day-count:7;min-width:760px}.day-time-grid .time-grid-header{--day-count:1}
.time-corner{min-height:48px;border-right:1px solid var(--line)}
.time-day-heading{min-height:48px;display:grid;place-items:center;align-content:center;gap:1px;border:0;border-right:1px solid var(--line);color:#6f5a66;background:#fff}.time-day-heading:last-child{border-right:0}.time-day-heading strong{color:var(--ink);font-size:1rem}.time-day-heading.selected{color:var(--brand);background:#fff4f8}.time-day-heading.selected strong{color:var(--brand)}
.time-grid-body{display:grid;grid-template-columns:46px minmax(0,1fr);min-width:max(100%,420px)}.week-time-grid .time-grid-body{min-width:760px}
.time-labels{position:relative;border-right:1px solid var(--line);background:#fff}.time-label{position:absolute;left:0;right:0;color:#7a6873;font-size:11px;text-align:center}
.time-lanes{position:relative;overflow:hidden;background:#fff}.time-hour-line{position:absolute;left:0;right:0;height:60px;border-top:1px solid #eee3e9}.time-day-divider{position:absolute;top:0;bottom:0;width:1px;background:#eee3e9}
.time-appointment{position:absolute;z-index:2;min-height:24px;display:grid;align-content:start;gap:1px;padding:5px 7px;overflow:hidden;border:0;border-left:4px solid;border-radius:8px;text-align:left;box-shadow:0 2px 8px rgba(44,25,37,.10)}.time-appointment strong,.time-appointment span,.time-appointment small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time-appointment strong{font-size:11px}.time-appointment span,.time-appointment small{font-size:10px;color:#614e59}
.time-appointment.business-location,.calendar-entry.business-location{border-color:#e91e63;background:#fdeaf2;color:#9b174f}.time-appointment.client-location,.calendar-entry.client-location{border-color:#3f6fd8;background:#edf2ff;color:#294f9f}
.calendar-entry{padding:2px 4px;border-left:3px solid;border-radius:4px}.calendar-day.today .calendar-day-number{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--brand)}
.week-strip .day-chip.today:not(.selected) strong{color:var(--brand)}
@media(max-width:700px){.week-time-grid .time-grid-header,.week-time-grid .time-grid-body{min-width:700px}.time-appointment{padding:4px}.time-appointment span{display:none}}

/* Licavo Web appointment editor mirrors the mobile appointment workflow. */
.appointment-editor-dialog { width: min(720px,calc(100% - 20px)); }
.appointment-editor-dialog form { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.appointment-editor-heading { flex: 0 0 auto; }
.appointment-heading-actions { display: flex; align-items: center; gap: 8px; }
.icon-save-button { width: 42px; height: 42px; border: 0; border-radius: 50%; color: white; background: var(--brand); font-size: 1.25rem; font-weight: 900; }
.appointment-editor-body { min-height: 0; overflow-y: auto; padding: 0 22px 18px; }
.appointment-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.appointment-section:last-child { border-bottom: 0; }
.autocomplete-field { position: relative; }
.autocomplete-input-shell, .time-input-shell { position: relative; display: flex; align-items: center; }
.autocomplete-input-shell input { width: 100%; padding-left: 42px; padding-right: 42px; }
.field-icon { position: absolute; left: 14px; z-index: 1; color: var(--brand); pointer-events: none; }
.inline-clear, .time-picker-button { position: absolute; right: 7px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.2rem; }
.autocomplete-field > small, .picker-helper { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }
.autocomplete-panel { position: relative; z-index: 12; display: grid; margin-top: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 12px 30px rgba(50,28,42,.14); }
.autocomplete-option { min-height: 54px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: white; text-align: left; }
.autocomplete-option:last-child { border-bottom: 0; }
.autocomplete-option strong { grid-column: 1; }
.autocomplete-option small { grid-column: 1; color: var(--muted); }
.autocomplete-action { grid-column: 2; grid-row: 1 / span 2; color: var(--brand); font-size: 1.15rem; }
.autocomplete-free-text { padding: 12px; color: var(--muted); background: #fcfafb; font-size: .85rem; }
.appointment-address-block { margin-top: 12px; }
.compact-address-grid { gap: 10px; }
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; }
.inline-hint { margin: 8px 0 0; color: var(--muted); font-size: .84rem; }
.selected-service-list { display: grid; gap: 8px; margin-top: 10px; }
.selected-service-card { display: grid; grid-template-columns: minmax(0,1fr) 100px 38px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.selected-service-copy { min-width: 0; display: grid; gap: 2px; }
.selected-service-copy strong, .selected-service-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-service-copy small { color: var(--muted); }
.selected-service-duration { display: grid; gap: 3px; color: var(--muted); font-size: .72rem; }
.selected-service-duration input { width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; }
.selected-service-remove { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--danger); background: #fff1f3; font-size: 1.2rem; }
.compact-button { min-height: 38px; margin-top: 10px; }
.appointment-date-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.time-input-shell input { width: 100%; padding-right: 46px; }
.native-time-proxy { position: absolute; right: 7px; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.busy-times-card { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.busy-times-heading { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.busy-time-row { display: grid; grid-template-columns: 105px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--brand); }
.busy-time-row:last-child { border-bottom: 0; }
.busy-time-row.client-location { border-left-color: #3f6fd8; }
.busy-time-row.business-location { border-left-color: #e91e63; }
.busy-time-range { font-weight: 850; }
.busy-time-copy { min-width: 0; display: grid; gap: 2px; }
.busy-time-copy small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busy-times-empty { padding: 12px; color: var(--success); background: #f6fbf7; }
.appointment-editor-actions { position: sticky; bottom: 0; z-index: 5; flex: 0 0 auto; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); }
@media (max-width: 620px) {
  .appointment-editor-body { padding: 0 14px 16px; }
  .appointment-date-time-grid { grid-template-columns: 1fr; }
  .selected-service-card { grid-template-columns: minmax(0,1fr) 86px 34px; }
  .busy-time-row { grid-template-columns: 94px 1fr; }
}


/* Appointment editor parity hardening. */
.selected-service-card { grid-template-columns: minmax(0,1fr) 100px auto; }
.selected-service-actions { display: flex; align-items: center; gap: 5px; }
.selected-service-change { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--brand-dark); background: white; font-size: .75rem; font-weight: 750; }
.appointment-date-field { display: grid; gap: 7px; }
.appointment-date-button { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; text-align: left; }
.appointment-date-button > span { color: var(--brand); font-size: 1.15rem; }
.appointment-date-picker { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(50,28,42,.08); }
.appointment-date-picker-heading { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px 32px; align-items: center; gap: 7px; text-align: center; }
.appointment-date-picker-heading > div { display: grid; gap: 2px; }
.appointment-date-picker-heading small { color: var(--muted); font-size: .72rem; }
.icon-button.mini { width: 34px; height: 34px; font-size: 1rem; }
.mini-close { width: 30px; height: 30px; }
.appointment-date-legend { display: flex; justify-content: center; gap: 18px; margin: 9px 0; color: var(--muted); font-size: .72rem; }
.appointment-date-legend span { display: inline-flex; align-items: center; gap: 5px; }
.appointment-date-legend i { width: 8px; height: 8px; border-radius: 50%; }
.business-dot { background: #e91e63; }
.client-dot { background: #3f6fd8; }
.appointment-date-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; overflow-x: auto; }
.appointment-date-day { min-width: 78px; min-height: 116px; display: flex; flex-direction: column; gap: 6px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; }
.appointment-date-day.selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #fff2f8; }
.appointment-date-day.today .appointment-date-day-heading strong { color: var(--brand); }
.appointment-date-day-heading { display: flex; justify-content: space-between; align-items: baseline; }
.appointment-date-day-heading small { color: var(--muted); }
.appointment-date-day-entries { display: grid; gap: 3px; min-width: 0; }
.appointment-date-entry { display: block; overflow: hidden; padding-left: 4px; border-left: 3px solid #e91e63; color: #6f5a66; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-date-entry.client-location { border-left-color: #3f6fd8; }
.appointment-date-more { color: var(--muted); font-size: .62rem; }
@media (max-width: 620px) {
  .selected-service-card { grid-template-columns: minmax(0,1fr) 82px auto; }
  .selected-service-actions { flex-direction: column; }
  .appointment-date-grid { grid-template-columns: repeat(7,78px); }
}


/* Appointment action/payment workflow */
.appointment-actions-summary { margin: 0 22px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: var(--canvas); line-height: 1.45; }
.appointment-action-list { display: grid; gap: 10px; padding: 0 22px 24px; }
.appointment-action-button { min-height: 70px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; text-align: left; }
.appointment-action-button > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--brand); background: var(--brand-soft); font-size: 1.25rem; font-weight: 800; }
.appointment-action-button > div { min-width: 0; display: grid; gap: 3px; }
.appointment-action-button strong { font-size: 1rem; }
.appointment-action-button small { color: var(--muted); }
.appointment-action-button b { color: var(--muted); font-size: 1.5rem; font-weight: 400; }
.appointment-action-button:disabled { opacity: .55; cursor: default; }
.appointment-question-dialog .dialog-copy { margin: 0; padding: 0 22px 10px; color: var(--muted); line-height: 1.5; }
.three-actions { grid-template-columns: 1fr 1fr 1fr; }
.payment-dialog-actions { grid-template-columns: auto 1fr auto auto; }
.time-lanes { cursor: crosshair; }
.time-appointment { cursor: pointer; }


/* Licavo Web configurable appointment workflow colors. */
.appointment-workflow-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 12px;margin:2px 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.82)}
.workflow-legend-item{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.68rem;font-weight:720;white-space:nowrap}
.workflow-legend-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.appointment-workflow-label{font-weight:800!important}
.record-card .badge{border:1px solid currentColor;background:#fff}
.appointment-color-settings{display:grid;gap:15px;padding:20px 18px 18px;border-top:1px solid var(--line)}
.appointment-color-settings h2{margin:0;font-size:1.08rem}
.appointment-color-info{margin:-7px 0 2px;color:var(--muted);font-size:.84rem;line-height:1.45}
.appointment-color-group{display:grid;gap:8px}
.appointment-color-heading{display:flex;align-items:center;gap:8px}
.appointment-color-heading strong{font-size:.9rem}
.appointment-color-sample{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.appointment-color-swatches{display:flex;flex-wrap:wrap;gap:9px}
.appointment-color-swatch{width:30px;height:30px;padding:0;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #d8ccd3;transition:transform .12s ease,box-shadow .12s ease}
.appointment-color-swatch.selected{transform:scale(1.08);box-shadow:0 0 0 3px var(--brand)}
.appointment-color-reset{justify-self:start;margin-top:2px}
@media(max-width:700px){.appointment-workflow-legend{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.workflow-legend-item{font-size:.64rem}.appointment-color-swatch{width:32px;height:32px}}
.message-app-logo{width:24px;height:24px;object-fit:contain;flex-shrink:0;margin-right:8px;vertical-align:middle}

/* Booking uses the same labelled form controls as existing owner forms. */
.booking-dialog .form-grid>.field{min-width:0}.booking-dialog .booking-hours-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(90px,1.3fr) repeat(2,minmax(62px,1fr)) 62px repeat(2,minmax(62px,1fr));gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.booking-hours-row input[type=checkbox]{width:22px;min-height:22px;margin:12px 0;align-self:center}.booking-hours-row .field input[type=time]{padding:9px 4px;font-size:.85rem}.booking-dialog>label.field{margin:16px 26px}.booking-dialog>button{margin:8px 0 18px 26px}.booking-dialog .button,.booking-panel .button{white-space:normal;overflow-wrap:anywhere}.booking-panel .record-card{grid-template-columns:1fr;gap:8px}.booking-panel .record-card p{margin:0}
@media(max-width:600px){.booking-dialog .form-grid{grid-template-columns:1fr;padding:18px}.booking-dialog .booking-hours-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}.booking-dialog .dialog-heading{padding:18px}.booking-dialog .dialog-heading h2{font-size:1.25rem}}