/* Stoka "Soft" and "Liquid Titanium" looks (Round 5).
   One style sheet that sits on top of the page's own styles. Everything below is scoped to
   html[data-skin="glow"], so switching to "Classic" in Admin > Business > Look and feel (or deleting
   the <link> to this file) gives back the previous look exactly. Nothing here changes what any screen
   does, only how it is drawn. Same brand colours and fonts as before: indigo, gold and kraft. */

/* ------------------------------------------------------------------ colours and sizes */
html[data-skin=glow]{
  color-scheme:light;
  --bg:#EFE7D6; --surface:#FCF9F1; --surface-2:#F4EDDC; --surface-3:#E8DFC9;
  --ink:#171B3B; --ink-muted:#625A41; --hairline:#DFD3B8; --hairline-soft:#E9DFC8;
  --accent:#E8A62B; --accent-2:#F6C45E; --accent-ink:#171B3B; --accent-soft:rgba(232,166,43,.2);
  --warn-bg:#FBEBC9; --warn-fg:#7A4B0A;
  --vet-bg:#E4E7F6; --vet-fg:#2F3A78;
  --sale-bg:#E1F0DB; --sale-fg:#27682F;
  --other-bg:#EEE6D1; --other-fg:#625A41;
  --out-bg:#F8DFD8; --out-fg:#9A2E1A;
  --good-bg:#E1F0DB; --good-fg:#27682F; --bad-bg:#F8DFD8; --bad-fg:#9A2E1A; --info-bg:#E4E7F6; --info-fg:#2F3A78;
  --live:#2E9B4E;
  --shadow:0 1px 2px rgba(23,27,59,.06), 0 8px 22px -8px rgba(23,27,59,.14);
  --shadow-lg:0 2px 4px rgba(23,27,59,.08), 0 20px 46px -12px rgba(23,27,59,.32);
  --glow:0 10px 26px -8px rgba(232,166,43,.7);
  --radius:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --ring:rgba(232,166,43,.45); --acc-rgb:232,166,43;
  --glass:rgba(239,231,214,.8); --glass-2:rgba(252,249,241,.88);
  --hero-a:#272F73; --hero-b:#141844; --hero-ink:#F6EFDD; --hero-muted:rgba(246,239,221,.74);
  --ease:cubic-bezier(.2,.75,.25,1);
}
html[data-skin=glow][data-theme=dark]{
  color-scheme:dark;
  --bg:#0A0E27; --surface:#141939; --surface-2:#1B2147; --surface-3:#242B5C;
  --ink:#F2EBDA; --ink-muted:#B0AC9C; --hairline:#2B3368; --hairline-soft:#222959;
  --accent:#F2B33E; --accent-2:#F8CB70; --accent-ink:#14183A; --accent-soft:rgba(242,179,62,.17);
  --warn-bg:#3B2E12; --warn-fg:#F4BB55;
  --vet-bg:#1F2858; --vet-fg:#AAB7FF;
  --sale-bg:#15382A; --sale-fg:#7ED7A0;
  --other-bg:#1B2147; --other-fg:#B0AC9C;
  --out-bg:#42201F; --out-fg:#FF9F8E;
  --good-bg:#15382A; --good-fg:#7ED7A0; --bad-bg:#42201F; --bad-fg:#FF9F8E; --info-bg:#1F2858; --info-fg:#AAB7FF;
  --live:#52D17F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 24px 52px -12px rgba(0,0,0,.75);
  --glow:0 10px 28px -8px rgba(242,179,62,.55);
  --ring:rgba(242,179,62,.5); --acc-rgb:242,179,62;
  --glass:rgba(10,14,39,.78); --glass-2:rgba(20,25,57,.9);
  --hero-a:#2E3898; --hero-b:#171C5C; --hero-ink:#F6EFDD; --hero-muted:rgba(246,239,221,.74);
}
@media (prefers-color-scheme:dark){
  html[data-skin=glow]:not([data-theme=light]){
    color-scheme:dark;
    --bg:#0A0E27; --surface:#141939; --surface-2:#1B2147; --surface-3:#242B5C;
    --ink:#F2EBDA; --ink-muted:#B0AC9C; --hairline:#2B3368; --hairline-soft:#222959;
    --accent:#F2B33E; --accent-2:#F8CB70; --accent-ink:#14183A; --accent-soft:rgba(242,179,62,.17);
    --warn-bg:#3B2E12; --warn-fg:#F4BB55;
    --vet-bg:#1F2858; --vet-fg:#AAB7FF;
    --sale-bg:#15382A; --sale-fg:#7ED7A0;
    --other-bg:#1B2147; --other-fg:#B0AC9C;
    --out-bg:#42201F; --out-fg:#FF9F8E;
    --good-bg:#15382A; --good-fg:#7ED7A0; --bad-bg:#42201F; --bad-fg:#FF9F8E; --info-bg:#1F2858; --info-fg:#AAB7FF;
    --live:#52D17F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -8px rgba(0,0,0,.6);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 24px 52px -12px rgba(0,0,0,.75);
    --glow:0 10px 28px -8px rgba(242,179,62,.55);
    --ring:rgba(242,179,62,.5); --acc-rgb:242,179,62;
    --glass:rgba(10,14,39,.78); --glass-2:rgba(20,25,57,.9);
    --hero-a:#2E3898; --hero-b:#171C5C; --hero-ink:#F6EFDD; --hero-muted:rgba(246,239,221,.74);
  }
}

/* ------------------------------------------------------------------ page, top bar, staff bar */
[data-skin=glow] body{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
[data-skin=glow] #topbar{
  padding:10px 14px; gap:10px; border-bottom:1px solid var(--hairline-soft);
  background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-skin=glow] #topbar{background:var(--bg);}
}
[data-skin=glow] #topbar .titles h1{font-size:17px; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
[data-skin=glow] #topbar .titles .sub{font-size:12px;}
[data-skin=glow] #topbar .badge[style*="margin-left"]{margin-left:0 !important;}
[data-skin=glow] .brand-mark{width:34px; height:34px;}
[data-skin=glow] .back-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow); transition:transform .15s var(--ease), background .2s;
}
[data-skin=glow] .back-btn:active,
[data-skin=glow] .hp-open:active{transform:scale(.92);}
/* the Stoka AI button: the logo itself, with a soft glow in the accent colour. It rings out three times when the page opens, then rests. */
[data-skin=glow] .hp-open{
  width:40px; height:40px; border:0; background:none; border-radius:50%;
  box-shadow:0 6px 16px -4px rgba(var(--acc-rgb),.6), 0 2px 6px rgba(23,27,59,.22); transition:transform .15s var(--ease);
}
@keyframes hp-ring{0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5);} 30%,100%{box-shadow:0 0 0 11px rgba(var(--acc-rgb),0);}}
@media (prefers-reduced-motion:no-preference){
  html[data-skin=glow]:not([data-fx=lite]) .hp-open::after{
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; animation:hp-ring 4.6s ease-out 1.2s 3 both;
  }
}
[data-skin=glow] .sync{gap:5px; padding:0; border-radius:var(--r-pill); font-size:11px;}
[data-skin=glow] .sync .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-muted); opacity:.55;}
[data-skin=glow] .sync.live .dot{background:var(--live); opacity:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);}
[data-skin=glow] .sync.offline{padding:5px 10px; background:var(--warn-bg); color:var(--warn-fg);}
[data-skin=glow] .sync.offline .dot{background:var(--warn-fg); opacity:1;}

[data-skin=glow] #staffbar{
  margin:10px 16px 0; padding:7px 8px 7px 12px; gap:7px; border:1px solid var(--hairline-soft); border-radius:18px;
  background:var(--surface); box-shadow:var(--shadow);
}
[data-skin=glow] #staffbar .who{display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap;}
[data-skin=glow] #staffbar .who b{overflow:hidden; text-overflow:ellipsis; min-width:0;}
[data-skin=glow] #staffbar svg{width:16px; height:16px;}
[data-skin=glow] #staffbar .tag{padding:2px 9px;}
[data-skin=glow] #staffbar button{
  border:1px solid var(--hairline); border-radius:var(--r-pill); padding:7px 11px; background:var(--surface-2);
  font-size:11.5px; transition:transform .15s var(--ease), background .2s;
}
[data-skin=glow] #staffbar button:active{transform:scale(.95);}

[data-skin=glow] #main{padding:14px 16px 40px;}
[data-skin=glow] #main.no-tabbar{padding-bottom:calc(28px + env(safe-area-inset-bottom));}
[data-skin=glow] #main.main-cart-pad{padding-bottom:28px;}
[data-skin=glow] .stack{gap:14px;}
[data-skin=glow] .section-title{font-size:12px; letter-spacing:.09em; margin:8px 4px 0;}

/* ------------------------------------------------------------------ bottom bar (phones) */
[data-skin=glow] #tabbar{
  position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); margin:0 12px calc(10px + env(safe-area-inset-bottom));
  padding:8px 6px; gap:2px; border-radius:28px; border:1px solid var(--hairline-soft);
  background:var(--glass-2); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:var(--shadow-lg);
}
[data-skin=glow] .tab{
  min-width:0; padding:8px 0 6px; border-radius:20px; font-size:10px; gap:3px; letter-spacing:-.005em; justify-content:flex-end;
  transition:background .2s var(--ease), color .2s, transform .15s var(--ease);
}
[data-skin=glow] .tab svg{width:22px; height:22px;}
[data-skin=glow] .tab:active{transform:scale(.94);}
[data-skin=glow] .tab.active{background:var(--accent-soft); color:var(--ink);}
[data-skin=glow] .tab.sell{margin-top:-30px; flex:0 0 68px; background:none;}
[data-skin=glow] .tab.sell .sellbtn{
  width:58px; height:58px; border-radius:50%; margin-bottom:3px;
  background:linear-gradient(145deg,var(--accent-2),var(--accent)); color:var(--accent-ink);
  border:4px solid var(--surface); box-shadow:var(--glow);
  transition:transform .2s var(--ease), box-shadow .2s;
}
[data-skin=glow] .tab.sell .sellbtn svg{width:26px; height:26px;}
[data-skin=glow] .tab.sell:active .sellbtn{transform:scale(.92);}
[data-skin=glow] .tab.sell.active .sellbtn{box-shadow:var(--glow), 0 0 0 4px var(--ring);}
[data-skin=glow] .tab.sell.active{background:none;}
@media (max-width:359.98px){
  [data-skin=glow] #tabbar{margin-left:6px; margin-right:6px; padding:8px 3px;}
  [data-skin=glow] .tab{font-size:9.5px;}
  [data-skin=glow] .tab.sell{flex-basis:62px;}
}

/* the cart bar on the Sell screen floats above the bar and stays in view while the list scrolls */
[data-skin=glow] #cartbar{
  position:sticky; bottom:calc(94px + env(safe-area-inset-bottom)); margin:0 12px 10px; padding:12px 12px 12px 18px;
  border:1px solid var(--hairline-soft); border-top:1px solid var(--hairline-soft); border-radius:22px;
  background:var(--glass-2); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:var(--shadow-lg);
}
[data-skin=glow] #cartbar .t{font-size:19px;}

/* ------------------------------------------------------------------ cards, rows, lists */
[data-skin=glow] .card,
[data-skin=glow] .stat,
[data-skin=glow] .item-row,
[data-skin=glow] .cart-line,
[data-skin=glow] .staff-card,
[data-skin=glow] .tx-row,
[data-skin=glow] .receipt{
  border-radius:var(--radius); border:1px solid var(--hairline-soft); box-shadow:var(--shadow);
}
[data-skin=glow] .card{padding:18px;}
[data-skin=glow] .stat{padding:14px 16px;}
[data-skin=glow] .stat .v{font-size:24px;}
[data-skin=glow] .stat.hit{background:var(--warn-bg); border-color:transparent;}
[data-skin=glow] .item-row,
[data-skin=glow] .tx-row,
[data-skin=glow] .staff-card{padding:13px 16px;}
[data-skin=glow] .item-row .name{font-size:15px;}
[data-skin=glow] .tx-row .name{font-size:14px;}
[data-skin=glow] .tx-row[data-action],
[data-skin=glow] .item-row[data-action],
[data-skin=glow] .staff-card[data-action]{transition:transform .15s var(--ease), box-shadow .2s;}
[data-skin=glow] .tx-row[data-action]:active,
[data-skin=glow] .item-row[data-action]:active,
[data-skin=glow] .staff-card[data-action]:active{transform:scale(.985);}

[data-skin=glow] .tx-icon{width:40px; height:40px; border-radius:14px;}
[data-skin=glow] .tx-icon.sale{background:var(--sale-bg); color:var(--sale-fg);}
[data-skin=glow] .tx-icon.restock,
[data-skin=glow] .tx-icon.purchase{background:var(--info-bg); color:var(--info-fg);}
[data-skin=glow] .tx-icon.proforma{background:var(--other-bg); color:var(--ink-muted);}
[data-skin=glow] .tx-icon.adjust,
[data-skin=glow] .tx-icon.refund{background:var(--warn-bg); color:var(--warn-fg);}

[data-skin=glow] .staff-card .avatar,
[data-skin=glow] .staff-breakdown-row .avatar{
  border:0; border-radius:50%; color:#F6EFDD; background:linear-gradient(145deg,var(--hero-a),var(--hero-b));
}
[data-skin=glow] .staff-card .avatar{width:42px; height:42px;}
[data-skin=glow] .staff-card[style*="inline-flex"]{background:none; border:0; box-shadow:none; padding:0;}
[data-skin=glow] .staff-card[style*="inline-flex"] .avatar{box-shadow:var(--shadow-lg), 0 0 0 5px var(--accent-soft);}
[data-skin=glow] .staff-card .icon-btn{width:36px; height:36px; border-radius:12px; border:1px solid var(--hairline); background:var(--surface-2);}

[data-skin=glow] .kv{padding:11px 0;}
[data-skin=glow] .kv.total .v{font-size:21px;}

[data-skin=glow] .empty{padding:44px 20px;}
[data-skin=glow] .empty svg{
  width:30px; height:30px; padding:16px; box-sizing:content-box; border-radius:50%; background:var(--surface-2);
  color:var(--ink-muted); opacity:1; margin-bottom:12px;
}

/* ------------------------------------------------------------------ buttons, chips, badges */
[data-skin=glow] .btn{
  min-height:48px; padding:12px 18px; border-radius:var(--r-md); font-size:14.5px; letter-spacing:-.005em;
  transition:transform .15s var(--ease), box-shadow .2s, background .2s, filter .2s;
}
[data-skin=glow] .btn:active{transform:scale(.975);}
[data-skin=glow] .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 8px 18px -8px rgba(var(--acc-rgb),.8);
}
[data-skin=glow] .btn-secondary{
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow);
}
[data-skin=glow] .btn-ghost{background:transparent; border:1px solid var(--hairline); border-radius:var(--r-md);}
[data-skin=glow] .btn-danger{border:1px solid var(--bad-fg); border-radius:var(--r-md); color:var(--bad-fg);}
[data-skin=glow] .btn:disabled{opacity:.5;}
@media (hover:hover){
  [data-skin=glow] .btn-primary:hover{filter:brightness(1.05);}
  [data-skin=glow] .btn-secondary:hover{background:var(--surface-2);}
  [data-skin=glow] .tab:hover{background:var(--surface-2);}
  [data-skin=glow] .tx-row[data-action]:hover,
  [data-skin=glow] .item-row[data-action]:hover{box-shadow:var(--shadow-lg);}
}
[data-skin=glow] .btn svg{width:18px; height:18px;}

[data-skin=glow] .chips{gap:8px; padding:2px 2px 6px;}
[data-skin=glow] .chip{
  padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--hairline); font-size:13px;
  transition:background .2s, color .2s, transform .15s var(--ease);
}
[data-skin=glow] .chip:active{transform:scale(.95);}
[data-skin=glow] .chip.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}

[data-skin=glow] .tag,
[data-skin=glow] .badge{border-radius:var(--r-pill); padding:3px 10px; font-size:11px;}
[data-skin=glow] .tag-admin{background:var(--ink); color:var(--bg);}
[data-skin=glow] .badge-ok{background:var(--other-bg); color:var(--ink-muted);}
[data-skin=glow] .badge-low{background:var(--warn-bg); color:var(--warn-fg);}
[data-skin=glow] .badge-out{background:var(--out-bg); color:var(--out-fg);}
[data-skin=glow] .badge-service{background:var(--vet-bg); color:var(--vet-fg);}
[data-skin=glow] .tag-feed,[data-skin=glow] .tag-grocery{background:var(--other-bg); color:var(--ink-muted);}

/* ------------------------------------------------------------------ forms */
[data-skin=glow] .field{gap:7px;}
[data-skin=glow] .field label{font-size:12.5px;}
[data-skin=glow] .field input,
[data-skin=glow] .field select,
[data-skin=glow] .field textarea{
  min-height:48px; padding:12px 14px; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--surface);
  font-size:15px; transition:border-color .2s, box-shadow .2s;
}
[data-skin=glow] .field input:focus,
[data-skin=glow] .field select:focus,
[data-skin=glow] .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
[data-skin=glow] .searchbar{
  padding:4px 14px; border:1px solid var(--hairline); border-radius:18px; background:var(--surface); box-shadow:var(--shadow);
  transition:border-color .2s, box-shadow .2s;
}
[data-skin=glow] .searchbar:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
[data-skin=glow] .searchbar input{min-height:44px; font-size:15px;}
[data-skin=glow] .searchbar svg{width:19px; height:19px;}
[data-skin=glow] .seg{padding:4px; border-radius:var(--r-md); background:var(--surface-3); gap:4px;}
[data-skin=glow] .seg button{padding:10px 8px; border-radius:11px; transition:background .2s, color .2s, box-shadow .2s;}
[data-skin=glow] .seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
[data-skin=glow] .check-row input{width:20px; height:20px;}
[data-skin=glow] .hint{font-size:12px; line-height:1.45;}

[data-skin=glow] .stepper{padding:4px; border-radius:var(--r-md); background:var(--surface-3);}
[data-skin=glow] .stepper button{width:32px; height:32px; border-radius:10px; background:var(--surface); box-shadow:var(--shadow);}
[data-skin=glow] .stepper .qty{width:28px; font-size:15px;}
[data-skin=glow] .add-btn{
  width:40px; height:40px; border-radius:50%; border:0; background:var(--accent-soft); color:var(--ink);
  transition:transform .15s var(--ease), background .2s;
}
[data-skin=glow] .add-btn:active{transform:scale(.9); background:var(--accent);}
[data-skin=glow] .pin-dots{gap:16px;}
[data-skin=glow] .pin-dots span{width:18px; height:18px; border-radius:50%; transition:background .15s, transform .15s var(--ease);}
[data-skin=glow] .pin-dots span.filled{transform:scale(1.15);}
[data-skin=glow] .wholesale-banner{border-radius:var(--r-md);}
[data-skin=glow] [style*="border-radius:0"]{border-radius:10px !important;}

/* ------------------------------------------------------------------ receipt and modal */
[data-skin=glow] .receipt{border-radius:18px;}
[data-skin=glow] .modal-backdrop{
  background:rgba(8,11,32,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
[data-skin=glow] .modal-card{
  border:1px solid var(--hairline); border-radius:26px; box-shadow:var(--shadow-lg); padding:22px;
}
[data-skin=glow] .modal-card h3{font-size:17px;}

/* ------------------------------------------------------------------ the new Home screen */
[data-skin=glow] .h5{gap:18px;}
[data-skin=glow] .h5-greet{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0;}
[data-skin=glow] .h5-greet > div:first-child{min-width:0; display:flex; flex-direction:column;}
[data-skin=glow] .h5-greet h2{
  font-family:'Bricolage Grotesque',Georgia,serif; font-size:clamp(26px,7.4vw,30px); font-weight:800; letter-spacing:-.028em; line-height:1.06;
  text-wrap:balance;
}
[data-skin=glow] .h5-greet h2 .gr{white-space:nowrap;}
/* the date sits above the big greeting, the way a large title does */
[data-skin=glow] .h5-greet p{order:-1; margin:0 0 6px; font-size:12px; color:var(--ink-muted); font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
[data-skin=glow] .h5-mode{
  flex:none; width:42px; height:42px; padding:0; border-radius:50%; border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow); color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease);
}
[data-skin=glow] .h5-mode:active{transform:rotate(25deg) scale(.9);}
[data-skin=glow] .h5-mode svg{width:20px; height:20px;}
[data-skin=glow] .h5-tools{display:flex; flex:none; gap:8px;}

[data-skin=glow] .h5-hero{
  position:relative; overflow:hidden; border-radius:28px; padding:20px 18px 18px; color:var(--hero-ink); text-align:left;
  background:radial-gradient(120% 100% at 100% 0%, rgba(var(--acc-rgb),.34), transparent 58%),
             radial-gradient(90% 80% at 0% 100%, rgba(120,140,255,.18), transparent 60%),
             linear-gradient(155deg,var(--hero-a),var(--hero-b));
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08);
}
[data-skin=glow] .h5-hero[data-action]{cursor:pointer; transition:transform .2s var(--ease);}
[data-skin=glow] .h5-hero[data-action]:active{transform:scale(.99);}
[data-skin=glow] .h5-hero .top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
[data-skin=glow] .h5-hero .lbl{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hero-muted);}
[data-skin=glow] .h5-hero .big{
  font-family:'Bricolage Grotesque',Georgia,serif; font-weight:800; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(36px,11vw,50px); margin:8px 0 4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
[data-skin=glow] .h5-hero .big.m{font-size:clamp(30px,9vw,42px);}
[data-skin=glow] .h5-hero .big.s{font-size:clamp(26px,8vw,34px);}
[data-skin=glow] .h5-chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:800;
  background:rgba(255,255,255,.13); color:var(--hero-ink); white-space:nowrap;
}
[data-skin=glow] .h5-chip svg{width:14px; height:14px;}
[data-skin=glow] .h5-chip.up{background:rgba(110,214,150,.2); color:#A6EDC2;}
[data-skin=glow] .h5-chip.down{background:rgba(246,196,94,.2); color:#FAD584;}
[data-skin=glow] .h5-meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--hero-muted); font-weight:600;}
[data-skin=glow] .h5-meta b{color:var(--hero-ink); font-weight:800;}
[data-skin=glow] .h5-goal{margin-top:16px;}
[data-skin=glow] .h5-goal .row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:700; color:var(--hero-muted); margin-bottom:7px;}
[data-skin=glow] .h5-goal .row b{color:var(--hero-ink);}
[data-skin=glow] .h5-bar{height:10px; border-radius:var(--r-pill); background:rgba(255,255,255,.15); overflow:hidden;}
[data-skin=glow] .h5-bar > i{
  display:block; height:100%; width:var(--w,0%); border-radius:inherit; transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px rgba(var(--acc-rgb),.6);
}
[data-skin=glow] .h5-bar.done > i{background:linear-gradient(90deg,#4FCB82,#A6EDC2); box-shadow:0 0 14px rgba(110,214,150,.6);}
[data-skin=glow] .h5-week{
  margin-top:18px; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:end; height:104px;
}
[data-skin=glow] .h5-week .col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; height:100%;}
[data-skin=glow] .h5-week .b{
  width:100%; max-width:30px; height:var(--h,4%); min-height:5px; border-radius:9px 9px 5px 5px; background:rgba(255,255,255,.22);
  transform-origin:bottom center;
}
[data-skin=glow] .h5-week .col.today .b{background:linear-gradient(180deg,var(--accent-2),var(--accent)); box-shadow:0 0 16px rgba(var(--acc-rgb),.55);}
[data-skin=glow] .h5-week .col.best:not(.today) .b{background:rgba(255,255,255,.42);}
[data-skin=glow] .h5-week .d{font-size:11px; font-weight:800; color:var(--hero-muted);}
[data-skin=glow] .h5-week .col.today .d{color:var(--hero-ink);}
[data-skin=glow] .h5-weeknote{margin-top:10px; font-size:12px; font-weight:600; color:var(--hero-muted);}
[data-skin=glow] .h5-weeknote b{color:var(--hero-ink);}
[data-skin=glow] .h5-hero.staff .h5-meta{margin-top:6px;}

[data-skin=glow] .h5-chips{display:flex; gap:8px; padding:2px 2px 4px;}
[data-skin=glow] .h5-pill{
  flex:0 1 auto; min-width:0; max-width:100%; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--hairline-soft); box-shadow:var(--shadow); font-size:13px; font-weight:700; color:var(--ink);
}
/* the streak keeps its words; the top-seller chip is the one that gives way */
[data-skin=glow] .h5-pill.flame{flex:0 0 auto;}
[data-skin=glow] .h5-pill.flame > span{overflow:visible; text-overflow:clip;}
[data-skin=glow] .h5-pill svg{width:18px; height:18px; flex:none;}
[data-skin=glow] .h5-pill.flame svg{color:#E8702A;}
[data-skin=glow] .h5-pill.star svg{color:var(--accent);}
[data-skin=glow] .h5-pill > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
[data-skin=glow] .h5-pill small{font-size:12px; font-weight:600; color:var(--ink-muted);}

[data-skin=glow] .h5-quick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
[data-skin=glow] .h5-q{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:92px; padding:12px 4px 11px;
  border:1px solid var(--hairline-soft); border-radius:22px; background:var(--surface); box-shadow:var(--shadow);
  color:var(--ink); font-size:12px; font-weight:800; letter-spacing:-.005em; text-align:center;
  transition:transform .15s var(--ease), box-shadow .2s;
}
[data-skin=glow] .h5-q:active{transform:scale(.95);}
[data-skin=glow] .h5-q .ic{width:42px; height:42px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft);}
[data-skin=glow] .h5-q .ic svg{width:21px; height:21px;}
[data-skin=glow] .h5-q.primary{
  background:linear-gradient(160deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border-color:transparent; box-shadow:var(--glow);
}
[data-skin=glow] .h5-q.primary .ic{background:rgba(255,255,255,.38);}
@media (hover:hover){
  [data-skin=glow] .h5-q:hover{box-shadow:var(--shadow-lg);}
  [data-skin=glow] .h5-need[data-action]:hover,[data-skin=glow] .h5-need[data-h5]:hover{box-shadow:var(--shadow-lg);}
}

[data-skin=glow] .h5-need{
  display:flex; align-items:center; gap:13px; width:100%; padding:14px 14px 14px 14px; border:1px solid var(--hairline-soft);
  border-radius:20px; background:var(--surface); box-shadow:var(--shadow); color:var(--ink); font:inherit; text-align:left;
  transition:transform .15s var(--ease), box-shadow .2s;
}
[data-skin=glow] .h5-need[data-action]:active,[data-skin=glow] .h5-need[data-h5]:active{transform:scale(.985);}
[data-skin=glow] .h5-need .ic{width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none;}
[data-skin=glow] .h5-need .ic svg{width:21px; height:21px;}
[data-skin=glow] .h5-need .ic.warn{background:var(--warn-bg); color:var(--warn-fg);}
[data-skin=glow] .h5-need .ic.bad{background:var(--bad-bg); color:var(--bad-fg);}
[data-skin=glow] .h5-need .ic.info{background:var(--info-bg); color:var(--info-fg);}
[data-skin=glow] .h5-need .ic.good{background:var(--good-bg); color:var(--good-fg);}
[data-skin=glow] .h5-need .tx{flex:1; min-width:0;}
[data-skin=glow] .h5-need .tx b{display:block; font-size:14.5px; font-weight:800; letter-spacing:-.005em;}
[data-skin=glow] .h5-need .tx span{display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
[data-skin=glow] .h5-need .go{flex:none; color:var(--ink-muted); display:flex;}
[data-skin=glow] .h5-need .go svg{width:18px; height:18px; transform:scaleX(-1);}
[data-skin=glow] .h5-need.calm{box-shadow:none; background:transparent; border-style:dashed; border-color:var(--hairline);}

[data-skin=glow] .h5-start{padding:18px; border-radius:24px; background:var(--surface); border:1px solid var(--hairline-soft); box-shadow:var(--shadow);}
[data-skin=glow] .h5-start .hd{display:flex; align-items:center; justify-content:space-between; gap:10px;}
[data-skin=glow] .h5-start h3{font-family:'Bricolage Grotesque',Georgia,serif; font-size:19px; font-weight:800; letter-spacing:-.02em;}
[data-skin=glow] .h5-start .pr{font-size:12px; font-weight:800; color:var(--ink-muted);}
[data-skin=glow] .h5-start .bar{height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; margin:12px 0 4px;}
[data-skin=glow] .h5-start .bar > i{display:block; height:100%; width:var(--w,0%); border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:left center;}
[data-skin=glow] .h5-step{
  display:flex; align-items:center; gap:13px; width:100%; padding:13px 0; border:0; border-top:1px solid var(--hairline-soft);
  background:none; color:var(--ink); font:inherit; text-align:left;
}
[data-skin=glow] .h5-step .n{
  width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--hairline); font-weight:800; font-size:13px; color:var(--ink-muted);
}
[data-skin=glow] .h5-step .n svg{width:16px; height:16px;}
[data-skin=glow] .h5-step.done .n{background:var(--good-bg); border-color:transparent; color:var(--good-fg);}
[data-skin=glow] .h5-step .tx{flex:1; min-width:0;}
[data-skin=glow] .h5-step .tx b{display:block; font-size:14.5px; font-weight:800;}
[data-skin=glow] .h5-step .tx span{display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--ink-muted);}
[data-skin=glow] .h5-step.done .tx b{color:var(--ink-muted); text-decoration:line-through; text-decoration-thickness:1.5px;}
[data-skin=glow] .h5-step .go{flex:none; color:var(--ink-muted); display:flex;}
[data-skin=glow] .h5-step .go svg{width:18px; height:18px; transform:scaleX(-1);}
[data-skin=glow] .h5-link{align-self:center; background:none; border:0; padding:8px 12px; color:var(--ink-muted); font-size:12.5px; font-weight:700; text-decoration:underline; text-underline-offset:3px;}

[data-skin=glow] .h5-sec{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:6px 4px 0;}
[data-skin=glow] .h5-sec .section-title{margin:0;}
[data-skin=glow] .h5-sec button{background:none; border:0; padding:6px 2px; font-size:12.5px; font-weight:800; color:var(--ink-muted);}
[data-skin=glow] .h5-note{text-align:center; padding:0 10px; font-size:12px; color:var(--ink-muted);}

[data-skin=glow] .h5-col{display:contents;}
/* two columns on a laptop */
@media (min-width:880px){
  [data-skin=glow] .h5{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px 22px; align-items:start;}
  [data-skin=glow] .h5 > .h5-greet{grid-column:1 / -1;}
  [data-skin=glow] .h5 > .h5-col{display:flex; flex-direction:column; gap:18px; min-width:0;}
  [data-skin=glow] .h5-hero .big{font-size:56px;}
  [data-skin=glow] .h5-hero .big.m{font-size:46px;}
  [data-skin=glow] .h5-hero .big.s{font-size:38px;}
}
@media (max-width:359.98px){
  [data-skin=glow] .h5-quick{gap:8px;}
  [data-skin=glow] .h5-q{font-size:11px; min-height:86px;}
  [data-skin=glow] .h5-greet h2{font-size:24px;}
  [data-skin=glow] .h5-pill{padding:9px 12px; font-size:12.5px;}
}

/* ------------------------------------------------------------------ laptop and tablet navigation */
@media (min-width:640px) and (max-width:879.98px){
  [data-skin=glow] #topbar{padding:14px 24px;}
  [data-skin=glow] #staffbar{margin:10px 24px 0;}
  [data-skin=glow] #main{padding:16px 24px 40px;}
}
@media (min-width:880px){
  [data-skin=glow] #topbar{padding:16px 28px;}
  [data-skin=glow] #staffbar{margin:12px 28px 0; padding:8px 8px 8px 16px;}
  [data-skin=glow] #main{padding:22px 28px 36px;}
  [data-skin=glow] #main.no-tabbar{padding-bottom:36px;}
  [data-skin=glow] #tabbar{
    position:static; margin:12px 28px 0; padding:6px; gap:4px; border-radius:20px; background:var(--surface);
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--shadow); border:1px solid var(--hairline-soft);
    justify-content:flex-start;
  }
  [data-skin=glow] .tab{flex:none; flex-direction:row; justify-content:flex-start; gap:9px; padding:11px 18px; border-radius:15px; font-size:13px;}
  [data-skin=glow] .tab svg{width:19px; height:19px;}
  [data-skin=glow] .tab.sell{top:auto; margin-top:0; flex:none; margin-left:auto; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink); box-shadow:var(--glow); order:9;}
  [data-skin=glow] .tab.sell.active{background:linear-gradient(180deg,var(--accent-2),var(--accent)); box-shadow:var(--glow), 0 0 0 3px var(--ring);}
  [data-skin=glow] .tab.sell .sellbtn{
    width:auto; height:auto; border:0; border-radius:0; background:none; box-shadow:none; margin:0; color:inherit;
  }
  [data-skin=glow] .tab.sell .sellbtn svg{width:19px; height:19px;}
  [data-skin=glow] .tab.sell:active .sellbtn{transform:none;}
  [data-skin=glow] .tab.sell.active .sellbtn{box-shadow:none;}
  [data-skin=glow] .sell-cart-panel{border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--hairline-soft);}
}

/* ------------------------------------------------------------------ motion */
@keyframes gl-rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes gl-pop{from{opacity:0; transform:scale(.94) translateY(8px);} to{opacity:1; transform:none;}}
@keyframes gl-grow-x{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes gl-grow-y{from{transform:scaleY(0);} to{transform:scaleY(1);}}
@keyframes gl-fade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:no-preference){
  [data-skin=glow] .rise{animation:gl-rise .34s var(--ease) both;}
  [data-skin=glow] .modal-card{animation:gl-pop .24s var(--ease) both;}
  [data-skin=glow] .modal-backdrop{animation:gl-fade .2s ease-out both;}
  [data-skin=glow] .h5.in .h5-bar > i,
  [data-skin=glow] .h5.in .h5-start .bar > i{animation:gl-grow-x .9s var(--ease) .2s both;}
  [data-skin=glow] .h5.in .h5-week .b{animation:gl-grow-y .7s var(--ease) both;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(1) .b{animation-delay:.05s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(2) .b{animation-delay:.1s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(3) .b{animation-delay:.15s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(4) .b{animation-delay:.2s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(5) .b{animation-delay:.25s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(6) .b{animation-delay:.3s;}
  [data-skin=glow] .h5.in .h5-week .col:nth-child(7) .b{animation-delay:.35s;}
}
@media (prefers-reduced-motion:reduce){
  [data-skin=glow] *{transition-duration:.01ms !important;}
}

/* ================================================================== accent colours
   Chosen per device (Admin > Business > Look and feel, or the palette button on Home). Gold is the brand colour and needs no rule.
   Each accent is light enough to carry the dark ink the buttons already use, so the writing on a button stays easy to read. */
html[data-skin=glow][data-accent=sky]{
  --accent:#4C9BFF; --accent-2:#8EC2FF; --accent-ink:#08214A; --accent-soft:rgba(76,155,255,.2);
  --ring:rgba(76,155,255,.45); --glow:0 10px 26px -8px rgba(76,155,255,.7); --acc-rgb:76,155,255;
}
html[data-skin=glow][data-accent=emerald]{
  --accent:#2DBE7E; --accent-2:#7EE0AE; --accent-ink:#052B1A; --accent-soft:rgba(45,190,126,.2);
  --ring:rgba(45,190,126,.45); --glow:0 10px 26px -8px rgba(45,190,126,.7); --acc-rgb:45,190,126;
}
html[data-skin=glow][data-accent=rose]{
  --accent:#F0609A; --accent-2:#F8A3C4; --accent-ink:#46091F; --accent-soft:rgba(240,96,154,.2);
  --ring:rgba(240,96,154,.45); --glow:0 10px 26px -8px rgba(240,96,154,.7); --acc-rgb:240,96,154;
}
html[data-skin=glow][data-accent=violet]{
  --accent:#8F7BFF; --accent-2:#BDB0FF; --accent-ink:#140A45; --accent-soft:rgba(143,123,255,.2);
  --ring:rgba(143,123,255,.45); --glow:0 10px 26px -8px rgba(143,123,255,.7); --acc-rgb:143,123,255;
}
/* a clear keyboard focus on every control, in both looks (zero weight, so any control's own focus style still wins) */
html[data-skin=glow] :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ================================================================== LIQUID GLASS (the new default look)
   Glass is used for the frame of the app only: the top bar, the bottom bar, the cart bar, pop-ups and the Stoka AI panel.
   Cards, rows and every figure sit on frosted surfaces that stay mostly solid, so numbers stay easy to read in bright sunlight.
   (The usual complaint about see-through designs is text that fades into whatever is behind it.) The blur is small and is
   never stacked on top of another blur. Cards and rows carry no blur at all: they sit on a smooth glow, so they do not need it.
   Fallbacks: the Lite setting, a device that asks for less transparency or more contrast, and browsers without backdrop-filter
   all give nearly solid surfaces. */
html[data-material=glass]{
  --gb-rgb:246,241,229; --gc-rgb:255,253,248; --gs-rgb:250,246,237; --gl-rgb:23,27,59; --gh-rgb:255,255,255;
  --a-bar:.74; --a-bar2:.84; --a-card:.8; --a-card2:.62; --a-sheet:.9; --a-line:.09; --a-rim:.9; --a-sheen:.5; --a-acc:.5;
  --g-bar:rgba(var(--gb-rgb),var(--a-bar));
  --g-bar2:rgba(var(--gb-rgb),var(--a-bar2));
  --g-card:rgba(var(--gc-rgb),var(--a-card));
  --g-card2:rgba(var(--gc-rgb),var(--a-card2));
  --g-sheet:rgba(var(--gs-rgb),var(--a-sheet));
  --g-line:rgba(var(--gl-rgb),var(--a-line));
  --g-rim:rgba(var(--gh-rgb),var(--a-rim));
  --g-rim2:rgba(var(--gh-rgb),calc(var(--a-rim) * .55));
  --g-sheen:linear-gradient(180deg,rgba(var(--gh-rgb),var(--a-sheen)),rgba(var(--gh-rgb),0) 46%);
  --g-sheen2:linear-gradient(180deg,rgba(var(--gh-rgb),calc(var(--a-sheen) * .6)),rgba(var(--gh-rgb),0) 42%);
  --g-inset:inset 0 1px 2px rgba(23,27,59,.07);
  --g-orb:rgba(255,255,255,.72);
  --g-blur:blur(14px) saturate(1.6);
  --g-blur-lg:blur(18px) saturate(1.6);
  --aur-2:rgba(132,150,255,.34); --aur-3:rgba(255,150,122,.28); --aur-4:rgba(112,205,190,.28);
}
html[data-material=glass][data-theme=dark]{
  --gb-rgb:14,19,50; --gc-rgb:26,32,72; --gs-rgb:18,23,58; --gl-rgb:255,255,255;
  --a-line:.1; --a-rim:.2; --a-sheen:.13; --a-acc:.24;
  --g-inset:inset 0 1px 2px rgba(0,0,0,.35);
  --g-orb:rgba(255,255,255,.3);
  --aur-2:rgba(92,104,255,.44); --aur-3:rgba(168,85,247,.28); --aur-4:rgba(20,184,166,.16);
}
@media (prefers-color-scheme:dark){
  html[data-material=glass]:not([data-theme=light]){
    --gb-rgb:14,19,50; --gc-rgb:26,32,72; --gs-rgb:18,23,58; --gl-rgb:255,255,255;
    --a-line:.1; --a-rim:.2; --a-sheen:.13; --a-acc:.24;
    --g-inset:inset 0 1px 2px rgba(0,0,0,.35);
    --g-orb:rgba(255,255,255,.3);
    --aur-2:rgba(92,104,255,.44); --aur-3:rgba(168,85,247,.28); --aur-4:rgba(20,184,166,.16);
  }
}

/* the glow behind everything: four soft colours that drift very slowly */
html[data-material=glass] body,
html[data-material=glass] #shell{background:transparent;}
html[data-material=glass] body::before{
  content:""; position:fixed; inset:-12%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48vmax 48vmax at 14% 8%, rgba(var(--acc-rgb),var(--a-acc)), transparent 62%),
    radial-gradient(42vmax 42vmax at 92% 22%, var(--aur-2), transparent 64%),
    radial-gradient(54vmax 54vmax at 80% 96%, var(--aur-3), transparent 62%),
    radial-gradient(46vmax 46vmax at 8% 92%, var(--aur-4), transparent 64%);
}
@keyframes gl-drift{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-3%,2.5%,0) scale(1.06);}}
@media (prefers-reduced-motion:no-preference){
  html[data-material=glass]:not([data-fx=lite]) body::before{animation:gl-drift 28s ease-in-out infinite alternate; will-change:transform;}
}

/* ---- the frame: top bar, bottom bar, cart bar */
html[data-material=glass] #topbar{
  background:var(--g-bar); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border-bottom:1px solid var(--g-line); box-shadow:0 10px 26px -20px rgba(var(--gl-rgb),.45);
}
html[data-material=glass] #tabbar,
html[data-material=glass] #cartbar{
  background:var(--g-sheen), var(--g-bar2); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--g-rim);
}
html[data-material=glass] .tab.active{background:rgba(var(--acc-rgb),.2); box-shadow:inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px rgba(var(--acc-rgb),.28);}
html[data-material=glass] .tab.sell.active{background:none; box-shadow:none;}
@media (max-width:879.98px){
  html[data-material=glass] .tab.sell .sellbtn{
    background:radial-gradient(90% 70% at 30% 14%, rgba(255,255,255,.8), rgba(255,255,255,0) 46%), linear-gradient(150deg,var(--accent-2),var(--accent));
    border:3px solid var(--g-orb);
    box-shadow:var(--glow), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -6px 12px rgba(0,0,0,.09);
  }
  html[data-material=glass] .tab.sell.active .sellbtn{box-shadow:var(--glow), 0 0 0 4px var(--ring), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -6px 12px rgba(0,0,0,.09);}
}
html[data-material=glass] .back-btn{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] #staffbar{background:var(--g-sheen2), var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] #staffbar button{background:var(--g-card2); border-color:var(--g-line);}

/* ---- cards, rows and tiles: frosted, mostly solid, lit along the top edge */
html[data-material=glass] .card,
html[data-material=glass] .stat,
html[data-material=glass] .item-row,
html[data-material=glass] .cart-line,
html[data-material=glass] .staff-card,
html[data-material=glass] .tx-row,
html[data-material=glass] .h5-pill,
html[data-material=glass] .h5-q,
html[data-material=glass] .h5-need,
html[data-material=glass] .h5-start,
html[data-material=glass] .searchbar,
html[data-material=glass] .sell-cart-panel{
  background:var(--g-sheen2), var(--g-card); border-color:var(--g-line);
  box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);
}
html[data-material=glass] .h5-q.primary{box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.7);}
html[data-material=glass] .tx-icon,
html[data-material=glass] .h5-q .ic{box-shadow:inset 0 1px 0 var(--g-rim2);}
html[data-material=glass] .receipt{background:var(--surface);}

/* ---- the Home hero: a deep glass slab with a highlight that follows the finger or the pointer */
html[data-material=glass] .h5-hero{
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(var(--acc-rgb),.36), transparent 56%),
    radial-gradient(100% 90% at 0% 100%, rgba(120,140,255,.28), transparent 62%),
    linear-gradient(155deg, rgba(50,60,152,.95), rgba(17,21,66,.97));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.06);
}
html[data-material=glass] .h5-hero::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px 190px at var(--mx,82%) var(--my,-8%), rgba(255,255,255,.24), rgba(255,255,255,0) 70%);
}
html[data-material=glass] .h5-hero > *{position:relative;}
html[data-material=glass] .h5-mode{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}

/* ---- buttons, chips, fields */
html[data-material=glass] .btn-primary{
  background:radial-gradient(120% 140% at 28% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), linear-gradient(180deg,var(--accent-2),var(--accent));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.06), 0 10px 22px -10px rgba(var(--acc-rgb),.9);
}
html[data-material=glass] .btn-secondary{background:var(--g-sheen2), var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] .btn-ghost{background:var(--g-card2); border-color:var(--g-line);}
html[data-material=glass] .chip{background:var(--g-card2); border-color:var(--g-line); box-shadow:inset 0 1px 0 var(--g-rim2);}
html[data-material=glass] .chip.active{background:var(--ink); border-color:var(--ink); box-shadow:none;}
html[data-material=glass] .field input,
html[data-material=glass] .field select,
html[data-material=glass] .field textarea{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--g-inset);}
html[data-material=glass] .searchbar input{background:transparent; box-shadow:none;}
html[data-material=glass] .seg{background:var(--g-card2); border:1px solid var(--g-line); box-shadow:var(--g-inset);}
html[data-material=glass] .seg button.active{background:var(--g-sheen2), var(--surface); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] .stepper{background:var(--g-card2); border:1px solid var(--g-line); box-shadow:var(--g-inset);}
html[data-material=glass] .stepper button{background:var(--g-sheen2), var(--surface); border:1px solid var(--g-line);}
html[data-material=glass] .add-btn{background:rgba(var(--acc-rgb),.2); box-shadow:inset 0 1px 0 var(--g-rim2);}
html[data-material=glass] .add-btn:active{background:var(--accent);}

/* ---- pop-ups: the page stays sharp but dimmed, and only the card is glass */
html[data-material=glass] .modal-backdrop{background:rgba(8,11,32,.4); -webkit-backdrop-filter:none; backdrop-filter:none;}
html[data-material=glass] .modal-card{
  background:var(--g-sheen), var(--g-sheet); -webkit-backdrop-filter:var(--g-blur-lg); backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-line); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--g-rim);
}

/* ---- laptop: the navigation row scrolls with the page, so it needs no blur */
@media (min-width:880px){
  html[data-material=glass] #tabbar{
    background:var(--g-sheen2), var(--g-card); -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);
  }
  /* on a laptop the header floats as a rounded glass bar, like the navigation row under it */
  html[data-material=glass] #topbar{
    margin:12px 28px 0; top:10px; padding:12px 20px; border-radius:22px;
    border:1px solid var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);
  }
}

/* ================================================================== Lite, less transparency, more contrast, no blur support
   Same look, nearly solid, no blur and no moving glow. Lite is chosen in Look and feel; Auto picks it on phones that report little
   memory; a device that asks for less transparency or more contrast gets it too. */
html[data-fx=lite][data-material=glass]{
  --a-bar:.97; --a-bar2:.98; --a-card:.94; --a-card2:.88; --a-sheet:.98; --a-sheen:.25;
  --g-blur:none; --g-blur-lg:none;
}
html[data-fx=lite] #topbar,
html[data-fx=lite] #tabbar,
html[data-fx=lite] #cartbar,
html[data-fx=lite] .modal-backdrop,
html[data-fx=lite] .modal-card,
html[data-fx=lite] .hp-panel,
html[data-fx=lite] .hp-coach,
html[data-fx=lite] .hp-toast{-webkit-backdrop-filter:none; backdrop-filter:none;}
html[data-fx=lite]:not([data-material=glass]) #topbar,
html[data-fx=lite]:not([data-material=glass]) #cartbar,
html[data-fx=lite]:not([data-material=glass]) #tabbar{background:var(--surface);}
html[data-fx=lite][data-material=glass] body::before{animation:none; will-change:auto;}
@media (prefers-reduced-transparency:reduce){
  html[data-material=glass]{--a-bar:.97; --a-bar2:.98; --a-card:.94; --a-card2:.88; --a-sheet:.98; --a-sheen:.25; --g-blur:none; --g-blur-lg:none;}
  html[data-skin=glow] #topbar,html[data-skin=glow] #tabbar,html[data-skin=glow] #cartbar,html[data-skin=glow] .modal-backdrop,
  html[data-skin=glow] .modal-card,html[data-skin=glow] .hp-panel,html[data-skin=glow] .hp-coach{-webkit-backdrop-filter:none; backdrop-filter:none;}
}
@media (prefers-contrast:more){
  html[data-material=glass]{--a-bar:.98; --a-bar2:.99; --a-card:.97; --a-card2:.95; --a-sheet:.99; --a-line:.5; --a-sheen:.2;}
  html[data-material=glass][data-theme=dark]{--a-line:.55;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-material=glass]{--a-bar:.97; --a-bar2:.98; --a-card:.94; --a-card2:.88; --a-sheet:.98;}
}

/* ================================================================== the titanium edge (what gives Liquid Titanium its name)
   A thin band that runs from white to cool silver and back around the biggest pieces of glass, like the polished edge of a phone
   frame; a silver ring on the Sell button; a silver "Titanium" accent. Phones whose browser cannot draw the band simply do not get it. */
html[data-skin=glow][data-accent=titanium]{
  --accent:#AEB8CC; --accent-2:#D9DFEA; --accent-ink:#141A2E; --accent-soft:rgba(174,184,204,.3);
  --ring:rgba(150,162,188,.5); --glow:0 10px 26px -8px rgba(150,162,188,.75); --acc-rgb:150,162,188;
}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  html[data-material=glass] #tabbar::after,
  html[data-material=glass] #cartbar::after,
  html[data-material=glass] .h5-hero::after,
  html[data-material=glass] .hp-panel::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3;
    background:conic-gradient(from 200deg, rgba(255,255,255,.95), rgba(176,186,208,.6) 18%, rgba(255,255,255,.7) 36%, rgba(146,158,186,.55) 56%, rgba(255,255,255,.9) 76%, rgba(176,186,208,.6) 90%, rgba(255,255,255,.95));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  html[data-material=glass][data-theme=dark] #tabbar::after,
  html[data-material=glass][data-theme=dark] #cartbar::after,
  html[data-material=glass][data-theme=dark] .h5-hero::after,
  html[data-material=glass][data-theme=dark] .hp-panel::after{opacity:.55;}
}
@media (prefers-color-scheme:dark){
  @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    html[data-material=glass]:not([data-theme=light]) #tabbar::after,
    html[data-material=glass]:not([data-theme=light]) #cartbar::after,
    html[data-material=glass]:not([data-theme=light]) .h5-hero::after,
    html[data-material=glass]:not([data-theme=light]) .hp-panel::after{opacity:.55;}
  }
}
@media (min-width:880px){
  html[data-material=glass] #tabbar{position:relative;}
}
/* the Sell button: gold glass inside a silver ring */
@media (max-width:879.98px){
  html[data-material=glass] .tab.sell .sellbtn{
    border:3px solid transparent;
    background:
      radial-gradient(90% 70% at 30% 14%, rgba(255,255,255,.8), rgba(255,255,255,0) 46%) padding-box,
      linear-gradient(150deg,var(--accent-2),var(--accent)) padding-box,
      conic-gradient(from 210deg, #F7F9FC, #A9B2C6, #FFFFFF, #8993AA, #EEF1F7, #A9B2C6, #F7F9FC) border-box;
  }
}
/* smooth "squircle" corners on browsers that can draw them (recent Chrome and Samsung Internet) */
@supports (corner-shape:squircle){
  html[data-material=glass] :is(.card,.stat,.item-row,.cart-line,.staff-card,.tx-row,.h5-hero,.h5-q,.h5-need,.h5-start,.h5-pill,.h5-greet .h5-mode,.btn,.chip,.seg,.searchbar,
    .field input,.field select,.field textarea,.modal-card,.hp-panel,.hp-card,.hp-tabs,.hp-chip,.lf-panel,.lf-d,#tabbar,#cartbar,#staffbar,.tx-icon,.h5-q .ic,.receipt){corner-shape:squircle;}
}

/* ================================================================== Look and feel: the card in Admin > Business and the sheet from Home
   Drawn the same way in every look (Classic too), so a person can always get back. */
.lf{display:flex; flex-direction:column; gap:16px;}
.lf-designs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.lf-d{
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; padding:8px 8px 11px; text-align:left;
  border:2px solid var(--hairline); border-radius:var(--r-md,0); background:var(--surface); color:var(--ink); font:inherit;
}
.lf-d b{font-size:12.5px; font-weight:800; letter-spacing:-.005em; line-height:1.2;}
.lf-d small{font-size:10.5px; line-height:1.3; font-weight:600; color:var(--ink-muted);}
.lf-d.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring, rgba(229,163,42,.35));}
.lf-d.on::after{
  content:""; position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171B3B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.lf-prev{position:relative; display:block; height:64px; border-radius:calc(var(--r-sm,0px) + 4px); overflow:hidden; border:1px solid rgba(0,0,0,.1);}
.lf-prev i{position:absolute; display:block;}
.lf-prev i:nth-child(1){left:6px; right:6px; top:6px; height:11px;}
.lf-prev i:nth-child(2){left:6px; right:6px; top:22px; height:22px;}
.lf-prev i:nth-child(3){left:calc(50% - 9px); bottom:5px; width:18px; height:18px;}
/* Liquid Titanium: colour glow, glass bars, silver edge */
.lf-prev.liquid{background:radial-gradient(70% 90% at 10% 0%, rgba(246,196,94,.8), transparent 60%), radial-gradient(60% 80% at 100% 25%, rgba(132,150,255,.6), transparent 62%), radial-gradient(70% 80% at 70% 115%, rgba(255,150,122,.5), transparent 60%), #EFE7D6;}
.lf-prev.liquid i:nth-child(1){border-radius:7px; background:rgba(255,255,255,.66); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(170,180,205,.65);}
.lf-prev.liquid i:nth-child(2){border-radius:10px; background:rgba(255,255,255,.76); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(170,180,205,.6), 0 3px 8px rgba(23,27,59,.12);}
.lf-prev.liquid i:nth-child(3){border-radius:50%; background:linear-gradient(150deg,#F6C45E,#E8A62B); box-shadow:0 0 0 2px #D3D9E6, 0 3px 8px rgba(232,166,43,.6);}
.lf-prev.liquid.dk{background:radial-gradient(70% 90% at 10% 0%, rgba(92,104,255,.6), transparent 60%), radial-gradient(60% 80% at 100% 25%, rgba(242,179,62,.3), transparent 62%), radial-gradient(70% 80% at 70% 115%, rgba(168,85,247,.42), transparent 60%), #0A0E27;}
.lf-prev.liquid.dk i:nth-child(1){background:rgba(26,32,72,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(170,180,205,.4);}
.lf-prev.liquid.dk i:nth-child(2){background:rgba(26,32,72,.88); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(170,180,205,.34), 0 3px 8px rgba(0,0,0,.4);}
/* Soft: calm, solid, rounded */
.lf-prev.glow{background:#EFE7D6;}
.lf-prev.glow i:nth-child(1){border-radius:7px; background:#FCF9F1; box-shadow:0 2px 5px rgba(23,27,59,.1);}
.lf-prev.glow i:nth-child(2){border-radius:10px; background:#FCF9F1; box-shadow:0 3px 8px rgba(23,27,59,.12);}
.lf-prev.glow i:nth-child(3){border-radius:50%; background:linear-gradient(150deg,#F6C45E,#E8A62B); box-shadow:0 3px 8px rgba(232,166,43,.6);}
.lf-prev.glow.dk{background:#0A0E27;}
.lf-prev.glow.dk i:nth-child(1),.lf-prev.glow.dk i:nth-child(2){background:#141939; box-shadow:0 3px 8px rgba(0,0,0,.5);}
/* Classic: square corners, hard shadow */
.lf-prev.classic{background:#EAE0CB; border-radius:0;}
.lf-prev.classic i:nth-child(1){background:#F3EBDA; border:2px solid #D9CBAE;}
.lf-prev.classic i:nth-child(2){right:9px; background:#F3EBDA; border:2px solid #D9CBAE; box-shadow:3px 3px 0 #D9CBAE;}
.lf-prev.classic i:nth-child(3){left:calc(50% - 8px); width:16px; height:16px; background:#E5A32A; border:2px solid #191D3C;}
.lf-prev.classic.dk{background:#0E1230;}
.lf-prev.classic.dk i:nth-child(1),.lf-prev.classic.dk i:nth-child(2){background:#191D3C; border-color:#35407A; box-shadow:none;}
.lf-sw{display:flex; flex-wrap:wrap; gap:12px;}
.lf-s{
  position:relative; width:42px; height:42px; padding:0; border-radius:50%; border:2px solid rgba(255,255,255,.75);
  background:linear-gradient(145deg,var(--sw2),var(--sw)); box-shadow:0 2px 6px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.6);
}
.lf-s.on{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink);}
.lf-s.on::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171B3B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/18px no-repeat;
}
.lf-sheet{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center;}
.lf-scrim{position:absolute; inset:0; background:rgba(8,11,32,.5);}
.lf-panel{
  position:relative; width:100%; max-width:520px; max-height:90vh; max-height:90dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(20px + env(safe-area-inset-bottom)); background:var(--bg); color:var(--ink);
  border-radius:28px 28px 0 0; box-shadow:0 -12px 50px -12px rgba(8,11,32,.55); outline:none;
}
.lf-panel::before{content:""; display:block; width:40px; height:5px; border-radius:3px; background:var(--ink); opacity:.16; margin:-8px auto 12px;}
.lf-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.lf-head h3{font-size:19px; letter-spacing:-.02em;}
.lf-done{min-height:40px; padding:0 20px; border:0; border-radius:var(--r-pill,0); background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:14px;}
.lf-panel .card{box-shadow:none;}
@media (min-width:640px){
  .lf-sheet{align-items:center;}
  .lf-panel{border-radius:28px; padding-bottom:20px;}
  .lf-panel::before{display:none;}
}
@keyframes gl-sheet{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:no-preference){
  .lf-panel{animation:gl-sheet .3s cubic-bezier(.2,.75,.25,1) both;}
  .lf-scrim{animation:gl-fade .2s ease-out both;}
}
html[data-material=glass] .lf-scrim{background:rgba(8,11,32,.4);}
html[data-material=glass] .lf-panel{
  background:var(--g-sheen), var(--g-sheet); -webkit-backdrop-filter:var(--g-blur-lg); backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-line); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--g-rim);
}
html[data-skin=glow] .lf-d{border-radius:16px;}
html[data-skin=glow] .lf-d.on{border-color:var(--accent);}
html[data-material=glass] .lf-d{background:var(--g-sheen2), var(--g-card); border-color:var(--g-line);}
html[data-material=glass] .lf-d.on{border-color:var(--accent);}

/* ================================================================== Stoka AI (the guide panel)
   Same panel, same words and same buttons as before, drawn as a bottom sheet (a floating drawer on a laptop) with chat bubbles, a
   glowing assistant orb, a pill-shaped question bar and soft cards. Liquid Titanium adds the glass; Soft keeps solid surfaces.
   Cards inside the glass panel carry no blur of their own, so blur is never stacked. */
html[data-skin=glow] .hp-scrim{background:rgba(8,11,32,.5);}
html[data-skin=glow] .hp-panel{
  border:0; border-radius:30px 30px 0 0; background:var(--bg); overflow:hidden; box-shadow:0 -14px 60px -14px rgba(8,11,32,.55);
}
html[data-skin=glow] .hp-panel::before{
  content:""; position:absolute; top:7px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px;
  background:var(--ink); opacity:.16; z-index:2; pointer-events:none;
}
@media (min-width:880px){
  html[data-skin=glow] .hp-panel{top:12px; right:12px; bottom:12px; height:auto; border:0; border-radius:30px;}
  html[data-skin=glow] .hp-panel::before{display:none;}
}
html[data-skin=glow] .hp-head{padding:20px 16px 8px; border-bottom:0; gap:12px;}
/* the Stoka AI logo beside the title (the logo itself is drawn by help.js, in every look) */
html[data-skin=glow] .hp-ttl{padding-left:48px; min-height:40px;}
html[data-skin=glow] .hp-ttl::before{width:40px; height:40px; margin-top:-20px; filter:drop-shadow(0 6px 10px rgba(var(--acc-rgb),.45));}
html[data-skin=glow] .hp-head h2{font-family:'Bricolage Grotesque',Georgia,serif; font-size:21px; font-weight:800; letter-spacing:-.025em; line-height:1.1;}
html[data-skin=glow] .hp-sub{font-size:12px; margin-top:2px;}
html[data-skin=glow] .hp-x{width:42px; height:42px; border:1px solid var(--hairline); border-radius:50%; background:var(--surface); box-shadow:var(--shadow);}
html[data-skin=glow] .hp-x:active{transform:scale(.92);}

html[data-skin=glow] .hp-tabs{margin:6px 16px 4px; padding:4px; gap:4px; border:0; border-radius:18px; background:var(--surface-3);}
html[data-skin=glow] .hp-tab{min-height:40px; border:0; border-radius:14px; font-size:13.5px; transition:background .2s, color .2s, box-shadow .2s;}
html[data-skin=glow] .hp-tab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
html[data-skin=glow] .hp-body{padding:12px 16px 18px;}

/* answers in the chosen language, and the questions to tap */
html[data-skin=glow] .hp-chips{gap:8px;}
html[data-skin=glow] .hp-chip{
  min-height:40px; padding:9px 14px; border:1px solid var(--hairline); border-radius:16px; background:var(--surface); box-shadow:var(--shadow);
  font-weight:700; transition:transform .15s var(--ease), background .2s;
}
html[data-skin=glow] .hp-chip:active{transform:scale(.97);}
html[data-skin=glow] .hp-chip[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 16px -8px rgba(var(--acc-rgb),.85);
}
html[data-skin=glow] .hp-chips[aria-label="Language of the answer"]{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:3px 16px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
html[data-skin=glow] .hp-chips[aria-label="Language of the answer"]::-webkit-scrollbar{display:none;}
html[data-skin=glow] .hp-chips[aria-label="Language of the answer"] .hp-chip{flex:none; white-space:nowrap;}
html[data-skin=glow] .hp-h{margin:20px 4px 10px; letter-spacing:.09em;}

/* cards and the welcome */
html[data-skin=glow] .hp-card{padding:16px; border:1px solid var(--hairline-soft); border-radius:22px; background:var(--surface); box-shadow:var(--shadow);}
html[data-skin=glow] .hp-card.hp-intro{background:radial-gradient(120% 90% at 0% 0%, rgba(var(--acc-rgb),.2), transparent 60%), var(--surface);}
html[data-skin=glow] .hp-intro h3{font-family:'Bricolage Grotesque',Georgia,serif; font-size:21px; font-weight:800; letter-spacing:-.025em; margin-bottom:6px;}
html[data-skin=glow] .hp-card h3,html[data-skin=glow] .hp-card h4{font-weight:800; letter-spacing:-.01em;}
html[data-skin=glow] .hp-steps{list-style:none; padding:0; margin:14px 0 0; gap:12px; counter-reset:hps;}
html[data-skin=glow] .hp-steps > li{counter-increment:hps; position:relative; padding-left:38px; min-height:26px;}
html[data-skin=glow] .hp-steps > li::before{
  content:counter(hps); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; background:rgba(var(--acc-rgb),.24); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-skin=glow] .hp-lbl{padding:1px 7px; border:1px solid var(--hairline); border-radius:8px; background:var(--surface-3); box-shadow:0 1px 0 var(--hairline);}
html[data-skin=glow] .hp-tips{padding:12px 14px; border-radius:16px; background:var(--surface-2);}
html[data-skin=glow] .hp-note{font-size:12.5px;}
html[data-skin=glow] .hp-tag{border-radius:var(--r-pill); padding:2px 9px;}

/* the conversation: your question is a coloured bubble on the right, the answer is a soft bubble beside the orb */
html[data-skin=glow] .hp-q{
  margin:20px 0 12px auto; max-width:86%; padding:11px 16px; border-radius:22px 22px 6px 22px; font-size:14.5px; font-weight:700; line-height:1.4;
  background:linear-gradient(160deg,var(--accent-2),var(--accent)); color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 20px -10px rgba(var(--acc-rgb),.9);
}
html[data-skin=glow] .hp-a{position:relative; padding-left:36px; gap:10px;}
html[data-skin=glow] .hp-a::before{
  content:""; position:absolute; left:0; top:2px; width:26px; height:26px;
  background:url("/stoka-ai.svg") center/contain no-repeat; filter:drop-shadow(0 4px 6px rgba(23,27,59,.28));
}
html[data-skin=glow] .hp-a > .hp-card{border-radius:8px 22px 22px 22px;}
@media (prefers-reduced-motion:no-preference){
  html[data-skin=glow] .hp-q.hp-new{animation:gl-pop .28s var(--ease) both;}
  html[data-skin=glow] .hp-a.hp-new{animation:gl-pop .34s var(--ease) .12s both;}
}

/* waiting for the answer: a small ring of colour, and the line beside it */
html[data-skin=glow] .hp-busy{padding:11px 15px; border:1px solid var(--hairline-soft); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); font-size:13px;}
html[data-skin=glow] .hp-spin{
  width:20px; height:20px; border:0; background:conic-gradient(from 0deg, transparent 0, var(--accent) 30%, #8B9BFF 62%, #7FE0D0 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

/* buttons */
html[data-skin=glow] .hp-btn{
  min-height:44px; padding:0 18px; border:1px solid var(--hairline); border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow);
  font-weight:800; transition:transform .15s var(--ease), box-shadow .2s;
}
html[data-skin=glow] .hp-btn:active{transform:scale(.96);}
html[data-skin=glow] .hp-btn.hp-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -8px rgba(var(--acc-rgb),.85);
}
html[data-skin=glow] .hp-btn.hp-ghost{background:transparent; box-shadow:none;}
html[data-skin=glow] .hp-btn.hp-sm{min-height:38px; padding:0 14px;}
html[data-skin=glow] .hp-wa{border:1px solid var(--hairline); border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow);}

/* the question bar */
html[data-skin=glow] .hp-composer{padding:8px 14px 6px; border-top:0; background:transparent; align-items:center; gap:8px;}
html[data-skin=glow] .hp-composer input{
  min-height:50px; padding:0 20px; border:1px solid var(--hairline); border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow); font-size:15.5px;
}
html[data-skin=glow] .hp-composer input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
html[data-skin=glow] .hp-composer .hp-btn{width:50px; min-width:50px; height:50px; min-height:50px; padding:0; border-radius:50%;}
html[data-skin=glow] .hp-foot{padding:2px 18px calc(10px + env(safe-area-inset-bottom)); border-top:0; background:transparent;}

/* Learn */
html[data-skin=glow] .hp-link{min-height:54px; padding:12px 16px; border:1px solid var(--hairline-soft); border-radius:18px; box-shadow:var(--shadow); transition:transform .15s var(--ease);}
html[data-skin=glow] .hp-link:active{transform:scale(.985);}
html[data-skin=glow] .hp-prog{height:10px; border:0; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
html[data-skin=glow] .hp-prog i{border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2));}

/* Check */
html[data-skin=glow] .hp-item{padding:14px; border:1px solid var(--hairline-soft); border-radius:20px; box-shadow:var(--shadow);}
html[data-skin=glow] .hp-tick{border:2px solid var(--hairline); border-radius:50%; background:transparent;}
html[data-skin=glow] .hp-item.hp-done .hp-tick{background:var(--good-bg); color:var(--good-fg); border-color:transparent;}
html[data-skin=glow] .hp-find,
html[data-skin=glow] .hp-flag,
html[data-skin=glow] .hp-sw{border:1px solid var(--hairline-soft); border-radius:18px; box-shadow:var(--shadow);}
html[data-skin=glow] .hp-pill{border-radius:var(--r-pill); padding:3px 9px;}

/* Sales */
html[data-skin=glow] .hp-tiles{gap:12px;}
html[data-skin=glow] .hp-tile{padding:14px; border:1px solid var(--hairline-soft); border-radius:20px; box-shadow:var(--shadow);}
html[data-skin=glow] .hp-tile b{font-size:21px; letter-spacing:-.02em;}
html[data-skin=glow] .hp-row{padding:12px 14px; border:1px solid var(--hairline-soft); border-radius:18px; box-shadow:var(--shadow); transition:transform .15s var(--ease);}
html[data-skin=glow] .hp-row[aria-pressed="true"]{border-color:var(--accent);}
html[data-skin=glow] button.hp-row:active{transform:scale(.985);}
html[data-skin=glow] .hp-meter{height:8px; border:0; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
html[data-skin=glow] .hp-meter i{border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2));}
html[data-skin=glow] .hp-bar{fill:var(--ink); opacity:.78; rx:3px;}
html[data-skin=glow] .hp-bar.hp-hi{fill:var(--accent); opacity:1; stroke:none;}
html[data-skin=glow] .hp-field select,
html[data-skin=glow] .hp-field input[type=date],
html[data-skin=glow] .hp-field input[type=password],
html[data-skin=glow] .hp-field input[type=text]{min-height:46px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface);}
html[data-skin=glow] .hp-field select:focus,
html[data-skin=glow] .hp-field input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
html[data-skin=glow] .hp-err,
html[data-skin=glow] .hp-ok{border-width:1px; border-radius:16px;}
html[data-skin=glow] .hp-rc{border-radius:22px; border:1px solid var(--hairline-soft);}

/* the guided tour that points at the buttons on the screen */
html[data-skin=glow] .hp-ring{border:3px solid var(--accent); border-radius:16px; outline:0; box-shadow:0 0 0 9999px rgba(8,11,32,.58), 0 0 28px rgba(var(--acc-rgb),.75);}
html[data-skin=glow] .hp-coach{padding:16px; border:1px solid var(--hairline-soft); border-radius:22px; box-shadow:var(--shadow-lg);}
html[data-skin=glow] .hp-toast{border-radius:var(--r-pill); padding:12px 20px; background:rgba(23,27,59,.94); box-shadow:var(--shadow-lg);}

/* ---- Liquid Titanium: the panel and the tour card are glass, everything inside stays flat */
html[data-material=glass] .hp-scrim{background:rgba(8,11,32,.4);}
html[data-material=glass] .hp-panel{
  background:var(--g-sheen), var(--g-sheet); -webkit-backdrop-filter:var(--g-blur-lg); backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-line); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--g-rim);
}
html[data-material=glass] .hp-x{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] .hp-tabs{background:var(--g-card2); border:1px solid var(--g-line); box-shadow:var(--g-inset);}
html[data-material=glass] .hp-tab[aria-selected="true"]{background:var(--g-sheen2), var(--surface); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] .hp-chip,
html[data-material=glass] .hp-btn,
html[data-material=glass] .hp-wa,
html[data-material=glass] .hp-link,
html[data-material=glass] .hp-row,
html[data-material=glass] .hp-item,
html[data-material=glass] .hp-find,
html[data-material=glass] .hp-flag,
html[data-material=glass] .hp-sw,
html[data-material=glass] .hp-tile,
html[data-material=glass] .hp-busy,
html[data-material=glass] .hp-card{background:var(--g-sheen2), var(--g-card); border-color:var(--g-line); box-shadow:var(--shadow), inset 0 1px 0 var(--g-rim);}
html[data-material=glass] .hp-card.hp-intro{background:radial-gradient(120% 90% at 0% 0%, rgba(var(--acc-rgb),.2), transparent 60%), var(--g-sheen2), var(--g-card);}
html[data-material=glass] .hp-chip[aria-pressed="true"],
html[data-material=glass] .hp-btn.hp-primary{
  background:radial-gradient(120% 140% at 28% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 52%), linear-gradient(180deg,var(--accent-2),var(--accent)); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -8px rgba(var(--acc-rgb),.85);
}
html[data-material=glass] .hp-btn.hp-ghost{background:transparent; box-shadow:none;}
html[data-material=glass] .hp-composer input{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--g-inset), inset 0 1px 0 var(--g-rim2);}
html[data-material=glass] .hp-composer input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);}
html[data-material=glass] .hp-field select,
html[data-material=glass] .hp-field input[type=date],
html[data-material=glass] .hp-field input[type=password],
html[data-material=glass] .hp-field input[type=text]{background:var(--g-card); border-color:var(--g-line); box-shadow:var(--g-inset);}
html[data-material=glass] .hp-tips{background:rgba(var(--gl-rgb),.06);}
html[data-material=glass] .hp-lbl,
html[data-material=glass] .hp-tag,
html[data-material=glass] .hp-pill{background:rgba(var(--gl-rgb),.07);}
html[data-material=glass] .hp-pill.hp-alert{background:var(--warn-fg);}
html[data-material=glass] .hp-prog,
html[data-material=glass] .hp-meter{background:rgba(var(--gl-rgb),.1);}
html[data-material=glass] .hp-coach{
  background:var(--g-sheen), var(--g-sheet); -webkit-backdrop-filter:var(--g-blur-lg); backdrop-filter:var(--g-blur-lg);
  border-color:var(--g-line); box-shadow:var(--shadow-lg), inset 0 1px 0 var(--g-rim);
}

/* ------------------------------------------------------------------ printing keeps its own plain look */
@media print{
  [data-skin=glow] *{box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; animation:none !important;}
  html[data-material=glass] body::before,html[data-material=glass] *::after{display:none !important;}
  .lf-sheet{display:none !important;}
}