/* NGX Tracker — mobile glass theme. Clean dark navy base, no rainbow blobs.
 * Single subtle purple top-glow over a deep navy gradient. Cards float on
 * top with solid surfaces and soft inner highlights.
 */
:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
}

/* !important so Tailwind preflight can't reset the dark base */
html, body {
  background: #0a0a18 !important;
  min-height: 100% !important;
  color: rgb(244 244 245) !important;
  -webkit-font-smoothing: antialiased;
}

/* Backdrop — fixed, single-tone gradient. Visible but smooth.
   Two soft purple/indigo glows (top + bottom-right) over a deep navy base.
   Single color family — no rainbow blobs. */
.glass-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Top glow — indigo */
    radial-gradient(ellipse 90% 50% at 50% -10%,
      rgba(99, 102, 241, 0.45) 0%,
      transparent 60%),
    /* Bottom-right glow — slightly warmer purple */
    radial-gradient(ellipse 70% 40% at 100% 100%,
      rgba(139, 92, 246, 0.30) 0%,
      transparent 65%),
    /* Bottom-left glow — cooler */
    radial-gradient(ellipse 60% 35% at 0% 95%,
      rgba(79, 70, 229, 0.22) 0%,
      transparent 65%),
    /* Deep navy base */
    linear-gradient(180deg,
      #0d0825 0%,
      #0a071e 50%,
      #110a2b 100%);
}
.glass-bg .blob3 {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 50%,
      rgba(167, 139, 250, 0.10) 0%,
      transparent 70%);
}

/* True glassmorphism — semi-transparent with backdrop blur so the gradient
   behind shows through and gets frosted. */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.25);
}
.glass-soft {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.glass-strong {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.30);
}
.glass-divider { border-color: rgba(255, 255, 255, 0.06) !important; }

/* Sticky page header — used by Scanner / Alerts / etc. to keep the title +
   filter strip pinned at the top of the viewport. Includes the safe-area
   inset as internal padding (so it visually replaces the empty space above)
   and sits above the global #ngx-safe-cap (z-index 80) so its content
   isn't frosted out. Content scrolls under this header and gets blurred.
   - `-webkit-sticky` for older iOS Safari fallback.
   - `align-self: flex-start` overrides the parent flex-col's default stretch,
     which otherwise breaks sticky positioning in some browsers.
   - `width: 100%` because flex-start no longer stretches us. */
.page-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 100%;
  z-index: 85;
  background: rgba(13, 8, 37, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Tab bar — floating glass pill, rounded on all sides */
.glass-tabbar {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Brand gradient — used on headings and active labels */
.grad-text {
  background: linear-gradient(135deg, #c7d2fe 0%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary action button */
.btn-grad {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 6px 20px -6px rgba(139, 92, 246, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.20);
  color: #ffffff;
}
.btn-grad:active { transform: scale(0.98); }

.ring-glass { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}
.shake { animation: shake 0.4s ease-in-out; }

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* Defensive — Tailwind's bg-zinc-* must not override card surfaces */
.glass.bg-zinc-900, .glass.bg-zinc-950 { background: #16162a !important; }