/* "Website DNA" page (/website-dna/): domain form, helix loader, canvas lab with the rotating double helix next to the genome report,
   diagnosis, detail boxes (libraries + CVE, third parties, cookies, security), share row, delete dialogs, wall of recent samples.
   The lab panel uses fixed colours so it reads the same in light and dark theme. */
.dna { --bg: #05080f; --line-c: rgba(62, 150, 255, .24); --cream: #e6f1ff; --soft: #93a9c9;
  --own: #3e96ff; --third: #b266ff; --sec: #3ce68c; --secx: #ffb040; --cve: #ff3654; --cy: #3ec8ff; --mono: ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace; }
.dna .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dna [hidden] { display: none !important; }
.dna-fun { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 4px; font: 700 13px var(--font-m); letter-spacing: .08em; text-transform: uppercase;
  color: #05080f; background: linear-gradient(135deg, #3e96ff, #b266ff 55%, #3ce68c); }
.dna-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }

/* ---- form */
.dna-ask { margin: 22px 0 6px; max-width: 640px; }
.dna-label { display: block; margin: 0 0 8px; font: 600 15px var(--font-m); color: var(--muted); }
.dna-row-in { display: flex; flex-wrap: wrap; gap: 10px; }
.dna-in { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45));
  background: var(--panel, transparent); color: var(--text); font: 500 17px var(--font-m); }
.dna-in::placeholder { color: var(--dim, #888); }
.dna-go { flex: 0 0 auto; min-height: 56px; padding: 0 28px; border: 1px solid var(--own); border-radius: 10px; color: #eef6ff; font: 700 18px var(--font-b); cursor: pointer;
  background: linear-gradient(135deg, #0c2a52, #2a1050); box-shadow: 0 0 0 1px rgba(62, 150, 255, .25), 0 0 18px rgba(62, 150, 255, .35);
  animation: dna-glow 2.8s infinite; transition: transform .2s, filter .2s; }
.dna-go:hover { filter: brightness(1.2); transform: translateY(-2px); }
.dna-go[disabled] { opacity: .6; cursor: wait; animation: none; transform: none; }
.dna-demo { margin: 10px 0 0; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--line-2, rgba(127, 127, 127, .45));
  background: transparent; color: var(--muted); font: 500 14px var(--font-m); cursor: pointer; }
.dna-demo:hover { color: var(--text); border-style: solid; }
.dna-in:focus-visible, .dna-go:focus-visible, .dna-demo:focus-visible, .dna-share a:focus-visible, .dna-share button:focus-visible, .dnw-list a:focus-visible,
.dna-cv:focus-visible, .dna-row:focus-visible, .dna-osv:focus-visible, .dna-more summary:focus-visible { outline: 3px solid var(--cy); outline-offset: 3px; }
.dna-msg { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.dna-msg:empty { display: none; }
.dna-msg.ok { color: var(--ok); font-weight: 600; }
.dna-msg.warn { color: var(--accent); font-weight: 500; }
@keyframes dna-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(62, 150, 255, .25), 0 0 12px rgba(62, 150, 255, .25); } 50% { box-shadow: 0 0 0 1px rgba(178, 102, 255, .45), 0 0 24px rgba(178, 102, 255, .4); } }

/* ---- loader: a small helix whose rungs breathe one after the other */
.dnl { margin: 18px 0 8px; padding: 22px 16px 20px; border-radius: var(--radius); text-align: center; color: var(--cream);
  background: radial-gradient(520px 260px at 50% 40%, #0d1f40, var(--bg) 72%); border: 1px solid var(--line-c); }
.dnl-svg { display: block; width: min(300px, 86%); height: auto; margin: 0 auto; overflow: visible; }
.dnl-r line { stroke: rgba(150, 200, 255, .45); stroke-width: 2; }
.dnl-r .a { fill: var(--own); } .dnl-r .b { fill: var(--third); }
.dnl-r { transform-box: fill-box; transform-origin: 50% 50%; animation: dnl-twist 1.8s ease-in-out infinite; }
.dnl-r:nth-child(3n+2) .a { fill: var(--sec); } .dnl-r:nth-child(5n+4) .b { fill: var(--cve); }
.dnl-r:nth-child(2) { animation-delay: -.14s; } .dnl-r:nth-child(3) { animation-delay: -.28s; } .dnl-r:nth-child(4) { animation-delay: -.42s; }
.dnl-r:nth-child(5) { animation-delay: -.56s; } .dnl-r:nth-child(6) { animation-delay: -.7s; } .dnl-r:nth-child(7) { animation-delay: -.84s; }
.dnl-r:nth-child(8) { animation-delay: -.98s; } .dnl-r:nth-child(9) { animation-delay: -1.12s; } .dnl-r:nth-child(10) { animation-delay: -1.26s; }
.dnl-r:nth-child(11) { animation-delay: -1.4s; } .dnl-r:nth-child(12) { animation-delay: -1.54s; } .dnl-r:nth-child(13) { animation-delay: -1.68s; }
@keyframes dnl-twist { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
.dnl-step { margin: 14px 0 0; font: 500 15px var(--mono); color: #bfe2ff; min-height: 1.6em; }

/* ---- result */
.dna-r { margin: 22px 0 8px; padding: 18px clamp(10px, 3vw, 26px) 22px; border-radius: var(--radius); color: var(--cream);
  background: radial-gradient(900px 420px at 50% 0, #0b1a36, var(--bg) 72%); border: 1px solid var(--line-c); scroll-margin-top: 80px; }
.dna-head { margin: 0 0 12px; }
.dna-title { margin: 0; font: 700 clamp(22px, 3.4vw, 32px)/1.15 var(--font-d, var(--font-b)); color: #fff; overflow-wrap: anywhere; }
.dna-meta { margin: 4px 0 0; font: 500 13px var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.dna-unr { margin: 8px 0 0; padding: 8px 12px; font: 600 14px var(--mono); color: var(--secx); border: 1px dashed rgba(255, 176, 64, .6); }

.dna-lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .dna-lab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } }
.dna-stage { position: relative; border-radius: 12px; overflow: hidden; background: #04060d; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(62, 150, 255, .28), 0 0 30px rgba(62, 150, 255, .08); }
.dna-cv { display: block; width: 100%; height: clamp(440px, 72vh, 640px); cursor: grab; touch-action: pan-y; outline: none; }
.dna-cv:active { cursor: grabbing; } .dna-cv.pick { cursor: pointer; }
.dna-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 12px; font: 600 11.5px var(--mono); color: #8fb6e0; text-align: center;
  background: linear-gradient(transparent, rgba(4, 6, 13, .85)); pointer-events: none; }

/* report next to the helix */
.dna-rep { padding: 14px 16px; background: rgba(8, 16, 32, .92); border: 1px solid var(--line-c); border-radius: 12px; min-width: 0; }
.dna-h { margin: 0 0 10px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); }
.dna-h4 { margin: 16px 0 8px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.dna-comp-l { margin: 0 0 6px; font: 600 14px var(--font-b); }
.dna-comp-l .c-own { color: var(--own); } .dna-comp-l .c-third { color: var(--third); }
.dna-bar { display: block; width: 100%; height: 10px; border-radius: 3px; }
.dna-comp-n { margin: 6px 0 10px; font: 500 12.5px var(--mono); color: var(--soft); }
.dna-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dna-types li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 600 12.5px var(--mono); }
.dna-types .dna-bar { height: 7px; }
.dna-tk { color: #cfe2ff; } .dna-tn { color: var(--soft); }
.dna-stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dna-stats li { padding: 8px 10px; background: rgba(12, 24, 46, .9); border: 1px solid var(--line-c); border-left: 2px solid var(--own); min-width: 0; }
.dna-stats li:nth-child(2) { border-left-color: var(--third); } .dna-stats li:nth-child(3) { border-left-color: var(--cy); }
.dna-stats li.dna-st-cve { border-left-color: var(--sec); } .dna-stats li.dna-st-cve.bad { border-left-color: var(--cve); background: rgba(60, 10, 22, .7); }
.dna-stats li:nth-child(5) { border-left-color: var(--secx); }
.dna-stats span { display: block; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.dna-stats b { display: block; margin-top: 2px; font: 700 14px var(--mono); color: #fff; overflow-wrap: anywhere; }
.dna-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 12.5px var(--font-b); color: #cfe2ff; }
.dna-legend b { font: 700 12px var(--mono); color: var(--soft); }
.dna-dot { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; background: var(--c, #fff); box-shadow: 0 0 8px var(--c, #fff); }
.k-own { --c: var(--own); } .k-third { --c: var(--third); } .k-sec { --c: var(--sec); } .k-secx { --c: var(--secx); } .k-cve { --c: var(--cve); }
.dna-legend .k-cve .dna-dot, .dna-row.k-cve .dna-dot { animation: dna-pulse 1.4s ease-in-out infinite; }
@keyframes dna-pulse { 50% { box-shadow: 0 0 16px 3px var(--cve); } }

/* diagnosis */
.dna-diag { margin: 16px 0 0; padding: 14px 18px 16px; background: rgba(10, 18, 34, .92); color: #d9ecff; border: 1px solid rgba(60, 230, 140, .45);
  box-shadow: 0 0 18px rgba(60, 230, 140, .1); border-radius: 10px; }
.dna-diag h3 { margin: 0 0 6px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.dna-diag h4 { margin: 14px 0 6px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.dna-diag-t { margin: 0; min-height: 3em; font: 400 clamp(15px, 2vw, 17px)/1.6 var(--mono); }
.dna-ther { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.dna-ther li { font: 500 15px/1.5 var(--font-b); color: #eaf6ff; }
.dna-ther li::marker { color: var(--sec); font-weight: 700; }
.dna-caret { color: var(--cy); animation: dna-blink .8s steps(1) infinite; }
@keyframes dna-blink { 50% { opacity: .1; } }

/* detail boxes */
.dna-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 900px) { .dna-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dna-box { padding: 14px 16px; background: rgba(8, 16, 32, .92); border: 1px solid var(--line-c); border-radius: 10px; min-width: 0; }
.dna-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dna-box li { min-width: 0; overflow-wrap: anywhere; font: 500 14px var(--font-b); }
.dna-libs > li, .dna-hosts > li, .dna-cookies > li, .dna-tech > li { padding: 8px 10px; background: rgba(12, 24, 46, .85); border-left: 2px solid var(--own); }
.dna-hosts > li { border-left-color: var(--third); } .dna-cookies > li { border-left-color: var(--secx); }
.dna-lib.bad { border-left-color: var(--cve); background: rgba(50, 10, 22, .65); }
.dna-tech > li.warn { border-left-color: var(--secx); }
.dna-lib-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.dna-box b { color: #fff; }
.dna-ver { font: 700 13px var(--mono); color: var(--cy); } .dna-lib.bad .dna-ver { color: #ff8095; }
.dna-src { font: 500 11.5px var(--mono); color: var(--soft); }
.dna-host { margin: 3px 0 0; font: 500 12.5px var(--mono); color: var(--soft); }
.dna-ok { margin: 4px 0 0; font: 600 12.5px var(--mono); color: var(--sec); }
.dna-cat { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; font: 600 11px var(--mono); color: #e9dcff; background: rgba(178, 102, 255, .22); }
.dna-cat.c-analytics, .dna-cat.c-ads { color: #ffe0e6; background: rgba(255, 54, 84, .25); } .dna-cat.c-fonts, .dna-cat.c-video { color: #fff1d6; background: rgba(255, 176, 64, .22); }
.dna-vulns { margin-top: 8px !important; gap: 6px !important; }
.dna-vulns li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font: 500 13px var(--font-b); }
.dna-sev { grid-row: span 2; align-self: start; padding: 1px 7px; border-radius: 3px; font: 700 11px var(--mono); text-transform: uppercase; color: #05080f; background: #ffb3a1; }
.sev-high .dna-sev { background: #ff6b81; } .sev-critical .dna-sev { background: #ff2448; color: #fff; } .sev-low .dna-sev { background: #ffe08a; }
.dna-osv { font: 700 13px var(--mono); color: #ffb3c0; text-decoration: underline; text-decoration-color: rgba(255, 128, 149, .5); }
.dna-osv:hover { color: #fff; }
.dna-sum { font-size: 12.5px; color: #c9d8ee; }
.dna-sec li { padding: 6px 10px; font: 600 13px var(--mono); background: rgba(12, 24, 46, .85); }
.dna-sec li.ok { color: #9dffc9; border-left: 2px solid var(--sec); } .dna-sec li.no { color: #ffd39a; border-left: 2px solid var(--secx); } .dna-sec li.na { color: var(--soft); }
.dna-none, .dna-note { margin: 10px 0 0; font: 400 13px/1.5 var(--font-b); color: var(--soft); }
.dna-none { color: #9dffc9; }

/* all pairs / resources */
.dna-more { margin-top: 12px; padding: 10px 14px; background: rgba(8, 16, 32, .92); border: 1px solid var(--line-c); border-radius: 10px; }
.dna-more summary { cursor: pointer; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cy); min-height: 28px; display: list-item; }
.dna-pairs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.dna-row { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 4px 10px; text-align: left; cursor: pointer;
  font: 600 12.5px var(--mono); color: var(--cream); background: rgba(12, 24, 46, .85); border: 1px solid transparent; border-radius: 6px; }
.dna-row:hover, .dna-row.hot { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.dna-pn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dna-pk { flex: 0 0 auto; font-size: 11px; color: var(--soft); }
.dna-res { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font: 500 12px var(--mono); }
.dna-res li { display: grid; grid-template-columns: 64px minmax(0, 14em) minmax(0, 1fr); gap: 8px; padding: 3px 6px; border-left: 2px solid var(--own); overflow-wrap: anywhere; }
.dna-res li.t3 { border-left-color: var(--third); }
.dna-rt { color: var(--soft); } .dna-rh { color: #cfe2ff; } .dna-rp { color: #8fa7c8; }
@media (max-width: 560px) { .dna-res li { grid-template-columns: 56px minmax(0, 1fr); } .dna-rp { grid-column: 1 / -1; } }

/* share */
.dna-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.dna-share a, .dna-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 6px; font: 600 14px var(--font-b);
  color: var(--cream); background: rgba(62, 150, 255, .07); border: 1px solid rgba(62, 150, 255, .45); text-decoration: none; cursor: pointer; }
.dna-share a:hover, .dna-share button:hover { background: rgba(62, 150, 255, .18); }
.dna-share .dna-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.dna-share .dna-del { color: #ffd0d8; background: rgba(255, 54, 84, .08); border-color: rgba(255, 54, 84, .55); }
.dna-clip { position: fixed; opacity: 0; left: 0; top: 0; }

/* dialogs (native <dialog>, built by dna.js) */
.dna-dlg { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 1px solid rgba(255, 54, 84, .6);
  border-radius: 14px; background: radial-gradient(700px 320px at 50% 0, #1b1030, #05080f 74%); color: #e6f1ff; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.dna-dlg::backdrop { background: rgba(3, 5, 10, .74); backdrop-filter: blur(3px); }
.dna-dlg-in { padding: 24px clamp(16px, 4vw, 30px) 22px; }
.dna-dlg h2 { margin: 0 0 12px; font: 700 clamp(20px, 4vw, 26px)/1.2 var(--font-b, system-ui); color: #fff; }
.dna-dlg p { margin: 0 0 10px; font: 400 15px/1.6 var(--mono); color: #c8d9f0; }
.dna-dlg .dna-dlg-only { margin: 0; color: #93a9c9; font-size: 13.5px; }
.dna-dlg-b { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.dna-dlg button { min-height: 46px; padding: 0 18px; border-radius: 8px; font: 700 15px var(--font-b, system-ui); cursor: pointer; }
.dna-dlg-no { color: #e6f1ff; background: rgba(62, 150, 255, .07); border: 1px solid rgba(62, 150, 255, .45); }
.dna-dlg-yes { color: #fff; background: linear-gradient(135deg, #6b0f22, #b3173a); border: 1px solid #ff3654; }
.dna-dlg button:disabled { opacity: .6; cursor: wait; }
.dna-dlg button:focus-visible { outline: 3px solid #3ec8ff; outline-offset: 3px; }
.dna-dlg [hidden] { display: none !important; }
.dna-req-f { display: block; margin-top: 16px; }
.dna-req-l { display: block; margin: 0 0 12px; font: 600 12.5px/1.4 var(--mono); letter-spacing: .04em; color: #9fb6d6; text-transform: uppercase; }
.dna-req-in { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; min-height: 46px; padding: 11px 12px; border-radius: 8px;
  border: 1px solid rgba(62, 150, 255, .35); background: rgba(4, 9, 18, .85); color: #e6f1ff; font: 400 15px/1.5 var(--mono); text-transform: none; letter-spacing: 0; }
textarea.dna-req-in { min-height: 94px; resize: vertical; }
.dna-req-hpw { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dna-req-msg { margin: 12px 0 0 !important; color: #ffb040 !important; }

/* wall */
.dnw { margin-top: 36px; }
.dnw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.dnw-list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 8px; text-decoration: none;
  background: #0a1222; color: #e6f1ff; border: 1px solid rgba(62, 150, 255, .22); transition: border-color .2s, transform .2s, box-shadow .2s; }
.dnw-list a:hover, .dnw-list a.cur { border-color: var(--own); box-shadow: 0 0 14px rgba(62, 150, 255, .25); transform: translateY(-2px); }
.dnw-g { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--sec); color: var(--sec);
  font: 800 16px ui-monospace, Menlo, monospace; background: rgba(5, 9, 18, .8); }
.dnw-g.bad { border-color: var(--cve); color: #ff8095; box-shadow: 0 0 12px rgba(255, 54, 84, .4); }
.dnw-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dnw-t { font: 700 15px/1.3 var(--font-b); overflow-wrap: anywhere; }
.dnw-d { font: 12px ui-monospace, Menlo, monospace; color: #93a9c9; overflow-wrap: anywhere; }

/* how it works */
.dnh { margin-top: 40px; }
.dnh-steps { margin: 14px 0 18px; padding-left: 1.3em; }
.dnh-steps li { margin: 0 0 10px; }
.dnh-steps b { display: block; }
.dnh-steps span { color: var(--muted); }

@media (max-width: 560px) {
  .dna-go { flex: 1 1 100%; }
  .dna-cv { height: 460px; }
  .dna-types li { grid-template-columns: 58px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dna-go, .dnl-r, .dna-caret, .dna-legend .k-cve .dna-dot, .dna-row.k-cve .dna-dot { animation: none !important; }
  .dnw-list a { transition: none; }
}
.dna-tech .dna-src { margin-left: 8px; }