v2.2.1: anti-slop flattening pass

- Remove scanline/vignette overlays, colored glows, gradient washes
- Replace stat card grids with single segmented strips (hairline dividers)
- Reverse-video active filters, button hovers, and match-chip hover
- Sharp corners, flat focus outlines, titled-border findings.log shell
- Regenerate store + preview screenshots from flattened UI

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to KeyFinder are documented here. Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Versioning follows [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2026-07-18
+
+### Changed
+- Anti-slop UI refinement: removed scanline/vignette overlays, colored glows, gradient washes, and card grids in favor of flat value-step surfaces, segmented stat strips with hairline dividers, sharp corners, reverse-video active states and hover emphasis, and a titled-border (`findings.log`) table shell — stricter terminal discipline throughout
+- Store listing screenshots regenerated from the flattened UI
+
 ## [2.2.0] - 2026-07-18
 
 ### Added

css/popup.css

@@ -1,18 +1,20 @@
 /* ============================================================
    KeyFinder — ops console popup
-   design system: dark instrument panel · amber = action
+   flat terminal discipline: value-step surfaces, 1px hairlines,
-   teal = recovered secrets · mono chrome · 1px hairlines
+   reverse-video emphasis, zero glow, zero surface effects
+   amber = action · teal = recovered secrets
    ============================================================ */
 
 :root {
   --bg:            #05070c;
-  --bg-raise:      #0a0e16;
+  --bg-raise:      #090d14;
-  --bg-overlay:    #101623;
+  --bg-overlay:    #0d131d;
   --line:          #1a2233;
   --line-strong:   #2a3650;
   --text:          #d6dde8;
   --text-dim:      #8b96a8;
   --text-faint:    #525d70;
+  --ink:           #05070c;
   --amber:         #f5a524;
   --amber-hot:     #ffc45c;
   --teal:          #45d0c4;
@@ -38,45 +40,24 @@ body {
   overflow-x: hidden;
 }
 
-/* vignette + scanlines — instrument-panel texture */
+::selection { background: var(--amber); color: var(--ink); }
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: radial-gradient(130% 90% at 50% -10%, rgba(245,165,36,.05) 0%, transparent 45%),
-              radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.5) 0%, transparent 55%);
-  pointer-events: none;
-  z-index: 0;
-}
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
-  pointer-events: none;
-  z-index: 60;
-}
-
-::selection { background: rgba(245,165,36,.28); color: #fff; }
 
 :focus-visible {
-  outline: none;
+  outline: 1px solid var(--amber);
-  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
+  outline-offset: 1px;
 }
 
 /* ------------------------------------------------ header */
 
 .header {
-  position: relative;
-  z-index: 1;
   padding: 14px 14px 12px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(245,165,36,.045) 0%, transparent 100%);
+  background: var(--bg-raise);
 }
 
 .header-brand { display: flex; align-items: center; gap: 11px; }
 
-/* radar: rotating sweep ring + teal blip around the key */
+/* radar: rotating sweep ring + blip around the key */
 .radar {
   position: relative;
   flex: none;
@@ -84,7 +65,7 @@ body::after {
   height: 38px;
   border-radius: 50%;
   border: 1px solid var(--line-strong);
-  background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
+  background: var(--bg);
   display: grid;
   place-items: center;
 }
@@ -94,7 +75,7 @@ body::after {
   inset: -1px;
   border-radius: 50%;
   background: conic-gradient(from 0deg,
-      rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 60deg, transparent 95deg);
+      var(--amber) 0deg, rgba(245,165,36,.15) 60deg, transparent 95deg);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
           mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
   animation: radar-sweep 4.2s linear infinite;
@@ -108,7 +89,6 @@ body::after {
   height: 3px;
   border-radius: 50%;
   background: var(--teal);
-  box-shadow: 0 0 6px var(--teal);
   animation: blip 2.1s ease-in-out infinite;
 }
 .header-icon { width: 20px; height: 20px; display: block; }
@@ -135,8 +115,7 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line);
   padding: 2px 5px;
-  border-radius: 2px;
+  background: var(--bg);
-  background: var(--bg-raise);
 }
 .version::before { content: "["; color: var(--line-strong); }
 .version::after  { content: "]"; color: var(--line-strong); }
@@ -148,9 +127,9 @@ body::after {
   color: var(--text-faint);
   white-space: nowrap;
 }
-.header-tagline::before { content: "// "; color: var(--amber); opacity: .7; }
+.header-tagline::before { content: "// "; color: var(--amber); }
 
-/* armed badge — pulsing status LED */
+/* armed badge — flat status LED */
 .live-badge {
   flex: none;
   display: inline-flex;
@@ -160,30 +139,25 @@ body::after {
   font-weight: 700;
   letter-spacing: .2em;
   color: var(--green);
-  border: 1px solid rgba(61,220,151,.32);
+  border: 1px solid rgba(61,220,151,.4);
-  background: rgba(61,220,151,.06);
   padding: 4px 7px 4px 6px;
-  border-radius: 2px;
 }
 .live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--green);
-  box-shadow: 0 0 8px var(--green);
   animation: pulse 1.5s ease-in-out infinite;
 }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
 
-/* ------------------------------------------------ stats */
+/* ------------------------------------------------ stats: one segmented strip, no cards */
 
 .stats {
-  position: relative;
-  z-index: 1;
   display: flex;
-  gap: 8px;
+  margin: 10px 14px;
-  padding: 10px 14px;
+  border: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  background: var(--bg-raise);
 }
 
 .stat-card {
@@ -192,22 +166,8 @@ body::after {
   flex-direction: column;
   gap: 4px;
   padding: 9px 11px 8px;
-  background: var(--bg-raise);
-  border: 1px solid var(--line);
-  border-radius: 3px;
-  position: relative;
-  overflow: hidden;
 }
-.stat-card::before {
+.stat-card + .stat-card { border-left: 1px solid var(--line); }
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, var(--accent, var(--amber)), transparent 70%);
-  opacity: .8;
-}
-.stat-findings { --accent: var(--amber); }
-.stat-keywords { --accent: var(--teal); }
 
 .stat-top { display: flex; align-items: center; gap: 6px; }
 
@@ -216,8 +176,9 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--accent, var(--amber));
-  box-shadow: 0 0 5px var(--accent, var(--amber));
 }
+.stat-findings { --accent: var(--amber); }
+.stat-keywords { --accent: var(--teal); }
 
 .stat-label {
   font-size: 8.5px;
@@ -237,7 +198,7 @@ body::after {
 
 /* ------------------------------------------------ watchlist */
 
-.section { position: relative; z-index: 1; padding: 12px 14px 10px; }
+.section { padding: 2px 14px 10px; }
 
 .section-title {
   font-size: 9px;
@@ -247,9 +208,14 @@ body::after {
   letter-spacing: .22em;
   margin-bottom: 9px;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 7px;
 }
+.section-title::after {
+  content: "";
+  flex: 1;
+  border-top: 1px dashed var(--line);
+}
 .section-sub {
   font-size: 8.5px;
   font-weight: 400;
@@ -264,13 +230,12 @@ body::after {
   align-items: stretch;
   background: var(--bg-raise);
   border: 1px solid var(--line-strong);
-  border-radius: 3px;
   margin-bottom: 8px;
   transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
 }
 .keyword-form:focus-within {
   border-color: var(--amber);
-  box-shadow: 0 0 0 1px rgba(245,165,36,.35), 0 0 18px rgba(245,165,36,.07);
+  box-shadow: 0 0 0 1px var(--amber);
 }
 
 .prompt {
@@ -301,9 +266,8 @@ body::after {
   margin: 3px;
   padding: 0 13px;
   background: var(--amber);
-  color: #120a00;
+  color: var(--ink);
   border: none;
-  border-radius: 2px;
   font-family: var(--mono);
   font-size: 10px;
   font-weight: 700;
@@ -317,17 +281,16 @@ body::after {
 
 .error-msg {
   padding: 6px 9px;
-  background: rgba(255,92,92,.07);
+  background: rgba(255,92,92,.08);
-  border: 1px solid rgba(255,92,92,.3);
+  border: 1px solid rgba(255,92,92,.35);
   border-left-width: 2px;
-  border-radius: 2px;
   color: var(--red);
   font-size: 10px;
   letter-spacing: .04em;
   margin-bottom: 8px;
   animation: shake .3s var(--ease);
 }
-.error-msg::before { content: "ERR // "; font-weight: 700; opacity: .7; }
+.error-msg::before { content: "ERR // "; font-weight: 700; }
 @keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-3px); }
@@ -350,9 +313,7 @@ body::after {
   align-items: center;
   gap: 9px;
   padding: 5px 7px;
-  border-radius: 2px;
+  transition: background .12s var(--ease);
-  border-left: 2px solid transparent;
-  transition: background .12s var(--ease), border-color .12s var(--ease);
 }
 .keyword-item::before {
   content: counter(kw, decimal-leading-zero);
@@ -361,10 +322,8 @@ body::after {
   letter-spacing: .05em;
   flex: none;
 }
-.keyword-item:hover {
+.keyword-item:hover { background: var(--bg-raise); }
-  background: var(--bg-raise);
+.keyword-item:hover .keyword-label { color: var(--teal); }
-  border-left-color: var(--teal);
-}
 
 .keyword-label {
   flex: 1;
@@ -374,6 +333,7 @@ body::after {
   white-space: nowrap;
   font-size: 11.5px;
   color: var(--text);
+  transition: color .12s var(--ease);
 }
 
 .keyword-remove {
@@ -388,15 +348,13 @@ body::after {
   font-size: 13px;
   line-height: 1;
   cursor: pointer;
-  border-radius: 2px;
   opacity: .45;
   transition: all .12s var(--ease);
 }
 .keyword-item:hover .keyword-remove { opacity: 1; }
 .keyword-remove:hover {
-  background: rgba(255,92,92,.1);
+  background: var(--red);
-  border-color: rgba(255,92,92,.35);
+  color: var(--ink);
-  color: var(--red);
 }
 
 .empty-state {
@@ -406,15 +364,12 @@ body::after {
   font-size: 10.5px;
   letter-spacing: .06em;
   border: 1px dashed var(--line-strong);
-  border-radius: 3px;
 }
 .empty-state::before { content: "[ empty watchlist ]"; display: block; margin-bottom: 2px; opacity: .6; }
 
 /* ------------------------------------------------ footer */
 
 .footer {
-  position: relative;
-  z-index: 1;
   padding: 10px 14px 14px;
   border-top: 1px solid var(--line);
 }
@@ -438,9 +393,9 @@ body::after {
   height: 11px;
   margin-left: 3px;
   background: var(--amber);
-  animation: cursor-blink 1s steps(1) infinite;
+  animation: cursor-blink 1.06s steps(1) infinite;
 }
-@keyframes cursor-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
+@keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
 
 .results-btn {
   display: flex;
@@ -449,9 +404,8 @@ body::after {
   gap: 8px;
   padding: 10px;
   background: var(--amber);
-  color: #120a00;
+  color: var(--ink);
   text-decoration: none;
-  border-radius: 3px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -467,7 +421,7 @@ body::after {
 
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: #1c2536; }
 ::-webkit-scrollbar-thumb:hover { background: #2a3650; }
 
 /* ------------------------------------------------ reduced motion */

css/results.css

@@ -1,18 +1,20 @@
 /* ============================================================
    KeyFinder — findings console
-   dark instrument panel · amber = action · teal = secrets
+   flat terminal discipline: value-step surfaces, 1px hairlines,
+   reverse-video emphasis, zero glow, zero surface effects
    severity scale: red > orange > yellow > teal
    ============================================================ */
 
 :root {
   --bg:            #05070c;
-  --bg-raise:      #0a0e16;
+  --bg-raise:      #090d14;
-  --bg-overlay:    #101623;
+  --bg-overlay:    #0d131d;
   --line:          #1a2233;
   --line-strong:   #2a3650;
   --text:          #d6dde8;
   --text-dim:      #8b96a8;
   --text-faint:    #525d70;
+  --ink:           #05070c;
   --amber:         #f5a524;
   --amber-hot:     #ffc45c;
   --teal:          #45d0c4;
@@ -39,40 +41,19 @@ body {
   font-feature-settings: "tnum";
 }
 
-/* vignette + scanlines */
+::selection { background: var(--amber); color: var(--ink); }
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: radial-gradient(130% 70% at 50% -10%, rgba(245,165,36,.05) 0%, transparent 45%),
-              radial-gradient(120% 100% at 50% 115%, rgba(0,0,0,.45) 0%, transparent 55%);
-  pointer-events: none;
-  z-index: 0;
-}
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
-  pointer-events: none;
-  z-index: 90;
-}
-
-::selection { background: rgba(245,165,36,.28); color: #fff; }
 
 :focus-visible {
-  outline: none;
+  outline: 1px solid var(--amber);
-  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
+  outline-offset: 1px;
 }
 
 /* ------------------------------------------------ header */
 
 .header {
-  position: relative;
-  z-index: 1;
   padding: 14px 24px 12px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(245,165,36,.04) 0%, transparent 100%);
+  background: var(--bg-raise);
   display: flex;
   flex-direction: column;
   gap: 11px;
@@ -96,7 +77,7 @@ body::after {
   height: 42px;
   border-radius: 50%;
   border: 1px solid var(--line-strong);
-  background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
+  background: var(--bg);
   display: grid;
   place-items: center;
 }
@@ -106,7 +87,7 @@ body::after {
   inset: -1px;
   border-radius: 50%;
   background: conic-gradient(from 0deg,
-      rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 60deg, transparent 95deg);
+      var(--amber) 0deg, rgba(245,165,36,.15) 60deg, transparent 95deg);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
           mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
   animation: radar-sweep 4.2s linear infinite;
@@ -120,7 +101,6 @@ body::after {
   height: 3px;
   border-radius: 50%;
   background: var(--teal);
-  box-shadow: 0 0 6px var(--teal);
   animation: blip 2.1s ease-in-out infinite;
 }
 .header-icon { width: 22px; height: 22px; display: block; }
@@ -145,8 +125,7 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line);
   padding: 2px 5px;
-  border-radius: 2px;
+  background: var(--bg);
-  background: var(--bg-raise);
 }
 .version::before { content: "["; color: var(--line-strong); }
 .version::after  { content: "]"; color: var(--line-strong); }
@@ -158,7 +137,7 @@ body::after {
   color: var(--text-faint);
   text-transform: uppercase;
 }
-.header-sub::before { content: "// "; color: var(--amber); opacity: .7; }
+.header-sub::before { content: "// "; color: var(--amber); }
 
 .live-badge {
   flex: none;
@@ -169,17 +148,14 @@ body::after {
   font-weight: 700;
   letter-spacing: .2em;
   color: var(--green);
-  border: 1px solid rgba(61,220,151,.32);
+  border: 1px solid rgba(61,220,151,.4);
-  background: rgba(61,220,151,.06);
   padding: 4px 8px 4px 7px;
-  border-radius: 2px;
 }
 .live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--green);
-  box-shadow: 0 0 8px var(--green);
   animation: pulse 1.5s ease-in-out infinite;
 }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@@ -198,15 +174,14 @@ body::after {
   display: flex;
   align-items: center;
   gap: 7px;
-  background: var(--bg-raise);
+  background: var(--bg);
   border: 1px solid var(--line-strong);
-  border-radius: 3px;
   padding: 0 8px;
   transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
 }
 .search-wrap:focus-within {
   border-color: var(--amber);
-  box-shadow: 0 0 0 1px rgba(245,165,36,.3), 0 0 18px rgba(245,165,36,.06);
+  box-shadow: 0 0 0 1px var(--amber);
 }
 .search-glyph { color: var(--amber); font-size: 13px; user-select: none; }
 .search-wrap input {
@@ -228,7 +203,6 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line-strong);
   border-bottom-width: 2px;
-  border-radius: 3px;
   padding: 1px 5px;
   user-select: none;
 }
@@ -242,7 +216,6 @@ body::after {
   text-transform: uppercase;
   letter-spacing: .1em;
   padding: 7px 12px;
-  border-radius: 3px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all .15s var(--ease);
@@ -255,17 +228,17 @@ body::after {
   color: var(--text-dim);
 }
 .btn-secondary:hover {
-  color: var(--amber-hot);
+  color: var(--ink);
+  background: var(--amber);
   border-color: var(--amber);
-  background: rgba(245,165,36,.06);
 }
 
 .btn-danger {
   background: transparent;
-  border-color: rgba(255,92,92,.35);
+  border-color: rgba(255,92,92,.4);
   color: var(--red);
 }
-.btn-danger:hover { background: rgba(255,92,92,.1); border-color: var(--red); }
+.btn-danger:hover { background: var(--red); border-color: var(--red); color: var(--ink); }
 
 /* ------------------------------------------------ filter row */
 
@@ -281,10 +254,8 @@ body::after {
 .filter {
   display: flex;
   align-items: center;
-  gap: 0;
+  background: var(--bg);
-  background: var(--bg-raise);
   border: 1px solid var(--line);
-  border-radius: 3px;
   overflow: hidden;
   transition: border-color .15s var(--ease);
 }
@@ -296,7 +267,6 @@ body::after {
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--amber);
-  background: rgba(245,165,36,.07);
   border-right: 1px solid var(--line);
   padding: 7px 7px 7px 9px;
   user-select: none;
@@ -330,16 +300,14 @@ body::after {
 }
 .meta-line strong { color: var(--text-dim); font-weight: 600; }
 
-/* ------------------------------------------------ stats bar */
+/* ------------------------------------------------ stats: one segmented strip, no cards */
 
 .stats-bar {
-  position: relative;
-  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  margin: 12px 24px;
-  padding: 12px 24px;
+  border: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  background: var(--bg-raise);
 }
 
 .stat-item {
@@ -349,23 +317,18 @@ body::after {
   flex-direction: column;
   gap: 4px;
   padding: 9px 12px 8px;
-  background: var(--bg-raise);
-  border: 1px solid var(--line);
-  border-radius: 3px;
   position: relative;
-  overflow: hidden;
+  transition: background .15s var(--ease);
-  transition: border-color .15s var(--ease), background .15s var(--ease);
-}
-.stat-item::before {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, var(--accent, var(--text-dim)), transparent 75%);
 }
+.stat-item + .stat-item { border-left: 1px solid var(--line); }
 .stat-item[data-filter] { cursor: pointer; }
-.stat-item[data-filter]:hover { background: var(--bg-overlay); border-color: var(--line-strong); }
+.stat-item[data-filter]:hover { background: var(--bg-overlay); }
-.stat-item.active { border-color: var(--accent, var(--amber)); box-shadow: 0 0 0 1px var(--accent, var(--amber)) inset; }
+
+/* reverse-video active filter */
+.stat-item.active { background: var(--accent, var(--amber)); }
+.stat-item.active .stat-num,
+.stat-item.active .stat-lbl { color: var(--ink); }
+.stat-item.active .stat-led { background: var(--ink); }
 
 .stat-total    { --accent: #d6dde8; }
 .stat-critical { --accent: var(--red); }
@@ -381,7 +344,6 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--accent, var(--text-dim));
-  box-shadow: 0 0 5px var(--accent, var(--text-dim));
 }
 .stat-critical .stat-led { animation: pulse 1.5s ease-in-out infinite; }
 
@@ -405,14 +367,12 @@ body::after {
 /* ------------------------------------------------ ticker */
 
 .ticker {
-  position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 24px;
+  border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
-  background: rgba(245,165,36,.03);
   font-size: 10px;
   letter-spacing: .05em;
   white-space: nowrap;
@@ -426,7 +386,6 @@ body::after {
   height: 5px;
   border-radius: 50%;
   background: var(--amber);
-  box-shadow: 0 0 6px var(--amber);
   animation: pulse 1.5s ease-in-out infinite;
 }
 .ticker-label {
@@ -443,50 +402,41 @@ body::after {
 }
 .ticker-text code { color: var(--teal); }
 
-/* ------------------------------------------------ table shell */
+/* ------------------------------------------------ table shell: titled border */
 
-.main { position: relative; z-index: 1; padding: 16px 24px 20px; }
+.main { padding: 14px 24px 20px; }
 
-.table-shell {
+.titled {
   position: relative;
   border: 1px solid var(--line);
-  border-radius: 4px;
+  background: var(--bg-raise);
-  background: rgba(10,14,22,.55);
 }
-/* HUD corner brackets */
+.titled-label {
-.table-shell::before,
-.table-shell::after {
-  content: "";
   position: absolute;
-  width: 9px;
+  top: -7px;
-  height: 9px;
+  left: 12px;
-  border: 0 solid var(--amber);
+  z-index: 3;
-  opacity: .55;
+  background: var(--bg);
-  pointer-events: none;
+  padding: 0 7px;
-}
-.table-shell::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
-.table-shell::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
-
-.shell-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--line);
-}
-.shell-title {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .18em;
   color: var(--text-dim);
   text-transform: uppercase;
+  line-height: 1.4;
 }
-.shell-title::before { content: "● "; color: var(--amber); font-size: 7px; vertical-align: 1.5px; }
+.titled-label::before { content: "● "; color: var(--amber); font-size: 7px; vertical-align: 1.5px; }
-.shell-meta {
+.titled-meta {
+  position: absolute;
+  top: -7px;
+  right: 12px;
+  z-index: 3;
+  background: var(--bg);
+  padding: 0 7px;
   font-size: 9px;
   letter-spacing: .1em;
   color: var(--text-faint);
+  line-height: 1.4;
 }
 
 .findings-table {
@@ -497,7 +447,7 @@ body::after {
 }
 
 .findings-table thead th {
-  padding: 8px 12px;
+  padding: 12px 12px 8px;
   text-align: left;
   font-size: 8.5px;
   font-weight: 700;
@@ -508,18 +458,18 @@ body::after {
   white-space: nowrap;
   position: sticky;
   top: 0;
-  background: var(--bg);
+  background: var(--bg-raise);
   z-index: 2;
 }
 
 .findings-table tbody tr {
-  border-bottom: 1px solid rgba(26,34,51,.5);
+  border-bottom: 1px solid rgba(26,34,51,.55);
   transition: background .1s var(--ease);
 }
 .findings-table tbody tr:last-child { border-bottom: none; }
-.findings-table tbody tr:hover { background: rgba(255,255,255,.022); }
+.findings-table tbody tr:hover { background: var(--bg-overlay); }
 
-/* severity accent on the row's leading edge */
+/* severity accent on the row's leading edge — functional color coding */
 .findings-table tbody tr td:first-child { box-shadow: inset 2px 0 0 transparent; }
 .findings-table tbody tr.sev-critical td:first-child { box-shadow: inset 2px 0 0 var(--red); }
 .findings-table tbody tr.sev-high     td:first-child { box-shadow: inset 2px 0 0 var(--orange); }
@@ -549,19 +499,17 @@ body::after {
 
 .td-num { color: var(--text-faint); font-size: 9.5px; }
 
-/* severity badge — LED + label */
+/* severity badge — flat LED + label */
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 8px 3px 7px;
-  border-radius: 2px;
   font-size: 8.5px;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--sev, var(--text-dim));
-  border: 1px solid color-mix(in srgb, var(--sev, #8b96a8) 38%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sev, #8b96a8) 45%, transparent);
-  background: color-mix(in srgb, var(--sev, #8b96a8) 8%, transparent);
 }
 .badge::before {
   content: "";
@@ -569,7 +517,6 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--sev, var(--text-dim));
-  box-shadow: 0 0 5px var(--sev, transparent);
 }
 .badge-critical { --sev: var(--red); }
 .badge-critical::before { animation: pulse 1.5s ease-in-out infinite; }
@@ -581,22 +528,20 @@ body::after {
 .type-badge {
   display: inline-block;
   padding: 2px 7px;
-  background: var(--bg-raise);
+  background: var(--bg);
   border: 1px solid var(--line);
-  border-radius: 2px;
   font-size: 9px;
   letter-spacing: .06em;
   color: var(--text-dim);
 }
 
-/* the recovered secret — teal mono chip, click to copy */
+/* the recovered secret — teal mono chip, reverse video on hover */
 .match-value {
   font-family: var(--mono);
   font-size: 10.5px;
-  background: rgba(69,208,196,.06);
+  background: var(--bg);
   padding: 3px 8px;
-  border-radius: 2px;
+  border: 1px solid rgba(69,208,196,.35);
-  border: 1px solid rgba(69,208,196,.22);
   color: var(--teal);
   max-width: 220px;
   display: inline-block;
@@ -607,9 +552,9 @@ body::after {
   transition: all .12s var(--ease);
 }
 .match-value:hover {
-  background: rgba(69,208,196,.12);
+  background: var(--teal);
   border-color: var(--teal);
-  box-shadow: 0 0 12px rgba(69,208,196,.12);
+  color: var(--ink);
 }
 
 .td-provider { font-weight: 700; color: var(--text); font-size: 10.5px; letter-spacing: .04em; max-width: 130px; }
@@ -618,8 +563,8 @@ body::after {
 .td-source   { max-width: 200px; }
 .td-time     { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
 
-a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed rgba(69,208,196,.35); }
+a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed rgba(69,208,196,.4); }
-a:hover { color: #8be8de; border-bottom-style: solid; }
+a:hover { color: var(--ink); background: var(--teal); border-bottom-color: var(--teal); }
 
 /* row actions — revealed on row hover */
 .td-actions { white-space: nowrap; text-align: right; }
@@ -629,7 +574,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   padding: 3px 8px;
   background: transparent;
   border: 1px solid var(--line-strong);
-  border-radius: 2px;
   color: var(--text-faint);
   font-size: 9px;
   font-weight: 700;
@@ -642,15 +586,14 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
 }
 .findings-table tbody tr:hover .btn-icon,
 .btn-icon:focus-visible { opacity: 1; }
-.btn-icon:hover { color: var(--amber-hot); border-color: var(--amber); background: rgba(245,165,36,.06); }
+.btn-icon:hover { color: var(--ink); background: var(--amber); border-color: var(--amber); }
-.btn-icon.copied { color: var(--green); border-color: var(--green); }
+.btn-icon.copied { color: var(--ink); background: var(--green); border-color: var(--green); }
-.btn-icon-danger:hover { color: var(--red); border-color: var(--red); background: rgba(255,92,92,.08); }
+.btn-icon-danger:hover { color: var(--ink); background: var(--red); border-color: var(--red); }
 
 /* skeleton loading rows */
 .skl-row td { padding: 9px 12px; }
 .skl {
   height: 9px;
-  border-radius: 2px;
   background: linear-gradient(90deg, #0c1119 25%, #151c2b 50%, #0c1119 75%);
   background-size: 200% 100%;
   animation: shimmer 1.15s linear infinite;
@@ -666,12 +609,12 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   color: var(--text-faint);
 }
 
-.empty-radar { width: 72px; height: 72px; margin-bottom: 18px; opacity: .8; }
+.empty-radar { width: 72px; height: 72px; margin-bottom: 18px; opacity: .85; }
 .er-ring  { fill: none; stroke: var(--line-strong); stroke-width: 1; }
 .er-cross { stroke: var(--line); stroke-width: 1; }
 .er-core  { fill: var(--teal); }
 .er-sweep {
-  fill: rgba(245,165,36,.14);
+  fill: rgba(245,165,36,.16);
   transform-origin: 36px 36px;
   animation: radar-sweep 4.2s linear infinite;
 }
@@ -695,7 +638,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   font-size: 9.5px;
   letter-spacing: .1em;
   color: var(--amber);
-  opacity: .75;
 }
 .empty-hint::before { content: "» "; }
 
@@ -708,7 +650,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   letter-spacing: .14em;
   color: var(--text-faint);
   text-transform: uppercase;
-  opacity: .7;
 }
 .footer-sep { margin: 0 8px; color: var(--line-strong); }
 
@@ -716,7 +657,7 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
 
 ::-webkit-scrollbar { width: 7px; height: 7px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 4px; }
+::-webkit-scrollbar-thumb { background: #1c2536; }
 ::-webkit-scrollbar-thumb:hover { background: #2a3650; }
 
 /* ------------------------------------------------ reduced motion */

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "name": "KeyFinder",
   "description": "Passively discovers API keys, tokens, and secrets leaked in page scripts, DOM, network responses, and browser storage. Available for Chrome and Firefox.",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "manifest_version": 3,
   "browser_specific_settings": {
     "gecko": {

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "KeyFinder",
   "description": "Passively discovers API keys, tokens, and secrets leaked in page scripts, DOM, network responses, and browser storage. Available for Chrome and Firefox.",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "manifest_version": 3,
   "action": {
     "default_icon": {

preview/preview-stub-empty.js

@@ -0,0 +1,46 @@
+// Preview-only stub for the chrome.* extension API with realistic sample data.
+// Loaded before the real popup.js / results.js in preview/*.html files.
+// NOT shipped — build.sh only copies the explicit SHARED_FILES list.
+(function () {
+  const NOW = Date.now();
+  const MIN = 60 * 1000;
+  const HOUR = 60 * MIN;
+  const DAY = 24 * HOUR;
+
+  const SAMPLE_FINDINGS = [
+    { id: "f1", severity: "critical", provider: "AWS", patternName: "AWS Access Key ID", match: "AKIAIOSFODNN7EXAMPLE", type: "inline-script", domain: "dashboard.acme.io", url: "https://dashboard.acme.io/assets/app.js", pageUrl: "https://dashboard.acme.io/", timestamp: NOW - 4 * MIN },
+    { id: "f2", severity: "critical", provider: "Stripe", patternName: "Stripe Live Secret Key", match: "sk_live_4eC39HqLyj…T1zdp7dc", type: "network-response", domain: "api.shopfront.dev", url: "https://api.shopfront.dev/v2/config", pageUrl: "https://shopfront.dev/", timestamp: NOW - 26 * MIN },
+    { id: "f3", severity: "critical", provider: "OpenAI", patternName: "OpenAI API Key", match: "sk-proj-abc123def456ghi789jkl", type: "web-storage", domain: "playground.internal.tools", url: "https://playground.internal.tools/", pageUrl: "https://playground.internal.tools/", timestamp: NOW - 2 * HOUR },
+    { id: "f4", severity: "high", provider: "GitHub", patternName: "GitHub Personal Access Token", match: "ghp_16C7e42F292c6912E7710c838347Ae178B4a", type: "html-comment", domain: "gitmirror.example.org", url: "https://gitmirror.example.org/login", pageUrl: "https://gitmirror.example.org/", timestamp: NOW - 3 * HOUR },
+    { id: "f5", severity: "high", provider: "Slack", patternName: "Slack Bot Token", match: "xoxb-17653672481-19874698323-pdLjLl…CwXgE", type: "inline-script", domain: "status.teamchat.app", url: "https://status.teamchat.app/embed.js", pageUrl: "https://status.teamchat.app/", timestamp: NOW - 5 * HOUR },
+    { id: "f6", severity: "high", provider: "MongoDB", patternName: "MongoDB Connection String", match: "mongodb+srv://admin:p4ssw0rd@cluster0.mongodb.net/prod", type: "data-attribute", domain: "metrics.saasly.co", url: "https://metrics.saasly.co/", pageUrl: "https://metrics.saasly.co/", timestamp: NOW - 9 * HOUR },
+    { id: "f7", severity: "high", provider: "DOM Scan", patternName: "Sensitive Meta Tag", match: "csrf-token=9f8e7d6c5b4a3210", type: "meta-tag", domain: "legacy.corpnet.com", url: "https://legacy.corpnet.com/index.html", pageUrl: "https://legacy.corpnet.com/", timestamp: NOW - 14 * HOUR },
+    { id: "f8", severity: "medium", provider: "Generic", patternName: "JSON Web Token (JWT)", match: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U", type: "url-param", domain: "auth.redirectlab.net", url: "https://auth.redirectlab.net/callback?token=eyJhbGciOi...", pageUrl: "https://redirectlab.net/", timestamp: NOW - 20 * HOUR },
+    { id: "f9", severity: "medium", provider: "DOM Scan", patternName: "Hidden Form Field", match: "session_id=a8f5f167f44f4964e6c998dee827110c", type: "hidden-input", domain: "shop.example.com", url: "https://shop.example.com/checkout", pageUrl: "https://shop.example.com/", timestamp: NOW - 1 * DAY },
+    { id: "f10", severity: "medium", provider: "URL Scan", patternName: "High-Entropy URL Parameter", match: "sig=4c4f6e6f2d9a4b8c8d7e6f5a4b3c2d1e", type: "url-param", domain: "cdn.medialab.io", url: "https://cdn.medialab.io/v/assets?sig=4c4f6e...", pageUrl: "https://medialab.io/", timestamp: NOW - 2 * DAY },
+    { id: "f11", severity: "medium", provider: "Web Storage", patternName: "localStorage Secret", match: "refresh_token=def502001a2b3c4d5e6f", type: "web-storage", domain: "app.notesync.dev", url: "https://app.notesync.dev/", pageUrl: "https://app.notesync.dev/", timestamp: NOW - 3 * DAY },
+    { id: "f12", severity: "low", provider: "Generic", patternName: "Keyword: client_id", match: "client_id=Iv1.8a61f9b3a7aba766", type: "script-src", domain: "login.oauthflow.app", url: "https://login.oauthflow.app/js/oauth.js?client_id=Iv1.8a61f9b3a7aba766", pageUrl: "https://login.oauthflow.app/", timestamp: NOW - 4 * DAY },
+  ];
+
+  const SAMPLE_KEYWORDS = [
+    "key", "api_key", "apikey", "api-key", "secret", "token",
+    "access_token", "auth", "credential", "password", "client_id", "client_secret",
+  ];
+
+  window.chrome = {
+    runtime: {
+      getManifest: () => ({ version: "2.2.1" }),
+      sendMessage: async (msg) => {
+        switch (msg && msg.type) {
+          case "getFindings": return { findings: [] };
+          case "getKeywords": return { keywords: SAMPLE_KEYWORDS.slice() };
+          case "addKeyword": return { ok: true };
+          case "removeKeyword": return { ok: true };
+          case "removeFinding": return { ok: true };
+          case "clearFindings": return { ok: true };
+          default: return {};
+        }
+      },
+    },
+  };
+})();

preview/preview-stub.js

@@ -29,7 +29,7 @@
 
   window.chrome = {
     runtime: {
-      getManifest: () => ({ version: "2.1.1" }),
+      getManifest: () => ({ version: "2.2.1" }),
       sendMessage: async (msg) => {
         switch (msg && msg.type) {
           case "getFindings": return { findings: SAMPLE_FINDINGS.slice() };

preview/results-preview-empty.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>KeyFinder — Findings Console</title>
+  <link rel="stylesheet" href="../css/results.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header-row">
+      <div class="header-left">
+        <span class="radar" aria-hidden="true">
+          <img src="../icons/icon48.png" alt="" class="header-icon">
+        </span>
+        <div class="brand-text">
+          <h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
+          <p class="header-sub">findings console</p>
+        </div>
+        <span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>PASSIVE</span>
+      </div>
+      <div class="header-actions">
+        <div class="search-wrap">
+          <span class="search-glyph" aria-hidden="true">&#9906;</span>
+          <input type="text" id="searchBox" placeholder="search findings…" autocomplete="off" spellcheck="false">
+          <kbd class="kbd" title="Press / to focus search">/</kbd>
+        </div>
+        <div class="btn-group">
+          <button id="exportJsonBtn" class="btn btn-secondary" title="Download filtered findings as JSON">&darr; JSON</button>
+          <button id="exportCsvBtn" class="btn btn-secondary" title="Download filtered findings as CSV">&darr; CSV</button>
+          <button id="clearBtn" class="btn btn-danger" title="Remove all findings">&times; Clear</button>
+        </div>
+      </div>
+    </div>
+    <div class="header-row header-row-filters">
+      <div class="filter-group">
+        <label class="filter">
+          <span class="filter-label">sev</span>
+          <select id="severityFilter">
+            <option value="all">all</option>
+            <option value="critical">critical</option>
+            <option value="high">high</option>
+            <option value="medium">medium</option>
+            <option value="low">low</option>
+          </select>
+        </label>
+        <label class="filter">
+          <span class="filter-label">type</span>
+          <select id="typeFilter">
+            <option value="all">all</option>
+          </select>
+        </label>
+        <label class="filter">
+          <span class="filter-label">provider</span>
+          <select id="providerFilter">
+            <option value="all">all</option>
+          </select>
+        </label>
+      </div>
+      <div class="meta-line" id="metaLine"></div>
+    </div>
+  </header>
+
+  <div class="stats-bar" id="statsBar"></div>
+
+  <div class="ticker" id="ticker" hidden>
+    <span class="ticker-dot" aria-hidden="true"></span>
+    <span class="ticker-label">LATEST</span>
+    <span class="ticker-text" id="tickerText"></span>
+  </div>
+
+  <main class="main">
+    <div class="table-shell">
+      <div class="shell-head">
+        <span class="shell-title">findings.log</span>
+        <span class="shell-meta" id="shellMeta"></span>
+      </div>
+      <table class="findings-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Severity</th>
+            <th>Provider</th>
+            <th>Pattern</th>
+            <th>Match</th>
+            <th>Type</th>
+            <th>Domain</th>
+            <th>Source</th>
+            <th>Time</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody id="findingsBody"></tbody>
+      </table>
+      <div id="emptyState" class="empty-state" hidden>
+        <svg class="empty-radar" viewBox="0 0 72 72" aria-hidden="true">
+          <circle cx="36" cy="36" r="30" class="er-ring"/>
+          <circle cx="36" cy="36" r="20" class="er-ring"/>
+          <circle cx="36" cy="36" r="10" class="er-ring"/>
+          <line x1="36" y1="6" x2="36" y2="66" class="er-cross"/>
+          <line x1="6" y1="36" x2="66" y2="36" class="er-cross"/>
+          <path d="M36 36 L36 6 A30 30 0 0 1 57.2 14.8 Z" class="er-sweep"/>
+          <circle cx="36" cy="36" r="2.5" class="er-core"/>
+        </svg>
+        <p class="empty-title" id="emptyTitle">No findings yet</p>
+        <p class="empty-copy" id="emptyCopy">KeyFinder passively scans every page you visit. Browse around — leaked keys, tokens and credentials will surface here.</p>
+        <p class="empty-hint">tip · add custom keywords from the extension popup</p>
+      </div>
+    </div>
+    <footer class="page-footer">
+      <span>local storage only</span>
+      <span class="footer-sep">·</span>
+      <span>5000-finding ring buffer</span>
+      <span class="footer-sep">·</span>
+      <span>no network egress</span>
+    </footer>
+  </main>
+
+  <script src="preview-stub-empty.js"></script>
+  <script src="../js/results.js"></script>
+</body>
+</html>

preview/results-preview.html

@@ -70,11 +70,9 @@
   </div>
 
   <main class="main">
-    <div class="table-shell">
+    <div class="table-shell titled">
-      <div class="shell-head">
+      <span class="titled-label">findings.log</span>
-        <span class="shell-title">findings.log</span>
+      <span class="titled-meta" id="shellMeta"></span>
-        <span class="shell-meta" id="shellMeta"></span>
-      </div>
       <table class="findings-table">
         <thead>
           <tr>

preview/store-popup.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>KeyFinder — store shot (popup)</title>
+  <link rel="stylesheet" href="../css/popup.css">
+  <link rel="stylesheet" href="store.css">
+</head>
+<body class="store">
+  <div class="stage">
+    <div class="copy">
+      <div class="kicker">KEYFINDER v2.2.1 — PASSIVE SCANNER</div>
+      <h1>Catch leaked keys<br>while you <em>browse</em>.</h1>
+      <p>KeyFinder passively scans every page for exposed API keys, tokens and credentials — across scripts, DOM, storage and network responses.</p>
+      <ul class="spec">
+        <li>80+ detection patterns · entropy analysis</li>
+        <li>10 attack surfaces · SPA-aware rescanning</li>
+        <li>local-only storage · zero config</li>
+      </ul>
+    </div>
+    <div class="popup-frame">
+<header class="header">
+    <div class="header-brand">
+      <span class="radar" aria-hidden="true">
+        <img src="../icons/icon48.png" alt="" class="header-icon">
+      </span>
+      <div class="brand-text">
+        <h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
+        <p class="header-tagline">passive secret discovery</p>
+      </div>
+      <span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>ARMED</span>
+    </div>
+  </header>
+
+  <section class="stats" id="stats">
+    <div class="stat-card stat-findings">
+      <span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Findings</span></span>
+      <span class="stat-number" id="findingCount">&ndash;</span>
+    </div>
+    <div class="stat-card stat-keywords">
+      <span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Keywords</span></span>
+      <span class="stat-number" id="keywordCount">&ndash;</span>
+    </div>
+  </section>
+
+  <section class="section">
+    <h2 class="section-title">Watchlist<span class="section-sub">// custom keywords</span></h2>
+    <form id="keywordForm" class="keyword-form">
+      <span class="prompt" aria-hidden="true">&#8250;</span>
+      <input
+        type="text"
+        id="keywordInput"
+        placeholder="add keyword, e.g. api_key"
+        autocomplete="off"
+        spellcheck="false"
+      >
+      <button type="submit" id="addBtn">Add</button>
+    </form>
+    <div id="errorMsg" class="error-msg" hidden></div>
+    <ul id="keywordList" class="keyword-list"></ul>
+  </section>
+
+  <footer class="footer">
+    <div class="term-line" aria-live="polite"><span class="term-text" id="termText"></span><span class="term-cursor" aria-hidden="true"></span></div>
+    <a href="../results.html" target="_blank" id="resultsLink" class="results-btn">
+      View Findings <span class="btn-arrow" aria-hidden="true">&rarr;</span>
+    </a>
+  </footer>
+    </div>
+  </div>
+  <script src="preview-stub.js"></script>
+  <script src="../js/popup.js"></script>
+</body>
+</html>

preview/store.css

@@ -0,0 +1,115 @@
+/* Store-listing composition backdrop (preview only, not shipped) */
+
+body.store {
+  width: auto;
+  min-width: 0;
+  background: #04060a;
+  overflow: hidden;
+}
+
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 72px;
+  width: 1280px;
+  height: 800px;
+  padding: 0 64px;
+}
+
+/* ambient depth: a single flat value step, no glow washes */
+.stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(700px 500px at 85% 80%, rgba(69,208,196,.045) 0%, transparent 65%);
+  pointer-events: none;
+}
+
+.copy { max-width: 560px; }
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .22em;
+  color: var(--green);
+  border: 1px solid rgba(61,220,151,.32);
+  background: rgba(61,220,151,.06);
+  padding: 5px 9px;
+  border-radius: 2px;
+  margin-bottom: 26px;
+}
+.kicker::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+
+.copy h1 {
+  font-size: 46px;
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: .01em;
+  color: #fff;
+  margin-bottom: 20px;
+}
+.copy h1 em {
+  font-style: normal;
+  color: var(--amber);
+}
+
+.copy p {
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-bottom: 26px;
+  max-width: 440px;
+}
+
+.spec {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.spec li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  letter-spacing: .08em;
+  color: var(--text-faint);
+  text-transform: uppercase;
+}
+.spec li::before {
+  content: "▸";
+  color: var(--teal);
+  font-size: 10px;
+}
+
+/* floating popup frame */
+.popup-frame {
+  position: relative;
+  flex: none;
+  width: 372px;
+  border: 1px solid var(--line-strong);
+  overflow: hidden;
+  box-shadow: 0 24px 80px rgba(0,0,0,.6);
+}
+.popup-frame::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(245,165,36,.6), transparent);
+  z-index: 2;
+}

results.html

@@ -70,11 +70,9 @@
   </div>
 
   <main class="main">
-    <div class="table-shell">
+    <div class="table-shell titled">
-      <div class="shell-head">
+      <span class="titled-label">findings.log</span>
-        <span class="shell-title">findings.log</span>
+      <span class="titled-meta" id="shellMeta"></span>
-        <span class="shell-meta" id="shellMeta"></span>
-      </div>
       <table class="findings-table">
         <thead>
           <tr>