/* One compact reading column; donation amounts are plain informational text. */
:root {
  color-scheme:light;
  --paper:#f3f6f5;
  --ink:#203e30;
  --muted:#637269;
  --green:#245b42;
  --line:#e1e5d9;
  --white:#ffffff;
  --danger:#a13728;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.5;
}

button,input { font:inherit; }
button,a,label { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
a { color:inherit; }
img { max-width:100%; }
h2,h3,p { margin-top:0; }
[hidden] { display:none!important; }

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible {
  outline:3px solid #a87936;
  outline-offset:4px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* The entire page is one quiet white surface; price columns are explanatory text. */
.shell {
  width:calc(100% - 32px);
  max-width:420px;
  margin:28px auto;
  padding:27px 24px 23px;
  background:var(--white);
  border:1px solid #e4ebe7;
  border-radius:26px;
  box-shadow:0 12px 40px #203d2d06;
}
.intro { text-align:center; margin-bottom:23px; min-width:0; }
h1 { font-size:26px; line-height:35px; font-weight:650; letter-spacing:-.6px; margin:0; max-height:70px; overflow:auto; overflow-wrap:anywhere; }
.page-subtitle { color:var(--muted); font-size:12px; line-height:20px; margin:7px 0 0; }
.intro-copy { font-size:13px; line-height:20px; color:var(--muted); margin:9px 0 0; max-height:60px; overflow:auto; overflow-wrap:anywhere; white-space:pre-line; }
.intro.is-expanded h1,.intro.is-expanded .intro-copy { max-height:none; }
.intro-toggle { border:0; background:transparent; color:var(--green); padding:5px 0; margin-top:3px; font-size:12px; line-height:20px; text-decoration:underline; text-underline-offset:3px; }
.checkout { min-width:0; }
.plans-explainer { margin:0 0 20px; padding:13px 8px 11px; background:#f5f8f6; border-radius:14px; }
.plans-heading { font-size:11px; line-height:17px; color:#64796d; text-align:center; margin:0 0 11px; }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.plan { position:relative; text-align:center; padding:0 5px; min-width:0; cursor:default; }
.plan+.plan { border-left:1px solid #e0e8e2; }
.plan-price { display:block; font-size:26px; line-height:31px; font-weight:650; letter-spacing:-.8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-price.is-long { font-size:14px; letter-spacing:-.5px; }
.plan-price small { font-size:12px; font-weight:500; margin-right:2px; }
.plan-copy { display:block; min-width:0; max-height:65px; overflow:auto; overflow-wrap:anywhere; margin-top:7px; }
.plan-name { display:block; font-size:13px; line-height:20px; font-weight:550; color:#354d40; }
.plan-description { display:block; font-size:12px; line-height:19px; color:#627467; }
.plan-recommended { display:inline-block; color:#866128; background:#f2e9d8; border-radius:4px; font-size:11px; line-height:16px; padding:0 5px; margin-top:5px; }
.plans.is-detailed { grid-template-columns:minmax(0,1fr); gap:12px; }
.plans.is-detailed .plan { display:grid; grid-template-columns:78px minmax(0,1fr); gap:4px 10px; text-align:left; padding:0 7px; }
.plans.is-detailed .plan+.plan { border-left:0; border-top:1px solid #e0e8e2; padding-top:12px; }
.plans.is-detailed .plan-price { font-size:23px; }
.plans.is-detailed .plan-price.is-long { font-size:14px; }
.plans.is-detailed .plan-copy { margin-top:0; }
.plans.is-detailed .plan-recommended { grid-column:2; justify-self:start; margin:0; }
.payment { text-align:center; }
.qr-area { display:flex; flex-direction:column; align-items:center; }
.qr-frame { display:grid; place-items:center; width:212px; height:212px; padding:6px; background:#fff; }
.qr-frame img { display:block; width:200px; height:200px; object-fit:contain; }
.qr-placeholder { width:100%; height:100%; background:#f3f6f4; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#718277; border-radius:12px; }
.qr-placeholder>span { font-size:30px; font-weight:300; margin-bottom:6px; }
.qr-placeholder strong { font-size:13px; font-weight:500; }
.qr-placeholder small { font-size:12px; margin-top:5px; }
.qr-help { margin:8px 0 0; font-size:12px; line-height:18px; color:var(--muted); }
.button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:49px; border:0; border-radius:12px; padding:13px 14px; text-decoration:none; font-size:14px; line-height:22px; font-weight:550; text-align:center; transition:background .15s; }
.button-primary { background:var(--green); color:#fff; }
.button-primary:hover:not(:disabled) { background:#174a35; }
.button-secondary { background:#f1f5f2; color:var(--ink); border:1px solid #dfe7e1; margin-top:10px; }
.button-job { background:#ff8c00; color:#fff; }
.button-job:hover { background:#e67e00; }
.button-group { display:flex; gap:10px; margin-top:20px; }
.button-group .button-primary { flex:0 0 70%; box-shadow:0 5px 12px #1f5c4214; }
.button-group .button-job { flex:0 0 30%; box-shadow:0 5px 12px rgba(255, 140, 0, 0.15); }
#open-upload { margin-top:0; }
.delivery-note { color:#637269; font-size:12px; line-height:18px; margin:10px 0 0; }
.availability-note { font-size:12px; line-height:19px; color:#8b652b; background:#fbf3e4; border-radius:8px; padding:8px 10px; margin:12px 0 0; overflow-wrap:anywhere; }

.history {
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:20px;
  text-align:left;
}

.history-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:9px; }
.history-heading h3 { font-size:13px; font-weight:550; margin:0; }
.history-heading>span { color:var(--muted); font-size:12px; }
.history-list { display:flex; flex-direction:column; gap:8px; }

.history-item {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  line-height:20px;
  text-align:left;
  overflow-wrap:anywhere;
}

.history-item span:last-child { font-size:12px; color:#728368; white-space:nowrap; }
.page-footer { text-align:center; margin-top:15px; font-size:12px; line-height:20px; }
.quiet-link { color:#7b8475; text-decoration:none; }
.page-error { padding:12px 14px; margin:0 0 16px; border-radius:9px; background:#fff0e6; color:var(--danger); font-size:13px; line-height:20px; }
.section-kicker { font-size:12px; color:#7b8573; }
.dialog-description { overflow-wrap:anywhere; }

.claim-dialog {
  border:1px solid #e5e7da;
  padding:24px;
  background:var(--white);
  color:var(--ink);
  border-radius:20px;
  width:calc(100% - 30px);
  max-width:430px;
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  box-shadow:0 25px 90px #192b3333;
}

.claim-dialog::backdrop {
  background:#18332780;
  backdrop-filter:blur(4px);
}

.claim-dialog h2 {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.4px;
  margin:10px 0 6px;
}

.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.close-button {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f0f2e9;
  font-size:25px;
  font-weight:300;
  line-height:1;
  color:#64755b;
}

.dialog-description {
  font-size:12px;
  line-height:1.7;
  color:#75816b;
  margin-bottom:20px;
}

.file-picker {
  position:relative;
  min-height:180px;
  border:1px dashed #b7c4ab;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  background:#f5f6ee;
}

.file-picker:has(+input:focus-visible) {
  outline:3px solid #b37a28;
  outline-offset:4px;
}

.file-picker.locked {
  pointer-events:none;
  opacity:.65;
}

.file-picker #picker-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 10px;
}

.upload-icon {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  font-size:27px;
  font-weight:300;
  color:#5f7852;
  border-radius:50%;
  background:#e6ecdd;
  margin-bottom:10px;
}

.file-picker strong {
  font-size:13px;
  font-weight:500;
}

.file-picker small {
  font-size:12px;
  color:#859178;
  margin-top:6px;
}

.file-picker img {
  max-height:230px;
  object-fit:contain;
  display:block;
  max-width:100%;
  padding:8px;
}

.change-image {
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 11px;
  background:#fffdf1ed;
  border:1px solid #dce2ce;
  border-radius:7px;
  font-size:12px;
  white-space:nowrap;
  box-shadow:0 2px 8px #14201110;
}

.file-details {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:9px;
  font-size:12px;
  color:#7b8470;
}

.file-details>span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.text-button {
  border:0;
  padding:4px 0;
  background:transparent;
  font-size:12px;
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px;
  flex-shrink:0;
  min-height:30px;
}

.privacy-note {
  font-size:12px;
  line-height:1.8;
  color:#89927e;
  margin:13px 0 19px;
}

.upload-progress {
  margin:0 0 18px;
}

.upload-progress progress {
  display:block;
  width:100%;
  height:5px;
  appearance:none;
  border:0;
  background:#e4e9dd;
  border-radius:3px;
  overflow:hidden;
  accent-color:var(--green);
}

.upload-progress progress::-webkit-progress-bar {
  background:#e4e9dd;
}

.upload-progress progress::-webkit-progress-value {
  background:var(--green);
}

.upload-progress progress::-moz-progress-bar {
  background:var(--green);
}

.upload-progress>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:#6c7a62;
  font-size:12px;
}

.error-message {
  background:#fff1e9;
  border-radius:8px;
  padding:10px 12px;
  margin:13px 0;
  color:var(--danger);
  font-size:12px;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.dialog-status {
  text-align:center;
  min-height:0;
  color:#648058;
  font-size:12px;
  margin:12px 0 0;
}

.dialog-status:empty {
  display:none;
}

.result-loading {
  text-align:center;
  padding:50px 0 30px;
  font-size:12px;
  color:#75816b;
}

.loading-ring {
  display:inline-block;
  border:2px solid #dfe7d6;
  border-top-color:var(--green);
  border-radius:50%;
  width:28px;
  height:28px;
  animation:spin .8s linear infinite;
  margin-bottom:13px;
}

.success-icon {
  margin-top:8px;
  width:47px;
  height:47px;
  background:#eaf0df;
  border-radius:50%;
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:23px;
}

.resource-card {
  background:#f2f4e9;
  border:1px solid #e1e6d5;
  border-radius:12px;
  padding:17px;
  margin:17px 0;
}

.resource-card>strong {
  display:block;
  margin:5px 0 14px;
  font-size:16px;
  overflow-wrap:anywhere;
}

.extraction-code {
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid #dce3cf;
  font-size:12px;
}

.extraction-code>span {
  color:#7c8771;
}

.extraction-code>strong {
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;
  overflow-wrap:anywhere;
}

.extraction-code button {
  margin-left:auto;
}

.resource-card p {
  font-size:12px;
  color:#718168;
  line-height:1.8;
  margin:13px 0 0;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.resource-card p:empty {
  display:none;
}

.save-note {
  text-align:center;
  color:#8a957e;
  font-size:12px;
  margin:13px 0 0;
  line-height:1.8;
}

.no-script {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff2df;
  border-top:1px solid #dfc697;
  padding:15px;
  text-align:center;
  font-size:13px;
  color:#805a25;
  z-index:5;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

@media(min-width:721px) {
  .shell { margin-top:40px; }
}
@media(max-width:390px) {
  .shell { margin:16px auto; padding:22px 18px 20px; border-radius:23px; }
  .intro { margin-bottom:19px; }
  .plans-explainer { margin-bottom:16px; }
  h1 { font-size:25px; line-height:33px; max-height:66px; }
}
@media(max-width:360px) {
  .shell { width:calc(100% - 20px); margin:10px auto; padding:17px 14px; border-radius:20px; }
  .intro { margin-bottom:15px; }
  h1 { font-size:23px; line-height:31px; max-height:62px; }
  .page-subtitle { font-size:11px; margin-top:5px; }
  .plans-explainer { padding:10px 5px; margin-bottom:13px; }
  .plans-heading { margin-bottom:7px; }
  .plan-price { font-size:24px; line-height:29px; }
  .plan { padding:0 4px; }
  .plan-copy { margin-top:5px; }
  .plan-name { font-size:12px; }
  .qr-frame { width:192px; height:192px; padding:4px; }
  .qr-frame img { width:184px; height:184px; }
  #open-upload { margin-top:15px; }
  .button { font-size:13px; min-height:47px; padding:12px 10px; }
  .claim-dialog { padding:18px; }
}

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