/* ══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — a trial theme, scoped entirely under body.liquid-mode, so
   this file is inert until that class is on <body>. Offered on the dashboard
   only (2026-09-13); a device that saved it opens every other page in
   Neumorphic — see current() in theme-switch.js.

   The surfaces themselves are drawn by liquid.js with the quick-liquid
   engine (vendor/quick-liquid): each card becomes a lens that bends the
   ground behind it, so every glassed surface goes transparent here and the
   lens is what you see.

   The ground is the library's own "Type" playground scene in dark
   appearance, copied from its material-lab.css without the type: two deep
   teals split on a diagonal. The lens on top is their "regular" material in
   dark appearance — smoke over the colour, light type on it.

   Same constraint as auroraui.css: dark.css is linked from topbar.php INSIDE
   <body>, after this sheet, so surface rules carry !important or lose on
   source order.
   ══════════════════════════════════════════════════════════════════════════ */

/* Painted before the JS runs, from the data-boot-theme attribute the anti-flash
   guard stamps on <html>, so a reload does not flash the plain page. */
html[data-boot-theme="liquid"] { background: #eff2ea; }

body.liquid-mode {
  --lq-ink:   #143237;                       /* type on a lens — their lens colour */
  --lq-mid:   rgba(20, 50, 55, 0.82);
  --lq-soft:  rgba(20, 50, 55, 0.62);
  --lq-shade: none;
  --glass-bg:     rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: rgba(23, 54, 59, 0.16);
  background: #eff2ea !important;
  color: var(--lq-ink);
}

/* ── The scene ────────────────────────────────────────────────────────────
   The library's "Type" playground scene in light appearance, with the type
   left out: two soft sage-greys meeting on a 112° diagonal at 50% of the
   width, and a hairline of ink where they meet. Fixed, so the split stays
   put under a scrolling page. Values are theirs, from material-lab.css. */
body.liquid-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* A pool of the second colour spilling in from the top-left corner over
     the split — the same mint-grey as the right side, so it reads as the
     one colour reaching across rather than a third one. */
  /* And over both, a faint band of hexagon cells, outlines, dashed boxes
     and arrow strings in the same sage and teal — liquid-split.svg, drawn
     by tools/liquid-splitgen.pl, transparent everywhere it is not drawing. */
  background:
    url(liquid-split.svg?v=3) center / cover no-repeat,
    radial-gradient(75% 65% at 0% 0%, #dce8e1 0%, rgba(220, 232, 225, 0.85) 25%, rgba(220, 232, 225, 0) 62%),
    linear-gradient(112deg, #eff2ea 0 50%, #dce8e1 50%);
}
body.liquid-mode::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  z-index: -1;
  pointer-events: none;
  /* The seam: the green of the right-hand side, a shade deeper, rather than
     the ink — and faded out under the top bar, where a dark line through
     the glass read as a crack. */
  background: linear-gradient(to bottom,
    rgba(178, 207, 194, 0) 0, rgba(178, 207, 194, 0) 64px,
    rgba(178, 207, 194, 0.75) 160px, rgba(178, 207, 194, 0.75) 100%);
  transform: skewX(-22deg);
  transform-origin: top;
}

/* ── Scene two: the hexagon drawing ───────────────────────────────────────
   liquid-hex.svg, drawn for this theme by tools/liquid-hexgen.pl (run it
   again for the same picture; change its seed for a new arrangement): a
   honeycombs only — a lattice of soft grey cells, dense at the left and
   thinning toward the bright centre-right of the ground, with soft blue
   and soft red cells scattered for accent. Chosen from the Scene control in
   the pill; the split scene above stays as the other choice. The seam
   hairline belongs to the split only. */
body.liquid-mode.lq-scene-hex::before {
  background: #eef0f2 url(liquid-hex.svg?v=6) center / cover no-repeat;
}
body.liquid-mode.lq-scene-hex::after { display: none; }

/* ── Scene four: the tech drawing ─────────────────────────────────────────
   liquid-tech.svg, drawn by tools/liquid-techgen.pl: a light grey ground
   with a bright centre, stepped bands in three greys, a dark block on the
   right, a ring-and-gear form with a curve of glowing beads on the left,
   and thin white lines that jog at 45°, engraved into the surface. */
body.liquid-mode.lq-scene-tech::before {
  background: #eef0f3 url(liquid-tech.svg?v=1) center / cover no-repeat;
}
body.liquid-mode.lq-scene-tech::after { display: none; }

/* ── Scene three: a photo ─────────────────────────────────────────────────
   liquid-photo.png at the site root, whatever Luis drops there. The current
   file is a watermarked Dreamstime comp put up 2026-09-13 to judge before
   buying: replace it with the licensed download or remove it. "cover" fills the viewport on any
   screen shape, cropping the long side; the colour behind it is the
   photo's own edge tone, so a frame the image has not painted yet, or a
   missing file, shows the same grey rather than a hole. */
body.liquid-mode.lq-scene-photo::before {
  /* contain, not cover: the picture is square and the screen is wide, so it
     is shown whole at the window's height, centred, with its own white
     filling the sides — rather than blown up and cropped top and bottom. */
  background: #f7f8f9 url(liquid-photo.png?v=4) center / contain no-repeat;
}
body.liquid-mode.lq-scene-photo::after { display: none; }

/* ── The glassed surfaces ─────────────────────────────────────────────────
   liquid.js puts the engine on these. The engine draws frost, tint and rim
   in layers of its own beneath the content, so the host must be see-through
   and must not filter, blur or fade itself: a backdrop-filter or an opacity
   on the host is a wall between the lens and the page behind it. The fade-up
   entrance animation is one such opacity, so it goes too. The radius is the
   playground card's 44px; the engine reads it off the element. */
body.liquid-mode .card,
body.liquid-mode .card-compact,
body.liquid-mode .card-wide,
body.liquid-mode .table-wrap,
body.liquid-mode .hero-card {
  background: transparent !important;
  /* No border and no stylesheet shadow: the engine's rim light draws the
     edge and its elevation draws an appearance-aware shadow, both inline.
     A shadow forced from here would beat the inline one and double up. */
  border: 0 !important;
  border-radius: 44px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
  color: var(--lq-ink);
  text-shadow: var(--lq-shade);
}
body.liquid-mode .card:hover,
body.liquid-mode .card-compact:hover,
body.liquid-mode .card-wide:hover {
  transform: translateY(-2px);
}
/* The repairs checkout's two panels — the product shelf and the customer/
   cart card — are lenses too, on their own 24px radius. The part cards on
   the shelf are left exactly as they are: their white-to-rose gradient is
   the stock signal, and they sit on the lens rather than being one. */
body.liquid-mode .pos-toolbar,
body.liquid-mode .glass-card-cus {
  background: transparent !important;
  border: 0 !important;
  border-radius: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* ── The hero panel, relit ────────────────────────────────────────────────
   In the base sheets it is a dark design: cream type (#F4EFE9), a warm grey
   for captions (#8B8075), white hairlines, and charts drawn in the same
   cream. Here it is the same lens as every other card, so all of that is
   turned to the theme's inks — the same job neumorphic.css does for its
   light card, with the same selectors. Accent colours keep their meaning
   (orange for cash, green up, red down), darkened a step for a light ground. */
body.liquid-mode .hero-card { color: var(--lq-ink); }
body.liquid-mode .hero-card::before { display: none; }

body.liquid-mode .hero-card :is(.hero-h, .hero-spark-val, .hero-gcons .hero-gval, .hero-gfval, .hero-vs-k,
                                .hero-top-name, .hero-top-amt, .hero-dist-name,
                                .hero-spark-row:nth-child(2) .hero-spark-val, .hero-dist-cell:nth-child(2) .hero-dist-name) {
  color: var(--lq-ink) !important;
}
body.liquid-mode .hero-card :is(.hero-sub, .hero-dots, .hero-kpi-unit, .hero-spark-axis, .hero-spark-name, .hero-spark-val small,
                                .hero-glab, .hero-cur, .hero-gflab, .hero-vs-lab, .hero-vs-sub, .hero-vs-row, .hero-vs-v,
                                .hero-vs-delta, .hero-top-ico, .hero-top-lab, .hero-legend span) {
  color: var(--lq-soft) !important;
}
body.liquid-mode .hero-card :is(.hero-up, .hero-vs-delta.is-up)     { color: #2f8f5b !important; -webkit-text-fill-color: #2f8f5b; }
body.liquid-mode .hero-card :is(.hero-down, .hero-vs-delta.is-down) { color: #c9436e !important; -webkit-text-fill-color: #c9436e; }
/* Cash was the dark design's orange — the one warm thing on this cool ground.
   Here it takes the Split scene's green, a step darker and as a gradient:
   deep at the base of the arc, lighter at its tip, so it still reads as lit.
   The sparkline, its area fill and the peak dot follow, so the chart agrees
   with its headline. Same attribute selectors neumorphic.css uses. */
body.liquid-mode .hero-card :is(.hero-kpi-val, .hero-gprod .hero-gval) { color: #3f7a68 !important; }
body.liquid-mode [stop-color="#C2611F"] { stop-color: #35695a !important; }
body.liquid-mode [stop-color="#F5B45C"] { stop-color: #8cc0aa !important; }
body.liquid-mode [stroke="#E8873A"]     { stroke: #4f8d78 !important; }
body.liquid-mode [fill="#E8873A"]       { fill: #4f8d78 !important; filter: drop-shadow(0 0 4px #4f8d78) !important; }
body.liquid-mode [stop-color="#E8873A"] { stop-color: #4f8d78 !important; }

/* Hairlines and cells were white at 6–9%: nothing on a light lens. */
body.liquid-mode .hero-card :is(.hero-gfoot, .hero-vs-rows, .hero-top-rows) { border-top-color: rgba(23, 54, 59, 0.16) !important; }
body.liquid-mode .hero-card .hero-vs-row { border-bottom-color: rgba(23, 54, 59, 0.1) !important; }
body.liquid-mode .hero-card .hero-gdiv   { background: rgba(23, 54, 59, 0.16) !important; }
body.liquid-mode .hero-card .hero-dots   { border-color: rgba(23, 54, 59, 0.18) !important; }
body.liquid-mode .hero-card .hero-dist-cell { background: rgba(23, 54, 59, 0.06) !important; border-color: rgba(23, 54, 59, 0.12) !important; }

/* The charts: the Card sparkline, the gauge needle, the gauge track and the
   axes are drawn in the dark design's cream and white by the page's JS. */
body.liquid-mode .hero-card [stroke="#F4EFE9"]     { stroke: #5c7580 !important; }
body.liquid-mode .hero-card [fill="#F4EFE9"]       { fill: #5c7580 !important; }
body.liquid-mode .hero-card [stop-color="#F4EFE9"] { stop-color: #5c7580 !important; }
body.liquid-mode .hero-card [stroke^="rgba(255,255,255"] { stroke: rgba(23, 54, 59, 0.16) !important; }
body.liquid-mode .hero-card .hero-gauge-track  { stroke: rgba(23, 54, 59, 0.12) !important; }
body.liquid-mode .hero-card .hero-gauge-needle { fill: #5c7580 !important; }
body.liquid-mode .hero-card .hero-gauge-cur    { fill: var(--lq-soft) !important; }
/* index.css gives the sales table position: relative and z-index: 1, which
   makes it a stacking context of its own — and in Chromium the lens inside
   such a host stops seeing the page behind it: the scene came through that
   one card sharp while every other card frosted it. Its z-index is not
   needed here, so it goes back to auto. */
body.liquid-mode .table-wrap { z-index: auto !important; }
/* dashboard.css stacks every child of the hero panel at z-index 1 (to sit
   above its warm pool). The engine's layers are children too, and the docs
   are explicit that an explicit z-index on the lens layer silently breaks
   the backdrop in Chromium — so those layers get theirs back. */
body.liquid-mode .hero-card > :is(.ql-lens, .ql-tint, .ql-sheen, .ql-rim, .ql-noise, svg) {
  position: absolute;
  z-index: auto;
}

/* Type on a lens is the library's own lens ink, a deep teal, over the light
   scene. The base sheets set most inks per class, so the common ones are
   turned here; accent colours (profit green, cost red, the blue selected
   day) stay. */
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) :is(.card-value, .table-title, .ws-value, .ws-ring-val, td, .cal-day, .seller-amount, .vbar-amount, .ded-name, strong, b, h1, h2, h3, h4) {
  color: var(--lq-ink) !important;
}
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) :is(.card-label, .card-desc, .table-subtitle, .ws-label, th, .cal-dow, .cal-title, .seller-name, .vbar-label, small, label) {
  color: var(--lq-soft) !important;
}
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) :is(p, span, div) {
  color: inherit;
}
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) .cal-day.other-month { color: rgba(20, 50, 55, 0.28) !important; }

/* ── Type with depth: the Neumorphic pairing, in this theme's inks ─────────
   Headline figures are RAISED — gradient-filled through background-clip and
   lifted off the glass with a drop-shadow filter (highlight up-left, shadow
   down-right) — and captions and small figures are ENGRAVED with the two
   offsets swapped. Same selectors neumorphic.css uses, same reasons:
   text-shadow paints in the foreground, so a gradient-filled glyph must take
   the filter form or the shadow lands on top of the fill. The ramp runs from
   the lens ink to a paler slate of the same hue, so it reads as light down the
   digits, not as two colours. */
body.liquid-mode {
  --lq-figure-grad: linear-gradient(175deg, #143237 0%, #1f434a 42%, #5f7883 100%);
  --lq-engrave: 1px 1px 1px rgba(255, 255, 255, 0.9), -1px -1px 1px rgba(23, 54, 59, 0.22);
  --lq-raise-filter: drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95)) drop-shadow(2px 2px 3px rgba(23, 54, 59, 0.34));
  --lq-engrave-filter: drop-shadow(-1px -1px 1px rgba(23, 54, 59, 0.30)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95));
}
/* the headline figures */
body.liquid-mode :is(.card-value, .ws-value, .dc-ring-fig, .summary-value, .hero-cur, .hero-gauge-nums, .hero-gfval,
                     #bankBalance, #paymentsTotal, #expGrandTotal, #othersBalance) {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--lq-ink) !important;
  text-shadow: none !important;
  filter: var(--lq-raise-filter);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.liquid-mode :is(.card-value, .ws-value, .dc-ring-fig, .summary-value, .hero-cur, .hero-gauge-nums, .hero-gfval,
                       #bankBalance, #paymentsTotal, #expGrandTotal, #othersBalance) {
    background: var(--lq-figure-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }
  /* The up/down arrows inside the gauge totals inherit the transparent fill;
     give them their colour back or they vanish into the ramp. */
  body.liquid-mode .hero-gfval .hero-up   { -webkit-text-fill-color: #2f8f5b !important; }
  body.liquid-mode .hero-gfval .hero-down { -webkit-text-fill-color: #c9436e !important; }
}
/* the small figures, cut in */
body.liquid-mode :is(.amount-val, .foot-total, .rev-stat-val, .chip-num, .val-amount, .val-cost-on, .val-cost-off, .val-profit,
                     .val-profit-neg, .profit-pct, .seller-amount, .vbar-pill .vbar-amount, .ws-ring-val,
                     #squareFees, #squareSavings, #squareNet, #dedTodayIn, #dedTodayOut, #bankTodayIn, #bankTodayOut) {
  text-shadow: var(--lq-engrave);
}
/* the captions, titles and eyebrows, cut in */
body.liquid-mode :is(.card-title, .table-title, .table-subtitle, .card-label, .card-desc, .ws-label, .cal-title, .cal-dow, .cal-day,
                     .hero-h, .hero-sub, .hero-glab, .hero-gflab, .hero-vs-lab, .hero-spark-name, .hero-top-lab, .dc-ring-lab,
                     h1, h2, h3) {
  text-shadow: var(--lq-engrave);
}
body.liquid-mode :is(.card-title, .table-title, h1, h2, h3) { font-weight: 600 !important; letter-spacing: -0.01em; }
/* the coloured delta keeps its colour but takes the lift */
body.liquid-mode .hero-vs-delta { filter: var(--lq-raise-filter); }
/* SVG text in the gauge cannot take text-shadow: the filter form */
body.liquid-mode .hero-gauge-cur { filter: var(--lq-engrave-filter); }

/* Dividers inside a lens: a hairline of ink, not of the ground. */
body.liquid-mode .card-divider,
body.liquid-mode hr {
  border: none !important;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 54, 59, 0.22), transparent) !important;
}
body.liquid-mode .totals-merged .tm-col + .tm-col {
  border-left-color: rgba(23, 54, 59, 0.14) !important;
}
body.liquid-mode .table-wrap table tr { border-color: rgba(23, 54, 59, 0.1) !important; }

/* Controls inside a lens: inputs and selects keep a legible field. */
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) :is(input, select, textarea) {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(23, 54, 59, 0.18) !important;
  color: var(--lq-ink) !important;
  text-shadow: none;
}
body.liquid-mode :is(.card, .card-compact, .card-wide, .table-wrap) select option { color: #143237; }

/* ── The frame: rail and top bar ──────────────────────────────────────────
   The same lens as the cards, in the library's "thin" material (liquid.js
   puts the engine on both). Transparent, unfiltered and unanimated hosts,
   as for every lens. The rail already hides its overflow; the top bar is
   let overflow after mount so its panels can hang below it, and the
   engine's light disks — larger than the bar, meant to be clipped by the
   host — are clipped on their own layers instead. */
body.liquid-mode .sidenav,
body.liquid-mode .topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  animation: none !important;
  opacity: 1 !important;
}
body.liquid-mode :is(.topbar, .pos-toolbar, .glass-card-cus, .ar-hcard, .category-search-row, .product-card) > :is(.ql-lens, .ql-tint, .ql-sheen, .ql-rim, .ql-noise) { overflow: hidden; }
/* the hairline the bars used to draw at their edge, kept as a whisper */
body.liquid-mode .topbar  { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important; }
body.liquid-mode .sidenav { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5) !important; }

/* ── The material picker ──────────────────────────────────────────────────
   Clear / Thin / Regular / Thick, the playground's four presets, in a pill
   at the foot of the page. liquid.js puts it in with the lenses and takes
   it out with them; the choice is kept per device. Styled after the
   playground's own buttons: outlined pills, the chosen one filled teal. */
.lq-picker {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 98;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(23, 54, 59, 0.16);
  font-family: var(--font-ui, "SF Mono", monospace);
}
.lq-picker-group { display: flex; align-items: center; gap: 6px; }
.lq-picker-sep { width: 1px; height: 22px; margin: 0 6px; background: rgba(23, 54, 59, 0.18); }
.lq-picker-lab {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 50, 55, 0.62);
  margin-right: 4px;
}
.lq-pick { position: relative; }
.lq-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lq-pick span {
  display: inline-block !important;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(23, 54, 59, 0.22);
  background: rgba(255, 255, 255, 0.5);
  color: #143237;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.lq-pick span:hover { background: #dcece6; border-color: #197366; }
.lq-pick input:checked + span { background: #197366; border-color: #197366; color: #fff; }
.lq-pick input:focus-visible + span { outline: 2px solid #197366; outline-offset: 2px; }
@media print { .lq-picker { display: none; } }

/* ── The three quick links in the top bar ─────────────────────────────────
   Pills of thick glass, after the playground's pill lens, each its own lens
   inside the bar's (liquid.js allows this one nesting). Under each lens a
   gradient of the scene's two colours — the pale sage to the mint — so the
   glass has something of its own to bend; the diagonal dividers between them
   go, the pills are their own shapes. */
body.liquid-mode .topbar-diag { display: none !important; }
body.liquid-mode .topbar-center { gap: 10px !important; }
body.liquid-mode .topbar-action {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(118deg, #eff2ea 0%, #dce8e1 100%) !important;
  border: 0 !important;
  box-shadow: none;
  color: var(--lq-ink) !important;
  transition: transform .18s ease;
}
body.liquid-mode .topbar-action::before, body.liquid-mode .topbar-action::after { display: none !important; }
body.liquid-mode .topbar-action:hover { transform: translateY(-1px); }
body.liquid-mode .topbar-action-label { color: var(--lq-ink) !important; text-shadow: var(--lq-engrave); transition: color .18s; }

/* The icons: single-colour drawings (topbar.php, beside the PNGs the other
   themes use). At rest they are greyed and cut into the pill; on hover, and
   on the pill for the page you are on, they lift and turn the scene's green.
   The label follows the colour. */
.lq-ico { display: none; }
body.liquid-mode .topbar-action img { display: none !important; }
body.liquid-mode .topbar-action .lq-ico {
  display: inline-block !important;
  width: 24px; height: 24px;
  color: rgba(20, 50, 55, 0.38);
  filter: var(--lq-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.liquid-mode .topbar-action:hover .lq-ico,
body.liquid-mode .topbar-action.is-current .lq-ico {
  color: #3f7a68;
  filter: var(--lq-raise-filter);
  transform: translateY(-1px) scale(1.08);
}
body.liquid-mode .topbar-action:hover .topbar-action-label,
body.liquid-mode .topbar-action.is-current .topbar-action-label { color: #3f7a68 !important; }

/* ── The brand name ───────────────────────────────────────────────────────
   The logo's two colours: "Cell Phone" in a black ramp, "Planet" in a red
   one. The name is one span, so the split is a hard stop in a single
   gradient placed at the space before "Planet" — 11 of the 17 characters in
   a monospace face, so 64.7% of the width. Lifted like the other figures. */
body.liquid-mode .topbar-brand-name {
  background: linear-gradient(90deg, #141414 0%, #2e2e2e 40%, #4a4a4a 64.7%, #a5101a 64.7%, #d4262e 84%, #f05a5a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: var(--lq-raise-filter);
}
body.liquid-mode .topbar-brand-sub { color: var(--lq-soft) !important; text-shadow: var(--lq-engrave); }

/* ── The sales rows open their receipt ────────────────────────────────────
   The View column is gone: the row is the button (index.php wires the
   click), so the column that held it is hidden — the last cell of every
   row, header included. The button stays in the DOM, out of sight, because
   its data-sale is how the row knows which receipt is its own. */
body.liquid-mode .table-wrap table th:last-child,
body.liquid-mode .table-wrap table td:last-child:not([colspan]) { display: none; }
body.liquid-mode #salesTableBody tr:has(.row-receipt-btn) { cursor: pointer; }
body.liquid-mode #salesTableBody tr:has(.row-receipt-btn):hover td { background: rgba(255, 255, 255, 0.22); }

/* ── The receipt, as a lens ───────────────────────────────────────────────
   liquid.js glasses the sheet while it is open (the body carries .rcpt-open).
   The sheet, its bar and the paper go clear so the lens shows; the card the
   receipt is printed on stays a pale paper, translucent, so it still reads
   as a slip and not as another panel. */
body.liquid-mode .rcpt-backdrop { background: rgba(20, 50, 55, 0.22) !important; backdrop-filter: blur(3px) !important; }
body.liquid-mode .rcpt-sheet { background: transparent !important; box-shadow: none; }
body.liquid-mode .rcpt-sheet > .ql-content { max-height: 88vh; }
body.liquid-mode .rcpt-topbar { background: transparent !important; border-bottom-color: rgba(23, 54, 59, 0.12) !important; }
/* The slip itself: heavier frost than the sheet around it, so the page's
   rows stop showing through the receipt while it still reads as glass —
   a denser white with its own blur behind it. The item rows and the
   payment chip inside it go the same way. */
body.liquid-mode .rcpt-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 6px 20px rgba(23, 54, 59, 0.08);
}
body.liquid-mode .rcpt-item,
body.liquid-mode .rcpt-chip { background: rgba(255, 255, 255, 0.72) !important; }
body.liquid-mode .rcpt-print { background: rgba(255, 255, 255, 0.55) !important; color: var(--lq-ink) !important; }
body.liquid-mode .rcpt-x { background: rgba(255, 255, 255, 0.45) !important; color: var(--lq-ink) !important; }
/* In and out: the comments panel's move on the repairs board. At rest the
   sheet is shrunk to 30% and sat over the point that was clicked (index.php
   measures the offset into --rcpt-dx/--rcpt-dy), invisible; with .is-in it
   springs to its place along the same curve as that panel, one that
   overshoots a touch and settles. On the way out it folds back into the
   click. The overlay gets .is-in a frame after it shows and loses it 320ms
   before it hides, so the fold plays. */
body.liquid-mode .rcpt-overlay .rcpt-backdrop { opacity: 0; transition: opacity .2s ease; }
body.liquid-mode .rcpt-overlay .rcpt-sheet {
  opacity: 0;
  transform: translate(var(--rcpt-dx, 0px), var(--rcpt-dy, 0px)) scale(0.30);
  transition: transform .30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity .18s ease;
}
body.liquid-mode .rcpt-overlay.is-in .rcpt-backdrop { opacity: 1; }
body.liquid-mode .rcpt-overlay.is-in .rcpt-sheet {
  opacity: 1;
  transform: none;
  transition: transform .30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity .16s ease;
}

/* ── The selected day on the calendar ─────────────────────────────────────
   The base sheet's blue tile becomes a mint gradient, the scene's green
   deepening toward the corner, and the number on it is the page's lightest
   tone, raised off the tile. */
body.liquid-mode .cal-day.selected {
  background: linear-gradient(135deg, #c4ddd0 0%, #93c2ab 55%, #6ea68e 100%) !important;
  color: #f4f7f2 !important;
  -webkit-text-fill-color: #f4f7f2;
  font-size: 1.35em !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(63, 122, 104, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  filter: var(--lq-raise-filter);
}

/* ── The search button ────────────────────────────────────────────────────
   The calendar's mint tile, round: the same gradient, the glass in the
   page's lightest tone lifted off it. */
body.liquid-mode .topbar-search-btn {
  background: linear-gradient(135deg, #c4ddd0 0%, #93c2ab 55%, #6ea68e 100%) !important;
  box-shadow: 0 6px 16px rgba(63, 122, 104, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.liquid-mode .topbar-search-btn svg { stroke: #f4f7f2; filter: var(--lq-raise-filter); }

/* ── The three notification buttons ───────────────────────────────────────
   As the quick links: single-colour icons (topbar.php, beside the PNGs the
   other themes use) on a pale glass disc, greyed and engraved at rest,
   green and lifted on hover and while their panel is open. The bell's
   shake, which the base sheet gives the PNG, carries over to the drawing. */
body.liquid-mode .topbar-icon-btn {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background .18s ease, transform .18s ease;
}
body.liquid-mode .topbar-icon-btn img { display: none !important; }
body.liquid-mode .topbar-icon-btn .lq-ico {
  display: block !important;
  width: 22px; height: 22px;
  color: rgba(20, 50, 55, 0.38);
  filter: var(--lq-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.liquid-mode .topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.62) !important; }
body.liquid-mode .topbar-icon-btn:hover .lq-ico,
body.liquid-mode .topbar-notif-wrap:has(.notif-dropdown.open) .topbar-icon-btn .lq-ico {
  color: #3f7a68;
  filter: var(--lq-raise-filter);
  transform: translateY(-1px) scale(1.08);
}
body.liquid-mode .topbar-icon-btn.shaking .lq-ico { animation: bell-shake 0.6s ease-in-out 3; transform-origin: top center; }

/* ── The sales table's lead figures ───────────────────────────────────────
   Customer, product, amount and profit at the size and weight of the
   week card's figure — 1.2rem, bold, the ink ramp, raised — so a row reads
   at a glance. Their second lines (order number, IMEI, tax, bank) stay
   small. A loss keeps its red, raised like the rest, so it is still the
   one thing on the row that is red. */
body.liquid-mode .table-wrap :is(.rep-name, .val-amount, .val-cost-on, .val-cost-off, .val-profit, .val-profit-neg) {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15;
  color: #3f7a68 !important;
  text-shadow: none !important;
  filter: var(--lq-raise-filter);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.liquid-mode .table-wrap :is(.rep-name, .val-amount, .val-cost-on, .val-cost-off, .val-profit) {
    background: linear-gradient(175deg, #2f6152 0%, #3f7a68 42%, #6f9f8d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }
}
body.liquid-mode .table-wrap .val-profit-neg { color: #c9436e !important; -webkit-text-fill-color: #c9436e; }
body.liquid-mode .table-wrap .rep-name .order-count-chip { font-size: 12px; font-weight: 600; letter-spacing: 0; -webkit-text-fill-color: initial; filter: none; }

/* The Liquid button at the foot of the rail, lit while this theme is on. */
body.liquid-mode #navLiquid {
  background: linear-gradient(180deg, rgba(217, 101, 69, 0.26), rgba(217, 101, 69, 0.12)) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 101, 69, 0.4) !important;
}

/* Room between the sales columns: the two-line cells sit closer than the
   old single figures did, so the columns take wider side padding. */
body.liquid-mode .table-wrap th,
body.liquid-mode .table-wrap td { padding-left: 24px !important; padding-right: 24px !important; }

/* The words in the ink, the money in the green: names and products read
   best neutral, and the colour is then the mark of a figure. */
body.liquid-mode .table-wrap .rep-name { color: var(--lq-ink) !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.liquid-mode .table-wrap .rep-name { background-image: var(--lq-figure-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
}

/* A cost that is not zero wears the logo's red — the same ramp as "Planet"
   in the brand name — so money going out reads against the green of money
   coming in. The dash for no cost stays as it is. */
body.liquid-mode .table-wrap .val-cost-on { color: #c9262e !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.liquid-mode .table-wrap .val-cost-on { background-image: linear-gradient(175deg, #a5101a 0%, #d4262e 45%, #f05a5a 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
}

/* The Repair Sale gear turns, slowly — one revolution every fourteen
   seconds — about its own centre, while the check badge on it stays put.
   Still for anyone who has asked their system for less motion. */
.lq-gear { transform-origin: 11px 12px; transform-box: view-box; }
body.liquid-mode .lq-gear { animation: lq-gear-turn 14s linear infinite; }
@keyframes lq-gear-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.liquid-mode .lq-gear { animation: none; } }

/* ── The part cards on the repairs shelf ──────────────────────────────────
   Lenses of their own inside the shelf's, in the thin material (liquid.js).
   Everything about them stays: the stock gradient is the host's own
   background and the engine paints its frost, tint and rim above it. Only
   what would wall the lens off goes — a filter, an entrance fade. */
body.liquid-mode .product-card:not(.wh-card) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* The gradient, kept but thinned. The base sheet paints the card almost
   solid — white at 96% down to a tint of the stock colour — so a lens on it
   has nothing to show through. The same three stops at about half their
   strength keep the white-to-rose or white-to-blue reading while the scene
   comes through, frosted, and the card finally looks like glass. */
body.liquid-mode .product-card:is(.card-instock, .card-restock, .card-paid, .card-deposit, .card-pop) {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.40) 42%,
      color-mix(in srgb, var(--card-tint) 24%, rgba(255, 255, 255, 0.55)) 100%) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── The Active Repairs board ─────────────────────────────────────────────
   The ticket cards (cards view) and the list rows (list view) are lenses,
   thin material (liquid.js). The card keeps its stock gradient the way the
   part cards do — the same stops at half strength, so the scene comes
   through; the row's flat white goes half-clear. Neither may filter or fade
   itself, or the lens is walled off. */
body.liquid-mode .ar-hcard.gsm-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.40) 42%,
      color-mix(in srgb, var(--card-tint, #3060a0) 24%, rgba(255, 255, 255, 0.55)) 100%) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
body.liquid-mode .ar-row {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

/* ── The repairs checkout shelf, opened up ────────────────────────────────
   The part cards sit straight on the scene, not on a panel: the container
   that held them goes clear and loses its frame, and only its toolbar —
   search, quick buttons, brands — is a lens (liquid.js). The "select a
   model" prompt that filled the empty shelf goes too; an empty scene says
   the same thing. */
body.liquid-mode .products-glass-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.liquid-mode .pos-toolbar { margin-bottom: 18px; }
body.liquid-mode #selectModelMessage { display: none !important; }
/* The toolbar's content box sits above the cards' content boxes, so the
   brand list that drops from it is not painted over by the cards below.
   The engine gives every content box z-index 10 inline; the toolbar's needs
   to win, hence the !important. (The box, not a lens layer — those must
   keep no z-index at all.) */
body.liquid-mode .pos-toolbar > .ql-content { z-index: 40 !important; }

/* ── The quick-access buttons on the repairs checkout ─────────────────────
   As the top bar's notification buttons: the favourite's photo gives way
   to a single-colour drawing (repairs/index.php picks it by name) on a pale
   glass disc, grey and engraved at rest, green and lifted on hover; the
   little name beneath turns green with it. The base sheet's blue ring and
   glow on hover go, the lift and grow stay. */
body.liquid-mode .quick-btn {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
body.liquid-mode .quick-btn:hover { background: rgba(255, 255, 255, 0.62) !important; border-color: rgba(255, 255, 255, 0.8) !important; }
body.liquid-mode .quick-btn img { display: none !important; }
body.liquid-mode .quick-btn .lq-ico {
  display: block !important;
  width: 24px; height: 24px;
  color: rgba(20, 50, 55, 0.38);
  filter: var(--lq-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.liquid-mode .quick-btn:hover .lq-ico { color: #3f7a68; filter: var(--lq-raise-filter); transform: scale(1.08); }
body.liquid-mode .quick-btn .quick-name-label { color: var(--lq-soft) !important; text-shadow: var(--lq-engrave); }
body.liquid-mode .quick-btn:hover .quick-name-label { color: #3f7a68 !important; }

/* Each quick button's drawing moves on hover, once, in the way its own
   thing moves: the plug pushes in, the reset arrows turn a full circle, the
   code brackets spread, the bug wriggles, the wrench swings. Still for a
   system asking for less motion. */
@keyframes lq-plug     { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 70% { transform: translateY(1.5px); } 100% { transform: translateY(0); } }
@keyframes lq-spin     { to { transform: rotate(360deg); } }
@keyframes lq-brackets { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.24); } }
@keyframes lq-wiggle   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes lq-wrench   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-26deg); } }
body.liquid-mode .quick-btn:hover .lq-ico-port   { animation: lq-plug .5s ease; }
body.liquid-mode .quick-btn:hover .lq-ico-reset  { animation: lq-spin .6s ease; }
body.liquid-mode .quick-btn:hover .lq-ico-soft   { animation: lq-brackets .5s ease; }
body.liquid-mode .quick-btn:hover .lq-ico-virus  { animation: lq-wiggle .5s ease; }
body.liquid-mode .quick-btn:hover .lq-ico-wrench { animation: lq-wrench .5s ease; }
@media (prefers-reduced-motion: reduce) { body.liquid-mode .quick-btn:hover .lq-ico { animation: none; } }

/* ── The parts search, as the top bar's search ────────────────────────────
   The same open capsule: a white pill with the field bare inside it and the
   mint button at its right end — the top bar's search, exactly, sitting in
   the toolbar. */
body.liquid-mode .search-wrapper {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  padding: 2px 2px 2px 14px;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(23, 54, 59, 0.10);
}
body.liquid-mode .product-search {
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 10px 8px 10px 0 !important;
  font-size: 12.5px !important;
}
body.liquid-mode .search-circle-btn {
  position: static !important;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #c4ddd0 0%, #93c2ab 55%, #6ea68e 100%) !important;
  box-shadow: 0 6px 16px rgba(63, 122, 104, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.liquid-mode .search-circle-btn svg { stroke: #f4f7f2; filter: var(--lq-raise-filter); }

/* ── The accent buttons on the repairs pages ──────────────────────────────
   The blue-to-orange ramp the base sheets give Continue, Complete Sale, the
   chosen status and deposit pills, and the board's Complete Ticket and
   save buttons becomes the theme's: a deep green running to the page's
   soft white at the far end, text kept white with a whisper of shade so it
   holds where the ramp lightens. Cancel keeps its own colour — it means
   something different. */
body.liquid-mode .co-next:not(:disabled),
body.liquid-mode .submit-sale-btn,
body.liquid-mode .dep-method-btn.active,
body.liquid-mode .csc-radio.on,
body.liquid-mode .print-btn.complete-order-btn,
body.liquid-mode .trk-save,
body.liquid-mode .rp-source-btn {
  background: linear-gradient(135deg, #2f6152 0%, #3f7a68 58%, #e6eee9 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(20, 50, 40, 0.35);
  box-shadow: 0 6px 18px rgba(63, 122, 104, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.liquid-mode .co-next:hover:not(:disabled),
body.liquid-mode .submit-sale-btn:hover,
body.liquid-mode .print-btn.complete-order-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(63, 122, 104, 0.4) !important; }

/* ── The cart total on the repairs checkout ───────────────────────────────
   The figure takes the headline treatment — the ink ramp, raised, at the
   week card's size — and its "Total:" label is cut in beside it. The
   balance-due row, which shares the class, follows. */
body.liquid-mode .summary-total > span:first-child { text-shadow: var(--lq-engrave); color: var(--lq-soft) !important; font-weight: 600; }
body.liquid-mode .summary-total > span:last-child {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--lq-ink) !important;
  text-shadow: none !important;
  filter: var(--lq-raise-filter);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.liquid-mode .summary-total > span:last-child {
    background-image: var(--lq-figure-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}
/* Balance due shares the row's class but its red is the point. */
body.liquid-mode #balanceDue { background: none !important; -webkit-text-fill-color: #c9436e !important; color: #c9436e !important; }

/* ── The main checkout ────────────────────────────────────────────────────
   Its two panels are lenses (liquid.js): the product shelf a clear pane
   under the lensed product cards, the checkout panel a regular lens. Both
   go clear of their own frost, frame and fade, as every host does. */
body.liquid-mode .category-search-row,
body.liquid-mode .checkout-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* The main checkout's shelf, opened up like the repairs one: the container
   goes clear and frameless, only its toolbar row — categories and search —
   is a lens, and the product cards sit straight on the scene. The toolbar's
   content box is raised so its category lists drop over the cards. */
body.liquid-mode .products-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.liquid-mode .category-search-row { margin-bottom: 18px; }
body.liquid-mode .category-search-row > .ql-content { z-index: 40 !important; }
/* The phone cards' own gradient (checkout/index.php paints it inline) is
   near solid — white at 97% into the phone's colour — so the lens had
   nothing to show through and the cards read as paper. The same four stops
   at about half strength: the phone's colour still climbs up the card, the
   scene comes through it. */
body.liquid-mode .checkout-main .product-card.gsm-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.58) 0%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 10%, rgba(255, 255, 255, 0.50)) 28%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 22%, rgba(255, 255, 255, 0.50)) 62%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 30%, rgba(255, 255, 255, 0.55)) 100%) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Phone photos, cut out ────────────────────────────────────────────────
   The base sheet blends the photo's white studio background away with
   mix-blend-mode; inside the engine's content box that blend has only
   transparency to blend into and the white comes back. Under this theme
   liquid.js swaps each phone photo for its cut-out twin (tools/
   cutout_phones.php makes them, <name>.cut.png beside the original), which
   has real transparency, so the blend is switched off. */
body.liquid-mode .gsm-card .card-cover { mix-blend-mode: normal; background: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   THE "APPLE" FEEL — body.lq-craft, the Feel switch in the pill (liquid.js).
   A craft pass after the apple-design skill's rules. Off by default.
   ══════════════════════════════════════════════════════════════════════════ */

/* No light material on another. The quick-link pills, the notification
   discs and the product cards are not lenses here (liquid.js does not nest
   under this feel); they read as solid surfaces sitting on the glass. */
body.lq-craft .topbar-action {
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 2px 8px rgba(23, 54, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.lq-craft .product-card:is(.card-instock, .card-restock, .card-paid, .card-deposit, .card-pop),
body.lq-craft .ar-hcard.gsm-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.86) 42%,
      color-mix(in srgb, var(--card-tint, #3060a0) 22%, rgba(255, 255, 255, 0.92)) 100%) !important;
}
body.lq-craft .checkout-main .product-card.gsm-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 10%, rgba(255, 255, 255, 0.92)) 28%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 22%, rgba(255, 255, 255, 0.92)) 62%,
      color-mix(in srgb, var(--phone-tint, #cbd5e1) 30%, rgba(255, 255, 255, 0.92)) 100%) !important;
  box-shadow: 0 10px 28px rgba(23, 54, 59, 0.12) !important;
}

/* Feedback on the press, not the release: instant, on pointer-down. */
body.lq-craft :is(.topbar-action, .topbar-icon-btn, .topbar-search-btn, .quick-btn, .lq-pick span, .co-next, .submit-sale-btn,
                  .search-circle-btn, .row-receipt-btn, .cal-day, .product-card, .acc-btn):active {
  transform: scale(0.97) !important;
  transition: transform 100ms ease-out !important;
}

/* The receipt is driven by springs from liquid.js; the timed transitions
   of the standard feel must not shadow its per-frame writes. */
body.lq-craft .rcpt-overlay .rcpt-sheet,
body.lq-craft .rcpt-overlay.is-in .rcpt-sheet { transition: none !important; }

/* A scroll edge under the floating top bar instead of a hairline: content
   fades into the bar where they meet. */
body.liquid-mode.lq-craft .topbar { box-shadow: none !important; }
body.liquid-mode.lq-craft .topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(220, 233, 226, 0.6), rgba(220, 233, 226, 0));
}

/* Reduced transparency: frostier, solid surfaces on every feel, since this
   is the person's own setting and not a taste. (The engine honours it on
   the lenses by itself.) */
@media (prefers-reduced-transparency: reduce) {
  body.liquid-mode :is(.lq-picker, .topbar-action, .topbar-icon-btn, .rcpt-card, .search-wrapper, .quick-btn, .lq-pick span) {
    background: #eef2ee !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── The two tills' icons, dressed like the bells (Luis, 2026-09-22) ─────── */
body.liquid-mode .topbar-icon-btn .tb-ico {
  opacity: 1;
  color: rgba(20, 50, 55, 0.38);
  filter: var(--lq-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.liquid-mode .topbar-icon-btn:hover .tb-ico { color: #3f7a68; filter: var(--lq-raise-filter); transform: translateY(-1px) scale(1.08); }