:root{
/* ===== Design system (salon back office + booking) — colors: warm BURGUNDY + BROWN on cream/sand (Oct 2026) ===== */
--acc:#7b1e2e;--acc-strong:#5c1622;--acc-mid:#c08a8f;--acc2:#f4e4e1;--acc3:#fbf4f0;--acc-ring:rgba(123,30,46,.28);--on-acc:#fff;
--brn:#6f4526;--brn-strong:#4f301a;--brn-tint:#f0e4d6;--gold:#b8862b;--gold-ink:#6b4a0b;--gold-bg:#f8ecc9;
--bg:#f6efe6;--card:#fffdfa;--ink:#2b1d17;--ink2:#4a372d;--mute:#6d5a4e;--line:#e7dacb;--line2:#d6c4b1;
--ok:#47621a;--ok-bg:#edf0da;--warn:#8a4f06;--warn-bg:#fcecd0;--info:#9a3b12;--info-bg:#fae3d5;--err:#a51d1d;--err-bg:#fbe6e3;--slate:#6a5b50;--slate-bg:#efe7df;
/* signed-in / present technician (turn bar): a clear green, distinct from the burgundy/brown/gold theme */
--in:#23673a;--in-bg:#e2f1e3;--in-line:#7fbf90;
/* type scale (system stack) */
--fs-xs:12px;--fs-sm:13.5px;--fs-md:15.5px;--fs-lg:17.5px;--fs-xl:21px;--fs-2xl:26px;--fs-3xl:34px;
/* spacing scale */
--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:28px;--sp7:40px;
/* radii + shadows */
--r-sm:8px;--r-md:12px;--r:16px;--r-lg:22px;--r-btn:12px;
--sh1:0 1px 2px rgba(43,29,23,.06),0 1px 1px rgba(43,29,23,.04);--sh2:0 2px 6px rgba(43,29,23,.06),0 8px 24px rgba(43,29,23,.07);--sh3:0 12px 40px rgba(43,29,23,.18);
--tap:44px;--tb-w:264px}
*{box-sizing:border-box}body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--card);border-bottom:1px solid var(--line);padding:14px 18px;position:sticky;top:0;z-index:5}
header h1{font-size:19px;margin:0}header p{margin:2px 0 0;color:var(--mute);font-size:13px}
main{max-width:640px;margin:0 auto;padding:16px}main.wide{max-width:1000px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
h2{font-size:17px;margin:0 0 12px}h3{font-size:15px;margin:14px 0 8px}
.steps{display:flex;gap:6px;margin-bottom:14px}.steps span{flex:1;height:4px;border-radius:4px;background:var(--line)}.steps span.on{background:var(--acc)}
.opt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff}
.opt.sel{border-color:var(--acc);background:var(--acc2)}.opt input{width:20px;height:20px;accent-color:var(--acc)}
.opt .t{flex:1}.opt .s{color:var(--mute);font-size:13px}.badge{background:var(--acc);color:#fff;border-radius:999px;font-size:12px;padding:2px 8px}
button,.btn{appearance:none;border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:600;cursor:pointer;background:var(--acc);color:#fff;text-decoration:none;display:inline-block;text-align:center}
button.sec,.btn.sec{background:#fff;color:var(--acc);border:1px solid var(--acc)}button.danger{background:var(--err)}button.small{padding:6px 10px;font-size:13px;border-radius:9px}
button:disabled{opacity:.45;cursor:not-allowed}.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1}
.nav{display:flex;gap:10px;margin-top:14px}.nav button{flex:1}
label.f{display:block;font-size:13px;color:var(--mute);margin:10px 0 4px}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],input[type=password],input[type=time],select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
textarea{min-height:70px}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}.days button{flex:0 0 auto;min-width:64px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px;font-weight:500;line-height:1.2}
.days button.sel{background:var(--acc);color:#fff;border-color:var(--acc)}.days small{display:block;font-size:11px;opacity:.8}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.slots button{background:#fff;color:var(--acc);border:1px solid var(--acc);padding:10px 4px}.slots button.sel{background:var(--acc);color:#fff}
.muted{color:var(--mute);font-size:14px}.err{color:var(--err);font-size:14px;margin-top:8px}.okc{color:var(--ok)}
.sum{background:var(--acc2);border-radius:12px;padding:12px;font-size:14px}.sum div{margin:3px 0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute);margin-top:12px}.check input{margin-top:3px;width:18px;height:18px}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mute);font-weight:600}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}/* wrap so every tab (Staff, Payments, Billing, My account) is always visible - no hidden horizontal scroll on iPad/phone */.tabs button{background:#fff;color:var(--ink);border:1px solid var(--line);flex:0 0 auto}.tabs button.sel{background:var(--acc);color:#fff}
@media (max-width:560px){.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.tabs button{padding:8px 6px;font-size:14px;white-space:nowrap}}
.hours{display:grid;grid-template-columns:52px 1fr 1fr 60px;gap:6px;align-items:center;font-size:14px}.hours input{padding:7px}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#efe6db;margin:1px}.pill.c{background:#edf0da;color:var(--ok)}.pill.x{background:#fbe5e3;color:var(--err)}
.tablewrap{overflow-x:auto}
/* ---- owner calendar ---- */
.cal-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px}
.cal-nav{display:flex;gap:6px;align-items:center}.cal-nav input[type=date]{width:auto;padding:6px 8px}
.cal-title{flex:1 1 220px;text-align:center;font-size:15px}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;color:var(--mute);padding:10px 12px;border-bottom:1px solid var(--line)}
.lg{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:-6px;vertical-align:middle}
.lg.off{background:repeating-linear-gradient(45deg,#e9ddd0,#e9ddd0 4px,#f5ede3 4px,#f5ede3 8px);border:1px solid var(--line)}
.cal-scroll{overflow:auto;max-height:calc(100vh - 230px);min-height:320px;position:relative;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--r) var(--r)}
.cal{display:grid;width:max-content;min-width:100%}
.cal-corner{position:sticky;top:0;left:0;z-index:6;background:#fff;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cal-head{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:8px 6px;text-align:center;line-height:1.2}
.cal-head b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-head small{color:var(--mute);font-size:11px}
.cal-times{position:sticky;left:0;z-index:4;background:#fff;border-right:1px solid var(--line)}
.cal-times span{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:var(--mute);white-space:nowrap}
.cal-times span:first-child{transform:none}
.cal-col{position:relative;border-right:1px solid var(--line);background:repeating-linear-gradient(45deg,#e9ddd0,#e9ddd0 5px,#f5ede3 5px,#f5ede3 10px)}
.cal-work{position:absolute;left:0;right:0;background:#fff}
.cal-offlabel{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:12px;color:var(--mute)}
.cal-line{position:absolute;left:0;right:0;border-top:1px solid #e9ddd0;pointer-events:none}.cal-line.half{border-top-style:dashed;border-color:#f2e8dc}
.cal-now{position:absolute;left:0;right:0;border-top:2px solid #d93025;z-index:3;pointer-events:none}
.cal-ev{position:absolute;left:3px;right:3px;z-index:2;padding:3px 6px;border-radius:8px;text-align:left;font-weight:400;font-size:12px;line-height:1.25;overflow:hidden;display:flex;flex-direction:column;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cal-ev .ev-t{font-size:10.5px;opacity:.9}.cal-ev .ev-n{font-weight:700}.cal-ev .ev-s{opacity:.95}.cal-ev .ev-m{font-size:10.5px;font-weight:600;background:rgba(255,255,255,.22);border-radius:6px;padding:0 4px;align-self:flex-start;margin-top:1px}
.m-single{background:var(--acc)}.m-simultaneous{background:#4f5f2a}.m-sequential{background:#a0522d}
.cal-week{border-collapse:separate;border-spacing:0;min-width:100%}
.cal-week th,.cal-week td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:130px;padding:6px;vertical-align:top}
.cal-week thead th{position:sticky;top:0;background:#fff;z-index:3}
.cal-week .wk-tech{position:sticky;left:0;background:#fff;z-index:2;min-width:110px;font-size:13px}.cal-week .wk-corner{left:0;z-index:4}
.wk-off{background:repeating-linear-gradient(45deg,#e9ddd0,#e9ddd0 5px,#f5ede3 5px,#f5ede3 10px)}
.wk-ev{display:block;width:100%;margin-top:4px;padding:4px 6px;border-radius:7px;font-size:12px;font-weight:600;text-align:left;color:#fff}.wk-ev small{display:block;font-weight:400;opacity:.9}
.linkbtn{background:none;color:var(--acc);padding:0;font-weight:700;text-decoration:underline}
.modal{position:fixed;inset:0;background:rgba(25,15,10,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:10px}
.modal-box{width:100%;max-width:520px;max-height:90vh;overflow:auto;margin:0}
@media(min-width:700px){.modal{align-items:center}}
@media(max-width:600px){.cal-title{order:-1;flex-basis:100%}main.wide{padding:8px}.cal-scroll{max-height:calc(100vh - 250px)}}
.cal-ev .ev-t,.cal-ev .ev-n,.cal-ev .ev-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .ev-t{display:flex;justify-content:space-between;gap:4px}
.cal-ev .ev-b{flex:0 0 auto;font-weight:700;background:rgba(255,255,255,.28);border-radius:5px;padding:0 4px}
.cal-ev .ev-m{white-space:normal}

/* billing + banners */
.banner{padding:10px 14px}.banner.grace{background:#fff8e1;border-color:#e0a800}.banner.lapsed{background:#fdecea;border-color:#d9534f}.banner.full{background:#eef2dc;border-color:#7a9a3a}
.pill.w{background:#fff3cd;color:#8a6100}.pill.trial{background:var(--acc2);color:var(--acc)}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:8px 0 12px}.bill-grid>div{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.incl{margin:6px 0 10px 18px;padding:0;line-height:1.7}
label.chk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}label.chk input{width:auto;margin:0}
/* platform pages */
.hero{text-align:center;padding:40px 16px 10px}.hero h1{font-size:34px;margin:0 0 8px}.hero p{font-size:18px;color:var(--mute)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cta{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;padding:14px 22px;border-radius:12px;font-weight:600;margin:6px}
.cta.sec{background:#fff;color:var(--acc);border:1px solid var(--acc)}
.slugrow{display:flex;align-items:center;gap:4px}.slugrow span{color:var(--mute);font-size:14px;white-space:nowrap}
/* tablet / iPad back office */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media (min-width:700px) and (max-width:1400px){
  main.wide{max-width:none;padding:12px 20px}
  .tabs button,.cal-bar button,.nav button{min-height:44px;padding:10px 16px;font-size:16px}
  .cal-scroll{max-height:calc(100vh - 230px)}
  .cal-ev{font-size:13px}
}
@media (pointer:coarse){button,select,input[type=date]{min-height:44px}.cal-ev{cursor:pointer;-webkit-tap-highlight-color:transparent}.modal button{min-height:48px}}
@media (display-mode:standalone){header{padding-top:max(12px,env(safe-area-inset-top))}}

/* deposits */
.deposit-box{border:1px solid var(--acc2);background:var(--acc3);border-radius:14px;padding:12px 14px;margin:12px 0}
.deposit-box .amount{font-size:28px;font-weight:700;color:var(--acc)}.deposit-box .amount small{font-size:14px;font-weight:500;color:#6d5a4e;margin-left:6px}
.policy{font-size:13px;line-height:1.45;margin:8px 0}.hold{font-size:14px;margin-top:6px}
.mocknote{background:#fff6d6;border:1px solid #f0d77a;border-radius:10px;padding:8px 10px;font-size:13px}
.paybtns{display:grid;gap:10px;margin:12px 0}
button.pay{width:100%;padding:14px;font-size:17px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.pay-apple_pay{background:#000;color:#fff}.pay .wl{font-weight:700}
.pay-google_pay{background:#000;color:#fff}.pay .g{font-weight:800;background:linear-gradient(90deg,#4285f4,#ea4335,#fbbc05,#34a853);-webkit-background-clip:text;background-clip:text;color:transparent}
.pay-amazon_pay{background:#ffd814;color:#22160f}.pay .az{font-weight:800}
.pay-card{background:var(--acc);color:#fff}
.sheet .sheet-h{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:700;margin-bottom:8px}
.sheet-r{display:flex;justify-content:space-between;border-top:1px solid #efe6db;padding:10px 0;font-size:15px}.sheet-r span{color:#73614f}.sheet-r.tot b{font-size:20px}
.sheet-apple_pay .sheet-h,.sheet-google_pay .sheet-h{color:#000}.sheet-amazon_pay .sheet-h{color:#22160f}
.depline{margin-top:8px;padding:8px 10px;background:#f2f5e4;border-radius:10px;font-size:14px}
.pill.dep{background:#eef2dc;color:#3f5a15}.pill.hold{background:#fff3d6;color:#8a5a00}
.cal-ev.held{opacity:.75;background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.35) 6px 12px)}
.method{border:1px solid #efe6db;border-radius:12px;padding:10px 12px;margin:8px 0}.method .muted{font-size:13px;margin:4px 0 0 28px}
.okn{color:#3f5a15}.warn{color:#8a5a00}
/* service types (variants) */
.types-box{background:var(--acc3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:4px 0 10px}.types-box h3{margin:0 0 4px}
table.types td,table.types th{padding:4px}h3.vq{margin:14px 0 6px}
/* owner calendar: quick-booking + drag & drop */
.cal-col.can-add .cal-work{cursor:copy}.cal-col.can-add .cal-work:hover{background:var(--acc3)}
.cal-ev.draggable{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cal-ev .ev-h{position:absolute;top:1px;right:3px;font-size:14px;line-height:1;opacity:.85;touch-action:none;cursor:grab;padding:2px 3px;border-radius:4px;background:rgba(255,255,255,.18)}
.cal-ev.draggable .ev-t{padding-right:18px}
.cal-ev.dragging{opacity:.35}
.cal-ghost{position:absolute;left:3px;right:3px;z-index:5;border:2px dashed #fff;outline:2px solid var(--acc);border-radius:8px;background:rgba(123,30,46,.75);color:#fff;font-size:12px;padding:3px 6px;display:flex;flex-direction:column;pointer-events:none}
.cal-ghost.bad{background:rgba(180,40,40,.75);outline-color:#b42828}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:#2b1d17;color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.25);max-width:90vw;font-size:15px;transition:opacity .5s}
.toast.bad{background:#a02828}.toast.out{opacity:0}
.qb .qdet{margin:0 0 6px 26px}.qb textarea{min-height:54px}
/* adjustable technician column widths (Day view) */
.cal-colbar{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.cal-colbar input[type=range]{width:150px;accent-color:var(--acc)}.cal-colbar .cw-val{min-width:44px;font-variant-numeric:tabular-nums;color:var(--mute)}
.cal-colbar .cw-save{font-size:12px}
.cal.fit{width:100%}
.cal-head{position:sticky}.cal-head .col-rs{position:absolute;top:0;right:0;bottom:0;width:12px;cursor:col-resize;touch-action:none;z-index:2}
.cal-head .col-rs:after{content:'';position:absolute;top:22%;bottom:22%;right:3px;width:3px;border-radius:2px;background:var(--line)}
.cal-head .col-rs:hover:after,.cal-head .col-rs.on:after{background:var(--acc)}
body.col-resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}
@media (pointer:coarse){.cal-head .col-rs{width:24px}.cal-head .col-rs:after{right:6px;width:4px;background:var(--line2)}.cal-colbar input[type=range]{width:180px;height:32px}}
/* client-facing descriptions */
.opt .desc,.desc{color:#4f3d33;font-size:13.5px;line-height:1.4;margin-top:4px}.vqd{margin:-2px 0 8px}
.card.about p{margin:0;color:#4f3d33;line-height:1.5}
.bios{margin:8px 0 4px;display:grid;gap:6px}.bio{background:var(--acc3);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px;line-height:1.4}.bio div{color:#4f3d33;margin-top:2px}
/* owner: descriptions + Write with AI */
.descbox{display:grid;gap:6px;margin:4px 0 6px}.descbox textarea{min-height:58px;font-size:14px}
.ai-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.ai-row input{flex:1 1 180px;min-width:140px;font-size:13px;padding:6px 8px}
.ai-row select{width:auto;font-size:13px;padding:6px 8px}.ai-tag{font-size:12px;color:var(--mute)}.ai-tag.ai{color:#4a6b1c}.ai-tag.tpl{color:#8a5a00}
.ai-count{font-size:12px;color:var(--mute);margin-left:auto}
tr.desc-row td{border-top:0;padding-top:0}.rev-item{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}.rev-item textarea{min-height:60px}
/* party size (several people in one booking) */
.party{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.psize{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}.psize button{min-width:48px;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:600}
.psize button.sel{background:var(--acc);color:#fff;border-color:var(--acc)}
.guests{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 12px;margin-top:6px}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.ptabs button{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500;padding:8px 12px}
.ptabs button.sel{background:var(--acc);color:#fff;border-color:var(--acc)}.ptabs button.done:not(.sel){border-color:var(--acc)}
h3.pfor{margin:14px 0 6px;color:var(--acc)}.sum .pg{margin-top:6px}
.cal-ev .ev-p{margin-left:5px;font-size:10px;font-weight:700;background:rgba(255,255,255,.3);border-radius:5px;padding:0 4px;white-space:nowrap}
.pill.party{background:var(--acc2);color:var(--acc);font-weight:600}
/* grouped service menu (categories) */
h3.cat{margin:18px 0 8px;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:6px}
h3.cat:first-of-type{margin-top:4px}
.svc-table .cat-row td{border-bottom:0;padding-top:16px}.svc-table .cat-row h3{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--acc)}
.svc-table .sord{margin-top:4px;width:80px}.svc-table .sopen{margin:4px 0 0;font-size:13px}.svc-table .sdur{font-size:12px;margin-top:3px}
details.archived{margin-top:14px}details.archived summary{cursor:pointer;color:var(--mute)}details.archived li{margin:6px 0}
/* Messages (SMS inbox) */
.badge-n{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:#c0392b;color:#fff;font-size:12px;line-height:18px;text-align:center;font-weight:600}
.msg-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:12px;align-items:start}
@media (max-width:900px){.msg-wrap{grid-template-columns:1fr}}
.msg-list{max-height:72vh;overflow:auto;padding:12px}.msg-list input[type=search]{width:100%;margin-bottom:8px}
.msg-list .seg{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.mt{padding:9px 8px;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--line)}.mt:hover{background:var(--acc3)}.mt.sel{background:var(--acc2)}
.mt-top{display:flex;justify-content:space-between;gap:6px}.mt.unread b{color:var(--acc)}.mt-sn{font-size:13px;color:#5e4c41;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}
.msg-thread{display:flex;flex-direction:column;min-height:60vh}
.th-head{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.th-bk{margin:8px 0;font-size:14px}.th-flag{background:#fff3e0;border:1px solid #f0b46a;border-radius:8px;padding:8px 10px;margin:6px 0;font-size:14px}
.bubbles{flex:1;overflow:auto;max-height:46vh;padding:8px 2px;display:flex;flex-direction:column;gap:8px}
.bub{max-width:78%;padding:8px 11px;border-radius:14px;font-size:14px;line-height:1.35}.bub .bm{font-size:11px;opacity:.7;margin-top:3px}
.bub.in{align-self:flex-start;background:#efe7df;border-bottom-left-radius:4px}.bub.out{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.th-sug{background:var(--acc3);border:1px dashed var(--acc);border-radius:10px;padding:10px;margin:6px 0}.th-sug textarea{width:100%;margin-top:6px}
.th-reply textarea{width:100%;min-height:64px}.th-reply .nav,.th-sug .nav{display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-top:6px}
details.sim{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}details.sim summary{cursor:pointer;color:var(--mute);font-size:14px}details.sim input,details.sim textarea{width:100%;margin:6px 0}

/* ---- technician avatars ---- */
.av { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; background: #efe6db; }
.av-i { color: #fff; font-weight: 700; letter-spacing: .02em; line-height: 1; user-select: none; }
.av-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.av-row > span, .av-row > div { min-width: 0; }
.photo-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.crop-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.crop-box { width: 330px; text-align: center; margin: 0; }
.crop-box canvas { touch-action: none; border-radius: 12px; cursor: grab; background: #fff; }
.crop-box input[type=range] { width: 100%; }
.tech-pick .av { margin-right: 4px; }
.cal-th .av { margin-right: 6px; }
.cal-hn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.cal-hn b { min-width: 0; }
.cal-hn .av { width: 22px; height: 22px; }
.tech-pick { margin: 4px 0 10px; }
.tech-pick .opt { align-items: flex-start; }
.tech-pick .opt input { margin-top: 12px; }
.tech-pick .tp-bio { margin-top: 3px; color: #4f3d33; }
.av-any { background: var(--acc, var(--acc)); }
/* back-office language switch (admin side only) */
html.i18n-wait body { visibility: hidden; }
.lang-sw { display: inline-flex; align-items: center; gap: 2px; margin-left: 12px; font-size: 13px; color: #94816f; }
.lang-sw button { background: none; border: 0; color: inherit; padding: 4px 6px; min-height: 0; font: inherit; cursor: pointer; border-radius: 6px; box-shadow: none; }
.lang-sw button.on { color: var(--acc); font-weight: 700; background: var(--acc2); }
.tv-head .lang-sw { margin-left: 8px; }
header > .lang-sw { position: absolute; top: 14px; right: 16px; margin: 0; }
.tv-head > .lang-sw { position: static; }
/* signed-in devices, device linking, live sync */
.sync-b{color:#7d6a5d;font-size:12px}.sync-b:not(:empty)::after{content:' · '}
.tv-head .sync-b{align-self:center;margin-right:4px}.tv-head .sync-b::after{content:''}
.or-line{display:flex;align-items:center;gap:10px;color:#7d6a5d;margin:16px 0 10px;font-size:13px}.or-line::before,.or-line::after{content:'';flex:1;border-top:1px solid var(--line)}
.link-card{text-align:center;margin-top:12px}.link-qr svg{width:200px;height:200px;max-width:70vw;max-height:70vw}
.link-code{font:700 30px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:4px;margin:6px 0 8px;color:var(--acc-strong)}
.dev-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.dev-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.dev-row.cur{border-color:var(--acc);background:var(--acc3)}
.dev-ico{font-size:26px}.dev-main{flex:1;min-width:0}.dev-act{white-space:nowrap}
@media(max-width:600px){.dev-row{flex-wrap:wrap}.dev-act{width:100%}}
.nav.dev-nav{justify-content:flex-start}.nav.dev-nav button{flex:0 0 auto;width:auto}
/* arrival alerts (banner stack, any tab) */
.al-bar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;width:min(640px,calc(100vw - 20px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.al-bar>*{pointer-events:auto}.al-bar:empty{display:none}
.al-card{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--acc);border-radius:16px;padding:12px 14px;box-shadow:0 10px 28px rgba(60,30,20,.22)}
.al-card.t-walkin{border-color:#c47a00}.al-card.t-ready{border-color:var(--ok)}.al-card.t-help{border-color:var(--err)}.al-card.acked{opacity:.75;border-style:dashed}
.al-ic{font-size:28px;line-height:1}.al-tx{flex:1;min-width:0}.al-tx b{display:block;font-size:16px}.al-tx small{color:var(--mute)}
.al-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.al-btns button{min-height:40px}.al-x{padding:6px 10px}
.al-more{align-self:center}.al-hint{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:61;background:#fff8e1;color:#7a5400;border:1px solid #e0a800;box-shadow:0 6px 18px rgba(60,30,20,.18)}/* zip 26: corner pill, never covers top-bar buttons (drawer ✕, Checkout banner) */
body.tb-open .al-hint{display:none}
.al-flash .al-card{animation:alflash .9s ease-in-out 3}@keyframes alflash{0%,100%{background:#fff}50%{background:#fdf1c7}}
/* walk-in queue */
.wk-top{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.wk-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#fff}
.wk-row.st-ready{border-color:var(--ok);background:#f5f7ea}.wk-row.st-waiting{border-left:4px solid #c47a00}
.wk-main{flex:1;min-width:240px}.wk-name{font-size:17px}.wk-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.wk-act select{width:auto;padding:6px 8px}
.ev-arr{display:inline-block;background:var(--ok);color:#fff;border-radius:999px;font-size:10px;padding:0 5px;margin-right:3px}
.cal-ev.arrived{box-shadow:inset 3px 0 0 var(--ok)}.cal-ev.walkin{background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.35) 8px 12px)}
/* ---- Checkout / Sales (pos.js) ---- */
main.wide:has(.pos){max-width:1240px}
.pos{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start}
@media(max-width:820px){.pos{grid-template-columns:1fr}}
.pos-right{position:sticky;top:80px}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pos-tile{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 10px;min-height:72px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font-weight:500}
.pos-tile b{font-weight:600;line-height:1.2}.pos-tile small{color:var(--acc);font-weight:600;margin-top:6px}.pos-tile.sel,.pos-tile:active{border-color:var(--acc);background:var(--acc2)}
.pos-open{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pos-appt{flex:0 0 auto;min-width:170px;max-width:240px;background:#fff;color:var(--ink);border:1px solid var(--line);text-align:left;font-weight:500;padding:10px 12px}
.pos-appt small{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-appt.sel{border-color:var(--acc);background:var(--acc2)}
.pos-line{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pl-main select{margin-top:4px;padding:6px 8px;font-size:14px}.pl-qty{display:flex;align-items:center;gap:4px}.pl-qty span{min-width:20px;text-align:center}
.pl-amt{text-align:right;display:flex;flex-direction:column;align-items:flex-end}.pl-amt small{font-size:12px}
.linkb{background:none;color:var(--acc);padding:2px 4px;font-weight:600;border-radius:6px}.linkb.small-t{font-size:12px;font-weight:500;color:var(--mute);text-decoration:underline}
.pos-tot{margin:12px 0;font-size:15px}.pos-tot>div,.pm-sum>div{display:flex;justify-content:space-between;padding:3px 0}
.pos-tot .big,.pm-sum .big{font-size:22px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.pos-pay{width:100%;font-size:20px;padding:16px;border-radius:14px}
.pos-test{background:#fbeee4;border-color:#efc9b1}
.pos-paybox{max-width:560px}.pm-x{display:flex;justify-content:flex-end;margin:-6px -6px 0 0}.pm-x button{min-height:0!important}
.pm-h{text-align:center;font-size:22px}.pm-sub{text-align:center}
.pos-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}
.pos-tip{display:flex;flex-direction:column;align-items:center;padding:18px 8px;font-size:20px}.pos-tip small{font-size:14px;font-weight:500;opacity:.85}
.pos-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.pos-m{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:30px;padding:16px 6px;background:#fff;color:var(--ink);border:1px solid var(--line)}.pos-m b{font-size:16px}.pos-m small{font-size:11px;color:var(--mute);font-weight:500}
.pm-sum{background:var(--acc2);border-radius:12px;padding:12px 14px}.pm-err{text-align:center;font-weight:600}
.pos-reader{text-align:center;border:2px dashed var(--line);border-radius:14px;padding:16px;margin:10px 0}.pr-ic{font-size:44px}
.pm-part{margin:8px 0;font-size:14px;color:var(--mute)}
.pos-kpv{text-align:center;font-size:36px;font-weight:700;margin:6px 0 10px}
.pos-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pos-kp button{font-size:22px;padding:14px}
.pm-wait{text-align:center;padding:30px}.spin{width:40px;height:40px;border:4px solid var(--acc2);border-top-color:var(--acc);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.pm-done{text-align:center}.pd-ic{font-size:52px}.pd-change{font-size:18px;margin:10px 0}.pd-change b{display:block;font-size:44px;color:var(--ok)}
.pd-gc{background:#fff8e1;border:1px solid #f0d78a;border-radius:12px;padding:12px;margin:10px 0}.pd-gc b{display:block;font-size:24px;letter-spacing:1px;font-family:ui-monospace,Menlo,monospace}.pd-gc small{color:var(--mute)}
.pos-split{align-items:center;margin:6px 0}.pos-split input{max-width:140px}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pos-filter>div{min-width:130px}.pos-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.pos-kpis>div{background:var(--acc2);border-radius:12px;padding:10px 12px}.pos-kpis small{display:block;color:var(--mute)}.pos-kpis b{font-size:22px}
td.r,th.r{text-align:right}tr.b td{font-weight:700}.pos-hist tbody tr,[data-gc]{cursor:pointer}.pos-hist tr.refund td{color:var(--err)}
.pos-drawer{background:#edf0da;border-radius:12px;padding:10px 12px;margin-top:10px}.pos-drawer small{display:block;color:var(--mute)}
.eod-cols>div{min-width:260px}label.chk{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:14px}label.chk input{width:18px;height:18px}
.rcpt{max-width:340px;margin:0 auto;font-size:14px}.rcpt h3{text-align:center;margin:0 0 4px}.rcpt>.muted:first-of-type{text-align:center}.rcpt table{margin:10px 0}.rcpt td{padding:4px 2px}
.print-only{display:none}
@media print{body.printing>*:not(.print-only){display:none!important}body.printing .print-only{display:block}body.printing{background:#fff}}
.pos-right{display:flex;flex-direction:column;max-height:calc(100vh - 16px);top:8px}#poslines{overflow-y:auto;flex:0 1 auto;min-height:40px}
.pos-th{display:flex;gap:8px;align-items:center}.pos-th h2{margin:0}.pos-th input{flex:1;padding:8px 10px}.pos-th button{flex:0 0 auto}
.pos-line{padding:6px 0}.pl-main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.pl-main b{flex:1 1 120px}.pl-main select{margin:0;width:auto;max-width:150px;flex:0 0 auto}
.pos-tot{margin:8px 0}.pos-pay{padding:14px}
#posdisc{align-self:flex-start}.pos-right .pos-test{background:#fbeee4;border-radius:8px;padding:4px 8px;margin:8px 0 0;font-size:12px;text-align:center}
@media (pointer:coarse){.pos-line button.small{min-height:40px}.linkb.small-t{min-height:0!important;padding:0 4px}}
/* ---- turns / time clock (admin-turns.js) ---- */
.tu-list{display:flex;flex-direction:column;gap:8px}.tu-list.off{opacity:.75}
.tu-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.tu-row.next{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc2)}.tu-row.st-busy{background:#fffaf0}
.tu-pos{font-size:22px;font-weight:700;width:28px;text-align:center;color:var(--acc)}.tu-main{flex:1;min-width:0}.tu-main .pill{margin-left:4px}
.tu-turns{text-align:right;min-width:64px}.tu-turns b{font-size:22px;display:block}.tu-turns small{color:var(--muted,#6d5a4e)}
.tu-act{display:flex;gap:6px}.tu-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px}.tu-av.ph{display:flex;align-items:center;justify-content:center;background:var(--acc2);color:var(--acc);font-weight:700}
.tu-up{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:22px}.tu-up .tu-av{width:56px;height:56px;flex-basis:56px}.tu-up small{display:block;font-size:13px;color:var(--muted,#6d5a4e)}
.tu-me{display:flex;align-items:center;justify-content:space-between;gap:12px}.tu-me button{flex:0 0 auto}
.tc-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:10px 0}
.tc-p{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.tc-p.in{border-color:#4a6b1c;background:#f5f7ea}.tc-p button{min-height:48px;margin:0}
.tc-opt>summary{cursor:pointer;padding:4px 0;list-style-position:inside}
.hrs-list{margin:6px 0}.hrs-list div{display:flex;gap:8px;align-items:center;padding:3px 0}
.tu-display{position:fixed;inset:0;z-index:9000;background:#2b1d17;color:#fff;padding:28px 36px;overflow:auto}
.tu-display h1{margin:0 0 8px;font-size:34px}.tu-display h1 small{font-size:18px;opacity:.7;font-weight:400}.tu-dnext{font-size:26px;margin-bottom:18px}.tu-dnext b{color:#cbd6a3}
.tu-display ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;counter-reset:n}
.tu-display li{counter-increment:n;display:flex;align-items:center;gap:16px;font-size:28px;background:#2b1d17;border-radius:14px;padding:12px 18px}
.tu-display li::before{content:counter(n);font-weight:700;width:36px;color:#e6b394}.tu-display li span{flex:1}.tu-display li em{font-style:normal;font-size:18px;opacity:.75}.tu-display li.st-busy{opacity:.6}
.tu-display .tu-x{position:absolute;top:18px;right:22px}.warnc{color:#b45309}.pl-req{margin-left:6px}
/* main checkout iPad */
.pos-view { border-left: 5px solid #d97706; background: #fffbeb; }
.pos-view small { color: #6b5b3a; }
.pm-view { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #f3d38a; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.pm-view small { color: #6b5b3a; }
.pos-pay.pos-send { background: #9a3b12; }
.pos-rt { display: flex; gap: 6px; align-items: stretch; }
.pos-rt .pos-appt { flex: 1; text-align: left; max-width: none; min-width: 220px; }
.pos-rt.sel .pos-appt { border-color: var(--acc); background: var(--acc2); }
.pos-readyc { border-left: 5px solid #9a3b12; }
.pos-mainpill { margin-bottom: 6px; }
.pos-from { font-size: 13px; margin-bottom: 6px; }
.pos-close { padding: 6px 0; border-bottom: 1px solid #efe6db; }
.pos-vnote { background: #fffbeb; padding: 8px 10px; border-radius: 8px; }
.al-card.t-checkout { border-left: 5px solid #9a3b12; }
/* daily dashboard (dash.js) + payroll (payroll.js) + owner phone view (owner.html) */
.dsh-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.dsh-bar button{flex:0 0 auto}.dsh-date{font-size:18px}
.dsh-alerts{display:grid;gap:6px;margin-bottom:10px}.dsh-al{background:#fff6e0;border:1px solid #e8c66a;border-radius:10px;padding:8px 12px;font-size:14px}
.dsh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.dsh-kpis .k{background:var(--acc2);border-radius:14px;padding:10px 14px}.dsh-kpis .k small{display:block;color:var(--mute)}.dsh-kpis .k b{font-size:24px;display:block}
.dsh-kpis .k.big b{font-size:30px}.dsh-d.up{color:#4a6b1c}.dsh-d.dn{color:#b3261e}
.dsh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.dsh-grid .card{margin:0}.dsh-wide{grid-column:1/-1}
.dsh-c h3{margin:0 0 8px}.dsh-c h4{margin:12px 0 4px}.dsh-ap{display:flex;flex-wrap:wrap;gap:8px}.dsh-ap span{background:var(--acc3);border-radius:10px;padding:6px 10px;font-size:13px;color:var(--mute)}
.dsh-ap span b{display:block;font-size:20px;color:var(--ink,#2b1d17)}.dsh-ap .warn{background:#fdeaea}.dsh-next{margin:0;padding-left:18px}.dsh-next li{margin:3px 0}
.dsh-t{width:100%}.dsh-t td,.dsh-t th{padding:5px 6px}.dsh-t tr.b td{font-weight:700;border-top:1px solid #e0d3c4}
.dsh-hours{display:flex;align-items:flex-end;gap:6px;height:120px;overflow-x:auto}.dsh-hours .hb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:30px}
.dsh-hours i{display:block;width:22px;background:var(--acc,var(--acc));border-radius:5px 5px 0 0}.dsh-hours small{font-size:11px;color:var(--mute)}
.pill.ok{background:#edf0da;color:#4a6b1c}
.dsh.mob .dsh-kpis{grid-template-columns:1fr 1fr}.dsh.mob .dsh-kpis .k.big{grid-column:1/-1}.dsh.mob .dsh-grid{grid-template-columns:1fr}
.pr-tbl td,.pr-tbl th{white-space:nowrap}.pr-tbl tr[data-pst]{cursor:pointer}.pr-tbl tfoot td{font-weight:700;border-top:2px solid #d2c3b2}
.pr-note{background:var(--acc3);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--mute);margin:10px 0}
.pr-stmt h2{margin:0}.pr-stmt table{width:100%;border-collapse:collapse;margin:8px 0}.pr-stmt td,.pr-stmt th{padding:4px 6px;border-bottom:1px solid #efe6db;text-align:left}.pr-stmt .r{text-align:right}
.pr-stmt .tot td{font-weight:700;border-top:2px solid #3d2e25}.pr-fin{background:#edf0da;border-radius:10px;padding:8px 12px;margin:8px 0}.pr-fin.chg{background:#fff6e0}
.pr-models td{vertical-align:middle}.pr-models input,.pr-models select{min-width:80px}
body.owner header{padding:10px 14px}body.owner main{padding:10px;max-width:760px;margin:0 auto}
@media print{.print-only .pr-stmt{page-break-after:always}.print-only table{font-size:12px}}
.pr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.pr-head>*{flex:0 0 auto;width:auto}.pr-head input[type=date]{width:auto;min-width:0;margin:0;padding:6px 8px}.pr-head .pill{display:inline-block}
.pr-stmt td:first-child{white-space:nowrap}
/* ---- Home (landing page): own tasks + turn, turn order, live client board ---- */
.hm .card h3{margin:0 0 8px}
.hm-mine{border-left:4px solid var(--acc)}
.hm-myturn{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.hm-mt,.hm-dt{width:100%;border-collapse:collapse}.hm-mt td,.hm-mt th,.hm-dt td,.hm-dt th{text-align:left;padding:6px 8px;border-bottom:1px solid #efe6db}
.hm-mt-checked_out td,.hm-mt-done td{color:#7d6a5d}
.hm-forme{margin:6px 0 10px}
.hm-chip{display:inline-flex;gap:4px;align-items:center;padding:4px 10px;border-radius:99px;background:var(--acc2);margin:2px 4px 2px 0}
.hm-chip.hm-t-busy{background:#fdecea}.hm-chip.hm-up{outline:2px solid #4a6b1c;background:#eef2dc}
.hm-order{display:flex;flex-wrap:wrap}
.hm-nextup{margin:8px 0 0}
.hm-bh{display:flex;justify-content:space-between;align-items:center}
.hm-live{font-size:13px;color:#7d6a5d}.hm-live.on{color:#4a6b1c}
.hm-counts{margin:0 0 10px;color:#5e4c41}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.hm-cw{display:flex;flex-direction:column;gap:6px}
.hm-acts{display:flex;flex-wrap:wrap;gap:6px}.hm-acts button{min-height:44px;margin:0}
.hm-quick{background:var(--acc-strong);color:#fff;flex:1 1 auto;text-align:left}.hm-quick small{opacity:.85;font-weight:400}
.hm-go{background:#4a6b1c;color:#fff}
.hm-dacts{margin-top:10px}
.hm-plist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.hm-pt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;text-align:left;background:#fff;color:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:52px;font:inherit;cursor:pointer;width:100%}
.hm-pt.hm-pup{border:2px solid var(--acc-strong);background:var(--acc2)}
.hm-pt .hm-busy{flex-basis:100%;color:#8a5a00}
.hm-note{font-size:12px;color:#8a5a00;background:#fff4e0;border-radius:8px;padding:1px 6px}
.hm-tap{cursor:pointer}.hm-tap:hover td{background:var(--acc3)}
.hm-t-later{opacity:.7}
.hm-card{display:block;text-align:left;background:#fff;color:inherit;border:1px solid var(--line);border-left:5px solid var(--acc-mid);border-radius:12px;padding:10px 12px;font:inherit;cursor:pointer;min-height:0;width:100%}
.hm-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hm-c-in_service{border-left-color:#4a6b1c}.hm-c-ready_checkout{border-left-color:#e0a800}
.hm-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}.hm-name{font-size:17px}
.hm-kind{font-size:12px;padding:2px 8px;border-radius:99px;background:#f3eae0;color:#3d2e25}
.hm-st{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--acc2);color:var(--acc-strong);white-space:nowrap}
.hm-st.hm-in_service{background:#edf0da;color:#3f5a15}.hm-st.hm-ready_checkout{background:#fff3d6;color:#7a5600}
.hm-st.hm-done,.hm-st.hm-checked_out{background:#efe6db;color:#6d5a4e}.hm-st.hm-upcoming{background:#f3eae0;color:#4f3d33}.hm-st.hm-here{background:#fae3d5;color:#8a3510}
.hm-st.hm-next{background:#4a6b1c;color:#fff}
.hm-task{padding:2px 0}
.hm-turn{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font-size:14px}
.hm-place b{font-size:16px}.hm-any{color:#73614f}
.hm-party{font-size:12px;color:#73614f}

.hm-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;background:#2b1d17;color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:90vw;font-size:15px}
.hm-toast.bad{background:#b91c1c}
/* tap-to-assign turn order + "Who's here today" (present list) */
.hm-tbtn{min-height:44px;min-width:44px;padding:8px 14px;border:2px solid transparent;cursor:pointer;font:inherit;color:inherit;touch-action:manipulation}
.hm-tbtn:hover{border-color:var(--acc-mid)}
.hm-chip.hm-sel,.hm-tbtn[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:var(--acc-strong);box-shadow:0 0 0 3px var(--acc-ring)}
.hm-mk{font-weight:700;color:#4a6b1c}.hm-sel .hm-mk{color:#fff}
.hm-selbar{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--acc2);border:2px solid var(--acc);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hm-selbar button{min-height:44px}
.hm-card.hm-target{outline:3px dashed var(--acc);outline-offset:2px}
.hm-card.hm-csel{outline:3px solid var(--acc);outline-offset:2px;background:var(--acc2)}
.hm-acts button,.hm-pbtn{min-height:44px}
.hm-here .hm-hlist{list-style:none;margin:6px 0;padding:0}
.hm-hrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #efe6db;min-height:48px}
.hm-hrow .hm-hn{display:inline-flex;width:32px;height:32px;border-radius:50%;background:#4a6b1c;color:#fff;align-items:center;justify-content:center;font-size:16px;flex:none}
.hm-hrow .hm-pbtn,.hm-arow .hm-pbtn{margin-left:auto}
.hm-st.hm-present{background:#eef2dc;color:#34490f}
.hm-away{margin-top:6px}
.hm-arow{display:flex;align-items:center;gap:10px;padding:4px 0;color:#7d6a5d;min-height:48px}
.hm-arow > span,.hm-arow img,.hm-arow .av{opacity:.55;filter:grayscale(1)}
.hm-hint{font-size:13px;margin:2px 0 6px}
.hm-floor .nav{flex-wrap:wrap;gap:8px}.hm-floor .btn,.hm-floor button{min-height:44px}
.hm-undo{display:flex;gap:10px;align-items:center}.hm-undo button{min-height:40px;background:#fff;color:#2b1d17}
.hm-askq{font-size:18px}
.hm-ask .nav button{min-height:44px}
/* receptionist fixes: tappable "not here yet" names, present hints, Done / Check out on cards */
button.hm-arow.hm-atap{width:100%;min-height:48px;background:#fbf7f1;border:1px dashed #c2b19f;border-radius:10px;padding:6px 10px;margin:4px 0;font:inherit;text-align:left;cursor:pointer;color:#6d5a4e}
button.hm-arow.hm-atap:active{background:#f2f5e4}
button.hm-arow.hm-atap > .hm-pbtn{opacity:1;filter:none;background:#4a6b1c;color:#fff;border-radius:8px;padding:6px 10px;font-weight:600}
.hm-needp{background:#fff8e1;border:1px solid #f0c36d;border-radius:8px;padding:8px 10px;margin:6px 0;color:#6b4e00}
.hm-acts .hm-needp{flex-basis:100%}
.hm-payhint{flex-basis:100%;margin:4px 0;font-size:.9em;color:#5e4c41;background:#faf3ec;border-radius:8px;padding:8px 10px}
.hm-acts button.hm-pay,.hm-acts button.hm-done,.hm-acts button.hm-mkmain{min-height:44px}
.hm-acts button.hm-done{background:#4a6b1c;color:#fff}
.hm-awayh{margin:12px 0 4px;font-size:.95em;color:#6b4e00}
.hm-pt.hm-paway{border-style:dashed}
.pos-mkmain{margin-top:8px}
.pos-mkmain button{min-height:44px}
.hm-viewonly{background:#f6ece2;border:1px solid #dcc6ad;border-radius:8px;padding:8px 10px;margin:6px 0;color:#5a3a22;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hm-viewonly small{flex-basis:100%;color:#5e4c41}
.hm-viewonly button{min-height:44px}
.hm-vonote{flex-basis:100%;margin:4px 0;font-size:.9em;color:#5a3a22;background:#f6ece2;border-radius:8px;padding:6px 10px}

/* =====================================================================================================================
   UI REFRESH — design system layer (2026-10). Everything below builds on the tokens in :root (top of this file):
   colors (--acc burgundy primary, --brn brown, --gold, --in signed-in green, --acc2/--acc3 tints, status pairs --ok/--warn/--info/--err/--slate + *-bg), type scale --fs-*,
   spacing --sp1..7, radii --r-sm/--r-md/--r/--r-lg/--r-btn, shadows --sh1..3, touch target --tap (44px).
   A salon accent can be swapped by overriding --acc / --acc-strong / --acc2 / --acc3 / --acc-ring in one place.
   Selectors are unchanged (JS/tests depend on them); this layer only restyles.
   ===================================================================================================================== */
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.012em;color:var(--ink)}h2{font-size:var(--fs-xl);font-weight:750}h3{font-size:var(--fs-lg);font-weight:700}
a{color:var(--acc)}a:hover{color:var(--acc-strong)}
:focus-visible{outline:3px solid var(--acc-ring);outline-offset:2px}
.muted{color:var(--mute)}
/* ---- header + brand mark (our own simple mark: a rounded burgundy tile with a blossom) ---- */
header{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);padding:12px 20px;box-shadow:var(--sh1)}
header h1{font-size:var(--fs-lg);font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:-.015em}
header h1::before{content:"✿";flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(150deg,var(--acc),var(--acc-strong));color:#fff;font-size:17px;font-weight:400;box-shadow:0 2px 6px var(--acc-ring)}
header p{font-size:var(--fs-sm);color:var(--mute);margin-top:4px}header p a{font-weight:600;text-decoration:none}header p a:hover{text-decoration:underline}
.tv-head h1::before{content:none}
main{padding:var(--sp5) var(--sp4)}main.wide{max-width:1180px}
/* ---- cards ---- */
.card{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);margin-bottom:var(--sp4)}
.card>h3:first-child,.card>h2:first-child{margin-top:0}
/* ---- buttons: primary (default) / .sec secondary / .danger / .ghost ; rounded-rect (not pill), 44px+ ---- */
button,.btn{border-radius:var(--r-btn);min-height:var(--tap);padding:11px 18px;font-weight:650;letter-spacing:.005em;background:var(--acc);color:var(--on-acc);box-shadow:0 1px 2px rgba(60,25,15,.18),inset 0 1px 0 rgba(255,255,255,.12);transition:background .12s,box-shadow .12s,transform .06s,border-color .12s;touch-action:manipulation}
button:hover:not(:disabled),.btn:hover{filter:brightness(.95)}
button:not(.cal-ev):active:not(:disabled),.btn:active{transform:translateY(1px)}
.cal-ev{min-height:0}
button.sec,.btn.sec{background:#fff;color:var(--acc);border:1.5px solid var(--line2);box-shadow:var(--sh1)}
button.sec:hover:not(:disabled),.btn.sec:hover{background:var(--acc3);border-color:var(--acc-mid);color:var(--acc-strong)}
button.danger{background:var(--err);color:#fff}button.danger:hover:not(:disabled){background:#8f1d17}
button.ghost,.btn.ghost{background:transparent;color:var(--acc);box-shadow:none;border:0}button.ghost:hover:not(:disabled){background:var(--acc2)}
button.small{min-height:36px;padding:7px 12px;font-size:var(--fs-sm);border-radius:10px}
@media (pointer:coarse){button.small{min-height:var(--tap)}}
button:disabled{opacity:.5;box-shadow:none}
/* ---- form fields ---- */
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],input[type=password],input[type=time],input[type=search],select,textarea{border:1.5px solid var(--line2);border-radius:var(--r-md);padding:11px 13px;min-height:var(--tap);color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-ring)}
label.f{font-size:var(--fs-sm);font-weight:600;color:var(--ink2);margin:14px 0 6px}
/* ---- tab bar: one tidy segmented strip that wraps (no hidden horizontal scroll) ---- */
.tabs{gap:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);margin-bottom:var(--sp4)}
.tabs button{background:transparent;border:0;color:var(--ink2);box-shadow:none;font-weight:600;padding:8px 10px;min-height:42px;border-radius:10px;font-size:var(--fs-sm)}
.tabs{gap:2px}
.tabs button:hover:not(.sel){background:var(--acc3);color:var(--acc-strong)}
.tabs button.sel{background:var(--acc);color:#fff;box-shadow:0 2px 8px var(--acc-ring)}
@media (pointer:coarse){.tabs button{min-height:var(--tap)}}
@media (max-width:560px){.tabs{gap:4px}.tabs button{padding:8px 6px;font-size:13px;white-space:normal;line-height:1.15}}
.badge-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--err);color:#fff;font-size:11px;font-weight:800;margin-left:4px}
/* ---- badges / status chips ---- */
.badge{background:var(--acc);border-radius:999px;font-weight:700}
.pill{border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);font-weight:650;background:var(--slate-bg);color:var(--slate)}
.pill.c{background:var(--ok-bg);color:var(--ok)}.pill.x{background:var(--err-bg);color:var(--err)}.pill.w,.pill.hold{background:var(--warn-bg);color:var(--warn)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-size:var(--fs-sm);font-weight:650;background:var(--slate-bg);color:var(--slate)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.info{background:var(--info-bg);color:var(--info)}.chip.err{background:var(--err-bg);color:var(--err)}
/* ---- tables ---- */
table{font-size:var(--fs-sm)}th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:700;background:var(--acc3);border-bottom:1px solid var(--line)}
th,td{padding:11px 10px}tbody tr:hover td{background:var(--acc3)}
.tablewrap{border-radius:var(--r-md)}
/* ---- modals + toasts ---- */
.modal{background:rgba(30,20,14,.48);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-box{border-radius:var(--r-lg);box-shadow:var(--sh3);border:0}
.toast,.hm-toast{background:#2b1d17;border-radius:14px;box-shadow:var(--sh3);padding:13px 20px;font-weight:600}
.toast.bad,.hm-toast.bad{background:var(--err)}
/* ---- empty + loading states ---- */
.empty,.hm-empty-st{text-align:center;padding:var(--sp6) var(--sp4);color:var(--mute)}
.hm-empty-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--acc2);font-size:30px;margin-bottom:6px}
#tab>p.muted:only-child,.tb-body>.tb-empty{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.spin{border-color:var(--acc2);border-top-color:var(--acc)}
/* ---- booking page (index.html) ---- */
.steps span{height:6px;border-radius:6px}
.opt{border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 16px;min-height:60px;box-shadow:var(--sh1);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--acc-mid)}.opt.sel{border-color:var(--acc);background:var(--acc3);box-shadow:0 0 0 3px var(--acc-ring)}
.opt .t{font-weight:600}.opt .s{font-size:var(--fs-sm)}
.days button{border-radius:var(--r-md);box-shadow:var(--sh1);min-height:58px}.slots button{border-radius:10px;border:1.5px solid var(--acc-mid);box-shadow:none;font-weight:650}
.slots button:hover:not(.sel){background:var(--acc3)}
.sum{background:var(--acc3);border:1px solid var(--acc2);border-radius:var(--r-md)}
/* ---- language switch ---- */
.lang-sw{color:var(--mute);background:var(--slate-bg);border-radius:10px;padding:2px}.lang-sw button{min-height:30px!important;padding:4px 9px;font-weight:600}.lang-sw button.on{background:#fff;color:var(--acc);box-shadow:var(--sh1)}
/* ---- calendar: cleaner column headers with bigger technician photos ---- */
.cal-bar{padding:var(--sp3) var(--sp4)}
.cal-title{font-size:var(--fs-md);font-weight:600}
.cal-head{padding:10px 8px 8px;background:#fff}
.cal-hn{flex-direction:column;gap:4px}.cal-hn .av{width:36px!important;height:36px!important;min-width:36px!important;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--acc2);margin:0}
.cal-head b{font-size:var(--fs-sm);font-weight:700}.cal-head small{font-size:11px;color:var(--mute)}
.cal-ev{border-radius:10px;box-shadow:0 1px 3px rgba(43,29,23,.18);padding:4px 8px}
.cal-legend{gap:8px 16px}.lg{border-radius:5px}
/* ---- checkout / POS: bigger service tiles, friendlier keypad ---- */
.pos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pos-tile{border:1.5px solid var(--line);border-radius:var(--r-md);min-height:88px;padding:14px 14px 12px;box-shadow:var(--sh1);transition:border-color .12s,box-shadow .12s,transform .06s}
.pos-tile:hover{border-color:var(--acc-mid);box-shadow:var(--sh2);background:#fff}
.pos-tile b{font-size:var(--fs-md)}.pos-tile small{font-size:var(--fs-sm);color:var(--acc);font-weight:750}
.pos-tile.sel,.pos-tile:active{box-shadow:0 0 0 3px var(--acc-ring)}
.pos-appt{border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1);min-height:64px}
.pos-appt.sel,.pos-rt.sel .pos-appt{box-shadow:0 0 0 3px var(--acc-ring)}
.pos-pay{border-radius:14px;font-size:var(--fs-xl);font-weight:800;min-height:60px;background:linear-gradient(160deg,var(--acc),var(--acc-strong));box-shadow:0 6px 18px var(--acc-ring)}
.pos-pay:disabled{background:var(--acc-mid)}
.pos-pay.pos-send{background:linear-gradient(160deg,#9a3b12,#7a2e0d)}
.pos-tot .big,.pm-sum .big{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}
.pos-kpv{font-size:44px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pos-kp{gap:10px}.pos-kp button{font-size:26px;min-height:64px;border-radius:14px;background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--sh1);font-variant-numeric:tabular-nums}
.pos-kp button:hover:not(:disabled){background:var(--acc3)}
.pos-tip,.pos-m{border-radius:var(--r-md);min-height:84px}.pos-m{border:1.5px solid var(--line);box-shadow:var(--sh1)}.pos-m:hover:not(:disabled){background:var(--acc3)}
.pos-kpis>div{background:#fff;border:1px solid var(--line);box-shadow:var(--sh1);border-radius:var(--r-md);padding:14px 16px}.pos-kpis b{font-size:var(--fs-2xl);letter-spacing:-.02em}
.pos-test{background:var(--info-bg);border-color:#f0cdb8;color:var(--info)}
/* ---- Home board: dashboard columns + clearer cards ---- */
.hm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.hm-col{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;min-height:120px}
.hm-colh{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 10px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--mute);font-weight:800}
.hm-colh::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--warn);margin-right:8px;flex:none}
.hm-col-in_service .hm-colh::before{background:var(--info)}.hm-col-checkout .hm-colh::before{background:var(--ok)}
.hm-colh span{flex:1}.hm-coln{min-width:26px;height:26px;border-radius:9px;display:inline-grid;place-items:center;background:#fff;color:var(--ink);font-size:var(--fs-sm);box-shadow:var(--sh1)}
.hm-col .hm-grid{grid-template-columns:1fr;gap:10px}
.hm-colempty{margin:10px 4px;color:var(--line2);font-weight:700}
@media (max-width:900px){.hm-cols{grid-template-columns:1fr}.hm-col{min-height:0}}
.hm-card{border:1px solid var(--line);border-left:6px solid var(--warn);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sh1);transition:box-shadow .12s,transform .06s}
.hm-card:hover{box-shadow:var(--sh2)}
.hm-c-in_service{border-left-color:var(--info)}.hm-c-ready_checkout{border-left-color:var(--ok)}.hm-c-done,.hm-c-checked_out{border-left-color:var(--line2)}.hm-c-upcoming{border-left-color:var(--slate)}
.hm-name{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.hm-st,.hm-kind{font-size:var(--fs-xs);font-weight:700;padding:3px 10px}
.hm-st{background:var(--warn-bg);color:var(--warn)}.hm-st.hm-in_service{background:var(--info-bg);color:var(--info)}.hm-st.hm-ready_checkout{background:var(--ok-bg);color:var(--ok)}
.hm-st.hm-done,.hm-st.hm-checked_out{background:var(--slate-bg);color:var(--slate)}.hm-st.hm-upcoming{background:var(--slate-bg);color:var(--slate)}.hm-st.hm-here{background:var(--info-bg);color:var(--info)}
.hm-st.hm-present{background:var(--ok-bg);color:var(--ok)}.hm-st.hm-next{background:var(--ok);color:#fff}
.hm-kind{background:var(--slate-bg);color:var(--slate)}
.hm-turn{border-top:1px dashed var(--line2)}
.hm-acts button{border-radius:var(--r-btn)}.hm-quick{background:var(--acc)}.hm-go{background:var(--ok)}.hm-go:hover:not(:disabled){background:#34490f}
.hm-counts{display:none}/* the column headers carry the counts now */
.hm-bh h3{margin:0}.hm-board>.hm-bh{margin-bottom:12px}
.hm-live{font-weight:700;padding:3px 10px;border-radius:999px;background:var(--slate-bg)}.hm-live.on{background:var(--ok-bg);color:var(--ok)}
.hm-chip{border-radius:12px;background:var(--acc3);border:1.5px solid var(--line);padding:6px 12px;font-weight:600}
.hm-chip.hm-up{outline:0;border-color:var(--ok);background:var(--ok-bg);box-shadow:0 0 0 3px rgba(71,98,26,.14)}.hm-chip.hm-t-busy{background:var(--info-bg);border-color:#f0cdb8}
.hm-chip.hm-sel,.hm-tbtn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc-strong);color:#fff}
.hm-selbar{border-radius:var(--r-md);background:var(--acc3)}
.hm-hrow .hm-hn{background:var(--ok);border-radius:10px;font-weight:800}
.hm-mine{border-left:6px solid var(--acc)}
.hm-viewonly{border-radius:var(--r-md)}
/* ---- avatars ---- */
.av{box-shadow:0 0 0 2px #fff}
/* ---- owner phone view ---- */
body.owner header h1{font-size:var(--fs-md)}
/* ===================== technician TURN BAR (turnbar.js): right side on wide screens, a drawer on narrow ones ===================== */
.tb{position:fixed;top:0;left:0;bottom:0;width:var(--tb-w);z-index:40;background:#fff;border-right:1px solid var(--line);box-shadow:6px 0 24px rgba(43,29,23,.06);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.tb-h{display:flex;align-items:center;gap:8px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.tb-h h3{margin:0;font-size:var(--fs-md);font-weight:800;flex:1;display:flex;align-items:center;gap:8px}
.tb-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:8px;background:var(--acc2);color:var(--acc-strong);font-size:var(--fs-xs);font-weight:800}.tb-count:empty{display:none}
.tb-live{width:10px;height:10px;border-radius:50%;background:var(--line2)}.tb.tb-on .tb-live{background:#5e8a2a;box-shadow:0 0 0 4px rgba(94,138,42,.18)}
.tb-x{display:none;min-height:40px!important;min-width:40px;padding:0;font-size:18px;color:var(--mute)}
.tb-body{flex:1;overflow-y:auto;padding:10px 10px 16px;-webkit-overflow-scrolling:touch}
.tb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tb-row{width:100%;display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;grid-template-areas:"pos av main turns";align-items:center;gap:10px;padding:10px;border-radius:14px;background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--ok);color:var(--ink);text-align:left;font:inherit;min-height:64px;box-shadow:var(--sh1);position:relative}
button.tb-row{cursor:pointer;font-weight:400}button.tb-row:hover{background:var(--acc3);border-color:var(--acc-mid)}
.tb-row.tb-s-busy{border-left-color:var(--info)}.tb-row.tb-s-later,.tb-row.tb-s-away{border-left-color:var(--slate)}.tb-row.tb-s-break{border-left-color:var(--warn);opacity:.85}
.tb-row.tb-up{background:var(--ok-bg);border-color:#cbd6a3;border-left-color:var(--ok)}
.tb-pos{grid-area:pos;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tb-up .tb-pos{background:var(--ok)}.tb-s-break .tb-pos{background:var(--line2)}
.tb-row .av{grid-area:av;width:40px;height:40px;min-width:40px;border-radius:50%}
.tb-main{grid-area:main;display:flex;flex-direction:column;min-width:0}
.tb-name{font-size:var(--fs-md);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-st{font-size:var(--fs-xs);font-weight:700;line-height:1.3}.tb-st small{font-weight:600;font-size:inherit;opacity:.85}
.tb-st-free{color:var(--ok)}.tb-st-busy{color:var(--info)}.tb-st-later,.tb-st-away{color:var(--slate)}.tb-st-break{color:var(--warn)}
.tb-turns{grid-area:turns;text-align:right;font-size:11px;color:var(--mute);line-height:1.1;white-space:nowrap}.tb-tn{display:block;font-size:var(--fs-lg);color:var(--ink);font-variant-numeric:tabular-nums}
.tb-next{position:absolute;top:-8px;right:10px;background:var(--ok);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.tb-brk{margin-top:14px}.tb-brk h4{margin:0 4px 8px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.tb-empty{color:var(--mute);font-size:var(--fs-sm);padding:10px 6px;margin:0}
.tb-foot{font-size:var(--fs-xs);color:var(--mute);margin:12px 4px 0}
.tb.tb-err .tb-h h3::after{content:"⚠";color:var(--warn);font-size:14px}
.tb-toggle{display:none}
.tb-scrim{display:none}
@media (min-width:1024px){body.has-tb{padding-left:var(--tb-w)}body.has-tb header{margin-left:0}}/* technician list = LEFT sidebar */
@media (max-width:1023.98px){
  .tb{transform:translateX(-105%);transition:transform .22s ease;width:min(320px,86vw);box-shadow:var(--sh3)}
  body.tb-open .tb{transform:none}
  .tb-x{display:inline-grid;place-items:center}
  .tb-toggle{display:inline-flex;align-items:center;gap:8px;position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:39;border-radius:16px;padding:12px 16px;min-height:52px;font-size:var(--fs-sm);box-shadow:var(--sh3)}
  .tb-toggle .tb-tc{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.22);font-size:var(--fs-xs)}.tb-toggle .tb-tc:empty{display:none}
  body.tb-open .tb-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(30,20,14,.35)}
  body.tb-open .tb-toggle{display:none}
}
@media print{.tb,.tb-toggle,.tb-scrim{display:none!important}body.has-tb{padding-left:0!important}}
/* keep the turn-order toggle reachable when many arrival alerts are stacked (narrow screens) */
@media(max-width:1023.98px){body.has-tb .al-bar{max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}}
/* zip 26: while the turn-order drawer is open, arrival alerts move beside it (wide) or under it (phones) so they never cover its ✕ */
@media(max-width:1023.98px) and (min-width:600px){body.tb-open .al-bar{left:calc(min(320px,86vw) + 10px);right:10px;width:auto;transform:none}}
@media(max-width:599.98px){body.tb-open .al-bar{z-index:38}}
/* .btn links sized like buttons; header title never hidden under the language switch on phones */
.btn.small{min-height:36px;padding:7px 12px;font-size:var(--fs-sm);border-radius:10px;display:inline-flex;align-items:center}
@media (pointer:coarse){.btn.small{min-height:var(--tap)}}
@media (max-width:600px){header:has(> .lang-sw)>div:first-child{padding-right:150px}header:has(> .lang-sw) h1{overflow-wrap:anywhere}}
/* Home board: card + its action buttons read as one tile */
.hm-cols .hm-cw{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--warn);border-radius:var(--r-md);box-shadow:var(--sh1);gap:0;overflow:hidden}
.hm-cols .hm-cw:has(.hm-c-in_service){border-left-color:var(--info)}.hm-cols .hm-cw:has(.hm-c-ready_checkout){border-left-color:var(--ok)}
.hm-cols .hm-cw:has(.hm-c-done),.hm-cols .hm-cw:has(.hm-c-checked_out){border-left-color:var(--line2)}.hm-cols .hm-cw:has(.hm-c-upcoming){border-left-color:var(--slate)}
.hm-cols .hm-cw>.hm-card{border:0;border-radius:0;box-shadow:none;width:100%}
.hm-cols .hm-cw>.hm-acts{padding:4px 12px 12px}
.hm-cols .hm-cw:has(.hm-csel){box-shadow:0 0 0 3px var(--acc-ring),var(--sh2)}.hm-cols .hm-cw:has(.hm-target){box-shadow:0 0 0 3px var(--acc-mid)}
.hm-cols .hm-cw>.hm-card.hm-csel,.hm-cols .hm-cw>.hm-card.hm-target{outline-offset:-3px}
/* ---- turn bar states (burgundy/brown theme): signed in = GREEN row + "✓ Signed in"; not signed in = neutral/muted;
        with client = green base + copper band + copper status chip; next up = gold ring + gold "Next up" tag ---- */
.tb-row.tb-in{background:var(--in-bg);border-color:var(--in-line);border-left-color:var(--in)}
button.tb-row.tb-in:hover{background:#d5ebd7;border-color:var(--in)}
.tb-row.tb-notin{background:var(--card);border-color:var(--line);border-left-color:var(--line2);color:var(--mute)}
.tb-row.tb-notin .tb-name{color:var(--ink2)}.tb-row.tb-notin .tb-pos{background:var(--slate)}
.tb-in-lbl{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;margin:2px 0 3px;padding:1px 7px;border-radius:999px;background:#fff;border:1px solid var(--in-line);color:var(--in);font-size:11px;font-weight:800;line-height:1.5}
.tb-in .tb-st-free{color:var(--in)}
.tb-row.tb-in.tb-s-busy{border-left:7px solid var(--info)}
.tb-st-busy{align-self:flex-start;background:var(--info-bg);color:var(--info);border-radius:6px;padding:1px 6px}
.tb-st-busy::before{content:"●";margin-right:4px;font-size:9px;vertical-align:1px}
.tb-row.tb-up{box-shadow:0 0 0 2px var(--gold),var(--sh1)}
.tb-row.tb-up:not(.tb-in){background:var(--card)}
.tb-up .tb-pos{background:var(--gold-ink)}
.tb-next{background:var(--gold-bg);color:var(--gold-ink);border:1px solid var(--gold)}
/* zip 22: the ★ is in the markup (aria-hidden); no ::before so it isn't doubled */
.tb.tb-on .tb-live{background:var(--in);box-shadow:0 0 0 4px rgba(35,103,58,.18)}
.tb-st-busy{align-self:stretch}.tb-st-busy small{display:block;opacity:1}

/* present list rows wrap on narrow phones (desk "Sign out" now shows on every iPad/phone for the front desk) */
.hm-hrow,button.hm-arow{flex-wrap:wrap;min-width:0}.hm-hrow>*{min-width:0}.hm-hrow .hm-pbtn{white-space:nowrap}

/* ==========================================================================
   DARK HOME + DARK BOOKING + GOLD ACCENT LAYER (2026-10, zip 21)
   Page-scoped dark brown backgrounds:
     body.home-dark  -> back-office Home board tab only (toggled in admin.js)
     body.book-dark  -> public booking page (index.html) only
   Cards, forms, chips and buttons keep their light look. Text that sits directly
   on dark brown uses cream (#f6ead8 = 13.1:1 on #341f16, 14.3:1 on #2b1810).
   Gold is an accent only (burgundy stays dominant, brown secondary). No layout change:
   rims are border-color / box-shadow / pseudo-elements only.
   ========================================================================== */
:root{
  --dk-bg:#341f16;        /* page background (dark brown) */
  --dk-panel:#2b1810;     /* Home board panel on the dark page */
  --dk-col:#3d2519;       /* Home board columns */
  --dk-line:#5a3a2a;
  --cream:#f6ead8;        /* text on dark brown */
  --cream2:#dcc6a6;       /* secondary text on dark brown (10.2:1 on panel) */
  --gold-lo:#8a6420;
  --gold-hi:#e2bf6a;
  --gold-pale:#f0d58c;
  --gold-line:#d9bd7e;    /* gold rim on light surfaces */
  --gold-soft:#ead7ae;    /* thin gold dividers */
  --gold-sheen:linear-gradient(90deg,#8a6420 0%,#b8862b 22%,#e2bf6a 50%,#b8862b 78%,#8a6420 100%);
  --gold-sheen-d:linear-gradient(135deg,#8a6420,#e2bf6a 45%,#b8862b 70%,#f0d58c);
  --gold-ring:rgba(184,134,43,.45);
}

/* ---- gold header underline (all pages) ---- */
header{border-bottom-color:transparent}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-sheen);pointer-events:none}
header h1::before{box-shadow:0 0 0 1.5px var(--gold-hi),0 2px 6px rgba(138,100,32,.35)}

/* ---- gold rims on cards, panels, tabs, modals ---- */
.card{border-color:var(--gold-line)}
.tabs{border-color:var(--gold-line);box-shadow:var(--sh1),inset 0 -1px 0 var(--gold-soft)}
.tabs button.sel{box-shadow:0 2px 8px var(--acc-ring),inset 0 0 0 1.5px var(--gold-hi),inset 0 -3px 0 var(--gold-hi)}
.modal-box{border:1.5px solid var(--gold);box-shadow:var(--sh3),0 0 0 4px rgba(226,191,106,.18)}
.modal-box h3:first-child,.modal-box h2:first-child{border-bottom:1px solid var(--gold-soft);padding-bottom:8px}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent)}
.card>h3:first-child,.card>h2:first-child{text-shadow:none}

/* gold corner ornaments on key panels (pure decoration, pointer-events none) */
.hm-board,body.book-dark #view>.card,#view>.card[style*="max-width:380px"]{position:relative}
.hm-board::before,body.book-dark #view>.card::before,#view>.card[style*="max-width:380px"]::before{
  content:"";position:absolute;inset:6px;pointer-events:none;border-radius:calc(var(--r) - 4px);z-index:0;
  background:
    linear-gradient(var(--gold-hi),var(--gold-hi)) left top/16px 2px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) left top/2px 16px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) right top/16px 2px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) right top/2px 16px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) left bottom/16px 2px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) right bottom/2px 16px no-repeat}
.modal-box{background-image:linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi));background-size:18px 2px,2px 18px,18px 2px,2px 18px;background-position:8px 8px,8px 8px,calc(100% - 8px) 8px,calc(100% - 8px) 8px;background-repeat:no-repeat}

/* ---- gold-trimmed primary buttons (classless / .btn / small primaries / pay) ---- */
button:not([class]),.btn:not(.sec),button.small:not(.sec):not(.danger),button.pay,.nav button:not(.sec):not(.sel){box-shadow:0 1px 2px rgba(60,25,15,.2),inset 0 0 0 1px rgba(226,191,106,.75),inset 0 1px 0 rgba(255,236,190,.35)}
button.sec,.btn.sec{box-shadow:inset 0 -1px 0 var(--gold-soft)}

/* ---- inputs: gold-tinted border, gold focus ring ---- */
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],input[type=password],input[type=time],input[type=search],select,textarea{border-color:#dcc8a2}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-ring)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- gold-edged avatars ---- */
.av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold-hi)}
.cal-hn .av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold-hi)}

/* ---- Home cards (light) get gold rims; status left edge is kept ---- */
.hm-cols .hm-cw{border-top-color:var(--gold-line);border-right-color:var(--gold-line);border-bottom-color:var(--gold-line)}
.hm-chip{border-color:var(--gold-line)}

/* ---- technician list (left sidebar): only a subtle gold edge (rows, green signed-in state, Next up untouched) ---- */
.tb{border-right:1px solid var(--gold-line);box-shadow:6px 0 24px rgba(43,29,23,.06),inset -2px 0 0 rgba(226,191,106,.35)}
.tb-h{border-bottom-color:var(--gold-soft)}

/* ==== (a) dark-brown Home board page ==== */
body.home-dark{background:var(--dk-bg)}
body.home-dark #view>p,body.home-dark #hmhost>p,body.home-dark #hmhost:not(:has(.hm)){color:var(--cream)}
body.home-dark .hm-board{background:var(--dk-panel);border:1.5px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 0 1px rgba(226,191,106,.22)}
body.home-dark .hm-board::after{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:var(--gold-sheen);border-radius:2px;pointer-events:none}
body.home-dark .hm-bh{border-bottom:1px solid rgba(226,191,106,.35);padding-bottom:8px}
body.home-dark .hm-bh h3,body.home-dark .hm-board>h3{color:var(--cream)}
body.home-dark .hm-counts,body.home-dark .hm-colempty{color:var(--cream2)}
body.home-dark .hm-live{background:#4a2e20;color:var(--cream)}
body.home-dark .hm-live.on{background:#e2f1e3;color:#23673a}
body.home-dark .hm-col{background:var(--dk-col);border:1px solid rgba(226,191,106,.45);box-shadow:inset 0 1px 0 rgba(226,191,106,.25)}
body.home-dark .hm-colh{color:var(--cream);border-bottom:1px solid rgba(226,191,106,.3)}
body.home-dark .hm-coln{background:var(--gold-bg);color:#4a3206;box-shadow:0 0 0 1px var(--gold)}
body.home-dark .hm-col-waiting .hm-colh::before{background:#e8a940}
body.home-dark .hm-col-in_service .hm-colh::before{background:#e8875a}
body.home-dark .hm-col-checkout .hm-colh::before{background:#b3cb63}
body.home-dark .hm-empty-st{color:var(--cream2)}
body.home-dark .hm-empty-st b,body.home-dark .hm-empty-st h3,body.home-dark .hm-empty-st h4,body.home-dark .hm-empty-st strong{color:var(--cream)}
body.home-dark .hm-empty-ic{background:#4a2e20;box-shadow:0 0 0 1.5px var(--gold)}

/* ==== (b) dark-brown public booking page ==== */
body.book-dark{background:var(--dk-bg)}
body.book-dark .steps span{background:#5a3a2a}
body.book-dark .steps span.on{background:var(--gold-sheen-d)}
body.book-dark #view>.card{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px var(--gold),inset 0 0 0 1px rgba(226,191,106,.25);border-color:var(--gold)}
body.book-dark #view>p,body.book-dark #view>h2,body.book-dark #view>h3,body.book-dark main>p{color:var(--cream)}
body.home-dark header,body.book-dark header{background:var(--card)}/* opaque so the dark page does not grey the header */
/* Technician list STATES (zip 22):
   Idle (NOT signed in, default) = BURGUNDY tint + burgundy edge + filled "○ Idle" chip
   Signed in = GREEN + "✓ Signed in" chip (unchanged)   With client = YELLOW/amber + "● With client" chip (dark text)
   Next up = gold RING + "★ Next up" tag (no fill, so it can sit on any state). Never colour alone: every state has a text chip. */
.tb-row.tb-idle{background:#f4e4e1;border-color:#d9aeb1;border-left-color:#7b1e2e;color:#5c1622}
button.tb-row.tb-idle:hover{background:#efd6d2}
.tb-row.tb-idle .tb-name{color:#3f0f18}
.tb-row.tb-idle .tb-pos{background:#7b1e2e;color:#fff}
.tb-idle-lbl{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;margin:2px 0 3px;padding:1px 7px;border-radius:999px;background:#7b1e2e;border:1px solid #5c1622;color:#fff;font-size:11px;font-weight:800;line-height:1.5}
.tb-st-idle{color:#5c1622;font-weight:600}
.tb-idlesec h4{color:var(--acc)}
.tb-row.tb-s-busy,.tb-row.tb-in.tb-s-busy{background:#fff4c2;border-color:#e6c65a;border-left:7px solid #d9a400}
button.tb-row.tb-in.tb-s-busy:hover{background:#ffeea6}
.tb-st-busy,.tb-in .tb-st-busy{background:#ffd84d;color:#3d2e00;border:1px solid #c99a00}
.tb-row.tb-s-busy .tb-in-lbl{border-color:#c99a00}
.tb-row.tb-up,.tb-row.tb-up.tb-idle,.tb-row.tb-up.tb-s-busy{box-shadow:0 0 0 3px var(--gold),0 0 0 5px rgba(226,191,106,.45),var(--sh1)}
.tb-row.tb-up.tb-idle{background:#f4e4e1}
/* Settings: "Sign-in screen" toggle (zip 22) */
.si-set{margin:12px 0;padding:12px;border:1px solid var(--gold-line,#d9bd7e);border-radius:12px;background:var(--card)}
.si-how summary{cursor:pointer;font-weight:600;margin-top:6px}
.si-how ol{margin:6px 0 0 18px;padding:0}
/* zip 22: every sidebar name is a real button (44px+ touch target), decorations never swallow taps */
.tb-row{min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(226,191,106,.35);cursor:pointer;font:inherit;text-align:left;position:relative}
button.tb-row{appearance:none;-webkit-appearance:none;color:inherit}
.tb-row>*,.tb-row .tb-next,.tb-row .tb-av{pointer-events:none}
.tb-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tb-msg{margin:6px 10px 0;padding:8px 10px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tb-msg[hidden]{display:none}
.tb-msg-ok{background:#e3f3e7;color:#1d5a32;border:1px solid #9fd1ad}
.tb-msg-warn{background:#fff4c2;color:#3d2e00;border:1px solid #e6c65a}
.tb-msg-bad{background:#f4e4e1;color:#5c1622;border:1px solid #d9aeb1}
.tb-sheet{margin:8px 10px 0;padding:10px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--gold-line,#d9bd7e);box-shadow:var(--sh2,0 4px 14px rgba(0,0,0,.12));display:grid;gap:8px;position:relative;z-index:2}
.tb-sh-b{min-height:48px;width:100%;touch-action:manipulation}
.tb-all{margin:8px 0 0;width:100%;min-height:44px}.tb-sh-note{margin:0;font-size:var(--fs-sm)}


/* zip 22: technician "Take this client" */
.hm-take{min-height:44px;font-weight:700}
.hm-takeno{margin:6px 0 0;font-size:13px;color:#6b4a2b;background:#f8ecc9;border-radius:8px;padding:6px 10px}

/* ---- zip 23: AI Phone & Text Assistant add-on card ---- */
.aiaddon .ai-top{margin:-4px 0 8px}.aiaddon .ai-num b{font-size:22px;letter-spacing:.5px;color:var(--acc)}
.aiaddon .ai-sub{margin:-4px 0 10px 30px;font-size:13px}.aiaddon .ai-what li{margin:2px 0}
.aiaddon table.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}.aiaddon table.tbl th,.aiaddon table.tbl td{text-align:left;padding:6px;border-bottom:1px solid var(--line)}
.aiaddon details.ai-fwd{margin:8px 0}.aiaddon details.ai-fwd summary{cursor:pointer;color:var(--acc);font-weight:600}
.aiaddon .ai-log{max-height:240px;overflow:auto;margin:6px 0}.aiaddon .ai-msg{padding:6px 10px;border-radius:10px;margin:4px 0;max-width:85%}
.aiaddon .ai-msg.in{background:#f3ece3}.aiaddon .ai-msg.out{background:#f6efd9;margin-left:auto;border:1px solid #e2bf6a}.aiaddon .ai-msg.esc{background:#fdecea;font-size:13px}
.aiaddon #aisub:disabled{opacity:.55;cursor:not-allowed}
/* zip 23: AI add-on usage meters */
.aiaddon .ai-meter-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.aiaddon .ai-meter { flex: 1; height: 12px; border-radius: 6px; background: #e9ecef; overflow: hidden; }
.aiaddon .ai-meter > i { display: block; height: 100%; background: #2e7d32; border-radius: 6px; }
.aiaddon .ai-meter.w > i { background: #e0a800; }
.aiaddon .ai-meter.x > i { background: #c62828; }
.aiaddon .ai-meter-l { min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.aiaddon .ai-disc { border: 1px solid #c9d6e3; background: #f4f8fb; border-radius: 8px; padding: 8px 10px; font-weight: 600; }
.aiaddon .ai-cap { align-items: center; }
/* zip 24: outside business hours (owner/manager calendar) */
.cal-closed{position:absolute;left:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(60,40,80,.07),rgba(60,40,80,.07) 5px,transparent 5px,transparent 10px)}
.lg.closed{background:repeating-linear-gradient(135deg,#d9d0e3,#d9d0e3 3px,#fff 3px,#fff 6px);border:1px solid var(--line)}
.cal-ev.offh{outline:2px dashed #6b4fa0;outline-offset:-2px}
.ev-off{display:inline-block;margin-top:2px;font-size:10.5px;line-height:1.3;padding:0 5px;border-radius:8px;background:#efe8fb;color:#4b3478;white-space:nowrap}
.pill.offh{background:#efe8fb;color:#4b3478}
/* zip 25: take-client alert cards (shared walk-in / appointment component), almost-done pop-ups, sidebar countdown */
.ta-wrap{position:fixed;top:12px;right:12px;z-index:1200;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;display:none;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.ta-wrap.ta-has{display:flex}
.ta-list{display:flex;flex-direction:column;gap:8px}
.ta-card{background:#fff;border:2px solid var(--acc,#7a1f3d);border-left:8px solid var(--acc,#7a1f3d);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(40,10,20,.25)}
.ta-card.ta-k-appointment{border-color:var(--gold,#b8862b);border-left-color:var(--gold,#b8862b);background:var(--gold-bg,#f8ecc9)}
.ta-card.ta-k-notice{border-width:1px;border-left-width:6px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.ta-card.ta-k-done{border-color:var(--warn,#b7791f);border-left-color:var(--warn,#b7791f)}
.ta-card.ta-gone{opacity:.7;transition:opacity 2.5s}
.ta-h{margin:0 0 4px;font-size:18px;color:var(--acc,#7a1f3d)}
.ta-k-appointment .ta-h{color:var(--gold-ink,#6b4a0b)}
.ta-who{margin:0 0 8px;font-size:17px}.ta-by,.ta-note{margin:0 0 6px;font-size:14px}
.ta-take{width:100%;min-height:52px;font-size:18px;font-weight:700;background:var(--acc,#7a1f3d);color:#fff;border-radius:10px}
.ta-row{display:flex;gap:8px}.ta-row .ta-take{flex:1}
.ta-taken{margin:0;color:var(--err,#b42318);font-size:17px}
.ta-left{font-variant-numeric:tabular-nums}.ta-over{color:var(--err,#b42318);font-weight:700}
.ta-pop{background:var(--gold-bg,#f8ecc9);color:var(--gold-ink,#6b4a0b);border:2px solid var(--gold,#b8862b);border-radius:12px;padding:10px 12px;font-size:16px;box-shadow:0 8px 24px rgba(40,10,20,.2)}
.ta-pops{display:flex;flex-direction:column;gap:6px}
.ta-mgr-d{background:#fff;border:1px solid var(--gold,#b8862b);border-radius:10px;padding:8px 10px}
.ta-mgr-d summary{cursor:pointer;font-weight:700;color:var(--acc,#7a1f3d)}
.ta-mrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 0;border-top:1px solid #eee}.ta-mtx{flex:1 1 100%}
.tb-cd{display:block;font-size:13px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--info,#8a6a00)}
.tb-cd.tb-cd-over{color:var(--err,#b42318)}
.tb-cd-cl{display:block;font-size:13px}
.tb-cd-stop{color:var(--slate,#667085);font-weight:400}
.tb-pin{font-size:12px;color:var(--gold-ink,#6b4a0b);margin:4px 8px}
/* responsive pass (all iPhones incl. notch/Dynamic Island, foldable inner ~673-900px, iPad split view, landscape) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
header{padding-top:max(12px,env(safe-area-inset-top))}
header>.lang-sw{top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
main{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
img,video,canvas,svg{max-width:100%}
table{max-width:100%}
@media (max-width:420px){header>.lang-sw{position:static;display:inline-flex;margin:8px 0 0}header:has(> .lang-sw)>div:first-child{padding-right:0}}
@media (orientation:landscape) and (max-height:500px){header{position:static}.modal>*{max-height:calc(100dvh - 24px);overflow-y:auto}}
/* two-screen / spanning devices: split at the hinge, otherwise fluid */
@media (horizontal-viewport-segments:2){.hm-cols{grid-template-columns:env(viewport-segment-width 0 0,1fr) env(viewport-segment-width 1 0,1fr);column-gap:calc(env(viewport-segment-left 1 0,0px) - env(viewport-segment-right 0 0,0px))}.pos{grid-template-columns:1fr 1fr}}
@media (vertical-viewport-segments:2){.modal>*{max-height:env(viewport-segment-height 0 0,100dvh);overflow-y:auto}}
@media (pointer:coarse){a.btn,.linkb:not(.small-t),input[type=checkbox],input[type=radio]{min-height:44px;min-width:44px}}