:root {
  --deep: #1a5b92;
  --bright: #3da1bc;
  --paper: #f4f1ea;
  --ink: #141c26;
  --muted: #5c6b7a;
  --line: rgba(20, 28, 38, 0.12);
  --card: #fffcf7;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(61, 161, 188, 0.18), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}
a { color: inherit; }
button, input, select { font: inherit; }
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 28px;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: Fraunces, serif; font-size: 22px; text-decoration: none; }
.brand span { color: var(--deep); }
nav { display: flex; gap: 16px; flex: 1; }
nav a { text-decoration: none; color: var(--muted); }
nav a.on { color: var(--ink); }
#wallet {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--deep);
  color: white;
  cursor: pointer;
}
main { max-width: 720px; margin: 0 auto; padding: 36px 20px 64px; }
h1 { font-family: Fraunces, serif; font-weight: 560; font-size: 40px; line-height: 1.1; margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 22px; }
#files { display: grid; gap: 14px; }
.card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
input, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
}
.row { display: flex; flex-wrap: wrap; gap: 10px; }
button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--deep);
  color: white;
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--deep); border: 1px solid var(--line); }
button:disabled { opacity: 0.5; }
.status { margin: 0 0 16px; }
.status.bad, .bad { color: #93000a; }
.result p { margin: 0; }
.result span { display: block; color: var(--muted); font-size: 13px; }
footer { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; color: var(--muted); }
@media (max-width: 720px) {
  .top { flex-wrap: wrap; padding: 14px 16px; }
  h1 { font-size: 32px; }
}