/* ============================================
   AIR NET - LIQUID GLASS v5
   ============================================ */

/* ----- BASE GLASS ----- */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 40%, rgba(167,139,250,0.08) 100%);
  backdrop-filter: blur(40px) saturate(220%) brightness(1.15);
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.15);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.55), 0 24px 60px rgba(0,0,0,0.4);
  position: relative;
}
.glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  border-radius: inherit; pointer-events: none;
}

/* ----- GOOEY GROUP ----- */
.goo-group { filter: url(#liquid-goo); position: relative; }

/* ============================================
   GLASS BUTTON
   ============================================ */
.btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background-size: 200% 100%;
  animation: btnshine 4s linear infinite;
  padding: 14px 32px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.32);
  cursor: pointer;
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, rgba(167,139,250,0.4) 0%, rgba(109,40,217,0.6) 50%, rgba(79,70,229,0.5) 100%);
  backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.1);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 12px 40px rgba(109,40,217,0.5);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease, border-color 0.6s ease, background 0.6s ease;
  will-change: transform, box-shadow;
}
.btn-glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
  border-radius: inherit; pointer-events: none; z-index: 1;
}
.btn-glass::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-25deg); pointer-events: none; z-index: 2;
  transition: left 0.6s ease;
}
.btn-glass:hover::after { left: 150%; }
.btn-glass:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255,255,255,0.45);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 0 36px rgba(167,139,250,0.3), 0 22px 55px rgba(109,40,217,0.65), 0 0 60px rgba(167,139,250,0.5);
}
.btn-glass:active { transform: scale(0.97); }

/* small variation */
.btn-glass-small {
  padding: 10px 24px !important;
  font-size: 13px !important;
}
.btn-glass-small::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-25deg); pointer-events: none; z-index: 2;
  transition: left 0.6s ease;
}
.btn-glass-small:hover::after { left: 150%; }

/* DANGER red glass */
.btn-glass-danger {
  background: linear-gradient(135deg, rgba(248,113,113,0.4) 0%, rgba(220,38,38,0.6) 50%, rgba(153,27,27,0.5) 100%);
  border-color: rgba(255,255,255,0.28);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.45), inset 0 0 22px rgba(248,113,113,0.18), 0 12px 40px rgba(220,38,38,0.4);
}
.btn-glass-danger:hover {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.55), inset 0 0 36px rgba(248,113,113,0.3), 0 22px 55px rgba(220,38,38,0.6), 0 0 40px rgba(248,113,113,0.4);
}

/* BLUE glass (for telegram) */
.btn-glass-blue {
  background: linear-gradient(135deg, rgba(125,211,252,0.35) 0%, rgba(36,161,242,0.55) 50%, rgba(14,116,144,0.45) 100%);
  border-color: rgba(255,255,255,0.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 0 22px rgba(125,211,252,0.2), 0 12px 40px rgba(36,161,242,0.4);
}
.btn-glass-blue:hover {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 0 36px rgba(125,211,252,0.3), 0 22px 55px rgba(36,161,242,0.6), 0 0 90px rgba(125,211,252,0.4);
}

/* ============================================
   GLASS CARD (стандартная стеклянная карточка)
   ============================================ */
.glass-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 60%, rgba(109,40,217,0.06) 100%);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.4), 0 16px 44px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.glass-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  pointer-events: none;
}
.glass-card:hover {
  border-color: rgba(167,139,250,0.45);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), 0 24px 60px rgba(109,40,217,0.28);
  transform: translateY(-3px);
}

/* ============================================
   COMPACT TELEGRAM CARD — компактная стеклянная
   с голубой пульсацией и шиммером
   ============================================ */
.tg-card-compact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(125,211,252,0.12) 0%, rgba(36,161,242,0.08) 50%, rgba(167,139,250,0.06) 100%);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(125,211,252,0.3);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 16px 44px rgba(36,161,242,0.18),
    0 0 60px rgba(125,211,252,0.1);
  margin-bottom: 28px;
  overflow: hidden;
  animation: tgCardFade 0.6s ease 0.2s both;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  color: #fff;
}
.tg-card-compact::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.tg-card-compact::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-25deg); pointer-events: none;
  transition: left 1.2s ease;
}
.tg-card-compact:hover::after { left: 200%; }

@keyframes tgCardFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tg-card-compact:hover {
  transform: translateY(-2px);
  border-color: rgba(125,211,252,0.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 0 30px rgba(125,211,252,0.2),
    0 24px 60px rgba(36,161,242,0.35),
    0 0 90px rgba(125,211,252,0.25);
}
.tg-card-compact .tg-icon-wrap {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(125,211,252,0.3), rgba(36,161,242,0.4));
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(36,161,242,0.3);
  animation: tgIconPulse 2.5s ease-in-out infinite;
}
@keyframes tgIconPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(36,161,242,0.3); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 20px rgba(36,161,242,0.55), 0 0 0 4px rgba(125,211,252,0.15); }
}
.tg-card-compact .tg-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.tg-card-compact .tg-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.tg-card-compact .tg-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.tg-card-compact .tg-arrow {
  font-size: 24px;
  font-weight: 300;
  color: rgba(125,211,252,0.7);
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
  z-index: 1;
}
.tg-card-compact:hover .tg-arrow {
  color: rgba(125,211,252,1);
}
.tg-card-compact:hover .tg-arrow {
  transform: translateX(4px);
}
/* bound state — зеленый акцент */
.tg-card-compact.bound {
  background: linear-gradient(135deg, rgba(134,239,172,0.1) 0%, rgba(34,197,94,0.08) 50%, rgba(125,211,252,0.05) 100%);
  border-color: rgba(134,239,172,0.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.4), 0 16px 44px rgba(34,197,94,0.15);
}
.tg-card-compact.bound .tg-icon-wrap {
  background: linear-gradient(135deg, rgba(134,239,172,0.3), rgba(34,197,94,0.4));
  animation: tgIconPulseGreen 3s ease-in-out infinite;
}
@keyframes tgIconPulseGreen {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(34,197,94,0.3); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 20px rgba(34,197,94,0.5), 0 0 0 4px rgba(134,239,172,0.15); }
}
.tg-card-compact.bound .tg-arrow { color: rgba(134,239,172,0.7); }

/* ============================================
   GLASS MODAL
   ============================================ */
.glass-modal {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, rgba(167,139,250,0.06) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
  border: 1.5px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    inset 2px 0 0 rgba(255,255,255,0.18),
    inset -2px 0 0 rgba(255,255,255,0.08),
    0 50px 100px -20px rgba(0,0,0,0.7),
    0 0 120px rgba(100,60,255,0.2);
}
.glass-modal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  border-radius: inherit; pointer-events: none; z-index: 0;
}
.glass-modal::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(167,139,250,0.6) 0px, rgba(167,139,250,0.3) 2px, transparent 6px),
    linear-gradient(270deg, rgba(125,211,252,0.5) 0px, rgba(125,211,252,0.2) 2px, transparent 6px),
    linear-gradient(180deg, rgba(232,121,249,0.4) 0px, rgba(232,121,249,0.15) 2px, transparent 6px),
    linear-gradient(0deg, rgba(167,139,250,0.45) 0px, rgba(167,139,250,0.18) 2px, transparent 6px);
}
.glass-modal > * { position: relative; z-index: 1; }

/* ----- INPUT TRANSITIONS ----- */
.smooth-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.smooth-collapse.open { grid-template-rows: 1fr; }
.smooth-collapse > * { overflow: hidden; min-height: 0; }

/* Кнопка-вторичная (Назад) — стекло без цвета */
.btn-glass-back {
  background: linear-gradient(135deg, rgba(40,40,55,0.5) 0%, rgba(25,25,40,0.6) 100%) !important;
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.25), 0 8px 24px rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.85) !important;
}
.btn-glass-back:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
  border-color: rgba(255,255,255,0.25);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 16px 36px rgba(0,0,0,0.3);
}

@keyframes btnshine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.btn-glass-back.btn-glass-small,
.btn-glass-small.btn-glass-back {
  padding: 10px 24px !important;
  font-size: 13px !important;
  margin-left: 24px;
}

.btn-glass.btn-glass-small,
.btn-glass-small.btn-glass {
  padding: 10px 24px !important;
  font-size: 13px !important;
  margin-left: 24px;
}