/* ═══════════════════════════════════════════════════════════════
   SKYLEX — SKIN "scudo personale" (navy + ciano, glass)
   07/10/2026 — Ordine del Capo: la grafica nuova resta, ma /skylex/
   deve essere l'APPLICATIVO VERO. Questo foglio ridipinge l'app
   (public/spider.html) senza toccare layout, struttura o funzioni:
   agisce quasi solo sulle variabili di tema + colori/ombre.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --spider-red: #22d3ee;
  --spider-red-bright: #67e8f9;
  --spider-red-glow: rgba(34,211,238,.45);
  --spider-blue: #0c4a6e;
  --arc: #22d3ee;
  --arc-bright: #67e8f9;
  --arc-glow: rgba(34,211,238,.5);
  --gold: #ffb020;
  --gold-bright: #ffc94d;
  --gold-glow: rgba(255,176,32,.45);
  --dark: #03060d;
  --dark-2: #060e1a;
  --dark-3: #0a1628;
  --dark-4: #0f1e35;
  --panel: rgba(9,18,30,.62);
  --border: rgba(34,211,238,.18);
  --border-red: rgba(34,211,238,.22);
  --text: #dbe9f5;
  --text-dim: #7f97ab;
  --success: #2ee6a8;
  --warning: #ffb020;
  --danger: #ff3b5c;
}

body {
  background: #03060d radial-gradient(ellipse 120% 60% at 50% 0%, #08202e, transparent) fixed !important;
  color: var(--text);
}

/* scanline futuristico, mai intercettabile dal tocco */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(34,211,238,.025) 3px, rgba(34,211,238,.025) 4px);
  pointer-events: none;
  z-index: 99999;
}

body .spider-nav {
  background: rgba(9,18,30,.62);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(34,211,238,.18);
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}

body .spider-nav-btn {
  color: var(--text-dim);
  background: transparent;
  border-color: transparent;
  border-radius: 14px;
  transition: color .2s, background .2s, box-shadow .2s;
}

body .spider-nav-btn:hover {
  color: var(--text);
  background: rgba(34,211,238,.07);
}

body .spider-nav-btn.active {
  color: #22d3ee;
  background: rgba(34,211,238,.13);
  box-shadow: 0 0 18px rgba(34,211,238,.35), inset 0 0 6px rgba(34,211,238,.12);
}

body .spider-mode-btn,
body .profile-tab {
  color: var(--text-dim);
  background: rgba(9,18,30,.55);
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 14px;
  transition: color .2s, box-shadow .2s, background .2s;
}

body .spider-mode-btn:hover,
body .profile-tab:hover {
  color: var(--text);
  border-color: rgba(34,211,238,.3);
}

body .spider-mode-btn.active,
body .profile-tab.active {
  color: #22d3ee;
  background: rgba(34,211,238,.14);
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 22px rgba(34,211,238,.3), inset 0 0 8px rgba(34,211,238,.1);
}

body button {
  border-radius: 14px;
  transition: box-shadow .2s, background .2s, border-color .2s, color .2s;
}

body button:hover {
  box-shadow: 0 0 14px rgba(34,211,238,.22);
}

body .action-btn,
body .scan-btn {
  background: rgba(34,211,238,.1);
  border-color: rgba(34,211,238,.3);
  color: #67e8f9;
}

body .action-btn:hover,
body .scan-btn:hover {
  background: rgba(34,211,238,.18);
  box-shadow: 0 0 26px rgba(34,211,238,.35);
}

body input,
body select,
body textarea {
  color: var(--text);
  background: rgba(9,18,30,.6);
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 14px;
}

body input:focus,
body select:focus,
body textarea:focus {
  outline: none;
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(34,211,238,.25);
}

body .card,
body .panel {
  background: rgba(9,18,30,.62);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(34,211,238,.05);
}

body .modal {
  background: rgba(9,18,30,.88);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(34,211,238,.22);
  border-radius: 14px;
  box-shadow: 0 8px 50px rgba(0,0,0,.6), 0 0 30px rgba(34,211,238,.12);
}

body .log {
  color: var(--text-dim);
  background: rgba(9,18,30,.5);
  border: 1px solid rgba(34,211,238,.12);
  border-radius: 14px;
}

body h1 { color: #dbe9f5; text-shadow: 0 0 24px rgba(34,211,238,.2); }
body h2 { color: #c4daf0; }
body h3 { color: #a3bfd6; }

body a { color: #22d3ee; text-decoration: none; transition: color .2s, text-shadow .2s; }
body a:hover { color: #67e8f9; text-shadow: 0 0 12px rgba(34,211,238,.45); }

body .hud {
  font-family: 'Orbitron','Courier New',monospace;
  color: #22d3ee;
  text-shadow: 0 0 14px rgba(34,211,238,.5);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #03060d; }
::-webkit-scrollbar-thumb { background: rgba(34,211,238,.22); border-radius: 14px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,.42); }
::selection { background: rgba(34,211,238,.28); color: #eaf6ff; }

/* ─── 07/10/2026 — rinforzo "futuristico" sulle parti disegnate da spider-shell.css ───
   Solo colori/bordi/ombre/raggi: nessuna modifica a layout, struttura o funzioni. */

/* vignetta HUD di fondo (non intercettabile dal tocco) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* barra alta */
body .spider-top {
  background: linear-gradient(180deg, rgba(6,14,26,.9), rgba(6,14,26,.55));
  border-bottom: 1px solid rgba(34,211,238,.18);
  box-shadow: 0 6px 34px rgba(0,0,0,.5);
}
body .spider-top-brand h1 {
  color: #eaf6ff;
  letter-spacing: .06em;
  text-shadow: 0 0 22px rgba(34,211,238,.35);
}
body .spider-top-brand p { color: var(--text-dim); }
body .spider-top-risk .risk-bar {
  background: rgba(3,6,13,.85);
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 999px;
  overflow: hidden;
}
body .spider-top-risk .risk-score-text { color: #67e8f9; text-shadow: 0 0 12px rgba(34,211,238,.4); }

/* SOS: resta rosso (deve urlare), ma con alone */
body .spider-sos-quick {
  background: rgba(255,59,92,.12);
  border: 1px solid rgba(255,59,92,.45);
  color: #ff8fa3;
  box-shadow: 0 0 18px rgba(255,59,92,.25);
}
body .spider-sos-quick:hover { box-shadow: 0 0 30px rgba(255,59,92,.45); }

/* corpo e zone */
body .spider-body { background: transparent; }
body .spider-zone.active { background: rgba(34,211,238,.03); }

/* riquadro camera: vetro + cornice ciano + alone interno */
body .spider-cam-hero,
body .spider-cam-extra,
body .camera-feed {
  border-radius: 18px;
  border: 1px solid rgba(34,211,238,.28);
  box-shadow: 0 10px 40px rgba(0,0,0,.55), inset 0 0 30px rgba(34,211,238,.08);
}
body .camera-feed { background: #02060c; }

/* strip live in alto (fps, volti, rischio) */
body .spider-live-strip .strip-item {
  background: rgba(9,18,30,.62);
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
body .spider-live-strip .strip-val { color: #67e8f9; text-shadow: 0 0 14px rgba(34,211,238,.45); }
body .spider-live-strip .strip-lbl { color: var(--text-dim); }

/* fisarmoniche e pannelli */
body .spider-acc-head {
  background: rgba(9,18,30,.55);
  border: 1px solid rgba(34,211,238,.14);
  border-radius: 14px;
}
body .spider-acc-head:hover { border-color: rgba(34,211,238,.3); }
body .spider-acc-body { background: rgba(6,14,26,.5); border-radius: 0 0 14px 14px; }

/* griglia app */
body .spider-app-card {
  background: rgba(9,18,30,.6);
  border: 1px solid rgba(34,211,238,.14);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
body .spider-app-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 26px rgba(34,211,238,.18);
}
body .spider-app-icon { color: #67e8f9; text-shadow: 0 0 16px rgba(34,211,238,.5); }
body .spider-app-label { color: #cfe6f5; }

/* radar / predizioni: griglia ciano */
body #zone-analisi .spider-radar-panel,
body #zone-analisi .spider-predict-panel {
  background: rgba(9,18,30,.62);
  border: 1px solid rgba(34,211,238,.18);
  border-radius: 16px;
}
body #zone-analisi #predict-list > div { border-bottom: 1px solid rgba(34,211,238,.1); }