/* ============================================================================
   Alpha View — "SOC" skin. A futuristic, Palantir-style mission-control facelift
   for the super-admin Alpha View dashboard (#alphaViewDashboard / .gw2-alphaDash).
   PURELY VISUAL: every rule is scoped under .gw2-alphaDash and only restyles or
   layers atop existing elements — the DOM/layout is never changed. Loaded AFTER
   styles.css so equal-or-higher-specificity rules win.
   ========================================================================== */

:root{
  --soc-cyan:#44f1ff; --soc-cyan-dim:rgba(68,241,255,.55);
  --soc-up:#39ffa6; --soc-dn:#ff5d7d; --soc-amber:#ffcf6a;
  --soc-line:rgba(68,241,255,.18); --soc-ink:#dff6ff;
}

/* ── The frame: deep mission-console panel with a live grid + scan field ──── */
.gw2-alphaDash{
  border-color:rgba(68,241,255,.34) !important;
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(68,241,255,.10), transparent 60%),
    radial-gradient(900px 520px at 108% 120%, rgba(57,255,166,.06), transparent 55%),
    linear-gradient(150deg,#060a14 0%,#04070f 60%,#03050b 100%) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(68,241,255,.06),
             inset 0 0 70px rgba(68,241,255,.05) !important;
  isolation:isolate;
}
/* animated engineering grid + slow scan sweep, behind everything */
.gw2-alphaDash::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(rgba(68,241,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,241,255,.05) 1px, transparent 1px);
  background-size:34px 34px, 34px 34px;
  mask-image:linear-gradient(180deg, #000 0, #000 78%, transparent);
  animation:socGridDrift 26s linear infinite;
}
.gw2-alphaDash::after{
  content:"";position:absolute;left:0;right:0;top:0;height:140px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(68,241,255,.10), transparent);
  filter:blur(2px);opacity:.5;
  animation:socScan 7.5s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes socGridDrift{ from{background-position:0 0,0 0} to{background-position:0 34px,34px 0} }
@keyframes socScan{ 0%{transform:translateY(-150px);opacity:0} 12%{opacity:.5} 50%{opacity:.32} 88%{opacity:.5} 100%{transform:translateY(86vh);opacity:0} }

/* The injected capital-flow canvas sits just above the grid, below content. */
.gw2-alphaFlow{ position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent); }

/* Lift all real content above the ambient layers (NO layout change). */
.gw2-alphaHead,.gw2-alphaMeta,.gw2-alphaBody{ position:relative; z-index:2; }

/* ── HUD header ───────────────────────────────────────────────────────────── */
.gw2-alphaHead{
  border-bottom:1px solid var(--soc-line) !important;
  background:linear-gradient(180deg, rgba(68,241,255,.05), transparent);
}
.gw2-alphaKicker{
  color:var(--soc-cyan) !important; text-shadow:0 0 12px rgba(68,241,255,.55);
  position:relative; padding-left:14px;
}
.gw2-alphaKicker::before{ /* live status pip */
  content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;
  background:var(--soc-up);box-shadow:0 0 10px var(--soc-up);animation:socPulse 1.5s ease-in-out infinite;
}
.gw2-alphaKicker::after{ content:" ▌"; animation:socBlink 1.1s steps(1) infinite; color:var(--soc-cyan); }
.gw2-alphaTitle{
  letter-spacing:.04em !important;
  background:linear-gradient(90deg,#ffffff,#bff6ff 55%,#7fe9ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(68,241,255,.25);
}
@keyframes socPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.55} }
@keyframes socBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── HUD buttons (nav + toggles) ──────────────────────────────────────────── */
.gw2-alphaDash .gw2-modeBtn,
.gw2-alphaEye{
  border-color:rgba(68,241,255,.3) !important;
  background:linear-gradient(180deg, rgba(68,241,255,.10), rgba(68,241,255,.03)) !important;
  color:var(--soc-ink) !important; position:relative; overflow:hidden;
  transition:box-shadow .18s, border-color .18s, color .18s, background .18s;
}
.gw2-alphaDash .gw2-modeBtn:hover,
.gw2-alphaEye:hover{
  border-color:var(--soc-cyan) !important; color:#ffffff !important;
  box-shadow:0 0 0 1px rgba(68,241,255,.4), 0 0 18px rgba(68,241,255,.35);
}
.gw2-alphaDash .gw2-modeBtn.is-active{
  border-color:var(--soc-cyan) !important; color:#04121a !important;
  background:linear-gradient(180deg,#7df3ff,#33d9f0) !important;
  box-shadow:0 0 18px rgba(68,241,255,.5);
}
.gw2-alphaEye[aria-pressed="true"]{
  border-color:rgba(255,207,106,.6) !important;color:#ffe9bd !important;
  background:linear-gradient(180deg, rgba(255,207,106,.18), rgba(255,207,106,.05)) !important;
  box-shadow:0 0 14px rgba(255,207,106,.3);
}
/* keep the gold Superinvestors cue (don't flatten it to cyan) — give it the glow */
.gw2-alphaDash .gw2-modeBtn--si{
  border-color:rgba(230,183,88,.5) !important;color:#ffd98a !important;
  background:linear-gradient(180deg, rgba(230,183,88,.14), rgba(230,183,88,.04)) !important;
}
.gw2-alphaDash .gw2-modeBtn--si:hover{ box-shadow:0 0 0 1px rgba(230,183,88,.45), 0 0 18px rgba(230,183,88,.4) !important;color:#ffe6ad !important; }

.gw2-alphaMeta{ color:var(--soc-ink) !important; border-bottom-color:var(--soc-line) !important;
  text-shadow:0 0 8px rgba(68,241,255,.18); }

/* ── Panels: glass + neon edge + animated corner brackets (HUD frames) ─────── */
.gw2-alphaDash .gw2-alphaKpi,
.gw2-alphaDash .gw2-alphaChartCard,
.gw2-alphaDash .gw2-alphaMoversCol,
.gw2-alphaDash .gw2-alphaTableWrap,
.gw2-alphaDash .gw2-alphaPanel{
  border-color:rgba(68,241,255,.16) !important;
  background:linear-gradient(160deg, rgba(15,28,46,.55), rgba(7,12,22,.5)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 26px rgba(0,0,0,.32);
  backdrop-filter:blur(3px);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.gw2-alphaDash .gw2-alphaKpi:hover,
.gw2-alphaDash .gw2-alphaChartCard:hover,
.gw2-alphaDash .gw2-alphaMoversCol:hover{
  border-color:rgba(68,241,255,.42) !important;
  box-shadow:0 0 0 1px rgba(68,241,255,.22), 0 10px 30px rgba(0,0,0,.4), inset 0 0 24px rgba(68,241,255,.06);
}
/* corner brackets via two layered conic/linear gradients on ::before/::after */
.gw2-alphaDash .gw2-alphaKpi::before,
.gw2-alphaDash .gw2-alphaChartCard::before{
  content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;pointer-events:none;
  border-top:1px solid var(--soc-cyan);border-left:1px solid var(--soc-cyan);
  border-top-left-radius:11px;opacity:.65;
}
.gw2-alphaDash .gw2-alphaKpi::after,
.gw2-alphaDash .gw2-alphaChartCard::after{
  content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;pointer-events:none;
  border-bottom:1px solid var(--soc-cyan);border-right:1px solid var(--soc-cyan);
  border-bottom-right-radius:11px;opacity:.65;
}

/* KPI values: telemetry glow; the up/down headline gets a neon halo. */
.gw2-alphaKpiLbl{ color:var(--soc-cyan-dim) !important; }
.gw2-alphaKpiVal{ color:#ffffff !important; text-shadow:0 0 14px rgba(68,241,255,.22); }
.gw2-alphaDash .is-pos{ color:var(--soc-up) !important; }
.gw2-alphaDash .is-neg{ color:var(--soc-dn) !important; }
.gw2-alphaDash .gw2-alphaKpiVal.is-pos,.gw2-alphaDash .gw2-alphaKpiSub.is-pos > span:first-child{ text-shadow:0 0 14px rgba(57,255,166,.55); }
.gw2-alphaDash .gw2-alphaKpiVal.is-neg,.gw2-alphaDash .gw2-alphaKpiSub.is-neg > span:first-child{ text-shadow:0 0 14px rgba(255,93,125,.55); }

/* Section headers → mission labels with a leading tick + scanning underline. */
.gw2-alphaSubHd{
  color:var(--soc-cyan) !important;text-transform:uppercase;letter-spacing:.16em;
  position:relative;padding-left:16px;
}
.gw2-alphaSubHd::before{ content:"▸";position:absolute;left:0;color:var(--soc-cyan);
  text-shadow:0 0 8px rgba(68,241,255,.6);animation:socBlink 1.6s steps(1) infinite; }
.gw2-alphaSubHd::after{
  content:"";position:absolute;left:16px;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg, var(--soc-cyan), transparent 38%);
  background-size:200% 100%;animation:socSweep 4s linear infinite;opacity:.5;
}
@keyframes socSweep{ from{background-position:200% 0} to{background-position:-60% 0} }

.gw2-alphaChartHd{ color:var(--soc-cyan) !important;text-shadow:0 0 8px rgba(68,241,255,.3); }

/* ── Day Movers tiles: directional shimmer (gainers rise, losers fall) ─────── */
.gw2-alphaDash .gw2-alphaMoversHd--up{ color:var(--soc-up) !important;text-shadow:0 0 10px rgba(57,255,166,.4); }
.gw2-alphaDash .gw2-alphaMoversHd--dn{ color:var(--soc-dn) !important;text-shadow:0 0 10px rgba(255,93,125,.4); }
.gw2-alphaDash .gw2-alphaDayHeatItem{ position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s; }
.gw2-alphaDash .gw2-alphaDayHeatItem::after{ /* sweeping shimmer */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size:240% 240%;animation:socShine 5.5s linear infinite;opacity:.5;
}
.gw2-alphaDash .gw2-alphaDayHeatItem:hover{ transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.45); z-index:3; }
@keyframes socShine{ from{background-position:160% 0} to{background-position:-60% 0} }

/* ── Range pills + tables ─────────────────────────────────────────────────── */
.gw2-alphaDash .gw2-alphaRangeBtn{ border-color:rgba(68,241,255,.22) !important;color:var(--soc-ink) !important; }
.gw2-alphaDash .gw2-alphaRangeBtn.is-active{ background:rgba(68,241,255,.22) !important;border-color:var(--soc-cyan) !important;color:#eafdff !important;box-shadow:0 0 12px rgba(68,241,255,.3); }
.gw2-alphaDash .gw2-alphaTable th{ color:var(--soc-cyan-dim) !important;border-bottom-color:var(--soc-line) !important; }
.gw2-alphaDash .gw2-alphaTable tr:hover td{ background:rgba(68,241,255,.05); }

/* ── Neon scrollbar ───────────────────────────────────────────────────────── */
.gw2-alphaBody::-webkit-scrollbar{ width:9px; }
.gw2-alphaBody::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(68,241,255,.5),rgba(68,241,255,.2));border-radius:9px; }
.gw2-alphaBody::-webkit-scrollbar-track{ background:rgba(68,241,255,.04); }

/* ── Boot-in: the console "comes online" each time Alpha View opens. Scoped to
   the BODY container (not per-card) so a live price refresh — which re-renders
   the KPI/mover innerHTML — never re-triggers it. display:none↔block on the
   [hidden] toggle restarts it on each open. ───────────────────────────────── */
.gw2-alphaDash:not([hidden]) .gw2-alphaBody{ animation:socBootIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes socBootIn{ from{opacity:0;transform:translateY(10px) scale(.995);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }

/* A holding that just flipped sign / crossed a threshold can be flashed by
   adding .soc-flash (the flow script does this on live refresh). */
.gw2-alphaDash .soc-flash{ animation:socFlash 1.1s ease-out; }
@keyframes socFlash{ 0%{box-shadow:0 0 0 0 rgba(68,241,255,.0)} 18%{box-shadow:0 0 0 2px rgba(68,241,255,.6),0 0 26px rgba(68,241,255,.5)} 100%{box-shadow:0 0 0 0 rgba(68,241,255,0)} }

@media (prefers-reduced-motion:reduce){
  .gw2-alphaDash::before,.gw2-alphaDash::after,.gw2-alphaSubHd::after,
  .gw2-alphaDash .gw2-alphaDayHeatItem::after,.gw2-alphaKicker::before,.gw2-alphaKicker::after,
  .gw2-alphaSubHd::before,.gw2-alphaDash:not([hidden]) .gw2-alphaBody{ animation:none !important; }
}