/*! ============================================================
 *  Liquid UI  —  Apple "Liquid Glass" ported to the Web
 *  v2.0  ·  ui.uptrix.fun  ·  MIT
 *
 *  A dependency-free component library that recreates Apple's
 *  Liquid Glass material (iOS 26 / macOS Tahoe): translucency,
 *  real-time refraction (lensing), specular rim light, chromatic
 *  edge dispersion and fluid spring motion. Use it like Material UI.
 *
 *  The lensing is rendered by liquid-ui.js on .lq-refract surfaces
 *  (Chromium). Everywhere else the CSS below is the graceful glass
 *  fallback. Glass is for the floating layer — content stays solid.
 * ============================================================ */

/* ----------------------------------------------------------------
 *  1.  Design tokens
 * ---------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --lq-accent: #0a84ff;
  --lq-accent-press: #0060df;
  --lq-on-accent: #ffffff;

  --lq-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lq-text: #14161c;
  --lq-text-2: rgba(40, 42, 52, 0.62);
  --lq-text-3: rgba(40, 42, 52, 0.32);

  /* The glass material — kept translucent so the lens can refract
     through it. Blur + saturate is the fallback frost. */
  --lq-glass-fill:        rgba(255, 255, 255, 0.16);
  --lq-glass-fill-strong: rgba(255, 255, 255, 0.26);
  --lq-glass-fill-clear:  rgba(255, 255, 255, 0.08);
  /* Sliding-thumb fill (segmented / tab bar). Solid-ish (no backdrop-filter)
     so animating its scale never re-rasterizes a filter → no flicker. */
  --lq-thumb-fill: rgba(255, 255, 255, 0.92);
  /* Solid fallbacks used on mobile where backdrop-filter is disabled. */
  --lq-solid: rgba(255, 255, 255, 0.74);
  --lq-solid-strong: rgba(255, 255, 255, 0.86);
  --lq-blur: 6px;          /* fallback frost; lens surfaces add their own */
  --lq-blur-strong: 12px;  /* lower radius = cheaper backdrop-filter */
  --lq-sat: 180%;

  /* Specular rim: a bright hairline up top, faint full outline,
     soft self-shadow at the bottom. This is what reads as "glass". */
  --lq-rim:
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0.5px -0.5px rgba(255, 255, 255, 0.55),
    inset -1px 0 0.5px -0.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.28),
    inset 0 -10px 14px -12px rgba(0, 0, 0, 0.22);
  --lq-rim-strong:
    inset 0 1.5px 0.5px 0 rgba(255, 255, 255, 1),
    inset 1px 0 1px -0.5px rgba(255, 255, 255, 0.7),
    inset -1px 0 1px -0.5px rgba(255, 255, 255, 0.7),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
    inset 0 -16px 22px -16px rgba(0, 0, 0, 0.28);

  --lq-shadow-1: none;
  --lq-shadow-2: none;
  --lq-shadow-3: none;

  --lq-r-xs: 10px; --lq-r-sm: 14px; --lq-r-md: 20px;
  --lq-r-lg: 28px; --lq-r-xl: 40px; --lq-r-pill: 999px;

  /* smooth decelerate — no acceleration-in, no overshoot/bounce */
  --lq-spring: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --lq-ease:   300ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --lq-fill-2: rgba(120, 120, 135, 0.16);
  --lq-fill-3: rgba(120, 120, 135, 0.26);
  --lq-sep: rgba(40, 42, 52, 0.14);
}

[data-theme="dark"] {
  --lq-text: #f4f5f9;
  --lq-text-2: rgba(235, 238, 248, 0.62);
  --lq-text-3: rgba(235, 238, 248, 0.34);

  --lq-glass-fill:        rgba(28, 30, 38, 0.30);
  --lq-glass-fill-strong: rgba(34, 36, 46, 0.42);
  --lq-glass-fill-clear:  rgba(255, 255, 255, 0.05);
  --lq-thumb-fill: rgba(124, 126, 140, 0.7);
  --lq-solid: rgba(38, 40, 50, 0.86);
  --lq-solid-strong: rgba(46, 48, 60, 0.94);

  --lq-rim:
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.34),
    inset 1px 0 0.5px -0.5px rgba(255, 255, 255, 0.18),
    inset -1px 0 0.5px -0.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
    inset 0 -12px 16px -12px rgba(0, 0, 0, 0.5);
  --lq-rim-strong:
    inset 0 1.5px 0.5px 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 1px -0.5px rgba(255, 255, 255, 0.24),
    inset -1px 0 1px -0.5px rgba(255, 255, 255, 0.24),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 -16px 22px -16px rgba(0, 0, 0, 0.6);

  --lq-shadow-1: none;
  --lq-shadow-2: none;
  --lq-shadow-3: none;

  --lq-fill-2: rgba(140, 142, 160, 0.20);
  --lq-fill-3: rgba(140, 142, 160, 0.30);
  --lq-sep: rgba(235, 238, 248, 0.12);
}

/* ----------------------------------------------------------------
 *  2.  The glass material  (.lq-glass)
 * ---------------------------------------------------------------- */
.lq-glass {
  position: relative;
  background: var(--lq-glass-fill);
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim), var(--lq-shadow-1);
  border-radius: var(--lq-r-md);
  color: var(--lq-text);
  isolation: isolate;
}
/* Moving specular sweep — a thin highlight, not a milky wash. */
.lq-glass.lq-sheen::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 12%,
    rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%,
    rgba(255,255,255,.10) 88%, rgba(255,255,255,.4) 100%);
  mix-blend-mode: screen; opacity: .6; pointer-events: none; z-index: 3;
}
.lq-glass-strong {
  background: var(--lq-glass-fill-strong);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim-strong), var(--lq-shadow-2);
}
.lq-glass-clear { background: var(--lq-glass-fill-clear); }

/* When the JS engine attaches a real lens, drop the flat fallback fill
   a touch more so the refraction shows through. */
.lq-lens-on { background: var(--lq-glass-fill-clear); }

/* ----------------------------------------------------------------
 *  3.  Buttons
 * ---------------------------------------------------------------- */
.lq-btn {
  --_bg: var(--lq-glass-fill-strong);
  font: 600 16px/1 var(--lq-font); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: none; border-radius: var(--lq-r-pill);
  color: var(--lq-text); background: var(--_bg); text-decoration: none;
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim), var(--lq-shadow-1);
  cursor: pointer; user-select: none; position: relative; isolation: isolate;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform var(--lq-spring), box-shadow var(--lq-ease),
              background var(--lq-ease), filter var(--lq-ease);
}
.lq-btn:hover { box-shadow: var(--lq-rim), var(--lq-shadow-2); }
.lq-btn:active { transform: scale(0.96); }
.lq-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lq-accent) 55%, transparent); outline-offset: 3px; }

.lq-btn--accent {
  --_bg: linear-gradient(180deg,
    color-mix(in srgb, var(--lq-accent) 88%, white) 0%, var(--lq-accent) 100%);
  color: var(--lq-on-accent);
  /* opaque fill — drop the costly backdrop blur, it's invisible here */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--lq-rim);
}
.lq-btn--accent:active { --_bg: var(--lq-accent-press); }
.lq-btn--plain {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; color: var(--lq-accent); padding: 13px 14px;
}
.lq-btn--plain:hover { background: var(--lq-fill-2); filter: none; }
.lq-btn--sm { font-size: 14px; padding: 9px 16px; }
.lq-btn--lg { font-size: 18px; padding: 17px 30px; }
.lq-btn--icon { padding: 0; width: 46px; height: 46px; font-size: 19px; }
.lq-btn--block { display: flex; width: 100%; }

/* ----------------------------------------------------------------
 *  4.  Segmented control
 * ---------------------------------------------------------------- */
.lq-segmented {
  --lq-pad: 4px;
  display: inline-flex; position: relative; padding: var(--lq-pad); gap: 2px;
  background: var(--lq-fill-2); border-radius: var(--lq-r-pill);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
/* Concentric: inner radius = outer − padding (capsule → capsule). */
.lq-segmented__thumb {
  position: absolute; top: var(--lq-pad); bottom: var(--lq-pad); left: 0; width: 0;
  /* solid-ish fill (no backdrop-filter) so scaling it never re-rasterizes a
     filter — that was the source of the flicker / square tiles on press. */
  background: var(--lq-thumb-fill);
  border-radius: calc(var(--lq-r-pill) - var(--lq-pad)); box-shadow: var(--lq-rim), var(--lq-shadow-1);
  /* plain ease — no spring/overshoot */
  transform-origin: center;
  transition: transform var(--lq-ease), width var(--lq-ease); z-index: 0;
}
.lq-segmented { touch-action: pan-y; }
/* no tap-highlight square / text selection on the sliding controls */
.lq-segmented, .lq-segmented button, .lq-tabbar, .lq-tabbar button, .lq-switch, .lq-switch input {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* no focus outline rectangle from pointer/touch (keyboard still gets it via :focus-visible) */
.lq-segmented button:focus:not(:focus-visible),
.lq-tabbar button:focus:not(:focus-visible),
.lq-btn:focus:not(:focus-visible) { outline: none; }
.lq-segmented button {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  font: 600 14px var(--lq-font); color: var(--lq-text); padding: 8px 18px;
  border-radius: calc(var(--lq-r-pill) - var(--lq-pad)); transition: color var(--lq-ease);
}
.lq-segmented button[aria-selected="false"] { color: var(--lq-text-2); }

/* ----------------------------------------------------------------
 *  5.  Switch
 * ---------------------------------------------------------------- */
.lq-switch { position: relative; display: inline-block; width: 70px; height: 34px; flex: none;
  touch-action: pan-y; /* let us own the horizontal drag, keep vertical scroll */ }
.lq-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lq-switch__track { position: absolute; inset: 0; border-radius: var(--lq-r-pill);
  background: var(--lq-fill-3); box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
  transition: background var(--lq-ease); }
/* Liquid Glass thumb: a horizontal capsule (oval) that just slides (no grow). */
.lq-switch__thumb { position: absolute; top: 3px; left: 3px; width: 42px; height: 28px; border-radius: var(--lq-r-pill);
  background: #fff; transform-origin: center; z-index: 1; transform: translateX(0);
  transition: transform var(--lq-ease); }
.lq-switch input:checked ~ .lq-switch__track { background: var(--lq-accent); }
.lq-switch input:checked ~ .lq-switch__thumb { transform: translateX(22px); }
.lq-switch input:focus-visible ~ .lq-switch__track { outline: 3px solid color-mix(in srgb, var(--lq-accent) 55%, transparent); outline-offset: 2px; }

/* ----------------------------------------------------------------
 *  6.  Checkbox & Radio
 * ---------------------------------------------------------------- */
.lq-check, .lq-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 16px var(--lq-font); color: var(--lq-text); }
.lq-check input, .lq-radio input { position: absolute; opacity: 0; }
.lq-check__box, .lq-radio__box { width: 24px; height: 24px; flex: none; border-radius: 8px;
  background: var(--lq-fill-2); box-shadow: var(--lq-rim); display: grid; place-items: center;
  transition: background var(--lq-ease), transform var(--lq-spring); }
.lq-radio__box { border-radius: 50%; }
.lq-check__box svg, .lq-radio__box svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3;
  fill: none; opacity: 0; transform: scale(.4); transition: opacity var(--lq-ease), transform var(--lq-spring); }
.lq-check input:checked ~ .lq-check__box, .lq-radio input:checked ~ .lq-radio__box { background: var(--lq-accent); }
.lq-check input:checked ~ .lq-check__box svg, .lq-radio input:checked ~ .lq-radio__box svg { opacity: 1; transform: scale(1); }
.lq-check input:active ~ .lq-check__box, .lq-radio input:active ~ .lq-radio__box { transform: scale(.88); }

/* ----------------------------------------------------------------
 *  7.  Slider
 * ---------------------------------------------------------------- */
.lq-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: none; cursor: pointer; }
.lq-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--lq-accent) var(--_p,50%), var(--lq-fill-3) var(--_p,50%)); }
.lq-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--lq-fill-3); }
.lq-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lq-accent); }
/* Liquid Glass knob: a horizontal capsule (oval), matched to the switch thumb (42×28). */
.lq-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 42px; height: 28px; margin-top: -11px;
  border-radius: var(--lq-r-pill); background: #fff; box-shadow: var(--lq-rim);
  transition: transform var(--lq-spring), background var(--lq-ease); }
.lq-slider::-moz-range-thumb { width: 42px; height: 28px; border: none; border-radius: var(--lq-r-pill); background: #fff;
  transition: transform var(--lq-spring), background var(--lq-ease); }
/* Grab: the knob grows and turns into translucent Liquid Glass. */
.lq-slider:active::-webkit-slider-thumb { transform: scale(1.18); background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%); }
.lq-slider:active::-moz-range-thumb { transform: scale(1.18); background: rgba(255, 255, 255, 0.45); }

/* ----------------------------------------------------------------
 *  8.  Text field & search
 * ---------------------------------------------------------------- */
.lq-field { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-radius: var(--lq-r-sm); background: var(--lq-glass-fill-strong);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim); transition: box-shadow var(--lq-ease); }
.lq-field:focus-within { box-shadow: var(--lq-rim), 0 0 0 3px color-mix(in srgb, var(--lq-accent) 35%, transparent); }
.lq-field input, .lq-field textarea { flex: 1; border: none; background: none; outline: none;
  font: 400 16px var(--lq-font); color: var(--lq-text); width: 100%; resize: vertical; }
.lq-field input::placeholder, .lq-field textarea::placeholder { color: var(--lq-text-3); }
.lq-field--search { border-radius: var(--lq-r-pill); }
.lq-field svg { width: 18px; height: 18px; fill: var(--lq-text-2); flex: none; }

/* ----------------------------------------------------------------
 *  9.  Card
 * ---------------------------------------------------------------- */
.lq-card { padding: 22px; border-radius: var(--lq-r-lg); background: var(--lq-glass-fill);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim), var(--lq-shadow-2); color: var(--lq-text); }

/* ----------------------------------------------------------------
 *  10. Chips & badges
 * ---------------------------------------------------------------- */
.lq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--lq-r-pill);
  font: 600 13px var(--lq-font); color: var(--lq-text); background: var(--lq-glass-fill-strong); box-shadow: var(--lq-rim);
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); }
.lq-chip--accent { background: var(--lq-accent); color: var(--lq-on-accent); }
.lq-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ff3b30;
  color: #fff; font: 700 12px/20px var(--lq-font); text-align: center; display: inline-block; }

/* ----------------------------------------------------------------
 *  11. Progress & spinner
 * ---------------------------------------------------------------- */
.lq-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--lq-fill-3); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.lq-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--lq-accent);
  transition: width var(--lq-ease); }
.lq-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lq-fill-3);
  border-top-color: var(--lq-accent); animation: lq-spin .8s linear infinite; }
@keyframes lq-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
 *  12. Grouped inset list
 * ---------------------------------------------------------------- */
.lq-list { border-radius: var(--lq-r-md); overflow: hidden; background: var(--lq-glass-fill);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim), var(--lq-shadow-1); }
.lq-list__row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; color: var(--lq-text);
  font: 500 16px var(--lq-font); border-bottom: 0.5px solid var(--lq-sep); }
.lq-list__row:last-child { border-bottom: none; }
.lq-list__row .lq-spacer { margin-left: auto; }

/* ----------------------------------------------------------------
 *  13. Navbar & tab bar
 * ---------------------------------------------------------------- */
.lq-navbar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: var(--lq-r-pill);
  background: var(--lq-glass-fill-strong); box-shadow: var(--lq-rim), var(--lq-shadow-2);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat)); backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat)); }
.lq-tabbar { --lq-pad: 8px; position: relative; display: inline-flex; gap: 4px; padding: var(--lq-pad); border-radius: var(--lq-r-pill);
  background: var(--lq-glass-fill-strong); box-shadow: var(--lq-rim), var(--lq-shadow-2);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat)); backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat)); }
/* Sliding glass thumb — same behaviour as the segmented control. */
.lq-tabbar { touch-action: pan-y; }
.lq-tabbar__thumb {
  position: absolute; top: var(--lq-pad); bottom: var(--lq-pad); left: 0; width: 0;
  background: var(--lq-thumb-fill);   /* solid-ish, no backdrop-filter (flicker-free) */
  border-radius: calc(var(--lq-r-pill) - var(--lq-pad)); box-shadow: var(--lq-rim), var(--lq-shadow-1);
  transform-origin: center;
  transition: transform var(--lq-ease), width var(--lq-ease); z-index: 0; }
/* Concentric: inner radius = outer radius − padding. The bar is a capsule,
   so its inner buttons are capsules too (the formula resolves to a pill). */
.lq-tabbar button { position: relative; z-index: 1; border: none; background: none; cursor: pointer; display: grid; place-items: center; gap: 3px;
  padding: 8px 16px; border-radius: calc(var(--lq-r-pill) - var(--lq-pad)); color: var(--lq-text-2); font: 600 11px var(--lq-font);
  transition: color var(--lq-ease); }
.lq-tabbar button svg { width: 24px; height: 24px; fill: currentColor; }
.lq-tabbar button[aria-selected="true"] { color: var(--lq-accent); }

/* ----------------------------------------------------------------
 *  14. Modal / sheet + tooltip
 * ---------------------------------------------------------------- */
.lq-backdrop { position: fixed; inset: 0; background: rgba(10,12,20,.34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity var(--lq-ease); z-index: 1000; }
.lq-backdrop.lq-open { opacity: 1; pointer-events: auto; }
.lq-modal { width: min(420px, 92vw); padding: 26px; border-radius: var(--lq-r-xl);
  background: var(--lq-glass-fill-strong); color: var(--lq-text);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--lq-rim-strong), var(--lq-shadow-3);
  transform: scale(.9) translateY(10px); transition: transform var(--lq-spring); }
.lq-backdrop.lq-open .lq-modal { transform: none; }

.lq-tooltip { display: inline-block; position: relative; }
.lq-tooltip__bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 6px;
  white-space: nowrap; padding: 8px 13px; border-radius: var(--lq-r-sm); font: 600 13px var(--lq-font);
  color: var(--lq-text); background: var(--lq-glass-fill-strong);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--lq-rim), var(--lq-shadow-2); opacity: 0; pointer-events: none;
  transition: opacity var(--lq-ease), translate var(--lq-spring); }
.lq-tooltip:hover .lq-tooltip__bubble { opacity: 1; translate: -50% 0; }

/* ----------------------------------------------------------------
 *  15. Toast
 * ---------------------------------------------------------------- */
.lq-toast-wrap { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; display: grid; gap: 10px; z-index: 1100; pointer-events: none; }
.lq-toast { pointer-events: auto; padding: 14px 20px; border-radius: var(--lq-r-pill);
  background: var(--lq-glass-fill-strong); color: var(--lq-text); font: 600 15px var(--lq-font);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat)); backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-sat));
  box-shadow: var(--lq-rim), var(--lq-shadow-2); animation: lq-toast-in var(--lq-spring) both; }
@keyframes lq-toast-in { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.lq-toast.lq-out { animation: lq-toast-out var(--lq-ease) forwards; }
@keyframes lq-toast-out { to { opacity: 0; transform: translateY(20px) scale(.92); } }

/* ----------------------------------------------------------------
 *  16. Accessibility
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* Honour Reduce Transparency: replace glass with a solid surface. */
@media (prefers-reduced-transparency: reduce) {
  .lq-glass, .lq-glass-strong, .lq-btn, .lq-field, .lq-card, .lq-list,
  .lq-navbar, .lq-tabbar, .lq-modal, .lq-toast, .lq-chip {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: Canvas !important; color: CanvasText !important;
  }
}