:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#23272a;background:#f5f4f1;font-synthesis:none;color-scheme:light;accent-color:#8f6b43;
  --accent:#8f6b43;--accent-dark:#765435;--accent-soft:#f7f2e9;--success:#228253;--text:#25282a;--muted:#7d766e;
}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f5f4f1}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.topbar{height:76px;background:#fff;border-bottom:1px solid #e7e5e0;padding:0 max(24px,calc((100vw - 980px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap;font-size:clamp(19px,3vw,24px);letter-spacing:-.7px;font-weight:820;color:var(--text)}
.brand .brand-main{display:inline-flex;gap:6px;align-items:baseline}.brand .name-part{color:var(--text)}.brand .accent-part{color:#97734d}.brand .brand-dot{color:var(--text)}
.brand-tag{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#948676;font-weight:800}
.navlink{font-size:13px;font-weight:700;color:#625e58;border:1px solid #e5e0d8;padding:10px 14px;border-radius:11px;background:#fff}.navlink span{padding-left:4px}
.main{width:min(100% - 36px,680px);margin:40px auto 80px}.owner-main{max-width:840px}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}h1{font-size:clamp(28px,5vw,38px);line-height:1.12;letter-spacing:-1.5px;margin:0;font-weight:780}h2{font-size:16px;letter-spacing:-.45px;margin:0;font-weight:760}
.subtle{color:#858079;font-size:13px;margin:6px 0 0}.tiny{font-size:12px}.text-button{background:none;border:0;color:#805d39;font-size:12px;font-weight:750;padding:8px 0;white-space:nowrap}
.card{background:#fff;border:1px solid #e8e4dc;border-radius:23px;box-shadow:0 12px 35px #28231b10}.booking-card{padding:24px}.owner-card{padding:23px 25px}.register-card{padding:34px;max-width:510px;margin:0 auto}
.section-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.mini-tag{font-size:11px;color:#79716a;background:#f3efe8;padding:7px 10px;border-radius:99px}
.date-strip{display:flex;overflow-x:auto;overflow-y:hidden;gap:9px;scroll-snap-type:x mandatory;scroll-padding-inline:3px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:3px 2px 13px;scrollbar-width:thin;scrollbar-color:#d5cabe transparent;margin:21px 0 24px}
.date-strip::-webkit-scrollbar{height:5px}.date-strip::-webkit-scrollbar-thumb{background:#d5cabe;border-radius:10px}
.date-button{flex:0 0 76px;min-width:76px;min-height:80px;border:1px solid #e8e2d8;background:#fff;border-radius:14px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;color:#30302e;transition:background .15s,border-color .15s,transform .15s;scroll-snap-align:start}
.date-button:hover{border-color:#97734d;transform:translateY(-1px)}.date-button .weekday{font-size:12px;color:#7c7973}.date-button .day-number{font-size:20px;letter-spacing:-.5px}
.date-button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 17px #97734d2a}.date-button.active .weekday{color:#fff8ee}
.date-button.sunday-disabled,.date-button.sunday-disabled:hover{background:#eeeff0;border-color:#e0e1e2;color:#9ca0a4;cursor:not-allowed;box-shadow:none;transform:none}.date-button.sunday-disabled .weekday,.date-button.sunday-disabled .day-number{color:#a1a5a9}
.closed-day{font-size:9px;color:#9ca0a4;font-weight:700;line-height:1}
.times-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.time-list{border:1px solid #e9e4dc;border-radius:15px;overflow:hidden}
.slot-wrapper{border-bottom:1px solid #eee9e2}.slot-wrapper:last-child{border-bottom:0}.slot-wrapper .time-row{border-bottom:0}
.slot-wrapper.is-expanded,.slot-wrapper.is-expanded .time-row{background:#fbf9f6}.slot-wrapper.is-expanded .row-arrow{transform:rotate(180deg)}
.time-row{display:flex;align-items:center;text-align:left;gap:12px;width:100%;border:0;background:#fff;min-height:64px;padding:0 18px;color:#30302e;transition:background .15s}.time-row:hover{background:#faf7f1}
.time-value{font-size:16px;font-weight:760;letter-spacing:-.2px}.available-label,.confirmed-label{color:var(--success)!important;font-weight:760}.available-label{font-size:12px;margin-left:auto}.row-arrow{color:#8f6b43;font-size:19px;margin-left:7px}
.service-menu{padding:3px 14px 17px;animation:menu-in .16s ease-out}.service-prompt{font-size:12px;color:#726c65;margin:2px 0 12px;font-weight:650}
.service-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.service-option{border:1px solid #e5dfd7;border-radius:12px;background:#fff;min-height:82px;padding:10px 5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#36312d;transition:background .15s,border-color .15s,transform .15s}
.service-option:hover{border-color:#9a7650;background:#f7f2ea;transform:translateY(-1px)}.service-option.picked{border-color:var(--accent);background:#f4eee6;box-shadow:inset 0 0 0 1px var(--accent)}
.service-icon{font-size:25px;line-height:1;color:var(--accent);font-weight:700}.service-name{font-size:11px;font-weight:760;line-height:1.25;text-align:center}
.service-continue{display:block;margin:12px 0 0 auto;padding:11px 19px;font-size:13px}
.upcoming-section{margin-top:29px}.booking-list{margin-top:12px}.count-pill{background:#f0e8dc;border-radius:99px;color:#805d39;font-size:12px;font-weight:800;padding:4px 9px}
.my-booking{border:1px solid #e8e2d8;border-radius:14px;background:#fff;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:9px}.booking-details{display:grid;gap:6px}.booking-details strong{font-size:13px}.booked-service{font-size:12px;color:#7d746b}
.cancel-button,.owner-action{border:1px solid #ead3d3;border-radius:10px;color:#b24c4c;background:#fff;padding:9px 14px;font-size:12px;font-weight:750}.cancel-button:hover,.owner-action.cancel:hover{background:#fff3f3}
.owner-action{border-color:#e5dfd7;color:#5b534a}.owner-action.move{color:#795939}.owner-action.move:hover{background:#faf7f2}.owner-action.cancel{color:#b24c4c}
.empty-bookings,.empty-message{font-size:13px;color:#858079;padding:9px 0}
.cancel-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.6;margin:24px 0;background:#f7f3ec;border:1px solid #e6d8c5;border-radius:13px;padding:13px 14px;color:#62584b}.note-icon{width:19px;height:19px;border:1px solid #c5b5a0;border-radius:50%;font-weight:800;text-align:center;line-height:18px;flex-shrink:0;color:#97734d}
.form-fields{display:grid;gap:8px;margin-top:22px}.form-fields label{font-size:12px;font-weight:760;margin-top:8px}.form-fields input,.move-dialog select{padding:15px;border:1px solid #e4dfd7;border-radius:11px;background:#fff;outline:none;width:100%}.form-fields input:focus,.move-dialog select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #8f6b4324}
.btn{border:0;border-radius:11px;padding:13px 18px;font-weight:760}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}.btn-outline{border:1px solid #e5e1d9;background:#fff;color:#35312c}.btn-wide{margin-top:12px;display:flex;justify-content:space-between}
.toast{visibility:hidden;opacity:0;position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#292b2b;color:#fff;border-radius:13px;padding:13px 20px;font-size:13px;transition:opacity .2s;box-shadow:0 10px 30px #0002;z-index:5;white-space:nowrap}.toast.visible{visibility:visible;opacity:1}
.confirm-dialog,.move-dialog{width:min(410px,calc(100% - 30px));border:1px solid #e5e1d9;border-radius:22px;padding:28px 23px;text-align:center;box-shadow:0 25px 80px #17151230}.confirm-dialog::backdrop,.move-dialog::backdrop{background:#17151280}
.dialog-emoji{width:46px;height:46px;background:#f0e8dc;color:var(--accent);display:grid;place-items:center;border-radius:50%;font-size:24px;font-weight:800;margin:0 auto 11px}
.confirm-dialog .dialog-kicker{font-size:12px;color:#726c65;margin:0 0 8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}.confirm-dialog .dialog-date{font-size:clamp(24px,5vw,31px);line-height:1.22;letter-spacing:-.7px;color:var(--text);font-weight:820;margin:0 0 10px}.confirm-dialog .dialog-service{font-size:15px;color:var(--accent);font-weight:760;margin:0 0 20px}.confirm-dialog .dialog-hint{font-size:17px;line-height:1.5;color:#463c32;background:#f7f2e9;border:1px solid #e8dccb;border-radius:13px;padding:16px 14px;margin:0 0 22px}.dialog-hint strong{display:block;font-weight:820;margin-bottom:4px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.owner-list{margin-top:20px}.owner-day{font-size:12px;font-weight:760;color:#817b72;background:#f7f5f1;padding:11px 13px;border-radius:8px;margin:16px 0 2px}
.owner-row{display:grid;grid-template-columns:72px minmax(0,1fr) 135px 160px;gap:12px;align-items:center;padding:17px 11px;border-bottom:1px solid #eee9e2;font-size:13px}.owner-row:last-child{border-bottom:0}
.owner-time{color:#8f6b43}.owner-customer{display:flex;flex-direction:column;gap:5px}.owner-name{font-weight:650;overflow-wrap:anywhere}.owner-service{font-size:11px;color:#8f6b43}.owner-phone{color:#817b72}.owner-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.owner-footer{font-size:12px;color:#8c877e;text-align:center;margin-top:23px}
.move-dialog{text-align:left}.move-dialog h2{font-size:22px;margin:0 0 6px}.move-dialog .subtle{margin:0 0 18px}.move-fields{display:grid;gap:12px;margin:18px 0}.move-status{font-size:12px;color:#877e74;min-height:18px;margin-top:-3px}.move-summary{background:#f7f2e9;border:1px solid #e8dccb;border-radius:13px;padding:12px 13px;font-size:13px;color:#55493d;margin-bottom:14px}
.date-button:focus-visible,.time-row:focus-visible,.btn:focus-visible,.cancel-button:focus-visible,.service-option:focus-visible,.service-continue:focus-visible,.owner-action:focus-visible{outline:3px solid #cfb08a;outline-offset:2px}
@keyframes menu-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.owner-row{grid-template-columns:70px minmax(0,1fr);gap:8px}.owner-phone{grid-column:2}.owner-actions{grid-column:1 / -1;justify-content:flex-start;padding-top:4px}}
@media(max-width:550px){.topbar{height:68px;padding:0 18px}.brand{gap:8px;font-size:19px}.brand-tag{font-size:9px;letter-spacing:1.4px}.navlink{font-size:12px;padding:9px 12px}.main{width:calc(100% - 28px);margin:32px auto 60px}.page-heading h1{font-size:27px}.booking-card{padding:18px 14px}.date-strip{gap:8px;margin:19px 0 24px;padding-bottom:16px}.date-button{flex-basis:72px;min-width:72px;min-height:76px;border-radius:10px}.date-button .weekday{font-size:10px}.date-button .day-number{font-size:17px}.time-row{min-height:60px;padding:0 14px}.owner-card,.register-card{padding:18px 16px}.mini-tag{font-size:10px}.service-options{gap:6px}.service-option{min-height:78px}.service-name{font-size:10px}.confirm-dialog .dialog-hint{font-size:16px}.dialog-actions{grid-template-columns:1fr}.my-booking{flex-direction:column;align-items:flex-start}}
@media(max-width:400px){.service-menu{padding-inline:9px}.service-options{gap:5px}.service-option{min-height:75px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}.service-menu{animation:none}}

/* V8: readability, compact service cards and prominent cancellation guidance */
body{font-size:16px}
h1{font-size:clamp(30px,5vw,40px)}h2{font-size:18px}
.subtle{font-size:14px}.tiny{font-size:13px}.navlink{font-size:14px}.text-button{font-size:14px}
.mini-tag{font-size:12px}.date-button .weekday{font-size:13px}.date-button .day-number{font-size:22px}
.time-value{font-size:18px}.available-label,.confirmed-label{font-size:14px}.service-prompt{font-size:14px}
.service-options{gap:8px}.service-option{min-height:64px;padding:8px 4px;gap:4px;border-radius:10px}
.service-icon{font-size:17px;line-height:1.2;white-space:nowrap}.service-name{font-size:12px;line-height:1.2}
.service-continue{font-size:14px}.booking-details strong{font-size:15px}.booked-service{font-size:13px}
.cancel-button,.owner-action{font-size:13px}.owner-row,.owner-day{font-size:14px}.owner-service,.owner-footer{font-size:13px}
.empty-message,.empty-bookings{font-size:14px}.btn{font-size:15px}.form-fields label{font-size:14px}
.cancel-note{font-size:15px;line-height:1.55;font-weight:700;color:#673c18;background:#fff0da;border:2px solid #dbb27b;padding:16px;margin:24px 0;border-radius:15px;align-items:center}
.note-icon{width:26px;height:26px;line-height:23px;font-size:17px;border:2px solid #b8792a;color:#945c1e;background:#ffe2b8}
.confirm-dialog .dialog-hint{font-size:18px;background:#fff0da;border:2px solid #dbb27b;color:#673c18;font-weight:650}
.confirm-dialog .dialog-hint strong{font-size:18px}
.confirm-dialog .dialog-date{font-size:clamp(26px,5vw,33px)}
@media(max-width:550px){.page-heading h1{font-size:29px}.date-button .weekday{font-size:12px}.date-button .day-number{font-size:19px}.mini-tag{font-size:11px}.service-option{min-height:61px;padding:7px 3px}.service-icon{font-size:16px}.service-name{font-size:11px}.navlink{font-size:12px}.cancel-note{font-size:14px}.confirm-dialog .dialog-hint{font-size:17px}}

/* V9: fifteen-minute scheduling and compact people controls */
.people-heading{font-size:13px;font-weight:760;color:#4d463f;margin:13px 0 8px}
.people-options{display:flex;gap:8px;align-items:center}
.people-option{width:46px;height:42px;background:#fff;border:1px solid #dfd8ce;border-radius:10px;font-size:16px;font-weight:800;color:#403b35}
.people-option.picked{background:#8f6b43;color:#fff;border-color:#8f6b43}
.people-option:disabled{background:#f0efed;color:#b6b3b0;cursor:not-allowed;border-color:#e4e1dd}
.people-option:focus-visible{outline:3px solid #cfb08a;outline-offset:2px}
.service-menu{padding-top:13px}
.service-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:290px}
.service-option{min-height:66px}
#monthLabel{font-size:16px;color:#665d53;font-weight:750;margin:0;text-transform:capitalize}
.cancel-note{background:#fff2d9;border-color:#e6b764;color:#59401c;font-size:15px;line-height:1.55}
.cancel-note strong{font-weight:850}
@media(max-width:550px){.time-row{min-height:58px}.service-option{min-height:60px}}

/* V10: Keep cancellation notice text aligned as a single block */
.cancel-note{display:flex;align-items:flex-start;gap:12px}
.cancel-note .note-icon{flex:0 0 26px;margin-top:1px}
.cancel-note .cancel-copy{display:block;flex:1;min-width:0;line-height:1.55}

/* V12 — compact mobile header, top appointments and month tabs */
.customer-main .upcoming-section{margin-top:0;margin-bottom:12px}
.customer-main .cancel-note{margin:12px 0 20px}
.month-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 9px;scrollbar-width:none}
.month-tabs::-webkit-scrollbar{display:none}
.month-tab{border:1px solid #e7e1d8;border-radius:11px;background:white;color:#82786c;font-weight:730;font-size:14px;white-space:nowrap;padding:10px 15px}
.month-tab.active{background:#8f6b43;border-color:#8f6b43;color:white;box-shadow:0 2px 8px #8f6b4322}
.month-tab:focus-visible{outline:3px solid #cfb08a;outline-offset:2px}
.booking-card .date-strip{margin-top:12px}
.time-value{font-size:19px;font-weight:800}
.owner-heading-actions{display:flex;align-items:center;gap:13px}
.owner-add{background:#8f6b43;border:0;border-radius:11px;color:#fff;font-size:27px;font-weight:500;line-height:1;width:41px;height:41px;display:grid;place-items:center}
.owner-add:hover{background:#765435}.owner-add:focus-visible{outline:3px solid #cfb08a;outline-offset:2px}
.manual-dialog input:not([type="checkbox"]),.manual-dialog select{width:100%;min-height:43px;padding:12px;border:1px solid #e4dfd7;border-radius:10px;background:#fff}
.manual-dialog label{font-size:13px;font-weight:700;color:#51483f}
.manual-services{display:flex;gap:16px;flex-wrap:wrap}.manual-services label{display:flex;align-items:center;gap:6px;font-weight:500}
.manual-dialog .move-fields{gap:8px;max-height:min(65vh,540px);overflow-y:auto;padding-right:3px}
@media(max-width:550px){
 .topbar{height:58px;padding:0 13px}.brand{font-size:17px;gap:5px}.brand .brand-main{gap:3px}.brand-tag{font-size:8px;letter-spacing:.7px}.navlink{font-size:10px;padding:7px 8px}
 .customer-main{margin-top:17px}.customer-main .page-heading{margin-bottom:13px}.customer-main .page-heading h1{font-size:25px}
 .customer-main .upcoming-section{margin-bottom:9px}.customer-main .cancel-note{margin:10px 0 14px}
 .month-tab{padding:9px 12px;font-size:13px}.time-value{font-size:19px}
}

/* V13 — compact warning, monthly calendar, and comfortable service controls */
.customer-main .cancel-note{padding:9px 11px;margin:8px 0 14px;gap:9px;border-width:1px;border-radius:12px;line-height:1.35;font-size:13px;align-items:center}
.customer-main .cancel-note .note-icon{width:20px;height:20px;flex-basis:20px;line-height:17px;font-size:12px;margin-top:0}
.customer-main .cancel-note .cancel-copy{line-height:1.35}
.month-tabs{margin-bottom:13px}
.month-tab{flex:1;min-width:max-content;text-transform:capitalize}
.monthly-calendar{border:1px solid #eee7df;border-radius:16px;padding:12px;background:#fff}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-weekdays{margin-bottom:9px;text-align:center}
.calendar-weekdays span{font-size:12px;font-weight:750;color:#817b72;padding:5px 0}
.calendar-grid{align-items:stretch}
.calendar-pad{min-width:0}
.calendar-day{width:100%;min-width:0;aspect-ratio:1/1;min-height:44px;border-radius:12px;border:1px solid transparent;background:#f8f6f2;color:#34302c;font-size:16px;font-weight:760;display:grid;place-items:center;transition:background .15s,border-color .15s}
.calendar-day:hover:not(:disabled){border-color:#8f6b43;background:#f3ece2}
.calendar-day.active{background:#8f6b43;color:white;border-color:#8f6b43;box-shadow:0 4px 10px #8f6b4326}
.calendar-day.unavailable{background:#f0f0f0;color:#b1b1b1;cursor:not-allowed}
.calendar-day:focus-visible{outline:3px solid #c5a27c;outline-offset:2px}
#timesSection{margin-top:20px}
#timesSection .times-heading{margin-bottom:12px}
.service-menu{padding:12px 14px 16px}
.people-heading{font-size:14px;margin:0 0 9px}
.people-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.people-option{width:100%;min-width:0;min-height:44px}
.service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:none;margin-top:13px}
.service-option{width:100%;min-width:0;min-height:70px;padding:10px 8px;gap:6px;display:flex;flex-direction:row;justify-content:center;align-items:center;overflow:hidden}
.service-icon{font-size:21px;line-height:1.1;flex-shrink:0}
.service-name{font-size:13px;line-height:1.25;white-space:normal}
@media(max-width:550px){
 .customer-main .cancel-note{font-size:12px;padding:8px 10px;margin:8px 0 12px}
 .monthly-calendar{padding:9px}
 .calendar-weekdays,.calendar-grid{gap:4px}
 .calendar-day{min-height:37px;border-radius:9px;font-size:15px}
 .calendar-weekdays span{font-size:11px}
 .service-menu{padding:11px 10px 14px}
 .people-options{gap:6px}
 .service-options{gap:7px}
 .service-option{padding:9px 5px;min-height:65px}
 .service-name{font-size:12px}
 .service-icon{font-size:19px}
}