/* gpt-paylink 统一设计基座 —— 所有页面共用的 tokens + 基础组件。
   页面自己的布局样式继续放各自 <style>,但颜色/圆角/按钮/pill/表单卡必须用这里的。 */
:root {
  --brand: #0e9385;
  --brand2: #27b596;
  --bg: #edf4f1;
  --panel: #ffffff;
  --line: #dce9e4;
  --fg: #16332e;
  --muted: #66837c;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

/* 状态 pill:data-st 值对齐 redeem-store 状态机 */
.u-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e3f1ee; color: var(--brand); border: 1px solid #c7e5de; }
.u-pill[data-st="done"] { background: #ecfdf5; color: var(--ok); border-color: #bbf7d0; }
.u-pill[data-st="failed"], .u-pill[data-st="rejected"] { background: #fef2f2; color: var(--bad); border-color: #fecaca; }
.u-pill[data-st="await_pay"], .u-pill[data-st="returned"] { background: #fffbeb; color: var(--warn); border-color: #fde68a; }
.u-pill[data-st="running"] { background: #eff6ff; color: var(--brand); border-color: #bfdbfe; }

/* 表单式订单卡:左标签右值 */
.u-ordercard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; }
.u-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; margin: 8px 0; }
.u-field { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 13px; }
.u-field > label { flex: 0 0 62px; color: var(--muted); font-size: 12px; }
.u-field > span { font-weight: 600; color: var(--fg); word-break: break-all; }

/* 操作按钮排 */
.u-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.u-btn { padding: 7px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--fg); font-size: 13px; font-weight: 700; cursor: pointer; }
.u-btn:hover { border-color: var(--brand); color: var(--brand); }
.u-btn.pri { background: var(--brand); border-color: var(--brand); color: #fff; }
.u-btn.pri:hover { filter: brightness(1.08); color: #fff; }
.u-btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.u-btn.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.u-btn.ghost { background: transparent; }
.u-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 进度时间线(客户可见:阶段 + 时刻 + 耗时) */
.u-timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.u-timeline li { position: relative; padding: 0 0 14px 26px; font-size: 13px; }
.u-timeline li::before { content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #bcd6cf; }
.u-timeline li::after { content: ""; position: absolute; left: 10.5px; top: 15px; bottom: 0; width: 1.5px; background: var(--line); }
.u-timeline li:last-child::after { display: none; }
.u-timeline li.on::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(14, 147, 133, .15); animation: u-pulse 1.4s infinite; }
.u-timeline li.done::before { background: var(--ok); }
.u-timeline li.err::before { background: var(--bad); }
.u-timeline .t-label { font-weight: 700; }
.u-timeline .t-time { color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
.u-timeline .t-dur { color: var(--brand); margin-left: 8px; font-variant-numeric: tabular-nums; font-weight: 700; }
@keyframes u-pulse { 50% { box-shadow: 0 0 0 7px rgba(14, 147, 133, .07); } }