/* === Общие стили и переменные темы === */
:root {
  --accent-primary:  #B0B8BF;   /* приглушённый индиго */
  --accent-success:  #6A8A6A;   /* приглушённый зелёный */
  --accent-error:    #8A6A6A;   /* приглушённый розовый */
  --bg-color:        #07090C;   /* почти чёрный фон страницы */
  --surface-color:   #1E1E1E;   /* фон для карточек и контейнеров */
  --text-color:      #E0E0E0;   /* светло-серый текст */
  --border-color:    #2A2A2A;   /* приглушённая тёмная граница */
  --panel-cyan:      #49D9FF;
  --panel-mint:      #63FFC7;
  --panel-shell:     rgba(7, 13, 24, 0.86);
  --panel-shell-2:   rgba(7, 16, 22, 0.68);
  --info-panel-width: clamp(430px, 27vw, 680px);
  --info-panel-gap: clamp(38px, 2.8vw, 64px);
  --info-panel-reserve: calc(var(--info-panel-width) + var(--info-panel-gap));
  --info-panel-pad-x: clamp(14px, 1.25vw, 24px);
  --info-toggle-width: 56px;
  --info-toggle-overlap: 14px;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background: #060A1D;
  color: var(--text-color);
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.grid-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-image: 
      linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 40px;
  background: linear-gradient(180deg, rgba(10, 14, 39, 0.95) 0%, transparent 100%);
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.header h1 {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00ffff, #0080ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#main-ip-header {
  position: fixed;
  z-index: 10;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: var(--info-panel-reserve);
  width: auto;
  max-width: none;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
}

.map-container:active {
  cursor: grabbing;
}

#world-map {
  width: 100%;
  height: 100%;
  outline: none;
}

#world-map:focus {
  filter: brightness(1.1);
}

.country {
  fill: rgba(0, 255, 255, 0.05);
  stroke: rgba(0, 255, 255, 0.3);
  stroke-width: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.country:hover {
  fill: rgba(0, 255, 255, 0.2);
  stroke: #00ffff;
  stroke-width: 1;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.country:focus {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}

.country-point {
  fill: #00ffff;
  stroke: #fff;
  stroke-width: 1;
  filter: drop-shadow(0 0 5px #00ffff);
}

/* === Подсветка стран во время атак === */
.country.attacking-country {
  fill: rgba(0, 255, 255, 0.6) !important;
  stroke: #00ffff !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8)) !important;
  animation: pulse-attack 2s infinite;
}

.country.target-country {
  fill: rgba(255, 107, 53, 0.7) !important;
  stroke: #ff6b35 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.8)) !important;
  animation: pulse-target 2s infinite;
}

.country.DDoS {
  fill: rgba(255, 0, 68, 0.8) !important;
  stroke: #ff0044 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 20px rgba(255, 102, 136, 1)) !important;
  animation: pulse-target 2s infinite;
}

@keyframes pulse-attack {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 107, 53, 1));
  }
}

@keyframes pulse-target {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(0, 255, 255, 1));
  }
}

@keyframes panelSweepCard {
  0% { background-position: -240px 0, 0 0; }
  100% { background-position: calc(100% + 240px) 0, 0 0; }
}

@keyframes panelBarPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

.attack-ddos { background: #ff4444; }
.attack-malware { background: #ffaa00; }
.attack-phishing { background: #00ff88; }
.attack-intrusion { background: #aa00ff; }

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 14, 26, 0.85);
  border-radius: 4px;
  border: 1px solid rgba(73, 217, 255, 0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 255, 199, 0.55), rgba(73, 217, 255, 0.55));
  border-radius: 4px;
  border: 2px solid rgba(8, 14, 26, 0.85);
  box-shadow: 0 0 8px rgba(99, 255, 199, 0.35);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 255, 199, 0.85), rgba(73, 217, 255, 0.85));
  box-shadow: 0 0 12px rgba(99, 255, 199, 0.55);
}

::-webkit-scrollbar-corner {
  background: rgba(8, 14, 26, 0.85);
}

* {
  scrollbar-width: auto;
  scrollbar-color: rgba(99, 255, 199, 0.55) rgba(8, 14, 26, 0.85);
}

.country-tooltip {
  position: fixed;
  padding: 8px 12px;
  background: rgba(10, 14, 39, 0.95);
  border: 1px solid #00ffff;
  border-radius: 4px;
  color: #00ffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 10000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.country-tooltip.visible {
  opacity: 1;
}

.browser-privacy-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.badge {
  width: fit-content;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 255, 254, 0.10);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.26px;
}

.badge.green {
  color: #00FFFE;
}

.badge.green::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url('./static/assets/icon/u_check.svg') no-repeat center;
}

.badge.red {
  color: #E94D4D;
  border: 1px solid rgba(233, 77, 77, 0.10);
}

.wrapper {
  position: fixed;
  overflow: hidden;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.info-panel {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  overflow: auto;
  top: 0;
  left: calc(100% - var(--info-panel-reserve));
  transform: translateX(0);
  display: flex;
  justify-content: space-between;
  gap: clamp(16px, 1.25vw, 28px);
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: clamp(18px, 2.4vh, 26px) var(--info-panel-pad-x) clamp(26px, 3.2vh, 40px);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  isolation: isolate;
}

.info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 8, 16, 0) 0%, rgba(4, 8, 16, 0.08) 28%, rgba(6, 12, 20, 0.38) 46%, rgba(6, 12, 20, 0.76) 68%, rgba(6, 12, 20, 0.9) 100%),
    repeating-linear-gradient(0deg, rgba(73, 217, 255, 0.022) 0 1px, transparent 1px 20px);
  pointer-events: none;
  z-index: 0;
}

.info-panel.open {
  transform: translateX(calc(-100% + var(--info-panel-reserve)));
}

.info-panel__left {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  width: var(--info-panel-width);
  min-width: var(--info-panel-width);
}

.info-panel__right {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.info-panel__left,
.info-panel__right {
  position: relative;
  z-index: 1;
  scrollbar-width: auto;
  scrollbar-color: rgba(99, 255, 199, 0.55) rgba(8, 14, 26, 0.85);
}

/* Видимая полоса прокрутки внутри боковой info-панели (WebKit). */
.info-panel__left::-webkit-scrollbar,
.info-panel__right::-webkit-scrollbar,
.info-panel__view::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.info-panel__left::-webkit-scrollbar-track,
.info-panel__right::-webkit-scrollbar-track,
.info-panel__view::-webkit-scrollbar-track {
  background: rgba(8, 14, 26, 0.85);
  border-radius: 4px;
  border: 1px solid rgba(73, 217, 255, 0.08);
}
.info-panel__left::-webkit-scrollbar-thumb,
.info-panel__right::-webkit-scrollbar-thumb,
.info-panel__view::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 255, 199, 0.55), rgba(73, 217, 255, 0.55));
  border-radius: 4px;
  border: 2px solid rgba(8, 14, 26, 0.85);
  box-shadow: 0 0 8px rgba(99, 255, 199, 0.35);
}
.info-panel__left::-webkit-scrollbar-thumb:hover,
.info-panel__right::-webkit-scrollbar-thumb:hover,
.info-panel__view::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 255, 199, 0.85), rgba(73, 217, 255, 0.85));
  box-shadow: 0 0 12px rgba(99, 255, 199, 0.55);
}
.info-panel__view {
  scrollbar-width: auto;
  scrollbar-color: rgba(99, 255, 199, 0.55) rgba(8, 14, 26, 0.85);
}

.info-panel__view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 20px);
  overflow: auto;
  padding-right: 4px;
  opacity: 0;
  transform: translateX(56px);
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

.info-panel__view.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.info-panel__view.is-leaving {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(56px);
  pointer-events: none;
}

.mobile-panel-nav {
  display: none;
}

.panel-module {
  min-height: clamp(560px, calc(100vh - 128px), 860px);
  justify-content: space-between;
}

.panel-module__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-module__eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(73, 217, 255, 0.14);
  border-radius: 999px;
  background: rgba(73, 217, 255, 0.08);
  color: rgba(180, 220, 234, 0.78);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-module__tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 199, 0.18);
  background: linear-gradient(180deg, rgba(99, 255, 199, 0.12) 0%, rgba(73, 217, 255, 0.06) 100%);
  color: #63FFC7;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-module__copy {
  max-width: 52ch;
  margin: 0;
  color: rgba(226, 242, 250, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.panel-module__ghost {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.panel-module__ghost span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(99, 255, 199, 0.06), rgba(73, 217, 255, 0.18), rgba(99, 255, 199, 0.06)),
    rgba(255, 255, 255, 0.02);
  background-size: 220px 100%, 100% 100%;
  animation: panelSweepCard 7.8s linear infinite;
}

.panel-module__ghost span:nth-child(1) { width: 88%; }
.panel-module__ghost span:nth-child(2) { width: 74%; }
.panel-module__ghost span:nth-child(3) { width: 61%; }

/* ─── DPI module (Stage 1 sniffer panel) ───────────────────────────────── */
.dpi-card { display: flex; flex-direction: column; gap: 14px; }

/* === DPI dual-pane (Stage 7 dual-stack DPI) — both v4 and v6 simultaneously === */
.dpi-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dpi-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  min-width: 0;
}
.dpi-pane[data-fam="4"] { border-left: 3px solid #6ad8ff; }
.dpi-pane[data-fam="6"] { border-left: 3px solid #c98aff; }
.dpi-pane__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.dpi-pane__label {
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #889;
}
.dpi-pane[data-fam="4"] .dpi-pane__label { color: #6ad8ff; }
.dpi-pane[data-fam="6"] .dpi-pane__label { color: #c98aff; }
.dpi-pane__ip {
  font-family: 'JetBrainsMono', monospace;
  font-size: 12px;
  color: #cfe;
  word-break: break-all;
}
.dpi-pane__hint {
  font-family: 'JetBrainsMono', monospace;
  font-size: 9px; letter-spacing: 0.05em;
  color: #889;
}
@media (max-width: 900px) {
  .dpi-dual { grid-template-columns: 1fr; }
}

.dpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
  margin-top: 4px;
}
.dpi-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(99, 255, 199, 0.18);
  border-radius: 6px;
  min-width: 0;
}
.dpi-cell--wide { grid-column: 1 / -1; }
.dpi-cell label {
  font: 600 10px/1 "Inter", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(99, 255, 199, 0.62);
}
.dpi-cell span {
  font: 500 13px/1.35 "Inter", sans-serif;
  color: #e6f5ee;
  word-break: break-all;
  white-space: pre-wrap;
}
.dpi-cell .mono, .dpi-cell span.mono {
  font: 500 12px/1.4 "JetBrains Mono", "Consolas", monospace;
  color: #b9e4d3;
}

#dpi-status[data-kind="ok"]   { background: rgba(40,180,120,0.18); color: #7fffc6; border-color: rgba(99,255,199,0.4); }
#dpi-status[data-kind="warn"] { background: rgba(220,80,80,0.18); color: #ff9696; border-color: rgba(255,90,90,0.45); }
#dpi-status[data-kind="idle"] { background: rgba(120,140,170,0.15); color: #9fb6c8; border-color: rgba(140,170,200,0.3); }

/* ─── Cisco Mercury sub-block (lives inside each .dpi-pane, after .dpi-grid) ───
   Visually distinct from the Suricata DPI grid so users see this is a separate
   pipeline. Verdict colour mirrors Suricata verdict semantics. */
.merc-block {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px dashed rgba(201, 138, 255, 0.32);
  border-radius: 8px;
  background: rgba(40, 20, 60, 0.22);
}
.merc-block__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.merc-block__eyebrow {
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c98aff;
  padding: 3px 7px;
  border: 1px solid rgba(201, 138, 255, 0.5);
  border-radius: 999px;
  background: rgba(201, 138, 255, 0.1);
}
.merc-block__verdict {
  font: 700 12px/1 "Inter", sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(140, 160, 190, 0.15);
  color: #b8c8de;
  border: 1px solid rgba(160, 180, 210, 0.3);
}
.merc-block__score {
  margin-left: auto;
  font: 700 16px/1 "JetBrains Mono", "Consolas", monospace;
  color: #e8e0ff;
}
.merc-block[data-verdict="clean"]      .merc-block__verdict { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.merc-block[data-verdict="suspicious"] .merc-block__verdict { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.merc-block[data-verdict="likely-bot"] .merc-block__verdict { background: rgba(255,140,80,0.20); color:#ffb27a; border-color: rgba(255,160,90,0.55); }
.merc-block[data-verdict="bot"]        .merc-block__verdict { background: rgba(220,60,60,0.22);  color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.merc-block[data-verdict="vpn-exit"]   .merc-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.merc-block[data-verdict="tor-exit"]   .merc-block__verdict { background: rgba(150,80,220,0.28); color:#c79bff; border-color: rgba(180,120,255,0.65); }
.merc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.merc-cell {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.merc-cell--wide { grid-column: 1 / -1; }
.merc-cell label {
  font: 600 10px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(201, 138, 255, 0.7);
}
.merc-cell span {
  color: #e6dcf6;
  word-break: break-word;
}
.merc-cell .mono {
  font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace;
  color: #d8c4ff;
}

/* ─── ntop nDPI sub-block (third engine, sits below Mercury). Teal accent
   so the three engines (Suricata green, Mercury purple, nDPI teal) are
   visually distinguishable. */
.ndpi-block {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px dashed rgba(80, 220, 200, 0.32);
  border-radius: 8px;
  background: rgba(10, 40, 50, 0.22);
}
.ndpi-block__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.ndpi-block__eyebrow {
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6fe9d4;
  padding: 3px 7px;
  border: 1px solid rgba(80, 220, 200, 0.5);
  border-radius: 999px;
  background: rgba(80, 220, 200, 0.1);
}
.ndpi-block__verdict {
  font: 700 12px/1 "Inter", sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(140, 160, 190, 0.15);
  color: #b8c8de;
  border: 1px solid rgba(160, 180, 210, 0.3);
}
.ndpi-block__score {
  margin-left: auto;
  font: 700 16px/1 "JetBrains Mono", "Consolas", monospace;
  color: #d8fff5;
}
.ndpi-block[data-verdict="clean"]      .ndpi-block__verdict { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.ndpi-block[data-verdict="suspicious"] .ndpi-block__verdict { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.ndpi-block[data-verdict="bot"]        .ndpi-block__verdict { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.ndpi-block[data-verdict="vpn-tunnel"] .ndpi-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.ndpi-block[data-verdict="vpn-exit"]   .ndpi-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.ndpi-block[data-verdict="tor-exit"]   .ndpi-block__verdict { background: rgba(150,80,220,0.28); color:#c79bff; border-color: rgba(180,120,255,0.65); }
.ndpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.ndpi-cell {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.ndpi-cell--wide { grid-column: 1 / -1; }
.ndpi-cell label {
  font: 600 10px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(80, 220, 200, 0.75);
}
.ndpi-cell span {
  color: #def7f0;
  word-break: break-word;
}
.ndpi-cell .mono {
  font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace;
  color: #c2f0e6;
}

.mlp-block {
  margin-top: 12px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120, 210, 255, 0.34);
  background: linear-gradient(180deg, rgba(40, 90, 130, 0.30), rgba(16, 42, 60, 0.10));
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, 0.05),
              0 0 18px rgba(90, 190, 255, 0.06);
}
.mlp-block__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.mlp-block__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8adfff;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(120, 210, 255, 0.5);
  border-radius: 999px;
  background: rgba(120, 210, 255, 0.10);
}
.mlp-block__verdict {
  font: 700 11px/1 "Inter", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(140, 160, 190, 0.15);
  color: #b8c8de;
  border: 1px solid rgba(160, 180, 210, 0.3);
}
.mlp-block__score {
  margin-left: auto;
  font: 800 18px/1 "JetBrains Mono", "Consolas", monospace;
  color: #dff6ff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(90, 190, 255, 0.30);
}
.mlp-block[data-verdict="clean"]         .mlp-block__verdict { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.mlp-block[data-verdict="watch"]         .mlp-block__verdict { background: rgba(120,200,255,0.18); color:#a5e9ff; border-color: rgba(120,210,255,0.45); }
.mlp-block[data-verdict="suspicious"]    .mlp-block__verdict { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.mlp-block[data-verdict="tunnel-or-bot"] .mlp-block__verdict { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.mlp-block[data-verdict="vpn-tunnel"]    .mlp-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.mlp-block[data-verdict="vpn-exit"]      .mlp-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.mlp-block[data-verdict="tor-exit"]      .mlp-block__verdict { background: rgba(150,80,220,0.28); color:#c79bff; border-color: rgba(180,120,255,0.65); }
.mlp-block[data-verdict="no-data"]       .mlp-block__verdict { background: rgba(140,160,190,0.18); color:#aab8d0; border-color: rgba(160,180,210,0.4); }
.mlp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.mlp-cell {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.mlp-cell--wide { grid-column: 1 / -1; }
.mlp-cell label {
  font: 600 10px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(138, 223, 255, 0.78);
}
.mlp-cell span {
  color: #eaf8ff;
  word-break: break-word;
}
.mlp-cell .mono {
  font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace;
  color: #b9edff;
}

/* ── Stage 13: DNS analytics (passive scapy sniffer) — magenta accent ── */
.dns-block {
  margin-top: 12px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  border: 1px solid rgba(200, 120, 255, 0.35);
  background: linear-gradient(180deg, rgba(80, 30, 110, 0.30), rgba(40, 18, 50, 0.10));
  box-shadow: inset 0 0 0 1px rgba(200, 120, 255, 0.05),
              0 0 18px rgba(180, 90, 240, 0.06);
}
.dns-block__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.dns-block__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #d8a6ff;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(200, 120, 255, 0.5);
  border-radius: 999px;
  background: rgba(200, 120, 255, 0.10);
}
.dns-block__sub {
  font: 500 9px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  text-transform: none;
  color: rgba(220, 180, 255, 0.55);
  border-left: 1px solid rgba(200, 120, 255, 0.35);
  padding-left: 7px; margin-left: 1px;
}
.dns-block__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #d8a6ff;
  box-shadow: 0 0 6px rgba(216, 166, 255, 0.8);
  animation: dnsPulse 2.4s ease-in-out infinite;
}
@keyframes dnsPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1.0;  transform: scale(1.15); }
}
.dns-block__verdict {
  font: 700 11px/1 "Inter", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(140, 160, 190, 0.15);
  color: #b8c8de;
  border: 1px solid rgba(160, 180, 210, 0.3);
}
.dns-block__score {
  margin-left: auto;
  font: 800 18px/1 "JetBrains Mono", "Consolas", monospace;
  color: #f3e0ff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(216, 166, 255, 0.35);
}
.dns-block[data-verdict="clean"]           .dns-block__verdict { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.dns-block[data-verdict="no-data"]         .dns-block__verdict { background: rgba(140,160,190,0.18); color:#aab8d0; border-color: rgba(160,180,210,0.4); }
.dns-block[data-verdict="suspicious"]      .dns-block__verdict { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.dns-block[data-verdict="tunnel-or-abuse"] .dns-block__verdict { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.dns-block[data-verdict="vpn-exit"]        .dns-block__verdict { background: rgba(180,80,220,0.22); color:#dda6ff; border-color: rgba(200,120,255,0.55); }
.dns-block[data-verdict="tor-exit"]        .dns-block__verdict { background: rgba(150,80,220,0.28); color:#c79bff; border-color: rgba(180,120,255,0.65); }

/* Empty / loading state — replaces the 13 dashes */
.dns-block__empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  padding: 18px 14px 16px;
  border-radius: 8px;
  background: rgba(60, 30, 90, 0.18);
  border: 1px dashed rgba(200, 120, 255, 0.28);
}
.dns-empty__icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 166, 255, 0.28), rgba(216, 166, 255, 0.04));
  color: #f3e0ff;
  box-shadow: inset 0 0 0 1px rgba(216, 166, 255, 0.35);
}
.dns-empty__title {
  font: 600 13px/1.3 "Inter", sans-serif;
  color: #f3e0ff;
  letter-spacing: 0.2px;
}
.dns-empty__msg {
  font: 400 11.5px/1.5 "Inter", sans-serif;
  color: rgba(230, 210, 255, 0.7);
  max-width: 480px;
}
.dns-empty__msg .mono {
  font: 500 11px/1 "JetBrains Mono", "Consolas", monospace;
  color: #e6c7ff;
  background: rgba(200, 120, 255, 0.12);
  border: 1px solid rgba(200, 120, 255, 0.28);
  border-radius: 4px;
  padding: 1px 5px;
}
.dns-empty__cta { margin-top: 4px; }
.dns-empty__btn {
  appearance: none; cursor: pointer;
  font: 600 11.5px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 6px;
  color: #f3e0ff;
  background: linear-gradient(180deg, rgba(200, 120, 255, 0.30), rgba(150, 80, 220, 0.18));
  border: 1px solid rgba(216, 166, 255, 0.55);
  box-shadow: 0 0 12px rgba(180, 90, 240, 0.18);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.dns-empty__btn:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(180, 90, 240, 0.32); }
.dns-empty__btn:disabled { opacity: 0.55; cursor: progress; }

/* When state=data, hide empty placeholder; when loading/empty/offline/sealed, hide grid */
.dns-block[data-state="data"]    .dns-block__empty { display: none; }
.dns-block[data-state="loading"] .dns-grid,
.dns-block[data-state="empty"]   .dns-grid,
.dns-block[data-state="sealed"]  .dns-grid,
.dns-block[data-state="offline"] .dns-grid { display: none; }

/* Sealed-DoH = positive privacy signal — recolour the placeholder green */
.dns-block[data-state="sealed"] {
  background: linear-gradient(180deg, rgba(60, 160, 110, 0.28), rgba(20, 80, 60, 0.10));
  border-color: rgba(120, 230, 170, 0.45);
  box-shadow: 0 0 18px rgba(80, 220, 140, 0.18);
}
.dns-block[data-state="sealed"] .dns-block__dot { background: #62e6a0; box-shadow: 0 0 10px rgba(98, 230, 160, 0.85); }
.dns-block[data-state="sealed"] .dns-block__empty { border-color: rgba(120, 230, 170, 0.55); }
.dns-block[data-state="sealed"] .dns-empty__icon {
  background: radial-gradient(circle at 35% 30%, #b9ffd6, #62e6a0 60%, #138a55 100%);
  color: #06281a;
}
.dns-block[data-state="sealed"] .dns-empty__title { color: #b9ffd6; }
.dns-block[data-state="sealed"] .dns-empty__btn {
  background: linear-gradient(180deg, rgba(80, 200, 140, 0.30), rgba(40, 140, 90, 0.18));
  border-color: rgba(120, 230, 170, 0.55);
  box-shadow: 0 0 12px rgba(80, 220, 140, 0.20);
}
.dns-block[data-state="sealed"] .dns-empty__btn:hover { box-shadow: 0 0 18px rgba(80, 220, 140, 0.34); }

.dns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.dns-cell {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(60, 30, 90, 0.16);
  border: 1px solid rgba(200, 120, 255, 0.10);
}
.dns-cell--wide { grid-column: 1 / -1; }
.dns-cell label {
  font: 600 9.5px/1 "Inter", sans-serif;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(216, 166, 255, 0.75);
}
.dns-cell span {
  color: #f3e6ff;
  word-break: break-word;
}
.dns-cell .mono {
  font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace;
  color: #e6c7ff;
}

/* ── Stage 10: Reverse recon (port-scan) — amber accent ─────────────── */
.recon-block {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,170,80,0.35);
  background: linear-gradient(180deg, rgba(255,170,80,0.10), rgba(255,170,80,0.03));
}
.recon-block__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.recon-block__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font: 600 10px/1.2 "Inter", sans-serif; color: #ffb27a; flex: 1;
}
.recon-block__pill {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255,170,80,0.5);
  background: rgba(255,170,80,0.18); color: #ffd6a8;
  font: 600 11px/1 "Inter", sans-serif; text-transform: uppercase;
}
.recon-block__score {
  font: 700 18px/1 "Inter", sans-serif; color: #ffd6a8;
  min-width: 28px; text-align: right;
}
.recon-block[data-state="vpn"]   .recon-block__pill { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.recon-block[data-state="susp"]  .recon-block__pill { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.recon-block[data-state="clean"] .recon-block__pill { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.recon-block[data-state="err"]   .recon-block__pill { background: rgba(120,120,120,0.18); color:#bbb; }
.recon-block__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 12px;
}
.recon-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recon-cell--wide { grid-column: 1 / -1; }
.recon-cell label {
  font: 600 10px/1.2 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,200,150,0.7);
}
.recon-cell span { font: 400 12px/1.4 "Inter", sans-serif; color: #ffe6cf; word-break: break-word; }
.recon-cell .mono { font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace; color: #ffd5b0; }
.recon-block__foot { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.recon-block__foot button {
  padding: 5px 12px; border-radius: 6px;
  background: rgba(255,170,80,0.18); color: #ffd6a8;
  border: 1px solid rgba(255,170,80,0.5);
  font: 600 11px/1 "Inter", sans-serif; cursor: pointer;
}
.recon-block__foot button:hover { background: rgba(255,170,80,0.32); }
.recon-block__foot a { color: #ffb27a; text-decoration: none; font: 500 11px/1 "Inter", sans-serif; }
.recon-block__foot a:hover { text-decoration: underline; }

/* ── Stage 10: Channel asymmetry tile (in fingerprints panel) ─────────── */
.chan-asym {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,200,255,0.30);
  background: linear-gradient(180deg, rgba(120,200,255,0.08), rgba(120,200,255,0.02));
}
.chan-asym__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.chan-asym__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font: 600 10px/1.2 "Inter", sans-serif; color: #8ed1ff; flex: 1;
}
.chan-asym__pill {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(120,200,255,0.5);
  background: rgba(120,200,255,0.18); color: #cfe8ff;
  font: 600 11px/1 "Inter", sans-serif; text-transform: uppercase;
}
.chan-asym__score { font: 700 18px/1 "Inter", sans-serif; color: #cfe8ff; min-width: 28px; text-align: right; }
.chan-asym[data-state="bad"]  .chan-asym__pill { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.chan-asym[data-state="susp"] .chan-asym__pill { background: rgba(255,200,80,0.18); color:#ffd76a; border-color: rgba(255,200,80,0.5); }
.chan-asym[data-state="ok"]   .chan-asym__pill { background: rgba(40,180,120,0.18); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.chan-asym__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; }
.chan-asym__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chan-asym__cell--wide { grid-column: 1 / -1; }
.chan-asym__cell label {
  font: 600 10px/1.2 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgba(180,210,240,0.7);
}
.chan-asym__cell span { font: 400 12px/1.4 "Inter", sans-serif; color: #e0eefc; word-break: break-word; }
.chan-asym__cell .mono { font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace; color: #b8d4ec; }

/* Stage 11: quic-test (CloudBridge) live metric chips embedded in QUIC FP cell */
.qt-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 100, 0.45);
  background: rgba(255, 180, 60, 0.12);
  color: #ffd58a;
  font: 600 10px/1.4 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Stage 11: WebRTC active deanonymizer block (active-deanon panel) */
.webrtc-deanon {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(190, 130, 255, 0.32);
  background: linear-gradient(180deg, rgba(190,130,255,0.08), rgba(190,130,255,0.02));
}
.webrtc-deanon__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.webrtc-deanon__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font: 600 10px/1.2 "Inter", sans-serif; color: #d3a8ff; flex: 1;
}
.webrtc-deanon__pill {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(190,130,255,0.5);
  background: rgba(190,130,255,0.18); color: #ead2ff;
  font: 600 11px/1 "Inter", sans-serif; text-transform: uppercase;
}
.webrtc-deanon__score { font: 700 18px/1 "Inter", sans-serif; color: #ead2ff; min-width: 28px; text-align: right; }
.webrtc-deanon[data-state="bad"]  .webrtc-deanon__pill { background: rgba(220,60,60,0.22); color:#ff8e8e; border-color: rgba(255,90,90,0.55); }
.webrtc-deanon[data-state="susp"] .webrtc-deanon__pill { background: rgba(255,200,80,0.20); color:#ffd76a; border-color: rgba(255,200,80,0.55); }
.webrtc-deanon[data-state="ok"]   .webrtc-deanon__pill { background: rgba(40,180,120,0.20); color:#7fffc6; border-color: rgba(99,255,199,0.45); }
.webrtc-deanon[data-state="busy"] .webrtc-deanon__pill { background: rgba(120,160,255,0.20); color:#a8c4ff; border-color: rgba(120,160,255,0.45); }
.webrtc-deanon[data-state="err"]  .webrtc-deanon__pill { background: rgba(255,90,90,0.22); color:#ffacac; border-color: rgba(255,90,90,0.55); }
.webrtc-deanon__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
.wrtc-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wrtc-cell--wide { grid-column: 1 / -1; }
.wrtc-cell label {
  font: 600 10px/1.2 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgba(220,200,240,0.7);
}
.wrtc-cell span {
  font: 400 12px/1.4 "Inter", sans-serif; color: #f0e6ff; word-break: break-word;
}
.wrtc-cell .mono {
  font: 400 11px/1.4 "JetBrains Mono", "Consolas", monospace; color: #d6c1ff;
}
.wrtc-cell span[data-state="bad"] { color: #ff8e8e; }
.wrtc-cell span[data-state="ok"]  { color: #7fffc6; }
.webrtc-deanon__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
.webrtc-deanon__foot button {
  background: rgba(190,130,255,0.14);
  border: 1px solid rgba(190,130,255,0.5);
  color: #ead2ff;
  padding: 6px 14px;
  border-radius: 4px;
  font: 600 11px/1 "Inter", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.webrtc-deanon__foot button:hover { background: rgba(190,130,255,0.22); }
.wrtc-meta { font: 400 11px/1.3 "JetBrains Mono", "Consolas", monospace; color: rgba(220,200,240,0.7); }

.dpi-raw {
  margin-top: 6px;
  border: 1px solid rgba(99,255,199,0.14);
  border-radius: 6px;
  background: rgba(4, 8, 16, 0.6);
}
.dpi-raw summary {
  cursor: pointer;
  padding: 8px 12px;
  font: 600 12px/1 "Inter", sans-serif;
  color: rgba(99, 255, 199, 0.82);
  letter-spacing: 0.6px;
  user-select: none;
}
.dpi-raw summary:hover { color: #7fffc6; }
.dpi-raw pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 320px;
  overflow: auto;
  font: 400 11px/1.45 "JetBrains Mono", "Consolas", monospace;
  color: #c0d8cc;
  white-space: pre-wrap;
  word-break: break-all;
  border-top: 1px solid rgba(99,255,199,0.12);
}

.dpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 4px;
}
.dpi-foot button {
  background: rgba(99, 255, 199, 0.12);
  border: 1px solid rgba(99, 255, 199, 0.45);
  color: #b6f5dc;
  padding: 6px 14px;
  border-radius: 4px;
  font: 600 11px/1 "Inter", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dpi-foot button:hover {
  background: rgba(99, 255, 199, 0.22);
  color: #e6f5ee;
  box-shadow: 0 0 10px rgba(99, 255, 199, 0.35);
}
.dpi-meta {
  font: 500 11px/1.3 "Inter", sans-serif;
  color: rgba(160, 200, 184, 0.7);
  text-align: right;
}

/* ─── Stage 2 · Verdict & signals ──────────────────────────────────────── */
.dpi-verdict {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(8,14,26,0.85), rgba(8,14,26,0.55));
  border: 1px solid rgba(99,255,199,0.2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.dpi-verdict::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0.6;
  background: radial-gradient(circle at 0% 0%, var(--vc, rgba(127,255,198,0.25)), transparent 55%);
}
.dpi-verdict__score {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid var(--vc, rgba(127,255,198,0.6));
  background: rgba(4,8,16,0.7);
  color: var(--vc, #7fffc6);
  font: 700 32px/1 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: -1px;
  box-shadow: 0 0 18px var(--vc, rgba(127,255,198,0.35)) inset,
              0 0 12px var(--vc, rgba(127,255,198,0.18));
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.dpi-verdict__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.dpi-verdict__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.dpi-verdict__label {
  font: 700 14px/1.2 "Inter", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--vc, #b6f5dc);
}
.dpi-verdict__conf {
  font: 600 11px/1 "JetBrains Mono", "Consolas", monospace;
  color: rgba(180, 220, 200, 0.7);
  letter-spacing: 0.6px;
}
.dpi-verdict__bar {
  height: 6px; border-radius: 3px;
  background: rgba(99,255,199,0.08);
  overflow: hidden;
}
.dpi-verdict__bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(127,255,198,0.85), var(--vc, rgba(127,255,198,0.85)));
  box-shadow: 0 0 10px var(--vc, rgba(127,255,198,0.45));
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1), background 0.25s ease;
  border-radius: inherit;
}
.dpi-verdict__reasons {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.dpi-verdict__reason {
  position: relative;
  padding: 2px 0 2px 14px;
  font: 500 12px/1.4 "Inter", sans-serif;
  color: #d3ebde;
}
.dpi-verdict__reason::before {
  content: "▸";
  position: absolute; left: 0; top: 2px;
  color: var(--vc, rgba(127,255,198,0.7));
  font-size: 11px;
}
.dpi-verdict__reason--idle { color: rgba(160,200,184,0.6); font-style: italic; }
.dpi-verdict__reason--ok   { color: rgba(127,255,198,0.85); }
.dpi-verdict__reason--ok::before { color: rgba(127,255,198,0.85); }

/* Verdict-driven hue tinting */
.dpi-verdict[data-verdict="clean"]      { --vc: #7fffc6; }
.dpi-verdict[data-verdict="suspicious"] { --vc: #ffd86b; }
.dpi-verdict[data-verdict="likely-bot"] { --vc: #ff9a4d; }
.dpi-verdict[data-verdict="bot"]        { --vc: #ff6b6b; }
.dpi-verdict[data-verdict="unknown"]    { --vc: #9fb6c8; }

.dpi-signals {
  border: 1px solid rgba(99,255,199,0.14);
  border-radius: 6px;
  background: rgba(4,8,16,0.55);
}
.dpi-signals summary {
  cursor: pointer;
  padding: 8px 12px;
  font: 600 12px/1 "Inter", sans-serif;
  color: rgba(99,255,199,0.82);
  letter-spacing: 0.6px;
  user-select: none;
}
.dpi-signals summary:hover { color: #7fffc6; }
.dpi-signals__list {
  list-style: none; margin: 0;
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(99,255,199,0.12);
  display: flex; flex-direction: column; gap: 4px;
}
.dpi-signal {
  display: grid;
  grid-template-columns: 180px 48px 1fr;
  align-items: baseline; gap: 10px;
  padding: 4px 6px;
  border-radius: 4px;
  font: 500 11.5px/1.4 "Inter", sans-serif;
}
.dpi-signal.is-hit  { background: rgba(255,154,77,0.07); color: #f0e1d4; }
.dpi-signal.is-miss { color: rgba(180,200,190,0.45); }
.dpi-signal__name {
  font: 600 11px/1.3 "JetBrains Mono", "Consolas", monospace;
  color: inherit; letter-spacing: 0.3px;
}
.dpi-signal__weight {
  font: 700 11px/1 "JetBrains Mono", "Consolas", monospace;
  color: rgba(255,180,120,0.85);
  text-align: right;
}
.dpi-signal.is-miss .dpi-signal__weight { color: rgba(140,160,150,0.4); }
.dpi-signal__detail { color: inherit; opacity: 0.85; word-break: break-word; }


/* ── Stage 3 · Active deanonymization panel ────────────────────────────── */
.deanon-card { display: flex; flex-direction: column; gap: 14px; }
.deanon-verdict {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(127,255,198,0.12);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(127,255,198,0.04), rgba(40,80,90,0.06));
  position: relative;
  overflow: hidden;
}
.deanon-verdict::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 100% at 0% 0%, var(--vc, #9fb6c8) 0%, transparent 60%);
  opacity: 0.06; pointer-events: none;
}
.deanon-verdict__score {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 30px/1 "JetBrains Mono", "Consolas", monospace;
  color: var(--vc, #9fb6c8);
  border: 2px solid var(--vc, #9fb6c8);
  background: rgba(0,0,0,0.35);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.4), 0 0 18px rgba(127,255,198,0.08);
  z-index: 1;
}
.deanon-verdict__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; z-index: 1; }
.deanon-verdict__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.deanon-verdict__label {
  font: 600 13px/1.3 "Inter", sans-serif;
  color: var(--vc, #9fb6c8); letter-spacing: 0.4px; text-transform: uppercase;
}
.deanon-verdict__age {
  font: 500 11px/1 "JetBrains Mono", "Consolas", monospace;
  color: rgba(180,200,190,0.55);
}
.deanon-verdict__reasons {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.deanon-verdict__reason {
  font: 500 11.5px/1.45 "Inter", sans-serif;
  color: rgba(220,235,228,0.85);
  padding-left: 14px; position: relative;
}
.deanon-verdict__reason::before {
  content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--vc, #9fb6c8); opacity: 0.7;
}
.deanon-verdict__reason--idle { color: rgba(180,200,190,0.5); font-style: italic; }
.deanon-verdict[data-verdict="clean"]      { --vc: #7fffc6; }
.deanon-verdict[data-verdict="suspicious"] { --vc: #ffd86b; }
.deanon-verdict[data-verdict="likely-bot"] { --vc: #ff9a4d; }
.deanon-verdict[data-verdict="bot"]        { --vc: #ff6b6b; }
.deanon-verdict[data-verdict="unknown"]    { --vc: #9fb6c8; }

.deanon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.deanon-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deanon-cell--wide { grid-column: 1 / -1; }
.deanon-cell label {
  font: 500 10.5px/1 "Inter", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(180,200,190,0.55);
}
.deanon-cell span {
  font: 500 12.5px/1.4 "Inter", sans-serif;
  color: rgba(220,235,228,0.92);
  word-break: break-word;
}
.deanon-cell span.mono {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11.5px;
}
.deanon-cell span[data-state="ok"]  { color: #7fffc6; }
.deanon-cell span[data-state="bad"] { color: #ff9a4d; }

.deanon-signals { margin-top: 2px; border-top: 1px dashed rgba(127,255,198,0.1); padding-top: 8px; }
.deanon-signals summary {
  cursor: pointer; user-select: none;
  font: 600 11.5px/1.3 "Inter", sans-serif;
  color: rgba(180,200,190,0.7);
  list-style: none; padding: 4px 0;
}
.deanon-signals summary::-webkit-details-marker { display: none; }
.deanon-signals summary:hover { color: #7fffc6; }
.deanon-signals__list {
  list-style: none; padding: 6px 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.deanon-signal {
  display: grid; grid-template-columns: 200px 56px 1fr;
  align-items: baseline; gap: 10px;
  padding: 4px 6px; border-radius: 4px;
  font: 500 11.5px/1.4 "Inter", sans-serif;
}
.deanon-signal.is-hit  { background: rgba(255,154,77,0.07); color: #f0e1d4; }
.deanon-signal.is-miss { color: rgba(180,200,190,0.45); }
.deanon-signal__name {
  font: 600 11px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 0.3px;
}
.deanon-signal__weight {
  font: 700 11px/1 "JetBrains Mono", "Consolas", monospace;
  color: rgba(255,180,120,0.85); text-align: right;
}
.deanon-signal.is-miss .deanon-signal__weight { color: rgba(140,160,150,0.4); }
.deanon-signal__detail { opacity: 0.85; word-break: break-word; }

.deanon-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px; border-top: 1px dashed rgba(127,255,198,0.08);
}
.deanon-foot button {
  background: rgba(127,255,198,0.08);
  color: #7fffc6;
  border: 1px solid rgba(127,255,198,0.25);
  padding: 5px 14px; border-radius: 4px;
  font: 600 11px/1 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; transition: background 120ms;
}
.deanon-foot button:hover { background: rgba(127,255,198,0.16); }
.deanon-meta {
  font: 500 11px/1.3 "JetBrains Mono", "Consolas", monospace;
  color: rgba(180,200,190,0.55); flex: 1; text-align: right;
}

/* ── Stage 4: Verdict history & analytics ─────────────────────────── */
.history-card {
  display: flex; flex-direction: column; gap: 12px;
}
.history-card .panel-module__tag[data-kind="ok"] { color: #7fffc6; border-color: rgba(127,255,198,0.35); }
.history-card .panel-module__tag[data-kind="busy"] { color: #6cd8ff; border-color: rgba(108,216,255,0.35); }
.history-card .panel-module__tag[data-kind="err"] { color: #ff9a9a; border-color: rgba(255,154,154,0.35); }

.history-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.history-stat {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(127,255,198,0.10);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.history-stat label {
  font: 500 9px/1.1 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(180,200,190,0.55);
}
.history-stat span {
  font: 600 14px/1.1 "JetBrains Mono", "Consolas", monospace;
  color: #d4f4e8;
}

.history-buckets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  height: 80px;
  padding: 6px 4px 0;
  border-bottom: 1px dashed rgba(127,255,198,0.08);
}
.history-bucket {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%; justify-content: flex-end;
}
.history-bucket__bar {
  width: 70%;
  height: var(--h, 0%);
  min-height: 2px;
  background: linear-gradient(180deg, var(--bc) 0%, color-mix(in srgb, var(--bc) 35%, transparent) 100%);
  border-radius: 2px 2px 0 0;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.history-bucket label {
  font: 500 9px/1.1 "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: rgba(180,200,190,0.6);
}
.history-bucket b {
  font: 600 11px/1.1 "JetBrains Mono", monospace;
  color: var(--bc);
}
.history-bucket[data-verdict="clean"]      { --bc: #7fffc6; }
.history-bucket[data-verdict="suspicious"] { --bc: #ffd86b; }
.history-bucket[data-verdict="likely-bot"] { --bc: #ff9a4d; }
.history-bucket[data-verdict="bot"]        { --bc: #ff6b6b; }
.history-bucket[data-verdict="unknown"]    { --bc: #9fb6c8; }

.history-spark {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  align-items: end;
  height: 40px;
  padding: 4px 2px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(127,255,198,0.08);
  border-radius: 4px;
}
.history-spark__bar {
  height: var(--h, 0%);
  min-height: 2px;
  background: var(--bc, #7fffc6);
  border-radius: 1px;
  opacity: 0.85;
}
.history-spark__bar[data-verdict="clean"]      { --bc: #7fffc6; }
.history-spark__bar[data-verdict="suspicious"] { --bc: #ffd86b; }
.history-spark__bar[data-verdict="likely-bot"] { --bc: #ff9a4d; }
.history-spark__bar[data-verdict="bot"]        { --bc: #ff6b6b; }

.history-controls {
  display: flex; align-items: center; gap: 12px;
}
.history-tabs {
  display: flex; gap: 4px; flex: 1;
}
.history-tab {
  background: transparent;
  color: rgba(180,200,190,0.6);
  border: 1px solid rgba(127,255,198,0.15);
  padding: 4px 10px; border-radius: 3px;
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; transition: all 120ms;
}
.history-tab:hover { color: #7fffc6; border-color: rgba(127,255,198,0.35); }
.history-tab.is-active {
  color: #7fffc6;
  background: rgba(127,255,198,0.10);
  border-color: rgba(127,255,198,0.45);
}
#history-refresh {
  background: rgba(127,255,198,0.08);
  color: #7fffc6;
  border: 1px solid rgba(127,255,198,0.25);
  padding: 5px 14px; border-radius: 4px;
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; transition: background 120ms;
}
#history-refresh:hover { background: rgba(127,255,198,0.16); }

.history-list-wrap > summary {
  font: 600 11px/1.2 "JetBrains Mono", monospace;
  color: #6cd8ff; letter-spacing: 0.5px;
  cursor: pointer; padding: 4px 0;
  border-bottom: 1px dashed rgba(108,216,255,0.15);
}
.history-list {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px;
  max-height: 320px; overflow-y: auto;
  padding-right: 4px;
}
.history-empty {
  font: 500 11px/1.4 "JetBrains Mono", monospace;
  color: rgba(180,200,190,0.5); padding: 16px 8px; text-align: center;
}
.history-row {
  display: grid;
  grid-template-columns: 38px 56px minmax(120px, 1.2fr) 70px 50px minmax(0, 2fr);
  gap: 6px; align-items: center;
  padding: 4px 6px;
  background: rgba(0,0,0,0.16);
  border-left: 2px solid var(--bc, #7fffc6);
  border-radius: 0 3px 3px 0;
  font: 500 11px/1.2 "JetBrains Mono", monospace;
}
.history-row[data-verdict="clean"]      { --bc: #7fffc6; }
.history-row[data-verdict="suspicious"] { --bc: #ffd86b; }
.history-row[data-verdict="likely-bot"] { --bc: #ff9a4d; }
.history-row[data-verdict="bot"]        { --bc: #ff6b6b; }
.history-row[data-verdict="unknown"]    { --bc: #9fb6c8; }
.history-row.is-mine {
  background: rgba(127,255,198,0.08);
  outline: 1px solid rgba(127,255,198,0.25);
}
.history-row__score {
  text-align: center;
  font-weight: 700;
  color: var(--bc, #d4f4e8);
}
.history-row__verdict {
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 10px; color: var(--bc, #d4f4e8);
}
.history-row__ip {
  color: #d4f4e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-row__age { color: rgba(180,200,190,0.55); font-size: 10px; }
.history-row__flags { display: flex; gap: 3px; }
.history-flag {
  display: inline-block; padding: 1px 4px;
  background: rgba(108,216,255,0.15);
  color: #6cd8ff;
  border-radius: 2px;
  font: 600 9px/1.2 "JetBrains Mono", monospace;
}
.history-row__reasons {
  color: rgba(180,200,190,0.7); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.history-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px;
  border-top: 1px dashed rgba(127,255,198,0.08);
}
.history-meta {
  font: 500 11px/1.3 "JetBrains Mono", monospace;
  color: rgba(180,200,190,0.55); flex: 1; text-align: right;
}

/* ── Stage-5 · Mitigation ──────────────────────────────────────────── */
.mitigation {
  --action-color: #7fffc6;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(127,255,198,0.04), rgba(0,0,0,0.18));
  border: 1px solid rgba(127,255,198,0.18);
  border-left: 3px solid var(--action-color);
  border-radius: 8px;
}
.mitigation[data-action="allow"]     { --action-color: #7fffc6; }
.mitigation[data-action="flag"]      { --action-color: #ffd86b; }
.mitigation[data-action="challenge"] { --action-color: #ff9a4d; }
.mitigation[data-action="block"]     { --action-color: #ff6b6b; }
.mitigation__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mitigation__eyebrow {
  font: 700 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(127,255,198,0.7);
}
.mitigation__pill {
  font: 700 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #061010;
  background: var(--action-color);
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(127,255,198,0.18);
}
.mitigation__pill[data-action="block"]     { color: #fff5f5; background: #ff6b6b; }
.mitigation__pill[data-action="challenge"] { color: #1a0d00; background: #ff9a4d; }
.mitigation__pill[data-action="flag"]      { color: #1a1500; background: #ffd86b; }
.mitigation__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mitigation__cell {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,0.25);
  padding: 6px 8px; border-radius: 5px;
  border: 1px solid rgba(127,255,198,0.06);
}
.mitigation__cell label {
  font: 600 8px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(180,200,190,0.55);
}
.mitigation__cell span {
  font: 600 12px/1.2 "JetBrains Mono", monospace;
  color: #e6f5ee;
  word-break: break-all;
}
.mitigation__controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mitigation__btn {
  font: 700 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  background: rgba(127,255,198,0.12);
  color: #d6fff0;
  border: 1px solid rgba(127,255,198,0.35);
  padding: 7px 12px; border-radius: 6px;
  cursor: pointer; transition: background 0.15s, transform 0.05s;
}
.mitigation__btn:hover { background: rgba(127,255,198,0.22); }
.mitigation__btn:active { transform: translateY(1px); }
.mitigation__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mitigation__btn--ghost {
  background: transparent;
  border-color: rgba(127,255,198,0.18);
  color: rgba(180,200,190,0.85);
}
.mitigation__status {
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  margin-left: auto;
  background: rgba(255,255,255,0.04);
  color: rgba(180,200,190,0.75);
}
.mitigation__status[data-kind="ok"]   { color: #7fffc6; background: rgba(127,255,198,0.12); }
.mitigation__status[data-kind="busy"] { color: #6ad8ff; background: rgba(106,216,255,0.12); }
.mitigation__status[data-kind="err"]  { color: #ff8e8e; background: rgba(255,107,107,0.14); }
.mitigation__progress {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(127,255,198,0.08);
}
.mitigation__bar {
  height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, #6ad8ff 0%, var(--action-color) 100%);
  transition: width 0.18s linear;
}
.mitigation__result {
  font: 500 11px/1.4 "JetBrains Mono", monospace;
  color: rgba(214,255,240,0.85); min-height: 14px;
}
.mitigation__result code {
  background: rgba(0,0,0,0.45);
  padding: 1px 4px; border-radius: 3px;
  color: #7fffc6;
}
.mitigation .mit-token { margin-top: 2px; color: rgba(180,200,190,0.7); }

/* ── Stage-6 · SSE live indicator + fresh-row flash ────────────────── */
.sse-live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(180,200,190,0.18);
  color: rgba(180,200,190,0.7);
  margin-left: auto;
}
.sse-live__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(180,200,190,0.6);
  box-shadow: 0 0 0 0 rgba(180,200,190,0);
}
.sse-live[data-state="connecting"] { color: #6ad8ff; border-color: rgba(106,216,255,0.4); }
.sse-live[data-state="connecting"] .sse-live__dot { background: #6ad8ff; animation: sse-pulse 1.1s ease-in-out infinite; }
.sse-live[data-state="on"] { color: #7fffc6; border-color: rgba(127,255,198,0.4); background: rgba(127,255,198,0.08); }
.sse-live[data-state="on"] .sse-live__dot { background: #7fffc6; animation: sse-pulse 1.6s ease-in-out infinite; }
.sse-live[data-state="off"] { color: #ff8e8e; border-color: rgba(255,107,107,0.4); }
.sse-live[data-state="off"] .sse-live__dot { background: #ff6b6b; }
@keyframes sse-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  60%  { box-shadow: 0 0 0 6px rgba(127,255,198,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,255,198,0); }
}
.history-row.is-fresh {
  animation: row-fresh 1.4s ease-out;
}
@keyframes row-fresh {
  0%   { background: rgba(127,255,198,0.20); transform: translateX(-3px); }
  60%  { background: rgba(127,255,198,0.08); transform: translateX(0); }
  100% { background: transparent; }
}
.panel-module__tag.is-pulse {
  animation: tag-pulse 0.6s ease-out;
}
@keyframes tag-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,255,198,0.6); }
  100% { box-shadow: 0 0 0 8px rgba(127,255,198,0); }
}

/* === Stage 7: Dual-stack v4 ↔ v6 === */
.dualstack {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(127,255,198,0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(127,255,198,0.04), rgba(127,255,198,0.01));
}
.dualstack__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.dualstack__eyebrow {
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7fffc6; opacity: 0.85;
}
.dualstack__pill {
  margin-left: auto;
  padding: 3px 9px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px; letter-spacing: 0.05em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: #cfe;
}
.dualstack__pill[data-state="idle"]    { color: #888; border-color: rgba(255,255,255,0.18); }
.dualstack__pill[data-state="working"] { color: #6ad8ff; border-color: rgba(106,216,255,0.4); animation: sse-pulse 1.1s ease-in-out infinite; }
.dualstack__pill[data-state="on"]      { color: #7fffc6; border-color: rgba(127,255,198,0.5); background: rgba(127,255,198,0.08); }
.dualstack__pill[data-state="warn"]    { color: #ffd76a; border-color: rgba(255,215,106,0.45); background: rgba(255,215,106,0.07); }
.dualstack__pill[data-state="off"]     { color: #ff8e8e; border-color: rgba(255,107,107,0.4); }
#dualstack-refresh {
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px; padding: 3px 8px;
  background: transparent;
  color: #cfe;
  border: 1px solid rgba(127,255,198,0.3);
  border-radius: 4px;
  cursor: pointer;
}
#dualstack-refresh:hover { background: rgba(127,255,198,0.08); }

.dualstack__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dualstack__col {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 9px 11px;
  background: rgba(0,0,0,0.18);
}
.dualstack__col[data-fam="4"] { border-left: 3px solid #6ad8ff; }
.dualstack__col[data-fam="6"] { border-left: 3px solid #c98aff; }
.dualstack__col-head {
  font-family: 'JetBrainsMono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  color: #cfe;
}
.dualstack__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 11px;
  margin: 3px 0;
  align-items: baseline;
}
.dualstack__row label {
  color: #889;
  font-family: 'JetBrainsMono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dualstack__row .mono,
.dualstack__row span.mono { font-family: 'JetBrainsMono', monospace; }

.ds-flag {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 3px 2px 0;
  border-radius: 3px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.ds-flag.is-good    { background: rgba(127,255,198,0.12); color: #7fffc6; }
.ds-flag.is-warn    { background: rgba(255,215,106,0.12); color: #ffd76a; }
.ds-flag.is-bad     { background: rgba(255,107,107,0.14); color: #ff8e8e; }
.ds-flag.is-missing { background: rgba(255,255,255,0.06); color: #889; font-style: italic; }

.dualstack__diff {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  font-size: 11px;
}
.dualstack__diff-label {
  font-family: 'JetBrainsMono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  color: #889;
  margin-right: 8px;
}
.dualstack__diff-score {
  font-family: 'JetBrainsMono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #cfe;
  margin-right: 12px;
}
.dualstack__diff-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dualstack__diff-action[data-action="allow"]     { background: rgba(127,255,198,0.12); color: #7fffc6; }
.dualstack__diff-action[data-action="flag"]      { background: rgba(255,215,106,0.14); color: #ffd76a; }
.dualstack__diff-action[data-action="challenge"] { background: rgba(255,165,80,0.16);  color: #ffb070; }
.dualstack__diff-action[data-action="block"]     { background: rgba(255,107,107,0.16); color: #ff8e8e; }
.dualstack__reasons {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-family: 'JetBrainsMono', monospace;
  font-size: 10px;
  color: #cfe;
}
.dualstack__reasons li {
  padding: 2px 0 2px 10px;
  position: relative;
}
.dualstack__reasons li::before {
  content: '▸'; position: absolute; left: 0; color: #ff8e8e;
}
.dualstack__reasons li.ds-clean { color: #7fffc6; }
.dualstack__reasons li.ds-clean::before { content: '✓'; color: #7fffc6; }

@media (max-width: 640px) {
  .dualstack__grid { grid-template-columns: 1fr; }
}


.btn-panel {
  position: fixed;
  z-index: 120;
  top: 50%;
  left: calc(100% - var(--info-panel-reserve) - var(--info-toggle-width) + var(--info-toggle-overlap));
  right: auto;
  bottom: auto;
  width: var(--info-toggle-width);
  transform: translateY(-50%);
  transition: left 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-panel button {
  width: 100%;
  position: relative;
  min-height: 146px;
  padding: 0;
  border: 1px solid rgba(99, 255, 199, 0.16);
  border-top-color: rgba(99, 255, 199, 0.72);
  border-radius: 16px 0 0 16px;
  background:
    linear-gradient(180deg, rgba(8, 14, 26, 0.96) 0%, rgba(6, 10, 18, 0.9) 100%),
    repeating-linear-gradient(90deg, rgba(99, 255, 199, 0.05) 0 1px, transparent 1px 24px),
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 10px top 12px / 18px 1px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 10px top 12px / 1px 14px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 8px top 12px / 14px 1px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 8px top 12px / 1px 14px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 10px bottom 12px / 18px 1px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 10px bottom 12px / 1px 14px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 8px bottom 12px / 14px 1px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 8px bottom 12px / 1px 14px no-repeat;
  color: #f4fbff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
}

.btn-panel button:hover {
  transform: translateX(-2px);
  border-color: rgba(99, 255, 199, 0.26);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48), 0 0 20px rgba(99, 255, 199, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-panel button::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,255,199,0.8), rgba(73,217,255,0.2));
  opacity: 0.86;
}

.btn-panel button::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,255,199,0.8), rgba(73,217,255,0.2));
  opacity: 0.86;
}

.btn-panel__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 26px !important;
  transform: rotate(0deg);
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  filter: drop-shadow(0 0 8px rgba(99, 255, 199, 0.45));
  opacity: 1 !important;
  pointer-events: none;
  font: 900 24px/1 "Consolas", "Courier New", monospace !important;
  color: #f4fbff !important;
  letter-spacing: -2px !important;
  text-shadow: 0 0 10px rgba(99, 255, 199, 0.7);
  visibility: visible !important;
}

body.panel-open .btn-panel {
  left: 0;
}

body.panel-open .btn-panel button {
  border-radius: 0 16px 16px 0;
}

body.panel-open .btn-panel button:hover {
  transform: translateX(2px);
}

body.panel-open .btn-panel__icon {
  transform: rotate(180deg);
  filter: drop-shadow(0 0 10px rgba(73, 217, 255, 0.4));
}

.btn-up {
  z-index: 99999;
  position: fixed;
  right: 16px;
  bottom: 16px;
  
  width: 50px;
  height: 50px;
  
  background-color: rgba(176, 184, 191, 0.2);
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.3s ease;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-up.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-up:hover {
  background-color: var(--accent-primary);
  color: var(--bg-color);
  transform: translateY(-2px);
}

.container {
  display: flex;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.info-panel__left .grid {
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  padding-bottom: 4px;
}

.info-panel__left > .card {
  padding-bottom: 24px;
  overflow: visible;
}

.info-panel__left > .card > .grid {
  gap: 10px;
  padding-bottom: 8px;
}

.info-panel__left > .card > .grid > .card-item:last-child {
  margin-bottom: 6px;
}

/* === Карточки данных === */
.card {
  z-index: 100;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: radial-gradient(ellipse 156.13% 40.33% at 50.00% 0.00%, rgba(29.26, 37.65, 41.84, 0.30) 0%, rgba(22, 28, 31, 0.30) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0, 255, 254, 0.70);
}

.info-panel .card {
  gap: 12px;
  padding: 15px 18px 18px;
  border: 1px solid rgba(99, 255, 199, 0.14);
  border-top-color: rgba(99, 255, 199, 0.72);
  background:
    linear-gradient(180deg, rgba(8, 14, 24, 0.96) 0%, rgba(6, 11, 18, 0.84) 100%),
    repeating-linear-gradient(90deg, rgba(99, 255, 199, 0.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(73, 217, 255, 0.028) 0 1px, transparent 1px 18px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(73, 217, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 30px rgba(99, 255, 199, 0.06);
  overflow: hidden;
  isolation: isolate;
}

.info-panel .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(99, 255, 199, 0) 0%, rgba(99, 255, 199, 0) 44%, rgba(99, 255, 199, 0.14) 50%, rgba(73, 217, 255, 0.06) 56%, rgba(73, 217, 255, 0) 64%, rgba(73, 217, 255, 0) 100%),
    linear-gradient(90deg, rgba(99, 255, 199, 0.08) 0%, rgba(99, 255, 199, 0) 18%, rgba(73, 217, 255, 0) 82%, rgba(73, 217, 255, 0.08) 100%);
  background-size: 240px 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -240px 0, 0 0;
  pointer-events: none;
  animation: panelSweepCard 9s linear infinite;
}

.info-panel .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 12px top 12px / 24px 1px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 12px top 12px / 1px 16px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 12px top 12px / 24px 1px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 12px top 12px / 1px 16px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 12px bottom 12px / 24px 1px no-repeat,
    linear-gradient(var(--panel-mint), var(--panel-mint)) left 12px bottom 12px / 1px 16px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 12px bottom 12px / 24px 1px no-repeat,
    linear-gradient(var(--panel-cyan), var(--panel-cyan)) right 12px bottom 12px / 1px 16px no-repeat;
  pointer-events: none;
  animation: panelBarPulse 6.2s ease-in-out infinite;
}

.info-panel .card > * {
  position: relative;
  z-index: 1;
}

.card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;

}

.info-panel .card h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F2FBFF;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.info-panel .card-head {
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(99, 255, 199, 0.08);
}

.info-panel .card-head h2 {
  flex: 1 1 140px;
  min-width: 0;
}

.card-head__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  margin-left: auto;
  min-height: 26px;
}

.card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.info-panel .card-item {
  position: relative;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(73, 217, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 16px rgba(99, 255, 199, 0.03);
}

.info-panel .grid > .card-item:last-child {
  margin-bottom: 2px;
}

/* .anonymizer-clean .card {
  border-top: 1px solid rgba(255, 255, 255, 0.70);
  background: linear-gradient(259deg, rgba(10, 111, 224, 0.75) 8.33%, rgba(92, 169, 253, 0.75) 93.1%);
  box-shadow: 0 7px 30px 10px rgba(53, 125, 207, 0.25);
}
.anonymizer-detected .card {
  border-top: 1px solid #E94D4D;
} */
/* === #Карточки данных === */

.label {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-color);
  letter-spacing: -0.26px;
}

.info-panel .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(180, 209, 220, 0.72);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.value {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #fff;
}

.info-panel .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #F2FBFF;
  text-shadow: 0 0 12px rgba(99, 255, 199, 0.06);
}

.value.red {
  color: var(--accent-error);
}

.value.green {
  color: var(--accent-success);
}
.value.orange {
  color: var(--accent-primary);
}

.copy-value::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('./static/assets/icon/copy-alt.svg') no-repeat center;
  background-size: contain;
  opacity: 0.7;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(73, 217, 255, 0.12));
}

.table-copy-value::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: url('./static/assets/icon/copy-alt.svg') no-repeat center;
  background-size: contain;
  opacity: 0.7;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(73, 217, 255, 0.12));
}

.table-items {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.table-items:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

/* Спиннер */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(73, 217, 255, 0.18);
  border-top-color: var(--panel-mint);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  box-shadow: 0 0 12px rgba(99, 255, 199, 0.08);
}

.spinner-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Таблицы данных === */
#dns-table-container,
#edns-table-container,
#full-ip-table-container {
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid rgba(73, 217, 255, 0.08);
  background: rgba(6, 11, 18, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#dns-body-mob,
#edns-body-mob,
#full-ip-body-mob {
  display: none;
}

.text-loading-table {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(73, 217, 255, 0.08);
  color: var(--text-color);
}

thead th {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  font-weight: 500;
  color: rgba(187, 220, 230, 0.84);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

tbody tr {
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.026);
  font-size: 12px;
}

tbody tr:hover {
  background-color: rgba(73, 217, 255, 0.08);
}

td.green {
  background-color: rgba(106, 138, 106, 0.15);
  color: var(--accent-success);
}
td.orange {
  background-color: rgba(106, 106, 138, 0.15);
  color: var(--accent-primary);
}
td.red {
  background-color: rgba(138, 106, 106, 0.15);
  color: var(--accent-error);
}

.flag-wrapper {
  display: inline-block;
  width: 20px;
}

.ip-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.ip-header-container.card {
  margin: 0;
  padding: 18px 24px;
  border: 1px solid rgba(73, 217, 255, 0.14);
  border-top-color: rgba(99, 255, 199, 0.58);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8, 14, 24, 0.95) 0%, rgba(6, 11, 18, 0.9) 100%),
    repeating-linear-gradient(90deg, rgba(99, 255, 199, 0.032) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(73, 217, 255, 0.022) 0 1px, transparent 1px 18px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ip-header-container .flag-wrapper {
  width: 30px;
}

.ip-header-container .ip-text {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.96px;
}

/* Consistency indicators */
.consistency {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.6px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(73, 217, 255, 0.12);
}

.info-panel .consistency {
  margin-left: 0;
  flex: 0 1 auto;
  max-width: 100%;
  line-height: 1.2;
  white-space: normal;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(73, 217, 255, 0.12);
  background: rgba(73, 217, 255, 0.08);
  color: rgba(226, 244, 252, 0.9);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.status-pill.pending {
  color: #8ddcff;
  background: rgba(73, 217, 255, 0.1);
  border-color: rgba(73, 217, 255, 0.18);
}

.status-pill.good {
  color: #63FFC7;
  background: rgba(99, 255, 199, 0.1);
  border-color: rgba(99, 255, 199, 0.2);
}

.status-pill.bad {
  color: #ff7b87;
  background: rgba(233, 77, 77, 0.11);
  border-color: rgba(233, 77, 77, 0.2);
}

/* Яркие контрастные иконки и текст для Consistent и Not Consistent */
.consistency.good {
  color: #63FFC7;
  background: rgba(99, 255, 199, 0.10);
  border-color: rgba(99, 255, 199, 0.18);
}
.consistency.good::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: url('./static/assets/icon/u_check.svg') no-repeat center;
}

.consistency.bad {
  color: #F44336 !important;
  background: rgba(233, 77, 77, 0.10);
  border-color: rgba(233, 77, 77, 0.18);
}
.consistency.bad::before {
  content: '❌ ';
  color: #F44336 !important;
}

/* Popup «Copied» */
#copied-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  padding: 8px 12px;
  background: rgba(10, 14, 39, 0.95);
  border: 1px solid #00ffff;
  border-radius: 4px;
  color: #00ffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 10000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
#copied-popup.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Loader */
#loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--surface-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 999;
  transition: opacity 0.8s ease;
}
#loader h2 {
  color: var(--accent-primary);
  font-size: 2rem;
  margin: 0;
}
.loader-bar {
  width: 50%; max-width: 300px;
  height: 10px;
  margin-top: 20px;
  background: #333;
  border: 2px solid var(--accent-primary);
  border-radius: 5px;
  overflow: hidden;
}
.loader-progress {
  width: 0; height: 100%;
  background: var(--accent-primary);
  animation: loadProgress 3s linear forwards;
}
@keyframes loadProgress {
  from { width: 0; }
  to   { width: 100%; }
}

/* Responsive */
@media (min-width: 1181px) and (max-width: 1440px) {
  :root {
    --info-panel-width: clamp(500px, 38vw, 548px);
    --info-panel-gap: clamp(24px, 2vw, 32px);
    --info-panel-pad-x: 12px;
  }

  .info-panel .card {
    padding-inline: 14px;
  }

  .card-item .label {
    flex-basis: 60px;
    font-size: 11px;
  }

  .ip-line .ip-text-wrap {
    gap: 4px;
    font-size: 11px;
  }

  .ip-line span.ip-string {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
}

@media (max-width: 1180px) {
  .container {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .wrapper {
    position: static;
    overflow: visible;
    height: auto;
    min-height: 100svh;
  }

  #main-ip-header {
    position: static;
    display: flex;
    flex-direction: column;
    width: fit-content;
    min-height: 142px;
    margin: 24px auto 8px;
    gap: 24px;
  }

  .info-panel {
    overflow: visible;
    position: static;
    left: 0;
    transform: none;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    padding: 26px 24px;
  }

  .info-panel.open {
    transform: none;
  }

  .mobile-panel-nav {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 4;
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 4px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border: 1px solid rgba(99, 255, 199, 0.16);
    border-top-color: rgba(99, 255, 199, 0.52);
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(8, 14, 24, 0.96) 0%, rgba(6, 11, 18, 0.86) 100%),
      repeating-linear-gradient(90deg, rgba(99, 255, 199, 0.04) 0 1px, transparent 1px 24px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-panel-nav__btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(73, 217, 255, 0.16);
    border-radius: 8px;
    background: rgba(10, 20, 28, 0.72);
    color: rgba(226, 244, 252, 0.86);
    font: 700 11px/1 "JetBrains Mono", monospace;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-panel-nav__btn.is-active {
    border-color: rgba(99, 255, 199, 0.62);
    background: linear-gradient(180deg, rgba(99, 255, 199, 0.18), rgba(73, 217, 255, 0.10));
    color: #f4fbff;
    box-shadow: 0 0 16px rgba(99, 255, 199, 0.18);
  }

  .info-panel__left {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .info-panel__right {
    overflow-x: hidden;
    overflow-y: visible;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 24px;
  }

  .info-panel__view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .panel-module {
    min-height: auto;
    justify-content: flex-start;
  }

  .map-container {
    position: relative;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 300px;
    max-height: 300px;
  }

  .btn-panel {
    display: none;
  }

  #dns-table,
  #edns-table,
  #full-ip-table {
    display: none;
  }

  #dns-body-mob,
  #edns-body-mob,
  #full-ip-body-mob {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  #main-ip-header {
    width: min(calc(100% - 28px), 460px);
    min-height: 0;
    margin: calc(16px + env(safe-area-inset-top)) auto 10px;
    gap: 12px;
  }

  #main-ip-header > * {
    width: 100%;
    min-width: 0;
  }

  .browser-privacy-status {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ip-header-container {
    width: 100%;
    justify-content: center;
    padding: 16px 18px;
  }

  .ip-header-container.card {
    padding: 16px 18px;
    border-radius: 22px;
  }

  .ip-header-container .ip-text {
    font-size: clamp(18px, 6vw, 28px);
    line-height: 1.12;
    word-break: break-word;
  }

  .browser-privacy-status .badge {
    width: 100%;
    justify-content: center;
  }

  .info-panel {
    gap: 14px;
    padding: 16px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .info-panel__left {
    display: flex;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .info-panel__right {
    display: block;
    width: 100%;
    min-width: 0;
    padding-bottom: 0;
  }

  .info-panel__view {
    gap: 14px;
    padding-right: 0;
  }

  .panel-module {
    min-height: auto;
  }

  .info-panel .card {
    gap: 10px;
    padding: 14px 14px 16px;
  }

  .info-panel .card-head {
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 8px;
  }

  .card-head__meta {
    width: 100%;
    min-height: 0;
    margin-left: 0;
    justify-content: space-between;
  }

  .info-panel .consistency,
  .status-pill {
    max-width: 100%;
    font-size: 10px;
  }

  .info-panel .card-item {
    gap: 8px;
    min-height: 0;
    padding: 10px 10px;
  }

  .info-panel .label {
    font-size: 10px;
  }

  .info-panel .value {
    font-size: 12px;
  }

  .btn-up {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .info-panel {
    padding-inline: 10px;
  }

  .mobile-panel-nav {
    gap: 6px;
    padding: 7px;
    border-radius: 8px;
  }

  .mobile-panel-nav__btn {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10px;
  }

  .ip-header-container {
    gap: 12px;
    padding: 14px 16px;
  }

  .ip-header-container.card {
    padding: 14px 16px;
    border-radius: 20px;
  }

  .ip-header-container .ip-text {
    font-size: clamp(16px, 7vw, 24px);
  }

  .card-head__meta {
    justify-content: flex-start;
  }

  .browser-privacy-status .badge {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .info-panel,
  .info-panel__left,
  .info-panel__right,
  .info-panel__view,
  .info-panel .card,
  .panel-module,
  .panel-module > * {
    max-width: 100%;
    min-width: 0;
  }

  .grid,
  .bfp-summary,
  .bfp-grid,
  .hfp-bench-grid,
  .monfp-hero__right,
  .monfp-verdict-block__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-stats,
  .mitigation__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-controls,
  .history-tabs,
  .history-foot,
  .mitigation__head,
  .mitigation__controls,
  .bfp-foot,
  .hfp-history__head,
  .monfp-actions {
    flex-wrap: wrap;
  }

  .history-tabs,
  .bfp-foot button,
  .hfp-run-btn,
  .monfp-btn,
  .mitigation__btn {
    width: 100%;
  }

  .history-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px 8px;
  }

  .history-row__ip,
  .history-row__reasons {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .history-row__reasons,
  .history-row__flags {
    grid-column: 1 / -1;
  }

  .history-row__flags {
    flex-wrap: wrap;
  }

  .mitigation__status,
  .history-meta,
  .deanon-meta {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .panel-module__head,
  .panel-module__eyebrow,
  .panel-module__tag,
  .hfp-hash-block__value,
  .monfp-hash-block__value,
  .hfp-features__pre,
  #dns-body-mob,
  #edns-body-mob,
  #full-ip-body-mob,
  #dns-body-mob > div,
  #edns-body-mob > div,
  #full-ip-body-mob > div {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 640px) {
  .monfp-screen-row,
  .monfp-cap-row,
  .monfp-finding {
    grid-template-columns: minmax(0, 1fr);
  }

  .monfp-screen-label,
  .monfp-cap-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 420px) {
  .history-stats,
  .mitigation__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-panel .card {
    padding-inline: 12px;
  }
}

/* ─── Stage 14: Browser Fingerprints ──────────────────────────────────── */
.bfp-card { padding: 16px 18px; }
.bfp-summary {
  display: grid; grid-template-columns: 2fr 1fr; gap: 12px 16px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(140, 180, 255, 0.18), rgba(60, 80, 120, 0.10));
  border: 1px solid rgba(160, 200, 255, 0.40);
  box-shadow: 0 0 14px rgba(120, 170, 255, 0.14);
}
.bfp-hash, .bfp-entropy { display: flex; flex-direction: column; gap: 4px; }
.bfp-hash label, .bfp-entropy label {
  font: 600 10.5px/1 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(190, 215, 255, 0.65);
}
.bfp-hash > span {
  font: 500 13.5px/1.3 "JetBrains Mono", monospace;
  color: #cfe2ff; word-break: break-all;
  text-shadow: 0 0 8px rgba(120, 170, 255, 0.25);
}
.bfp-entropy > span {
  font: 600 18px/1 "JetBrains Mono", monospace;
  color: #ffe082; text-shadow: 0 0 10px rgba(255, 220, 120, 0.30);
}
.bfp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.bfp-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 5px 8px; border-radius: 5px;
  background: rgba(30, 40, 60, 0.30);
  border: 1px solid rgba(140, 170, 220, 0.18);
}
.bfp-cell--wide { grid-column: 1 / -1; }
.bfp-cell label {
  font: 600 9.5px/1 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: rgba(180, 205, 240, 0.55);
}
.bfp-cell > span { font: 500 11.5px/1.35 "Inter", sans-serif; color: #d8e6ff; word-break: break-all; }
.bfp-cell .mono { font-family: "JetBrains Mono", monospace; font-size: 10.5px; }
.bfp-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed rgba(140, 180, 230, 0.20);
}
.bfp-foot button {
  appearance: none; cursor: pointer;
  font: 600 11.5px/1 "Inter", sans-serif;
  color: #cfe2ff; padding: 7px 14px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(80, 130, 220, 0.30), rgba(40, 70, 140, 0.18));
  border: 1px solid rgba(140, 180, 240, 0.45);
  box-shadow: 0 0 10px rgba(100, 150, 230, 0.18);
  transition: transform .12s ease, box-shadow .18s ease;
}
.bfp-foot button:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(120, 170, 240, 0.34); }
.bfp-meta { font: 400 10.5px/1.3 "Inter", sans-serif; color: rgba(190, 215, 255, 0.55); }

/* ─── Stage 15: Hardware Fingerprints (CPU entropy) ───────────────────── */
.hfp-card { padding: 16px 18px; }
.hfp-card .panel-module__tag[data-state="busy"]    { background: rgba(255, 200, 80, 0.18); color: #ffd166; }
.hfp-card .panel-module__tag[data-state="ok"]      { background: rgba(80, 230, 150, 0.18); color: #62e6a0; }
.hfp-card .panel-module__tag[data-state="error"]   { background: rgba(255, 90, 90, 0.18); color: #ff8585; }
.webglfp-card {
  margin-top: 14px;
}
.webglfp-card .panel-module__eyebrow,
.webglfp-card .hfp-history__title,
.webglfp-card .hfp-features summary {
  color: rgba(111, 230, 255, 0.82);
}
.webglfp-card .hfp-hash-block {
  background: linear-gradient(180deg, rgba(50, 200, 230, 0.20), rgba(20, 90, 120, 0.12));
  border-color: rgba(80, 220, 255, 0.42);
  box-shadow: 0 0 18px rgba(70, 210, 255, 0.16);
}
.webglfp-card .hfp-hash-block__label,
.webglfp-card .hfp-hash-block__sub {
  color: rgba(190, 240, 255, 0.72);
}
.webglfp-card .hfp-hash-block__value,
.webglfp-card .hfp-history__count {
  color: #c9f7ff;
  text-shadow: 0 0 12px rgba(80, 220, 255, 0.26);
}
.webglfp-card .hfp-run-btn {
  background: linear-gradient(180deg, rgba(70, 210, 255, 0.38), rgba(40, 130, 180, 0.28));
  border-color: rgba(90, 225, 255, 0.58);
  box-shadow: 0 0 18px rgba(70, 210, 255, 0.20);
}
.webglfp-card .hfp-run-btn:hover {
  box-shadow: 0 0 24px rgba(70, 210, 255, 0.38);
}
.webglfp-card .hfp-history,
.webglfp-card .hfp-bench,
.webglfp-card .hfp-features__pre {
  background: rgba(16, 36, 48, 0.40);
  border-color: rgba(90, 225, 255, 0.22);
}
.webglfp-card .hfp-bench label {
  color: rgba(190, 240, 255, 0.62);
}
.webglfp-card .hfp-bench > span,
.webglfp-card .hfp-features__pre {
  color: #d8fbff;
}
.webglfp-card .hfp-history__empty {
  color: rgba(190, 240, 255, 0.56) !important;
}
.webglfp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.webglfp-card .hfp-hero__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 760px) {
  .webglfp-grid { grid-template-columns: 1fr; }
}

.hfp-hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px;
  margin: 12px 0 14px;
}
@media (max-width: 880px) { .hfp-hero { grid-template-columns: 1fr; } }
.hfp-hero__left { display: flex; flex-direction: column; gap: 10px; }

.hfp-hash-block {
  padding: 14px 16px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 130, 80, 0.22), rgba(140, 60, 30, 0.10));
  border: 1px solid rgba(255, 160, 100, 0.45);
  box-shadow: 0 0 16px rgba(255, 140, 80, 0.18);
}
.hfp-hash-block__label {
  display: block;
  font: 600 10.5px/1 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255, 200, 160, 0.75);
  margin-bottom: 6px;
}
.hfp-hash-block__value {
  font: 600 18px/1.25 "JetBrains Mono", monospace;
  color: #ffd9a8; word-break: break-all;
  text-shadow: 0 0 12px rgba(255, 160, 90, 0.35);
}
.hfp-hash-block__sub {
  margin-top: 6px;
  font: 400 11px/1.3 "Inter", sans-serif;
  color: rgba(255, 220, 190, 0.65);
}

.hfp-progress {
  position: relative; height: 22px;
  border-radius: 6px; overflow: hidden;
  background: rgba(40, 30, 50, 0.45);
  border: 1px solid rgba(255, 160, 100, 0.30);
}
.hfp-progress__bar {
  position: absolute; inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, rgba(255, 200, 80, 0.50), rgba(255, 120, 60, 0.70));
  transition: width .25s ease;
}
.hfp-progress__label {
  position: relative;
  font: 500 11px/22px "Inter", sans-serif; color: #fff;
  text-align: center; text-shadow: 0 0 6px rgba(0,0,0,0.55);
}
.hfp-run-btn {
  appearance: none; cursor: pointer;
  font: 600 12.5px/1 "Inter", sans-serif; color: #fff;
  padding: 10px 16px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 140, 80, 0.45), rgba(220, 80, 40, 0.30));
  border: 1px solid rgba(255, 160, 100, 0.65);
  box-shadow: 0 0 18px rgba(255, 130, 70, 0.25);
  transition: transform .12s ease, box-shadow .18s ease;
}
.hfp-run-btn:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(255, 140, 80, 0.45); }
.hfp-run-btn:disabled { opacity: 0.55; cursor: progress; }

.hfp-history {
  height: 100%;
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(60, 30, 50, 0.40), rgba(30, 20, 30, 0.20));
  border: 1px solid rgba(255, 160, 100, 0.30);
}
.hfp-history__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.hfp-history__title {
  font: 600 11px/1 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255, 200, 160, 0.80);
}
.hfp-history__count {
  font: 700 14px/1 "JetBrains Mono", monospace;
  color: #ffd9a8;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 140, 80, 0.18);
  border: 1px solid rgba(255, 160, 100, 0.40);
}
.hfp-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hfp-history__list li.hfp-h-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40, 22, 32, 0.55), rgba(28, 16, 24, 0.45));
  border: 1px solid rgba(255, 160, 100, 0.22);
  font: 400 11px/1.3 "Inter", sans-serif;
  color: #f8d8c2;
  transition: border-color 120ms ease, transform 120ms ease;
}
.hfp-history__list li.hfp-h-card:hover {
  border-color: rgba(255, 180, 120, 0.50);
}
.hfp-h-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.hfp-h-when {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 600 11.5px/1.2 "JetBrains Mono", monospace;
  color: #ffd9a8;
}
.hfp-h-when .hfp-h-rel {
  font: 500 10px/1.2 "Inter", sans-serif;
  color: rgba(255, 200, 160, 0.55);
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255, 140, 80, 0.10);
  border: 1px solid rgba(255, 160, 100, 0.20);
}
.hfp-h-browser {
  display: inline-flex; align-items: baseline; gap: 5px;
  font: 600 10.5px/1.2 "Inter", sans-serif;
  color: #ffe6cc;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(120, 90, 200, 0.18);
  border: 1px solid rgba(160, 130, 230, 0.40);
}
.hfp-h-browser em {
  font-style: normal; font-weight: 400;
  color: rgba(220, 210, 255, 0.75);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}
.hfp-h-iprow {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 400 11px/1.2 "JetBrains Mono", monospace;
  color: rgba(255, 220, 190, 0.80);
}
.hfp-h-tag {
  font: 700 9.5px/1 "Inter", sans-serif;
  letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 4px;
  color: #fff;
}
.hfp-h-tag--v4 { background: rgba(13, 110, 253, 0.85); }
.hfp-h-tag--v6 { background: rgba(111, 66, 193, 0.85); }
.hfp-h-ip {
  color: #ffe1c6;
  word-break: break-all;
}
.hfp-h-flag {
  width: 18px; height: auto; vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30);
}
.hfp-h-place {
  font: 400 10.5px/1.2 "Inter", sans-serif;
  color: rgba(255, 220, 190, 0.65);
}
.hfp-history__empty {
  display: block !important;
  text-align: center;
  font-style: italic;
  padding: 8px 10px;
  color: rgba(255, 200, 160, 0.50) !important;
}

.hfp-bench-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.hfp-bench {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px; border-radius: 5px;
  background: rgba(40, 25, 30, 0.35);
  border: 1px solid rgba(255, 160, 100, 0.20);
}
.hfp-bench label {
  font: 600 9.5px/1 "Inter", sans-serif;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: rgba(255, 200, 160, 0.60);
}
.hfp-bench > span { font: 500 11.5px/1.35 "JetBrains Mono", monospace; color: #f8d8c2; }

.hfp-features { margin-top: 12px; }
.hfp-features summary {
  cursor: pointer;
  font: 600 11px/1.3 "Inter", sans-serif;
  color: rgba(255, 200, 160, 0.75);
  padding: 6px 0;
  outline: none;
}
.hfp-features__pre {
  max-height: 200px; overflow: auto;
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  font: 400 10.5px/1.4 "JetBrains Mono", monospace;
  color: #f0d8c0;
  background: rgba(20, 15, 20, 0.65);
  border: 1px solid rgba(255, 160, 100, 0.18);
  white-space: pre-wrap; word-break: break-all;
}

/* ─── Stage 17 · Display / Monitor Fingerprints — cyan/teal display theme ─ */
.monfp-card {
  --mf-accent: #00e6ff;
  --mf-accent-2: #4cffd6;
  --mf-warn: #ffc34d;
  --mf-bad:  #ff5d6c;
  --mf-ok:   #4cffd6;
  --mf-ink:  #d8f6ff;
  --mf-mute: rgba(216, 246, 255, 0.55);
  --mf-line: rgba(0, 230, 255, 0.18);
  --mf-glass: rgba(8, 22, 32, 0.62);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 230, 255, 0.10), transparent 55%),
    radial-gradient(140% 160% at 100% 100%, rgba(76, 255, 214, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(6, 14, 22, 0.92), rgba(4, 10, 16, 0.92));
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  padding: 16px 18px 14px;
  color: var(--mf-ink);
  position: relative;
  overflow: hidden;
}
.monfp-card .panel-module__head { margin-bottom: 12px; }
.monfp-card .panel-module__eyebrow { color: rgba(0, 230, 255, 0.85); }
.monfp-card .panel-module__tag {
  background: linear-gradient(180deg, rgba(0,230,255,0.16), rgba(76,255,214,0.10));
  border: 1px solid var(--mf-line);
  color: var(--mf-ink);
}
.monfp-card .panel-module__tag[data-state="busy"] { color: var(--mf-warn); border-color: rgba(255,195,77,0.4); }
.monfp-card .panel-module__tag[data-state="ok"]   { color: var(--mf-ok);   border-color: rgba(76,255,214,0.45); }
.monfp-card .panel-module__tag[data-state="warn"] { color: var(--mf-warn); border-color: rgba(255,195,77,0.45); }
.monfp-card .panel-module__tag[data-state="bad"]  { color: var(--mf-bad);  border-color: rgba(255,93,108,0.45); }

.monfp-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.25fr);
  gap: 16px;
}
@media (max-width: 900px) { .monfp-hero { grid-template-columns: 1fr; } }

.monfp-hash-block {
  background: linear-gradient(135deg, rgba(0,230,255,0.14), rgba(76,255,214,0.08) 60%, rgba(0,40,55,0.55));
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.monfp-hash-block__label {
  display: block;
  font: 600 10px/1.2 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 230, 255, 0.85);
  margin-bottom: 6px;
}
.monfp-hash-block__value {
  font: 600 14px/1.3 "JetBrains Mono", monospace;
  color: var(--mf-accent-2);
  word-break: break-all;
}
.monfp-hash-block__sub {
  margin-top: 6px;
  font: 500 11px/1.3 "Inter", sans-serif;
  color: var(--mf-mute);
}

.monfp-verdict-block { margin-bottom: 12px; }
.monfp-verdict-block__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.monfp-verdict-cell {
  background: var(--mf-glass);
  border: 1px solid var(--mf-line);
  border-radius: 8px;
  padding: 8px 10px;
}
.monfp-verdict-cell label {
  display: block;
  font: 600 9.5px/1.2 "Inter", sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mf-mute);
  margin-bottom: 4px;
}
.monfp-score-val, .monfp-verdict-val {
  font: 700 16px/1.2 "JetBrains Mono", monospace;
  color: var(--mf-ok);
}
.monfp-score-val[data-tone="warn"], .monfp-verdict-val[data-tone="warn"] { color: var(--mf-warn); }
.monfp-score-val[data-tone="bad"],  .monfp-verdict-val[data-tone="bad"]  { color: var(--mf-bad); }
.monfp-score-val[data-tone="ok"],   .monfp-verdict-val[data-tone="ok"]   { color: var(--mf-ok); }

.monfp-progress {
  position: relative;
  height: 8px;
  background: rgba(0, 230, 255, 0.08);
  border: 1px solid var(--mf-line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.monfp-progress__bar {
  position: absolute; inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--mf-accent), var(--mf-accent-2));
  box-shadow: 0 0 18px rgba(0, 230, 255, 0.45);
  transition: width 0.25s ease-out;
}
.monfp-progress__label {
  font: 500 11px/1.3 "Inter", sans-serif;
  color: var(--mf-mute);
  margin: 4px 0 10px;
}

.monfp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.monfp-btn {
  cursor: pointer;
  font: 600 11.5px/1.2 "Inter", sans-serif;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--mf-line);
  color: var(--mf-ink);
  background: linear-gradient(180deg, rgba(0,230,255,0.18), rgba(0,80,100,0.35));
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.monfp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,230,255,0.25); }
.monfp-btn:active { transform: translateY(0); }
.monfp-btn--primary { color: #001b22; background: linear-gradient(180deg, var(--mf-accent), var(--mf-accent-2)); border-color: transparent; }
.monfp-btn--stepup  { color: var(--mf-warn); border-color: rgba(255,195,77,0.45); background: linear-gradient(180deg, rgba(255,195,77,0.10), rgba(40,30,0,0.4)); }
.monfp-btn--stepup:hover { box-shadow: 0 4px 16px rgba(255,195,77,0.30); }

.monfp-hero__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.monfp-bench {
  background: var(--mf-glass);
  border: 1px solid var(--mf-line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.monfp-bench--wide { grid-column: 1 / -1; }
.monfp-bench label {
  font: 600 9.5px/1.2 "Inter", sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--mf-mute);
}
.monfp-bench .mono {
  font: 500 11.5px/1.35 "JetBrains Mono", monospace;
  color: var(--mf-ink); word-break: break-word;
}

.monfp-stepup-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .monfp-stepup-grid { grid-template-columns: 1fr; } }
.monfp-stepup-block {
  background: var(--mf-glass);
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  padding: 10px 12px;
}
.monfp-stepup-block__title {
  font: 600 10.5px/1.2 "Inter", sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(0, 230, 255, 0.85);
  margin-bottom: 8px;
}
.monfp-stepup-block__body { display: flex; flex-direction: column; gap: 6px; }
.monfp-mini { color: var(--mf-mute); font: 500 11px/1.4 "Inter", sans-serif; }

.monfp-screen-row, .monfp-cap-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1.5fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(0,230,255,0.12);
  border-radius: 6px;
  background: rgba(0, 24, 32, 0.45);
  font: 500 11px/1.3 "JetBrains Mono", monospace;
}
.monfp-screen-tag {
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 0.06em;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(0, 230, 255, 0.10);
  color: var(--mf-accent);
  border: 1px solid var(--mf-line);
}
.monfp-screen-tag--primary { background: linear-gradient(180deg, var(--mf-accent), var(--mf-accent-2)); color: #00121a; border-color: transparent; }
.monfp-screen-tag--internal { color: var(--mf-accent-2); border-color: rgba(76,255,214,0.40); }
.monfp-screen-tag--external { color: var(--mf-warn); border-color: rgba(255,195,77,0.40); }
.monfp-screen-geo, .monfp-cap-geom { color: var(--mf-ink); }
.monfp-screen-pos, .monfp-cap-spr { color: var(--mf-mute); }
.monfp-screen-label, .monfp-cap-label { color: var(--mf-accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monfp-cap-surface {
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 0.06em;
  padding: 3px 6px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,195,77,0.20), rgba(60,40,0,0.4));
  color: var(--mf-warn);
  border: 1px solid rgba(255,195,77,0.40);
  text-transform: uppercase;
}

.monfp-findings-wrap {
  margin-top: 14px;
  background: var(--mf-glass);
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  padding: 10px 12px;
}
.monfp-findings-wrap__title {
  font: 600 10.5px/1.2 "Inter", sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(0, 230, 255, 0.85);
  margin-bottom: 8px;
}
.monfp-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.monfp-finding {
  display: grid;
  grid-template-columns: 64px 200px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,230,255,0.12);
  background: rgba(0, 24, 32, 0.45);
  font: 500 11px/1.35 "JetBrains Mono", monospace;
  color: var(--mf-ink);
}
.monfp-finding--ok    { border-color: rgba(76,255,214,0.30); color: var(--mf-ok); }
.monfp-finding--weak  { border-color: rgba(255,195,77,0.30); }
.monfp-finding--strong{ border-color: rgba(255,195,77,0.55); background: rgba(40,28,0,0.45); }
.monfp-finding--hard  { border-color: rgba(255,93,108,0.55); background: rgba(50,12,18,0.55); }
.monfp-finding__sev {
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 4px 6px; border-radius: 4px;
  background: rgba(0, 230, 255, 0.10);
  color: var(--mf-accent);
}
.monfp-finding[data-sev="weak"]   .monfp-finding__sev { color: var(--mf-warn); background: rgba(255,195,77,0.12); }
.monfp-finding[data-sev="strong"] .monfp-finding__sev { color: var(--mf-warn); background: rgba(255,195,77,0.22); }
.monfp-finding[data-sev="hard"]   .monfp-finding__sev { color: #fff; background: var(--mf-bad); }
.monfp-finding__code { color: var(--mf-accent-2); font-weight: 600; }
.monfp-finding__msg  { color: var(--mf-ink); }

.monfp-card .hfp-features__pre {
  background: rgba(0, 14, 20, 0.75);
  border-color: var(--mf-line);
  color: var(--mf-ink);
}
.monfp-card .hfp-features summary { color: rgba(0, 230, 255, 0.80); }

@media (max-width: 768px) {
  .bfp-summary,
  .bfp-grid,
  .hfp-hero,
  .hfp-bench-grid,
  .webglfp-grid,
  .monfp-hero,
  .monfp-hero__right,
  .monfp-verdict-block__row,
  .monfp-stepup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bfp-card,
  .hfp-card,
  .monfp-card,
  .hfp-history,
  .hfp-hash-block,
  .monfp-hash-block,
  .monfp-stepup-block,
  .monfp-findings-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .bfp-foot,
  .hfp-history__head,
  .hfp-h-row1,
  .hfp-h-iprow,
  .monfp-actions {
    flex-wrap: wrap;
  }

  .bfp-foot button,
  .hfp-run-btn,
  .monfp-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .hfp-hash-block__value,
  .hfp-bench > span,
  .hfp-features__pre,
  .monfp-hash-block__value,
  .monfp-bench .mono,
  .monfp-finding__msg {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 640px) {
  .monfp-screen-row,
  .monfp-cap-row,
  .monfp-finding {
    grid-template-columns: minmax(0, 1fr);
  }
}