/* Mappa DNS (/dnsmap): mappamondo 3D su canvas nello stile v2 */

.dnsmap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dnsmap-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dnsmap-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; cursor: pointer; user-select: none;
  background: rgba(13, 21, 42, .9); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; transition: border-color .2s, opacity .2s; }
.dnsmap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dnsmap-chip small { color: var(--muted); font-weight: 500; }
.dnsmap-chip b { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); font: 600 12px var(--font); text-align: center; }
.dnsmap-chip:has(input:not(:checked)) { opacity: .45; }
.dnsmap-chip:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dnsmap-led { width: 10px; height: 10px; border-radius: 50%; }
.dnsmap-chip.is-fast .dnsmap-led { background: #8bd346; box-shadow: 0 0 10px #8bd346; }
.dnsmap-chip.is-slow .dnsmap-led { background: #ffb020; box-shadow: 0 0 10px #ffb020; }
.dnsmap-chip.is-down .dnsmap-led { background: #ff5a6a; box-shadow: 0 0 10px #ff5a6a; }
.dnsmap-chip.is-fast:has(input:checked) { border-color: rgba(139, 211, 70, .45); }
.dnsmap-chip.is-slow:has(input:checked) { border-color: rgba(255, 176, 32, .45); }
.dnsmap-chip.is-down:has(input:checked) { border-color: rgba(255, 90, 106, .45); }
.v2 .dnsmap-bar .ss-wrap { float: none; }
.v2 .dnsmap-bar .ss-button { height: 42px; min-width: 240px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(13, 21, 42, .9); color: #fff; font: 600 14px var(--font); }
.v2 .dnsmap-bar .ss-caret { border-top-color: var(--cyan); }

.dnsmap-frame { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(56, 225, 255, .05); }
.dnsmap { position: relative; height: clamp(480px, calc(100vh - 230px), 880px); overflow: hidden; background:
  radial-gradient(ellipse at 50% 50%, rgba(33, 150, 243, .12), transparent 60%),
  radial-gradient(ellipse at 85% 90%, rgba(139, 92, 246, .12), transparent 55%), rgba(4, 8, 20, .92); }
.dnsmap-canvas { display: block; cursor: grab; touch-action: none; }
.dnsmap-canvas:active { cursor: grabbing; }
.dnsmap-tools { position: absolute; top: 16px; left: 16px; z-index: 5; display: grid; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.dnsmap-tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--line);
  background: rgba(13, 21, 42, .92); color: #fff; font: 600 20px var(--font); cursor: pointer; }
.dnsmap-tools button:last-child { border-bottom: 0; }
.dnsmap-tools button:hover { background: rgba(56, 225, 255, .15); color: var(--cyan); }
.dnsmap-tools svg { width: 18px; height: 18px; }
.dnsmap-loading { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(4, 8, 20, .7); color: var(--text); font-weight: 600; backdrop-filter: blur(3px); }
.dnsmap-loading[hidden] { display: none; }
.dnsmap-loading.is-error { color: #ffc2c8; }
.dnsmap-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(56, 225, 255, .2); border-top-color: var(--cyan); animation: dnsmap-spin 1s linear infinite; }
@keyframes dnsmap-spin { to { transform: rotate(360deg); } }
.dnsmap-meta { margin: 14px 0 0; font-size: 13px; line-height: 1.6; }
.dnsmap-meta a { color: var(--muted); }

/* popup del server / dei server nello stesso punto */
.dnsmap-pop { position: absolute; left: 0; top: 0; z-index: 6; display: grid; gap: 6px; min-width: 200px; max-width: 280px; padding: 14px 16px;
  border-radius: 14px; background: rgba(13, 22, 48, .97); color: var(--text); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); font-size: 14px; pointer-events: auto; }
.dnsmap-pop[hidden] { display: none; }
.dnsmap-pop-ip { font: 700 16px var(--font-display); color: #fff; }
.dnsmap-pop-place { color: var(--muted); font-size: 13px; }
.dnsmap-pop-st { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dnsmap-pop-st i, .dnsmap-pop-list i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dnsmap-pop .is-fast i, .dnsmap-pop-list i.is-fast { background: #8bd346; }
.dnsmap-pop .is-slow i, .dnsmap-pop-list i.is-slow { background: #ffb020; }
.dnsmap-pop .is-down i, .dnsmap-pop-list i.is-down { background: #ff5a6a; }
.dnsmap-pop-links { display: flex; gap: 12px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.dnsmap-pop-links a { color: var(--cyan); }
.dnsmap-pop-list { list-style: none; margin: 4px 0 0; padding: 6px 6px 0 0; border-top: 1px solid var(--line); max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(120, 150, 200, .45) transparent; }
.dnsmap-pop-list::-webkit-scrollbar { width: 8px; }
.dnsmap-pop-list::-webkit-scrollbar-track { background: transparent; }
.dnsmap-pop-list::-webkit-scrollbar-thumb { background: rgba(120, 150, 200, .4); border-radius: 4px; }
.dnsmap-pop-list::-webkit-scrollbar-thumb:hover { background: rgba(120, 150, 200, .65); }
.dnsmap-pop-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.dnsmap-pop-list button:hover { background: rgba(56, 225, 255, .1); }
.dnsmap-pop-list small { margin-left: auto; color: var(--muted); }
.dnsmap-pop-more { color: var(--muted); }

@media (max-width: 700px) {
  .dnsmap { height: min(70vh, 480px); }
  .dnsmap-chip small { display: none; }
  .v2 .dnsmap-bar .ss-wrap, .v2 .dnsmap-bar .ss-button { width: 100%; }
}

/* modalità propagazione (vista grafica): barra di ricerca, legenda, link */
.dnsmap-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; padding: 10px; border-radius: 16px;
  background: rgba(10, 17, 34, .8); border: 1px solid var(--line-strong); }
.dnsmap-search .v2-input { flex: 1 1 260px; border: 0; background: transparent; font-size: 17px; }
.dnsmap-search .v2-input:focus { box-shadow: none; }
.dnsmap-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dnsmap-legend .dnsmap-chip { cursor: default; }
.dnsmap-chip.is-bad .dnsmap-led { background: #ff5a6a; box-shadow: 0 0 10px #ff5a6a; }
.dnsmap-progress { font: 600 13px var(--font); color: var(--muted); margin-left: 4px; }
.dnsmap-detkey { margin-left: auto; white-space: nowrap; }

/* 4 fasce per tempo di risposta (vista panoramica) */
.dnsmap-chip.is-ok .dnsmap-led  { background: #2ecc71; box-shadow: 0 0 10px #2ecc71; }
.dnsmap-chip.is-acc .dnsmap-led { background: #8bd346; box-shadow: 0 0 10px #8bd346; }
.dnsmap-chip.is-deg .dnsmap-led { background: #ffb020; box-shadow: 0 0 10px #ffb020; }
.dnsmap-chip.is-exc .dnsmap-led { background: #8b5cf6; box-shadow: 0 0 10px #8b5cf6; }
.dnsmap-chip.is-ok:has(input:checked)  { border-color: rgba(46, 204, 113, .45); }
.dnsmap-chip.is-acc:has(input:checked) { border-color: rgba(139, 211, 70, .45); }
.dnsmap-chip.is-deg:has(input:checked) { border-color: rgba(255, 176, 32, .45); }
.dnsmap-chip.is-exc:has(input:checked) { border-color: rgba(139, 92, 246, .45); }
.dnsmap-pop .is-ok i  { background: #2ecc71; }
.dnsmap-pop .is-acc i { background: #8bd346; }
.dnsmap-pop .is-deg i { background: #ffb020; }
.dnsmap-pop .is-exc i { background: #8b5cf6; }