/* ═══════════════════════════════════════════════════════════════
   RXCLOUD CYBERLAB — PREMIUM CYBERSECURITY UI LAYER
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ENHANCED COLOR SYSTEM ──
   Replace flat cyan with a gradient ramp:
   cyan → electric blue → deep blue
   Adds visual depth without monotony
   ─────────────────────────────────── */
:root{
  --cyan-bright:#3be8ff;
  --cyan-mid:#0dcaf0;
  --cyan-deep:#0891b2;
  --blue-electric:#2563eb;
  --blue-deep:#1e3a5f;

  /* Gradient accent for key elements */
  --accent-gradient:linear-gradient(135deg, #3be8ff, #0dcaf0, #0891b2);
  --accent-gradient-h:linear-gradient(135deg, #6ceeff, #0dcaf0, #2563eb);

  /* Depth shadows (3 levels) */
  --shadow-sm:0 4px 12px rgba(0,0,0,.25), 0 0 8px rgba(13,202,240,.04);
  --shadow-md:0 12px 36px rgba(0,0,0,.40), 0 0 20px rgba(13,202,240,.08);
  --shadow-lg:0 24px 64px rgba(0,0,0,.50), 0 0 36px rgba(13,202,240,.12);
  --shadow-glow:0 0 40px rgba(13,202,240,.18), 0 0 80px rgba(13,202,240,.06);

  /* Glass layers */
  --glass-1:rgba(18,22,28,.55);
  --glass-2:rgba(18,22,28,.40);
  --glass-3:rgba(18,22,28,.28);
}


/* ── 2. VISUAL HIERARCHY — 3 card levels ──
   Primary: session, upload, slot (user action cards)
   Secondary: server health, reports (info cards)
   Tertiary: system info rows
   ──────────────────────────────────────────── */

/* All cards: shared premium base */
.card{
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%) !important;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* Primary cards: stronger presence */
.card-primary,
.card:has(#sessionBox),
.card:has(#slotForm),
.card:has(#upForm){
  background:
    linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--glass-2), var(--glass-3)) !important;
  border-color:rgba(13,202,240,.18) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 1px rgba(255,255,255,.12) inset !important;
}

/* Secondary cards: softer */
.card-secondary,
#sysCard,
.card:has(#reportsBox){
  background:
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, var(--glass-1), var(--glass-2)) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:var(--shadow-md) !important;
}


/* ── 3. GLOW SYSTEM — context-aware, not uniform ──
   Default: subtle | Hover: amplified | Focus: strong
   ──────────────────────────────────────────────────── */

/* Default card hover: lift + glow increase */
@media (hover:hover){
  .card:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(13,202,240,.22) !important;
    box-shadow:
      var(--shadow-lg),
      var(--shadow-glow) !important;
  }

  /* Primary cards hover: stronger glow */
  .card:has(#sessionBox):hover,
  .card:has(#slotForm):hover,
  .card:has(#upForm):hover{
    box-shadow:
      0 28px 80px rgba(0,0,0,.50),
      0 0 50px rgba(13,202,240,.20),
      0 0 100px rgba(13,202,240,.06) !important;
    border-color:rgba(13,202,240,.30) !important;
  }
}

/* Directional glow follows cursor — enhanced */
.card[data-glow]::after{
  background:radial-gradient(
    400px circle at var(--mx,50%) var(--my,50%),
    rgba(13,202,240,.14),
    rgba(13,202,240,.03) 40%,
    transparent 70%
  ) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transition:opacity .3s ease !important;
}


/* ── 4. ACCENT BAR — gradient upgrade ──
   ──────────────────────────────────────── */
.rx-accent-bar{
  width:3px !important;
  height:20px !important;
  background:var(--accent-gradient) !important;
  box-shadow:0 0 10px rgba(13,202,240,.5), 0 0 20px rgba(13,202,240,.15) !important;
}


/* ── 5. BUTTONS — gradient accent + premium glow ──
   ──────────────────────────────────────────────── */
.btn{
  background:var(--accent-gradient) !important;
  border:none !important;
  box-shadow:
    0 4px 16px rgba(13,202,240,.35),
    0 0 1px rgba(255,255,255,.3) inset !important;
  transition:transform .12s ease, box-shadow .2s ease, filter .15s ease !important;
  position:relative !important;
}

.btn::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 50%) !important;
  opacity:0 !important;
  transition:opacity .15s ease !important;
  pointer-events:none !important;
}

@media (hover:hover){
  .btn:hover{
    transform:translateY(-2px) scale(1.02) !important;
    box-shadow:
      0 8px 28px rgba(13,202,240,.45),
      0 0 40px rgba(13,202,240,.15),
      0 0 1px rgba(255,255,255,.4) inset !important;
    filter:brightness(1.06) !important;
  }
  .btn:hover::after{
    opacity:1 !important;
  }
}

.btn:active{
  transform:translateY(0) scale(.98) !important;
  filter:brightness(.95) !important;
}

/* Muted / secondary buttons: keep subdued */
.btn.muted{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), #1b222d !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.06) !important;
}

/* End session red button */
.btn-end{
  background:linear-gradient(135deg, #dc2626, #991b1b) !important;
  box-shadow:0 4px 16px rgba(220,38,38,.35), 0 0 1px rgba(255,255,255,.2) inset !important;
}

.btn-end:hover{
  box-shadow:0 8px 28px rgba(220,38,38,.50), 0 0 40px rgba(220,38,38,.15) !important;
}

/* Join button: extra glow */
.btn-join{
  background:linear-gradient(135deg, #3be8ff, #0dcaf0) !important;
  box-shadow:
    0 4px 16px rgba(13,202,240,.45),
    0 0 30px rgba(13,202,240,.12),
    0 0 1px rgba(255,255,255,.4) inset !important;
}


/* ── 6. BADGES — gradient borders + subtle glow ──
   Only target badges WITHOUT inline styles (static HTML badges).
   JS-generated neon badges (rxNeonBadge) use inline styles and must not be overridden.
   ─────────────────────────────────────────────── */
.badge:not([style]){
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border:1px solid rgba(13,202,240,.18) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12), 0 0 1px rgba(13,202,240,.08) inset !important;
  backdrop-filter:blur(8px) !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
  color:var(--text) !important;
}

.badge--ok,
.badge.badge--ok{
  background:rgba(16,185,129,.16) !important;
  border:1px solid rgba(16,185,129,.40) !important;
  box-shadow:0 0 16px rgba(16,185,129,.15), 0 0 1px rgba(16,185,129,.4) inset !important;
  color:#a7f3d0 !important;
}

.badge--warn,
.badge.badge--warn{
  background:rgba(245,158,11,.16) !important;
  border:1px solid rgba(245,158,11,.40) !important;
  box-shadow:0 0 16px rgba(245,158,11,.15), 0 0 1px rgba(245,158,11,.4) inset !important;
  color:#fde68a !important;
}

.badge--error,
.badge.badge--error{
  background:rgba(239,68,68,.16) !important;
  border:1px solid rgba(239,68,68,.40) !important;
  box-shadow:0 0 16px rgba(239,68,68,.15), 0 0 1px rgba(239,68,68,.4) inset !important;
  color:#fca5a5 !important;
}

.badge--ending,
.badge.badge--ending{
  background:rgba(245,158,11,.16) !important;
  border:1px solid rgba(245,158,11,.40) !important;
  box-shadow:0 0 16px rgba(245,158,11,.15), 0 0 1px rgba(245,158,11,.4) inset !important;
  color:#fde68a !important;
}


/* ── 7. VM STATUS — SOC panel style ──
   Free: green glow | Busy: red pulse | Allocating: amber
   ───────────────────────────────────────────────────── */

/* Status dots: enhanced glow */
#poolFloat .dot{
  box-shadow:
    0 0 0 3px rgba(var(--dot-rgb), .25),
    0 0 14px rgba(var(--dot-rgb), .45),
    0 0 28px rgba(var(--dot-rgb), .12) !important;
}

/* VM rows: subtle gradient border on hover */
#poolFloat .vm-row{
  transition:all .15s ease !important;
}

#poolFloat .vm-row:hover{
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-color:rgba(13,202,240,.18) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.20), 0 0 16px rgba(13,202,240,.06) !important;
  transform:translateX(4px) !important;
}

/* Free state: soft green glow */
#poolFloat .state-free{
  background:rgba(16,185,129,.12) !important;
  border-color:rgba(16,185,129,.30) !important;
  box-shadow:0 0 16px rgba(16,185,129,.06) inset !important;
}

/* Busy state: red accent */
#poolFloat .state-busy,
#poolFloat .state-occupied{
  background:rgba(239,68,68,.12) !important;
  border-color:rgba(239,68,68,.30) !important;
  box-shadow:0 0 16px rgba(239,68,68,.06) inset !important;
}

/* Allocating: amber pulse */
#poolFloat .state-allocating{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.30) !important;
  box-shadow:0 0 16px rgba(245,158,11,.06) inset !important;
}

/* Pool float panel: premium glass */
.pool-float-card{
  border-radius:22px !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
  box-shadow:var(--shadow-lg) !important;
}

.pool-float-head{
  background:linear-gradient(180deg, rgba(13,202,240,.04), transparent) !important;
  border-bottom:1px solid rgba(13,202,240,.10) !important;
}


/* ── 8. HEADER — deeper glass + gradient border ──
   ────────────────────────────────────────────────── */
.header{
  backdrop-filter:blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.30),
    0 0 1px rgba(255,255,255,.10) inset !important;
}

/* Gradient glow line under header */
.header::after{
  content:'' !important;
  position:absolute !important;
  bottom:-1px !important;
  left:0 !important;
  right:0 !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    transparent 5%,
    rgba(59,232,255,.5) 20%,
    rgba(13,202,240,.3) 50%,
    rgba(59,232,255,.5) 80%,
    transparent 95%
  ) !important;
  pointer-events:none !important;
}


/* ── 9. INPUTS — deeper glass + gradient focus ──
   ────────────────────────────────────────────── */
.input:focus,
.select:focus{
  border-color:rgba(13,202,240,.65) !important;
  box-shadow:
    0 0 0 3px rgba(13,202,240,.15),
    0 0 20px rgba(13,202,240,.12),
    0 0 40px rgba(13,202,240,.04),
    inset 0 0 0 1px rgba(13,202,240,.15) !important;
}


/* ── 10. MODALS — premium depth + shimmer ──
   ──────────────────────────────────────────── */
.rxmodal{
  background:rgba(0,0,0,.50) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
}

.rxmodal__card{
  border-radius:26px !important;
  backdrop-filter:blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter:blur(32px) saturate(200%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.55),
    0 0 1px rgba(255,255,255,.16) inset,
    0 0 60px rgba(13,202,240,.10) !important;
  /* Kill the native scrollbar on the card itself — scroll moves to __body */
  overflow:hidden !important;
}

/* The body inside the modal handles scrolling instead */
.rxmodal__body{
  overflow-y:auto !important;
  max-height:calc(88vh - 64px) !important;
}

/* Animated border shimmer on modals */
.rxmodal__card::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:27px !important;
  padding:1px !important;
  background:conic-gradient(
    from 0deg,
    rgba(59,232,255,.25),
    rgba(255,255,255,.06),
    rgba(13,202,240,.15),
    rgba(255,255,255,.04),
    rgba(59,232,255,.25)
  ) !important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
  opacity:.4 !important;
  animation:rxModalShimmer 8s linear infinite !important;
}

@keyframes rxModalShimmer{
  to{filter:hue-rotate(20deg)}
}

/* Modal entry animation */
.rxmodal[style*="flex"] .rxmodal__card{
  animation:rxModalIn .3s cubic-bezier(.22,1,.36,1) forwards !important;
}

@keyframes rxModalIn{
  0%{opacity:0;transform:translateY(16px) scale(.96)}
  100%{opacity:1;transform:none}
}

.rxmodal__head{
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent) !important;
  border-bottom:1px solid rgba(13,202,240,.08) !important;
}

/* Modal scrollbar — force thin cyan on ALL scrollable modal elements */
.rxmodal,
.rxmodal *,
.rxmodal__card,
.rxmodal__body,
#profileModal,
#profileModal *,
#badgeModal,
#badgeModal *,
#deleteReportModal,
#deleteReportModal *,
#endSessionModal,
#endSessionModal *,
#termsModal,
#termsModal *,
#termsModal div[style*="overflow"]{
  scrollbar-width:thin !important;
  scrollbar-color:rgba(13,202,240,.35) transparent !important;
}

.rxmodal ::-webkit-scrollbar,
.rxmodal__card::-webkit-scrollbar,
.rxmodal__body::-webkit-scrollbar,
#profileModal ::-webkit-scrollbar,
#badgeModal ::-webkit-scrollbar,
#deleteReportModal ::-webkit-scrollbar,
#endSessionModal ::-webkit-scrollbar,
#termsModal ::-webkit-scrollbar{
  width:4px !important;
  height:4px !important;
}

.rxmodal ::-webkit-scrollbar-track,
.rxmodal__card::-webkit-scrollbar-track,
.rxmodal__body::-webkit-scrollbar-track,
#profileModal ::-webkit-scrollbar-track,
#badgeModal ::-webkit-scrollbar-track,
#deleteReportModal ::-webkit-scrollbar-track,
#endSessionModal ::-webkit-scrollbar-track,
#termsModal ::-webkit-scrollbar-track{
  background:transparent !important;
  border-radius:999px !important;
}

.rxmodal ::-webkit-scrollbar-thumb,
.rxmodal__card::-webkit-scrollbar-thumb,
.rxmodal__body::-webkit-scrollbar-thumb,
#profileModal ::-webkit-scrollbar-thumb,
#badgeModal ::-webkit-scrollbar-thumb,
#deleteReportModal ::-webkit-scrollbar-thumb,
#endSessionModal ::-webkit-scrollbar-thumb,
#termsModal ::-webkit-scrollbar-thumb{
  background:rgba(13,202,240,.35) !important;
  border-radius:999px !important;
  border:none !important;
}

.rxmodal ::-webkit-scrollbar-thumb:hover,
.rxmodal__card::-webkit-scrollbar-thumb:hover,
.rxmodal__body::-webkit-scrollbar-thumb:hover,
#profileModal ::-webkit-scrollbar-thumb:hover,
#badgeModal ::-webkit-scrollbar-thumb:hover,
#termsModal ::-webkit-scrollbar-thumb:hover{
  background:rgba(13,202,240,.55) !important;
}

.rxmodal ::-webkit-scrollbar-corner,
.rxmodal__card::-webkit-scrollbar-corner{
  background:transparent !important;
}


/* ── 11. SCROLLBAR — enhanced ──
   ────────────────────────────── */
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(13,202,240,.45), rgba(13,202,240,.25)) !important;
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(13,202,240,.65), rgba(13,202,240,.40)) !important;
  box-shadow:0 0 10px rgba(13,202,240,.3) !important;
}


/* ── 12. GAUGE — glow enhancement ──
   ──────────────────────────────── */
.rx-gauge-fill{
  stroke:var(--cyan-mid) !important;
  filter:drop-shadow(0 0 4px rgba(13,202,240,.5)) !important;
}

.rx-gauge-track{
  stroke:rgba(255,255,255,.05) !important;
}

.rx-gauge-val{
  text-shadow:0 0 12px rgba(13,202,240,.3) !important;
}


/* ── 13. METER BARS — gradient fill ──
   ──────────────────────────────────── */
.meter__fill{
  background:var(--accent-gradient) !important;
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.20),
    0 0 12px rgba(13,202,240,.30) !important;
}


/* ── 14. SEPARATOR — gradient upgrade ──
   ────────────────────────────────────── */
.rxsep{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(13,202,240,.12) 20%,
    rgba(255,255,255,.08) 50%,
    rgba(13,202,240,.12) 80%,
    transparent
  ) !important;
}


/* ── 15. KV ROWS — enhanced borders ──
   ──────────────────────────────────── */
.kv{
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  transition:background .15s ease !important;
}

.kv:hover{
  background:rgba(13,202,240,.02) !important;
}


/* ── 16. TOAST — premium glass ──
   ────────────────────────────── */
.rxtoast{
  border-radius:18px !important;
  backdrop-filter:blur(20px) saturate(160%) !important;
  box-shadow:var(--shadow-lg), var(--shadow-glow) !important;
}


/* ── 17. RXBOT — consistency ──
   ──────────────────────────── */
.rxbotBubble,
.rxbot{
  border-radius:22px !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
}

#rxbotFab{
  box-shadow:
    0 8px 24px rgba(13,202,240,.25),
    0 0 40px rgba(13,202,240,.08) !important;
}


/* ── 18. REPORT ROWS — enhanced ──
   ──────────────────────────────── */
[data-report-row]{
  transition:all .15s ease !important;
  border-radius:14px !important;
}

[data-report-row]:hover{
  background:rgba(13,202,240,.03) !important;
  border-color:rgba(13,202,240,.15) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.18), 0 0 16px rgba(13,202,240,.06) !important;
  transform:translateY(-2px) !important;
}


/* ── 19. FILE PICKER — consistency ──
   ──────────────────────────────────── */
.file-btn{
  background:var(--accent-gradient) !important;
  box-shadow:0 4px 16px rgba(13,202,240,.30), 0 0 1px rgba(255,255,255,.3) inset !important;
}

.file-btn:hover{
  box-shadow:0 8px 24px rgba(13,202,240,.45), 0 0 1px rgba(255,255,255,.4) inset !important;
  filter:brightness(1.06) !important;
}


/* ── 20. PILLS — gradient enhance ──
   ──────────────────────────────── */
.btn.btn-pill{
  background:var(--accent-gradient) !important;
  box-shadow:
    0 6px 20px rgba(13,202,240,.20),
    0 0 1px rgba(255,255,255,.3) inset !important;
  transition:all .12s ease !important;
}

.btn.btn-pill:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 10px 30px rgba(13,202,240,.30),
    0 0 40px rgba(13,202,240,.08),
    0 0 1px rgba(255,255,255,.4) inset !important;
}


/* ── 21. DELETE BUTTON — enhanced ──
   ──────────────────────────────── */
.rx-report-delete{
  transition:all .15s ease !important;
}

.rx-report-delete:hover{
  background:linear-gradient(135deg, rgba(239,68,68,.28), rgba(239,68,68,.12)) !important;
  box-shadow:0 0 20px rgba(239,68,68,.20), 0 0 40px rgba(239,68,68,.06) !important;
  border-color:rgba(239,68,68,.50) !important;
  transform:scale(1.12) !important;
}


/* ── 22. SESSION EMPTY TERMINAL ──
   ────────────────────────────── */
.rx-session-empty{
  background:rgba(0,0,0,.12) !important;
  border-radius:14px !important;
  padding:24px !important;
  border:1px dashed rgba(255,255,255,.06) !important;
}

/* Terminal prompt: subtle cyan wave glow */
.rx-session-empty > span:first-child{
  color:rgba(13,202,240,.45) !important;
  animation:rxPromptWave 3s ease-in-out infinite !important;
}

@keyframes rxPromptWave{
  0%,100%{color:rgba(13,202,240,.35);text-shadow:0 0 0 transparent}
  50%{color:rgba(13,202,240,.6);text-shadow:0 0 12px rgba(13,202,240,.25), 0 0 24px rgba(13,202,240,.08)}
}


/* ── 24. UPLOAD PROGRESS BAR — cyber glow ──
   ─────────────────────────────────────────── */
.rx-upload-progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:0;
}

.rx-upload-track{
  flex:1;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(13,202,240,.15);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}

.rx-upload-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #0891b2, #0dcaf0, #3be8ff);
  box-shadow:
    0 0 12px rgba(13,202,240,.5),
    0 0 24px rgba(13,202,240,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:width .15s ease;
  position:relative;
}

/* Bright edge glow on the fill tip */
.rx-upload-fill::after{
  content:'';
  position:absolute;
  right:0;
  top:-2px;
  bottom:-2px;
  width:16px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg, transparent, rgba(59,232,255,.8));
  box-shadow:0 0 14px rgba(59,232,255,.7), 0 0 28px rgba(13,202,240,.4);
  filter:blur(1px);
}

/* Scanning light sweeping across the track */
.rx-upload-scan{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(59,232,255,.08) 30%,
    rgba(59,232,255,.25) 50%,
    rgba(59,232,255,.08) 70%,
    transparent 100%
  );
  animation:rxUploadScan 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes rxUploadScan{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

.rx-upload-pct{
  font-size:13px;
  font-weight:700;
  color:#3be8ff;
  min-width:36px;
  text-align:right;
  text-shadow:0 0 10px rgba(59,232,255,.4);
  font-variant-numeric:tabular-nums;
}

/* Card glow pulse while uploading */
.card:has(.rx-upload-progress[style*="flex"]){
  border-color:rgba(13,202,240,.30) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.50),
    0 0 40px rgba(13,202,240,.15),
    0 0 80px rgba(13,202,240,.06) !important;
  animation:rxUploadPulse 2s ease-in-out infinite !important;
}

@keyframes rxUploadPulse{
  0%,100%{box-shadow:0 24px 64px rgba(0,0,0,.50),0 0 40px rgba(13,202,240,.15),0 0 80px rgba(13,202,240,.06)}
  50%{box-shadow:0 24px 64px rgba(0,0,0,.50),0 0 55px rgba(13,202,240,.22),0 0 100px rgba(13,202,240,.10)}
}


/* ── 25. ACCESSIBILITY — reduced motion ──
   ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .card,
  .btn,
  .badge,
  .rxmodal__card,
  [data-report-row],
  #poolFloat .vm-row,
  .rx-upload-scan,
  .rx-upload-fill,
  .card:has(.rx-upload-progress){
    transition:none !important;
    animation:none !important;
  }
  .rxmodal__card::before{
    animation:none !important;
  }
}