* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: #1e40af; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 560px; margin: 0 auto; padding: 24px 16px; }

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  padding: 32px;
  border: 1px solid #e2e8f0;
}

.hero { text-align: center; margin-bottom: 28px; }

.hero-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  color: #fff;
}

.hero-icon.success { background: linear-gradient(135deg, #059669, #10b981); }
.hero-icon.error { background: linear-gradient(135deg, #dc2626, #ef4444); }

.hero h1 { font-size: 1.75rem; margin-bottom: 8px; }
.hero p { color: #64748b; font-size: 0.95rem; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.9rem; }

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.form-group textarea { min-height: 80px; resize: vertical; }

.amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.amount-btn {
  padding: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.amount-btn:hover { border-color: #3b82f6; background: #eff6ff; }
.amount-btn.active { border-color: #1e40af; background: #eff6ff; color: #1e40af; }

.custom-amount { display: flex; align-items: center; gap: 8px; }
.custom-amount span { font-weight: 600; color: #64748b; }

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover { opacity: 0.95; }
.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #1e40af;
  color: #1e40af;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
}

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.info-box {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.info-box dt { color: #64748b; font-size: 0.85rem; }
.info-box dd { font-weight: 600; margin-bottom: 10px; }

.nav-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
  font-size: 0.9rem;
}

.footer {
  text-align: center;
  margin-top: 24px;
  color: #94a3b8;
  font-size: 0.8rem;
}