/* ==========================================================================
   DROPSINT — tokens
   ========================================================================== */

:root {
  /* color */
  --bg-void:        #050505;
  --bg-panel:       #0c0a12;
  --bg-panel-raised:#15101f;
  --line:           #251a35;
  --line-soft:      #170f21;
  --ink:            #f5f3fa;
  --ink-dim:        #a79fbd;
  --ink-faint:      #8b83a1; /* ~5.6:1 on --bg-void — was #6b6280 at ~3.37:1, failing AA for the small labels/timestamps it's used on */
  --signal:         #a855f7;   /* violet — brand accent, links, active states */
  --signal-strong:  #c084fc;   /* lighter violet — hover, headline accent */
  --signal-deep:    #7c3aed;   /* deep violet — filled button / progress start */
  --signal-dim:     #a855f733;
  --signal-ink:     #ffffff;   /* text on filled violet */
  --live:           #d8b4fe;   /* pale lavender — reserved for "live" status only */

  /* type */
  --font-display: 'Archivo Expanded', 'Archivo', 'Arial Narrow', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --wrap: min(1180px, 100% - 3rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor jumps and scrollIntoView() from tucking a section's top
     edge — headings, the steam-result panel — behind the sticky header. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  z-index: 100;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* shared bits ------------------------------------------------------------ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kicker--muted { color: var(--ink-faint); }

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(216, 180, 254, 0.6);
  flex: none;
  animation: live-pulse 2.2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 180, 254, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(216, 180, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 180, 254, 0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--signal-deep);
  color: var(--signal-ink);
}
.btn--primary:hover { background: color-mix(in srgb, var(--signal-deep) 80%, white); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink-dim); }

.btn--small { padding: 0.55rem 1.1rem; font-size: 0.82rem; }

.btn--danger {
  background: transparent;
  border-color: #f87171;
  color: #f87171;
}
.btn--danger:hover { background: color-mix(in srgb, #f87171 12%, transparent); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-void) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
}
.wordmark__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
}
.wordmark__suffix { color: var(--signal); }
.wordmark--small { font-size: 0.95rem; }

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.site-nav a { text-decoration: none; color: var(--ink-dim); }
.site-nav a:hover { color: var(--ink); }

.header-credits {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--signal-strong);
  white-space: nowrap;
}
.header-credits[hidden] { display: none; }

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-end: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: relative;
  display: block;
  width: 1.05rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle__bar::before { position: absolute; top: -6px; width: 100%; }
.nav-toggle__bar::after  { position: absolute; top: 4px;  width: 100%; }

@media (max-width: 640px) {
  .site-header__row {
    position: relative;
    /* Logged-in state packs 4 items into this row (wordmark, hamburger,
       credits badge, Account button) — the default 2rem gap overflowed a
       375px viewport by ~70px. Tighter gap plus a wrap safety net so it
       degrades to two lines instead of clipping/scrolling if it's still
       ever too tight (a very long email-derived credits string, etc.). */
    flex-wrap: wrap;
    gap: 0.6rem;
    row-gap: 0.5rem;
  }

  .nav-toggle { display: inline-flex; }

  .wordmark { margin-inline-end: 0; }

  .header-credits { font-size: 0.75rem; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line-soft);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 0.95rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.hero__inner {
  max-width: 760px;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-block: 1.1rem 1.4rem;
  color: var(--ink);
}
.accent-text { color: var(--signal); }

.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 56ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}
.hero__ctas .btn { padding-block: 1rem; padding-inline: 1.75rem; font-size: 0.95rem; }

/* ==========================================================================
   Live counter bar
   ========================================================================== */

.counter-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(2.25rem, 5vw, 3rem);
}

.counter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.counter-bar__headline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.counter-bar__headline .live-dot { margin-top: 0.5rem; }

.counter-bar__headline h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.counter-bar__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.counter-bar__label {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.counter-bar__breakdown {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.counter-bar__stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(1.5rem, 4vw, 3rem);
}
.counter-bar__stat:first-child { border-inline-start: none; padding-inline-start: 0; }

.counter-bar__stat dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.counter-bar__stat dd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Search section
   ========================================================================== */

.search-section {
  padding-block: clamp(4rem, 9vw, 6.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.search-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-block: 0.6rem 2.5rem;
}

.search-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 720px;
}

.panel-body { padding: clamp(1.25rem, 3vw, 2rem); }

/* Terminal-window chrome — the signature frame for every real tool panel
   on the site (search, Dork builder, Steam/IP results): three status dots
   and a command-style title, like the shell this data actually came from. */
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: var(--bg-panel-raised);
  border-bottom: 1px solid var(--line);
}
.terminal-bar__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.terminal-bar__dot--red { background: #f87171; }
.terminal-bar__dot--yellow { background: #fbbf24; }
.terminal-bar__dot--green { background: #4ade80; }
.terminal-bar__label {
  margin-inline-start: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.search-tabs {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-tabs__tab {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 0.55rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.search-tabs__tab[aria-selected="true"] { color: var(--signal-ink); }
.search-tabs__tab:hover:not([aria-selected="true"]) { color: var(--ink); }

.search-tabs__thumb {
  position: absolute;
  z-index: 0;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: 0;
  background: var(--signal-deep);
  border-radius: 3px;
  transition: transform 0.28s var(--ease-out), width 0.28s var(--ease-out);
}

.search-form__field {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.search-form__input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.search-form__input {
  width: 100%;
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.9rem 2.75rem 0.9rem 1.1rem;
  transition: border-color 0.15s var(--ease-out);
}
.search-form__input::placeholder { color: var(--ink-faint); }
.search-form__input:focus { border-color: var(--signal); outline: none; }
.search-form__input.has-error { border-color: #f87171; }

.search-form__key {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  min-width: 1.4rem;
  padding: 0.15rem 0.35rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
}
.search-form__input:focus ~ .search-form__key { display: none; }
@media (hover: none) {
  .search-form__key { display: none; }
}

.search-form__submit { flex: none; min-width: 7.5rem; }
.search-form__submit:disabled { opacity: 0.65; cursor: default; }

.search-form__hint {
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.search-form__hint.is-error { color: #f87171; }
.search-form__hint.is-gate { color: var(--signal-strong); }

.search-progress { margin-top: 1.5rem; }

.search-progress__track {
  position: relative;
  height: 14px;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

/* ambient idle shimmer — the bar reads as "live" even before a search runs */
.search-progress__track::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.35), transparent);
  animation: progress-idle-scan 2.6s ease-in-out infinite;
}
@keyframes progress-idle-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.search-progress__fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--signal-deep), var(--signal-strong));
  border-radius: inherit;
  box-shadow: 0 0 12px 0 var(--signal-dim);
  transition: width 0.3s var(--ease-out);
  overflow: hidden;
}

/* moving diagonal stripes while a search is filling the bar */
.search-progress__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0 10px,
    transparent 10px 20px
  );
  background-size: 28px 28px;
  animation: progress-stripes 0.9s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .search-progress__track::before,
  .search-progress__fill::after { animation: none; }
}

/* input caret shown only while the auto-play demo is "typing" */
.search-form__input.is-typing { caret-color: var(--signal-strong); }

/* ==========================================================================
   Results feed — cards revealed as each module answers
   ========================================================================== */

.results-feed {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.results-feed__summary { margin-bottom: 1.25rem; }

.results-feed__summary-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.results-feed__summary-list {
  font-size: 0.95rem;
  color: var(--ink);
}

.results-export {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.results-feed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.result-card {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  animation: result-card-in 0.35s var(--ease-out) both;
}
@keyframes result-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .result-card { animation: none; }
}

.result-card--breach,
.result-card--stealer {
  grid-column: 1 / -1;
  background: color-mix(in srgb, #f87171 10%, var(--bg-panel-raised));
  border-color: color-mix(in srgb, #f87171 40%, var(--line));
}
.result-card--breach .result-card__name,
.result-card--stealer .result-card__name { color: #f87171; }

.stealer-note {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0.5rem 0 1rem;
}

.stealer-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stealer-entry {
  padding: 0.75rem 0.9rem;
  background: var(--bg-void);
  border: 1px solid color-mix(in srgb, #f87171 25%, var(--line));
  border-radius: var(--radius-sm);
}

.stealer-entry__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.stealer-entry__date {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}

.stealer-entry__family {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f87171;
  background: color-mix(in srgb, #f87171 15%, transparent);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
}

.stealer-entry__meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-bottom: 0.3rem;
}

.stealer-entry__stats {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.stealer-entry__logins {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  word-break: break-all;
  margin: 0;
}

.result-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.result-card__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.result-card__time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.result-card__row {
  display: flex;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.result-card__row span { color: var(--ink); word-break: break-all; }

.result-card__link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--signal-strong);
  text-decoration: none;
  word-break: break-all;
}
.result-card__link:hover { text-decoration: underline; }

/* Collapsed-by-default disclosure for sites that came back with no match —
   shown, not hidden, so the real miss count is always inspectable. */
.results-feed__missed {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.results-feed__missed summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.results-feed__missed summary:hover { color: var(--ink-dim); }
.results-feed__missed ul {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}
.results-feed__missed li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

/* ==========================================================================
   Dashboard — same search markup as the homepage demo, minus the marketing
   chrome: no terminal bar, no boxed panel, no idle progress bar.
   ========================================================================== */

.dashboard-search { max-width: 720px; }

.search-form__credit-note {
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.dashboard-tools-row {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.dashboard-tools-row a {
  color: var(--signal-strong);
  text-decoration: none;
}
.dashboard-tools-row a:hover { text-decoration: underline; }

/* ==========================================================================
   Tools grid
   ========================================================================== */

.tools-section {
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

.tools-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-block: 0.6rem 1rem;
}

.tools-section__sub {
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 2.75rem;
}

.tools-grid {
  /* Flexbox rather than a fixed grid: the tool count doesn't divide evenly
     into neat rows, and a wrapped flex line stretches its last row to fill
     the space instead of leaving a ragged empty cell like a fixed grid would. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tool-card {
  flex: 1 1 240px;
  background: var(--bg-panel);
  padding: 1.5rem;
  transition: background-color 0.2s var(--ease-out);
}
.tool-card:hover { background: var(--bg-panel-raised); }

/* cards that actually go somewhere get the padding moved onto the <a> so
   the whole tile is clickable, plus a hover/focus affordance the plain
   info-only cards deliberately don't have */
.tool-card--link { padding: 0; }

.tool-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease-out);
}
.tool-card__link:hover,
.tool-card__link:focus-visible {
  background: var(--bg-panel-raised);
}
.tool-card__link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.tool-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding-inline: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--signal);
  margin-bottom: 1rem;
}

.tool-card__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.tool-card__desc {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.tool-card__arrow {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--font-mono);
  color: var(--signal);
  transition: transform 0.2s var(--ease-out);
}
.tool-card__link:hover .tool-card__arrow,
.tool-card__link:focus-visible .tool-card__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Tool page shell — shared by /dork, /steam, /ip, /account, /dashboard,
   /history, /modules
   ========================================================================== */

.tool-page { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 6.5rem); }

.tool-page__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
  text-decoration: none;
  margin-bottom: 2rem;
}
.tool-page__back:hover { color: var(--ink); }

.tool-page__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  margin-block: 0.6rem 1rem;
}

.tool-page__sub {
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   Google Dork builder
   ========================================================================== */

.dork-builder {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 780px;
}

.dork-builder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dork-builder__grid label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dork-builder__grid input,
.dork-builder__grid select {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.7rem 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}
.dork-builder__grid input::placeholder { color: var(--ink-faint); }
.dork-builder__grid input:focus,
.dork-builder__grid select:focus { border-color: var(--signal); outline: none; }

.dork-recipes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.dork-recipe {
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.dork-recipe:hover { color: var(--ink); border-color: var(--ink-dim); }
.dork-recipe:active { color: var(--signal-strong); border-color: var(--signal); }
.dork-recipe.is-active {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
  color: var(--signal-ink);
}
.dork-recipe.is-active:hover { color: var(--signal-ink); }

.dork-preview {
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}

.dork-preview__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.dork-preview__query {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--signal-strong);
  word-break: break-word;
  line-height: 1.5;
}

.dork-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dork-actions .btn:disabled { opacity: 0.5; cursor: default; }

/* ==========================================================================
   Steam Account Viewer / IP Lookup shared result panels
   ========================================================================== */

.steam-search {
  display: flex;
  gap: 0.75rem;
  max-width: 560px;
  margin-bottom: 2.5rem;
}
.steam-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.9rem 1.1rem;
}
.steam-search input::placeholder { color: var(--ink-faint); }
.steam-search input:focus { border-color: var(--signal); outline: none; }
.steam-search .btn { flex: none; min-width: 7.5rem; }

.steam-result {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  overflow: hidden;
}
.steam-result[hidden] { display: none; }

.steam-result__header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line-soft);
}

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--signal-deep), var(--bg-void));
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}
.avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
  border-radius: 4px;
}

.steam-result__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
}

.steam-result__updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

.steam-id-list {
  /* Flexbox rather than grid: an odd number of fields (IP Lookup has 10,
     Steam has 10 too, but either can vary) left a highlighted empty ghost
     cell in the last row under CSS grid's fixed tracks — same class of bug
     already fixed on .tools-grid. A wrapped flex line stretches instead. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line-soft);
}

.steam-id-row {
  flex: 1 1 260px;
  background: var(--bg-panel);
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
}

.steam-id-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.steam-id-row dd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
}
.steam-id-row dd a { color: var(--signal-strong); word-break: break-all; }
.steam-id-row dd code { word-break: break-all; }

.copy-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.copy-btn.is-copied { color: var(--live); border-color: var(--live); }

.steam-panel {
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--line-soft);
}

.steam-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.steam-panel h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.steam-panel__filter {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.5rem 0.8rem;
  min-width: 200px;
}
.steam-panel__filter::placeholder { color: var(--ink-faint); }
.steam-panel__filter:focus { border-color: var(--signal); outline: none; }

.steam-vac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.steam-vac-stat {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}
.steam-vac-stat dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.status-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
}
.status-flag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-flag--clean { color: var(--ink); }
.status-flag--clean::before { background: var(--live); }
.status-flag--banned { color: #f87171; }
.status-flag--banned::before { background: #f87171; }

/* /history — same dot-plus-label pattern, generic outcomes instead of
   Steam-specific ban states. */
.status-flag--found { color: var(--ink); }
.status-flag--found::before { background: var(--live); }
.status-flag--not-found { color: var(--ink-faint); }
.status-flag--not-found::before { background: var(--ink-faint); }
.status-flag--error { color: #f87171; }
.status-flag--error::before { background: #f87171; }
.status-flag--pending { color: var(--ink-faint); }
.status-flag--pending::before { background: var(--signal); }

.table-scroll { overflow-x: auto; }

.steam-panel table,
#history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.steam-panel th,
#history-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0.75rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.steam-panel td,
#history-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.steam-panel tbody tr.is-filtered-out { display: none; }
.steam-panel td.steam-cell--name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.steam-panel td.steam-cell--empty {
  text-align: center;
  color: var(--ink-faint);
  padding-block: 1.5rem;
}

.table-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.page-btn {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-width: 1.8rem;
  padding: 0.25rem 0.5rem;
  cursor: default;
}
.page-btn.is-active { color: var(--signal-strong); border-color: var(--signal); }

/* ==========================================================================
   /history
   ========================================================================== */

.history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.history-result {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.history-actions {
  display: flex;
  gap: 0.6rem;
  white-space: nowrap;
}
.history-actions a,
.history-actions button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--signal-strong);
  text-decoration: none;
  cursor: pointer;
}
.history-actions a:hover,
.history-actions button:hover { text-decoration: underline; }
.history-actions button.is-danger { color: #f87171; }

/* ==========================================================================
   /account — danger zone
   ========================================================================== */

.account-danger {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}

.account-danger__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f87171;
  margin-bottom: 0.6rem;
}

.account-danger__desc {
  font-size: 0.9rem;
  color: var(--ink-dim);
  margin-bottom: 1rem;
  max-width: 46ch;
}

.account-delete-confirm { margin-top: 1rem; }

/* ==========================================================================
   Modules page
   ========================================================================== */

.modules-group {
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.modules-group:first-child { border-top: none; padding-top: 0; }

.modules-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.modules-group__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.modules-group__count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-inline-start: 0.6rem;
}

.modules-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modules-subgroups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modules-subgroup__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.modules-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.modules-chip.is-filtered-out { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding-block: 2.5rem; }

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer p {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
  .counter-bar__inner { flex-direction: column; align-items: flex-start; }
  .search-form__field { flex-direction: column; }
  .search-form__submit { width: 100%; }
}

/* ============================================================= *
 * /records — breach records (snusbase) + Discord-ID (restorecord)
 * ============================================================= */

.records-search { flex-wrap: wrap; max-width: 720px; }
.records-search__type {
  flex: none;
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.9rem 1.1rem;
}
.records-search__type:focus { border-color: var(--signal); outline: none; }

.records-result { margin-top: 1.75rem; }
.records-result__label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
}
.records-result__subhead {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-strong);
  margin: 1.5rem 0 0.6rem;
}

.records-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
}
.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.records-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.records-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  vertical-align: top;
  word-break: break-word;
}
.records-table tbody tr:last-child td { border-bottom: none; }

.records-pre {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}