:root {
  --lookup-bg: #f7faf4;
  --lookup-surface: #ffffff;
  --lookup-ink: #10291f;
  --lookup-muted: #5c6f65;
  --lookup-green: #155c3a;
  --lookup-green-dark: #0e472d;
  --lookup-gold: #c8a342;
  --lookup-gold-soft: #e9dbac;
  --lookup-line: #d7dfd9;
  --lookup-error: #9e332c;
  --lookup-info: #315f4c;
  --lookup-shadow: 0 22px 52px rgba(17, 57, 39, 0.12);
  --lookup-radius: 20px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.member-lookup-page {
  min-height: 100vh;
  margin: 0;
  color: var(--lookup-ink);
  font-family: 'Sarabun', sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(229, 238, 222, 0.82), transparent 31%),
    radial-gradient(circle at 84% 68%, rgba(235, 242, 226, 0.76), transparent 35%),
    var(--lookup-bg);
  overflow-x: hidden;
}

.lookup-shell {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 26px;
}

.lookup-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.lookup-brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.lookup-brand p {
  margin: 0;
  font-family: 'Noto Serif Thai', serif;
  font-size: clamp(1.08rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--lookup-green-dark);
}

.lookup-intro { text-align: center; }

.lookup-intro h1 {
  margin: 0;
  font-family: 'Noto Serif Thai', serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--lookup-green-dark);
}

.lookup-intro p {
  margin: 8px 0 22px;
  font-size: 1.12rem;
  color: #3f4e47;
}

.lookup-panel,
.lookup-result__card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(21, 92, 58, 0.08);
  border-radius: var(--lookup-radius);
  background: var(--lookup-surface);
  box-shadow: var(--lookup-shadow);
}

.lookup-field + .lookup-field { margin-top: 20px; }

.lookup-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 1rem;
  font-weight: 700;
}

.lookup-field__hint {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lookup-muted);
}

.lookup-field input,
.lookup-field select {
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  border: 1px solid #cbd5cf;
  border-radius: 12px;
  outline: none;
  color: var(--lookup-ink);
  background: #fff;
  font: 500 1rem/1.4 'Sarabun', sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lookup-field select {
  appearance: none;
  padding-right: 46px;
}

.lookup-field input:focus,
.lookup-field select:focus {
  border-color: var(--lookup-green);
  box-shadow: 0 0 0 4px rgba(21, 92, 58, 0.12);
}

.select-wrap { position: relative; }

.select-wrap svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--lookup-green-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lookup-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 13px 20px;
  border: 1px solid var(--lookup-green);
  border-radius: 12px;
  color: #fff;
  background: var(--lookup-green);
  box-shadow: 0 10px 24px rgba(21, 92, 58, 0.18);
  font: 700 1.05rem/1.35 'Sarabun', sans-serif;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.lookup-button:hover {
  background: var(--lookup-green-dark);
  box-shadow: 0 13px 28px rgba(21, 92, 58, 0.22);
  transform: translateY(-1px);
}

.lookup-button:focus-visible {
  outline: 3px solid rgba(200, 163, 66, 0.45);
  outline-offset: 3px;
}

.lookup-button:disabled { cursor: wait; opacity: 0.72; transform: none; }

.lookup-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lookup-button--secondary {
  color: var(--lookup-green-dark);
  background: #fff;
  box-shadow: none;
}

.lookup-button--secondary:hover { color: #fff; }

.lookup-status {
  min-height: 0;
  margin: 16px 0 0;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.lookup-status:not(:empty) { padding: 11px 13px; }
.lookup-status--error { color: var(--lookup-error); background: #fff1ef; }
.lookup-status--info { color: var(--lookup-info); background: #edf6f0; }

.lookup-challenge { margin-top: 18px; }

.lookup-result__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.lookup-result:focus { outline: none; }

.lookup-result__heading h2 {
  margin: 0;
  font-family: 'Noto Serif Thai', serif;
  font-size: clamp(1.55rem, 3.8vw, 2.1rem);
  color: var(--lookup-green-dark);
}

.success-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid var(--lookup-green);
  border-radius: 50%;
  color: var(--lookup-green);
}

.success-mark svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lookup-result__card { text-align: center; }
.result-label { margin: 0; color: var(--lookup-green-dark); font-weight: 700; }
.result-name { margin: 3px 0 0; font-size: 1.65rem; font-weight: 700; }

.result-code {
  margin: 4px 0 20px;
  overflow-wrap: anywhere;
  font-family: 'Noto Serif Thai', serif;
  font-size: clamp(2rem, 7vw, 3.45rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.04em;
  color: var(--lookup-green);
}

.gold-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--lookup-gold);
}

.gold-divider::before,
.gold-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--lookup-gold-soft);
}

.lookup-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 5px;
  color: #3b664f;
}

.lookup-privacy svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lookup-privacy p { margin: 0; font-size: 0.95rem; }

.support-link {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  color: #1748a0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-link:hover { color: #0d337a; }

.lookup-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 25px;
  color: #77827c;
  text-align: center;
}

.lookup-footer span { height: 1px; background: var(--lookup-gold-soft); }
.lookup-footer p { margin: 0; font-size: 0.8rem; }

.suit-motif {
  position: fixed;
  z-index: 0;
  color: rgba(31, 92, 58, 0.055);
  font-family: Georgia, serif;
  line-height: 0.9;
  user-select: none;
}

.suit-motif--left { bottom: 2%; left: -20px; font-size: 15rem; transform: rotate(-8deg); }
.suit-motif--right { top: 7%; right: -10px; font-size: 8.5rem; text-align: center; }

@media (max-width: 640px) {
  .lookup-shell { width: min(100% - 24px, 720px); padding-top: 20px; }
  .lookup-brand { align-items: center; gap: 10px; }
  .lookup-brand img { width: 52px; height: 52px; }
  .lookup-brand p { max-width: 280px; font-size: 0.95rem; }
  .lookup-intro p { margin-bottom: 18px; font-size: 1rem; }
  .lookup-panel, .lookup-result__card { padding: 22px 18px; border-radius: 16px; }
  .lookup-field label { align-items: flex-start; flex-direction: column; gap: 1px; }
  .lookup-privacy { align-items: flex-start; }
  .lookup-privacy p { font-size: 0.86rem; }
  .lookup-footer { grid-template-columns: 1fr; }
  .lookup-footer span { display: none; }
  .suit-motif--left { font-size: 9rem; }
  .suit-motif--right { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}