/* ---- The app typeface: Plus Jakarta Sans (SIL Open Font Licence), kept with the app so it works with no signal ---- */
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* MiSalon styles, in the same order they applied inside misalon.html. */

/* ---- screens added after the one-file app (was assets/app/app.css) ---- */
/* MiSalon screens added after the one-file app: clients, cash-up, team, waiting list, diary tools.
   Uses the same tokens as the modern layer in misalon.html. */

/* A sheet: slides up from the bottom on a phone, a centred dialog on a computer. */
.misheet-back{position:fixed;inset:0;background:rgba(38,43,51,.55);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.misheet{background:#fff;width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(16,24,40,.18)}
@media(min-width:700px){.misheet-back{align-items:center}.misheet{border-radius:16px}}
.misheet h3{margin:0 0 4px;font-size:18px}
.misheet .sub{color:var(--mut);font-size:13.5px;margin:0 0 12px}
.misheet .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.misheet .acts .btn{flex:1;min-width:120px}

/* Diary tools under the date bar */
.dtools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dtools .btn{flex:0 0 auto}
@media(max-width:560px){.dtools .btn{flex:1 1 calc(50% - 8px)}}
.board td.blk{background:repeating-linear-gradient(135deg,#EEF0F3 0 6px,#F7F8FA 6px 12px)}
.board td.blk .bl{display:block;font-size:10.5px;color:var(--mut);padding:4px 6px;text-transform:capitalize}
.it.blockrow{background:repeating-linear-gradient(135deg,#EEF0F3 0 6px,#F7F8FA 6px 12px);border-radius:8px;padding-left:8px}

/* WhatsApp buttons */
.btn.wa{background:#3A7D5A;color:#fff;border:0}
.btn.wa:hover{background:#2F6B4B}
.btn.wa svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;fill:currentColor}

/* Clients */
.clsearch{display:flex;gap:8px;align-items:center}
.clsearch input{flex:1}
.cltabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.cltabs .chip{margin:0}
.clstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}
.consent{display:grid;gap:8px;margin-top:10px}
.consent label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink);margin:0}
.consent input{width:20px;height:20px;flex:none;margin-top:1px}
.consent small{display:block;color:var(--mut);font-size:12px}
.allergy{background:#F8EEEC;color:#A8463E;border-radius:8px;padding:8px 10px;font-size:13.5px;margin-top:10px}

/* Cash-up */
.cu-grid{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;align-items:center;font-variant-numeric:tabular-nums}
.cu-grid .h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.cu-grid input{width:120px;text-align:right;padding:9px 10px}
.cu-diff{font-weight:700;font-size:18px;margin-top:10px}
.cu-diff.bad{color:var(--bad)}.cu-diff.ok{color:var(--ok)}

/* Team */
.tm-access{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--sand);color:var(--ink)}
.tm-access.owner{background:var(--blush);color:var(--gold2)}
.checks{display:grid;gap:8px;margin-top:10px}
.checks label{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink);margin:0}
.checks input{width:20px;height:20px;flex:none}

/* Till extras */
.tillx{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.tillx{grid-template-columns:1fr}}
.tillx .pair{display:flex;gap:8px}
.tillx .pair > *{flex:1;min-width:0}
.splitrow{display:flex;gap:8px;align-items:center;margin:6px 0}
.splitrow span{flex:1}
.splitrow input{width:130px;text-align:right}

:root{--ink:#262B33;--gold:#A9603F;--gold2:#8E4F33;--paper:#F7F8FA;--line:#E4E7EC;--mut:#667085;--ok:#2F7D52;--bad:#A8463E}
*{box-sizing:border-box}
body{margin:0;background:#F3F4F6;color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding-bottom:96px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
h1,h2{font-family:var(--font);font-weight:600}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0 0 10px}
.top{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#2C313A,var(--ink));color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #3A404A}
.top>*{min-width:0}
.top .brand{flex:none;display:flex;align-items:center}
.top .brand img{height:34px;width:auto;display:block}
.top .who,.top .whoami{flex:1;min-width:0;line-height:1.25;padding-left:14px;border-left:1px solid #414751}
.top .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who .wlbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A94A6;margin-bottom:2px}
.top .who #whoSalon{font-family:var(--font);font-size:16px;font-weight:600;color:#F7F8FA;letter-spacing:.1px}
.top .who #whoName{font-size:11.5px;color:#98A2B3;margin-top:1px}
.top .actwrap{flex:none;display:flex;gap:8px;align-items:center}
/* The hub is styled by an id rule with !important, which beat .hide, so the hub
   never went away and every "page" opened about 1,800px below the fold. */
#mHub.hide,#pMore>.hide,#scApp .hide{display:none !important}
.mbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #E4E7EC}
.mbar .mbt{font-family:var(--font);font-size:19px;font-weight:600;color:#262B33;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbar .btn{flex:none}
.hbrand{display:flex;align-items:center;gap:14px}
.hbrand img{height:56px;width:auto;max-width:190px;object-fit:contain;background:#fff;border-radius:6px;padding:6px;flex:none}
.hbtext{min-width:0}
@media(max-width:560px){.hbrand{gap:10px}.hbrand img{height:42px;max-width:130px;padding:5px}}
.top .quickbar{flex:none;display:flex;gap:7px;align-items:center;margin-left:auto}
.top .qb{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid #474E59;color:#E4E7EC;border-radius:99px;padding:8px 15px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.top .qb:hover{background:rgba(255,255,255,.14)}
.top .qb.hot{background:#A9603F;border-color:#A9603F;color:#fff}
.top .qb.hot:hover{background:#8E4F33}
.top .qb .qi{display:inline-flex;flex:none}
.top .qb .qi svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
@media(max-width:900px){
  .top .qb .qt{display:none}
  .top .qb{padding:9px 11px}
  .top .quickbar{gap:6px}
}
@media(max-width:430px){
  .top .quickbar .qb:nth-child(3){display:none}
}
@media(max-width:340px){
  .top .quickbar .qb:nth-child(2){display:none}
}
.top .actwrap button{white-space:nowrap}
.top .avatar{width:34px;height:34px;border-radius:99px;background:#A9603F;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.top button{background:rgba(255,255,255,.07);border:1px solid #474E59;color:#E4E7EC;border-radius:99px;padding:8px 15px;font-size:12px;font-weight:600}
.top button:hover{background:rgba(255,255,255,.13)}
@media(max-width:560px){
  .top{gap:10px;padding-left:13px;padding-right:13px}
  .top .brand img{height:27px}
  .top .who,.top .whoami{padding-left:10px}
  .top .who #whoSalon{font-size:14px}
  .top .avatar{display:none}
  .top button{padding:7px 12px;font-size:11.5px}
}
@media(max-width:380px){
  .top .who .wlbl{display:none}
  .top .who #whoSalon{font-size:13px}
  .top button{padding:6px 10px;font-size:11px}
}






.top button:active{background:rgba(255,255,255,.14)}

.wrap{max-width:760px;margin:0 auto;padding:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -18px rgba(16,24,40,.35)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.k{background:linear-gradient(180deg,#FFFFFF,var(--paper));border:1px solid var(--line);border-radius:14px;padding:12px}
.k .n{font-size:23px;font-weight:800;font-family:var(--font);color:var(--gold2);letter-spacing:-.5px;line-height:1.15}
.k .l{font-size:11px;color:var(--mut)}
.btn{background:var(--ink);color:#fff;border:0;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:600;min-height:46px}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold);color:#fff}
.btn.alt{background:#fff;color:var(--ink);border:1px solid #D0D5DD}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5}
input,select,textarea{width:100%;padding:13px;border:1px solid #D0D5DD;border-radius:12px;font-size:16px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,96,63,.18)}
label{font-size:12px;color:var(--mut);display:block;margin:10px 0 4px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row > *{flex:1;min-width:120px}
.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(38,43,51,.97);backdrop-filter:blur(12px);display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #262B33}
.tabs button{flex:1;background:none;border:0;color:#98A2B3;padding:9px 2px 11px;font-size:10.5px;line-height:1.2;min-height:54px}
.tabs button .ic{display:block;font-size:19px;margin-bottom:2px}
.tabs button.on{color:var(--gold)}
.tabs button.on .ic{transform:translateY(-1px)}
.list .it{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.list .it:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list b{display:block;font-size:14px}
.list .sub{font-size:12px;color:var(--mut)}
.pill{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--paper);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:#EBF3EE;color:var(--ok);border-color:#D3E8DA}
.pill.warn{background:#F6EEEA;color:var(--bad);border-color:#EFDCD3}
.msg{padding:10px 12px;border-radius:10px;margin:0 0 10px;font-size:13px;display:none}
.msg.ok{display:block;background:#EBF3EE;color:var(--ok)}
.msg.bad{display:block;background:#F6EEEA;color:var(--bad)}
.login{max-width:380px;margin:8vh auto 0;padding:0 16px}
.login .logo{text-align:center;margin-bottom:18px}
.login .logo .b1{font-family:var(--font);font-size:28px}
.login .logo .b1 span{color:var(--gold2)}
.login .logo .b2{font-size:11px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.muted{color:var(--mut);font-size:13px}
.tot{font-family:var(--font);font-size:22px;font-weight:700}
.qty{width:64px;text-align:center;padding:8px}
.hide{display:none}
.hr{height:1px;background:var(--line);margin:12px 0}
.cartbar{position:fixed;left:0;right:0;bottom:52px;background:var(--gold);color:#fff;padding:11px 16px;font-weight:700;display:none;z-index:45}
@media(min-width:700px){.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}}

/* ==== MiSalon app v2 : website look, desktop layout, diary board ==== */
.lbl{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px}
.card{border-radius:4px}
.k{border-radius:4px}
.btn{border-radius:3px;letter-spacing:.02em}
.btn.sm{border-radius:3px}
input,select,textarea{border-radius:3px}
.pill{border-radius:3px;letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:700}
.tabs button .ic{display:block;height:20px;margin:0 auto 3px}
.tabs button .ic svg{width:20px;height:20px;display:block;margin:0 auto}
.tabs button{color:#667085}
.tabs button.on{color:#F6EEEA}
.tabs button.on .ic svg{stroke:#F6EEEA}
.ic svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hd h2{margin:0}
@media(min-width:1000px){
  .wrap{max-width:1360px;padding:22px}
  .cols2{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
  .kgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
/* diary board */
.dbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dbar .nav{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:10px 13px;font-weight:700;min-height:44px}
.dbar input[type=date]{max-width:190px}
.board{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board table{border-collapse:collapse;width:100%;min-width:520px}
.board th{position:sticky;top:0;background:var(--ink);color:#F7F8FA;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 8px;text-align:left;font-weight:700;z-index:2}
.board th.t{width:64px}
.board td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:top;height:38px}
.board td.t{font-size:11px;color:var(--mut);padding:6px 8px;background:var(--paper);white-space:nowrap;border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.board td:last-child{border-right:0}
.slot{display:block;width:100%;height:100%;min-height:38px;border:0;background:transparent;cursor:pointer}
.slot:hover{background:#F6EEEA}
.bk{display:block;padding:6px 8px;background:#F6EEEA;border-left:3px solid var(--gold);text-align:left;width:100%;border:0;border-bottom:1px solid #E4E7EC;cursor:pointer}
.bk.done{background:#EBF3EE;border-left-color:#3A7A73}
.bk b{display:block;font-size:12.5px;line-height:1.25}
.bk span{display:block;font-size:11px;color:var(--mut)}
.dayList .it{align-items:flex-start}
.dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.two{grid-template-columns:1fr}}
.empty{padding:26px 10px;text-align:center;color:var(--mut)}
.empty b{display:block;color:var(--ink);font-family:var(--font);font-size:16px;margin-bottom:4px}
/* wizard */
#wiz{position:fixed;inset:0;z-index:900;background:var(--paper);overflow:auto;display:none}
#wiz .inner{max-width:640px;margin:0 auto;padding:26px 16px 90px}
#wiz .steps{display:flex;gap:6px;margin:14px 0 20px}
#wiz .steps i{flex:1;height:3px;background:var(--line)}
#wiz .steps i.on{background:var(--gold)}
#wiz h1{font-size:26px;margin:0 0 6px}
#wiz .sub{color:var(--mut);margin:0 0 18px;font-size:14px}
#wiz .foot{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;justify-content:space-between}
#wiz .foot .btn{flex:1;max-width:220px}
.chip{display:inline-block;padding:7px 11px;border:1px solid var(--line);background:#fff;font-size:12.5px;margin:0 6px 6px 0;cursor:pointer;border-radius:3px}
.chip.on{background:var(--gold);color:#fff;border-color:var(--gold)}


/* ==== Today: hero band and shortcut tiles ==== */
.hero{background:linear-gradient(160deg,#262B33,#3A404A);color:#F7F8FA;border-radius:4px;padding:20px;margin:0 0 14px;display:grid;gap:16px}
.hero .lbl{color:#F6EEEA}
.hero h1{font-family:var(--font);font-size:26px;margin:0;color:#fff;line-height:1.15}
.hero .hsub{font-size:13px;color:#98A2B3;margin-top:4px}
.hero .k{background:rgba(255,255,255,.05);border:1px solid #474E59}
.hero .k .n{color:#fff}
.hero .k .l{color:#98A2B3}
@media(min-width:900px){.hero{grid-template-columns:minmax(220px,1fr) 2fr;align-items:center;padding:26px 24px}.hero h1{font-size:32px}}
.shorts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sh{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 13px;cursor:pointer;min-height:96px;transition:border-color .15s,transform .1s}
.sh:hover{border-color:var(--gold)}
.sh:active{transform:translateY(1px)}
.sh .ico{width:34px;height:34px;border-radius:3px;background:#F6EEEA;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.sh .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sh b{font-size:14px;line-height:1.25;display:block}
.sh span{font-size:11.5px;color:var(--mut);line-height:1.35}
.sh.hot{background:var(--ink);border-color:var(--ink)}
.sh.hot b{color:#fff}.sh.hot span{color:#98A2B3}
.sh.hot .ico{background:var(--gold);color:#fff}
.sh .tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold);background:#F6EEEA;padding:2px 6px;border-radius:2px}
.tipcard{background:var(--ink);color:#F7F8FA;border-color:var(--ink)}
.tipcard .muted{color:#98A2B3}


/* Today: hero and the shortcut band run the full width of the grid */
@media(min-width:1000px){
  #pToday > .hero, #pToday > .card:has(.shorts), #pToday > .cols2{grid-column:1/-1}
  #pToday > .cols2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
  #pToday > .cols2 > div{display:flex;flex-direction:column;gap:14px}
  #pToday > .cols2 > div:first-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  #pToday > .cols2 > div:first-child > .card{margin:0}
  #pToday > .cols2 > div:last-child > .card{margin:0}
  .shorts{grid-template-columns:repeat(4,1fr)}
  .hero .kgrid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1000px) and (max-width:1300px){ .shorts{grid-template-columns:repeat(3,1fr)} }


/* Full-width on desktop and tablet (Leon, 22 Aug). Mobile untouched. */
@media (min-width: 1000px){
  main, .wrap, .container, .page, .shell, .panelwrap, .content { max-width: 1560px !important; }
}

/* House style aligned with misalon-site.html - ink, ivory, plum. 23 Aug */
:root{--ink2:#3A404A;--sand:#EEF0F3;--blush:#F6EEEA;--jade:#3A7A73}
body{background:var(--paper)}
h1,h2,h3,.tot,.k .n,.login .logo .b1{font-family:var(--font);font-weight:800;letter-spacing:-.01em}
h2{font-size:18px}
.card{border-radius:4px;box-shadow:none}
.k,.btn,.btn.sm,input,select,textarea{border-radius:3px}
.top{background:var(--ink)}
.top button{border-radius:3px}
.pill{border-radius:2px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,96,63,.16)}
.lbl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 6px}
/* The shop */
#ordResults{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
#ordResults>div{border:1px solid var(--line) !important;border-radius:3px !important;background:#fff;padding:0 !important;display:block !important}
#ordResults>div:hover{border-color:var(--gold) !important}
.pimg{background:#fff;border-bottom:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pimg img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.pbody{padding:9px 10px 11px}
.pname{font-size:12.5px;line-height:1.35;min-height:34px;overflow:hidden}
.pprice{font-weight:800;font-size:15px;margin-top:4px}
.pprice s{font-weight:400;font-size:12px;color:var(--mut);margin-left:5px}
.pact{margin-top:8px;display:flex;gap:6px;align-items:center}
.pact .btn{flex:1;padding:8px;font-size:12.5px;min-height:38px}
.pstep{display:flex;gap:6px;align-items:center;width:100%}
.pstep b{flex:1;text-align:center;font-size:14px}
.shopbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:2px 0 10px}
@media(min-width:640px){#ordResults{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(min-width:1000px){#ordResults{grid-template-columns:repeat(5,minmax(0,1fr)) !important}}
@media(min-width:1400px){#ordResults{grid-template-columns:repeat(6,minmax(0,1fr)) !important}}
/* Install the app */
#pwaSteps{display:none;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
#pwaSteps h3{font-size:13px;margin:12px 0 4px}
#pwaSteps ol{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink)}
/* ---- Order tab: proper shop with filters ---- */
.shoprow{display:block}
.ofilters{display:none;background:#fff;border:1px solid #E4E7EC;border-radius:3px;padding:14px;margin-bottom:12px}
.ofilters.open{display:block;position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;overflow:auto;border-radius:0;margin:0;padding:16px 16px 90px}
.ofhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ofgroup{border-top:1px solid #E4E7EC;padding:12px 0}
.ofgroup:first-of-type{border-top:0;padding-top:0}
.ofgroup h4{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#667085;font-weight:700}
.ofopt{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;cursor:pointer;color:#3A404A}
.ofopt.sub{padding-left:14px;font-size:13.5px;color:#3F4756}
.ofopt.sub2i{padding-left:28px;font-size:13px;color:#5B6475}
.ofopt .cnt{margin-left:auto;font-size:11px;color:#98A2B3}
.ofopt input{accent-color:#A9603F;flex:none}
.ofsearch{width:100%;padding:8px 10px;border:1px solid #E4E7EC;border-radius:3px;box-sizing:border-box;font-size:14px;margin-bottom:8px}
.ofscroll{max-height:220px;overflow:auto}
.otwist{margin-left:auto;border:1px solid #E4E7EC;background:#fff;width:20px;height:20px;line-height:1;border-radius:3px;cursor:pointer;color:#A9603F;font-weight:700;flex:none}
.ocatgrp{border-bottom:1px solid #EEF0F3}
.osubs{padding-bottom:4px}
.ochips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.ochips::-webkit-scrollbar{display:none}
.ochip{flex:none;border:1px solid #E4E7EC;background:#fff;color:#3A404A;padding:7px 14px;border-radius:99px;font-size:13px;cursor:pointer;white-space:nowrap}
.ochip.on{background:#A9603F;border-color:#A9603F;color:#fff}
.opills{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.opill{background:#F6EEEA;color:#A9603F;border-radius:99px;padding:4px 10px;font-size:12px}
.opill b{cursor:pointer;margin-left:6px}
.otoolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ocount{font-size:13px;color:#667085;margin-left:auto}
#ordSort{padding:7px 10px;border:1px solid #E4E7EC;border-radius:3px;font-size:13px;background:#fff}
.olow{background:#F6EEEA;color:#A9603F;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px;margin-left:6px}
@media(min-width:1000px){
  .ofbtn{display:none}
  .shoprow{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
  .ofilters{display:block;position:sticky;top:10px;margin-bottom:0}
  .ofilters .btn.gold{display:none}
  .ochips{flex-wrap:wrap;overflow:visible}
}

/* ---- till buttons and product picker (was injected by TILL v2) ---- */
.tbtn{display:inline-block;border:1px solid #D0D5DD;background:#FFFFFF;color:#262B33;border-radius:10px;padding:9px 13px;margin:0 6px 6px 0;font:inherit;font-size:14px;cursor:pointer;line-height:1.2}
.tbtn.on{background:#262B33;color:#F7F8FA;border-color:#262B33}
.tbtn.gold{background:#A9603F;border-color:#A9603F;color:#FFFFFF;font-weight:600}
.tbtnwrap{display:flex;flex-wrap:wrap;margin-top:4px}
.tprod{display:block;width:100%;text-align:left;border:1px solid #D0D5DD;background:#FFFFFF;border-radius:10px;padding:10px 12px;margin-bottom:6px;font:inherit;font-size:14px;cursor:pointer}
.tprod.on{border-color:#A9603F;box-shadow:0 0 0 2px rgba(169,96,63,.35)}
.tprod .tp2{display:block;color:#667085;font-size:12px;margin-top:2px}
.tscroll{max-height:260px;overflow:auto;margin-top:6px}

/* ---- manage a booking (was injected by DIARY v2) ---- */
.dmore{border:1px solid #D0D5DD;background:#FFFFFF;border-radius:10px;padding:10px 12px;margin:6px 0 10px}
.dmore .row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.dmore .row > div{flex:1 1 150px}
.dmore label{display:block;font-size:12px;color:#667085;margin-bottom:2px}

/* ---- salon setup sections (was injected by SETUP2) ---- */
.suSec{border:1px solid #E4E7EC;border-radius:12px;background:#fff;margin-top:12px;overflow:hidden}
.suHead{padding:14px 16px;cursor:pointer;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
.suBody{padding:0 16px 16px;display:none}.suSec.open .suBody{display:block}
.suRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.suRow>div{flex:1 1 200px}
.suRow label{display:block;font-size:12px;color:#667085;margin-bottom:3px}
.suRow input,.suRow select,.suRow textarea{width:100%;padding:10px;border:1px solid #D0D5DD;border-radius:8px;font:inherit;font-size:16px;box-sizing:border-box}
.suNote{color:#667085;font-size:13px;margin-top:8px}

/* ---- wide screens ---- */
@media(min-width:900px){
 .wrap{max-width:1500px !important;padding-left:clamp(16px,2.4vw,34px) !important;padding-right:clamp(16px,2.4vw,34px) !important;}
 header.top,.topbar{padding-left:clamp(16px,2.4vw,34px);padding-right:clamp(16px,2.4vw,34px);}
 #pToday,#pStock,#pMore{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-items:start;}
 #pToday.hide,#pStock.hide,#pMore.hide{display:none !important;}
 #pToday>.card,#pStock>.card,#pMore>.card{margin:0 !important;}
 #pToday>h2,#pStock>h2,#pMore>h2,#pMore>.osRow,#mHub{grid-column:1/-1;}
 #mHub{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;gap:14px !important;}
 #ldList table,table{width:100% !important;}
 .bottombar,nav.bottom{max-width:1500px;margin:0 auto;}
 #psList,#sList,#lowPrefillList,#dList,#stockList,#svcRows,#recList{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:0 20px;align-items:start;}
 #psList>*,#sList>*{border-bottom:1px solid #EEF0F3;}
 #ordResults{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;}
 #ordResults>div{border:1px solid #E4E7EC;border-radius:12px;padding:10px 12px;background:#fff;align-items:center;}
 #ordResults>div:hover{border-color:#A9603F;}
}
@media(min-width:900px) and (max-width:1200px){
 #pToday,#pStock,#pMore{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}
}
@media(min-width:1400px){
 #ordResults{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}

/* HUB v2 - readable tiles. */
#mHub{gap:14px !important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;}
#mHub .card{padding:16px 18px !important;border:1px solid #E4E7EC;border-radius:14px;background:#fff;
  cursor:pointer;transition:box-shadow .15s ease,transform .15s ease;display:block !important;}
#mHub .card:hover{box-shadow:0 4px 14px rgba(16,24,40,.08);transform:translateY(-1px);}
#mHub .card strong{display:block !important;font-family:var(--font);font-size:17px;line-height:1.25;
  font-weight:700;color:#262B33;margin:0 0 6px !important;}
#mHub .card span{display:block !important;font-size:13.5px;line-height:1.45;color:#667085;}
#mHub .card b{display:inline-block;vertical-align:middle;}
@media (max-width:520px){
  #mHub{grid-template-columns:1fr !important;gap:10px !important;}
  #mHub .card{padding:14px 16px !important;}
  #mHub .card strong{font-size:16px;}
}
.suSec .suHead{font-family:var(--font);font-size:16px;}

/* LOOK v3 - gold headings where the words under them are dark, and figures that do not break. */
#mHub .card strong, .card > h2, #pMore h2, #pToday h2, #pStock h2, .suSec .suHead > span:first-child{
  color:#262B33 !important;
}
.kgrid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr)) !important;}
.k{padding:14px 16px !important;}
.k .n{white-space:nowrap !important;font-size:22px !important;letter-spacing:0 !important;}
@media (max-width:420px){
  .kgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) !important;}
  .k .n{font-size:20px !important;}
}

/* ==== MODERN - 11 Sep 2026 ====
   One neutral look for salon, barber and spa: slate ink, cool greys, and the
   logo's coral as the only accent. Rounder corners, soft shadows, one sans font.
   Last style on the page on purpose. Words, layout and behaviour are untouched. */
:root{
  --ink:#262B33;--ink2:#3A404A;--gold:#A9603F;--gold2:#8E4F33;--coral:#D08A6E;
  --paper:#F7F8FA;--line:#E4E7EC;--mut:#667085;--ok:#2F7D52;--bad:#A8463E;
  --blush:#F6EEEA;--sand:#EEF0F3;--jade:#3A7A73;
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sh1:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 4px 12px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
}
body{background:var(--paper);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.tot,.k .n,.hero h1,.login .logo .b1,.top .who #whoSalon,.mbar .mbt,#wiz h1,.empty b{font-family:var(--font);letter-spacing:-.015em}
h1,h2,h3{font-weight:700}
h2{font-size:17px}

/* Cards and figures */
.card{border-radius:16px;border:1px solid var(--line);box-shadow:var(--sh1)}
.k{border-radius:12px;border:1px solid var(--line);background:#fff}
.k .n{font-weight:700;color:var(--ink)}
.k .l{font-size:12px;color:var(--mut)}
.lbl{font-size:11px;letter-spacing:.08em;font-weight:600;color:var(--gold)}
.hr{background:var(--line)}

/* Buttons and fields */
.btn{border-radius:10px;font-weight:600;letter-spacing:0;transition:background-color .15s,border-color .15s,box-shadow .15s}
.btn.sm{border-radius:8px}
.btn.gold{background:var(--gold)}
.btn.gold:hover{background:var(--gold2)}
.btn.alt{background:#fff;border:1px solid #D0D5DD;box-shadow:var(--sh1)}
.btn.alt:hover{background:var(--sand)}
.btn:focus-visible,.sh:focus-visible,.tabs button:focus-visible,.top button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
input,select,textarea{border-radius:10px;border-color:#D0D5DD}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(169,96,63,.14)}
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
.pill{border-radius:999px;font-size:10px;letter-spacing:.06em;font-weight:600;padding:3px 9px}
.msg{border-radius:10px}
.chip{border-radius:999px}
.chip.on{background:var(--ink);border-color:var(--ink)}

/* Top bar */
.top{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.06)}
.top .who,.top .whoami{border-left-color:rgba(255,255,255,.12)}
.top .who .wlbl{letter-spacing:.1em;color:#8A94A6}
.top .who #whoSalon{font-weight:700}
.top .qb,.top button{border-radius:999px}
.top .qb.hot{background:var(--gold);border-color:var(--gold)}
.top .qb.hot:hover{background:var(--gold2)}
.top .avatar{background:var(--ink2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Today */
.hero{border-radius:20px;background:radial-gradient(90% 120% at 100% 0%,rgba(208,138,110,.20),rgba(208,138,110,0) 55%),linear-gradient(160deg,#262B33,#343A44)}
.hero h1{font-weight:700;letter-spacing:-.02em}
.hero .k{border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.hero .lbl{color:#E3B8A5}
.sh{border-radius:14px;box-shadow:var(--sh1);transition:border-color .15s,box-shadow .15s,transform .1s}
.sh:hover{border-color:#D0D5DD;box-shadow:var(--sh2)}
.sh b{color:var(--ink)}
.sh span{color:var(--mut)}
.sh.hot b{color:#fff}
.sh.hot span{color:#98A2B3}
.sh .ico{border-radius:10px;background:var(--blush);color:var(--gold)}
.sh.hot{background:var(--ink);border-color:var(--ink)}
.sh.hot .ico{background:var(--coral);color:#fff}
.tipcard{background:linear-gradient(160deg,#262B33,#343A44);border-color:#262B33}

/* More */
#mHub .card{border-radius:16px;box-shadow:var(--sh1)}
#mHub .card:hover{box-shadow:var(--sh2)}
.list .it{border-bottom-color:var(--line)}

/* Bookings board */
.board{border-radius:12px;border:1px solid var(--line)}
.board:empty{border:0}
.board th{background:#fff;color:var(--mut);border-bottom:1px solid var(--line);letter-spacing:.08em;font-weight:600}
.board td.t{background:var(--paper)}
.slot:hover{background:var(--blush)}
.bk{border-radius:8px;background:var(--blush)}
.bk.done{background:#EBF3EE}
.dbar .nav{border-radius:10px;border-color:#D0D5DD}

/* Bottom tabs */
.tabs{background:rgba(38,43,51,.97);border-top:1px solid rgba(255,255,255,.06)}
.tabs button{color:#98A2B3;font-weight:500}
.tabs button .ic{height:28px;width:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin:0 auto 2px}
.tabs button.on{color:#fff}
.tabs button.on .ic{background:rgba(208,138,110,.18);transform:none}
.tabs button.on .ic svg{stroke:var(--coral)}
.cartbar{background:var(--gold);bottom:calc(62px + env(safe-area-inset-bottom))}

/* Setup wizard */
#wiz{background:var(--paper)}
#wiz .steps i{height:4px;border-radius:999px}
#wiz .foot{box-shadow:0 -1px 3px rgba(16,24,40,.06)}

/* Publisher line: the Silverlion Tech mark is gold on black, so it sits in its own small dark badge */
.byline{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 8px;font-size:12px;color:var(--mut);letter-spacing:.02em}
.byline.left{justify-content:flex-start;margin:14px 0 0}
.byline img{height:28px;width:auto;border-radius:6px;background:#000;padding:2px 4px;display:block}

/* Shop */
#ordResults>div{border-radius:12px !important}
/* Every input is width:100% by default, which stretched the filter radios and the sort box. */
.ofopt input,.ofilters input[type=radio],.ofilters input[type=checkbox]{width:auto;box-shadow:none}
#ordSort{width:auto;min-width:160px}
.otoolbar .ocount{margin-left:auto}
#ordResults>div:hover{border-color:#D0D5DD !important;box-shadow:var(--sh2)}
.ofilters{border-radius:14px}
.ochip.on{background:var(--ink);border-color:var(--ink)}

/* ---- Order tab: trade shop or my own brands and reps ---- */
.ordswitch{display:flex;gap:4px;padding:4px;margin:0 0 12px;background:#EEF0F3;border-radius:12px}
.ordswitch button{flex:1;border:0;background:transparent;padding:11px 10px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;color:var(--mut);min-height:44px;cursor:pointer}
.ordswitch button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(38,43,51,.12)}
#ownBrands{display:none}
#pOrder.own #ownBrands{display:block}
#pOrder.own > :not(.ordswitch):not(#ownBrands){display:none !important}
.brbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.brgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
.brcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;font:inherit;color:var(--ink);cursor:pointer;min-height:150px;transition:border-color .15s,box-shadow .15s}
.brcard:hover,.brcard:focus-visible{border-color:var(--gold);box-shadow:0 4px 14px rgba(38,43,51,.08);outline:none}
.brmark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#F6EEEA;color:var(--gold2);font-weight:800;font-size:15px;letter-spacing:.02em;margin-bottom:6px;flex:none}
.brmark.sm{width:36px;height:36px;font-size:13px;margin:0}
.brname{font-size:17px;font-weight:700;line-height:1.2}
.brwho{font-size:13px;color:var(--mut)}
.brnorep{color:var(--gold2);font-weight:600}
.brfoot{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.brrep{display:flex;gap:10px;align-items:center;background:var(--paper);border-radius:12px;padding:10px 12px;margin:6px 0 10px}
.brline{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.brline.on b{color:var(--gold2)}
.brstep{display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:10px;overflow:hidden;flex:none}
.brstep button{width:40px;height:40px;border:0;background:#fff;font-size:20px;color:var(--ink);cursor:pointer}
.brstep input{width:44px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:16px;padding:0;border-radius:0}
.brmore{margin:10px 0}.brmore summary{cursor:pointer;color:var(--gold2);font-weight:600;padding:6px 0}
.brtotal{margin:12px 0 4px}
.brmsg{white-space:pre-wrap;background:var(--paper);border-radius:10px;padding:12px;font:inherit;font-size:13px;max-height:220px;overflow:auto}
@media(max-width:560px){.brgrid{grid-template-columns:1fr 1fr;gap:10px}.brcard{padding:12px;min-height:140px}.brname{font-size:15px}}
.brline .grow,.brrep .grow{flex:1;min-width:0}

/* ---- Diary: drag to move, undo ---- */
#dBoard .bk.canmove{cursor:grab;touch-action:pan-y}
#dBoard .bk.dragging{opacity:.45;cursor:grabbing}
#dBoard td.dropon{background:#F6EEEA;box-shadow:inset 0 0 0 2px var(--gold)}
.undobar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:90;display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(38,43,51,.25);font-size:14px;max-width:calc(100vw - 24px)}
.undobar button{background:transparent;border:0;color:#E3B8A5;font:inherit;font-weight:700;padding:4px 6px;cursor:pointer;min-height:36px}
@media (prefers-reduced-motion:no-preference){.undobar{animation:undoIn .18s ease-out}@keyframes undoIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}}

/* ---- Till: book the next visit from the slip ---- */
.nextvisit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.nvhead{display:flex;flex-direction:column;gap:2px}
.nvweeks{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.nvweeks button{flex:1;min-width:64px;border:1px solid #D0D5DD;background:#fff;border-radius:10px;padding:8px 6px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;min-height:40px}
.nvweeks button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.nvrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nvrow input{width:auto;min-width:110px}
.nvweeks button{white-space:nowrap;padding:8px 4px;min-width:0}

/* ---- Today: "For you" card ---- */
#promoCard.promo{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:12px 0;position:relative;overflow:hidden}
#promoCard.promo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
#promoCard.promo-stock::before{background:#3A7A73}
#promoCard.promo-clients::before{background:#3A7D5A}
#promoCard.promo-plan::before{background:var(--ink)}
.promotop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.promonav{display:flex;gap:4px}
.promonav button{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:18px;line-height:1;color:var(--mut);cursor:pointer}
.promotitle{display:block;font-size:17px;margin:2px 0 4px;text-wrap:balance}
#promoCard p{margin:0 0 12px;color:var(--mut);font-size:14px;line-height:1.5;max-width:62ch}

/* ---- Till: suggest to the client ---- */
.suggest{background:#F6EEEA;border-radius:12px;padding:10px 12px;margin:8px 0 10px}
.suggest .lbl{margin-bottom:4px}
.sugg{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px solid rgba(169,96,63,.15)}
.sugg:first-of-type{border-top:0}
.sugg .grow{flex:1;min-width:0}
.sugg .sub{display:block}
.sugg .btn{flex:none;white-space:nowrap}

/* ---- No signal bar ---- */
.netbar{background:#EBF3EE;color:#2F6B4B;padding:10px 16px;font-size:13.5px;line-height:1.5;border-bottom:1px solid #D3E8DA}
.netbar.off{background:#262B33;color:#F7F8FA;border-color:#262B33}
.netbar.bad{background:#F8EEEC;color:#A8463E;border-color:#EFDCD3}
.netbar button{background:transparent;border:1px solid currentColor;color:inherit;border-radius:8px;padding:3px 10px;font:inherit;font-weight:600;margin-left:6px;cursor:pointer;min-height:30px}

/* ---- Books and VAT ---- */
.bkper{margin:4px 0 10px}
.bkprofit .bkbig{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:2px 0 4px;font-variant-numeric:tabular-nums}
.bkprofit.up .bkbig{color:var(--ok)}
.bkprofit.down .bkbig{color:var(--bad)}
.bklines{margin-top:12px;border-top:1px solid var(--line)}
.bkline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.bkline b{font-variant-numeric:tabular-nums;white-space:nowrap}
.bkline.strong{font-size:16px;border-bottom:0}
.bkcats{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.bkthumb{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;color:var(--mut);font-weight:700;border:1px solid var(--line)}
.bkthumb img{width:100%;height:100%;object-fit:cover}
.bkphoto{display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed #D0D5DD;border-radius:14px;min-height:120px;padding:12px;cursor:pointer;margin:6px 0 10px;background:var(--paper)}
.bkphoto img{max-height:220px;max-width:100%;border-radius:8px}
.bkphoto .sub{display:block}
/* ---- Card and bank payments (js/screens/paysetup.js) ---- */
.psOn{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink);margin:12px 0 0;cursor:pointer}
.psOn input:disabled + span{color:var(--mut)}
.psTop{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.psTop .psOn{margin-top:10px}
.psWarn{margin-top:10px;padding:10px 12px;border-radius:10px;background:#F6EEEA;color:var(--bad);font-size:13.5px}
.psGap{margin-top:10px;font-size:13px}
.psLink{margin-top:12px;padding:12px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.psUrl{margin-top:6px;font-size:13px;word-break:break-all;color:var(--ink)}
#mp_paysetup .suRow input:disabled{background:var(--paper);color:var(--mut)}
/* ---- Client messages: reminders and follow-ups ---- */
.cmRow{align-items:flex-start}
.cmRow .grow{min-width:0}
.cmHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmText{font-size:13.5px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 4px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cmActs{display:flex;flex-direction:column;gap:6px;flex:none}
.cmActs .btn{min-width:108px}
.cmBar{height:8px;background:#EEF0F3;border-radius:99px;overflow:hidden;margin:14px 0 6px}
.cmBar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.cmBar.over i{background:var(--bad)}
.cmHeadR{display:flex;align-items:center;gap:10px}
.cmOn{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:15px;color:var(--ink);cursor:pointer}
.cmNum{max-width:140px}
#cmRules textarea{font-family:inherit;font-size:15px;line-height:1.45;resize:vertical}
.cmTools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}
.cmTools .muted{font-size:12px;overflow-wrap:anywhere}
.cmPrev{white-space:pre-wrap;overflow-wrap:anywhere;background:#EBF3EE;border:1px solid #D3E8DA;border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--ink)}
@media(max-width:560px){.cmRow{flex-wrap:wrap}.cmActs{flex-direction:row;width:100%}.cmActs .btn{flex:1}}

/* ---- How the salon is doing ---- */
.inbig{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:2px 0 4px;font-variant-numeric:tabular-nums}
.inchg{font-weight:700}
.inchg.up{color:var(--ok)}
.inchg.down{color:var(--bad)}
.indays{display:flex;align-items:flex-end;gap:2px;height:56px;margin:14px 0 6px}
.inday{flex:1;display:flex;align-items:flex-end;height:100%;background:var(--paper);border-radius:3px;overflow:hidden;min-width:3px}
.inday i{display:block;width:100%;background:var(--gold);border-radius:3px}
.inpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.inbar{display:block;height:6px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden;max-width:320px}
.inbar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.inbar.warn i{background:#C0574D}
.inkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.inheat{display:grid;gap:3px;align-items:center}
.inhr{font-size:11px;color:var(--mut);text-align:center}
.incell{display:block;height:22px;border-radius:4px;background:var(--gold)}
@media(max-width:560px){.incell{height:18px}.inhr{font-size:10px}}

/* ---- Specials and referrals ---- */
.cmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px}
.cmaud{display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;color:var(--ink);cursor:pointer;min-height:76px}
.cmaud.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#F6EEEA}
.cmaud .cmnum{font-size:13px;color:var(--gold2);font-weight:700}
.cmaud .sub{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmprev{margin-top:12px}
.cmbubble{background:#EBF3EE;border-radius:14px 14px 14px 4px;padding:12px 14px;white-space:pre-wrap;font-size:14.5px;line-height:1.5;max-width:420px;border:1px solid #D3E8DA}
#mp_campaigns textarea{width:100%;padding:12px;border:1px solid #D0D5DD;border-radius:10px;font:inherit;font-size:16px;box-sizing:border-box}