/* Liquid Glass material: blur + saturate + specular top edge + soft border.
   Uses CSS vars so it adapts to both light and dark themes. */

.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 var(--glass-edge) inset,
    0 -1px 0 rgba(0, 0, 0, 0.04) inset,
    0 18px 40px rgba(0, 0, 0, 0.1);
  isolation: isolate;
}

/* Refractive highlight sweeping the top rim. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--glass-edge) 0%,
    transparent 18%,
    transparent 100%
  );
  opacity: 0.5;
}

@media (max-width: 720px) {
  .glass {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border-radius: var(--r-md);
    box-shadow:
      0 1px 0 var(--glass-edge) inset,
      0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .glass::after {
    opacity: 0.3;
  }
}

.glass-strong {
  background: var(--glass-fill-strong);
}

/* Neumorphic raised plate (skeuomorphic physicality). */
.neu {
  background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
  border-radius: var(--r-md);
  box-shadow: var(--neu-out);
}

.neu-inset {
  background: var(--bg-2);
  border-radius: var(--r-sm);
  box-shadow: var(--neu-inset);
}