:root{
  --bg:#F3EBDD; --surface:#FFFBF4; --surface-2:#F8F1E5; --ink:#263A42; --muted:#5F767D; --faint:#8A9DA2; --line:#E6DCCB;
  --side:#22353D; --side-2:#2F4750; --side-ink:#F6EFE3; --side-muted:#A9BCC1;
  --deep:#334B54; --slate:#4F6E79; --slate-soft:#DFE8EA; --slate-ink:#3A5862;
  --coral:#DE7F73; --coral-soft:#F9E1DD; --coral-ink:#A9473A;
  --sage:#BCD5BE; --sage-soft:#E2EEE3; --sage-ink:#3D6A45;
  --sun:#FFDB7F; --sun-soft:#FFF0C7; --sun-ink:#82600F;
  --beige:#F6EFE3;
  --hero:linear-gradient(135deg,#22353D 0%,#334B54 48%,#4F6E79 100%);
  --shadow:0 1px 2px rgba(38,58,66,.06),0 10px 26px -14px rgba(38,58,66,.28);
  --r-lg:20px; --r-md:14px;
  --f-ui:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-title:"Fraunces",Georgia,"Times New Roman",serif;
  --f-num:"Montserrat","Poppins",system-ui,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141F23; --surface:#1C2B30; --surface-2:#22343A; --ink:#F3EBDD; --muted:#A3B5BA; --faint:#7C9095; --line:#2E434A;
  --side:#0E171A; --side-2:#1F3036; --slate-soft:#25404A; --slate-ink:#B9D0D7; --coral-soft:#43292A; --coral-ink:#F2A79D;
  --sage-soft:#203A2A; --sage-ink:#B4D8B8; --sun-soft:#3E3317; --sun-ink:#FFDB7F;
  --hero:linear-gradient(135deg,#0E171A 0%,#22353D 50%,#3B5862 100%); --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.75); color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#141F23; --surface:#1C2B30; --surface-2:#22343A; --ink:#F3EBDD; --muted:#A3B5BA; --faint:#7C9095; --line:#2E434A;
  --side:#0E171A; --side-2:#1F3036; --slate-soft:#25404A; --slate-ink:#B9D0D7; --coral-soft:#43292A; --coral-ink:#F2A79D;
  --sage-soft:#203A2A; --sage-ink:#B4D8B8; --sun-soft:#3E3317; --sun-ink:#FFDB7F;
  --hero:linear-gradient(135deg,#0E171A 0%,#22353D 50%,#3B5862 100%); --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.75); color-scheme:dark;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600}
a{color:var(--slate-ink)}

/* shell */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:12px;padding:2px 10px 22px}
.brand .mk{width:38px;height:38px;border-radius:11px;background:var(--beige);display:grid;place-items:center;flex:none}
.brand .mk svg{width:24px;height:24px;fill:#334B54}
.brand b{font-family:var(--f-title);font-weight:600;font-size:20px;display:block;line-height:1.1}
.brand small{color:var(--side-muted);font-size:12px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--side-muted);padding:10px 12px;border-radius:12px;font-weight:500;cursor:pointer;text-align:left;position:relative}
.nav button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover{color:var(--side-ink);background:rgba(246,239,227,.06)}
.nav button[aria-current="page"]{background:var(--side-2);color:#FFFBF4;font-weight:600}
.nav button[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:6px;background:var(--coral);clip-path:polygon(0 0,100% 18%,100% 100%,0 82%)}
.side .foot{margin-top:auto;padding:12px 14px;border-radius:14px;background:rgba(246,239,227,.05);font-size:12px;color:var(--side-muted)}
.side .foot b{display:flex;align-items:center;gap:7px;color:var(--side-ink);font-size:13px;margin-bottom:2px}
.side .foot b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage)}
.side .foot.off b::before{background:var(--sun)}
.mnav{display:none}
.mainwrap{min-width:0}
main{max-width:1200px;margin:0 auto;padding:28px 30px 64px;min-width:0}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}.side{display:none}
  .mnav{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;background:var(--side);position:sticky;top:0;z-index:6;scrollbar-width:none}
  .mnav::-webkit-scrollbar{display:none}
  .mnav button{flex:none;border:0;background:none;color:var(--side-muted);font-weight:600;font-size:13px;padding:7px 13px;border-radius:999px;cursor:pointer}
  .mnav button[aria-current="page"]{background:var(--coral);color:#FFFBF4}
  main{padding:20px 16px 56px}
}
.pagehead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.pagehead>div{margin-right:auto}
h1{font-family:var(--f-title);font-weight:600;font-size:32px;line-height:1.1;margin:0;letter-spacing:-.01em}
h2{font-family:var(--f-title);font-weight:600;font-size:20px;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px;font-weight:600}
.sub{color:var(--muted);margin:4px 0 0}
.banner{background:var(--sun-soft);color:var(--sun-ink);border:1px solid color-mix(in srgb,var(--sun) 60%,transparent);padding:10px 14px;border-radius:12px;margin-bottom:20px;font-size:13.5px;font-weight:500}

/* surfaces */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);min-width:0}
.hero{background:var(--hero);color:var(--beige);border:0;border-radius:var(--r-lg);padding:26px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-40px;bottom:-50px;width:260px;height:260px;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23F6EFE3' d='M47.4%200%20L72.6%200.5%20L0.5%2072.6%20L0%2047.4%20Z%20M41.1%2047.4%20L41.6%2068.4%20L28.9%2081.1%20L7.4%2081.1%20Z%20M70.5%2017.9%20L91.1%2017.9%20L58.4%2051.6%20L57.9%2030.5%20Z%20M98.9%2026.3%20L99.5%2051.6%20L52.1%2098.9%20L26.8%2098.9%20Z'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
.hero .eyebrow{color:#C9D9DD;font-size:13.5px;font-weight:500}
.hero .big{font-family:var(--f-title);font-weight:500;font-size:clamp(56px,8vw,96px);line-height:1;margin:8px 0 6px;letter-spacing:-.02em;color:#FFFBF4}
.hero .bignum{font-family:var(--f-num);font-weight:700;font-size:clamp(34px,4.5vw,46px);line-height:1.05;margin:6px 0 4px;color:#FFFBF4}
.hero p{margin:0;color:#D7E2E5}
.hero-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:20px;position:relative;z-index:1}
.hero-split div{background:rgba(246,239,227,.08);border:1px solid rgba(246,239,227,.12);border-radius:13px;padding:10px 13px}
.hero-split small{display:block;color:#BFD0D4;font-size:12px}
.hero-split b{font-size:16px;color:#FFFBF4}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--k,var(--slate))}
.kpi span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.kpi span i{width:9px;height:14px;border-radius:2px;background:var(--k,var(--slate));display:inline-block;flex:none;transform:skewX(-22deg)}
.kpi .num{display:block;font-size:26px;margin-top:6px;color:var(--ink)}
.kpi small{display:block;color:var(--faint);font-size:12px;margin-top:2px}
.k-slate{--k:var(--slate);--ks:var(--slate-soft)} .k-coral{--k:var(--coral);--ks:var(--coral-soft)}
.k-sage{--k:#8FB894;--ks:var(--sage-soft)} .k-sun{--k:#F2C450;--ks:var(--sun-soft)} .k-deep{--k:var(--deep);--ks:var(--slate-soft)}

.btn{border:0;border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:600;background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn:hover{border-color:var(--slate)}
.btn.primary{background:var(--deep);color:#FFFBF4;border-color:var(--deep)}
.btn.primary:hover{background:var(--slate)}
.btn.coral{background:var(--coral);color:#FFFBF4;border-color:var(--coral)}
.btn.ghost{background:none;border-color:transparent;color:var(--slate-ink);padding:6px 10px}
.btn.ghost:hover{background:var(--slate-soft)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{background:var(--beige);color:#263A42;border-color:var(--beige)}}
:root[data-theme="dark"] .btn.primary{background:var(--beige);color:#263A42;border-color:var(--beige)}

label.f{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:500}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=time],input[type=url],select,textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--slate);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--slate) 22%,transparent)}
textarea{min-height:84px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:140px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.toolbar input,.toolbar select{width:auto}
.spacer{flex:1}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 14px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--deep);color:#FFFBF4}

.chip{font-family:var(--f-ui);display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.c-sage,.chip.paid{background:var(--sage-soft);color:var(--sage-ink);border-color:transparent}
.c-sun,.chip.partial,.chip.unpaid{background:var(--sun-soft);color:var(--sun-ink);border-color:transparent}
.c-coral,.chip.voided,.chip.refunded{background:var(--coral-soft);color:var(--coral-ink);border-color:transparent}
.c-slate{background:var(--slate-soft);color:var(--slate-ink);border-color:transparent}
.chip.neutral{background:var(--surface-2);color:var(--muted)}

.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:600;color:var(--muted);font-size:12.5px;white-space:nowrap;background:var(--surface-2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.r,th.r{text-align:right}
tr.void td{opacity:.5}
.empty{padding:32px;text-align:center;color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}
dialog{border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);padding:22px;max-width:460px;width:calc(100% - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(20,31,35,.55);backdrop-filter:blur(3px)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--deep);color:#FFFBF4;padding:12px 18px;border-radius:12px;font-weight:500;z-index:30;max-width:90vw;box-shadow:var(--shadow)}
@media(prefers-reduced-motion:no-preference){.toast{animation:pop .2s ease-out}@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button[aria-pressed="true"]{background:var(--beige);color:#263A42}}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--beige);color:#263A42}
.clock{display:grid;gap:20px}
@media(min-width:1000px){.clock{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.clock .hero{display:flex;flex-direction:column;justify-content:space-between;min-height:340px}
.staffpick{display:grid;gap:10px}
.sp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;cursor:pointer;text-align:left;width:100%}
.sp:hover{border-color:var(--slate)}
.sp[aria-pressed="true"]{border-color:var(--deep);background:var(--slate-soft);box-shadow:inset 0 0 0 1px var(--deep)}
.sp b{font-weight:600;display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#FFFBF4;flex:none}
.punch{margin-top:18px;width:100%;border:0;cursor:pointer;background:var(--deep);color:#FFFBF4;font-weight:600;font-size:20px;padding:20px;clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%)}
.punch:hover{background:var(--slate)}
.punch.out{background:var(--coral)}
.punch:disabled{opacity:.4;cursor:not-allowed}
.grid{display:grid;gap:18px}
@media(min-width:1000px){.grid.pos{grid-template-columns:1.4fr 1fr;align-items:start}}
.cat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin:18px 0 10px}
.cat:first-child{margin-top:0}
.cat::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--acc);transform:skewX(-20deg)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.item{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:13px 14px;text-align:left;cursor:pointer;min-height:82px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;position:relative;overflow:hidden}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.item:hover{border-color:var(--acc);background:var(--surface)}
.item span:first-child{font-weight:500}
.item small{color:var(--muted);font-size:12px;line-height:1.3}
.incl{margin:6px 0 2px;padding-left:16px;font-size:12px;color:var(--muted);line-height:1.45}
.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-weight:600}
.totalbox{background:var(--hero);color:#FFFBF4;border-radius:16px;padding:16px 18px;margin:14px 0}
.totalbox div{display:flex;justify-content:space-between;padding:2px 0;color:#D7E2E5;font-size:14px}
.totalbox .grand{color:#FFFBF4;font-size:26px;border-top:1px solid rgba(246,239,227,.18);margin-top:8px;padding-top:10px;align-items:baseline}
.totalbox .grand span:first-child{font-size:15px;font-weight:500}
.receipt h2{display:flex;justify-content:space-between;align-items:center}
.edit td{padding:7px 9px}
.edit input[type=text],.edit input[type=number],.edit input[type=time],.edit select{padding:7px 9px}
.section{margin-bottom:30px}
.section .head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.section .head h2{margin:0}
.section .head i{width:12px;height:12px;border-radius:3px;transform:skewX(-20deg);background:var(--acc)}

/* ===== New Sale: colorful theme ===== */
:root{--pink:#E8897D;--pink-soft:#FBE4E0;--pink-ink:#A64B3F;--beige-2:#EFE4D2;--beige-3:#FBF6EE;--sun-deep:#E5B53E;--sage-deep:#7FA885}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pink-soft:#46292A;--pink-ink:#F4B2A8;--beige-2:#22343A;--beige-3:#1C2B30}}
:root[data-theme="dark"]{--pink-soft:#46292A;--pink-ink:#F4B2A8;--beige-2:#22343A;--beige-3:#1C2B30}
.c-pink{background:var(--pink-soft);color:var(--pink-ink);border-color:transparent}
.posv .lpanel{padding:0;overflow:hidden}
.posv .menu{padding:18px 20px 22px}
.ctabs{display:inline-flex;gap:2px;padding:4px;margin-bottom:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
.ctabs button{border:0;background:none;padding:8px 18px;border-radius:10px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
.ctabs button:hover{color:var(--ink)}
.ctabs button[aria-pressed="true"]{background:var(--deep);color:#FFFBF4;box-shadow:0 6px 14px -8px rgba(38,58,66,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ctabs button[aria-pressed="true"]{background:var(--beige);color:#263A42}}
:root[data-theme="dark"] .ctabs button[aria-pressed="true"]{background:var(--beige);color:#263A42}
.sechead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sechead h3{margin:0;font-family:var(--f-title);font-weight:600;font-size:18px}
.sechead i{width:9px;height:15px;border-radius:2px;background:var(--pink);transform:skewX(-20deg)}
.sechead.ad{margin-top:26px;padding-top:20px;border-top:1px dashed var(--line)}
.sechead.ad i{background:var(--sage-deep)}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.ptile{position:relative;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:5px;min-height:118px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.ptile::after{content:"";position:absolute;right:-18px;top:-18px;width:52px;height:52px;background:var(--pink-soft);transform:rotate(45deg)}
.ptile b{font-size:15px;position:relative;z-index:1;padding-right:18px}
.ptile small{color:var(--muted);font-size:12px;line-height:1.35;flex:1}
.ptile .price{align-self:flex-start;background:var(--pink-soft);color:var(--pink-ink);padding:3px 10px;border-radius:9px;font-size:14px}
.ptile:hover{transform:translateY(-2px);box-shadow:0 12px 22px -16px rgba(38,58,66,.5);border-color:var(--pink)}
.incart{position:absolute;right:8px;top:8px;z-index:2;background:var(--pink);color:#fff;font-size:12px;border-radius:999px;padding:1px 8px}
.atiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.atile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:11px 13px 10px;min-height:80px;font-size:13.5px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.atile::after{content:"";position:absolute;right:10px;bottom:10px;width:22px;height:14px;opacity:.55;pointer-events:none;
  background:linear-gradient(135deg,transparent 0 30%,var(--sage-deep) 30% 46%,transparent 46% 58%,var(--sage-deep) 58% 74%,transparent 74%)}
.atile>span:first-of-type{padding-right:30px;font-weight:500}
.atile .price{align-self:flex-start;background:var(--sun-soft);color:var(--sun-ink);padding:2px 9px;border-radius:8px;font-size:13px}
.atile small{font-size:11px}
.atile:hover{transform:translateY(-2px);border-color:var(--sage-deep);box-shadow:0 12px 22px -16px rgba(61,106,69,.6)}
.atile:hover::after{opacity:.9}
.atile>.incart{background:var(--sage-deep);padding:1px 8px}
.qn{min-width:26px;text-align:center;font-size:14px}
.bcolors{display:flex;flex-wrap:wrap;gap:6px}
.bcolors button{border:1px solid var(--line);background:var(--surface-2);padding:6px 12px;border-radius:999px;cursor:pointer;font-weight:500;font-size:13px}
.bcolors button[aria-pressed="true"]{background:var(--deep);color:#FFFBF4;border-color:var(--deep)}
.bshow{font-size:34px;letter-spacing:.08em;text-align:center;padding:8px;border-radius:14px;background:var(--pink-soft);color:var(--pink-ink);margin-bottom:10px}
.bpad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bpad button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 0;font-size:18px;cursor:pointer}
.bpad button:hover{border-color:var(--pink)}
.posv .receipt{padding:0;overflow:hidden}
.posv .receipt>*:not(.rhead){margin-left:20px;margin-right:20px}
.posv .receipt>.row:last-child{margin-bottom:20px}
.rhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:14px;background:linear-gradient(110deg,var(--pink-soft),var(--sun-soft) 60%,var(--sage-soft))}
.rhead h2{margin:0}
.clines{margin-top:14px}
.cline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:start;padding:11px 12px;margin-bottom:8px;border-radius:13px;background:var(--surface-2);border-left:4px solid var(--lc)}
.l-pink{--lc:var(--pink)} .l-slate{--lc:var(--slate)} .l-sun{--lc:var(--sun-deep)} .l-sage{--lc:var(--sage-deep)}
.cline small{display:block;color:var(--muted);font-size:12px}
.cline .lt{padding-top:4px}
.cempty{padding:22px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:14px}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:28px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700}
.qty .qtyin{width:52px !important;flex:none;text-align:center;padding:5px 4px !important;border-radius:9px !important;font-size:14px}
.qtyin::-webkit-inner-spin-button{display:none}
.payhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px;margin-bottom:8px}
.prows{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;grid-template-areas:"pm pm fill x" "amt ref ref ref";gap:8px;align-items:center;padding:8px;border-radius:13px;background:var(--ms);border:1px solid color-mix(in srgb,var(--mc) 35%,transparent)}
.m-sage{--mc:var(--sage-deep);--ms:var(--sage-soft);--mi:var(--sage-ink)}
.m-slate{--mc:var(--slate);--ms:var(--slate-soft);--mi:var(--slate-ink)}
.m-sun{--mc:var(--sun-deep);--ms:var(--sun-soft);--mi:var(--sun-ink)}
.prow .pm{grid-area:pm;justify-self:start}
.prow .pin{grid-area:amt}.prow .pref{grid-area:ref}.prow [data-fill]{grid-area:fill}.prow .x,.prow>span:last-child{grid-area:x}
.pm{display:flex;gap:3px;background:var(--surface);border-radius:10px;padding:3px}
.pm button{border:0;background:none;padding:5px 9px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.pm button[aria-pressed="true"]{background:var(--mc);color:#fff}
.pm button.m-sun[aria-pressed="true"]{color:#3B2E07}
.pin{position:relative}
.pin .peso{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mi);font-weight:600;font-size:13px}
.pin input{padding-left:24px !important;background:var(--surface) !important;font-family:var(--f-num);font-weight:600}
.pref{background:var(--surface) !important}
span.pref{display:block}
.mini{border:0;background:var(--surface);color:var(--mi);font-weight:600;font-size:12.5px;padding:7px 10px;border-radius:9px;cursor:pointer}
.mini:disabled{opacity:.4;cursor:default}
.mini.x{color:var(--muted)}
.addpay{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.addpay button{border:1px dashed var(--mc);background:none;color:var(--mi);font-weight:600;font-size:12.5px;padding:5px 11px;border-radius:9px;cursor:pointer}
.addpay button:hover{background:var(--ms)}
.paynote{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px;font-size:13.5px}
.paynote .chg{color:var(--sage-ink)}
.perr{flex-basis:100%;color:var(--coral-ink);background:var(--coral-soft);padding:7px 10px;border-radius:9px;font-size:13px}
.savebtn{padding:13px 16px;font-size:15px}

@media(prefers-reduced-motion:reduce){.ptile{transition:none}}

/* ===== Clients & check-ins ===== */
.pickbtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;border:1.5px dashed color-mix(in srgb,var(--pink) 55%,var(--line));background:var(--pink-soft);border-radius:14px;padding:12px 14px;color:var(--ink)}
.pickbtn small{display:block;color:var(--muted);font-size:12px}
.pickbtn:hover{border-style:solid;border-color:var(--pink)}
.pk-ic{width:32px;height:32px;border-radius:10px;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:600;flex:none}
.ccard{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:12px 14px}
.ctop{display:flex;align-items:center;gap:10px}
.ctop>div{flex:1;min-width:0}
.ctop b{display:block}
.ctop small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted);margin:8px 0 6px}
.cbadges{display:flex;flex-wrap:wrap;gap:6px}
dialog.wide{max-width:620px}
.pdhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pdhead h2{margin:0}
.pdlg .ctabs{margin-bottom:14px}
.pbody{max-height:min(60vh,520px);overflow-y:auto;display:grid;gap:8px;align-content:start}
.pickrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:10px 12px}
.pickrow:hover{border-color:var(--pink);background:var(--surface-2)}
.pr-main{flex:1;min-width:0}.pr-main b{display:block}.pr-main small{color:var(--muted);font-size:12.5px}
.pr-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pick-empty{padding:22px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:13px}
.stable td{vertical-align:top}
.nowrap{white-space:nowrap}
.pkpill{display:inline-block;background:var(--pink-soft);color:var(--pink-ink);font-weight:600;font-size:13px;padding:3px 10px;border-radius:9px;margin:0 4px 4px 0;white-space:nowrap}
.adchip{display:inline-block;background:var(--sage-soft);color:var(--sage-ink);font-size:12.5px;padding:2px 9px;border-radius:8px;margin:0 4px 4px 0}
.adcol{max-width:300px}
.linkbtn{border:0;background:none;padding:0;color:var(--slate-ink);font-weight:600;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--slate) 35%,transparent);text-underline-offset:3px}
.linkbtn:hover{color:var(--pink-ink)}
.nm{display:flex;align-items:center;gap:10px;font-weight:600}
tr.click{cursor:pointer}

/* ===== Open sales strip ===== */
.ostrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:6px;scrollbar-width:thin}
.ocard{display:flex;align-items:center;gap:10px;flex:none;min-width:180px;max-width:240px;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow)}
.ocard:hover{border-color:var(--pink)}
.ocard.on{border-color:var(--deep);background:var(--deep);color:#FFFBF4}
.ocard.on small{color:#C9D9DD}
.ocard.old{border-color:var(--coral)}
.oc-main{min-width:0}.oc-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-main small{color:var(--muted);font-size:12px}
.over{color:var(--coral-ink);font-weight:600}
.ocard.on .over{color:#FFDB7F}
.ocard.newc{border:1.5px dashed color-mix(in srgb,var(--pink) 55%,var(--line));background:var(--pink-soft);box-shadow:none}
.sess{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--slate-soft);color:var(--slate-ink);border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:13px}
.sess b{margin-left:auto}.sess small{flex-basis:100%;font-weight:600}
.sess.over{background:var(--coral-soft);color:var(--coral-ink)}
.chip.cancelled{background:var(--surface-2);color:var(--muted)}
.cancelbtn{color:var(--coral-ink) !important}
.mrow{cursor:default}
.mrow .pr-main small{display:block}
.newrow{border-style:dashed}
.pr-main small{display:block}
.vcard{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:14px}
.vcard .ctop small{display:block;color:var(--muted);font-size:12.5px}
.vgrid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font-size:14px;align-items:center}
.vgrid span{color:var(--muted);font-size:13px}
.vgrid b{font-weight:500;overflow-wrap:anywhere}
tr.pastrow td{background:color-mix(in srgb,var(--slate-soft) 35%,transparent)}
.delbtn{color:var(--coral-ink) !important}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.chk input{margin-top:3px}
tr.edited td{background:color-mix(in srgb,var(--sun) 22%,var(--surface))}
.banner.coralb{background:var(--coral-soft);color:var(--coral-ink);border-color:transparent}
.hrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.hrow div{margin-top:3px}
.atable td{vertical-align:middle}

/* ===== Chestbox ===== */
.m-pink{--mc:var(--pink);--ms:var(--pink-soft);--mi:var(--pink-ink)}
.deptag{padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--pink-ink)}
.deprow input:disabled{opacity:1}
@media(min-width:1000px){.grid.kgrid{grid-template-columns:1.2fr 1fr;align-items:start}}
.grid.kgrid{display:grid;gap:18px}
.ktable td small{display:block;font-size:11.5px}
.ktable tr.kexp td{background:var(--slate-soft);font-size:15px}
.dgrid{display:grid;gap:3px;max-width:280px}
.drow{display:grid;grid-template-columns:50px 10px 62px minmax(60px,1fr);align-items:center;gap:5px;font-size:13px}
.drow .dv{text-align:right}.drow .dx{color:var(--muted);text-align:center}.drow .dt{text-align:right;color:var(--muted)}
.drow input{padding:2px 6px;font-size:13px;min-height:0;height:26px;border-radius:8px;text-align:center}
.rbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid rgba(51,75,84,.25);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:inherit}.seg button[aria-pressed="true"]{background:#334B54;color:#FFFBF4}
.rlbl{min-width:140px;text-align:center;font-size:14px}
tr.grp td{background:var(--beige2, #F6EFE3);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--deep, #334B54);padding:6px 10px}
.adtabs{margin:4px 0 10px}.adtabs button{font-size:12.5px;padding:5px 10px}
.ktot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px 14px;border-radius:13px;background:var(--hero);color:#FFFBF4}
.ktot b{font-size:22px}
.cvseg{margin-right:2px}
.btable th,.btable td{padding:7px 8px}.bq{display:inline-block;min-width:30px;text-align:center;border-radius:8px;padding:2px 6px;font:600 13px var(--f-num)}
.bq.c-sage{background:var(--sage-soft);color:var(--sage-ink)}.bq.c-sun{background:var(--sun-soft);color:var(--sun-ink)}.bq.c-coral{background:var(--coral-soft);color:var(--coral-ink)}
.btable input.bin{width:46px;padding:4px 5px;text-align:center;font-size:13px}
.cal{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.cal-hd,.cal-wk{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr))}
.cal-hd{background:var(--surface-2);border-bottom:1px solid var(--line)}
.cal-hd span{padding:9px 4px;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
.cal-wk{border-bottom:1px solid var(--line)}
.cal-wk:last-child{border-bottom:0}
.cal-wn{grid-row:1/-1;grid-column:1;background:var(--surface-2);color:var(--slate);font:600 12px var(--f-num);padding-top:8px;text-align:center;border-right:1px solid var(--line)}
.cal-bg{grid-row:1/-1;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;padding:0;margin:0;border-radius:0;min-height:0}
.cal-bg:nth-of-type(1){border-left:0}
.cal-bg:hover:not(:disabled){background:var(--surface-2)}
.cal-bg.today{background:color-mix(in srgb,var(--sun-soft) 75%,transparent)}
.cal-bg.out{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.cal-bg:disabled{cursor:default}
.cal-n,.cal-c,.cal-bar{pointer-events:none;position:relative;z-index:1;min-width:0}
.cal-n{grid-row:1;text-align:right;padding:6px 8px 0;font:600 12.5px var(--f-num);color:var(--slate)}
.cal-n.out{opacity:.35}
.cal-n.today b{position:relative;background:var(--deep);color:#FFFBF4;border-radius:7px;padding:1px 7px 1px 9px}
.cal-n.today b::before{content:"";position:absolute;left:-7px;top:1px;bottom:1px;width:5px;background:var(--coral);clip-path:polygon(0 18%,100% 0,100% 82%,0 100%)}
.cal-c{padding:2px 6px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:12px;overflow:hidden}
.cal-c .chip{font-size:11px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cal-amt{font:600 13px var(--f-num);color:var(--ink)}
.cal-sub{font-size:11px;color:var(--muted)}
.cal-bar{margin:1px 3px;border-radius:6px;font-size:11.5px;font-weight:600;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.b-sage{background:var(--sage-soft);color:var(--sage-ink)}.b-slate{background:var(--slate-soft);color:var(--slate-ink)}.b-sun{background:var(--sun-soft);color:var(--sun-ink)}
@media(max-width:640px){.cal-hd,.cal-wk{grid-template-columns:22px repeat(7,minmax(0,1fr))}.cal-wn{font-size:10px}.cal-c{padding:1px 2px 6px}.cal-c .chip{font-size:9.5px;padding:0 4px}.cal-c .chip::before{display:none}.cal-amt{font-size:10.5px}.cal-sub{display:none}.cal-n{padding:4px 4px 0;font-size:11px}.cal-bar{font-size:10px;padding:0 4px}}
.pbf{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.pbf button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.pbf button[aria-pressed="true"]{background:var(--deep);color:#FFFBF4;border-color:var(--deep)}
tr.pbx td{opacity:.5;text-decoration:line-through}tr.pbx td:last-child,tr.pbx td .chip{text-decoration:none}
tr.pbpend td{opacity:.65}tr.pbpend td:last-child{opacity:1}
td.num{white-space:nowrap}
tr.pbinfo td{background:var(--surface-2);font-size:13px}
.posug{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;background:var(--hero);color:#FFFBF4}.posug span{flex:1;font-size:13px;opacity:.85}.posug b{font-size:22px}.posug .btn{color:#FFFBF4;border-color:rgba(255,251,244,.35)}
.porows{display:grid;gap:6px}.porow{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(100px,1fr) minmax(110px,1fr) auto auto;gap:6px;align-items:center}
.porow select,.porow input{padding:7px 9px}.porow .pin{position:relative}.porow .pin .peso{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}.porow .pin input{padding-left:22px}
@media(max-width:560px){.porow{grid-template-columns:1fr 1fr}.porow input[type=text]{grid-column:1/-1}}
.posum{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border-radius:11px;font-size:13px}.posum.good{background:var(--sage-soft);color:var(--sage-ink)}.posum.bad{background:var(--sun-soft);color:var(--sun-ink)}
tr.kout td{background:color-mix(in srgb,var(--slate-soft) 55%,var(--surface));font-weight:500}