/* Стеклянные поверхности: размытие фона, световая кромка сверху, мягкая тень. */

.glass, .card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.card { padding: 16px; }

/* Блик по верхней кромке — то, что делает стекло «жидким». */
.glass::before, .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.06) 38%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass::before,
  :root:not([data-theme="light"]) .card::before { opacity: 0.38; }
}
:root[data-theme="dark"] .glass::before,
:root[data-theme="dark"] .card::before { opacity: 0.38; }

/* Плитка без размытия — для вложенных блоков внутри стекла. */
.tile {
  background: var(--glass-soft);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: 12px;
}

/* Устройства без backdrop-filter (старые вебвью) — просто плотный фон. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass, .card { background: var(--glass-strong); }
}