:root{color-scheme:light;--bg:#eff4ff;--card:#fff;--ink:#1a2333;--muted:#5a667f;--line:#d3dcf0;--primary:#3467ff;--primary-ink:#fff;--primary-soft:#edf3ff;--link:#2a55e0;--danger:#c93a3a;--ok:#0f7a4d;--warn:#8a5a00;--shadow:0 18px 38px rgba(43,69,122,.12)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",Tahoma,system-ui,Arial,sans-serif;min-height:100vh}
body{background:linear-gradient(180deg,#eff4ff 0%,#f8fbff 100%) fixed
header.top{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;background:rgba(255,255,255,.78);border-bottom:1px solid var(--line);flex-wrap:wrap;backdrop-filter:blur(10px)}
header.top .brand{font-weight:700}
header.top form{display:inline;margin:0}
nav.tabs{display:flex;gap:.25rem;padding:.5rem 1rem 0;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line)}
nav.tabs a{padding:.5rem .9rem;border-radius:8px 8px 0 0;color:var(--muted);text-decoration:none}
nav.tabs a.on{background:var(--bg);color:var(--ink);font-weight:700;border:1px solid var(--line);border-bottom-color:var(--bg)}
main{max-width:1100px;margin:1rem auto;padding:0 1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.1rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.narrow{max-width:420px;margin-inline:auto}
h1{font-size:1.4rem;margin:.2rem 0 1rem}h2{font-size:1.1rem;margin:.2rem 0 .8rem}
label{display:block;margin:.6rem 0 .2rem;font-weight:600}
input,select,textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
input[dir=ltr],.ltr{direction:ltr;text-align:start}
button,.btn{display:inline-block;padding:.55rem 1rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
button.primary,.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:700}
button.primary:hover,.btn.primary:hover{transform:translateY(-1px)}
button:not(.primary):not(.danger),.btn:not(.primary){background:var(--primary-soft);color:var(--link);border-color:rgba(52,103,255,.18)}
button.danger{color:var(--danger);border-color:var(--danger)}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}.row>*{flex:1 1 160px}
.err{color:var(--danger);font-weight:600;margin:.5rem 0}.ok{color:var(--ok);font-weight:600;margin:.5rem 0}
table{width:100%;border-collapse:collapse}th,td{padding:.45rem .5rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.9rem}
.table-wrap{overflow-x:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.9rem;box-shadow:var(--shadow)}.kpi b{display:block;font-size:1.8rem}.kpi span{color:var(--muted);font-size:.9rem}
.pill{display:inline-block;padding:.05rem .55rem;border-radius:99px;border:1px solid var(--line);font-size:.85rem}
.pill.active{color:var(--ok);border-color:var(--ok)}.pill.pending{color:var(--warn);border-color:var(--warn)}.pill.suspended,.pill.locked{color:var(--danger);border-color:var(--danger)}
.muted{color:var(--muted)}.small{font-size:.9rem}
.inline-actions form{display:inline-block;margin:.1rem}
.inline-actions button{padding:.25rem .6rem;font-size:.88rem}
details>summary{cursor:pointer;color:var(--link);margin:.3rem 0}
.copyrow{display:flex;gap:.4rem}.copyrow input{flex:1}
img.qr{width:200px;height:200px;background:#fff;padding:6px;border-radius:8px}
textarea.msg{min-height:8rem}
a{color:var(--link)}
td .ltr,td bdi.ltr{white-space:nowrap}
td.ltr{white-space:nowrap}
/* ---- phase 4: settings, calendar, customer card */
nav.subtabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
nav.subtabs a{padding:.35rem .8rem;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--muted);background:var(--card)}
nav.subtabs a.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
label.check{display:inline-flex;gap:.4rem;align-items:center;margin:.3rem .8rem .3rem 0;font-weight:500}
label.check input{width:auto}
fieldset.days{border:1px solid var(--line);border-radius:8px;margin:.6rem 0;padding:.3rem .7rem}
details.item{border:1px solid var(--line);border-radius:10px;padding:.2rem .7rem;margin:.4rem 0;background:var(--bg)}
details.item.off{opacity:.65}
.dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:#999;vertical-align:middle}
input.t{width:auto;min-width:6.5rem;padding:.3rem}
.banner{background:var(--bg);border:1px dashed var(--primary);display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
a.kpi{text-decoration:none;color:inherit}
.steps{display:flex;gap:.4rem;list-style:none;padding:0;flex-wrap:wrap}.steps li{padding:.2rem .7rem;border:1px solid var(--line);border-radius:99px;color:var(--muted)}
.steps li.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.steps li.done{color:var(--ok);border-color:var(--ok)}
.narrow.wide{max-width:720px}
.msgprev{white-space:pre-wrap;background:var(--bg);padding:.5rem;border-radius:8px;max-width:28rem}
/* calendar */
.cal-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.cal-bar .grow{flex:1}.cal-title{font-size:1.1rem}
.seg{display:inline-flex}.seg button{border-radius:0;margin-inline-start:-1px;padding:.4rem .75rem}
.seg button:first-child{border-start-start-radius:8px;border-end-start-radius:8px;margin-inline-start:0}
.seg button:last-child{border-start-end-radius:8px;border-end-end-radius:8px}
.seg button.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.cal-bar select{width:auto}
.grid-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:72vh}
.grid-head,.grid-cols{display:flex;min-width:max-content}
.grid-head{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
.axis-h,.axis{flex:0 0 3.2rem;position:sticky;inset-inline-start:0;background:var(--card);z-index:4}
.col-h{flex:1 0 9rem;padding:.4rem .5rem;font-weight:600;border-inline-start:1px solid var(--line);white-space:nowrap}
.col-h.today{color:var(--primary)}.col-h.clickable{cursor:pointer}
.axis{position:sticky}.axis .tick{position:absolute;font-size:.75rem;color:var(--muted);padding:0 .3rem;transform:translateY(-.5em)}
.axis{height:auto}
.grid-cols{position:relative}
.grid-cols .axis{position:sticky;min-height:100%}
.col{flex:1 0 9rem;position:relative;border-inline-start:1px solid var(--line);cursor:cell}
.col.today{background:rgba(36,85,230,.04)}
.hline{position:absolute;inset-inline:0;border-top:1px solid var(--line);pointer-events:auto}
.closed{position:absolute;inset-inline:0;background:repeating-linear-gradient(45deg,rgba(120,120,120,.10),rgba(120,120,120,.10) 6px,rgba(120,120,120,.04) 6px,rgba(120,120,120,.04) 12px)}
.nowline{position:absolute;inset-inline:0;border-top:2px solid #e23d3d;z-index:6;pointer-events:none}
.appt{position:absolute;overflow:hidden;border:1px solid var(--line);border-inline-start:5px solid var(--primary);border-radius:8px;background:var(--card);padding:.1rem .35rem;font-size:.82rem;line-height:1.25;cursor:pointer;z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.12);touch-action:none}
.appt .sub{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt.drag{opacity:.8;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.appt.st-confirmed{background:rgba(36,85,230,.10)}.appt.st-arrived{background:rgba(240,195,109,.30)}
.appt.st-completed{background:rgba(20,108,46,.14)}.appt.st-cancelled,.appt.st-no_show{opacity:.55;text-decoration:line-through}
.month-head,.month-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.month-head div{padding:.3rem;color:var(--muted);text-align:center;font-weight:600}
.mcell{min-height:6rem;border:1px solid var(--line);padding:.25rem;background:var(--card);cursor:pointer;overflow:hidden}
.mcell.other{opacity:.5}.mcell.today{border-color:var(--primary);border-width:2px}
.mcell .cnt{float:inline-end;background:var(--primary);color:var(--primary-ink);border-radius:99px;padding:0 .45rem;font-size:.75rem}
.mcell .mi{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.list-view h3{margin:1rem 0 .3rem;font-size:1rem}
.li{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.5rem .6rem;border:1px solid var(--line);border-radius:10px;margin:.3rem 0;background:var(--card);cursor:pointer;text-decoration:none;color:inherit}
.li.st-cancelled,.li.st-no_show{opacity:.6}
.pill.scheduled,.pill.confirmed,.pill.arrived{color:var(--primary);border-color:var(--primary)}.pill.completed{color:var(--ok);border-color:var(--ok)}.pill.cancelled,.pill.no_show{color:var(--danger);border-color:var(--danger)}
dialog.dlg{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);width:min(560px,94vw);max-height:92vh;overflow:auto;padding:1rem 1.2rem}
dialog.dlg::backdrop{background:rgba(0,0,0,.45)}
dialog .x{float:inline-end;padding:.1rem .6rem;font-size:1.2rem;line-height:1.2}
.frow{display:block}.frow>span{display:block;font-weight:600;margin:.5rem 0 .15rem}
.results{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.results .res{text-align:start;width:100%}.results .new{color:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}.chip{padding:.25rem .6rem;border-radius:99px;font-size:.88rem}.chip.rec{border-color:var(--ok);color:var(--ok)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0}.msg{color:var(--danger);margin:.5rem 0;white-space:pre-line}
.toast{position:fixed;inset-block-end:1rem;inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:10px;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.toast.bad{background:var(--danger);color:#fff}
@media (max-width:700px){.col-h,.col{flex-basis:8rem}.cal-bar{gap:.35rem}}
/* ---- phase 5: payments, receipts, reports */
.pill.later,.pill.skipped{color:var(--warn);border-color:var(--warn)}
.pill.receipted{color:var(--ok);border-color:var(--ok)}
.pill.voided,.pill.cancelled{color:var(--danger);border-color:var(--danger)}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:.5rem 0 1rem}
dl.facts dt{color:var(--muted)}dl.facts dd{margin:0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.rwrap{background:#fff;color:#1d2330;max-width:640px;margin-inline:auto;overflow:hidden}
.rdoc{position:relative;--ra:#293c73;--rs:#f3f5fb;--rl:#dce0ec;--rg:#6a7080}
.rbar{height:10px;background:var(--ra);margin:-1rem -1rem 1rem}
.rhead{display:flex;align-items:center;gap:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--rl)}
.rmono{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--ra);color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:700}
.rid{flex:1;min-width:0}
.rname{font-size:1.3rem;font-weight:700;color:var(--ra)}.rname.second{font-size:1.05rem}.rinfo{font-size:.82rem;color:var(--rg)}
.rbadge{flex:none;border:1.5px solid var(--ra);color:var(--ra);border-radius:999px;padding:.2rem .8rem;font-weight:700;font-size:.82rem;align-self:flex-start}
.rtitle{margin:1.1rem 0 .1rem;color:var(--ra);font-size:1.6rem}
.rsub{margin:0 0 .8rem;color:var(--rg);font-size:.9rem}
.rbanner{background:#fdeeee;border:1px solid #cc3333;color:#a61b1b;padding:.5rem .7rem;border-radius:8px;font-weight:600}
.rcards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}
.rcard{background:var(--rs);border:1px solid var(--rl);border-radius:10px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.1rem}
.rcard span{color:var(--rg);font-size:.8rem;margin-top:.25rem}.rcard span:first-child{margin-top:0}.rcard b{font-size:1rem}.rcard small{color:var(--rg);font-size:.88rem}
.rtable{width:100%;border-collapse:separate;border-spacing:0;margin:1.2rem 0 .4rem}
.rtable th{background:var(--ra);color:#fff;font-size:.82rem;padding:.55rem .7rem;text-align:start}
.rtable th:first-child{border-radius:0 8px 8px 0}.rtable th:last-child{border-radius:8px 0 0 8px}
[dir=ltr] .rtable th:first-child{border-radius:8px 0 0 8px}[dir=ltr] .rtable th:last-child{border-radius:0 8px 8px 0}
.rtable td{padding:.75rem .7rem;border-bottom:1px solid var(--rl)}.rtable td.what{font-weight:700}.rtable .num{text-align:end;white-space:nowrap}
.rtable tr.disc td{color:var(--rg);font-size:.9rem;padding:.5rem .7rem}
.rsec{font-size:1rem;color:var(--ra);margin:1.2rem 0 .2rem}
dl.rrows{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.45rem 1rem;margin:.4rem 0 1.1rem}
dl.rrows dt{color:var(--rg)}dl.rrows dd{margin:0;border-bottom:1px solid var(--rl);padding-bottom:.3rem}
.ramount{display:flex;justify-content:space-between;align-items:center;background:var(--ra);border-radius:12px;padding:.9rem 1.1rem;color:#fff}
.ramount span{font-weight:700}.ramount b{font-size:1.7rem}
.rfoot{text-align:start;margin:1.1rem 0 .3rem;font-weight:700}.rtail{text-align:center;color:var(--rg);font-size:.8rem;border-top:1px solid var(--rl);padding-top:.5rem;margin-top:1rem}
.rdoc.cancelled .ramount{opacity:.55}
@media (max-width:420px){.rcards{grid-template-columns:1fr}.rhead{flex-wrap:wrap}.rbadge{order:-1}}
.rpublic{max-width:680px;margin:1rem auto;padding:0 1rem}
body.public{background:#f6f7fb}
@media print{header.top,nav.tabs,.noprint,nav.subtabs{display:none!important}body,body.public{background:#fff}.card{border:0}.rwrap{max-width:none}}
.kpis-3{grid-template-columns:repeat(3,1fr);gap:.4rem}.kpis-3 .kpi{padding:.5rem}.kpis-3 .kpi b{font-size:1.15rem}.kpis-3 .kpi span{font-size:.78rem}
.filters-box>summary{cursor:pointer;font-weight:600;padding:.3rem 0}
@media (max-width:640px){
 .pay-tbl thead{display:none}.pay-tbl,.pay-tbl tbody{display:block}
 .pay-tbl tr{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"c c a" "f f s" "d m r";gap:.1rem .6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
 .pay-tbl td{border:0;padding:0}.pay-tbl .t-c{grid-area:c;font-weight:600}.pay-tbl .t-a{grid-area:a;font-weight:700;text-align:end}.pay-tbl .t-f{grid-area:f}.pay-tbl .t-s{grid-area:s;text-align:end}
 .pay-tbl .t-d{grid-area:d;font-size:.82rem;color:var(--muted)}.pay-tbl .t-m{grid-area:m;font-size:.82rem;color:var(--muted)}.pay-tbl .t-r{grid-area:r;text-align:end;font-size:.85rem}
 .stack thead{display:none}.stack,.stack tbody{display:block}.stack tr{display:block;padding:.5rem 0;border-bottom:1px solid var(--line)}
 .stack td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.15rem 0}.stack td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:.85rem}
}
.kpis+.kpis,.kpis+.kpis-3{margin-top:.75rem}
/* ---- phase 7: help, report a problem, footer */
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:1rem 1rem 2rem}
ol.guide{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.9rem}
ol.guide li{background:var(--soft,#f3f5fb);border:1px solid var(--line,#dce0ec);border-radius:12px;padding:.8rem 1rem}
ol.guide h2{margin:0 0 .3rem;font-size:1.05rem}ol.guide p{margin:0;line-height:1.6}
.callout{margin-top:1rem;font-weight:600}
.prob{border:1px solid var(--line,#dce0ec);border-radius:10px;padding:.7rem .9rem;margin:.7rem 0}.prob.done{opacity:.6}.prob .msg{white-space:pre-wrap}
textarea{width:100%;box-sizing:border-box;font:inherit;padding:.6rem;border:1px solid var(--line,#c9cfdd);border-radius:8px}