:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #172033;
  background: #eef4f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, input, select, textarea { font: inherit; }

.page { min-height: 100vh; background: #f5f6f8; }
.shell { width: min(100%, 460px); padding: 22px 14px 32px; margin: 0 auto; }
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  color: #172033;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}
.header h1 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; text-align: center; }
.card { padding: 24px 20px; background: #fff; border: 1px solid #eaecf0; border-radius: 12px; box-shadow: 0 3px 12px rgb(16 24 40 / 4%); }
.phone-query { display: grid; grid-template-columns: minmax(0, 1fr) 68px; gap: 8px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #eef0f2; }
.phone-query input { height: 42px; }
.phone-query button { color: #176b55; background: #edf8f4; border: 0; border-radius: 8px; cursor: pointer; }
.query-result { margin: -10px 0 18px; color: #475467; font-size: 13px; }
.query-result:empty { display: none; }
.query-error { color: #b42318; }
.query-empty { color: #667085; }
.grid { display: grid; grid-template-columns: 1fr; }
.field,
.field.full {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  min-width: 0;
  margin-bottom: 17px;
}
label { display: block; margin: 0; color: #344054; font-size: 14px; font-weight: 600; text-align: right; }
.required::after { margin-left: 4px; color: #d92d20; content: "*"; }
input, select, textarea { width: 100%; color: #182230; background: #fff; border: 1px solid #d0d5dd; border-radius: 9px; outline: none; transition: border-color .18s, box-shadow .18s; }
input, select { height: 46px; padding: 0 12px; }
textarea { min-height: 84px; padding: 11px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #268c71; box-shadow: 0 0 0 3px rgb(38 140 113 / 13%); }
input.invalid, select.invalid, textarea.invalid { border-color: #d92d20; }
.error { grid-column: 2; margin-top: 4px; color: #d92d20; font-size: 12px; }
.error:empty { display: none; }
.field textarea { align-self: start; }
.field:has(textarea) label { align-self: start; padding-top: 10px; }
.submit { width: 100%; height: 48px; margin-top: 4px; color: #fff; font-weight: 650; background: #176b55; border: 0; border-radius: 9px; cursor: pointer; }
.submit:hover { background: #105c49; }
.submit:disabled { cursor: not-allowed; opacity: .65; }
.notice { display: none; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; border-radius: 9px; }
.notice.error-notice { display: block; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }
.success { display: none; padding: 30px 8px 14px; text-align: center; }
.success.visible { display: block; }
.success-icon { display: grid; width: 62px; height: 62px; margin: 0 auto 18px; color: #fff; font-size: 32px; background: #15956f; border-radius: 50%; place-items: center; }
.success h2 { margin-bottom: 9px; font-size: 24px; }
.success p { color: #687386; }
.receipt { padding: 12px; margin: 18px 0; color: #176b55; font-size: 16px; font-weight: 650; background: #edf8f4; border-radius: 9px; }
.appointment-record { padding: 14px; margin: 18px 0; text-align: left; background: #f7f9fa; border-radius: 9px; }
.record-number { padding-bottom: 10px; margin-bottom: 8px; color: #176b55; font-weight: 650; border-bottom: 1px solid #e4e8eb; }
.record-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 13px; }
.record-row span { color: #7a8494; }
.record-row strong { overflow-wrap: anywhere; color: #344054; font-weight: 500; }
.record-expire { padding-top: 9px; margin-top: 7px; color: #8a94a3; font-size: 12px; border-top: 1px solid #e4e8eb; }
.secondary { padding: 10px 20px; color: #176b55; background: #fff; border: 1px solid #176b55; border-radius: 9px; cursor: pointer; }
.loading-option { color: #8b94a4; }
.upload-tip { margin-top: 5px; color: #8a94a3; font-size: 12px; }
.image-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.image-preview:empty { display: none; }
.image-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #e4e7ec; border-radius: 8px; }

@media (max-width: 540px) {
  body { background: #f4f7f8; }
  .page {
    background: #f5f6f8;
  }
  .shell {
    padding:
      20px
      max(14px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  .card { padding: 22px 16px; border-radius: 11px; box-shadow: none; }
  .header h1 { font-size: 18px; }
  .field,
  .field.full { grid-template-columns: 88px minmax(0, 1fr); gap: 0 10px; margin-bottom: 16px; }
  label { font-size: 14px; }
  input, select { height: 46px; font-size: 16px; }
  textarea { min-height: 82px; font-size: 16px; }
  .submit { height: 48px; font-size: 16px; }
}

@media (max-width: 359px) {
  .field,
  .field.full { grid-template-columns: 80px minmax(0, 1fr); gap: 0 8px; }
}