:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0d1117; color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
header h1 { margin: 8px 0 4px; font-size: 26px; letter-spacing: .5px; }
header .sub { margin: 0 0 16px; color: #8b949e; font-size: 13px; }
#envValue { color: #58a6ff; font-weight: 600; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 8px 14px; margin-bottom: 16px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #21262d; font-size: 14px; }
.row:last-child { border-bottom: 0; }
.k { color: #8b949e; flex: 0 0 auto; }
.v { text-align: right; word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.btn { flex: 1 1 auto; min-width: 130px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #30363d; background: #21262d; color: #e6edf3; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn:hover:not(:disabled) { background: #30363d; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: #7b2ff7; border-color: #7b2ff7; }
.btn.primary:hover:not(:disabled) { background: #8f47ff; }
.btn.ghost { flex: 0 0 auto; min-width: 90px; background: transparent; }
.hint { color: #8b949e; font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; }
.log { background: #010409; border: 1px solid #30363d; border-radius: 10px; padding: 12px;
  height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #7ee787; }

.card-title { font-size: 13px; color: #8b949e; padding: 6px 0 10px; font-weight: 600; }
.card-title .muted { font-weight: 400; color: #6e7681; font-size: 11px; }
.empty { color: #6e7681; font-size: 12.5px; padding: 6px 0 10px; }
.pay { border: 1px solid #30363d; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #0d1117; }
.pay.completed { border-color: #238636; }
.pay.approved { border-color: #9e6a03; }
.pay.cancelled { opacity: .7; }
.pay.error { border-color: #da3633; }
.pay-line1 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pay-badge { font-weight: 700; }
.pay-amt { color: #58a6ff; font-weight: 700; }
.pay-time { margin-left: auto; color: #6e7681; font-size: 11.5px; }
.pay-line2 { color: #8b949e; font-size: 11.5px; margin-top: 3px; }
.pay-line3 { color: #6e7681; font-size: 11px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.pay-tx { color: #7ee787; }
.pay-note { color: #d29922; }
a { color: #58a6ff; }