/* ===== WWH Modes + Layout ===== */

:root{
  --neon-blue: #4fd6ff;
  --neon-pink: #ff4fd8;
  --neon-gold: #ffc34d;
  --warn: #ff4fd8;
  --bg-panel: rgba(8,16,26,.55);
  --border: rgba(79,214,255,.20);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Titles: light blue neon */
.panel-heading,
.panel-section h3,
.panel-section h2{
  color: var(--neon-blue) !important;
  text-shadow:
    0 0 10px rgba(79,214,255,.45),
    0 0 22px rgba(79,214,255,.25);}

/* Pink 80s glow behind panels */
.side-panel{
  background:
    radial-gradient(900px 450px at 30% 15%, rgba(255,79,216,.10), transparent 60%),
    radial-gradient(900px 450px at 70% 85%, rgba(79,214,255,.08), transparent 60%),
    var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;}

/* Prevent overflow leaking outside panel */
.side-panel{
  overflow: hidden;}
.side-panel .panel-section{
  max-width: 100%;
  overflow: hidden;}
.side-panel .wwh-input,
.side-panel textarea,
.side-panel select{
  max-width: 100%;
  box-sizing: border-box;}

/* Reserve status warning styling (like price) */
.wwh-flash-warn{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,79,216,.35);
  background:
    radial-gradient(600px 200px at 20% 20%, rgba(255,79,216,.14), transparent 60%),
    rgba(10,14,22,.55);
  color: #ffd6f3;
  text-shadow: 0 0 10px rgba(255,79,216,.25);
  font-weight: 600;
}
.wwh-flash-warn b{
  color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(255,195,77,.25);
}

/* ===== Header / Footer ===== */
.wwh-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(79,214,255,.18);
  background:
    radial-gradient(900px 220px at 25% 0%, rgba(255,79,216,.18), transparent 60%),
    rgba(6,10,16,.72);
  backdrop-filter: blur(10px);
}
.wwh-brand{
  display:flex; flex-direction:column; line-height:1.05;
}
.wwh-brand .t1{
  color: var(--neon-blue);
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(79,214,255,.35);
}
.wwh-brand .t2{
  color: rgba(255,255,255,.78);
  font-size: 11px;
  margin-top: 3px;
}

.wwh-nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.wwh-nav .wwh-navbtn{
  appearance:none;
  border: 1px solid rgba(79,214,255,.22);
  background: rgba(10,14,22,.35);
  color: rgba(255,255,255,.80);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.wwh-nav .wwh-navbtn[aria-pressed="true"]{
  border-color: rgba(255,79,216,.40);
  box-shadow: 0 0 0 1px rgba(255,79,216,.20), 0 0 18px rgba(255,79,216,.18);
  color: #ffe6f7;
}

.wwh-footer{
  margin-top: 14px;
  padding: 12px 14px 18px;
  border-top: 1px solid rgba(79,214,255,.14);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  text-align: center;
}

/* ===== Mobile reflow ===== */
@media (max-width: 860px){
  /* Make the main app stack */
  body .container,
  body .layout,
  body .wrap,
  body main{
    max-width: 100%;
  }
  /* Side panel becomes full-width under canvas */
  .side-panel{
    width: auto !important;
    max-width: none !important;
    border-radius: 18px !important;
    margin: 12px 12px 0 !important;
  }
  /* Put canvas full width, avoid weird margins */
  canvas{
    width: calc(100vw - 24px) !important;
    height: auto !important;
  }
}

/* ===== Mobile Bottom Sheet ===== */
.wwh-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  border-radius: 18px;
  border: 1px solid rgba(79,214,255,.22);
  background:
    radial-gradient(900px 240px at 20% 10%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(900px 240px at 80% 90%, rgba(79,214,255,.12), transparent 60%),
    rgba(6,10,16,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(0,0,0,.75);
  overflow: hidden;
  display: none;
}
.wwh-sheet[aria-hidden="false"]{ display:block; }

.wwh-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(79,214,255,.14);
}
.wwh-sheet__title{
  color: var(--neon-blue);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 10px rgba(79,214,255,.35);
}
.wwh-sheet__close{
  border: 1px solid rgba(79,214,255,.22);
  background: rgba(10,14,22,.35);
  color: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 800;
}
.wwh-sheet__body{
  padding: 12px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.wwh-sheet__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,.18);
}
.wwh-sheet__row:last-child{ border-bottom: none; }
.wwh-sheet__k{ color: rgba(255,255,255,.55); }
.wwh-sheet__v{ color: rgba(255,255,255,.82); font-weight: 700; }
.wwh-sheet__cta{
  display:flex;
  gap:10px;
  margin-top: 10px;
}
.wwh-sheet__btn{
  flex: 1;
  border: 1px solid rgba(79,214,255,.22);
  background: rgba(10,14,22,.35);
  color: rgba(255,255,255,.82);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
}
.wwh-sheet__btn--pink{
  border-color: rgba(255,79,216,.38);
  box-shadow: 0 0 0 1px rgba(255,79,216,.18), 0 0 18px rgba(255,79,216,.16);
  color: #ffe6f7;
}
@media (min-width: 861px){
  .wwh-sheet{ display:none !important; }
}

/* ===== Mobile Bottom Sheet ===== */
.wwh-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  border-radius: 18px;
  border: 1px solid rgba(79,214,255,.22);
  background:
    radial-gradient(900px 240px at 20% 10%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(900px 240px at 80% 90%, rgba(79,214,255,.12), transparent 60%),
    rgba(6,10,16,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(0,0,0,.75);
  overflow: hidden;
  display: none;
}
.wwh-sheet[aria-hidden="false"]{ display:block; }

.wwh-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(79,214,255,.14);
}
.wwh-sheet__title{
  color: var(--neon-blue);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 10px rgba(79,214,255,.35);
}
.wwh-sheet__close{
  border: 1px solid rgba(79,214,255,.22);
  background: rgba(10,14,22,.35);
  color: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 800;
}
.wwh-sheet__body{
  padding: 12px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.wwh-sheet__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,.18);
}
.wwh-sheet__row:last-child{ border-bottom: none; }
.wwh-sheet__k{ color: rgba(255,255,255,.55); }
.wwh-sheet__v{ color: rgba(255,255,255,.82); font-weight: 700; }
.wwh-sheet__cta{
  display:flex;
  gap:10px;
  margin-top: 10px;
}
.wwh-sheet__btn{
  flex: 1;
  border: 1px solid rgba(79,214,255,.22);
  background: rgba(10,14,22,.35);
  color: rgba(255,255,255,.82);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
}
.wwh-sheet__btn--pink{
  border-color: rgba(255,79,216,.38);
  box-shadow: 0 0 0 1px rgba(255,79,216,.18), 0 0 18px rgba(255,79,216,.16);
  color: #ffe6f7;
}
@media (min-width: 861px){
  .wwh-sheet{ display:none !important; }
}

/* === WWH HOTFIX: grid-loading centered + pink glow (modes.css wins) === */

/* Make sure wrapper can show glow (override any overflow hidden) */
.grid-wrapper{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Pink neon under-grid glow */
.grid-wrapper::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform: translateX(-50%);
  width: min(980px, 92vw);
  height: 340px;
  pointer-events:none;
  z-index: 0;
  filter: blur(34px);
  opacity: .85;
  mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 50% 70%,
      rgba(255, 0, 190, .95),
      rgba(255, 0, 190, .45) 32%,
      rgba(160, 40, 255, .28) 52%,
      rgba(0, 0, 0, 0) 76%);
}

/* Keep canvas above glow */
#grid-canvas{
  position: relative !important;
  z-index: 2 !important;
}

/* Restore "Loading grid…" to centered overlay (not side) */
#grid-loading,
.grid-loading{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* === WWH HOTFIX v3: unmistakable PINK glow + loading overlay locked === */

.grid-wrapper{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

.grid-wrapper::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform: translateX(-50%);
  width: min(1100px, 96vw);
  height: 420px;
  pointer-events:none;
  z-index: 0;
  filter: blur(38px) saturate(1.35);
  opacity: .95;
  mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 50% 72%,
      rgba(255, 0, 200, 1),
      rgba(255, 0, 200, .60) 28%,
      rgba(255, 80, 220, .35) 46%,
      rgba(180, 60, 255, .22) 60%,
      rgba(0, 0, 0, 0) 78%);
}

/* Disable any previous glow pseudo-elements */
.grid-wrapper::after{
  content: none !important;
}

/* Canvas above glow */
#grid-canvas{
  position: relative !important;
  z-index: 2 !important;
}

/* Loading overlay centered over canvas */
#grid-loading,
.grid-loading{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* === WWH HOTFIX v4: bigger + higher pink glow anchored to grid === */
.grid-wrapper{
  overflow: visible !important;
  position: relative !important;
  isolation: isolate;
}

/* remove any other pseudo glow */
.grid-wrapper::after{ content:none !important; }

/* BIG glow centered under the canvas area */
.grid-wrapper::before{
  content:"";
  position:absolute;
  left:50%;
  top:58%;                 /* move glow UP (was bottom-based) */
  transform: translate(-50%, -50%);
  width: 140%;
  max-width: 1400px;
  height: 90%;
  min-height: 520px;
  pointer-events:none;
  z-index: 0;
  filter: blur(55px) saturate(1.5);
  opacity: .85;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 60%,
      rgba(255, 0, 200, .95) 0%,
      rgba(255, 0, 200, .55) 22%,
      rgba(255, 80, 230, .35) 40%,
      rgba(180, 60, 255, .20) 58%,
      rgba(0, 0, 0, 0) 76%);
}

/* keep canvas + loading above glow */
#grid-canvas{ position: relative !important; z-index: 2 !important; }
#grid-loading,.grid-loading{ position:absolute !important; inset:0 !important; z-index:5 !important; }


/* === WWH HOTFIX v5: ALL-AROUND neon aura around the grid === */
.grid-wrapper{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Keep the existing big glow (v4 ::before) if you like,
   but we now add a ring aura as ::after. */
.grid-wrapper::after{
  content:"";
  position:absolute;
  inset:-140px;              /* expand outside wrapper */
  border-radius: 44px;      /* match/beat your grid rounding */
  pointer-events:none;
  z-index: 1;               /* above v4 glow, below canvas */
  filter: blur(26px) saturate(1.55);
  opacity: .78;
  mix-blend-mode: screen;

  /* multi-radial "aura" so it wraps all sides, not only bottom */
  background:
    radial-gradient(55% 45% at 50% 0%,
      rgba(255,0,200,.78), rgba(0,0,0,0) 70%),
    radial-gradient(55% 45% at 50% 100%,
      rgba(255,0,200,.78), rgba(0,0,0,0) 70%),
    radial-gradient(45% 55% at 0% 50%,
      rgba(255,0,200,.62), rgba(0,0,0,0) 70%),
    radial-gradient(45% 55% at 100% 50%,
      rgba(255,0,200,.62), rgba(0,0,0,0) 70%),
    radial-gradient(35% 35% at 12% 12%,
      rgba(180,60,255,.45), rgba(0,0,0,0) 70%),
    radial-gradient(35% 35% at 88% 12%,
      rgba(180,60,255,.45), rgba(0,0,0,0) 70%),
    radial-gradient(35% 35% at 12% 88%,
      rgba(180,60,255,.40), rgba(0,0,0,0) 70%),
    radial-gradient(35% 35% at 88% 88%,
      rgba(180,60,255,.40), rgba(0,0,0,0) 70%);
}

/* Rim glow hugging the canvas edge (tight neon outline) */
#grid-canvas{
  position: relative !important;
  z-index: 3 !important;
  border-radius: 28px; /* keep consistent with your wrapper */
  box-shadow:
    0 0 0 1px rgba(255, 0, 200, .18),
    0 0 18px rgba(255, 0, 200, .22),
    0 0 48px rgba(255, 0, 200, .18),
    0 0 90px rgba(180, 60, 255, .12);
}

/* Ensure loading overlay is centered over the canvas */
#grid-loading,.grid-loading{
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 6 !important;
}


/* === WWH HOTFIX v5 BOOST: more visible neon aura + rim === */
.grid-wrapper{
  overflow: visible !important;
}

/* Make the aura bigger + stronger */
.grid-wrapper::before{
  inset: -240px !important;          /* more outward spread */
  opacity: .98 !important;           /* brighter */
  filter: blur(44px) saturate(1.65) !important;
  mix-blend-mode: screen !important;
}

/* Add a sharper “neon rim” around the grid */
#grid-canvas{
  filter:
    drop-shadow(0 0 14px rgba(255, 0, 200, .55))
    drop-shadow(0 0 34px rgba(255, 0, 200, .40))
    drop-shadow(0 0 70px rgba(160, 60, 255, .24));
}

/* === WWH PANEL OVERRIDE: NO SPACE-BETWEEN (authoritative) === */
aside.side-panel,
.side-panel{
  justify-content: flex-start !important;
  align-content: flex-start !important;}

.side-panel > .panel-scroll{
  justify-content: flex-start !important;
  align-content: flex-start !important;}

.side-panel > .panel-scroll > *{
  margin-top: 0 !important;}
/* __DEBUG_FINGERPRINT_MODES__ 1766760232 */

/* =========================================================
   __WWH_TOPBAR_NAV_NO_HIDE_V1__
   Goal: Never hide Buy Space / Explore on narrow viewports.
   Strategy: Stop wrapping; allow horizontal scroll for nav.
   ========================================================= */
@media (max-width: 980px){
  .wwh-nav{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 2px;
  }
  .wwh-nav::-webkit-scrollbar{ height: 0 !important; }
  .wwh-navbtn{ flex: 0 0 auto !important; }
}