/* ═══════════════════════════════════════════════════════════════
   DARKNET WEB PANEL — ENTERPRISE EDITION
   GPU-optimized • Mobile-first • Production quality
   Load order: after all other CSS files
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. ENTERPRISE DESIGN TOKENS
   ─────────────────────────────────────────────────────────────*/
:root {
  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Transition tokens — all use transform/opacity only */
  --trans-fast:   0.15s cubic-bezier(0.22, 1, 0.36, 1);
  --trans-base:   0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --trans-slow:   0.4s  cubic-bezier(0.22, 1, 0.36, 1);
  --trans-spring: 0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-base:    1;
  --z-above:   10;
  --z-sidebar: 40;
  --z-overlay: 50;
  --z-modal:   60;
  --z-toast:   70;
  --z-bn:      80;
  --z-top:     9999;

  /* Bottom nav */
  --bn-h: 60px;
  --bn-safe: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px));

  /* Skeleton shimmer */
  --sk-base:  rgba(255, 45, 120, 0.06);
  --sk-shine: rgba(255, 45, 120, 0.14);

  /* Glass surface */
  --glass-bg:     rgba(12, 0, 28, 0.75);
  --glass-border: rgba(255, 45, 120, 0.18);
}

/* ─────────────────────────────────────────────────────────────
   2. GLOBAL PERFORMANCE FOUNDATION
   ─────────────────────────────────────────────────────────────*/

/* Prevent horizontal scroll globally — fixes overflow bugs */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
/* NOTE: Do NOT set overflow on #panel/#setup — breaks iOS position:fixed + child scroll */

/* GPU-promote animating elements */
.cat-wrap, .cat-svg, .ov-mini-cat,
.sk-jaw, .sk-rib, .sk-arm-l, .sk-arm-r, .sk-eye-l, .sk-eye-r {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce paint areas with contain — only safe ones, skip .main/.pane (iOS flex issues) */
.tb    { contain: layout style; }
.tabs  { contain: layout style; }
/* Isolate message list layout — prevents scrollHeight reads from forcing ancestor reflow */
#msgList { contain: content; }

/* Fix iOS momentum scrolling on all scroll containers */
.tab-body, .sb-list, #amWrap, #msgList,
.bulk-list, .modal, .adm-subtabs, .tabs, .osint-results {
  -webkit-overflow-scrolling: touch;
}
/* smooth scroll for user-initiated scrolling only —
   #msgList excluded: programmatic scrollTop=scrollHeight fights CSS smooth scroll
   and causes compounding GPU animation overhead on rapid message arrival */
.tab-body, .sb-list, #amWrap,
.bulk-list, .modal, .adm-subtabs, .osint-results {
  scroll-behavior: smooth;
}
#msgList { scroll-behavior: auto; }

/* Prevent body bounce/overscroll */
body { overscroll-behavior: none; }
#setup, #panel { overscroll-behavior: contain; }
.tab-body, #amWrap, #msgList { overscroll-behavior-y: contain; }

/* iOS font size adjustment */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Smooth text rendering */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   3. SKELETON LOADER SYSTEM
   ─────────────────────────────────────────────────────────────*/
@keyframes skShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.sk-block {
  background: linear-gradient(
    90deg,
    var(--sk-base) 25%,
    var(--sk-shine) 50%,
    var(--sk-base) 75%
  );
  background-size: 800px 100%;
  animation: skShimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}

/* Skeleton rows for loading states */
.sk-row  { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.sk-row.wide  { width: 80%; }
.sk-row.mid   { width: 55%; }
.sk-row.short { width: 35%; }
.sk-circle    { border-radius: 50%; }

/* Override .ldwrap to look premium */
.ldwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  color: var(--sub);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
}

/* Skeleton rows inside table/list loading states */
.sb-list .ldwrap,
#ovTable .ldwrap {
  width: 100%;
  align-items: stretch;
  padding: 16px;
  gap: 0;
}
.sb-list .ldwrap::before,
.sb-list .ldwrap::after,
#ovTable .ldwrap::before,
#ovTable .ldwrap::after {
  content: '';
  display: block;
  height: 44px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 50%, var(--sk-base) 75%);
  background-size: 800px 100%;
  animation: skShimmer 1.6s ease-in-out infinite;
  border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────
   4. BOTTOM NAVIGATION (Mobile — shows only on ≤ 640px and when logged in)
   ─────────────────────────────────────────────────────────────*/
.bottom-nav {
  display: none; /* hidden on desktop and login screen */
}

@media (max-width: 640px) {
  /* Only show when panel is open (logged in) — hide on login screen */
  #panel.open ~ .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-bn);
    background: rgba(6, 0, 18, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(255, 45, 120, 0.2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: var(--bn-h);
    align-items: stretch;
    box-shadow: 0 -1px 0 rgba(255, 45, 120, 0.12), 0 -8px 40px rgba(0, 0, 0, 0.7);
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 10px;
    background: none;
    border: none;
    color: var(--dim);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--trans-fast), opacity var(--trans-fast);
    position: relative;
    min-height: var(--bn-h);
    outline: none;
  }

  .bn-item:active { opacity: 0.7; }

  .bn-item.active { color: var(--gold); }

  .bn-pip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 28px;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 6px var(--gold);
    opacity: 0;
    transition: opacity var(--trans-fast), transform var(--trans-base);
    transform-origin: center;
  }

  .bn-item.active .bn-pip {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  .bn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 2;
  }

  .bn-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    line-height: 1;
  }

  /* Adjust body content to not hide under bottom nav */
  #panel.open .body {
    padding-bottom: 0; /* handled by tab-body below */
  }
  #panel.open .tab-body {
    padding-bottom: calc(var(--bn-safe) + 8px);
  }
  /* Sidebar: pad bottom so sb-footer isn't hidden under the bottom nav */
  .sb {
    padding-bottom: var(--bn-safe) !important;
  }
  /* Override for scroll-height-based panes */
  #amWrap {
    height: calc(100dvh - 310px - var(--bn-safe)) !important;
  }

  /* Toast: float above bottom nav + no translateX (left/right already set by responsive.css) */
  .toast {
    bottom: calc(var(--bn-safe) + 16px);
    transform: translateY(24px) scale(0.96);
  }
  .toast.show {
    transform: translateY(0) scale(1);
  }

  /* Connection badge on bottom nav */
  .bn-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 14px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    border: 1.5px solid rgba(6, 0, 18, 0.96);
    display: none;
  }
  .bn-badge.show { display: block; }
}

/* ─────────────────────────────────────────────────────────────
   5. ENHANCED CARD SYSTEM
   ─────────────────────────────────────────────────────────────*/

/* Glassmorphism cards */
.sc {
  background: linear-gradient(145deg,
    rgba(22, 0, 44, 0.9),
    rgba(10, 0, 22, 0.95)
  );
  border: 1px solid rgba(255, 45, 120, 0.15);
  transition: transform var(--trans-base), opacity var(--trans-base);
}

/* Touch-safe hover — only on pointer:fine devices */
@media (hover: hover) and (pointer: fine) {
  .sc:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,45,120,.2);
  }
}

/* OSINT cards */
.osint-card {}

/* ─────────────────────────────────────────────────────────────
   6. SMOOTH MODAL SYSTEM
   ─────────────────────────────────────────────────────────────*/

/* Modal transitions — transform+opacity only (GPU-safe) */
.overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Always scrollable at every screen size — overrides components.css overflow:hidden */
.modal {
  transform: translateY(16px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

/* Fix ::before accent bar rounded corners — no longer needs overflow:hidden on parent */
.modal::before { border-radius: 24px 24px 0 0; }

.overlay.open .modal {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile: modals slide up from bottom */
@media (max-width: 640px) {
  .modal {
    transform: translateY(40px);
    max-height: calc(96vh - env(safe-area-inset-bottom, 0px));
    max-height: calc(96dvh - env(safe-area-inset-bottom, 0px));
  }
  .overlay.open .modal {
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   7. TABS — ENTERPRISE SCROLL SNAP
   ─────────────────────────────────────────────────────────────*/

/* Smooth tab indicator */
.tab {
  position: relative;
  transition: color var(--trans-fast);
  white-space: nowrap;
}

.tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  transition: transform var(--trans-base);
  transform-origin: center;
}

.tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Mobile tab scroll improvements */
@media (max-width: 640px) {
  .tabs {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Hide scrollbar on mobile tabs */
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; }
}

/* ─────────────────────────────────────────────────────────────
   8. ENTERPRISE INPUT SYSTEM
   ─────────────────────────────────────────────────────────────*/

/* Smooth focus transitions */
.fi, .sinp, .sarea, .nuke-inp, .nuke-area, .otp-note-inp {
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  /* Prevent iOS auto-zoom — must be 16px */
  font-size: 16px !important;
}

/* Better focus ring */
.fi:focus, .sinp:focus, .sarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.12);
  outline: none;
}

/* Prevent keyboard-jump on mobile: no height transitions on inputs */
.fi, .sinp, .sarea { height: auto; }

/* ─────────────────────────────────────────────────────────────
   9. REALTIME CONNECTION INDICATOR
   ─────────────────────────────────────────────────────────────*/
.live-dot {
  /* Replace expensive box-shadow animation with opacity pulse */
  box-shadow: none !important;
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--mint);
  opacity: 0;
  animation: liveRing 2s ease-out infinite;
}

@keyframes liveRing {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   10. EMPTY + ERROR STATES
   ─────────────────────────────────────────────────────────────*/
.ph, .no-dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--trans-slow), transform var(--trans-slow);
}

.ph.active, .no-dev.active {
  opacity: 1;
  transform: translateY(0);
}

/* Always show empty/error states immediately if present */
.ph, .no-dev { opacity: 1; transform: none; }

/* OSINT states: enterprise.css loads AFTER osint.css so we must explicitly
   keep these hidden when inactive — they have padding:60px that creates
   invisible ghost space and pushes results far down the page otherwise */
.osint-empty:not(.active),
.osint-error:not(.active) { display: none !important; }
.osint-empty.active,
.osint-error.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.ei {
  font-size: 42px;
  margin-bottom: 16px;
  opacity: 0.4;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   11. SMOOTH TOAST SYSTEM
   ─────────────────────────────────────────────────────────────*/
.toast {
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.18s ease;
  border: 1px solid rgba(255, 45, 120, 0.2);
}
.toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   12. PANE TRANSITIONS — smooth content switching
   ─────────────────────────────────────────────────────────────*/
.pane {
  display: none;
}
.pane.active {
  display: block;
  /* Explicit values are the FALLBACK if animation is killed on mobile.
     The paneIn animation overrides these while it runs. */
  opacity: 1;
  transform: translateY(0);
  animation: paneIn var(--trans-slow);
}

@keyframes paneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─────────────────────────────────────────────────────────────
   13. ENTERPRISE TOPBAR ENHANCEMENTS
   ─────────────────────────────────────────────────────────────*/

/* GPU-accelerate topbar glow line */
.tb::after {  }

/* Topbar neon pulse — replace box-shadow animation with opacity */
.tb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 45, 120, 0.02),
    rgba(217, 70, 239, 0.04),
    rgba(255, 45, 120, 0.02)
  );
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   14. MESSAGE LIST — ENTERPRISE VIRTUAL FEEL
   ─────────────────────────────────────────────────────────────*/

/* Message bubble entrance animation */
.msg-bub {
  opacity: 0;
  transform: translateX(-8px);
  animation: msgBubIn 0.3s var(--trans-base) forwards;
}

@keyframes msgBubIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Stagger — CSS custom property approach */
.msg-bub:nth-child(1)  { animation-delay: 0.02s; }
.msg-bub:nth-child(2)  { animation-delay: 0.04s; }
.msg-bub:nth-child(3)  { animation-delay: 0.06s; }
.msg-bub:nth-child(4)  { animation-delay: 0.08s; }
.msg-bub:nth-child(5)  { animation-delay: 0.10s; }
.msg-bub:nth-child(6)  { animation-delay: 0.12s; }
.msg-bub:nth-child(7)  { animation-delay: 0.14s; }
.msg-bub:nth-child(8)  { animation-delay: 0.16s; }
.msg-bub:nth-child(9)  { animation-delay: 0.18s; }
.msg-bub:nth-child(n+10) { animation-delay: 0.2s; }

/* ─────────────────────────────────────────────────────────────
   15. SIDEBAR DEVICE LIST — ENTERPRISE UX
   ─────────────────────────────────────────────────────────────*/

.dev-item {
  transition: background var(--trans-fast), transform var(--trans-fast);
}

@media (hover: hover) and (pointer: fine) {
  .dev-item:hover { transform: translateX(3px); }
}

/* Touch active state */
.dev-item:active { opacity: 0.8; }

/* ─────────────────────────────────────────────────────────────
   16. ENTERPRISE SCROLLBAR (Desktop)
   ─────────────────────────────────────────────────────────────*/
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 45, 120, 0.25);
  border-radius: 4px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 120, 0.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,45,120,.25) transparent; }

/* ─────────────────────────────────────────────────────────────
   17. TOUCH FEEDBACK SYSTEM
   ─────────────────────────────────────────────────────────────*/

/* Remove 300ms tap delay everywhere */
a, button, [onclick], label, .tab, .dev-item,
.bn-item, .tb-btn, .mbtn, .mfb, .sfbtn, .stb,
.sbf, .da, .cta, .sbtn, .bulk-send {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Tactile press feedback — GPU-only (scale, opacity) */
button:active, .cta:active, .sbtn:active, .bulk-send:active,
.tb-btn:active, .mbtn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────
   18. LOGIN CARD — ENTERPRISE POLISH
   ─────────────────────────────────────────────────────────────*/

/* Entrance animation for setup card */
.setup-card {
  animation: cardEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* CTA button — GPU-only hover */
.cta {
  transition: transform var(--trans-fast), opacity var(--trans-fast), box-shadow var(--trans-fast);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255,45,120,.55), 0 0 30px rgba(217,70,239,.25);
  }
}

/* ─────────────────────────────────────────────────────────────
   19. NUKE PANEL — ENTERPRISE VISUAL
   ─────────────────────────────────────────────────────────────*/
.nuke-fire-btn {
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}
@media (hover: hover) and (pointer: fine) {
  .nuke-fire-btn:hover { transform: translateY(-2px); }
}

/* ─────────────────────────────────────────────────────────────
   20. OTP BAR — SMOOTH ENTRANCE
   ─────────────────────────────────────────────────────────────*/
#otpBar {
  transform: translateY(-100%);
  transition: transform var(--trans-spring);
}
#otpBar.show {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────
   21. ANNOUNCEMENT BAR — SMOOTH ENTRANCE
   ─────────────────────────────────────────────────────────────*/
#announcementBar {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--trans-slow), opacity var(--trans-slow);
  opacity: 0;
}
#announcementBar.show {
  max-height: 80px;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   22. ADMIN PANEL — ENTERPRISE TABS
   ─────────────────────────────────────────────────────────────*/
.adm-subtabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.adm-subtabs::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────
   23. VIEWPORT FIX — Black screen prevention
   ─────────────────────────────────────────────────────────────*/

/* Ensure panel fills screen even if dvh not supported */
#panel {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Login screen always covers panel during the pre-restore auth-check transition */
#setup { position: relative; z-index: 200; }

/* Prevent white/black flash on initial load */
html { background: #06000f; }

/* overflow:hidden/clip on body breaks position:fixed on iOS Safari — don't set it.
   transform:translateZ(0) on #panel also breaks position:fixed — don't use it either.
   Each scroll container manages its own overflow. */

/* ─────────────────────────────────────────────────────────────
   24. RESPONSIVE OVERFLOW FIXES
   ─────────────────────────────────────────────────────────────*/

/* Prevent any element from causing horizontal overflow */
.tb, .tabs, .tab-body, .pane, .ov-banner,
.stat-grid, .msg-top, .msg-bar, .simbar,
.sc2, .nuke-card, .sw { max-width: 100%; }

/* OSINT specifically — prevent card overflow */
.osint-card, .osint-results { max-width: 100%; box-sizing: border-box; }

/* Fix table overflow on mobile */
.tbl-wrap, .adm-user-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────
   25. PREMIUM GLOW — Replace box-shadow loops with pseudo-elements
   ─────────────────────────────────────────────────────────────*/

/* Status indicators — opacity-only, no box-shadow animation */
.td-r { box-shadow: 0 0 5px rgba(255,95,87,.4); }
.td-y { box-shadow: 0 0 5px rgba(254,188,46,.35); }
.td-g { box-shadow: 0 0 5px rgba(40,200,64,.35); }

/* Stat cards top gradient bars — smoother */
.sc::before { transition: opacity var(--trans-base); }

/* ─────────────────────────────────────────────────────────────
   26. MOBILE KEYBOARD FIX
   ─────────────────────────────────────────────────────────────*/

/* When keyboard opens on iOS, prevent layout from jumping */
@supports (-webkit-touch-callout: none) {
  #setup {
    /* Use min-height instead of exact height to allow keyboard */
    min-height: -webkit-fill-available;
  }
  #panel {
    min-height: -webkit-fill-available;
  }
}

/* ─────────────────────────────────────────────────────────────
   27. PARTICLE SYSTEM OPTIMIZATION (Desktop only)
   ─────────────────────────────────────────────────────────────*/
#sakuraCanvas { contain: strict; }

/* ─────────────────────────────────────────────────────────────
   28. ENTERPRISES STATUS BAR (Mobile connectivity indicator)
   ─────────────────────────────────────────────────────────────*/
.conn-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mint);
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.18);
  flex-shrink: 0;
}
.conn-indicator.offline {
  color: var(--rose);
  background: rgba(255, 69, 96, 0.08);
  border-color: rgba(255, 69, 96, 0.18);
}
.conn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   29. REDUCED MOTION — Full override
   ─────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bottom-nav, .bn-item { transition: none !important; }
  .pane.active { animation: none !important; opacity: 1 !important; transform: none !important; }
  .modal { transition: none !important; }

  /* Skeleton mascot animations are intentional — keep them running even with reduced motion.
     Explicit longhands with class specificity (0,1,0) beat the * block (0,0,0) above. */
  .sk-jaw  { animation-duration: 2.8s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .sk-rib  { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .sk-arm-l{ animation-duration: 3.5s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .sk-arm-r{ animation-duration: 3.5s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .sk-eye-l{ animation-duration: 5s   !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .sk-eye-r{ animation-duration: 5s   !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .cat-svg, .ov-mini-cat { animation-duration: 4s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  /* Firebase Manager flame — also keep running */
  .flame-wrap  { animation-duration: 3s   !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .flame-core  { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .flame-inner { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
  .flame-glow  { animation-duration: 2s   !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
}

/* ─────────────────────────────────────────────────────────────
   30. HIGH CONTRAST ACCESSIBILITY
   ─────────────────────────────────────────────────────────────*/
/* ─────────────────────────────────────────────────────────────
   31. ADMIN MODAL — MOBILE COMPACT LAYOUT
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Permissions: 2-column grid halves the list height */
  #admModalPerms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin: 10px 0;
  }
  .adm-perm-row {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,45,120,.05);
  }
  .adm-perm-lbl { font-size: 10.5px; }

  /* Compact modal sections on mobile */
  #admUserModal .modal,
  #userSecurityModal .modal {
    padding: 20px 16px;
  }
  #admUserModal .mt,
  #userSecurityModal .mt { margin-bottom: 14px; }

  /* Shrink inner section padding in the 2FA / Firebase boxes */
  #admUserModal .modal > div[style*="padding:14px"],
  #admUserModal .modal > div[style*="padding: 14px"] {
    padding: 10px 12px !important;
  }
}
@media (forced-colors: active) {
  .bottom-nav { border-top: 2px solid ButtonText; }
  .bn-item.active { color: Highlight; }
}

/* ─────────────────────────────────────────────────────────────
   32. HEX / CIRCUIT GRID AMBIENT BACKGROUND
   ─────────────────────────────────────────────────────────────*/
#hexGrid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 34px, rgba(255,45,120,.022) 34px, rgba(255,45,120,.022) 35px),
    repeating-linear-gradient(90deg,  transparent, transparent 34px, rgba(255,45,120,.022) 34px, rgba(255,45,120,.022) 35px),
    repeating-linear-gradient(60deg,  transparent, transparent 68px, rgba(217,70,239,.012) 68px, rgba(217,70,239,.012) 69px),
    repeating-linear-gradient(120deg, transparent, transparent 68px, rgba(217,70,239,.012) 68px, rgba(217,70,239,.012) 69px);
  animation: gridFlicker 10s infinite;
}
/* Kill on mobile — saves compositing overhead */
@media (pointer: coarse) { #hexGrid { display: none !important; } }

/* ─────────────────────────────────────────────────────────────
   33. OTP BAR — INTENSE GLOW ON NEW OTP
   ─────────────────────────────────────────────────────────────*/
@keyframes otpGlowPulse {
  0%   { box-shadow: 0 2px 10px rgba(255,45,120,.25); }
  35%  { box-shadow: 0 0 0 5px rgba(255,45,120,.12), 0 4px 60px rgba(255,45,120,.9), 0 0 50px rgba(217,70,239,.6); }
  100% { box-shadow: 0 2px 10px rgba(255,45,120,.25); }
}
#otpBar.new-otp {
  animation: otpGlowPulse 0.65s ease-out 3 !important;
}
@media (pointer: coarse) {
  #otpBar.new-otp { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   34. FLOATING NUKE STOP BUTTON (always accessible on mobile)
   ─────────────────────────────────────────────────────────────*/
#nukeFloatStop {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9990;
  background: linear-gradient(135deg, rgba(255,69,96,.92), rgba(200,30,60,.95));
  border: 2px solid rgba(255,100,120,.55);
  border-radius: 28px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 11px 18px;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#nukeFloatStop.visible { display: flex; }
/* On desktop the inline stop button is visible — no need for float */
@media (min-width: 641px) { #nukeFloatStop { display: none !important; } }

/* ─────────────────────────────────────────────────────────────
   35. PULL-TO-REFRESH INDICATOR
   ─────────────────────────────────────────────────────────────*/
#pullIndicator {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%) translateY(-70px);
  z-index: 9995;
  background: rgba(12,0,28,.92);
  border: 1px solid rgba(255,45,120,.45);
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
  color: var(--gold2);
  letter-spacing: 1px;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
  opacity: 0;
  white-space: nowrap;
}
#pullIndicator.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#pullIndicator.ready {
  border-color: rgba(0,229,160,.5);
  color: var(--mint);
}

/* ─────────────────────────────────────────────────────────────
   36. THEME SWITCHER BUTTON
   ─────────────────────────────────────────────────────────────*/
#themeBtn { font-size: 13px !important; }
/* Always show theme button on mobile (unlike other tb-btns) */
@media (max-width: 640px) {
  #themeBtn { display: flex !important; padding: 0 8px !important; }
}

/* ─────────────────────────────────────────────────────────────
   37. NUKE LOG — FIXED HEIGHT SO STOP BUTTON STAYS REACHABLE
   ─────────────────────────────────────────────────────────────*/
.nuke-log {
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────
   38. LAST-SEEN BADGE ON DEVICE ITEMS
   ─────────────────────────────────────────────────────────────*/
.dev-last-seen {
  font-size: 9px;
  color: var(--dim);
  font-family: 'Share Tech Mono', monospace;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────────────────────
   39. OSINT RESULTS — PROPER SCROLL ON ALL SCREENS
   ─────────────────────────────────────────────────────────────*/
/* NOTE: Must be #pane-osint.active — not bare #pane-osint.
   ID selector (1,0,0) beats .pane { display:none } (0,1,0), so a bare
   #pane-osint rule would make the pane always visible. */
#pane-osint.active {
  display: flex;
  flex-direction: column;
}
.osint-results {
  flex: 1;
}
@media (max-width: 640px) {
  .osint-search-wrap { margin-bottom: 14px; }
  .osint-meta { margin-bottom: 10px; }
}