/* ===========================================================================
 * D'leaps Studio OS - Crystal glass (V29, bolt-on)
 *
 * The reference: a crystal UI kit board. Cool off-white canvas; thick,
 * colourless glass with a bright white rim, a fine grey outer edge and a
 * prism fringe (warm at the lower right, cool at the lower left) where the
 * light passes through the bevel. Colour is used sparingly and as jewels:
 *   - primary action  = glossy magenta jewel, white type   (the logo apostrophe)
 *   - switch "on", check, toast, focus = glossy turquoise   (the leap mark)
 *   - everything else = clear crystal, dark ink
 * No green anywhere (house rule since V26.1). The reference's blue "Pro plan"
 * pill has no place in the brand and is not used.
 *
 * Layering: loaded AFTER glass.css and liquid-glass.css, and scoped to
 * html[data-wall="liquid"] exactly like liquid-glass.css, so this becomes the
 * default look while the top-bar switch still reaches white and iMac.
 * It only overrides. Nothing here is inside @media print: BOQ, invoice,
 * receipt and A4 documents stay paper.
 *
 * One edge, set once: every component draws the same --cg-* shadow stack.
 * Change a token in :root and every card, pill, field and orb follows.
 *
 * Contrast (WCAG 2.1):
 *   white on the magenta jewel, at its lightest text point #D0326F: 4.9:1
 *   ink #2B2A28 on the turquoise jewel #7FE3EA:                     10.6:1
 *   ink on crystal over the canvas:                                12:1+
 *   secondary #55555F on crystal:                                   6.8:1
 *
 * Roll back: delete the crystal-glass.css <link> in index.html (V25 liquid
 * glass returns untouched).
 * =========================================================================== */

@media screen {

html[data-wall="liquid"] {
  --cg-canvas:   #EEF0F3;
  --cg-canvas-2: #E5E8ED;

  /* the edge stack */
  --cg-rim:    inset 0 0 0 1.5px rgba(255,255,255,.96);
  --cg-hair:   0 0 0 1px rgba(160,170,192,.36);
  --cg-hi:     inset 2px 3px 2px -1px rgba(255,255,255,1);
  --cg-thick:  inset -2px -6px 10px -4px rgba(140,150,176,.30);
  --cg-prism:  inset -8px -7px 10px -9px rgba(255,166,92,.95), inset 8px -7px 10px -9px rgba(104,186,255,.85);
  --cg-drop:   0 2px 3px rgba(60,70,100,.06), 0 22px 40px -22px rgba(60,70,100,.38);
  --cg-drop-s: 0 1px 2px rgba(60,70,100,.08), 0 10px 18px -10px rgba(60,70,100,.34);
  --cg-edge:   var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-prism), var(--cg-hair);

  --cg-glass:  radial-gradient(130% 80% at 12% -8%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 52%),
               linear-gradient(165deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.22) 100%);
  --cg-glass-2: linear-gradient(170deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.34) 100%);
  --cg-blur:   blur(18px) saturate(170%);

  /* jewels */
  --cg-mag:    radial-gradient(90% 60% at 50% -12%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 54%, rgba(255,255,255,0) 56%),
               linear-gradient(180deg, #DE3C7C 0%, #C2236A 55%, #A0124F 100%);
  --cg-mag-sh: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 2px 1px rgba(255,255,255,.65), inset 0 -5px 9px rgba(92,0,40,.34),
               0 12px 24px -10px rgba(204,32,104,.70), 0 2px 4px rgba(120,10,60,.18);
  --cg-tq:     radial-gradient(90% 60% at 50% -12%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.20) 54%, rgba(255,255,255,0) 56%),
               linear-gradient(180deg, #A6F2F5 0%, #74E3EA 55%, #3FC6D0 100%);
  --cg-tq-sh:  inset 0 0 0 1px rgba(255,255,255,.55), inset 0 2px 1px rgba(255,255,255,.8), inset 0 -5px 9px rgba(0,96,108,.22),
               0 12px 24px -10px rgba(40,190,202,.65), 0 2px 4px rgba(0,90,100,.14);

  --cg-ink:   #2B2A28;
  --cg-ink-2: #55555F;

  /* feed every token the older layers and the bolt-ons read */
  --lq-canvas: var(--cg-canvas); --lq-canvas-2: var(--cg-canvas-2);
  --lq-glass:  var(--cg-glass);  --lq-glass-2: var(--cg-glass-2);
  --lq-blur:   var(--cg-blur);
  --lq-bevel:  var(--cg-edge);
  --lq-drop:   var(--cg-drop);
  --lq-ink-2:  var(--cg-ink-2);
  --lg-fill:       var(--cg-glass);
  --lg-fill-soft:  var(--cg-glass-2);
  --lg-blur:       var(--cg-blur);
  --lg-shadow:     var(--cg-edge), var(--cg-drop);
  --lg-shadow-hi:  var(--cg-edge), 0 2px 4px rgba(60,70,100,.08), 0 30px 52px -22px rgba(60,70,100,.42);
  --lg-shadow-ctl: var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-hair), var(--cg-drop-s);
  --lg-tint:        #C2236A;
  --lg-primary-ink: #ffffff;
  --lg-shadow-tint: var(--cg-mag-sh);
  --gm-pools:  radial-gradient(58vw 40vw at 50% -12%, rgba(255,255,255,.98) 0%, transparent 62%),
               radial-gradient(34vw 30vw at 98% 34%, rgba(98,232,239,.16) 0%, transparent 66%),
               radial-gradient(34vw 30vw at 2% 90%,  rgba(224,88,134,.10) 0%, transparent 66%);
  --muted:     var(--cg-ink-2);
  --graph-ink: var(--cg-ink-2);
}

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

/* ---- panels: crystal slabs ---------------------------------------------------------------- */
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-glass, html[data-wall="liquid"] #dl-sd-root .sd-brief {
  background: var(--cg-glass) !important;
  border: 0 !important;
  box-shadow: var(--cg-edge), var(--cg-drop) !important;
  -webkit-backdrop-filter: var(--cg-blur); backdrop-filter: var(--cg-blur);
}
html[data-wall="liquid"] .card:hover, html[data-wall="liquid"] .stat:hover, html[data-wall="liquid"] .cl-card:hover,
html[data-wall="liquid"] #dl-sd-root .sd-kpi:hover, html[data-wall="liquid"] .dash-tile-link:hover .dash-tile {
  box-shadow: var(--lg-shadow-hi) !important;
}

/* nested surfaces: thinner crystal, same edge family, no second blur */
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, html[data-wall="liquid"] #dl-sd-root .sd-person,
html[data-wall="liquid"] #dl-sd-root .sd-stat {
  background: linear-gradient(170deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.38) 100%) !important;
  border: 0 !important;
  box-shadow: var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-hair), 0 8px 16px -12px rgba(60,70,100,.30) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- dashboard heroes ------------------------------------------------------------------------- */
/* clock: clear crystal with a turquoise caustic pooled at the foot */
html[data-wall="liquid"] #dl-sd-root .sd-hglass, html[data-wall="liquid"] #dl-sd-root .sd-hclock {
  background: radial-gradient(85% 55% at 50% 112%, rgba(98,232,239,.72) 0%, rgba(98,232,239,.18) 55%, rgba(98,232,239,0) 75%), var(--cg-glass) !important;
  color: var(--cg-ink) !important; text-shadow: none !important; border: 0 !important;
  box-shadow: var(--cg-edge), inset 0 -10px 22px -12px rgba(40,190,202,.55), var(--cg-drop) !important;
}
/* turnover and profit: the magenta jewel, white type */
html[data-wall="liquid"] #dl-sd-root .sd-hfin {
  background: var(--cg-mag) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.38), inset 0 3px 2px rgba(255,255,255,.55), inset 0 -10px 20px rgba(92,0,40,.30),
              inset -9px -8px 12px -10px rgba(255,190,120,.9), 0 26px 44px -20px rgba(204,32,104,.62), 0 2px 4px rgba(120,10,60,.16) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-hfin * { color: inherit !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hfin .fy, html[data-wall="liquid"] #dl-sd-root .sd-hfin .foot,
html[data-wall="liquid"] #dl-sd-root .sd-hfin .s, html[data-wall="liquid"] #dl-sd-root .sd-hfin .note { color: rgba(255,255,255,.92) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hfin .mg { background: rgba(255,255,255,.22) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
html[data-wall="liquid"] #dl-sd-root .sd-hfin .big.neg { color: #FFE1DC !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hclock .dt { color: var(--cg-ink-2) !important; }
html[data-wall="liquid"] #dl-sd-root .sd-hglass:after { display: none; }

/* the morning brief: crystal, Caveat stays */
html[data-wall="liquid"] #dl-sd-root .sd-brief { background: radial-gradient(60% 120% at 0% 0%, rgba(251,233,240,.55) 0%, rgba(251,233,240,0) 60%), var(--cg-glass) !important; }

/* ---- icon discs: jewel orbs ------------------------------------------------------------------------- */
html[data-wall="liquid"] #dl-sd-root .sd-kic { border-radius: 50% !important; }
html[data-wall="liquid"] #dl-sd-root .sd-kic.mint, html[data-wall="liquid"] #dl-sd-root .sd-kic.pink {
  background: var(--cg-mag) !important; color: #fff !important; box-shadow: var(--cg-mag-sh) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-kic.lav, html[data-wall="liquid"] #dl-sd-root .sd-kic.peach {
  background: var(--cg-tq) !important; color: var(--cg-ink) !important; box-shadow: var(--cg-tq-sh) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-ring.lav .fg, html[data-wall="liquid"] #dl-sd-root .sd-ring.peach .fg { stroke: #3FC6D0; }
html[data-wall="liquid"] #dl-sd-root .sd-ring.lav .tr, html[data-wall="liquid"] #dl-sd-root .sd-ring.peach .tr { stroke: rgba(63,198,208,.20); }
html[data-wall="liquid"] #dl-sd-root .sd-ring.mint .fg, html[data-wall="liquid"] #dl-sd-root .sd-ring.pink .fg { stroke: #C2236A; }
html[data-wall="liquid"] #dl-sd-root .sd-ring.mint .tr, html[data-wall="liquid"] #dl-sd-root .sd-ring.pink .tr { stroke: rgba(194,35,106,.16); }

/* bars: a glass tube with a jewel fill */
html[data-wall="liquid"] #dl-sd-root .sd-bar, html[data-wall="liquid"] .progress-track {
  background: rgba(255,255,255,.45) !important;
  box-shadow: inset 0 0 0 1px rgba(160,170,192,.30), inset 0 2px 3px rgba(60,70,100,.12), 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-bar i { background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }

/* ---- chrome --------------------------------------------------------------------------------------- */
html[data-wall="liquid"] .sidebar, html[data-wall="liquid"] .topbar {
  background: var(--cg-glass-2) !important;
  -webkit-backdrop-filter: var(--cg-blur); backdrop-filter: var(--cg-blur);
  box-shadow: var(--cg-edge), var(--cg-drop) !important;
}
@media (max-width: 900px) { html[data-wall="liquid"] .sidebar { background: rgba(246,247,250,.94) !important; } }
@media (min-width: 901px) {
  html[data-wall="liquid"] body:has(.tb-rail-toggle[aria-label="Pin sidebar open"]) .sidebar.is-open {
    background: rgba(246,247,250,.90) !important;
    box-shadow: var(--cg-edge), 0 30px 70px -20px rgba(60,70,100,.34) !important;
  }
}
html[data-wall="liquid"] .tb-user { background: var(--cg-glass) !important; box-shadow: var(--lg-shadow-ctl) !important; }
html[data-wall="liquid"] .navlink:hover { background: rgba(255,255,255,.55) !important; }
html[data-wall="liquid"] .navlink.active {
  background: radial-gradient(90% 70% at 50% 120%, rgba(98,232,239,.55) 0%, rgba(98,232,239,0) 72%), linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 100%) !important;
  box-shadow: var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-hair), 0 8px 16px -8px rgba(40,190,202,.55) !important;
  color: var(--cg-ink) !important;
}
html[data-wall="liquid"] #dl-rail-handle {
  background: radial-gradient(circle at 34% 26%, #fff 0 16%, rgba(255,255,255,.80) 55%, rgba(226,230,238,.9) 100%);
  box-shadow: var(--cg-rim), var(--cg-hair), var(--cg-drop-s);
}

/* ---- buttons ------------------------------------------------------------------------------------- */
/* primary: magenta jewel */
html[data-wall="liquid"] .btn-primary, html[data-wall="liquid"] .lw-btn.p, html[data-wall="liquid"] .login-btn,
html[data-wall="liquid"] #dl-sd-root .sd-btn.p, html[data-wall="liquid"] #dl-sd-root .sd-btn.m, html[data-wall="liquid"] .vh-go {
  background: var(--cg-mag) !important; color: #fff !important; border: 0 !important;
  box-shadow: var(--cg-mag-sh) !important; text-shadow: 0 1px 1px rgba(90,0,40,.25);
}
/* accent: turquoise jewel, dark ink */
html[data-wall="liquid"] .btn-accent, html[data-wall="liquid"] .lw-btn.m {
  background: var(--cg-tq) !important; color: var(--cg-ink) !important; border: 0 !important;
  box-shadow: var(--cg-tq-sh) !important;
}
/* secondary: clear crystal pill */
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,
html[data-wall="liquid"] #dl-sd-root .sd-btn.g {
  background: var(--cg-glass) !important; color: var(--cg-ink) !important;
  box-shadow: var(--lg-shadow-ctl) !important;
}
html[data-wall="liquid"] .btn-primary:hover, html[data-wall="liquid"] .lw-btn.p:hover, html[data-wall="liquid"] .login-btn:hover,
html[data-wall="liquid"] #dl-sd-root .sd-btn.p:hover, html[data-wall="liquid"] .vh-go:hover,
html[data-wall="liquid"] .btn-accent:hover, html[data-wall="liquid"] .lw-btn.m:hover { filter: brightness(1.06) saturate(1.08); }
html[data-wall="liquid"] .btn-primary:active, html[data-wall="liquid"] .lw-btn.p:active, html[data-wall="liquid"] .login-btn:active,
html[data-wall="liquid"] .vh-go:active, html[data-wall="liquid"] .btn-accent:active { filter: brightness(.95); transform: translateY(1px); }
html[data-wall="liquid"] .btn-ghost:hover, html[data-wall="liquid"] .lw-btn.g:hover, html[data-wall="liquid"] .lw-chip:hover,
html[data-wall="liquid"] #dl-sd-root .sd-btn.g:hover { background: rgba(255,255,255,.80) !important; }

/* icon buttons: crystal cubes (rounded squares, as in the reference power key) */
html[data-wall="liquid"] .icon-btn, html[data-wall="liquid"] #dl-wall-btn {
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.45) 100%) !important;
  color: var(--cg-ink) !important;
  box-shadow: var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-prism), var(--cg-hair), var(--cg-drop-s) !important;
}
html[data-wall="liquid"] .tb-icon:hover, html[data-wall="liquid"] .tb-link:hover { background: rgba(255,255,255,.6) !important; }

html[data-wall="liquid"] .pill { border-color: transparent !important; box-shadow: var(--cg-rim), var(--cg-hi), var(--cg-hair), 0 4px 10px -6px rgba(60,70,100,.24) !important; }

/* ---- segmented controls: recessed crystal track, raised crystal bead ----------------------------- */
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,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(160,170,192,.32), inset 0 2px 5px rgba(60,70,100,.12), 0 1px 0 rgba(255,255,255,.95) !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,.82) 100%) !important;
  color: var(--cg-ink) !important;
  box-shadow: var(--cg-rim), var(--cg-hi), var(--cg-thick), var(--cg-prism), var(--cg-hair), var(--cg-drop-s) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-tabs .sd-chip:not(.on) { background: transparent !important; box-shadow: none !important; }

/* ---- fields: crystal tubes (raised, as in the reference search bar) -------------------------------- */
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, html[data-wall="liquid"] .vh-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.48) 100%) !important;
  box-shadow: var(--cg-rim), inset 0 3px 3px -1px rgba(255,255,255,1), inset 0 -4px 8px -4px rgba(140,150,176,.30), var(--cg-prism), var(--cg-hair), var(--cg-drop-s) !important;
}
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,
html[data-wall="liquid"] #dl-sd-root .sd-in:focus, html[data-wall="liquid"] .vh-bar:focus-within {
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--cg-rim), var(--cg-hair), 0 0 0 4px rgba(98,232,239,.45), var(--cg-drop-s) !important;
}

/* ---- switches: turquoise jewel track when on, pearl knob ---------------------------------------------- */
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"] {
  background: rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0 0 1px rgba(160,170,192,.36), inset 0 2px 5px rgba(60,70,100,.14), 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"]::after {
  background: radial-gradient(circle at 34% 28%, #fff 0 30%, #F3F4F7 62%, #DADDE4 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(160,170,192,.30), 0 3px 7px rgba(40,50,80,.28) !important;
}
html[data-wall="liquid"] label:not(.ch-pick) > input[type="checkbox"]:checked {
  background: var(--cg-tq) !important;
  box-shadow: var(--cg-tq-sh) !important;
}
/* plain checkboxes and radios: turquoise accent, matches the reference check tile */
html[data-wall="liquid"] input[type="checkbox"], html[data-wall="liquid"] input[type="radio"] { accent-color: #2BBAC5; }

/* ---- toasts and banners: turquoise ring, as in the reference toast --------------------------------- */
html[data-wall="liquid"] .toast, html[data-wall="liquid"] [role="status"].toast, html[data-wall="liquid"] .sd-toast {
  background: rgba(255,255,255,.88) !important; color: var(--cg-ink) !important;
  border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 3px #62E8EF, inset 0 0 0 4.5px rgba(255,255,255,.9), 0 14px 30px -12px rgba(40,190,202,.6) !important;
}

/* ---- tables ------------------------------------------------------------------------------------------- */
html[data-wall="liquid"] .table tr:hover td, html[data-wall="liquid"] #dl-sd-root .sd-t tr:hover td { background: rgba(255,255,255,.55); }

/* ---- overlays ------------------------------------------------------------------------------------------ */
html[data-wall="liquid"] .overlay, html[data-wall="liquid"] .nav-scrim { background: rgba(228,231,237,.50) !important; }
html[data-wall="liquid"] .modal, html[data-wall="liquid"] .tb-menu {
  background: linear-gradient(170deg, rgba(255,255,255,.92) 0%, rgba(250,251,253,.82) 100%) !important;
  box-shadow: var(--cg-edge), 0 34px 80px -22px rgba(60,70,100,.42) !important;
}

/* ---- login ---------------------------------------------------------------------------------------------- */
html[data-wall="liquid"] .login-right { background: var(--cg-glass) !important; box-shadow: var(--cg-edge), 0 34px 80px -28px rgba(60,70,100,.40) !important; }
html[data-wall="liquid"] .login-left .promise-ic { background: var(--cg-tq) !important; box-shadow: var(--cg-tq-sh) !important; }
html[data-wall="liquid"] .login-left .promise-card:nth-child(even) .promise-ic { background: var(--cg-mag) !important; color: #fff !important; box-shadow: var(--cg-mag-sh) !important; }

/* ---- focus: turquoise, everywhere ------------------------------------------------------------------------ */
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,
html[data-wall="liquid"] #dl-sd-root .sd-btn:focus-visible, html[data-wall="liquid"] #dl-sd-root .sd-chip:focus-visible {
  outline: 3px solid rgba(18,127,137,.70); outline-offset: 3px;
}
html[data-wall="liquid"] * { scrollbar-color: rgba(60,70,100,.26) 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(60,70,100,.30) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

@media (max-width: 700px) { html[data-wall="liquid"] { --cg-blur: blur(12px) saturate(150%); } }
@media (prefers-reduced-motion: reduce) { html[data-wall="liquid"] .btn, html[data-wall="liquid"] .vh-go { transition: none !important; transform: none !important; } }

} /* end @media screen */

/* ---- fallbacks: no blur, or less transparency requested --------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen { html[data-wall="liquid"] { --cg-glass: linear-gradient(170deg, #FCFCFD, #F3F4F7); --cg-glass-2: linear-gradient(170deg, #F9FAFB, #F1F2F5); } }
}
@media screen and (prefers-reduced-transparency: reduce) {
  html[data-wall="liquid"] { --cg-glass: linear-gradient(170deg, #FCFCFD, #F3F4F7); --cg-glass-2: linear-gradient(170deg, #F9FAFB, #F1F2F5); }
}