:root {

  color-scheme: light;

  --ink: #12203a;

  --muted: #62708a;

  --line: #e0e6ef;

  --surface: #ffffff;

  --canvas: #f4f7fb;

  --nav: #101b31;

  --brand: #2447c4;

  --brand-strong: #17379f;

  --success: #087a55;

  --danger: #bd3030;

  --warning: #9a6500;

  --radius: 14px;

  --space-1: 4px;

  --space-2: 8px;

  --space-3: 12px;

  --space-4: 16px;

  --space-6: 24px;

  --space-8: 32px;

  --content-width: 1320px;

  --page-gutter: 24px;

  --button-min-width: 184px;

  --button-secondary-min-width: 136px;

  --nav-item-min-width: 100px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

}



* { box-sizing: border-box; }



body {

  margin: 0;

  min-height: 100vh;

  color: var(--ink);

  background: var(--canvas);

  line-height: 1.5;

}



a { color: inherit; }



.topbar {

  position: sticky;

  top: 0;

  z-index: 20;

  color: #fff;

  background: var(--nav);

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);

}



.topbar-inner,

.shell {

  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));

  margin-inline: auto;

}



.topbar-inner {

  display: flex;

  align-items: center;

  gap: var(--space-8);

  min-height: 68px;

}



.brand {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  min-width: max-content;

  text-decoration: none;

  font-size: 15px;

  font-weight: 400;

}



.brand-logo { display: block; width: 132px; height: 32px; object-fit: contain; flex-shrink: 0; }



.nav {

  display: flex;

  min-width: 0;

  gap: var(--space-2);

  overflow-x: auto;

  scrollbar-width: none;

}



.nav a {

  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  min-width: var(--nav-item-min-width);

  min-height: 44px;

  padding: 8px 12px;

  border-radius: 8px;

  color: #bfc9da;

  text-decoration: none;

  white-space: nowrap;

  font-size: 14px;

  font-weight: 400;

  transition: color 160ms ease, background 160ms ease;

}



.nav a:hover,

.nav a:focus-visible,

.nav a[aria-current="page"] {

  color: #fff;

  background: rgba(255, 255, 255, 0.10);

}

.mobile-nav-toggle { display: none; }
.nav a { scroll-margin-inline: 12px; }
html { scroll-padding-top: 84px; }
body:has(.config-modal:not([hidden])) { overflow: hidden; }



.shell {

  display: grid;

  gap: var(--space-6);

  margin: var(--space-8) auto 64px;

}



.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-6);
  min-width: 0;
}


.eyebrow {

  margin: 0 0 var(--space-2);

  color: var(--brand);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  overflow-wrap: anywhere;

  text-transform: uppercase;

}



h1 {

  margin: 0;

  font-size: clamp(28px, 3vw, 36px);

  line-height: 1.25;

  letter-spacing: -0.025em;

  font-weight: 720;

}



.lead {

  max-width: 720px;

  margin: var(--space-3) 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;

}



.status-pill {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: 7px 12px;

  justify-self: start;

  white-space: nowrap;

  border: 1px solid #cfe7dc;

  border-radius: 999px;

  color: var(--success);

  background: #eefaf5;

  font-size: 12px;

  font-weight: 600;

}



.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(8, 122, 85, 0.11);
}

.hero-side {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  align-items: flex-end;
  align-self: start;
}

.hero-docs,
.panel-config {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 220px;
  padding: 10px 32px;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(36, 71, 196, 0.12);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background 160ms ease;
}

.hero-docs:hover,
.hero-docs:focus-visible,
.panel-config:hover,
.panel-config:focus-visible { background: var(--brand-strong); }

.panel-config {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
}

.config-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
}

.config-modal[hidden] { display: none; }
.config-clear { grid-column: 1 / -1; justify-self: start; }
.config-backdrop { position: absolute; inset: 0; background: rgba(16, 27, 49, 0.45); }
.config-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--space-6);
}
.config-dialog h2 { margin: 0 0 var(--space-2); font-size: 18px; }

.config-dialog .form-grid { grid-template-columns: 1fr; }

.config-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.config-actions button {
  width: 100%;
  min-width: 0;
}

.grid { display: grid; gap: var(--space-6); min-width: 0; }
.grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

.grid.two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.grid.two .result { align-self: stretch; }


.card {

  min-width: 0;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: 0 3px 12px rgba(26, 42, 72, 0.035);

}



.action-card {

  display: flex;

  align-items: flex-start;

  gap: var(--space-4);

  min-height: 128px;

  padding: var(--space-6);

  text-decoration: none;

  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;

}



.action-card:hover,

.action-card:focus-visible {

  border-color: #aebde8;

  background: #fbfcff;

  box-shadow: 0 4px 16px rgba(36, 71, 196, 0.07);

}



a:focus-visible { outline: 3px solid #7896f1; outline-offset: 3px; }

.action-card:active { background: #f0f4ff; }

.action-content { min-width: 0; flex: 1; }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.action-arrow { width: 16px; height: 16px; margin-top: 4px; color: var(--muted); }



.action-icon {

  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

  flex: none;

  border-radius: 12px;

  color: var(--brand);

  background: #edf1ff;

}



.action-card h2 { margin: 0 0 var(--space-2); font-size: 16px; font-weight: 700; }

.action-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }



.panel { padding: var(--space-6); }
.panel { position: relative; }
.panel h2, .result-head h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; }

.panel-copy { margin: var(--space-2) 0 var(--space-6); color: var(--muted); font-size: 13px; line-height: 1.6; }



.config-list { display: grid; margin: var(--space-6) 0 0; }

.config-row {

  display: grid;

  grid-template-columns: 140px 1fr;

  gap: var(--space-4);

  padding: var(--space-3) 0;

  border-bottom: 1px solid #edf1f6;

  font-size: 14px;

}

.config-row:last-child { border-bottom: 0; }
.config-row dt { color: var(--muted); }
.config-row dd { margin: 0; overflow-wrap: anywhere; font: inherit; }


.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.field { display: grid; gap: var(--space-2); min-width: 0; }

.field.full { grid-column: 1 / -1; }

label { font-size: 13px; font-weight: 600; }

.field:has(input[required]) label::after { content: ' *'; color: var(--danger); }

.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }

.form-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-3); background: #f6f8fc; border: 1px solid #e7ecf4; border-radius: 10px; }

.form-tools p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.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; }



input,

select,

textarea {

  width: 100%;

  min-height: 44px;

  padding: 10px 12px;

  color: var(--ink);

  background: #fff;

  border: 1px solid #cfd8e5;

  border-radius: 8px;

  outline: none;

  font: inherit;

  font-size: 14px;

  transition: border-color 160ms ease, box-shadow 160ms ease;

}

input[name="merchantOrderNo"], input[name="utr"], input[name="accountNo"], input[name="bankCode"] { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

input::placeholder { color: #78849a; }



input:focus,

select:focus,

textarea:focus {

  border-color: var(--brand);

  box-shadow: 0 0 0 3px rgba(36, 71, 196, 0.12);

}



.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }

button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  min-width: var(--button-min-width);

  min-height: 44px;

  padding: 0 20px;

  border: 0;

  border-radius: 8px;

  color: #fff;

  background: var(--brand);

  box-shadow: 0 2px 4px rgba(36, 71, 196, 0.12);

  cursor: pointer;

  font: inherit;

  font-size: 14px;

  font-weight: 600;

  transition: background 160ms ease, box-shadow 160ms ease;

}

button:hover { background: var(--brand-strong); }

.button-secondary { flex: none; min-width: var(--button-secondary-min-width); padding: 0 12px; border: 1px solid #d7dfea; color: var(--ink); background: #fff; box-shadow: none; font-size: 12px; }

.button-secondary:hover { background: #edf2fb; }

.button-secondary .icon { width: 16px; height: 16px; }

button:focus-visible { outline: 3px solid rgba(36, 71, 196, 0.28); outline-offset: 2px; }

button:disabled { opacity: 0.62; cursor: wait; }



.result {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: var(--space-6);
  overflow: hidden;
}


.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

.result-state { font-size: 12px; font-weight: 600; }

.result-state.idle { color: var(--muted); }

.result-state.loading, .result-state.unknown { color: var(--warning); }

.result-state.success { color: var(--success); }

.result-state.error { color: var(--danger); }

.result pre {
  flex: 1;
  min-height: 230px;
}

.result .links { margin-top: var(--space-4); }

pre {
  min-height: 230px;

  margin: var(--space-4) 0 0;

  padding: var(--space-4);

  overflow: auto;

  color: #dce7fb;

  background: #111c30;

  border-radius: 10px;

  font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;

  white-space: pre-wrap;

  overflow-wrap: anywhere;

}



.links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.links:empty { display: none; }

.links a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--button-secondary-min-width); min-height: 44px; padding: 8px 12px; color: var(--brand); background: #edf1ff; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }



.notice {

  padding: var(--space-3) var(--space-4);

  color: #6f4d00;

  background: #fffbf1;

  border: 1px solid #eee0bd;

  border-radius: 10px;

  font-size: 13px;

  line-height: 1.6;

}



.callback-list { display: grid; gap: var(--space-4); }

.callback-item pre { min-height: 0; }

.callback-item { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

.callback-item strong { display: block; margin-bottom: var(--space-2); font-size: 14px; overflow-wrap: anywhere; }

.load-error { padding: 12px; border: 1px solid #efcaca; border-radius: 10px; color: var(--danger); background: #fff5f5; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

.empty { padding: var(--space-8) var(--space-4); color: var(--muted); text-align: center; font-size: 14px; }



@media (max-width: 1100px) {

  .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 900px) {

  .grid.two { grid-template-columns: 1fr; }

}

@media (min-width: 1024px) {
  :root { --content-width: 1200px; }

  .topbar-inner { gap: 24px; }
  .nav { flex: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .nav a { min-width: 0; padding-inline: 8px; }
  .shell { gap: 20px; margin-top: 24px; margin-bottom: 40px; }
  .hero { align-items: center; gap: 24px; }
  h1 { font-size: 32px; line-height: 1.3; }
  .lead { margin-top: 8px; }
  .hero-side { flex-direction: row; align-items: center; align-self: end; gap: 12px; }
  .hero-docs, .panel-config, .actions button, .button-secondary, .config-actions button, .links a {
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .hero-docs, .panel-config { min-width: 0; box-shadow: none; }

  .grid { gap: 20px; }
  .grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .action-card { gap: 12px; min-height: 104px; padding: 16px; box-shadow: none; }
  .action-icon { width: 40px; height: 40px; border-radius: 10px; }
  .action-card h2 { margin-bottom: 4px; }
  .action-arrow { height: auto; }

  .panel, .result { padding: 20px; }
  .panel-copy { margin: 8px 0 16px; }
  .panel:has(.panel-config) { display: grid; grid-template: "title action" auto "copy action" auto "list list" auto / minmax(0, 1fr) auto; column-gap: 20px; }
  .panel:has(.panel-config) h2 { grid-area: title; }
  .panel:has(.panel-config) .panel-copy { grid-area: copy; margin-bottom: 0; }
  .panel-config { grid-area: action; position: static; align-self: start; }
  .config-list { grid-area: list; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 12px; }
  .config-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); }
  .config-list .empty { grid-column: 1 / -1; }
  .config-actions { flex-direction: row; gap: 12px; margin-top: 20px; }
  .config-actions button { width: auto; min-width: 112px; }

  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two .result { align-self: start; }
  .form-tools { margin-bottom: 16px; }
  .form-tools .button-secondary { min-width: 112px; }
  .form-grid:has(#orderAmount) { grid-template-columns: minmax(0, 1fr) minmax(128px, .45fr); }
  .form-grid:has(#orderAmount) .field:has(#merchantOrderNo) { grid-column: auto; }
  label { font-size: 14px; }
  .actions { gap: 12px; margin-top: 20px; padding-top: 16px; }

  .result { min-height: 0; }
  .result-state { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 6px; background: var(--canvas); line-height: 1.5; }
  .result-state.loading, .result-state.unknown { background: #fffbf1; }
  .result-state.success { background: #eefaf5; }
  .result-state.error { background: #fff5f5; }
  .result pre { flex: none; min-height: 128px; max-height: min(58vh, 560px); margin-top: 12px; font-size: 13px; }
  .result:has(.result-state.idle) pre { min-height: 96px; color: var(--muted); background: var(--canvas); }
  .links a { min-width: 0; }
  .callback-item pre { max-height: min(58vh, 560px); font-size: 13px; }
  .empty { padding: 20px 16px; border-radius: 10px; background: var(--canvas); text-align: left; }
}



@media (max-width: 640px) {

  :root { --page-gutter: 16px; }

  html { scroll-padding-top: 84px; }

  .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-height: 64px; padding: 8px 0; }

  .brand { min-width: 0; min-height: 44px; gap: 8px; font-size: 12px; }

  .brand-logo { width: 116px; height: auto; }

  .mobile-nav-toggle { display: inline-flex; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #3a465d; color: #fff; background: transparent; box-shadow: none; font-size: 13px; }

  .mobile-nav-toggle:hover { background: #26334b; }

  .mobile-nav-toggle svg { width: 16px; height: 16px; transition: transform 160ms ease; }

  .mobile-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px 0; overflow: visible; }

  .has-mobile-nav .nav { display: none; }

  .has-mobile-nav.nav-open .nav { display: grid; }

  .nav a { min-width: 0; padding: 10px 8px; font-size: 13px; }

  .shell { gap: 16px; margin-top: 20px; margin-bottom: calc(32px + env(safe-area-inset-bottom)); }

  .hero { grid-template-columns: 1fr; gap: var(--space-4); }

  h1 { font-size: 24px; line-height: 1.4; letter-spacing: 0; }

  .eyebrow { font-size: 11px; letter-spacing: .04em; margin-bottom: 8px; }

  .lead { margin-top: 8px; font-size: 14px; line-height: 1.7; }

  .hero-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }

  .hero-docs { flex: 1; min-width: 140px; min-height: 44px; padding: 10px 16px; border-radius: 10px; }

  .status-pill { padding: 7px 10px; font-size: 11px; }

  .grid.cards, .form-grid { grid-template-columns: 1fr; }

  .grid, .grid.cards { gap: 12px; }

  .field.full { grid-column: auto; }

  .panel, .result { padding: var(--space-4); }

  .action-card { align-items: center; gap: 12px; min-height: 88px; padding: 16px; border-radius: 12px; box-shadow: none; }

  .action-icon { width: 40px; height: 40px; border-radius: 10px; }

  .action-card h2 { margin-bottom: 4px; font-size: 15px; }

  .action-card p { font-size: 12px; line-height: 1.6; }

  .action-arrow { align-self: center; margin: 0; height: auto; }

  .panel h2, .result-head h2 { font-size: 17px; }

  .panel-copy { margin: 8px 0 16px; }

  .panel:has(.panel-config) { display: flex; flex-direction: column; }

  .panel-config { position: static; order: 1; width: 100%; min-width: 0; min-height: 48px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; }

  .config-list { margin-top: 0; }

  .config-row { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; font-size: 13px; }

  .form-tools { flex-wrap: wrap; margin-bottom: 16px; padding: 12px; gap: 12px; }

  .form-tools p { flex: 1 1 100%; }

  .form-tools .button-secondary { width: 100%; }

  .form-grid { gap: 16px; }

  label { font-size: 14px; }

  input, select, textarea { min-height: 48px; font-size: 16px; }

  button, .button-secondary { min-height: 48px; min-width: 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }

  .actions { margin-top: 20px; padding-top: 16px; gap: 12px; }

  .actions > button { width: 100%; }

  .result { min-height: 0; scroll-margin-top: 0; }

  .result pre { min-height: 144px; max-height: 420px; margin-top: 12px; padding: 12px; font-size: 12px; }

  .links { flex-direction: column; gap: 8px; }

  .links a { justify-content: flex-start; min-width: 0; min-height: 48px; padding: 12px; font-size: 13px; }

  .notice { padding: 12px; font-size: 12px; }

  .callback-item { padding: 12px; }

  .callback-item pre { max-height: 420px; padding: 12px; }

  .empty { padding: 24px 0; font-size: 13px; text-align: left; }

  .config-modal { padding: 16px; }

  .config-dialog { padding: 20px; max-height: calc(100dvh - 32px); overscroll-behavior: contain; }

  .config-actions { gap: 12px; margin-top: 20px; }

}



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }

}