@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
/* barqboi Desk themes · "mono" (charcoal & white, default) and "classic" (Storm + Volt).
   Picked on the front page, remembered on the device. Only the owner's Desk uses this file.
   Mono is editorial rather than boxy: content sits on the page, split by hairlines and space, not cards. */
html[data-theme=mono]{
  --storm:#232326; --storm-2:#333338; --storm-3:#3f3f45;
  --volt:#ffffff; --volt-deep:#c8c8cc;
  --page:#ffffff; --card:#f6f6f7; --line:#e6e6e8; --ink:#18181b; --mut:#6b6b72; --soft:#9a9aa0;
  --r:18px; --ease:cubic-bezier(.22,.9,.24,1); --spring:cubic-bezier(.34,1.4,.5,1);
  --zap:#ffe14d; --hair:1px solid #e6e6e8; --font:'Inter Tight','Helvetica Neue',Arial,sans-serif;
}
html[data-theme=mono] body{font-family:var(--font);font-size:14.5px;letter-spacing:.005em;color:var(--ink)}
html[data-theme=mono] .ar{font-family:"Noto Kufi Arabic",var(--font)}

/* ---- frame: one charcoal L around a white page ---- */
html[data-theme=mono] .top{background:var(--storm);padding:14px 24px}
html[data-theme=mono] .brand small{color:#a1a1a8;font-weight:400;font-size:13px}
html[data-theme=mono] .seg{background:none;padding:0;gap:2px}
html[data-theme=mono] .seg button{color:#a1a1a8;font-weight:400;font-size:13.5px;padding:7px 14px;transition:background .35s var(--ease),color .35s var(--ease)}
html[data-theme=mono] .seg button:hover{color:#ffffff}
html[data-theme=mono] .seg button[aria-pressed=true]{background:#ffffff;color:var(--ink);font-weight:500}
html[data-theme=mono] .switches{gap:18px}
html[data-theme=mono] .mode{font-size:12.5px;padding:9px 24px;background:var(--page)!important;color:var(--mut)!important;border-bottom:var(--hair)!important}
html[data-theme=mono] .mode b{color:var(--ink);font-weight:500}
html[data-theme=mono] .mode.live > span:first-child b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3aa76d;margin-right:8px;vertical-align:2px}

html[data-theme=mono] .nav{background:var(--storm);padding:26px 14px}
html[data-theme=mono] .nav h3{font-size:16px;font-weight:500;letter-spacing:-.01em;color:#ffffff}
html[data-theme=mono] .nav p{color:#8c8c94;font-size:12.5px}
html[data-theme=mono] .nav li button{color:#b4b4ba;font-weight:400;font-size:14.5px;border-radius:10px;padding:9px 12px;transition:background .3s var(--ease),color .3s var(--ease)}
html[data-theme=mono] .nav li button:hover{background:rgba(255,255,255,.05);color:#ffffff}
html[data-theme=mono] .nav li button.on{background:rgba(255,255,255,.1);color:#fff;font-weight:500}
html[data-theme=mono] .nav li button.locked{color:#6a6a72}
html[data-theme=mono] .tier{background:none;color:#7a7a82;font-weight:500;font-size:10.5px;letter-spacing:.04em;padding:0}
html[data-theme=mono] .nav li button.on .tier{background:none;color:#b4b4ba}
html[data-theme=mono] .nav li button.locked .tier{border:0;color:#7a7a82}
html[data-theme=mono] .nav .lockBtn,html[data-theme=mono] .nav .reset{border-color:#44444a;border-radius:999px;font-weight:400;color:#d4d4d8;transition:background .3s var(--ease)}
html[data-theme=mono] .nav .lockBtn:hover{background:rgba(255,255,255,.06)}
html[data-theme=mono] #demoDay{border-color:#55555c!important;color:#ffffff!important}
html[data-theme=mono] .nbadge{background:var(--zap);color:var(--storm);font-weight:600}
html[data-theme=mono] .nav li button.on .nbadge{background:var(--zap);color:var(--storm)}

/* ---- type ---- */
html[data-theme=mono] .content{padding:34px 40px 60px}
html[data-theme=mono] h2.title,html[data-theme=mono] .homeHero h2{font-family:var(--font);font-style:normal;font-weight:400;letter-spacing:-.04em;line-height:1}
html[data-theme=mono] h2.title{font-size:44px;margin:0 0 10px}
html[data-theme=mono] .lead{font-size:15px;line-height:1.5;color:var(--mut);max-width:680px;margin-bottom:26px}
html[data-theme=mono] .label,html[data-theme=mono] .kpi span,html[data-theme=mono] .card h4,html[data-theme=mono] .tcard .cn{font-family:var(--font)}
html[data-theme=mono] .label{color:var(--mut);font-weight:500;font-size:11.5px;letter-spacing:.08em;margin:30px 0 4px}
html[data-theme=mono] b,html[data-theme=mono] strong{font-weight:500}
html[data-theme=mono] h3,html[data-theme=mono] h4{font-weight:500;letter-spacing:-.01em}
html[data-theme=mono] .small{color:var(--mut)}

/* ---- no boxes: sections sit on the page, split by hairlines ---- */
html[data-theme=mono] div.card,html[data-theme=mono] .homeHero,html[data-theme=mono] .calWrap{background:none;border:0;border-top:var(--hair);border-radius:0;box-shadow:none;padding:22px 0 8px}
html[data-theme=mono] .card h4{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
html[data-theme=mono] .homeHero{border-top:0;padding:4px 0 26px;align-items:flex-end}
html[data-theme=mono] .homeHero h2{font-size:52px}
html[data-theme=mono] .homeHero p{font-size:15px;margin-top:10px}

/* numbers: one open row, divided by thin rules */
html[data-theme=mono] .kpis{gap:0;border-top:var(--hair);border-bottom:var(--hair);margin-bottom:8px}
html[data-theme=mono] .kpi,html[data-theme=mono] .kpi:first-child,html[data-theme=mono] .kpis.plain .kpi:first-child,html[data-theme=mono] .kpi.locked:first-child{background:none;border:0;border-left:var(--hair);border-radius:0;box-shadow:none;padding:18px 22px;color:var(--ink)}
html[data-theme=mono] .kpis .kpi:first-child,html[data-theme=mono] .kpis.plain .kpi:first-child{border-left:0;padding-left:0}
html[data-theme=mono] .kpi span{font-size:12.5px;color:var(--mut)}
html[data-theme=mono] .kpi b,html[data-theme=mono] .kpi:first-child b{color:var(--ink);font-weight:400;font-size:34px;letter-spacing:-.035em;line-height:1.15;margin-top:4px}
html[data-theme=mono] .kpis.plain{border-top:0}
html[data-theme=mono] .kpis.plain .kpi b{font-size:17px;letter-spacing:-.01em}
@media (max-width:760px){html[data-theme=mono] .kpi:nth-child(odd){border-left:0;padding-left:0}html[data-theme=mono] .kpi:nth-child(n+3){border-top:var(--hair)}html[data-theme=mono] .kpi b{font-size:28px}}

/* quick actions: an index, not a wall of tiles */
html[data-theme=mono] .quick{gap:0 28px}
html[data-theme=mono] .qa{background:none;border:0;border-top:var(--hair);border-radius:0;box-shadow:none;padding:16px 0 18px;position:relative;transition:padding .35s var(--ease),color .3s}
html[data-theme=mono] .qa b{font-size:16px;font-weight:500;letter-spacing:-.015em}
html[data-theme=mono] .qa span{color:var(--mut)}
html[data-theme=mono] .qa::after{content:"→";position:absolute;right:2px;top:16px;color:var(--soft);transition:transform .35s var(--ease),color .3s}
html[data-theme=mono] .qa:hover{padding-left:6px}
html[data-theme=mono] .qa:hover::after{transform:translateX(4px);color:var(--ink)}
html[data-theme=mono] .qa .lk{background:none;color:var(--mut);padding:0;font-weight:500}

/* lists become ruled rows */
html[data-theme=mono] .stList,html[data-theme=mono] .cList{gap:0;border-top:var(--hair)}
html[data-theme=mono] .st,html[data-theme=mono] .cRow,html[data-theme=mono] .saleRow,html[data-theme=mono] .qItem,html[data-theme=mono] .fb{background:none;border:0;border-bottom:var(--hair);border-radius:0;box-shadow:none;padding:14px 2px;transition:background .3s var(--ease)}
html[data-theme=mono] .st:hover,html[data-theme=mono] .cRow:hover,html[data-theme=mono] .saleRow:hover{background:rgba(24,24,27,.025)}
html[data-theme=mono] .st.low,html[data-theme=mono] .st.out{border-left:0;background:none;box-shadow:inset 3px 0 0 var(--bad);padding-left:14px}
html[data-theme=mono] .av{background:#eeeef0;color:var(--ink);font-weight:500}

/* order tickets: open columns with a rule on top */
html[data-theme=mono] .ocards{gap:0 26px}
html[data-theme=mono] .ord{background:none;border:0;border-top:1.5px solid var(--ink);border-radius:0;box-shadow:none;padding:16px 0 22px}
html[data-theme=mono] .ord .h b{font-weight:500;font-size:18px;letter-spacing:-.02em}
html[data-theme=mono] .ord .tb{background:none;color:var(--mut);font-weight:500;padding:0;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
html[data-theme=mono] .ord .note{background:none;border-left:2px solid var(--line);border-radius:0;padding:2px 0 2px 10px;color:var(--mut)}
html[data-theme=mono] .ord .acts .x{background:none;border-color:var(--line)}
html[data-theme=mono] .done .ord{border-top-color:var(--line)}

/* register tiles and calendar stay light, framed by hairlines only */
html[data-theme=mono] .tile{background:var(--card);border:var(--hair);box-shadow:none;border-radius:14px;transition:transform .25s var(--ease),border-color .25s}
html[data-theme=mono] .tile:hover:not(:disabled){border-color:var(--ink)}
html[data-theme=mono] .tile .q{background:var(--ink);color:#fff}
html[data-theme=mono] .bk,html[data-theme=mono] .cell,html[data-theme=mono] .calHead{box-shadow:none}
html[data-theme=mono] .chair{border-color:var(--line)}
html[data-theme=mono] .chair.busy{background:none;border:1.5px solid var(--ink)}
html[data-theme=mono] .tcard{box-shadow:none;border-color:var(--line)}
html[data-theme=mono] .warn{background:none;color:var(--ink);border:0;border-left:2px solid var(--bad);border-radius:0;padding:4px 0 4px 14px;margin:18px 0}
html[data-theme=mono] .warn b{color:var(--bad);font-weight:500}

/* ---- controls (cosmos-style pills) ---- */
html[data-theme=mono] .btn{background:transparent;border:1px solid #d4d4d8;font-weight:500;color:var(--ink);transition:transform .2s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
html[data-theme=mono] .btn:hover{border-color:var(--ink)}
html[data-theme=mono] .btn.dark,html[data-theme=mono] .btn.volt{background:var(--ink);color:#ffffff;border-color:var(--ink)}
html[data-theme=mono] .btn.dark:hover{background:#3a3a3f}
html[data-theme=mono] .edit{color:var(--ink)}
html[data-theme=mono] .btn:active,html[data-theme=mono] .tile:active,html[data-theme=mono] .payBtns button:active,html[data-theme=mono] .ord .acts button:active,html[data-theme=mono] .stepper button:active,html[data-theme=mono] .tabs button:active{transform:scale(.96)}
html[data-theme=mono] .tabs,html[data-theme=mono] .chipsRow{background:none;padding:0;gap:4px;margin-bottom:22px}
html[data-theme=mono] .tabs button,html[data-theme=mono] .chipsRow button{background:none;border:0;color:var(--mut);font-weight:400;font-size:14.5px;padding:8px 16px;border-radius:999px;transition:background .35s var(--ease),color .3s var(--ease)}
html[data-theme=mono] .tabs button:hover,html[data-theme=mono] .chipsRow button:hover{color:var(--ink);background:rgba(24,24,27,.05)}
html[data-theme=mono] .tabs button[aria-pressed=true],html[data-theme=mono] .chipsRow button.on{background:var(--ink);color:#ffffff;box-shadow:none;font-weight:400}
html[data-theme=mono] .staffChips button{background:none;border-color:#d4d4d8;font-weight:400}
html[data-theme=mono] .staffChips button.on{background:var(--ink);border-color:var(--ink);color:#ffffff}
html[data-theme=mono] .f input,html[data-theme=mono] .f select,html[data-theme=mono] .f textarea{background:var(--card);border-color:var(--line);border-radius:12px}
html[data-theme=mono] input:focus,html[data-theme=mono] select:focus,html[data-theme=mono] textarea:focus{outline:none;border-color:var(--ink)!important;box-shadow:0 0 0 4px rgba(24,24,27,.06)}
html[data-theme=mono] input,html[data-theme=mono] select,html[data-theme=mono] textarea{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
html[data-theme=mono] .stepper button{background:var(--ink)}
html[data-theme=mono] .payBtns button{font-weight:500;transition:transform .2s var(--ease),opacity .2s}
html[data-theme=mono] .payBtns .cash{background:var(--ink);color:#ffffff}
html[data-theme=mono] .payBtns .card{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-theme=mono] .pill{font-weight:500}
html[data-theme=mono] .pill.card,html[data-theme=mono] .pill.cash{background:#eeeef0;color:var(--ink)}
html[data-theme=mono] .fb .st{color:var(--ink)}
html[data-theme=mono] .gh.today span{background:var(--ink);color:#ffffff}
html[data-theme=mono] .cell.today{border-color:var(--ink);box-shadow:0 0 0 2px rgba(24,24,27,.1)}
html[data-theme=mono] .cols .c.peak i{background:var(--ink);box-shadow:none}
html[data-theme=mono] .hero{background:none;color:var(--ink);border-radius:0;padding:6px 0 24px;border-bottom:var(--hair)}
html[data-theme=mono] .hero .k{color:var(--mut);font-weight:500;letter-spacing:.08em}
html[data-theme=mono] .hero .big{color:var(--ink);font-weight:400;letter-spacing:-.045em;font-size:64px;line-height:1.05;margin:6px 0}
html[data-theme=mono] .hero .msg{font-family:var(--font);font-style:normal;font-weight:400;font-size:17px;color:var(--mut)}
html[data-theme=mono] .hero .split{gap:30px}
html[data-theme=mono] .hero .split span{color:var(--mut)}
html[data-theme=mono] .hero .split b{font-weight:400;font-size:24px;letter-spacing:-.03em}
html[data-theme=mono] .stats4{gap:0 24px}
html[data-theme=mono] .stats4 div{background:none;border-radius:0;border-top:var(--hair);padding:12px 0}
html[data-theme=mono] .stats4 b{font-weight:400;font-size:22px;letter-spacing:-.025em}
html[data-theme=mono] .catHead{background:none}
html[data-theme=mono] .bk{background:#ececee;border-left-color:var(--ink);border-radius:6px}
html[data-theme=mono] .bk.serving{background:var(--zap);border-left-color:var(--ink)}
html[data-theme=mono] .bk.done{background:#f2f2f4;border-left-color:#c8c8cc}
html[data-theme=mono] .sound{background:none;font-weight:400}
html[data-theme=mono] .sound.on{background:var(--ink);color:#ffffff;border-color:var(--ink)}
html[data-theme=mono] .lockCard .badge{background:var(--ink);color:#ffffff;font-weight:500}
html[data-theme=mono] .stampRow i.free{background:none;border-color:var(--ink)}
html[data-theme=mono] .stampRow i.on.free{background:var(--zap)}

/* ---- the hint of yellow: new orders, zaps and alerts ---- */
html[data-theme=mono] .ord.new{border-top:3px solid var(--zap);background:linear-gradient(rgba(255,225,77,.12),transparent 70%)}
html[data-theme=mono] .pill.new{background:var(--zap);color:var(--ink)}
html[data-theme=mono] .ord.ready .acts .go,html[data-theme=mono] .ord .acts .go{background:var(--ink);color:#ffffff;font-weight:500}
html[data-theme=mono] .zapbar{background:var(--zap);color:var(--ink);font-weight:600;transition:transform .55s var(--spring)}
html[data-theme=mono] .toast{background:rgba(24,24,27,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-weight:400;transition:opacity .35s var(--ease),transform .45s var(--spring)}

/* ---- modal sheet (Mono look) ---- */
html[data-theme=mono] .modal{background:rgba(24,24,27,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-theme=mono] .sheet{background:var(--page);border-radius:24px 24px 0 0;box-shadow:0 30px 80px rgba(24,24,27,.2)}
html[data-theme=mono] .sheet h3{font-size:24px;font-weight:400;letter-spacing:-.03em}
@media (min-width:640px){html[data-theme=mono] .sheet{border-radius:24px}}

/* ---- PIN cover ---- */
html[data-theme=mono] .cover{background:var(--page)}
html[data-theme=mono] .cover h1{font-family:var(--font);font-style:normal;font-weight:400;letter-spacing:-.045em}
html[data-theme=mono] .cover .tag{color:#d4d4d8;font-weight:400}
html[data-theme=mono] .keys button{background:none;border-color:var(--line);font-weight:400;transition:transform .15s var(--ease),background .2s}
html[data-theme=mono] .keys button:active{transform:scale(.94);background:#ececee;border-color:var(--line)}

@media (max-width:820px){html[data-theme=mono] .content{padding:22px 16px 40px}html[data-theme=mono] h2.title{font-size:34px}html[data-theme=mono] .homeHero h2{font-size:38px}}

/* both themes: keep the hidden zap bar (and its glow) fully off screen */
.zapbar:not(.show){transform:translate(-50%,-200%)!important;box-shadow:none!important}

/* both themes: headings in Title Case (Good Morning, Credit Book) */
h2.title,.homeHero h2,.sheet h3,.card h4,.qa b,.nav li button > span:first-child,.pinBox h2,.ordHead h2,.catHead b{text-transform:capitalize}

/* =====================================================================
   MOTION · every look (Mono, Classic, Glass): iOS-style, short and eased
   ===================================================================== */
html[data-theme]{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.36,.64,1);--glide:cubic-bezier(.3,.9,.3,1)}
@keyframes bqFade{from{opacity:0}to{opacity:1}}
@keyframes bqSheet{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bqRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bqCard{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bqMelt{to{opacity:0;transform:scale(1.03);filter:blur(2px)}}
/* modal: backdrop fades, sheet lands with a little spring */
html[data-theme] .modal.show{animation:bqFade .25s var(--ease) both}
html[data-theme] .modal.show .sheet{animation:bqSheet .38s var(--spring) both}
/* toast and zap bar spring in */
html[data-theme] .toast{transition:opacity .22s var(--ease),transform .4s var(--spring)}
html[data-theme] .zapbar{transition:transform .5s var(--spring)}
/* presses: everything you tap gives a little */
html[data-theme] .btn,html[data-theme] .qa,html[data-theme] .tile,html[data-theme] .payBtns button,html[data-theme] .ord .acts button,html[data-theme] .stepper button,html[data-theme] .tabs button,html[data-theme] .seg button,html[data-theme] .chipsRow button,html[data-theme] .nav li button,html[data-theme] .keys button,html[data-theme] .cRow,html[data-theme] .edit{transition:transform .12s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease),padding .35s var(--ease)}
html[data-theme] .btn:active,html[data-theme] .qa:active,html[data-theme] .tile:active:not(:disabled),html[data-theme] .payBtns button:active,html[data-theme] .ord .acts button:active,html[data-theme] .stepper button:active,html[data-theme] .tabs button:active,html[data-theme] .seg button:active,html[data-theme] .chipsRow button:active,html[data-theme] .nav li button:active,html[data-theme] .keys button:active,html[data-theme] .cRow:active{transform:scale(.965)}
/* page change: the new section rises in, a beat at a time */
html[data-theme] #view.bq-enter > *{animation:bqRise .5s var(--ease) both}
html[data-theme] #view.bq-enter > *:nth-child(2){animation-delay:.05s}
html[data-theme] #view.bq-enter > *:nth-child(3){animation-delay:.1s}
html[data-theme] #view.bq-enter > *:nth-child(4){animation-delay:.14s}
html[data-theme] #view.bq-enter > *:nth-child(5){animation-delay:.18s}
html[data-theme] #view.bq-enter > *:nth-child(n+6){animation-delay:.22s}
html[data-theme] #view.bq-enter .kpis > *,html[data-theme] #view.bq-enter .quick > *,html[data-theme] #view.bq-enter .ocards > *,html[data-theme] #view.bq-enter .cards > *{animation:bqCard .5s var(--ease) both}
html[data-theme] #view.bq-enter .kpis > *:nth-child(2),html[data-theme] #view.bq-enter .quick > *:nth-child(2),html[data-theme] #view.bq-enter .ocards > *:nth-child(2){animation-delay:.08s}
html[data-theme] #view.bq-enter .kpis > *:nth-child(3),html[data-theme] #view.bq-enter .quick > *:nth-child(3),html[data-theme] #view.bq-enter .ocards > *:nth-child(3){animation-delay:.12s}
html[data-theme] #view.bq-enter .kpis > *:nth-child(4),html[data-theme] #view.bq-enter .quick > *:nth-child(4),html[data-theme] #view.bq-enter .ocards > *:nth-child(n+4){animation-delay:.16s}
html[data-theme] #view.bq-enter .quick > *:nth-child(n+5){animation-delay:.2s}
/* greeting (PIN page): soft glow, lines rise in one after another, then it melts into the Desk */
html[data-theme] .cover.show{animation:bqFade .3s var(--ease) both}
html[data-theme] .cover.show .left > *,html[data-theme] .cover.show .left > div > *,html[data-theme] .cover.show .pinBox > *{animation:bqRise .6s var(--ease) both}
html[data-theme] .cover.show .left > :nth-child(1){animation-delay:.05s}
html[data-theme] .cover.show .left > div > :nth-child(1){animation-delay:.12s}
html[data-theme] .cover.show .left > div > :nth-child(2){animation-delay:.2s}
html[data-theme] .cover.show .left > div > :nth-child(3){animation-delay:.27s}
html[data-theme] .cover.show .left > :nth-child(3){animation-delay:.4s}
html[data-theme] .cover.show .pinBox > :nth-child(1){animation-delay:.15s}
html[data-theme] .cover.show .pinBox > :nth-child(2){animation-delay:.2s}
html[data-theme] .cover.show .pinBox > :nth-child(3){animation-delay:.26s}
html[data-theme] .cover.show .pinBox > :nth-child(n+4){animation-delay:.33s}
html[data-theme] .cover.bq-out{display:block!important;pointer-events:none;animation:bqMelt .3s var(--ease) forwards}
html[data-theme=mono] .cover .right{background:radial-gradient(900px 520px at 50% -10%,rgba(35,35,38,.10),transparent 70%),radial-gradient(700px 500px at 100% 110%,rgba(255,225,77,.14),transparent 70%),var(--page)}
html[data-theme=classic] .cover .right{background:radial-gradient(900px 520px at 50% -10%,rgba(29,31,36,.12),transparent 70%),radial-gradient(700px 500px at 100% 110%,rgba(255,225,77,.26),transparent 70%),var(--page)}
html[data-theme=mono] .cover .left,html[data-theme=classic] .cover .left{background:radial-gradient(700px 500px at 0% 0%,rgba(47,107,255,.16),transparent 65%),radial-gradient(600px 460px at 100% 100%,rgba(255,225,77,.08),transparent 65%),var(--storm)}

/* the glide: one highlight that slides (and stretches) between choices, sideways and up/down */
.bq-drop{position:absolute;left:0;top:0;z-index:0;pointer-events:none;will-change:transform,width,height}
.bq-gl{position:relative}
.bq-gl > :not(.bq-drop),.bq-gl > li > button{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after{animation:none!important;transition:none!important}}

/* =====================================================================
   GLASS · light and dark, after CX Desk: drifting colour behind frosted
   panels with light rims; one slider sets how clear the glass is
   ===================================================================== */
html[data-theme^=glass]{
  --clar:.5; --font:Poppins,'Segoe UI',Arial,sans-serif;
  --storm:#1e3a5f; --storm-2:#2b4c78; --storm-3:#36598a; --volt:#ffe14d; --volt-deep:#f5c400;
  --navy:#1e3a5f; --navy-bg:#e9eef5; --teal:#0e7c6b; --gold:#b7862b; --gold-bg:rgba(251,245,232,.8); --gold-ink:#7a5718;
  --ink:#172033; --mut:#5a6474; --soft:#8a93a3; --line:rgba(20,30,50,.10); --page:transparent; --card:transparent; --input:#ffffff;
  --base:#eceff4; --b1:rgba(30,58,95,.30); --b2:rgba(255,225,77,.30); --b3:rgba(14,124,107,.22);
  --gf-rgb:255,255,255; --gc-rgb:255,255,255; --g2-rgb:255,255,255;
  --glass-edge:rgba(20,30,50,.09); --glass-shadow:0 10px 30px rgba(20,30,50,.08),0 1px 2px rgba(20,30,50,.05);
  --rim-top:rgba(255,255,255,.95); --rim-side:rgba(255,255,255,.45); --rim-bot:rgba(255,255,255,.22); --sheen:rgba(255,255,255,.38);
  --track:rgba(20,30,50,.07); --drop:rgba(255,255,255,.92); --drop-shadow:0 3px 10px rgba(20,30,50,.16),0 0 0 .5px rgba(20,30,50,.06);
  --on-accent:#ffffff; --hover:rgba(20,30,50,.06); --glow1:rgba(30,58,95,.26); --glow2:rgba(183,134,43,.22);
}
html[data-theme=glass-dark]{
  --storm:#3d6fd1; --storm-2:#2a3a58; --storm-3:#33456a; --navy:#7aa7ff; --navy-bg:#1f2a40; --teal:#4fd1b5; --gold:#d9a441; --gold-bg:rgba(42,36,22,.7); --gold-ink:#e8c27a;
  --ink:#e6e9ef; --mut:#a3abb9; --soft:#7b8494; --line:rgba(255,255,255,.09); --input:#12151b;
  --base:#0c0e13; --b1:rgba(122,167,255,.24); --b2:rgba(255,225,77,.12); --b3:rgba(79,209,181,.15);
  --gf-rgb:34,38,48; --gc-rgb:30,34,44; --g2-rgb:38,43,55;
  --glass-edge:rgba(0,0,0,.45); --glass-shadow:0 12px 34px rgba(0,0,0,.35);
  --rim-top:rgba(255,255,255,.22); --rim-side:rgba(255,255,255,.08); --rim-bot:rgba(255,255,255,.05); --sheen:rgba(255,255,255,.06);
  --track:rgba(255,255,255,.07); --drop:rgba(255,255,255,.16); --drop-shadow:0 3px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);
  --hover:rgba(255,255,255,.06); --glow1:rgba(122,167,255,.22); --glow2:rgba(217,164,65,.10);
  color-scheme:dark;
}
html[data-theme^=glass]{
  --glass-frame:rgba(var(--gf-rgb),calc(.74 - var(--clar) * .64));
  --glass:rgba(var(--gc-rgb),calc(.88 - var(--clar) * .70));
  --glass-2:rgba(var(--g2-rgb),calc(.96 - var(--clar) * .32));
  --rims:inset 0 1px 0 var(--rim-top),inset 1px 0 0 var(--rim-side),inset -1px 0 0 var(--rim-side),inset 0 -1px 0 var(--rim-bot);
}
html[data-theme^=glass] body{background:var(--base);color:var(--ink);font-family:var(--font)}
#bqbg{display:none}
html[data-theme^=glass] #bqbg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bqbg i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform}
#bqbg i:nth-child(1){left:-18vmax;top:-22vmax;background:radial-gradient(circle,var(--b1),transparent 66%);animation:bqD1 48s ease-in-out infinite alternate}
#bqbg i:nth-child(2){right:-20vmax;top:-18vmax;background:radial-gradient(circle,var(--b2),transparent 66%);animation:bqD2 56s ease-in-out infinite alternate}
#bqbg i:nth-child(3){left:25vw;bottom:-30vmax;background:radial-gradient(circle,var(--b3),transparent 66%);animation:bqD3 64s ease-in-out infinite alternate}
@keyframes bqD1{to{transform:translate(22vw,18vh) scale(1.12)}}
@keyframes bqD2{to{transform:translate(-20vw,24vh) scale(.92)}}
@keyframes bqD3{to{transform:translate(-16vw,-20vh) scale(1.1)}}
html[data-theme^=glass] .top,html[data-theme^=glass] .mode,html[data-theme^=glass] .shell{position:relative;z-index:1}

/* the frosted surfaces */
html[data-theme^=glass] .nav,html[data-theme^=glass] .tabs,html[data-theme^=glass] .seg,html[data-theme^=glass] .chipsRow{background:linear-gradient(180deg,var(--sheen),transparent 55%),var(--glass-frame);box-shadow:var(--rims),0 6px 20px rgba(0,0,0,.08);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);border:0}
html[data-theme^=glass] div.card,html[data-theme^=glass] .homeHero,html[data-theme^=glass] .kpi,html[data-theme^=glass] .qa,html[data-theme^=glass] .ord,html[data-theme^=glass] .st,html[data-theme^=glass] .cRow,html[data-theme^=glass] .saleRow,html[data-theme^=glass] .tile,html[data-theme^=glass] .tcard,html[data-theme^=glass] .fb,html[data-theme^=glass] .qItem,html[data-theme^=glass] .lockCard,html[data-theme^=glass] .calWrap,html[data-theme^=glass] .chair,html[data-theme^=glass] .warn,html[data-theme^=glass] .hero{background:linear-gradient(180deg,var(--sheen),transparent 30%),var(--glass);border:0;box-shadow:var(--rims),var(--glass-shadow);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);color:var(--ink)}
html[data-theme^=glass] div.card,html[data-theme^=glass] .homeHero,html[data-theme^=glass] .calWrap,html[data-theme^=glass] .hero,html[data-theme^=glass] .lockCard{border-radius:20px}
html[data-theme^=glass] .kpi,html[data-theme^=glass] .qa,html[data-theme^=glass] .ord,html[data-theme^=glass] .tile,html[data-theme^=glass] .tcard,html[data-theme^=glass] .chair{border-radius:16px}
html[data-theme^=glass] .st,html[data-theme^=glass] .cRow,html[data-theme^=glass] .saleRow,html[data-theme^=glass] .fb,html[data-theme^=glass] .qItem{border-radius:14px}
html[data-theme^=glass] .sheet{background:linear-gradient(180deg,var(--sheen),transparent 38%),var(--glass-2);box-shadow:var(--rims),0 30px 80px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);border-radius:22px 22px 0 0;color:var(--ink)}
@media (min-width:640px){html[data-theme^=glass] .sheet{border-radius:22px}}
html[data-theme^=glass] .modal{background:rgba(10,14,24,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* frame: a clear top bar with floating capsules; the side bar is a frosted panel */
html[data-theme^=glass] .top{background:transparent;padding:12px 20px 6px}
html[data-theme^=glass] .brand{padding:6px 4px;background:none;box-shadow:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:baseline}
html[data-theme^=glass] .brand small{color:var(--mut)}
html[data-theme^=glass] .brand .word{color:var(--ink)}
html[data-theme=glass] .brand .word{color:#172033}
html[data-theme^=glass] .seg{padding:4px;border-radius:999px}
html[data-theme^=glass] .seg button{color:var(--mut);font-weight:500}
html[data-theme^=glass] .seg button:hover{color:var(--ink)}
html[data-theme^=glass] .seg button[aria-pressed=true]{background:var(--drop);color:var(--ink);box-shadow:var(--drop-shadow)}
html[data-theme^=glass] .mode{background:transparent!important;border:0!important;color:var(--mut)!important;padding:4px 22px 0;font-size:12.5px}
html[data-theme^=glass] .mode b{color:var(--ink)}
html[data-theme^=glass] .mode.live > span:first-child b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#15803d;margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px rgba(21,128,61,.15)}
html[data-theme^=glass] .shell{grid-template-columns:264px minmax(0,1fr);gap:4px;padding:10px 14px 20px}
html[data-theme^=glass] .nav{border-radius:22px;padding:20px 12px;color:var(--ink);align-self:start;position:sticky;top:12px}
html[data-theme^=glass] .nav h3{color:var(--ink);font-weight:600}
html[data-theme^=glass] .nav p{color:var(--mut)}
html[data-theme^=glass] .nav li button{color:var(--ink);font-weight:500;border-radius:12px}
html[data-theme^=glass] .nav li button:hover{background:var(--hover)}
html[data-theme^=glass] .nav li button.on{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(30,58,95,.25)}
html[data-theme=glass-dark] .nav li button.on{background:#3d6fd1;color:#fff}
html[data-theme^=glass] .nav li button.locked{color:var(--soft)}
html[data-theme^=glass] .tier{background:var(--track);color:var(--mut)}
html[data-theme^=glass] .nav li button.on .tier{background:rgba(255,255,255,.2);color:#fff}
html[data-theme^=glass] .nav li button.locked .tier{background:transparent;border:1px solid var(--line);color:var(--mut)}
html[data-theme^=glass] .nbadge{background:var(--volt);color:#172033}
html[data-theme^=glass] .nav .lockBtn,html[data-theme^=glass] .nav .reset{border:0;border-radius:999px;background:var(--glass-2);color:var(--ink);box-shadow:var(--rims),0 1px 3px rgba(0,0,0,.06)}
html[data-theme^=glass] #demoDay{color:var(--ink)!important;border:0!important}
html[data-theme^=glass] .nav .sticky{position:static}
@media (max-width:820px){html[data-theme^=glass] .shell{grid-template-columns:minmax(0,1fr);padding:8px 10px 20px}html[data-theme^=glass] .nav{position:static;padding:12px}}
html[data-theme^=glass] .content{padding:14px 16px 40px}

/* type and controls */
html[data-theme^=glass] h2.title,html[data-theme^=glass] .homeHero h2{font-family:var(--font);font-style:normal;font-weight:600;letter-spacing:-.6px}
html[data-theme^=glass] h2.title{font-size:30px}
html[data-theme^=glass] .homeHero h2{font-size:32px}
html[data-theme^=glass] .lead,html[data-theme^=glass] .small,html[data-theme^=glass] .kpi span,html[data-theme^=glass] .qa span,html[data-theme^=glass] .homeHero p{color:var(--mut)}
html[data-theme^=glass] .kpi b{color:var(--ink)}
html[data-theme^=glass] .kpis .kpi:first-child{background:linear-gradient(135deg,#1e3a5f,#0e7c6b);color:#fff}
html[data-theme^=glass] .kpis .kpi:first-child span{color:rgba(255,255,255,.75)}
html[data-theme^=glass] .kpis .kpi:first-child b{color:#fff}
html[data-theme^=glass] .kpis.plain .kpi:first-child{background:linear-gradient(180deg,var(--sheen),transparent 30%),var(--glass);color:var(--ink)}
html[data-theme^=glass] .kpis.plain .kpi:first-child span{color:var(--mut)}
html[data-theme^=glass] .tabs,html[data-theme^=glass] .chipsRow{border-radius:999px;padding:4px;display:inline-flex;max-width:100%}
html[data-theme^=glass] .tabs button,html[data-theme^=glass] .chipsRow button{background:transparent;border:0;color:var(--mut);font-weight:500;border-radius:999px}
html[data-theme^=glass] .tabs button:hover,html[data-theme^=glass] .chipsRow button:hover{color:var(--ink)}
html[data-theme^=glass] .tabs button[aria-pressed=true],html[data-theme^=glass] .chipsRow button.on{background:var(--drop);color:var(--ink);box-shadow:var(--drop-shadow)}
html[data-theme^=glass] .btn,html[data-theme^=glass] .sound,html[data-theme^=glass] .staffChips button{background:var(--glass-2);border:1px solid var(--glass-edge);color:var(--ink);border-radius:999px}
html[data-theme^=glass] .btn.dark,html[data-theme^=glass] .btn.volt,html[data-theme^=glass] .sound.on,html[data-theme^=glass] .staffChips button.on{background:var(--navy);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(30,58,95,.22)}
html[data-theme=glass-dark] .btn.dark,html[data-theme=glass-dark] .btn.volt,html[data-theme=glass-dark] .sound.on,html[data-theme=glass-dark] .staffChips button.on{background:#3d6fd1}
html[data-theme^=glass] .edit{color:var(--navy)}
html[data-theme^=glass] input,html[data-theme^=glass] select,html[data-theme^=glass] textarea{background:var(--input);border-color:var(--glass-edge);color:var(--ink)}
html[data-theme^=glass] .f input,html[data-theme^=glass] .f select,html[data-theme^=glass] .f textarea{border-radius:10px}
html[data-theme^=glass] input:focus,html[data-theme^=glass] select:focus,html[data-theme^=glass] textarea:focus{outline:none;border-color:var(--navy)!important;box-shadow:0 0 0 4px var(--navy-bg)}
html[data-theme^=glass] .stepper button,html[data-theme^=glass] .payBtns .cash,html[data-theme^=glass] .ord .acts .go,html[data-theme^=glass] .tile .q,html[data-theme^=glass] .av,html[data-theme^=glass] .lockCard .badge,html[data-theme^=glass] .tcard .tn,html[data-theme^=glass] .gh.today span{background:var(--navy);color:#fff}
html[data-theme=glass-dark] .stepper button,html[data-theme=glass-dark] .payBtns .cash,html[data-theme=glass-dark] .ord .acts .go,html[data-theme=glass-dark] .tile .q,html[data-theme=glass-dark] .av,html[data-theme=glass-dark] .lockCard .badge,html[data-theme=glass-dark] .tcard .tn,html[data-theme=glass-dark] .gh.today span{background:#3d6fd1}
html[data-theme^=glass] .payBtns .card{background:var(--glass-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--navy)}
html[data-theme^=glass] .payBtns .tab{background:var(--glass-2);color:var(--ink)}
html[data-theme^=glass] .ord .acts .x{background:var(--glass-2);border-color:var(--glass-edge);color:var(--ink)}
html[data-theme^=glass] .ord .tb{background:var(--navy-bg);color:var(--navy)}
html[data-theme^=glass] .ord .note,html[data-theme^=glass] .stats4 div,html[data-theme^=glass] .catHead{background:var(--track)}
html[data-theme^=glass] .ord.new{box-shadow:0 0 0 3px rgba(255,225,77,.6),var(--glass-shadow)}
html[data-theme^=glass] .pill.new{background:var(--volt);color:#172033}
html[data-theme^=glass] .warn{border-left:4px solid var(--gold);border-radius:0 14px 14px 0;color:var(--ink)}
html[data-theme^=glass] .warn b{color:var(--gold-ink)}
html[data-theme^=glass] .hero{background:linear-gradient(135deg,#1e3a5f,#0e7c6b)!important;color:#fff}
html[data-theme^=glass] .hero .big{color:#fff}
html[data-theme^=glass] .hero .k,html[data-theme^=glass] .hero .split span{color:rgba(255,255,255,.7)}
html[data-theme^=glass] .hero .msg{font-family:var(--font);font-style:normal;font-weight:600}
html[data-theme^=glass] .cols .c.peak i{background:var(--navy);box-shadow:none}
html[data-theme^=glass] .tcard{color:var(--ink)}
html[data-theme^=glass] .toast{background:var(--ink);color:var(--base);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
html[data-theme^=glass] .zapbar{background:var(--volt);color:#172033}
html[data-theme^=glass] .bk{background:var(--navy-bg);border-left-color:var(--navy);color:var(--ink)}
html[data-theme^=glass] .bk.serving{background:var(--volt);color:#172033}
html[data-theme^=glass] .bk.done{background:var(--track);border-left-color:var(--soft)}
html[data-theme^=glass] .calHead,html[data-theme^=glass] .cell{background:transparent;color:var(--ink);border-color:var(--line)}
html[data-theme^=glass] .chair.busy{box-shadow:inset 0 0 0 1.5px var(--navy),var(--glass-shadow)}
html[data-theme^=glass] .phone iframe{background:#fff}
html[data-theme=glass-dark] .pill:not(.new):not(.r):not(.paid):not(.ready):not(.prep){background:var(--track);color:var(--mut)}
html[data-theme=glass-dark] .row,html[data-theme=glass-dark] .tl,html[data-theme=glass-dark] table.rep td,html[data-theme=glass-dark] table.rep th,html[data-theme=glass-dark] .addRow{border-color:var(--line);color:var(--ink)}
html[data-theme=glass-dark] .tiles .tile b,html[data-theme=glass-dark] .qa b,html[data-theme=glass-dark] .st .nm b{color:var(--ink)}

/* greeting on glass: glow over the drifting colour, glass keypad */
html[data-theme^=glass] .cover{background:radial-gradient(1300px 700px at 50% -14%,var(--glow1),transparent 72%),radial-gradient(1000px 600px at 100% 112%,var(--glow2),transparent 72%),var(--base)}
html[data-theme^=glass] .cover .left{background:transparent;color:var(--ink)}
html[data-theme^=glass] .cover .left .word{color:var(--ink)}
html[data-theme=glass] .cover .left .word{color:#172033}
html[data-theme^=glass] .cover .hello,html[data-theme^=glass] .cover .when{color:var(--mut)}
html[data-theme^=glass] .cover .hello .ar{color:var(--ink)}
html[data-theme^=glass] .cover h1{font-family:var(--font);font-style:normal;font-weight:600;letter-spacing:-1px}
html[data-theme^=glass] .cover .tag{color:var(--navy);font-weight:600}
html[data-theme^=glass] .pinBox{background:linear-gradient(180deg,var(--sheen),transparent 38%),var(--glass-2);box-shadow:var(--rims),var(--glass-shadow);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);border-radius:24px;padding:26px 22px;max-width:340px;color:var(--ink)}
html[data-theme^=glass] .keys button{background:var(--glass-2);border:1px solid var(--glass-edge);color:var(--ink);box-shadow:var(--rims)}
html[data-theme^=glass] .keys button.fn{background:transparent;box-shadow:none;border-color:transparent;color:var(--mut)}
html[data-theme^=glass] .dots i{border-color:var(--navy)}
html[data-theme^=glass] .dots i.on{background:var(--navy)}

/* the glide droplet on glass */
html[data-theme^=glass] .bq-drop{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 60%),var(--drop)!important;box-shadow:var(--drop-shadow)!important;border-radius:999px!important}
html[data-theme^=glass] #sections .bq-drop{background:var(--navy)!important;box-shadow:0 4px 14px rgba(30,58,95,.25)!important;border-radius:12px!important}
html[data-theme=glass-dark] #sections .bq-drop{background:#3d6fd1!important}

/* glass controls in the side bar */
.bqglass{display:none}
html[data-theme^=glass] .bqglass{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bqglass label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:0 2px 8px}
.bqglass .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--soft)}
.bqglass input[type=range]{flex:1;accent-color:var(--navy);cursor:pointer;background:transparent;border:0;box-shadow:none!important}
.bqglass .ld{display:inline-flex;border-radius:999px;padding:3px;background:var(--track);margin-bottom:10px;width:100%}
.bqglass .ld button{flex:1;border:0;background:none;border-radius:999px;padding:5px 8px;font-size:12px;font-weight:500;color:var(--mut)}
.bqglass .ld button[aria-pressed=true]{background:var(--drop);color:var(--ink);box-shadow:var(--drop-shadow)}
@media (max-width:820px){html[data-theme^=glass] .bqglass{display:none}}
@media (prefers-reduced-motion:reduce){#bqbg i{animation:none!important}}
/* glass fixes: calendar rules, badges, inline-white inputs */
html[data-theme^=glass] .calCol{border-left-color:var(--line)}
html[data-theme^=glass] .calLine{border-top-color:var(--line)}
html[data-theme^=glass] .calHead{background:var(--glass-2)}
html[data-theme^=glass] .nav li button.on .nbadge{background:var(--volt);color:#172033}
html[data-theme^=glass] .bk.serving span,html[data-theme^=glass] .bk.serving b{color:#2a2a10}
html[data-theme=glass-dark] input[style*="background:#fff"],html[data-theme=glass-dark] textarea[style*="background:#fff"],html[data-theme=glass-dark] select[style*="background:#fff"]{background:var(--input)!important;color:var(--ink)!important;border-color:var(--glass-edge)!important}
html[data-theme=glass-dark] .pill.paid,html[data-theme=glass-dark] .pill.ready,html[data-theme=glass-dark] .pill.g{background:rgba(74,222,128,.14);color:#4ade80}
html[data-theme=glass-dark] .pill.r{background:rgba(248,113,113,.14);color:#f87171}
html[data-theme=glass-dark] .pill.prep{background:rgba(240,163,90,.16);color:#f0a35a}

/* glass: the navy-to-teal cards are solid colour, so no light rim line along their top edge */
html[data-theme^=glass] .kpis .kpi:first-child:not(.locked),html[data-theme^=glass] .hero{box-shadow:0 10px 30px rgba(14,60,80,.22)!important}
html[data-theme^=glass] .kpis.plain .kpi:first-child{box-shadow:var(--rims),var(--glass-shadow)!important}
html[data-theme] .f input[type=checkbox],html[data-theme] .f input[type=radio]{width:18px!important;padding:0!important;background:none!important}
html[data-theme^=glass] .f input[type=checkbox]{accent-color:var(--navy)}