/* ═══ LIQUID GLASS SYSTEM ═══ */
/* Frosted glass with light refraction, shine edge, and depth */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
}
/* Shine highlight on top edge */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-shine);
  pointer-events: none;
  z-index: 0;
}

.glass-2 {
  background: var(--glass-bg2);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--glass-border);
}

.glass-3 {
  background: var(--glass-bg3);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--glass-border-hi);
}

.glass-btn {
  background: var(--glass-bg2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.glass-btn:active {
  transform: scale(.92);
  background: var(--glass-bg3);
}

.glass-accent {
  background: var(--accent-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--accent-border);
  box-shadow: 0 2px 12px rgba(91,154,255,.1), inset 0 1px 0 rgba(255,255,255,.08);
}