/* ORBIX PWA visual layer — no application logic or form behavior. */
:root {
  --orbix-cyan: #46f1ec;
  --orbix-violet: #8f6cff;
  --orbix-ink: #080617;
}

html { background: var(--orbix-ink); }

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(70,241,236,.08), transparent 32%),
    radial-gradient(circle at 82% 54%, rgba(143,108,255,.11), transparent 36%),
    #080617 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,4,18,.45), rgba(7,5,22,.83)),
    url("/static/img/orbix-hero-galaxy-v2.webp") 50% 8% / cover no-repeat;
  opacity: .43;
  filter: saturate(.9) contrast(1.04);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    radial-gradient(circle, rgba(221,255,255,.92) 0 1px, transparent 1.35px),
    linear-gradient(rgba(110,93,165,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,93,165,.09) 1px, transparent 1px);
  background-size: 71px 71px, 32px 32px, 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

#root { position: relative; z-index: 1; min-height: 100dvh; }

.app-header {
  border-bottom-color: rgba(70,241,236,.15) !important;
  background: rgba(7,6,20,.78) !important;
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 14px 42px rgba(1,1,10,.22);
}

.brand-logo {
  position: relative;
  display: block !important;
  overflow: visible;
  isolation: isolate;
  color: transparent !important;
  font-size: 0 !important;
  border: 1px solid rgba(208,255,252,.68) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 67% 27%, #fff 0 1.4px, transparent 2px),
    linear-gradient(145deg, #4df0e9 0%, #168ca7 47%, #101a48 100%) !important;
  box-shadow:
    0 0 20px rgba(70,241,236,.34),
    inset -8px -7px 12px rgba(3,5,28,.52),
    inset 5px 5px 9px rgba(219,255,253,.16) !important;
}

.brand-logo::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 28%;
  left: -18%;
  width: 132%;
  height: 43%;
  border: 1px solid rgba(218,255,253,.82);
  border-radius: 50%;
  transform: rotate(-14deg);
  box-shadow: 0 0 8px rgba(70,241,236,.24);
  animation: orbix-pwa-orbit 6.4s ease-in-out infinite;
}

.brand-logo::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 9%;
  right: -13%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #efffff;
  box-shadow: 0 0 6px #fff, 0 0 14px var(--orbix-cyan);
  animation: orbix-pwa-satellite 4.8s ease-in-out infinite;
}

.app-main { position: relative; }

.card,
.receipt,
.bridge-card,
.notif,
.settings-row,
.stat {
  border-color: rgba(118,105,178,.24) !important;
  background: linear-gradient(145deg, rgba(23,17,48,.86), rgba(7,6,20,.84)) !important;
  box-shadow: inset 0 0 28px rgba(70,241,236,.025), 0 14px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(14px);
}

.card:hover,
.quick:hover,
.settings-row:hover {
  border-color: rgba(70,241,236,.38) !important;
  box-shadow: inset 0 0 32px rgba(70,241,236,.045), 0 18px 44px rgba(0,0,0,.18);
}

.btn-primary,
.nav-fab {
  background: linear-gradient(120deg, #46f1ec, #59cde9) !important;
  box-shadow: 0 10px 32px rgba(70,241,236,.2);
}

.bottom-nav {
  border-top-color: rgba(70,241,236,.14) !important;
  background: rgba(7,6,20,.88) !important;
  backdrop-filter: blur(20px) saturate(1.2);
}

.page-title,
.section-title { text-shadow: 0 0 24px rgba(143,108,255,.12); }

@media (min-width: 900px) {
  .app-main { width: min(100% - 48px, 820px) !important; max-width: 820px !important; margin-inline: auto !important; }
  .app-header { padding-inline: max(24px, calc((100vw - 900px) / 2)) !important; }
  .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  body::before { animation: orbix-pwa-nebula 22s ease-in-out infinite alternate; }
}

@keyframes orbix-pwa-nebula {
  to { transform: scale(1.035) translate3d(1.2%, -1%, 0); filter: saturate(1.05) contrast(1.06); }
}

@keyframes orbix-pwa-orbit {
  50% { transform: rotate(-6deg) scaleX(.96); opacity: .78; }
}

@keyframes orbix-pwa-satellite {
  50% { transform: translate(-29px, 24px) scale(.76); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo::before,
  .brand-logo::after { animation: none !important; }
}