/* ═══ v690 (üveg 14): A WEBOLDAL FOLYÉKONY ÜVEGE ═══════════════════════════════════════════════
   Az app v682-es üvegének a weboldali párja — hogy az app és a weboldal egy nyelven beszéljen:
     1) háttérfény: három lágy fényfolt a lap mögött (rögzített, nem mozog, nem eszi az akkut);
     2) üveg-fejléc: a felső sáv áttetsző és elmosott, a tartalom alatta csúszik;
     3) üveg-kártyák: a .card és .icard áttetsző, fényes éllel, ferde csillanással, lágy árnyékkal;
     4) a sötét sávok (.band, .btn.primary) tömörek maradnak — ott a fehér felirat olvashatósága a tét.
   Minden oldal ugyanezt a fájlt tölti be a saját stílusa UTÁN (a <link> a </head> előtt), így a
   régi szabályokat felülírja, a tartalmat nem érinti. A színek a weboldal :root-tokenjeiből.
   „Kevesebb átlátszóság” / „nagyobb kontraszt” mellett minden tömör. A kontrasztot a check-contrast méri
   (a legrosszabb fény-keveréken: mind a három folt egy ponton). */
:root { --uveg-kartya: 82%; --uveg-feny-menta: 70%; --uveg-feny-levendula: 55%; --uveg-feny-homok: 60%; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 40% at 0% 0%, color-mix(in srgb, #DCEFE6 var(--uveg-feny-menta), transparent) 0%, transparent 70%),
    radial-gradient(60% 45% at 100% 30%, color-mix(in srgb, #E6E0FA var(--uveg-feny-levendula), transparent) 0%, transparent 70%),
    radial-gradient(80% 40% at 30% 100%, color-mix(in srgb, #FBF1DD var(--uveg-feny-homok), transparent) 0%, transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, #FFFFFF 62%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(15, 46, 46, 0.06), 0 8px 24px -18px rgba(15, 46, 46, 0.25);
}
.card, .icard {
  background-color: color-mix(in srgb, #FFFFFF var(--uveg-kartya), transparent);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%);
  border-color: rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 14px 34px -14px rgba(15, 46, 46, 0.18), 0 1px 3px rgba(15, 46, 46, 0.05);
}
.btn.plain {
  background-color: color-mix(in srgb, #FFFFFF 70%, transparent);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px -10px rgba(15, 46, 46, 0.3);
}
.btn.primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -12px rgba(15, 46, 46, 0.55);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body { background-image: none; }
  .top { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
  .card, .icard { background-color: var(--card); background-image: none; border-color: var(--line); }
  .btn.plain { background-color: #FFFFFF; border-color: var(--line); }
}