@font-face {
  font-family: "Gambarino";
  src: url("/fonts/Gambarino-Regular.woff2") format("woff2"),
    url("/fonts/Gambarino-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid #0068d6;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Liquid glass — layered hierarchy. Heavy for floating chrome (sidebar, modals,
   popovers), standard for content cards, film for dense/readability-critical
   surfaces (tables, form controls). Each tier layers an inset top highlight, a
   faint full inner rim, a cool inset bottom shade (reads as material thickness),
   and an ambient drop shadow — modeled after real frosted-glass panels rather
   than a flat blur+border. Lower blur radius + higher saturate throughout:
   cheaper on GPU than a large blur radius alone. */
.lp-glass-heavy {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 -10px 24px -20px rgba(20, 35, 60, 0.35) inset,
    0 20px 54px -20px rgba(15, 35, 60, 0.16),
    0 3px 10px -6px rgba(15, 35, 60, 0.08);
}
.lp-glass-standard {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 -8px 20px -18px rgba(20, 35, 60, 0.3) inset,
    0 10px 30px -16px rgba(15, 35, 60, 0.1);
}
.lp-glass-film {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
}

/* Flat, no-blur substitute for .lp-glass-film — same light-neutral read, but
   no backdrop-filter cost. For small tiles repeated many times at once
   (picker grids, per-row stat chips), where concurrent blur regions add up
   and visibly slow down scroll/paint. */
.lp-tint {
  background: rgba(244, 246, 249, 0.92);
  border: 1px solid rgba(10, 10, 10, 0.05);
}

/* Recessed "well" — no blur, just a soft inset groove + top highlight edge.
   For search bars and small in-card metric wells, where the surface should
   read as pressed-in rather than floating like a glass panel. */
.lp-glass-inset {
  background: rgba(243, 246, 249, 0.75);
  border: 1px solid rgba(10, 10, 10, 0.07);
  box-shadow: 0 1px 3px 0 rgba(15, 35, 60, 0.08) inset, 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* No backdrop-filter support: fall back to solid, fully opaque surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-glass-heavy, .lp-glass-standard, .lp-glass-film {
    background: #ffffff;
  }
}

/* Respect the user's transparency preference over our own aesthetic call. */
@media (prefers-reduced-transparency: reduce) {
  .lp-glass-heavy, .lp-glass-standard, .lp-glass-film {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Additive modifier: cyan bloom for hero/interactive glass. */
.lp-glass-glow {
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 -10px 26px -20px rgba(20, 35, 60, 0.35) inset,
    0 18px 50px -18px rgba(0, 104, 214, 0.28),
    0 3px 12px -6px rgba(0, 104, 214, 0.2);
}

/* Additive modifier: interactive lift for tappable/hoverable glass surfaces. */
.lp-glass-interactive {
  cursor: pointer;
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-glass-interactive:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 -10px 26px -20px rgba(20, 35, 60, 0.4) inset,
    0 24px 56px -20px rgba(15, 35, 60, 0.2),
    0 4px 14px -6px rgba(0, 104, 214, 0.18);
}

/* Additive modifier: refractive edge + slow specular sweep for the "liquid" feel. */
.lp-glass-sheen {
  position: relative;
}
.lp-glass-sheen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.25) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(94, 196, 255, 0.15) 70%,
    rgba(0, 104, 214, 0.4)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.lp-glass-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.5;
  animation: lp-sheen-sweep 9s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  z-index: 0;
}
@keyframes lp-sheen-sweep {
  0% { background-position: 160% 0; }
  55%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-glass-sheen::after { animation: none; opacity: 0.28; }
}

/* Ambient background — layered radial-gradient color field, no blur filter.
   Softness comes from multi-stop falloff instead of a Gaussian blur, which is
   the expensive part of the old shader-style background. Transform-only drift
   keeps every frame on the compositor thread (cheap even fullscreen).
   Cool blues only, top to bottom — no warm/teal accents mixed in. */
.lp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5fb 0%, #e4eef6 100%);
}
.lp-ambient-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.lp-ambient-blob-1 {
  width: 900px;
  height: 900px;
  top: -18%;
  left: -14%;
  background: radial-gradient(circle, rgba(94, 196, 255, 0.42) 0%, rgba(94, 196, 255, 0.16) 35%, rgba(94, 196, 255, 0) 68%);
}
.lp-ambient-blob-2 {
  width: 980px;
  height: 980px;
  top: 12%;
  right: -22%;
  background: radial-gradient(circle, rgba(0, 104, 214, 0.28) 0%, rgba(0, 104, 214, 0.1) 38%, rgba(0, 104, 214, 0) 68%);
}
.lp-ambient-blob-3 {
  width: 820px;
  height: 820px;
  bottom: -20%;
  left: 18%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, rgba(59, 130, 246, 0.1) 36%, rgba(59, 130, 246, 0) 66%);
}

@keyframes lp-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.06); }
}
@keyframes lp-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 55px) scale(1.05); }
}
@keyframes lp-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -50px) scale(1.08); }
}
.lp-drift-1 { animation: lp-drift-1 75s ease-in-out infinite; }
.lp-drift-2 { animation: lp-drift-2 90s ease-in-out infinite; }
.lp-drift-3 { animation: lp-drift-3 65s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lp-drift-1, .lp-drift-2, .lp-drift-3 { animation: none; }
}