:root{
  color-scheme: light dark;
  --bg:#FBF5F2;
  --surface:#FFFFFF;
  --surface-2:#F5E7E4;
  --ink:#241419;
  --ink-soft:#7A6266;
  --border:#E9D6D2;
  --accent:#7C1F3B;
  --accent-ink:#FFF9F7;
  --accent-soft:#F3D9DE;
  --gold:#A9782E;
  --ok:#3F7A55;
  --ok-soft:#DEEAE1;
  --busy:#B7A6A9;
  --shadow: 0 1px 2px rgba(36,20,25,0.06), 0 8px 24px -12px rgba(36,20,25,0.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1C1216;
    --surface:#251A1E;
    --surface-2:#33232A;
    --ink:#F3E9E7;
    --ink-soft:#C3AEB0;
    --border:#4A343B;
    --accent:#E38FA5;
    --accent-ink:#241419;
    --accent-soft:#4A2530;
    --gold:#D9B672;
    --ok:#7FCB9B;
    --ok-soft:#22352A;
    --busy:#6B5A5F;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  padding:0 20px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; text-wrap:balance; margin:0;}
button{font-family:inherit;}
::selection{background:var(--accent-soft);}

.wrap{max-width:1180px; margin:0 auto; padding-block:28px 64px;}

/* header */
header.top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.brand h1{font-size:38px; font-style:italic; font-weight:600; letter-spacing:.01em;}
.brand .tag{font-size:14px; color:var(--ink-soft);}
.today-chip{
  font-size:13px; color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:7px 14px;
  white-space:nowrap;
}
.today-chip b{color:var(--ink); font-weight:700;}
.owner-btn{
  font-size:12.5px; font-weight:700; color:var(--ink-soft); background:none;
  border:1px solid var(--border); border-radius:999px; padding:7px 14px; cursor:pointer;
  white-space:nowrap;
}
.owner-btn:hover{border-color:var(--accent); color:var(--accent);}
.owner-btn.on{background:var(--ok-soft); border-color:var(--ok); color:var(--ink);}
.header-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.owner-footer{justify-content:center; margin-top:28px;}

.owner-gate{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
  padding:12px 14px; margin-top:12px;
}
.owner-gate input{
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:8px; padding:8px 11px; font-size:14px; font-family:inherit; width:160px;
}
.owner-gate input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.owner-gate button{
  border:none; background:var(--accent); color:var(--accent-ink); border-radius:8px;
  padding:8px 16px; font-size:13px; font-weight:800; cursor:pointer;
}
.owner-error{font-size:12.5px; color:var(--accent); font-weight:700;}

/* layout */
.layout{
  display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:22px; align-items:start;
}
@media (max-width:760px){ .layout{grid-template-columns:1fr;} }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:20px; box-shadow:var(--shadow);
}
.panel + .panel{margin-top:18px;}
.panel h2{font-size:19px; font-weight:600; font-style:italic;}
.step-label{display:flex; align-items:center; gap:9px; margin-bottom:14px;}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:12px; font-weight:800; flex:none;
}

/* services */
.svc-group{margin-bottom:16px;}
.svc-group:last-child{margin-bottom:0;}
.svc-group .cat{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.svc-row{
  display:flex; align-items:center; gap:12px; width:100%;
  text-align:left; background:transparent; border:1px solid var(--border);
  border-radius:11px; padding:10px 12px; margin-bottom:8px; cursor:pointer;
  transition:border-color .15s, background .15s;
  color:var(--ink);
}
.svc-row:last-child{margin-bottom:0;}
.svc-row:hover{border-color:var(--accent);}
.svc-row.on{background:var(--accent-soft); border-color:var(--accent);}
.svc-check{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--ink-soft); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--accent-ink);
}
.svc-row.on .svc-check{background:var(--accent); border-color:var(--accent);}
.svc-name{flex:1; font-size:14.5px; font-weight:600;}
.svc-price{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* summary bar */
.summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--border);
}
.summary .count{font-size:12.5px; color:var(--ink-soft);}
.summary .totals{text-align:right;}
.summary .price{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}

/* calendar */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-head .month{font-size:19px; font-weight:600; font-style:italic;}
.navbtn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.navbtn:hover{border-color:var(--accent); color:var(--accent);}
.navbtn:disabled{opacity:.35; cursor:not-allowed;}
.weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px;}
.weekdays span{font-size:10.5px; text-align:center; color:var(--ink-soft); font-weight:700; letter-spacing:.04em;}
.days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.day{
  position:relative; aspect-ratio:1; border-radius:10px; border:1px solid transparent;
  background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:13.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.day.blank{background:none; cursor:default;}
.day.past{color:var(--busy); cursor:not-allowed; opacity:.45;}
.day.today{border-color:var(--gold);}
.day.sel{background:var(--accent); color:var(--accent-ink);}
.day.closed:not(.past)::after{
  content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--busy);
}
.day .dot-mark{
  position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--ok);
}
.day.sel .dot-mark{background:var(--accent-ink);}

/* slots */
.slot-hint{font-size:13px; color:var(--ink-soft); padding:6px 2px;}
.slots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.slot{
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.slot:hover{border-color:var(--accent);}
.slot.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

/* contact form */
.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px;}
.field input, .field textarea{
  width:100%; border:1px solid var(--border); background:var(--bg); color:var(--ink);
  border-radius:9px; padding:9px 11px; font-size:14px; font-family:inherit;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:420px){ .two-col{grid-template-columns:1fr;} }

.confirm-btn{
  width:100%; padding:13px; border-radius:11px; border:none; background:var(--accent); color:var(--accent-ink);
  font-size:15px; font-weight:800; cursor:pointer; margin-top:6px;
}
.confirm-btn:disabled{opacity:.4; cursor:not-allowed;}
.confirm-btn:not(:disabled):hover{filter:brightness(1.06);}

.banner{
  background:var(--ok-soft); border:1px solid var(--ok); color:var(--ink); border-radius:11px;
  padding:12px 14px; font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.banner.error{background:var(--accent-soft); border-color:var(--accent);}
.banner b{font-weight:800;}

/* reminders */
#remindersPanel{margin-bottom:22px; border-color:var(--gold);}
#remindersPanel h2{margin-bottom:14px;}
.remind-row{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:8px;
}
.remind-row:last-child{margin-bottom:0;}
.remind-row.done{opacity:.55;}
.remind-row .time{
  font-weight:800; font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--accent); min-width:78px;
}
.remind-row .info{flex:1; min-width:0;}
.remind-row .who{font-weight:700; font-size:14px;}
.remind-row .meta{font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.remind-actions{display:flex; align-items:center; gap:8px; flex:none;}
.text-btn{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px;
  padding:8px 16px; font-size:12.5px; font-weight:800; cursor:pointer; text-decoration:none;
  white-space:nowrap; display:inline-block;
}
.text-btn:hover{filter:brightness(1.06);}
.sent-toggle{
  background:none; border:1px solid var(--border); color:var(--ink-soft); border-radius:999px;
  padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.sent-toggle.on{background:var(--ok-soft); border-color:var(--ok); color:var(--ink);}

/* schedule */
.schedule{margin-top:22px;}
.schedule h2{font-size:21px; font-weight:600; font-style:italic; margin-bottom:14px;}
.day-group{margin-bottom:16px;}
.day-group .dlabel{
  font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--gold);
  margin-bottom:8px;
}
.appt{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow);
}
.appt .time{
  font-weight:800; font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--accent);
  min-width:78px;
}
.appt .info{flex:1; min-width:0;}
.appt .who{font-weight:700; font-size:14px;}
.appt .svcs{font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.appt .price{font-weight:700; font-variant-numeric:tabular-nums; font-size:13.5px; white-space:nowrap;}
.cancel-btn{
  background:none; border:1px solid var(--border); color:var(--ink-soft); border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:13px; flex:none;
}
.cancel-btn:hover{border-color:var(--accent); color:var(--accent);}
.cancel-btn.confirming{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-size:10.5px; font-weight:800; width:auto; padding:0 10px;}
.empty-note{font-size:13.5px; color:var(--ink-soft); padding:10px 2px;}

/* per-day availability editor (owner) */
#dateEditor{margin-top:16px; padding-top:16px; border-top:1px dashed var(--border);}
.date-editor-head{font-size:13.5px; font-weight:700; margin-bottom:9px;}
.htimes{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.htime-chip{
  display:inline-flex; align-items:center; gap:4px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:5px 4px 5px 12px;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
.htime-chip button{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:14px;
  line-height:1; padding:3px 7px; border-radius:50%;
}
.htime-chip button:hover{color:var(--accent); background:var(--surface);}
.htime-add{display:inline-flex; align-items:center; gap:6px;}
.htime-add input[type="time"]{
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
  border-radius:8px; padding:6px 9px; font-size:13px; font-family:inherit;
}
.htime-add button{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px;
  padding:6px 13px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap;
}
.hours-save-row{display:flex; align-items:center; gap:12px; margin-top:14px;}
.hours-save-row .confirm-btn{width:auto; margin-top:0; padding:11px 20px;}
.hours-saved{font-size:12.5px; color:var(--ok); font-weight:700;}