/* "Opening the detailed report" animation and the entry fade of the next page. */
.dr-lock { overflow: hidden; }
.dr { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #04030A; opacity: 0; animation: dr-in .25s ease-out forwards; }
.dr--out { animation: dr-out .5s ease-in forwards; }
.dr__rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr__win { position: relative; width: min(680px, calc(100vw - 32px)); border: 1px solid rgba(76, 242, 181, .45); border-radius: 14px; background: rgba(7, 4, 14, .86); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 60px rgba(76, 242, 181, .22), 0 30px 80px rgba(0, 0, 0, .7); backdrop-filter: blur(6px); overflow: hidden; transition: box-shadow .4s, border-color .4s; }
.dr--ok .dr__win { border-color: #4CF2B5; box-shadow: 0 0 90px rgba(76, 242, 181, .45), 0 30px 80px rgba(0, 0, 0, .7); }
.dr__bar { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font: 600 12.5px "JetBrains Mono", monospace; color: #8D84A5; }
.dr__body { margin: 0; padding: 16px 18px; min-height: 210px; font: 500 14px/1.65 "JetBrains Mono", ui-monospace, monospace; color: #DCD6EE; white-space: pre-wrap; overflow-wrap: anywhere; }
.dr__cur { color: #4CF2B5; animation: dr-blink .8s steps(2) infinite; }
.dr__progrow { display: flex; align-items: center; gap: 12px; padding: 0 18px 16px; }
.dr__prog { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dr__prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4CF2B5, #8FB8FF); box-shadow: 0 0 14px #4CF2B5; transition: width .12s linear; }
.dr__pct { font: 700 13px "JetBrains Mono", monospace; color: #4CF2B5; min-width: 4ch; text-align: right; }
.dr__skip { position: absolute; right: 18px; bottom: 18px; font: 600 13px "Manrope", sans-serif; color: #B1A9CB; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.dr__skip:hover, .dr__skip:focus-visible { color: #fff; border-color: #4CF2B5; outline: none; }
@keyframes dr-in { to { opacity: 1; } }
@keyframes dr-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes dr-blink { 50% { opacity: 0; } }

/* the page opened after the animation: starts dark, fades in */
.dr-entering body::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #04030A; opacity: 1; pointer-events: none; }
.dr-entering.dr-leaving body::before { opacity: 0; transition: opacity .7s ease-out; }

/* the brief popup (website scan and payment guard) */
.bm { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(4, 3, 10, .72); backdrop-filter: blur(10px) saturate(1.2); overflow-y: auto; animation: bm-fade .25s ease-out; }
.bm--out { animation: bm-fade .26s ease-in reverse forwards; }
.bm__card { --tone: var(--med); position: relative; width: min(640px, 100%); margin: auto; padding: 28px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 14%, var(--sheet)) 0%, var(--sheet) 46%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 80px color-mix(in srgb, var(--tone) 28%, transparent), 0 40px 90px rgba(0, 0, 0, .65); animation: bm-pop .55s cubic-bezier(.2, 1.15, .3, 1); overflow: hidden; }
.bm__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tone), transparent); animation: bm-scan 2.6s ease-in-out infinite; }
.bm--good { --tone: var(--pass); } .bm--warn { --tone: var(--med); } .bm--bad { --tone: var(--crit); }
.bm__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--slate); font: 400 22px/1 var(--body); cursor: pointer; transition: color .2s, border-color .2s, transform .2s; }
.bm__x:hover, .bm__x:focus-visible { color: var(--ink); border-color: var(--tone); transform: rotate(90deg); outline: none; }
.bm__head { display: flex; gap: 22px; align-items: center; padding-right: 36px; }
.bm__vis { position: relative; flex: none; width: 124px; height: 124px; display: grid; place-items: center; }
.bm__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.bm__ring-bg { fill: none; stroke: var(--line); stroke-width: 9; }
.bm__ring-fg { fill: none; stroke: var(--tone); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 7px var(--tone)); transition: stroke-dashoffset 1.2s cubic-bezier(.2, 1, .3, 1); }
.bm__mid { position: relative; text-align: center; line-height: 1; }
.bm__grade { display: block; font: 800 44px var(--display, var(--body)); color: var(--tone); text-shadow: 0 0 22px color-mix(in srgb, var(--tone) 60%, transparent); }
.bm__score { display: block; margin-top: 6px; font: 700 12.5px var(--mono); color: var(--slate); }
.bm__badge { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; border: 3px solid var(--tone); color: var(--tone); font: 800 17px var(--display, var(--body)); text-align: center; padding: 10px; box-shadow: 0 0 36px color-mix(in srgb, var(--tone) 40%, transparent), inset 0 0 22px color-mix(in srgb, var(--tone) 18%, transparent); animation: bm-pulse 2.4s ease-in-out infinite; }
.bm__title { margin: 0; font: 800 clamp(20px, 4.4vw, 26px)/1.15 var(--display, var(--body)); overflow-wrap: anywhere; }
.bm__headline { margin: 6px 0 0; color: var(--slate); font-size: 15.5px; }
.bm__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 22px 0 4px; }
.bm__stat { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); animation: bm-up .5s calc(.15s + var(--i, 0) * .07s) cubic-bezier(.2, 1, .3, 1) both; }
.bm__stat b { display: block; font: 800 28px var(--display, var(--body)); }
.bm__stat span { color: var(--muted); font-size: 13px; }
.bm__stat--critical b { color: var(--crit); } .bm__stat--high b { color: var(--high); } .bm__stat--medium b { color: var(--med); } .bm__stat--low b { color: var(--low); } .bm__stat--good b { color: var(--pass); }
.bm__h { margin: 22px 0 10px; font: 800 15px var(--display, var(--body)); }
.bm__issues { display: grid; gap: 10px; }
.bm__issue { padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--low); background: var(--surface-2); animation: bm-up .5s calc(.45s + var(--i, 0) * .1s) cubic-bezier(.2, 1, .3, 1) both; }
.bm__issue--critical { border-left-color: var(--crit); } .bm__issue--high { border-left-color: var(--high); } .bm__issue--medium { border-left-color: var(--med); }
.bm__issue b { display: block; font: 700 15px var(--body); }
.bm__issue span { display: block; margin-top: 3px; color: var(--slate); font-size: 14px; }
.bm__note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.bm__act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.bm__go::before { content: "</>"; font: 700 13px var(--mono); margin-right: 8px; opacity: .8; }
.bm__go { animation: bm-glow 2.2s ease-in-out infinite; }
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-pop { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bm-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bm-scan { 0%, 100% { transform: translateX(-60%); opacity: .2; } 50% { transform: translateX(60%); opacity: 1; } }
@keyframes bm-pulse { 50% { box-shadow: 0 0 56px color-mix(in srgb, var(--tone) 55%, transparent), inset 0 0 28px color-mix(in srgb, var(--tone) 24%, transparent); } }
@keyframes bm-glow { 50% { box-shadow: 0 14px 40px -8px rgba(76, 242, 181, .75); } }
.brief-reopen { margin-top: 14px; }
.brief-reopen[hidden] { display: none; }
@media (max-width: 520px) { .bm__card { padding: 22px 18px; } .bm__head { flex-direction: column; text-align: center; padding-right: 0; } .bm__act .btn { flex: 1 1 100%; } }

/* payment page: brief mode hides the tabs and every panel except the overview */
#pg-result.pg-brief { display: none !important; }
@media (prefers-reduced-motion: reduce) { .dr, .dr--out, .dr__cur, .bm, .bm__card, .bm__card::before, .bm__stat, .bm__issue, .bm__badge, .bm__go { animation: none !important; } .bm__ring-fg { transition: none; } .dr { opacity: 1; } .dr-entering.dr-leaving body::before { transition: none; } }