/**
 * NOTA ARCHITETTURA: questo file contiene due sezioni distinte:
 *
 *  1. RESONANCE MODAL CSS (ex resonance.css root)
 *     Classi: res-loader, res-modal-*, res-arc-*, res-bgs-*,
 *     res-tabs, res-tab-btn, res-modal-ch, res-chip, res-composito-*,
 *     res-echo-*, res-merge-*, res-filter-*, res-narrative-*
 *     Usate da profile.js per rendere il modal risonanza/eco.
 *
 *  2. RESONANCE PAGE CSS (ex sections/resonance.css)
 *     Classi: rz-*, ns-*, res-tour, res-legend-*
 *     Usate dalle viste /field/resonances e /field/notifications_settings.
 *
 *  I due file sono stati unificati qui perché il sistema extraCss
 *  carica sections/ in preferenza a root/: senza unione il modal CSS
 *  non veniva mai caricato. Sections/ prevale per la cascade (corretto).
 */

/* ══════════════════════════════════════════════════════════════
   RESONANCE & ECHO
   ══════════════════════════════════════════════════════════════ */

/* ── Mystic loader ─────────────────────────────────────────── */
.res-loader {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 0;
}
.res-loader__rings {
  position: relative; width: 80px; height: 80px;
}
.res-loader__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--gold);
  animation: res-spin 2s linear infinite;
}
.res-loader__ring:nth-child(2) {
  inset: 8px; border-top-color: rgba(181,144,58,.5);
  animation-duration: 1.5s; animation-direction: reverse;
}
.res-loader__ring:nth-child(3) {
  inset: 16px; border-top-color: rgba(181,144,58,.3);
  animation-duration: 2.5s;
}
.res-loader__text {
  margin-top: 16px; font-size: 12px; color: var(--ink40);
  letter-spacing: .06em;
}
@keyframes res-spin { to { transform: rotate(360deg); } }

/* ── Modal overrides ───────────────────────────────────────── */
.conn-modal--res { max-width: 620px; padding: 20px; }
.res-modal-title {
  font-size: 18px; font-weight: 500; color: var(--gold);
  font-family: var(--heading, 'Cinzel', serif);
  margin: 0 0 14px; text-align: center;
}

/* ── Bodygraphs side by side ───────────────────────────────── */
.res-bgs {
  display: flex; gap: 8px; justify-content: center;
  margin: 0 0 16px; padding: 14px 8px;
  background: rgba(0,0,0,.18); border-radius: 10px;
}
.res-bg-col {
  flex: 1; text-align: center; min-width: 0;
  max-width: 50%;
}
.res-bg-label {
  font-size: 10px; font-weight: 600; color: var(--ink50);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}
.res-mini-bg {
  width: 100%; height: auto; display: block; max-width: 100%;
}

@media (max-width: 600px) {
  .res-bgs { gap: 4px; padding: 10px 4px; }
}

/* Echo: single bodygraph centered */
.res-echo-bg {
  display: flex; justify-content: center;
  margin: 0 0 14px; padding: 10px;
  background: rgba(0,0,0,.15); border-radius: 10px;
}
.res-echo-bg .res-mini-bg { max-width: 220px; }

/* ── Stats row ─────────────────────────────────────────────── */
.res-modal-stats {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.res-modal-stat { text-align: center; }
.res-modal-stat__num {
  display: block; font-size: 26px; font-weight: 500;
  color: var(--ink); font-family: var(--heading, 'Cinzel', serif);
  line-height: 1.2;
}
.res-modal-stat__lbl {
  display: block; font-size: 9px; color: var(--ink40);
  margin-top: 2px; text-transform: uppercase; letter-spacing: .04em;
}

/* ── Section headers ───────────────────────────────────────── */
.res-modal-section {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink40);
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* ── Channel cards ─────────────────────────────────────────── */
.res-modal-channels { display: flex; flex-direction: column; gap: 6px; }
.res-modal-ch {
  padding: 8px 10px;
  background: rgba(181,144,58,.04);
  border: 1px solid rgba(181,144,58,.1);
  border-radius: 8px;
}
.res-modal-ch__name {
  font-size: 13px; font-weight: 500; color: var(--ink80);
  margin-bottom: 4px;
}
.res-modal-ch__detail {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.res-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  font-weight: 500; white-space: nowrap;
}
.res-chip--a {
  background: rgba(100,180,210,.12); border: 1px solid rgba(100,180,210,.22);
  color: rgba(100,180,210,.95);
}
.res-chip--b {
  background: rgba(200,140,100,.1); border: 1px solid rgba(200,140,100,.22);
  color: rgba(200,140,100,.95);
}
.res-chip--transit {
  background: rgba(120,106,144,.1); border: 1px solid rgba(120,106,144,.25);
  color: rgba(180,160,220,.9);
}
.res-chip__arrow { color: var(--ink30); font-size: 13px; }
.res-modal-ch__via {
  font-size: 11px; color: var(--ink40); margin-top: 2px;
}

/* ── Centers & gates ───────────────────────────────────────── */
.res-modal-centers, .res-modal-gates {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.res-center-pill, .res-gate-pill {
  font-size: 11px; padding: 3px 10px; border-radius: 6px;
  background: rgba(181,144,58,.07); border: 1px solid rgba(181,144,58,.15);
  color: var(--gold);
}
.res-gate-pill { background: rgba(200,180,140,.05); color: var(--ink60); border-color: rgba(200,180,140,.1); }

.res-modal-empty {
  text-align: center; font-size: 13px; color: var(--ink30);
  font-style: italic; padding: 16px 0;
}

/* ── Conditioning arrows ───────────────────────────────────── */
.res-conditioning { display: flex; flex-direction: column; gap: 4px; }
.res-cond-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink60);
}
.res-cond-arrow { color: var(--gold); font-size: 14px; }

/* ── Owner profile stats ───────────────────────────────────── */
.prof-resonance-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
.prof-resonance-stat {
  display: flex; align-items: baseline; gap: 4px;
}
.prof-resonance-stat__num { font-size: 16px; font-weight: 500; color: var(--gold); }
.prof-resonance-stat__lbl { font-size: 11px; color: var(--ink40); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .conn-modal--res { padding: 14px; }
  .res-modal-stats { gap: 16px; }
  .res-modal-stat__num { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   RESONANCE V2 — New sections
   ══════════════════════════════════════════════════════════════ */

/* ── Tipo di Relazione ─────────────────────────────────────── */
.res-type-block {
  padding: 14px; margin-bottom: 4px;
  background: rgba(181,144,58,.04); border-radius: 10px;
  border: 1px solid rgba(181,144,58,.1);
}
.res-type-title {
  font-size: 15px; font-weight: 600; color: var(--gold);
  font-family: var(--heading, 'Cinzel', serif);
  margin-bottom: 8px;
}
.res-type-desc {
  font-size: 13px; line-height: 1.6; color: var(--ink70);
}

/* ── Circuit groups ────────────────────────────────────────── */
.res-circuit-group { margin-bottom: 10px; }
.res-circuit-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px; padding-left: 2px;
}
.res-circuit-bar {
  display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; margin-bottom: 6px;
  background: rgba(255,255,255,.04);
}
.res-circuit-bar__seg { min-width: 4px; transition: width .3s; }
.res-circuit-bar__seg:first-child { border-radius: 4px 0 0 4px; }
.res-circuit-bar__seg:last-child { border-radius: 0 4px 4px 0; }
.res-circuit-bar-labels {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.res-circuit-bar-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
}
.res-circuit-scenario {
  font-size: 13px; line-height: 1.6; color: var(--ink60);
  padding: 10px 14px; margin-bottom: 4px;
  background: rgba(255,255,255,.02); border-radius: 8px;
  border-left: 3px solid rgba(181,144,58,.25);
}

/* ── Channel circuit tag ───────────────────────────────────── */
.res-modal-ch__circuit-tag {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; margin-top: 3px;
}

/* ── Conditioning details ──────────────────────────────────── */
.res-cond-label {
  font-size: 12px; font-weight: 600; color: var(--ink60);
}
.res-cond-details {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.res-cond-item {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.res-cond-desc {
  font-size: 11px; color: var(--ink40); font-style: italic;
}

/* ── Open centers shared ───────────────────────────────────── */
.res-open-intro {
  font-size: 12px; color: var(--ink40); margin-bottom: 10px;
  line-height: 1.5;
}
.res-open-list {
  display: flex; flex-direction: column; gap: 8px;
}
.res-open-item {
  padding: 10px 12px;
  background: rgba(255,255,255,.02); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.res-open-item__center {
  font-size: 12px; font-weight: 600; color: var(--ink60);
  margin-bottom: 4px; text-transform: uppercase;
  letter-spacing: .04em;
}
.res-open-item__desc {
  font-size: 12px; line-height: 1.6; color: var(--ink50);
}

/* ── Attractors ────────────────────────────────────────────── */
.res-attractors-intro {
  font-size: 12px; color: var(--ink40); margin-bottom: 10px;
  line-height: 1.5;
}
.res-modal-ch--attractor {
  background: rgba(140,100,200,.04);
  border-color: rgba(140,100,200,.1);
}
.res-chip__arrow--magnet {
  color: rgba(200,160,80,.7); font-size: 16px;
}

/* ── Composite SVG ─────────────────────────────────────────── */
.res-composite-wrap {
  display: flex; justify-content: center;
  padding: 12px; margin-bottom: 6px;
  background: rgba(0,0,0,.15); border-radius: 10px;
}
.res-composite-svg {
  width: 100%; max-width: 260px; height: auto;
}
.res-composite-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 4px;
}
.res-legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--ink40);
}
.res-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.res-composite-count {
  text-align: center; font-size: 11px; color: var(--ink30);
  margin-bottom: 10px;
}

/* ── Responsive V2 ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .res-type-block { padding: 10px; }
  .res-type-title { font-size: 14px; }
  .res-type-desc { font-size: 12px; }
  .res-open-item { padding: 8px 10px; }
  .res-circuit-scenario { padding: 8px 10px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   RESONANCE V3 — Merge animation + interactive composito
   ══════════════════════════════════════════════════════════════ */

/* ── Merge animation stage ─────────────────────────────────── */
#res-stage {
  padding: 10px 0 6px;
}
.res-stage-merge {
  display: flex; align-items: center; justify-content: center;
  gap: 0; min-height: 120px; position: relative;
}
.res-stage-svg {
  flex: 0 0 auto; width: 100px; text-align: center;
  transition: transform 500ms ease-in-out, opacity 400ms ease;
}
.res-stage-svg .res-mini-bg { width: 90px; height: auto; }
.res-stage-label {
  font-size: 10px; font-weight: 600; color: var(--ink40);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}
.res-stage-center {
  flex: 0 0 auto; width: 50px; text-align: center;
  transition: opacity 300ms ease, transform 300ms ease;
}
.res-stage-infinity {
  font-size: 32px; color: var(--gold);
  font-family: var(--heading, 'Cinzel', serif);
  line-height: 1; filter: drop-shadow(0 0 8px rgba(181,144,58,.5));
}
.res-stage-status {
  text-align: center; font-size: 11px; color: var(--ink30);
  letter-spacing: .06em; margin-top: 8px;
  animation: res-pulse 1.5s ease-in-out infinite;
}
@keyframes res-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Composito interattivo ─────────────────────────────────── */
.res-composito-wrap {
  background: rgba(0,0,0,.2); border-radius: 12px;
  padding: 12px; margin-bottom: 6px;
}
.res-filter-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center; margin-bottom: 10px;
}
.res-filter-btn {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 5px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: var(--ink40);
  cursor: pointer; transition: all .2s;
}
.res-filter-btn:hover { color: var(--ink70); border-color: rgba(255,255,255,.2); }
.res-filter-btn.active {
  background: rgba(181,144,58,.15); border-color: var(--gold);
  color: var(--gold);
}
#res-composito {
  display: flex; justify-content: center;
}
.res-composito-svg {
  width: 100%; max-width: 240px; height: auto;
  display: block; margin: 0 auto;
}

/* ── Tooltip ───────────────────────────────────────────────── */
.res-tooltip-wrap {
  display: inline-block; position: relative; vertical-align: middle;
  margin-left: 4px;
}
.res-tooltip-icon {
  font-size: 11px; color: var(--ink30); cursor: pointer;
  transition: color .2s; user-select: none;
  display: inline-block; line-height: 1;
}
.res-tooltip-icon:hover { color: var(--gold); }
.res-tooltip-box {
  display: none; position: absolute; z-index: 999;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: 220px; padding: 8px 10px;
  background: rgba(20,18,15,.97); border: 1px solid rgba(181,144,58,.2);
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
  font-size: 11px; line-height: 1.55; color: var(--ink60);
  white-space: normal; text-transform: none; font-weight: 400;
  letter-spacing: 0; pointer-events: none;
}
.res-tooltip-box::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: rgba(20,18,15,.97);
}
.res-tooltip-box.active { display: block; }

/* ── Center pills with color ───────────────────────────────── */
.res-center-pill--a {
  background: rgba(100,180,210,.12); border-color: rgba(100,180,210,.25);
  color: rgba(100,180,210,.95);
}
.res-center-pill--b {
  background: rgba(200,140,100,.12); border-color: rgba(200,140,100,.25);
  color: rgba(200,140,100,.95);
}

/* ── Sub-section header ────────────────────────────────────── */
.res-modal-section--sub {
  margin-top: 10px; font-size: 9px;
}

/* ── Responsive V3 ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .res-stage-svg { width: 80px; }
  .res-stage-svg .res-mini-bg { width: 72px; }
  .res-filter-btn { font-size: 9px; padding: 3px 8px; }
  .res-tooltip-box { width: 180px; font-size: 10px; }
  .res-composito-svg { max-width: 200px; }
}

/* ══════════════════════════════════════════════════════════════
   RESONANCE V4 — Real composito + pulsante merge
   ══════════════════════════════════════════════════════════════ */

/* ── Pulsante "Risonanza" (sotto i 2 SVG) ──────────────────── */
/* res-btn-composito defined in app.css */

/* ── Real composito SVG wrapper ────────────────────────────── */
.res-composito-zoom-wrap {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
.res-composito-real-wrap {
  width: 100%; max-width: 260px;
  position: relative;
  margin: 0 auto;
}
.res-composito-real-svg {
  display: block; width: 100%; height: auto;
  touch-action: pan-y; user-select: none;
  margin: 0 auto;
}
.res-composito-zoom-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 0 2px;
}

/* ── Filter bar ────────────────────────────────────────────── */
.res-composito-wrap {
  background: rgba(0,0,0,.2); border-radius: 12px;
  padding: 12px 12px 8px; margin-bottom: 6px;
}
.res-filter-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center; margin-bottom: 10px;
}
.res-filter-btn {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 5px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: var(--ink40);
  cursor: pointer; transition: all .2s;
}
.res-filter-btn:hover { color: var(--ink70); border-color: rgba(255,255,255,.2); }
.res-filter-btn.active {
  background: rgba(181,144,58,.15); border-color: var(--gold); color: var(--gold);
}

/* ── Tooltip ───────────────────────────────────────────────── */
.res-tooltip-wrap {
  display: inline-block; position: relative; vertical-align: middle; margin-left: 4px;
}
.res-tooltip-icon {
  font-size: 11px; color: var(--ink30); cursor: pointer;
  transition: color .2s; user-select: none; display: inline-block; line-height: 1;
}
.res-tooltip-icon:hover { color: var(--gold); }
.res-tooltip-box {
  display: none; position: absolute; z-index: 999;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: 220px; padding: 8px 10px;
  background: rgba(20,18,15,.97); border: 1px solid rgba(181,144,58,.2);
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
  font-size: 11px; line-height: 1.55; color: var(--ink60);
  white-space: normal; text-transform: none; font-weight: 400;
  letter-spacing: 0; pointer-events: none;
}
.res-tooltip-box::after {
  content:''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(20,18,15,.97);
}
.res-tooltip-box.active { display: block; }

/* ── Center pills colored ──────────────────────────────────── */
.res-center-pill--a {
  background: rgba(100,180,210,.12); border-color: rgba(100,180,210,.25); color: rgba(100,180,210,.95);
}
.res-center-pill--b {
  background: rgba(200,140,100,.12); border-color: rgba(200,140,100,.25); color: rgba(200,140,100,.95);
}
.res-modal-section--sub { margin-top: 10px; font-size: 9px; }

/* ── Responsive V4 ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .res-filter-btn { font-size: 9px; padding: 3px 7px; }
  .res-tooltip-box { width: 180px; font-size: 10px; }
  .res-btn-composito { font-size: 13px; }
}

/* ── Composito same size as 2-SVG section ──────────────────── */
#res-bgs-section,
#res-composito-section { width: 100%; }

#res-composito-section .res-composito-wrap {
  padding: 8px 8px 6px;
}

/* Particle overlay must sit on the bgs container */
#res-bgs-section { position: relative; overflow: visible; }
#particle-overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 10; }

/* Sparkle on composito: the container needs position relative */
#res-composito-container { position: relative; }

/* ══════════════════════════════════════════════════════════════
   FLOW ANIMATIONS — for composite bodygraph injected via innerHTML
   Define flowAnim here so it works outside the SVG <style> context.
   ══════════════════════════════════════════════════════════════ */
@keyframes flowAnim {
  0%   { stroke-dashoffset: 320; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -320; opacity: 0; }
}

/* Flow classes for composito — no !important so inline animation-delay works */
#composito-svg .flow-b-g {
  fill: none; stroke: rgba(220,175,65,.26);
  stroke-width: 20; stroke-linecap: round;
  stroke-dasharray: 48 280; stroke-dashoffset: 0;
  animation: flowAnim 2.6s linear infinite;
  pointer-events: none;
}
#composito-svg .flow-b-m {
  fill: none; stroke: rgba(222,180,68,.60);
  stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 40 280; stroke-dashoffset: 0;
  animation: flowAnim 2.6s linear infinite;
  pointer-events: none;
}
#composito-svg .flow-b {
  fill: none; stroke: rgba(232,190,80,1);
  stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 30 280; stroke-dashoffset: 0;
  animation: flowAnim 2.6s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(210,168,60,.9));
}

/* ── Composito sizing: visually same as the res-bgs section ── */
/* The composito-wrap replaces res-bgs, same background/padding */
.res-composito-wrap {
  background: rgba(0,0,0,.18); border-radius: 10px;
  padding: 10px 8px 8px; margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════════
   RESONANCE VISUAL PANEL — Energy animations & visual cards
   ══════════════════════════════════════════════════════════════ */

/* ── Conditioning visual layout ────────────────────────────── */
.res-cond-visual {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 8px;
}
.res-cond-diagram { flex: 0 0 auto; }
.res-cond-svg { width: 100px; height: 168px; display: block; }
.res-cond-lists { flex: 1; min-width: 0; }
.res-cond-group { margin-bottom: 12px; }
.res-cond-group__title {
  font-size: 11px; color: var(--ink50); margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.res-cond-group__title strong { color: var(--ink70); }
.res-cond-arrow-icon { font-size: 10px; }

/* ── Pulse animation on conditioning centers ────────────────── */
@keyframes condPulse {
  0%   { r: 15; opacity: 0.6; }
  70%  { r: 22; opacity: 0; }
  100% { r: 22; opacity: 0; }
}
.cond-pulse {
  animation: condPulse 2s ease-out infinite;
}
.cond-pulse--a { stroke: rgba(100,180,210,.7); }
.cond-pulse--b { stroke: rgba(200,140,100,.7); }

/* ── Gate visual grid ───────────────────────────────────────── */
.res-gates-visual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px; margin-bottom: 8px;
}
.res-gate-card {
  position: relative; overflow: hidden;
  padding: 10px 8px 8px; border-radius: 10px;
  background: rgba(181,144,58,.06);
  border: 1px solid rgba(181,144,58,.15);
  text-align: center; cursor: default;
  transition: border-color .3s, background .3s;
}
.res-gate-card:hover {
  background: rgba(181,144,58,.12);
  border-color: rgba(181,144,58,.35);
}
.res-gate-card__num {
  font-size: 20px; font-weight: 600; color: var(--gold);
  font-family: var(--heading,'Cinzel',serif);
  line-height: 1; margin-bottom: 3px;
}
.res-gate-card__name {
  font-size: 9px; color: var(--ink40); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em;
}
/* Animated pulse ring inside each gate card */
.res-gate-card__pulse {
  position: absolute; inset: 0;
  border-radius: 10px; pointer-events: none;
  animation: gatePulse 3s ease-in-out infinite;
}
@keyframes gatePulse {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(181,144,58,0); }
  50%      { box-shadow: inset 0 0 12px 2px rgba(181,144,58,.18); }
}

/* ── Attractors grid ────────────────────────────────────────── */
.res-attractors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 8px; margin-top: 8px;
}
.res-attractor-card {
  position: relative; overflow: hidden;
  padding: 12px 10px 8px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .3s;
}
.res-attractor-card:hover {
  border-color: var(--circ-color,rgba(181,144,58,.4));
}
.res-attractor-card__spark {
  font-size: 14px; color: var(--circ-color,var(--gold));
  margin-bottom: 4px; display: block; opacity: .6;
}
@keyframes sparkSpin {
  0%  { transform: rotate(0deg);   }
  100%{ transform: rotate(360deg); }
}
.res-attractor-card__name {
  font-size: 11px; font-weight: 600; color: var(--ink70);
  margin-bottom: 4px; line-height: 1.2;
}
.res-attractor-card__gates {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; margin-bottom: 5px;
}
.res-attractor-card__circ {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
.res-attractor-card__bar {
  height: 3px; background: rgba(255,255,255,.08); border-radius: 2px;
  overflow: hidden;
}
.res-attractor-card__bar-fill {
  height: 100%; width: 60%; border-radius: 2px;
  animation: barPulse 2.5s ease-in-out infinite;
}
@keyframes barPulse {
  0%,100% { opacity: .4; width: 30%; }
  50%     { opacity: 1;  width: 80%; }
}

/* ── Open centers icon ──────────────────────────────────────── */
.res-open-item {
  display: flex; align-items: flex-start; gap: 10px;
}
.res-open-item__icon {
  flex: 0 0 auto; font-size: 18px; color: var(--ink20);
  line-height: 1.4; animation: openPulse 3s ease-in-out infinite;
}
@keyframes openPulse {
  0%,100% { opacity: .2; }
  50%     { opacity: .6; }
}
.res-open-item__body { flex: 1; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:480px) {
  .res-cond-visual { flex-direction: column; }
  .res-cond-svg { width: 120px; height: 200px; }
  .res-attractors-grid { grid-template-columns: 1fr 1fr; }
  .res-gates-visual { grid-template-columns: repeat(auto-fill,minmax(65px,1fr)); }
}

/* ── Hide white scrollbar on modal ────────────────────────────── */
.conn-modal--res {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  -webkit-overflow-scrolling: touch;   /* scroll fluido su iOS PWA */
  overscroll-behavior: contain;        /* evita che lo scroll "esca" e si blocchi */
}
.conn-modal--res::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* La X di chiusura resta SEMPRE visibile e cliccabile durante lo scroll del
   modale, sopra l'header sticky (z-index:10). E' il primo figlio di .conn-modal
   e usa sticky per restare ancorata in alto a destra senza occupare il flusso. */
.conn-modal--res .conn-modal__close {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  margin: 0 0 -28px auto;   /* auto a sinistra = spinta a destra; -28px sotto = non spinge l'header */
}

/* ── Conditioning mini SVG (real bodygraph centers) ────────────── */
.res-cond-svg-wrap {
  flex: 0 0 auto; width: 110px;
}
.res-cond-mini-svg {
  width: 110px; height: auto; display: block;
}
/* Override old res-cond-svg size */
.res-cond-svg { display: none; }

/* Fix cond-visual alignment with new SVG */
.res-cond-diagram { flex: 0 0 110px; }

/* ══════════════════════════════════════════════════════════════
   STEP 3 — Resonance compatibility sections
   ══════════════════════════════════════════════════════════════ */

/* ── Compat block ──────────────────────────────────────────── */
.res-compat-block {
  padding: 12px 14px; margin-bottom: 4px;
  background: rgba(255,255,255,.02); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.05);
}
.res-compat-block__types {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.res-compat-tag {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 5px; background: rgba(181,144,58,.1);
  border: 1px solid rgba(181,144,58,.2); color: var(--gold);
  text-transform: capitalize;
}
.res-compat-arrow {
  font-size: 14px; color: var(--ink30); font-weight: 300;
}
.res-compat-block__desc {
  font-size: 12px; line-height: 1.65; color: var(--ink60);
}

/* ── Variables grid ────────────────────────────────────────── */
.res-variables-grid {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.res-var-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  transition: background .2s;
}
.res-var-row--match {
  background: rgba(181,144,58,.06);
  border-color: rgba(181,144,58,.15);
}
.res-var-row__label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink30); flex: 0 0 80px;
}
.res-var-row__values {
  display: flex; align-items: center; gap: 6px; flex: 1;
}
.res-var-val {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 4px;
}
.res-var-val--a {
  background: rgba(100,180,210,.1); color: rgba(100,180,210,.95);
}
.res-var-val--b {
  background: rgba(200,140,100,.1); color: rgba(200,140,100,.95);
}
.res-var-match {
  font-size: 13px; color: var(--gold); font-weight: 600;
}
.res-var-sep { color: var(--ink20); font-size: 12px; }

/* ── Eco: legenda colori + didascalia + evidenziazione gate coinvolti ── */
.res-echo-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin:2px 0 10px;font-size:12px;opacity:.85;}
.res-echo-legend__item{display:inline-flex;align-items:center;gap:6px;}
.res-echo-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.res-echo-dot--a{background:rgba(100,180,210,.95);}
.res-echo-dot--b{background:rgba(200,140,100,.95);}
.res-echo-dot--t{background:rgba(180,160,220,.95);}
.res-echo-line{width:16px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto;}
.res-echo-line--ch{background:rgba(214,178,94,.95);box-shadow:0 0 3px rgba(214,178,94,.6);}
.res-echo-bg-cap{text-align:center;font-size:11px;opacity:.6;margin:-2px 0 10px;}
/* anelli sui gate coinvolti: solo il cerchio del gruppo .hd-gate */
.res-echo-bg .echo-hl circle{stroke-width:3px;}
.res-echo-bg .echo-hl--a circle{stroke:rgba(100,180,210,.95);filter:drop-shadow(0 0 3px rgba(100,180,210,.75));}
.res-echo-bg .echo-hl--b circle{stroke:rgba(200,140,100,.95);filter:drop-shadow(0 0 3px rgba(200,140,100,.75));}
.res-echo-bg .echo-hl--t circle{stroke:rgba(180,160,220,.95);filter:drop-shadow(0 0 3px rgba(180,160,220,.75));}
/* centri coinvolti (S4): contorno viola sulla forma del centro */
.res-echo-bg .echo-hl-c > path:first-of-type{stroke:rgba(180,160,220,.92);stroke-width:3px;filter:drop-shadow(0 0 3px rgba(180,160,220,.6));}

/* ── Eco: bodygraph del giorno (zoom/pan + accensione solo gate/canali del giorno) ── */
.res-echo-bgbox{max-width:340px;margin:0 auto 4px;}
.res-echo-bg{position:relative;overflow:hidden;border-radius:14px;}
.res-echo-bgbox .res-mini-bg{max-width:none;width:100%;height:auto;max-height:46vh;display:block;margin:0 auto;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;}
/* canali del giorno accesi (oro) */
.res-echo-bg .hd-ch.echo-hl-ch{stroke:rgba(214,178,94,.95);stroke-width:3.5px;opacity:1;filter:drop-shadow(0 0 3px rgba(214,178,94,.6));}
/* numero del gate accesi piu' leggibile */
.res-echo-bg .echo-hl text{fill:rgba(245,240,230,.92);font-weight:600;}
/* elementi NON del giorno: scheletro tenue, in secondo piano */
.res-echo-bg .hd-gate:not(.echo-hl) text{opacity:.38;}
.res-echo-bg .hd-gate:not(.echo-hl) circle{opacity:.5;}
/* barra zoom */
.res-echo-zoom{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0 2px;}
.res-echo-zoom button{width:30px;height:30px;border-radius:8px;border:1px solid var(--glow,rgba(255,255,255,.14));
  background:rgba(255,255,255,.05);color:inherit;font-size:16px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.res-echo-zoom button:hover{background:rgba(255,255,255,.12);}
.res-echo-zoom button:active{transform:scale(.94);}
.res-echo-zoom__lbl{min-width:46px;text-align:center;font-size:12px;opacity:.7;}

/* Eco: aree di tap (trasparenti) per i tooltip di gate e canali accesi */
.res-echo-bg .echo-hit{pointer-events:all;cursor:pointer;}
.res-echo-bg .echo-hit-ch{pointer-events:stroke;cursor:pointer;}
.res-echo-bg .hd-center.echo-hl-c{cursor:pointer;}
/* Eco: spazio sopra ai titoli di sezione (solo qui, non tocca le altre schede) */
.res-tab-section-title.res-echo-sec{margin-top:22px;}


/* ══════════════════════════════════════════════════════════════
   RESONANCE PAGE (rz-*, ns-*, res-tour) + LIGHT MODE FIXES
   ══════════════════════════════════════════════════════════════ */

/**
 * Impronta — Resonance / Field
 * Estratto da views/field/ (resonances, notification_settings, tutorial)
 * Dipende da tokens.css, base.css, components.css
 */

/* ══════════════════════════════════════════════════════════════
   RESONANCES PAGE
   ══════════════════════════════════════════════════════════════ */
/* ── Pagina Risonanze (layout isolato e responsive) ───────────────────── */
.rz-page { padding-bottom: 32px; }
.rz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.rz-h1 { margin: 0; }
.rz-legend-trigger {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.4); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s; font-family: var(--mono, monospace); line-height: 1;
}
.rz-legend-trigger:hover { border-color: var(--gold); color: var(--gold); }

.rz-section { margin-bottom: 26px; }
.rz-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink40, #888); font-weight: 600; margin-bottom: 10px;
}
.rz-section-label--gold { color: var(--gold, #b5903a); }
.rz-empty { font-size: 13px; color: var(--ink30, #666); padding: 14px 0; }

.rz-list { display: flex; flex-direction: column; gap: 8px; }

.rz-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "avatar info  date"
    "avatar chips chips";
  column-gap: 12px; row-gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card, #1a1814);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .15s;
}
.rz-item--gold    { border-color: rgba(181,144,58,.18); }
.rz-item--neutral { border-color: var(--ln2); }
.rz-item:hover    { border-color: rgba(181,144,58,.35); }

.rz-avatar    { grid-area: avatar; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rz-avatar-fb { grid-area: avatar; width: 40px; height: 40px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
.rz-avatar-fb--gold    { background: rgba(181,144,58,.1); color: var(--gold, #b5903a); }
.rz-avatar-fb--neutral { background: var(--ink06, rgba(255,255,255,.04)); color: var(--ink30, #666); }

.rz-info { grid-area: info; min-width: 0; }
.rz-name { font-size: 14px; color: var(--ink, #e8e2d5); font-weight: 500;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-sub  { font-size: 11px; color: var(--ink30, #777); margin-top: 1px; }

.rz-date { grid-area: date; font-size: 10px; color: var(--ink20, #555);
           white-space: nowrap; align-self: start; padding-top: 2px; }

.rz-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rz-chip  { font-size: 10px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; font-weight: 500; letter-spacing: .02em; }
.rz-chip--index {
  background: rgba(181,144,58,.15); color: var(--gold, #b5903a);
  border: 1px solid rgba(181,144,58,.25); font-family: var(--mono, monospace);
  font-size: 11px; min-width: 26px; text-align: center;
}
.rz-chip--channels   { background: rgba(100,140,100,.1); color: #5a8060; border: 1px solid rgba(100,140,100,.2); }
.rz-chip--attractors { background: rgba(126,184,201,.1); color: #5a9ab5; border: 1px solid rgba(126,184,201,.2); }
.rz-chip--circuit    { background: rgba(150,120,200,.08); color: #8060a0; border: 1px solid rgba(150,120,200,.15); }

@media (max-width: 560px) {
  .rz-item { grid-template-columns: 36px 1fr auto; column-gap: 10px; padding: 11px 12px; }
  .rz-avatar, .rz-avatar-fb { width: 36px; height: 36px; font-size: 14px; }
  .rz-name { font-size: 13px; }
}

/* Modal leggenda */
.res-legend-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; backdrop-filter: blur(2px); }
.res-legend-overlay.open { display: block; }
.res-legend-modal {
  display: none; position: fixed; z-index: 1001;
  background: var(--card, #1a1814); border: 1px solid rgba(181,144,58,.2);
  border-radius: 12px; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.res-legend-modal.open { display: block; }
.res-legend-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px; font-weight: 500; color: var(--ink60, #999);
  letter-spacing: .04em; text-transform: uppercase;
}
.res-legend-modal__close { background: none; border: none; color: var(--ink30, #666); font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color .15s; }
.res-legend-modal__close:hover { color: var(--ink); }
.res-legend-modal__body { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.res-legend-item { display: flex; align-items: flex-start; gap: 12px; }
.res-legend-chip { flex-shrink: 0; margin-top: 1px; }
.res-legend-text { font-size: 12px; color: var(--ink40, #888); line-height: 1.6; }
.res-legend-text strong { color: var(--ink70, #ccc); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION SETTINGS
   ══════════════════════════════════════════════════════════════ */
.ns-subtitle{color:var(--ink40,var(--ink40));font-size:14px;margin:-6px 0 22px}
.ns-card{background:var(--card);border:1px solid var(--ln2);border-radius:14px;padding:18px 20px;margin-bottom:18px;transition:opacity .2s}
.ns-card[data-dim="1"]{opacity:.45;pointer-events:none}
.ns-section-label{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#b5903a);margin-bottom:14px}
.ns-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(200,180,140,.08)}
.ns-row:first-of-type{border-top:none}
.ns-row__title{font-size:14.5px;color:var(--ink80,var(--ink80))}
.ns-row__hint{font-size:12.5px;color:var(--ink40,var(--ink40));margin-top:3px}
.ns-switch{position:relative;flex-shrink:0;width:46px;height:26px;cursor:pointer}
.ns-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ns-switch__track{position:absolute;inset:0;background:rgba(120,110,90,.35);border-radius:999px;transition:background .2s}
.ns-switch__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.ns-switch input:checked + .ns-switch__track{background:var(--gold,#b5903a)}
.ns-switch input:checked + .ns-switch__track .ns-switch__thumb{transform:translateX(20px)}
.ns-warning{margin:12px 0 0;font-size:13px;color:var(--terra);line-height:1.5}
.ns-flash{display:none;margin-bottom:16px;padding:10px 14px;border-radius:10px;font-size:13.5px}
.ns-flash.show{display:block}
.ns-flash.ok{background:rgba(90,128,96,.15);border:1px solid rgba(90,128,96,.4);color:#8fbf96}
.ns-flash.err{background:rgba(200,80,60,.12);border:1px solid rgba(200,80,60,.35);color:var(--terra)}

/* ══════════════════════════════════════════════════════════════
   TUTORIAL TOUR
   ══════════════════════════════════════════════════════════════ */
.res-tour{position:fixed;inset:0;z-index:99998;pointer-events:none;display:none}
.res-tour__mask{position:fixed;inset:0;background:rgba(15,13,11,.72);pointer-events:auto;display:none}
.res-tour__hole{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(15,13,11,.72);transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none}
.res-tour__tip{position:fixed;z-index:99999;background:var(--card,#1a1814);border:1px solid rgba(181,144,58,.2);border-radius:14px;padding:18px 18px 14px;max-width:340px;pointer-events:auto;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.res-tour__skip{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--ink40,#888);font-size:12px;cursor:pointer;text-decoration:underline}
.res-tour__title{font-family:var(--font);font-size:17px;font-weight:400;color:var(--ink,#e8dfc8);margin:0 0 8px;padding-right:40px}
.res-tour__text{font-size:13px;color:var(--ink60,#aaa);line-height:1.6;margin-bottom:16px}
.res-tour__nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.res-tour__back{background:none;border:none;color:var(--ink40,#888);font-size:13px;cursor:pointer}
.res-tour__dots{display:flex;gap:5px}
.res-tour__dot{width:6px;height:6px;border-radius:50%;background:var(--ink10,#3a342a);transition:all .25s}
.res-tour__dot.active{background:var(--gold);width:16px;border-radius:3px}
.res-tour__next{background:var(--gold);color:var(--bg,#13110e);border:none;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}

/* ============================================================
   LIGHT MODE — Resonance/Field fixes
   Fix elementi con rgba(255,255,255,X) hardcoded che sparivano
   su sfondo chiaro, e tour overlay troppo scuro.
   ============================================================ */

/* Trigger "?" — era white invisible su white */
[data-theme="light"] .rz-legend-trigger {
  border-color: rgba(28, 22, 8, .22);
  background:   rgba(28, 22, 8, .05);
  color:        rgba(28, 22, 8, .45);
}
[data-theme="light"] .rz-legend-trigger:hover {
  border-color: var(--gold);
  color:        var(--gold);
  background:   var(--gold-bg);
}

/* Avatar fallback neutral — era rgba(255,255,255,.04) */
[data-theme="light"] .rz-avatar-fb--neutral {
  background: rgba(28, 22, 8, .08);
  color:      rgba(28, 22, 8, .45);
}

/* Modal legend header border — era rgba(255,255,255,.06) */
[data-theme="light"] .res-legend-modal__header {
  border-bottom-color: rgba(28, 22, 8, .10);
}

/* Modal e tooltip: shadow corretta */
[data-theme="light"] .res-legend-modal,
[data-theme="light"] .res-tour__tip {
  box-shadow: var(--shadow-lg);
}

/* Tour hole overlay: caldo invece del verde-scuro */
[data-theme="light"] .res-tour__hole {
  box-shadow: 0 0 0 9999px rgba(28, 22, 8, .48);
}
[data-theme="light"] .res-tour__mask {
  background: rgba(28, 22, 8, .48);
}

/* Switch track */
[data-theme="light"] .ns-switch__track {
  background: rgba(28, 22, 8, .20);
}
[data-theme="light"] .ns-switch input:checked + .ns-switch__track {
  background: var(--gold);
}

/* Riga separator */
[data-theme="light"] .ns-row {
  border-top-color: rgba(28, 22, 8, .08);
}

/* Flash messages nel notif settings */
[data-theme="light"] .ns-flash.ok {
  background:   rgba(58, 110, 68, .10);
  border-color: var(--sage-ln);
  color:        var(--sage);
}
[data-theme="light"] .ns-flash.err {
  background:   var(--terra-bg);
  border-color: var(--terra-ln);
  color:        var(--terra);
}