:root {
  --green: #1f6f3e;
  --red: #b3261e;
  --amber: #b8860b;
  --ink: #16332a;
  --bg: #f7f6f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar {
  background: var(--ink);
  color: white;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-logo { height: 32px; width: 32px; border-radius: 7px; }

.topbar nav a {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 0.9;
}
.topbar nav a:hover { opacity: 1; text-decoration: underline; }

/* --- development notice modal --- */
/* The [hidden] rule must come first / have equal-or-lower specificity than
   the base rule below relies on source order, so it's written as a higher-
   specificity override instead: without it, "display: flex" on the base
   class always wins over the browser's built-in "[hidden]{display:none}",
   because author CSS beats the UA stylesheet even at equal specificity —
   so toggling the `hidden` attribute in JS would silently do nothing. */
.notice-overlay[hidden] { display: none; }

.notice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.notice-box {
  background: white;
  border-radius: 12px;
  max-width: 480px;
  padding: 28px;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.notice-box h2 { margin-top: 0; font-size: 1.25rem; }
.notice-box p { color: #445; font-size: 0.95rem; line-height: 1.5; }

.notice-box button {
  margin-top: 12px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}

h1 { font-size: 2rem; margin-bottom: 4px; }
.subtitle { color: #556; margin-bottom: 32px; }

.search-row {
  display: flex;
  gap: 8px;
}

.search-row input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.search-row button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.divider { color: #999; margin: 20px 0; }

.upload-box {
  display: block;
  border: 2px dashed var(--green);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
}

.upload-box strong { display: block; color: var(--green); }
.upload-box span { color: #667; font-size: 0.9rem; }

.photo-slots {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.photo-slot {
  flex: 1;
  border: 1.5px dashed #bbb;
  border-radius: 8px;
  padding: 14px 8px;
  font-size: 0.85rem;
  color: #445;
  cursor: pointer;
  background: #fafaf8;
}
.photo-slot:hover { border-color: var(--green); }

.upload-box button#scan-submit {
  margin-top: 16px;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.upload-box button#scan-submit:disabled {
  background: #bbb;
  cursor: not-allowed;
}

#result { margin-top: 32px; text-align: left; }

.extracted-text summary,
.unmatched-group summary {
  cursor: pointer;
  font-weight: 600;
  color: #667;
}
.extracted-text p { color: #556; font-size: 0.9rem; white-space: pre-wrap; }

.examples { margin-top: 48px; text-align: left; }
.examples h2 { font-size: 1.1rem; margin-bottom: 2px; }
.examples-note { color: #889; font-size: 0.8rem; margin-top: 0; }
.example-cards .verdict-card { opacity: 0.85; }

.verdict-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: white;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
}

.status-halal { background: var(--green); }
.status-not_approved { background: var(--red); }
.status-doubtful { background: var(--amber); }
.status-unknown { background: #888; }

.opinion { font-size: 0.9rem; color: #445; margin-top: 4px; }
.disagree { color: var(--amber); font-weight: 600; }

footer {
  margin-top: 48px;
  font-size: 0.75rem;
  color: #889;
}

/* --- contact page --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  color: #445;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
}

.contact-form button[type="submit"] {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
.contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.status-ok { color: var(--green); font-weight: 600; }
.status-error { color: var(--red); font-weight: 600; }

/* honeypot — invisible to sighted users and screen readers, present for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}