/*!
 * Glass UI — buttons & controls styles (me20 Studio, https://me20.studio)
 * Put data-glass="liquid" | "aurora" | "mobile" on <body> or any wrapper to pick the style.
 */
@property --gu-ang { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

:root, [data-glass] {
  --gu-text: #fff;
  --gu-accent: #7fffe0;
  --gu-accent-ink: #06121a;
  --gu-tint: rgba(255, 255, 255, .16);
  --gu-border: rgba(255, 255, 255, .38);
  --gu-blur: 16px;
  --gu-radius: 999px;
  --gu-h: 44px;
  --gu-pad: 20px;
  --gu-font: 15px;
  --gu-ring: none;
}
[data-glass="liquid"] { --gu-accent: #7fffe0; }


@keyframes gu-spin { to { --gu-ang: 360deg; } }

/* ---- Buttons: <button class="gui-btn gui-btn--clear|--tinted|--neon"> ---- */
.gui-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--gu-h); padding: 0 var(--gu-pad); border-radius: var(--gu-radius);
  font: 600 var(--gu-font)/1 inherit; color: var(--gu-text); text-decoration: none; cursor: pointer; isolation: isolate;
  background: var(--gu-tint); border: 1px solid var(--gu-border);
  backdrop-filter: blur(var(--gu-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--gu-blur)) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 26px -12px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background .25s;
}
.gui-btn::before { /* top highlight */
  content: ""; position: absolute; inset: 1px 14px 55% 14px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
}
.gui-btn--neon::before { opacity: .25; }
.gui-btn::after { /* aurora ring (only when the style sets --gu-ring) */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
  background: var(--gu-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gui-btn:hover { transform: translateY(-2px); }
.gui-btn:active { transform: translateY(0) scale(.97); }
.gui-btn:focus-visible { outline: 2px solid var(--gu-accent); outline-offset: 3px; }
.gui-btn[disabled], .gui-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.gui-btn--clear { background: rgba(255, 255, 255, .06); }
.gui-btn--tinted {
  color: var(--gu-accent-ink); border-color: color-mix(in srgb, var(--gu-accent) 70%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gu-accent) 92%, #fff), color-mix(in srgb, var(--gu-accent) 70%, #000));
}
.gui-btn--neon {
  border-color: color-mix(in srgb, var(--gu-accent) 75%, transparent); color: var(--gu-accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gu-accent) 70%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gu-accent) 40%, transparent), inset 0 0 14px color-mix(in srgb, var(--gu-accent) 22%, transparent);
}
.gui-btn--neon:hover { box-shadow: 0 0 34px color-mix(in srgb, var(--gu-accent) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--gu-accent) 30%, transparent); }
.gui-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {

  .gui-btn { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gui-btn { background: rgba(30, 32, 44, .9); }
}

/* ---- Cards: <article class="gui-card">, <div class="gui-price [gui-price--featured]">, <div class="gui-panel"> ---- */
.gui-card, .gui-price, .gui-panel {
  position: relative; isolation: isolate; color: var(--gu-text);
  border-radius: 24px; padding: 22px; background: var(--gu-tint); border: 1px solid var(--gu-border);
  backdrop-filter: blur(var(--gu-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--gu-blur)) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 50px -28px rgba(0, 0, 0, .6);
}

:is(.gui-card, .gui-price, .gui-panel)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
  background: var(--gu-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.gui-card img { display: block; width: calc(100% + 44px); margin: -22px -22px 18px; aspect-ratio: 16/10; object-fit: cover; border-radius: 24px 24px 0 0; }
.gui-card h3, .gui-price h3, .gui-panel h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.gui-card p { margin: 0 0 16px; opacity: .78; line-height: 1.5; font-size: 14px; }
.gui-price .gui-amount { font-size: 44px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 2px; }
.gui-price .gui-amount small { font-size: 15px; font-weight: 500; opacity: .7; }
.gui-price ul { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.gui-price li { display: flex; gap: 10px; align-items: center; }
.gui-price li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gu-accent); box-shadow: 0 0 10px var(--gu-accent); flex: none; }
.gui-price--featured { border-color: color-mix(in srgb, var(--gu-accent) 70%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--gu-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.gui-panel .gui-stat { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.gui-panel .gui-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.gui-panel .gui-delta { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--gu-accent-ink); background: var(--gu-accent); vertical-align: middle; }
.gui-panel .gui-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: 14px; }
.gui-panel .gui-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--gu-accent), color-mix(in srgb, var(--gu-accent) 30%, transparent)); }

/* ---- Tooltip bubble (inserted by <glass-tooltip>) ---- */
.gui-tip {
  position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px; opacity: 0; pointer-events: none;
  padding: 8px 12px; border-radius: 12px; white-space: nowrap; font-size: 13px; color: var(--gu-text);
  background: color-mix(in srgb, var(--gu-tint) 60%, rgba(10, 10, 20, .55)); border: 1px solid var(--gu-border);
  backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); transition: opacity .18s, translate .25s cubic-bezier(.3, 1.6, .5, 1);
}
glass-tooltip { position: relative; display: inline-flex; }
glass-tooltip[data-open] .gui-tip { opacity: 1; translate: -50% 0; }