/* The same palette and the same footer as the tools it links to, on purpose: someone who
   arrives here from remover.hoanlab.com should not feel they have left the site. Copied rather
   than shared, because a two-page site does not earn a build step, and a stylesheet fetched
   across origins would make this page wait on another one. */
:root {
  --bg: #0b0f17;
  --panel: #121826;
  --panel-2: #171f30;
  --line: #223049;
  --text: #e6edf7;
  --muted: #8b9bb4;
  --accent: #3b82f6;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* A column the full height of the viewport so the footer sits at the bottom on a short page
   and is scrolled to on a long one. Narrower than the tool page: that one holds a grid of
   image cards, this one holds a list, and a list stretched to 1500px is unreadable. */
.wrap {
  max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 2rem;
  min-height: 100dvh; display: flex; flex-direction: column;
}

header { text-align: center; margin-bottom: 2.5rem; flex: none; }
.brand { display: flex; align-items: center; justify-content: center; gap: .75rem; }
/* Pixel art, so it is scaled by whole pixels and never smoothed into mush. */
.brand img { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.brand-text { text-align: left; }
header h1 { margin: 0; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.tagline { margin: .15rem 0 0; color: var(--muted); }

main { flex: 1; }

.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.tool {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem 1.35rem;
  transition: border-color .15s, background .15s;
}
.tool:hover { border-color: #2e4066; background: var(--panel-2); }

/* min-width: 0 so the text column may shrink below its longest line. Without it a flex item
   refuses to go under its content width and the button gets pushed off the card. */
.tool-main { flex: 1; min-width: 0; }
.tool h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.tool-what { margin: .2rem 0 0; }
.tool-more { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.tool-more strong { color: var(--text); font-weight: 600; }

.tool-open {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 9px;
  padding: .55rem 1.1rem; font-weight: 600; font-size: .95rem;
  transition: filter .15s;
}
.tool-open:hover { filter: brightness(1.12); }
.tool-open svg { width: 1em; height: 1em; }

/* Below this the button no longer fits beside the text without squeezing both. Stacking it
   full-width also gives it a bigger tap target, which is the right trade on a phone. */
@media (max-width: 560px) {
  .tool { flex-direction: column; align-items: stretch; gap: .9rem; }
  .tool-open { justify-content: center; padding: .7rem 1.1rem; }
}

footer { margin-top: auto; padding-top: 3rem; text-align: center; color: var(--muted); font-size: .82rem; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 1rem; }
.foot-legal p { margin: 0 0 .3rem; }
.foot-legal p:last-child { margin-bottom: 0; }
.foot-legal a { color: var(--muted); text-decoration: underline; }
.foot-legal a:hover { color: var(--text); }

/* ── 404 ───────────────────────────────────────────────────────────────────
   The brand block becomes a link on this page, so it needs the anchor reset the
   landing page never required. */
a.brand { text-decoration: none; color: inherit; }

.notfound {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 2.5rem 1.5rem; text-align: center;
}
/* Large but muted. The number is a label, not the message -- someone who is lost needs the
   sentence under it and the way out below that, so the digits must not be the loudest thing. */
.notfound-code {
  margin: 0; font-size: 3.5rem; font-weight: 700; line-height: 1;
  color: var(--line); letter-spacing: -.03em;
}
.notfound h2 { margin: .6rem 0 0; font-size: 1.2rem; letter-spacing: -.01em; }
.notfound-path { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }
/* A BLOCK, not an inline fragment. A pasted URL can be arbitrarily long and has no spaces to
   wrap at, so it must be told where it may break -- but an inline box that wraps is redrawn
   per line, and on a phone one path became five ragged boxes of different widths, which reads
   as a rendering fault rather than as a path. One box, left-aligned so the wrapped lines line
   up, and the address stays the calm part of a page someone reached by accident. */
.notfound-path code {
  display: block; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .7rem; overflow-wrap: anywhere; line-height: 1.5;
}
.notfound-links {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem;
}
.notfound-alt {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  padding: .55rem 1.1rem; font-weight: 600; font-size: .95rem;
  color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s;
}
.notfound-alt:hover { color: var(--text); border-color: var(--muted); }