/* ===========================================================================
 * D'leaps Studio OS - Liquid glass (V25, bolt-on)
 *
 * The reference: a "liquid glass UI kit" board. Soft grey canvas, thick clear
 * glass with one bright rim, pastel-tinted glass pills (lavender, magenta (was mint), peach,
 * pink, ice) that glow their own colour onto the surface below, recessed glass
 * fields, glass-bead switch knobs and round glass orbs for icon buttons.
 *
 * THE ONE RULE OF THIS FILE - one border baseline.
 * Every component gets the SAME rim: --lq-rim-w (1.5px) of --lq-rim, drawn as
 * an inset ring inside box-shadow (so it never changes an element's size and
 * never fights the bundle's own borders). Nothing in here hand-tunes an edge.
 * Change the rim once in :root and every card, pill, field and orb follows.
 *
 * Scope: html[data-wall="liquid"] only, so the V24 white and iMac backdrops
 * are untouched and still one click away (wall-switch.js cycles
 * liquid -> white -> iMac). Loaded AFTER /glass.css; it only overrides.
 *
 * Contrast: every tinted control carries dark ink (#2B2A28), 10:1 or better
 * on its pastel. Secondary text #5E5E66 is 5.1:1 or better on the canvas and on the pastels (4.6:1 at worst, on pink). Focus rings
 * stay the logo turquoise. Logo untouched. Documents (BOQ, invoice, receipt,
 * A4) stay paper; nothing here is inside @media print.
 *
 * Roll back: delete the liquid-glass.css <link> in index.html (the page falls
 * back to the V24 look), or pick white / iMac with the top-bar switch.
 * =========================================================================== */

@media screen {

html[data-wall="liquid"] {
  /* canvas */
  --lq-canvas:   #ECECF0;
  --lq-canvas-2: #E4E4EA;

  /* the border baseline - every component uses exactly this */
  --lq-rim:      rgba(255,255,255,.92);
  --lq-rim-w:    1.5px;
  --lq-ring:     inset 0 0 0 var(--lq-rim-w) var(--lq-rim);

  /* clear glass */
  --lq-glass:    linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.40) 100%);
  --lq-glass-2:  linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.30) 100%);
  --lq-blur:     blur(22px) saturate(160%);
  --lq-spec:     inset 0 2px 1px rgba(255,255,255,.95);              /* top specular line */
  --lq-under:    inset 0 -3px 7px rgba(110,110,135,.10);              /* thickness at the bottom lip */
  --lq-drop:     0 1px 2px rgba(40,40,70,.06), 0 16px 34px -16px rgba(40,40,70,.26);
  --lq-drop-hi:  0 2px 4px rgba(40,40,70,.08), 0 24px 46px -18px rgba(40,40,70,.32);
  --lq-bevel:    var(--lq-ring), var(--lq-spec), var(--lq-under);
  --lq-well:     var(--lq-ring), inset 0 2px 5px rgba(60,60,90,.10), inset 0 -1px 0 rgba(255,255,255,.7);

  /* pastel tints: fill, glow */
  --lq-lav:  #D9DAFB; --lq-lav-glow:   rgba(132,138,240,.50);
  /* V26.1: the mint tint is retired; the turnover hero and "mint" icon discs use brand magenta glass */
  --lq-mint: #F9D5E5; --lq-mint-glow:  rgba(224,88,134,.42);
  --lq-peach:#FBDCC0; --lq-peach-glow: rgba(244,160,90,.50);
  --lq-pink: #F6D1E3; --lq-pink-glow:  rgba(228,116,168,.48);
  --lq-ice:  #D2EDF6; --lq-ice-glow:   rgba(80,196,228,.45);

  --lq-ink:   #2B2A28;
  --lq-ink-2: #5E5E66;
  --lq-r:     28px;      /* panels */
  --lq-r-in:  18px;      /* nested */

  /* feed the tokens glass.css and the bolt-ons already read */
  --lg-field:      var(--lq-canvas);
  --lg-fill:       var(--lq-glass);
  --lg-fill-soft:  var(--lq-glass-2);
  --lg-blur:       var(--lq-blur);
  --lg-shadow:     var(--lq-bevel), var(--lq-drop);
  --lg-shadow-hi:  var(--lq-bevel), var(--lq-drop-hi);
  --lg-shadow-ctl: var(--lq-bevel), 0 1px 2px rgba(40,40,70,.06), 0 8px 18px -10px rgba(40,40,70,.24);
  --lg-well:       var(--lq-well);
  --lg-r-slab:     var(--lq-r);
  --lg-r-inner:    var(--lq-r-in);
  --gm-ink2:       var(--lq-ink-2);
  --gm-fill:       rgba(255,255,255,.34);
  --gm-fill-2:     rgba(255,255,255,.46);
  --gm-sep:        rgba(60,60,90,.10);
  --gm-pools:      radial-gradient(60vw 44vw at 50% -10%, rgba(255,255,255,.95) 0%, transparent 60%),
                   radial-gradient(40vw 34vw at 96% 30%,  rgba(217,218,251,.55) 0%, transparent 65%),
                   radial-gradient(36vw 32vw at 4% 86%,   rgba(246,209,227,.45) 0%, transparent 65%);
  --gm-hero:       linear-gradient(180deg, rgba(255,255,255,.55) 0%, var(--lq-lav) 60%, var(--lq-lav) 100%);
  --gm-hero-ink:   var(--lq-ink);
  --surface:       rgba(255,255,255,.55);
  --muted:         var(--lq-ink-2);
  --graph-ink:     var(--lq-ink-2);
}

/* ---- canvas ------------------------------------------------------------------------------ */
html[data-wall="liquid"] body:before {
  background: var(--gm-pools), linear-gradient(180deg, var(--lq-canvas) 0%, var(--lq-canvas-2) 100%) !important;
  background-repeat: no-repeat !important; background-size: auto !important;
}

/* ---- panels: one clear glass, one rim -------------------------------------------------------- */
html[data-wall="liquid"] .card, html[data-wall="liquid"] .stat, html[data-wall="liquid"] .tile,
html[data-wall="liquid"] .where-card, html[data-wall="liquid"] .promise-card, html[data-wall="liquid"] .cl-card,
html[data-wall="liquid"] .cl-panel, html[data-wall="liquid"] .ch-list, html[data-wall="liquid"] .ch-main,
html[data-wall="liquid"] .lw-glass, html[data-wall="liquid"] .dash-tile,
html[data-wall="liquid"] #dl-sd-root .sd-brief {
  background: var(--lq-glass) !important;
  border: 0 !important;
  border-radius: var(--lq-r) !important;
  box-shadow: var(--lq-bevel), var(--lq-drop) !important;
  -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur);
}
html[data-wall="liquid"] .card:hover, html[data-wall="liquid"] .stat:hover,
html[data-wall="liquid"] .cl-card:hover, html[data-wall="liquid"] .dash-tile-link:hover .dash-tile {
  box-shadow: var(--lq-bevel), var(--lq-drop-hi) !important;
}
/* nested surfaces: frosted inset, same rim, no second blur layer */
html[data-wall="liquid"] .card .card, html[data-wall="liquid"] .card .stat, html[data-wall="liquid"] .card .cl-card,
html[data-wall="liquid"] .modal .card, html[data-wall="liquid"] .cl-panel .cl-card, html[data-wall="liquid"] .ch-main .card,
html[data-wall="liquid"] .lw-glass .lw-glass,
html[data-wall="liquid"] .lead-card, html[data-wall="liquid"] .sum-box, html[data-wall="liquid"] .lead-log,
html[data-wall="liquid"] .tk-first, html[data-wall="liquid"] .tk-msg, html[data-wall="liquid"] .tk-reply,
html[data-wall="liquid"] .cl-act, html[data-wall="liquid"] .cl-proj, html[data-wall="liquid"] .ch-compose,
html[data-wall="liquid"] .boq-addbar, html[data-wall="liquid"] .doc-toolbar,
html[data-wall="liquid"] #dl-sd-root .sd-task, html[data-wall="liquid"] #dl-sd-root .sd-row,
html[data-wall="liquid"] #dl-sd-root .sd-hc {
  background: rgba(255,255,255,.44) !important;
  border: 0 !important;
  border-radius: var(--lq-r-in) !important;
  box-shadow: var(--lq-ring), var(--lq-spec), 0 6px 16px -10px rgba(40,40,70,.20) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-wall="liquid"] .lead-card:hover { box-shadow: var(--lq-ring), var(--lq-spec), 0 14px 30px -14px rgba(40,40,70,.30) !important; }

/* the dashboard's clock / turnover heroes: lavender liquid glass, dark type */
html[data-wall="liquid"] #dl-sd-root .sd-hglass, html[data-wall="liquid"] #dl-sd-root .sd-hclock,
html[data-wall="liquid"] #dl-sd-root .sd-hfin {
  background: var(--gm-hero) !important;
  color: var(--lq-ink) !important; text-shadow: none !important;
  box-shadow: var(--lq-bevel), inset 0 -5px 10px var(--lq-lav-glow), 0 22px 42px -20px var(--lq-lav-glow), 0 2px 4px rgba(40,40,70,.06) !important;
  -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur);
}
html[data-wall="liquid"] #dl-sd-root .sd-hfin { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, var(--lq-mint) 60%, var(--lq-mint) 100%) !important;
  box-shadow: var(--lq-bevel), inset 0 -5px 10px var(--lq-mint-glow), 0 22px 42px -20px var(--lq-mint-glow), 0 2px 4px rgba(40,40,70,.06) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hglass *, html[data-wall="liquid"] #dl-sd-root .sd-hfin * { color: inherit; }
html[data-wall="liquid"] #dl-sd-root .sd-hfin .big.neg { color: #B3261E !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hclock .dt { color: var(--lq-ink-2) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hglass:after { display: none; }

/* KPI icon tiles: pastel glass orbs */
html[data-wall="liquid"] #dl-sd-root .sd-kic { color: var(--lq-ink) !important; border-radius: 50% !important; }
html[data-wall="liquid"] #dl-sd-root .sd-kic.mint  { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-mint) 46%, #F2B3CD 100%) !important; box-shadow: var(--lq-ring), 0 8px 16px -8px var(--lq-mint-glow) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-kic.pink  { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-pink) 46%, #EDB3CF 100%) !important; box-shadow: var(--lq-ring), 0 8px 16px -8px var(--lq-pink-glow) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-kic.lav   { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-lav) 46%, #BFC1F4 100%) !important; box-shadow: var(--lq-ring), 0 8px 16px -8px var(--lq-lav-glow) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-kic.peach { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-peach) 46%, #F6C59B 100%) !important; box-shadow: var(--lq-ring), 0 8px 16px -8px var(--lq-peach-glow) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-ring.mint .tr  { stroke: rgba(224,88,134,.22); }
html[data-wall="liquid"] #dl-sd-root .sd-ring.mint .fg  { stroke: #E05886; }
html[data-wall="liquid"] #dl-sd-root .sd-ring.pink .tr  { stroke: rgba(228,116,168,.22); }
html[data-wall="liquid"] #dl-sd-root .sd-ring.lav .tr   { stroke: rgba(132,138,240,.22); }
html[data-wall="liquid"] #dl-sd-root .sd-ring.peach .tr { stroke: rgba(244,160,90,.22); }

/* ---- chrome: sidebar slab, top bar pill ------------------------------------------------------- */
html[data-wall="liquid"] .sidebar, html[data-wall="liquid"] .topbar {
  background: var(--lq-glass-2) !important;
  -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur);
  box-shadow: var(--lq-bevel), var(--lq-drop) !important;
}
@media (max-width: 900px) {
  html[data-wall="liquid"] .sidebar { background: rgba(244,244,248,.92) !important; }
}
@media (min-width: 901px) {
  html[data-wall="liquid"] body:has(.tb-rail-toggle[aria-label="Pin sidebar open"]) .sidebar.is-open {
    background: rgba(244,244,248,.86) !important;
    box-shadow: var(--lq-bevel), 0 30px 70px -20px rgba(40,40,70,.30) !important;
  }
}
html[data-wall="liquid"] .tb-user {
  background: var(--lq-glass) !important;
  box-shadow: var(--lq-bevel), 0 6px 14px -8px rgba(40,40,70,.22) !important;
}
html[data-wall="liquid"] .navlink:hover { background: rgba(255,255,255,.40); }
html[data-wall="liquid"] .navlink.active {
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, var(--lq-ice) 70%) !important;
  box-shadow: var(--lq-bevel), 0 8px 18px -10px var(--lq-ice-glow) !important;
  color: var(--lq-ink) !important;
}
html[data-wall="liquid"] .navlink.active svg { color: var(--lq-ink); }
html[data-wall="liquid"] #dl-rail-handle {
  background: radial-gradient(circle at 35% 28%, #fff 0 14%, rgba(255,255,255,.75) 55%, var(--lq-ice) 100%);
  box-shadow: var(--lq-ring), 0 6px 14px -6px rgba(40,40,70,.30);
  color: var(--lq-ink);
}

/* ---- buttons: tinted liquid pills ---------------------------------------------------------------- */
html[data-wall="liquid"] .btn, html[data-wall="liquid"] .lw-btn { font-weight: 600; letter-spacing: .005em; }
html[data-wall="liquid"] .btn-primary, html[data-wall="liquid"] .lw-btn.p, html[data-wall="liquid"] .login-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, var(--lq-lav) 52%, var(--lq-lav) 100%) !important;
  color: var(--lq-ink) !important;
  box-shadow: var(--lq-bevel), inset 0 -5px 10px var(--lq-lav-glow), 0 14px 28px -12px var(--lq-lav-glow), 0 2px 4px rgba(40,40,70,.07) !important;
}
html[data-wall="liquid"] .btn-accent, html[data-wall="liquid"] .lw-btn.m {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, var(--lq-pink) 52%, var(--lq-pink) 100%) !important;
  color: var(--lq-ink) !important;
  box-shadow: var(--lq-bevel), inset 0 -5px 10px var(--lq-pink-glow), 0 14px 28px -12px var(--lq-pink-glow), 0 2px 4px rgba(40,40,70,.07) !important;
}
html[data-wall="liquid"] .btn-ghost, html[data-wall="liquid"] .lw-btn.g, html[data-wall="liquid"] .lw-chip,
html[data-wall="liquid"] .cl-view, html[data-wall="liquid"] .ch-chip, html[data-wall="liquid"] #dl-sd-root .sd-chip {
  background: var(--lq-glass) !important;
  color: var(--lq-ink) !important;
  box-shadow: var(--lq-bevel), 0 8px 18px -10px rgba(40,40,70,.24) !important;
}
html[data-wall="liquid"] .btn-primary:hover, html[data-wall="liquid"] .btn-accent:hover,
html[data-wall="liquid"] .lw-btn.p:hover, html[data-wall="liquid"] .lw-btn.m:hover, html[data-wall="liquid"] .login-btn:hover { filter: saturate(1.25) brightness(1.02); }
html[data-wall="liquid"] .btn-ghost:hover, html[data-wall="liquid"] .lw-btn.g:hover, html[data-wall="liquid"] .lw-chip:hover { background: rgba(255,255,255,.72) !important; }
/* icon buttons: round glass orbs */
html[data-wall="liquid"] .icon-btn, html[data-wall="liquid"] #dl-wall-btn {
  background: radial-gradient(circle at 34% 26%, #fff 0 12%, rgba(255,255,255,.72) 48%, rgba(220,224,236,.55) 100%) !important;
  color: var(--lq-ink) !important;
  box-shadow: var(--lq-ring), var(--lq-under), 0 6px 14px -6px rgba(40,40,70,.28) !important;
}
html[data-wall="liquid"] .tb-icon:hover, html[data-wall="liquid"] .tb-link:hover { background: rgba(255,255,255,.5) !important; }

/* status pills keep their own colours (often inline) and gain the rim */
html[data-wall="liquid"] .pill { border-color: transparent !important; box-shadow: var(--lq-ring), var(--lq-spec), 0 4px 10px -6px rgba(40,40,70,.22) !important; }

/* ---- segmented controls: clear glass track, glass-bead selection ------------------------------------ */
html[data-wall="liquid"] .lead-views, html[data-wall="liquid"] .proc-tabs, html[data-wall="liquid"] .tk-tabs,
html[data-wall="liquid"] .lw-views:not(:has(.lw-btn)), html[data-wall="liquid"] .lw-tabs, html[data-wall="liquid"] #dl-sd-root .sd-tabs {
  background: rgba(255,255,255,.30) !important;
  box-shadow: var(--lq-well) !important;
}
html[data-wall="liquid"] .lead-view, html[data-wall="liquid"] .proc-tab, html[data-wall="liquid"] .tk-tab,
html[data-wall="liquid"] .lw-views:not(:has(.lw-btn)) .lw-chip, html[data-wall="liquid"] .lw-tabs .lw-chip,
html[data-wall="liquid"] #dl-sd-root .sd-tabs .sd-chip:not(.on) { background: transparent !important; box-shadow: none !important; }
html[data-wall="liquid"] .lead-view.active, html[data-wall="liquid"] .proc-tab.active, html[data-wall="liquid"] .tk-tab.on,
html[data-wall="liquid"] .tk-tab.active, html[data-wall="liquid"] .cl-view.active, html[data-wall="liquid"] .lw-chip.on,
html[data-wall="liquid"] .lw-views .lw-chip.on, html[data-wall="liquid"] .lw-tabs .lw-chip.on, html[data-wall="liquid"] #dl-sd-root .sd-chip.on {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.80) 100%) !important;
  color: var(--lq-ink) !important;
  box-shadow: var(--lq-ring), var(--lq-under), 0 6px 14px -6px rgba(40,40,70,.28) !important;
}

/* ---- fields: recessed glass ------------------------------------------------------------------------- */
html[data-wall="liquid"] .input, html[data-wall="liquid"] select.input, html[data-wall="liquid"] textarea.input,
html[data-wall="liquid"] .lw-in, html[data-wall="liquid"] .lw-search, html[data-wall="liquid"] .login-field input,
html[data-wall="liquid"] #dl-sd-root .sd-in, html[data-wall="liquid"] .ch-search {
  background: rgba(255,255,255,.38) !important;
  box-shadow: var(--lq-well) !important;
}
html[data-wall="liquid"] input.input, html[data-wall="liquid"] select.input, html[data-wall="liquid"] .lw-search { border-radius: 999px !important; }
html[data-wall="liquid"] textarea.input { border-radius: 18px !important; }
html[data-wall="liquid"] .input::placeholder, html[data-wall="liquid"] .lw-in::placeholder, html[data-wall="liquid"] .lw-search::placeholder { color: #6B6B74; }
html[data-wall="liquid"] .input:focus, html[data-wall="liquid"] select.input:focus, html[data-wall="liquid"] textarea.input:focus,
html[data-wall="liquid"] .lw-in:focus, html[data-wall="liquid"] .lw-search:focus, html[data-wall="liquid"] .login-field input:focus {
  background: rgba(255,255,255,.80) !important;
  box-shadow: var(--lq-ring), 0 0 0 4px rgba(98,232,239,.42), 0 8px 18px -10px rgba(40,40,70,.24) !important;
}

/* ---- switches: clear glass track, pink glass bead --------------------------------------------------- */
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"] {
  background: rgba(255,255,255,.34) !important;
  box-shadow: var(--lq-well) !important;
}
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"]::after {
  background: radial-gradient(circle at 34% 28%, #fff 0 14%, #F3D9E8 42%, #E7A9CB 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 3px 8px rgba(160,60,110,.30);
}
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"]:checked {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, var(--lq-peach) 60%) !important;
  box-shadow: var(--lq-ring), inset 0 -3px 6px var(--lq-peach-glow), 0 8px 18px -10px var(--lq-peach-glow) !important;
}

/* ---- tables, progress -------------------------------------------------------------------------------- */
html[data-wall="liquid"] .table tr:hover td { background: rgba(255,255,255,.40); }
html[data-wall="liquid"] .progress-track { background: rgba(255,255,255,.34) !important; box-shadow: var(--lq-well); }
html[data-wall="liquid"] .progress-fill {
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* ---- overlays ------------------------------------------------------------------------------------------ */
html[data-wall="liquid"] .overlay, html[data-wall="liquid"] .nav-scrim { background: rgba(225,225,232,.45) !important; }
html[data-wall="liquid"] .modal, html[data-wall="liquid"] .tb-menu {
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(248,248,252,.78) 100%) !important;
  box-shadow: var(--lq-bevel), 0 30px 80px -20px rgba(40,40,70,.38) !important;
}
html[data-wall="liquid"] .modal { border-radius: 30px !important; }

/* ---- login ---------------------------------------------------------------------------------------------- */
html[data-wall="liquid"] .login-right {
  background: var(--lq-glass) !important;
  box-shadow: var(--lq-bevel), 0 34px 80px -28px rgba(40,40,70,.36) !important;
}
html[data-wall="liquid"] .login-btn { border-radius: 999px !important; }
html[data-wall="liquid"] .login-field input { border-radius: 999px !important; }
html[data-wall="liquid"] .login-left .promise-ic { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-ice) 50%, #B9E2EF 100%) !important; border-radius: 50% !important; box-shadow: var(--lq-ring); }
html[data-wall="liquid"] .login-left .promise-card:nth-child(even) .promise-ic { background: radial-gradient(circle at 35% 28%, #fff 0 10%, var(--lq-pink) 50%, #EDB3CF 100%) !important; }
html[data-wall="liquid"] .login-right .eyebrow { color: #0F6E77 !important; }

/* ---- focus -------------------------------------------------------------------------------------------------- */
html[data-wall="liquid"] .btn:focus-visible, html[data-wall="liquid"] .navlink:focus-visible,
html[data-wall="liquid"] .icon-btn:focus-visible, html[data-wall="liquid"] .lw-btn:focus-visible,
html[data-wall="liquid"] .lw-chip:focus-visible, html[data-wall="liquid"] .login-btn:focus-visible {
  outline: 3px solid rgba(18,127,137,.65); outline-offset: 3px;
}
html[data-wall="liquid"] * { scrollbar-color: rgba(60,60,90,.24) transparent; }

/* ---- documents stay paper ------------------------------------------------------------------------------------ */
html[data-wall="liquid"] .boq-doc, html[data-wall="liquid"] .a4, html[data-wall="liquid"] .req-print {
  background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 50px -24px rgba(40,40,70,.30) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

@media (max-width: 700px) { html[data-wall="liquid"] { --lq-blur: blur(14px) saturate(150%); } }

@media (prefers-reduced-motion: reduce) {
  html[data-wall="liquid"] .btn, html[data-wall="liquid"] .lw-btn { transition: none !important; }
}

} /* end @media screen */

/* ---- fallbacks: no blur, or the user asked for less transparency ------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen { html[data-wall="liquid"] { --lq-glass: linear-gradient(180deg, #FBFBFD, #F4F4F8); --lq-glass-2: linear-gradient(180deg, #F7F7FA, #F1F1F5); } }
}
@media screen and (prefers-reduced-transparency: reduce) {
  html[data-wall="liquid"] { --lq-glass: linear-gradient(180deg, #FBFBFD, #F4F4F8); --lq-glass-2: linear-gradient(180deg, #F7F7FA, #F1F1F5); }
}