:root {
  color-scheme: light;
  --ddb-navy: #152037;
  --ddb-navy-2: #0e3150;
  --ddb-orange: #e67e11;
  --ddb-orange-dark: #bd5707;
  --ddb-orange-soft: #fff3dc;
  --ddb-bg: #f4f6fa;
  --ddb-surface: #ffffff;
  --ddb-border: #dfe5ed;
  --ddb-text: #172033;
  --ddb-muted: #64748b;
  --ddb-success: #24613a;
  --ddb-danger: #9f2f27;
  --ddb-radius: 14px;
  --ddb-shadow: 0 10px 30px rgba(28, 40, 60, .09);
}

html { background: var(--ddb-bg); }
body {
  background: var(--ddb-bg) !important;
  color: var(--ddb-text) !important;
  font-family: "TH Sarabun New" !important;
}

.top {
  background: linear-gradient(135deg, var(--ddb-navy), var(--ddb-navy-2)) !important;
  color: #fff !important;
  box-shadow: 0 3px 14px rgba(14, 49, 80, .18);
}
.top a { color: #fff !important; }
.top strong { letter-spacing: .02em; }

.card, .panel, .instruction, .body, .hero {
  background: var(--ddb-surface) !important;
  color: var(--ddb-text) !important;
  border-color: var(--ddb-border) !important;
  box-shadow: var(--ddb-shadow);
}

a { color: var(--ddb-orange-dark); }
a:hover { color: var(--ddb-orange); }

.btn, .cta, button[type="submit"] {
  background: linear-gradient(135deg, #ef921e, var(--ddb-orange)) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(190, 87, 7, .2);
}
.btn:hover, .cta:hover, button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--ddb-orange), var(--ddb-orange-dark)) !important;
}
.btn.gray, .btn.alt {
  background: #e9edf3 !important;
  color: #334155 !important;
  box-shadow: none;
}
.btn.danger { background: var(--ddb-danger) !important; }

input, select, textarea {
  border-color: #b9c4d2 !important;
  background: #fff !important;
  color: var(--ddb-text) !important;
  border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(230, 126, 17, .32) !important;
  outline-offset: 1px;
  border-color: var(--ddb-orange) !important;
}

.notice { border-left-color: var(--ddb-orange) !important; }
.eyebrow, .amount, .active { color: var(--ddb-orange-dark) !important; }

@media (max-width: 650px) {
  .wrap { margin-top: 18px !important; }
  .card, .panel, .instruction, .body, .hero { border-radius: 12px !important; }
}

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