:root {
  --bg: #fbf7f0;
  --fg: #2a2522;
  --muted: #6b6259;
  --accent: #8b3a2f;
  --accent-2: #c87a4a;
  --card: #ffffff;
  --line: #e6dccb;
  --hit: #f2ead7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 "Iowan Old Style", "Cambria", Georgia, "Times New Roman", serif; }
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 18px 64px; }
header h1 { font-size: 30px; margin: 0 0 6px; color: var(--accent); letter-spacing: 0.2px; }
header .sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
header .sub code { font-size: 12px; background: var(--hit); padding: 1px 6px; border-radius: 4px; }

.searchbox { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.searchbox form, .searchbox .hints { display: flex; gap: 8px; }
.searchbox .hints { margin-top: 10px; font-size: 14px; color: var(--muted); }
.searchbox input[type=search], .searchbox input[type=text] {
  flex: 1; padding: 10px 12px; font: inherit; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.searchbox input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(200,122,74,0.18); }
.searchbox button {
  padding: 10px 16px; font: inherit; cursor: pointer;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
}
.searchbox button:hover { background: #6f2e25; }
.searchbox button#ref-btn { background: var(--accent-2); }
.searchbox button#ref-btn:hover { background: #a96538; }

.status { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.status.info    { background: #eef3ff; color: #1e3a8a; }
.status.error   { background: #fde7e7; color: #8a1e1e; }
.status.loading { background: #fff7e0; color: #6b4a00; }

.results { margin-top: 16px; display: grid; gap: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; }
.card .ref { font-size: 13px; color: var(--accent); font-weight: 600; }
.card .ref .score { float: right; color: var(--muted); font-weight: 400; }
.card .text { margin-top: 4px; }
.card mark { background: var(--hit); padding: 0 2px; border-radius: 2px; }

footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

@media (max-width: 520px) {
  .searchbox form, .searchbox .hints { flex-wrap: wrap; }
  .searchbox .hints > span { width: 100%; }
}