:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #14213d;
  --ink-muted: #5b6478;
  --line: #dfe3ea;
  --accent: #1d3557;
  --add: #e7f6ec;
  --del: #fdecea;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.25rem;
  background: var(--accent); color: #fff;
}
.brand { color: #fff; text-decoration: none; font-weight: 600; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.card.narrow { max-width: 26rem; }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.muted { color: var(--ink-muted); }
label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=password], input[type=file] {
  width: 100%; padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: 6px; font-size: 16px;
}
button, .button {
  display: inline-block; margin-top: 1rem; padding: .6rem 1.1rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.link { background: none; border: 0; color: #fff; text-decoration: underline; margin: 0; }
.alert {
  background: var(--del); border: 1px solid #f5c6c2;
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { font-size: .85rem; text-transform: uppercase; color: var(--ink-muted); }
.ok { color: #1b6b3a; font-weight: 600; }
.bad { color: #a4231c; font-weight: 600; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.diff pre {
  margin: 0; padding: .6rem .7rem; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 6px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
}
.diff .before { background: var(--del); }
.diff .after { background: var(--add); }
details { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .6rem; background: var(--surface); }
summary { cursor: pointer; font-weight: 600; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 760px) { .diff { grid-template-columns: 1fr; } }