/* Swappit Ultra Overlay (no React changes)
   Adds: Web3 lava background + neon top bar + global glow toggle + floating Live Preview panel.
*/
:root{
  --ultra-bg1:#070815;
  --ultra-bg2:#0b1020;

  --ultra-n1:#00FFD1;  /* aqua */
  --ultra-n2:#7C3AED;  /* purple */
  --ultra-n3:#38BDF8;  /* sky */
  --ultra-n4:#FF3D81;  /* pink */
  --ultra-n5:#22c55e;  /* green */

  --ultra-stroke: rgba(255,255,255,.12);
  --ultra-glass: rgba(255,255,255,.06);
  --ultra-shadow: 0 22px 70px rgba(0,0,0,.55);
}

/* Make sure app stays above background */
#root{ position: relative; z-index: 2; }

/* Background container injected by JS */
.ultra-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ultra-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--ultra-n1), var(--ultra-n3), var(--ultra-n2), var(--ultra-n4), var(--ultra-n1));
  background-size: 420% 100%;
  animation: ultraBarMove 6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(0,255,209,.55));
  pointer-events: none;
}
@keyframes ultraBarMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.ultra-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 55% 35%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 80% 25%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,.18), transparent 60%);
  opacity:.26;
  animation: ultraTwinkle 7s ease-in-out infinite alternate;
}
@keyframes ultraTwinkle{
  from{opacity:.18; transform: translateY(0)}
  to{opacity:.32; transform: translateY(-6px)}
}

.ultra-noise{
  position:absolute; inset:-20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  transform: rotate(8deg);
}

.ultra-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 60%);
  opacity:.14;
}

.ultra-spot{
  position:absolute;
  width: 900px; height: 900px;
  border-radius: 999px;
  filter: blur(50px);
  opacity:.30;
}
.ultra-spot.a{ left:-240px; top:-260px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.34), transparent 60%); }
.ultra-spot.b{ right:-280px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(0,255,209,.28), transparent 60%); }

/* Lava */
.ultra-lava{
  position:absolute;
  inset:-25%;
  filter: blur(44px) saturate(150%);
  opacity:.92;
  mix-blend-mode: screen;
}
.ultra-blob{
  position:absolute;
  width: 44vmax;
  height: 44vmax;
  border-radius: 50%;
  will-change: transform;
  opacity:.44;
}
.ultra-blob.b1{ background: radial-gradient(circle at 30% 30%, rgba(0,255,209,.95), transparent 62%); animation: ultraFloat1 18s ease-in-out infinite; }
.ultra-blob.b2{ background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.95), transparent 64%); animation: ultraFloat2 22s ease-in-out infinite; }
.ultra-blob.b3{ background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.95), transparent 64%); animation: ultraFloat3 20s ease-in-out infinite; }
.ultra-blob.b4{ background: radial-gradient(circle at 30% 30%, rgba(255,61,129,.95), transparent 64%); animation: ultraFloat4 26s ease-in-out infinite; }
.ultra-blob.b5{ background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.85), transparent 66%); animation: ultraFloat5 24s ease-in-out infinite; }

@keyframes ultraFloat1{0%{transform: translate(10vw, 10vh) scale(1)}50%{transform: translate(70vw, 30vh) scale(1.22)}100%{transform: translate(10vw, 10vh) scale(1)}}
@keyframes ultraFloat2{0%{transform: translate(85vw, 18vh) scale(1.06)}50%{transform: translate(30vw, 72vh) scale(1.28)}100%{transform: translate(85vw, 18vh) scale(1.06)}}
@keyframes ultraFloat3{0%{transform: translate(55vw, 88vh) scale(1.12)}50%{transform: translate(8vw, 45vh) scale(1.30)}100%{transform: translate(55vw, 88vh) scale(1.12)}}
@keyframes ultraFloat4{0%{transform: translate(22vw, 58vh) scale(1.08)}50%{transform: translate(88vw, 78vh) scale(1.36)}100%{transform: translate(22vw, 58vh) scale(1.08)}}
@keyframes ultraFloat5{0%{transform: translate(48vw, 22vh) scale(1.02)}50%{transform: translate(62vw, 62vh) scale(1.28)}100%{transform: translate(48vw, 22vh) scale(1.02)}}

/* Floating controls (Glow + Live panel) */
.ultra-ui{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9998;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ultra-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  user-select:none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.ultra-btn:hover{ transform: translateY(-1px); border-color: rgba(0,255,209,.22); background: rgba(255,255,255,.09); }
.ultra-btn:active{ transform: translateY(0) scale(.99); }
.ultra-ic{opacity:.95}
.ultra-txt{font-weight:900; letter-spacing:.2px; font-size: 13px}

/* Live preview panel overlay */
.ultra-live{
  position: fixed;
  right: 18px;
  top: 92px;
  width: 360px;
  max-width: calc(100vw - 36px);
  z-index: 9997;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--ultra-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow:hidden;
  transform-style: preserve-3d;
}

@media (max-width: 900px){
  .ultra-live{ display:none; } /* hide on mobile to avoid covering UI */
}

.ultra-live.breathe{
  animation: ultraBreathe 5.8s ease-in-out infinite;
}
@keyframes ultraBreathe{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
  100%{ transform: translateY(0) }
}

.ultra-live-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.ultra-live-title{ font-weight:950; letter-spacing:.2px; }
.ultra-chip{
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.70);
  font-weight:950;
  font-size: 12px;
}

.ultra-live-body{ padding: 12px 14px 14px; display:grid; gap:10px; }

.ultra-metric{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.ultra-mk{ font-size:12px; color: rgba(255,255,255,.55); font-weight:900; letter-spacing:.2px; text-transform: uppercase;}
.ultra-mv{ font-weight:950; color: rgba(255,255,255,.86);}
.ultra-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius: 99px;
  margin-right:8px;
  background: var(--ultra-n5);
  box-shadow: 0 0 16px rgba(34,197,94,.45);
}
.ultra-grad{
  background: linear-gradient(90deg, var(--ultra-n1), var(--ultra-n3), var(--ultra-n2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.ultra-divider{ height:1px; background: rgba(255,255,255,.10); margin: 6px 0; }

.ultra-mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.ultra-mini > div{
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.ultra-mi{ font-size: 18px; }
.ultra-mt{ margin-top: 8px; font-weight:950; }
.ultra-ms{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.55); }

.ultra-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.ultra-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--ultra-n1), var(--ultra-n3), var(--ultra-n2));
  background-size: 160% 100%;
  filter: drop-shadow(0 0 16px rgba(0,255,209,.25));
  animation: ultraHue 2.8s ease-in-out infinite;
}
@keyframes ultraHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.ultra-meta{display:flex; justify-content:space-between; font-size:12px; color: rgba(255,255,255,.55);}

/* Glow+ affects the whole site (generic selectors, no React edits) */
body.ultra-glowplus :is(button, a, input, select, textarea, [role="button"]){
  box-shadow: 0 0 0 1px rgba(0,255,209,.10), 0 18px 50px rgba(0,0,0,.35);
}
body.ultra-glowplus :is(button, [role="button"]){
  border-color: rgba(0,255,209,.18) !important;
}
body.ultra-glowplus :is(a){
  text-shadow: 0 0 14px rgba(0,255,209,.10);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ultra-topbar, .ultra-stars, .ultra-blob, .ultra-live.breathe, .ultra-bar{ animation:none !important; }
}