/* ============================================================
   VeriTrust — GLASS system (scope: .luxe)
   Frosted crystal buttons, chips, icon buttons & cards.
   Specular top highlight + gradient hairline + travelling sheen.
   Reusable across all four apps.
   ============================================================ */

.luxe .g-btn,
.luxe .g-ico,
.luxe .g-card { -webkit-tap-highlight-color: transparent; }

/* ---------- GLASS BUTTONS ---------- */
.luxe .g-btn {
  position: relative; isolation: isolate; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 24px; border-radius: 16px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 800; letter-spacing: 0.2px;
  color: var(--text-hi); border: 1px solid rgba(248,236,200,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.015) 46%, rgba(255,255,255,0.05));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1.4px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -10px 22px rgba(4,9,16,0.35),
    0 14px 34px rgba(2,8,16,0.45);
  overflow: hidden; transition: transform .14s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.luxe .g-btn::before { /* glossy upper half */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  pointer-events: none; z-index: -1;
}
.luxe .g-btn::after { /* travelling specular sheen */
  content: ''; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: -1;
  animation: g-sheen 6s ease-in-out infinite;
}
@keyframes g-sheen { 0%,100% { left: -50%; } 18%,82% { left: 130%; } }
.luxe .g-btn:hover { transform: translateY(-1px); border-color: rgba(248,236,200,0.28);
  box-shadow: inset 0 1.4px 0 rgba(255,255,255,0.45), inset 0 -10px 22px rgba(4,9,16,0.35), 0 18px 42px rgba(2,8,16,0.5), 0 0 30px var(--gold-glow); }
.luxe .g-btn:active { transform: scale(.975); }
.luxe .g-btn .ic { font-size: 1.05em; line-height: 1; opacity: .95; }

/* GOLD glass — champagne crystal */
.luxe .g-btn.g-gold {
  color: #1A1304; border: 1px solid rgba(255,250,235,0.5);
  background:
    linear-gradient(180deg, #FBF1D4 0%, #EAD49B 40%, #CFAA6A 72%, #B68C49 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    inset 0 1.6px 0 rgba(255,253,247,0.85),
    inset 0 -8px 18px rgba(120,90,38,0.45),
    0 12px 30px rgba(203,167,101,0.4), 0 0 0 0.5px rgba(150,115,55,0.5);
}
.luxe .g-btn.g-gold::before { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
.luxe .g-btn.g-gold:hover { box-shadow: inset 0 1.6px 0 rgba(255,253,247,0.9), inset 0 -8px 18px rgba(120,90,38,0.45), 0 16px 40px rgba(203,167,101,0.5), 0 0 34px rgba(234,212,155,0.4); }

/* GREEN glass — jade crystal */
.luxe .g-btn.g-green {
  color: #04140B; border: 1px solid rgba(180,240,210,0.5);
  background: linear-gradient(180deg, #BFF0D6 0%, #7FD8AE 42%, #46B07E 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1.6px 0 rgba(240,255,248,0.8), inset 0 -8px 16px rgba(20,80,52,0.4), 0 12px 30px rgba(70,176,126,0.34);
}
.luxe .g-btn.g-green::before { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); }

/* clear = brighter frosted; ghost = quieter */
.luxe .g-btn.g-clear { color: var(--gold-100); border-color: rgba(248,236,200,0.22);
  background: linear-gradient(180deg, rgba(248,236,200,0.16), rgba(203,167,101,0.05) 50%, rgba(248,236,200,0.07)); }
.luxe .g-btn.g-ghost { height: 50px; font-size: 14.5px; color: var(--text-mid);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 22px rgba(2,8,16,0.35); }
.luxe .g-btn.g-sm { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 13px; }
.luxe .g-btn.g-full { width: 100%; }

/* ---------- GLASS ICON BUTTON ---------- */
.luxe .g-ico {
  position: relative; cursor: pointer; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 15px; font-size: 19px; color: var(--text-hi);
  border: 1px solid rgba(248,236,200,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.35), inset 0 -8px 16px rgba(4,9,16,0.3), 0 10px 26px rgba(2,8,16,0.4);
  transition: transform .14s var(--ease-spring), border-color .3s, box-shadow .3s;
}
.luxe .g-ico:hover { transform: translateY(-1px); border-color: rgba(248,236,200,0.3); box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.4), 0 14px 32px rgba(2,8,16,0.5), 0 0 24px var(--gold-glow); }
.luxe .g-ico:active { transform: scale(.94); }
.luxe .g-ico.g-ico-gold { color: var(--gold-100);
  background: linear-gradient(180deg, rgba(248,236,200,0.2), rgba(203,167,101,0.07));
  border-color: rgba(234,212,155,0.32); box-shadow: inset 0 1.2px 0 rgba(255,250,235,0.5), 0 10px 26px rgba(203,167,101,0.22); }

/* ---------- GLASS CHIPS ---------- */
.luxe .g-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800; color: var(--text-mid); cursor: pointer;
  border: 1px solid rgba(248,236,200,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all .2s;
}
.luxe .g-chip.on { color: #1A1304; border: none;
  background: linear-gradient(180deg, #FBF1D4, #EAD49B 45%, #CFAA6A);
  box-shadow: inset 0 1.4px 0 rgba(255,253,247,0.8), 0 8px 20px rgba(203,167,101,0.34); }

/* signed pill (glass) */
.luxe .g-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px;
  font-size: 12px; font-weight: 800; color: var(--gold-100);
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(234,212,155,0.18), rgba(203,167,101,0.05));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,250,235,0.3);
}
.luxe .g-pill .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------- CRYSTAL CARDS ---------- */
.luxe .g-card {
  position: relative; border-radius: var(--r-xl); padding: 20px; overflow: hidden;
  border: 1px solid rgba(248,236,200,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.012) 30%, rgba(8,18,32,0.10));
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  box-shadow:
    inset 0 1.2px 0 rgba(255,255,255,0.28),
    inset 0 0 60px rgba(255,255,255,0.02),
    0 22px 54px rgba(2,8,16,0.5);
}
.luxe .g-card::after { /* faint top-edge gloss */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent); pointer-events: none;
}
.luxe .g-card-hero {
  border-color: var(--border-gold);
  box-shadow: inset 0 1.4px 0 rgba(255,250,235,0.4), 0 22px 60px rgba(2,8,16,0.55), 0 0 50px var(--gold-glow);
}

/* ---------- CRYSTAL SURFACE (lightweight card — no heavy blur) ---------- */
/* Use for ALL ordinary cards: gives glassy depth + specular top edge + gold
   hairline without the cost of backdrop-blur on every element. */
.luxe .g-surface {
  position: relative; border-radius: var(--r-lg);
  border: 1px solid rgba(248,236,200,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012) 32%, rgba(8,18,32,0.05)),
    var(--card);
  box-shadow:
    inset 0 1.2px 0 rgba(255,255,255,0.16),
    inset 0 -16px 30px rgba(4,9,16,0.18),
    0 14px 36px rgba(2,8,16,0.4);
}
.luxe .g-surface::after { /* top-edge gloss */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 34%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); pointer-events: none;
}
.luxe .g-surface-glow {
  border-color: var(--border-gold);
  box-shadow: inset 0 1.2px 0 rgba(255,250,235,0.3), inset 0 -16px 30px rgba(4,9,16,0.18), 0 16px 42px rgba(2,8,16,0.45), 0 0 40px var(--gold-glow);
}
/* a hoverable crystal surface (tappable rows/cards) */
.luxe .g-surface-hover { transition: transform .18s var(--ease-out), border-color .25s, box-shadow .25s; }
.luxe .g-surface-hover:hover { transform: translateY(-2px); border-color: var(--border-gold);
  box-shadow: inset 0 1.2px 0 rgba(255,250,235,0.28), 0 20px 48px rgba(2,8,16,0.5), 0 0 34px var(--gold-glow); }

@media (prefers-reduced-motion: reduce) { .luxe .g-btn::after { animation: none; } }