:root {
  font-family: system-ui, sans-serif;
  color: #292720;
  background: #ded6c5;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }

.shell {
  width: min(920px, calc(100% - 32px));
  margin: 24px auto 48px;
  padding: 28px;
  background: #f7f3ea;
  border: 1px solid #c8bea9;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgb(50 42 28 / 12%);
}

.page-header { margin-bottom: 24px; }
.page-header p { color: #5f5749; }
.eyebrow { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 1.8rem; }
h2 { margin: 0 0 14px; font-size: 1rem; }
section { padding: 22px 0; border-top: 1px solid #d9d0bf; }
label { display: block; margin-top: 12px; color: #5f5749; font-size: 0.82rem; font-weight: 700; }
input, select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  color: #292720;
  background: #fff;
  border: 1px solid #b9ae99;
  border-radius: 5px;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid #86a9c8;
  outline-offset: 2px;
}
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
button { padding: 9px 14px; color: #fff; background: #264d76; border: 0; border-radius: 5px; cursor: pointer; }
button:hover { background: #173956; }
button.secondary { color: #264d76; background: #e2eaf0; }
.hint { margin: 6px 0 0; color: #6d6455; font-size: 0.76rem; line-height: 1.5; }
output { display: block; color: #655c4d; font: 0.76rem/1.45 ui-monospace, monospace; }
.candidate-list { margin-top: 10px; border: 1px solid #d0c6b3; border-radius: 6px; background: #fff; }
.candidate-empty { padding: 14px; color: #766c5a; font-size: 0.82rem; }
.candidate-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px; border-bottom: 1px solid #ece5d8; }
.candidate-item:last-child { border-bottom: 0; }
.candidate-item h3 { margin: 0; font-size: 0.9rem; }
.candidate-item p { margin: 4px 0 0; color: #675e50; font-size: 0.76rem; }
.candidate-actions { display: flex; gap: 6px; align-items: start; }
.candidate-actions button { padding: 6px 9px; font-size: 0.73rem; }
.candidate-actions .remove { color: #8a2e26; background: #f4ddd8; }
.hash-output { margin-top: 12px; overflow-wrap: anywhere; }
#status { margin: 10px 0 0; font-size: 0.82rem; }
#status[data-kind="ready"] { color: #2c674a; }
#status[data-kind="error"] { color: #a02f28; font-weight: 700; }

@media (max-width: 640px) {
  .shell { width: 100%; margin: 0; padding: 20px; border: 0; border-radius: 0; }
  .two-columns, .button-row { grid-template-columns: 1fr; }
  .candidate-item { grid-template-columns: 1fr; }
}