/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS · общий модуль «жидкого стекла»
   Подключается и на лендинге, и в приложении.
   Позиция блика управляется из JS через --mx / --my (px).
   ═══════════════════════════════════════════════════════════ */

.lg {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 45%, rgba(0, 140, 220, 0.06));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(2, 8, 20, 0.45),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    0 14px 44px rgba(1, 6, 16, 0.5);
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s ease;
  transform: translateZ(0);
}

/* блуждающий блик под курсором */
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(160px circle at var(--mx) var(--my),
    rgba(180, 235, 255, 0.28), rgba(0, 190, 255, 0.10) 45%, transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.lg:hover::before { opacity: 1; }

/* «линза» — тонкое преломление по кромке */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 22%),
    linear-gradient(0deg, rgba(0, 200, 255, 0.07), transparent 30%);
  mix-blend-mode: screen;
}

.lg:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(2, 8, 20, 0.45),
    0 22px 60px rgba(0, 90, 180, 0.28);
}
.lg:active { transform: translateY(-1px) scale(.985); transition-duration: .1s; }

/* фокус с клавиатуры — заметный, но стеклянный */
.lg:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(0, 200, 255, 0.65),
    0 14px 44px rgba(1, 6, 16, 0.5);
}

/* акцентная (основное действие) — стекло, подкрашенное фирменным синим */
.lg--primary {
  background:
    linear-gradient(145deg, rgba(0, 150, 235, 0.42), rgba(0, 105, 190, 0.22) 55%, rgba(0, 229, 255, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(210, 245, 255, 0.4),
    inset 0 -1px 1px rgba(0, 30, 60, 0.5),
    0 14px 44px rgba(0, 110, 200, 0.35);
}
.lg--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(220, 248, 255, 0.5),
    0 22px 64px rgba(0, 150, 235, 0.45);
}

/* компактная кнопка */
.lg--btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 18px;
  font-weight: 700;
  color: #EAF4FF;
}

/* тихая, почти невидимая */
.lg--quiet {
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 26px rgba(1,6,16,.35);
}

/* ═══ СВЕТЛАЯ ТЕМА · белое стекло с фиолетово-мятными бликами ═══ */

html[data-theme="light"] .lg {
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.55) 45%, rgba(91,47,209,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(40,30,90,.07),
    0 14px 44px rgba(43,35,110,.11);
}
html[data-theme="light"] .lg::before {
  background: radial-gradient(160px circle at var(--mx) var(--my),
    rgba(91,47,209,.13), rgba(0,217,160,.08) 45%, transparent 70%);
}
html[data-theme="light"] .lg::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), transparent 22%),
    linear-gradient(0deg, rgba(91,47,209,.04), transparent 30%);
  mix-blend-mode: normal;
}
html[data-theme="light"] .lg:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(40,30,90,.07),
    0 22px 60px rgba(91,47,209,.16);
}
html[data-theme="light"] .lg:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 2px rgba(91,47,209,.6),
    0 14px 44px rgba(43,35,110,.12);
}
html[data-theme="light"] .lg--quiet {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 26px rgba(43,35,110,.07);
}
html[data-theme="light"] .lg--btn { color: #1D2140; }
/* основное действие — мятная кнопка, как «Участвую» на сайте хакатона */
html[data-theme="light"] .lg--primary {
  background: linear-gradient(145deg, #45F6C6, #00E3A5 60%, #00CE96);
  color: #05301F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 1px rgba(0,80,55,.18),
    0 14px 40px rgba(0,200,150,.30);
}
html[data-theme="light"] .lg--primary.lg--btn { color: #05301F; }
html[data-theme="light"] .lg--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 22px 60px rgba(0,200,150,.4);
}