/* egame-oc-demo-transfer 前端样式
 *
 * ⚠️ 这个文件里只有一件事是"功能"而不是"好看"：
 *    UNKNOWN 与 FAILED、已知失败与真失败、null 与 0 —— 必须视觉上分得开。
 *    颜色在这里是判据的一部分，不是装饰。
 */

:root {
  --fg: #1b1f23;
  --muted: #6a737d;
  --line: #d8dee4;
  --bg: #fff;
  --soft: #f6f8fa;

  --ok: #1a7f37;
  --ok-bg: #e8f5ec;
  --failed: #b62324;        /* 平台明确拒绝 */
  --failed-bg: #fdebec;
  --unknown: #8250df;       /* ★ UNKNOWN 用紫色，和红色的 FAILED 截然不同 */
  --unknown-bg: #f3eefc;
  --warn: #9a6700;
  --warn-bg: #fff8e5;
  --known: #57606a;         /* 已知失败 = 灰色的"意料之中" */
  --known-bg: #eef1f4;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font: 14px/1.6 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h3 { font-size: 15px; margin: 16px 0 8px; }
h4 { font-size: 14px; margin: 10px 0 6px; }
a { color: #0969da; }

/* ---- 通用 ---- */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.spacer { flex: 1; }
.wrap { word-break: break-all; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0; }
.hint.danger { color: var(--warn); }
.hint.warn { color: var(--warn); }
.ok { color: var(--ok); }

button {
  font: inherit; padding: 5px 12px; border: 1px solid var(--line);
  background: var(--bg); border-radius: 6px; cursor: pointer;
}
button:hover { background: var(--soft); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: #0969da; color: #fff; border-color: #0969da; }
button.danger { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
button.link {
  border: 0; background: none; color: #0969da; padding: 0 4px; text-decoration: underline;
}
input, select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); min-width: 0;
}
label { display: block; margin: 10px 0; }
label > input, label > select { display: block; width: 100%; margin-top: 4px; }
label.row { display: flex; gap: 8px; align-items: center; }
label.row > input { width: auto; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line); font-size: 12px;
}

/* ---- banner ---- */
.banner {
  padding: 8px 12px; border-radius: 6px; margin: 10px 0;
  border: 1px solid var(--line); background: var(--soft); font-size: 13px;
}
.banner.thin { padding: 5px 10px; margin: 6px 0; }
.banner.warn { background: var(--warn-bg); border-color: #e3c168; color: var(--warn); }
.banner.err { background: var(--failed-bg); border-color: #e9a3a4; color: var(--failed); }
.banner.known { background: var(--known-bg); border-color: #c3cad2; color: var(--known); }
.banner.info { background: var(--ok-bg); border-color: #a8d5b6; color: var(--ok); }

/* ---- badge：这里的颜色是判据 ---- */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
.badge.st-ok { background: var(--ok-bg); color: var(--ok); border-color: #a8d5b6; }
.badge.st-failed { background: var(--failed-bg); color: var(--failed); border-color: #e9a3a4; }
/* ★ UNKNOWN 不是 FAILED 的一种：紫色 + 虚线边，一眼和红色分开 */
.badge.st-unknown {
  background: var(--unknown-bg); color: var(--unknown);
  border: 1px dashed var(--unknown);
}
.badge.st-pending { background: var(--soft); color: var(--muted); border-color: var(--line); }
.badge.st-other { background: var(--soft); color: var(--fg); border-color: var(--line); }
/* 已知失败 = 灰，意料之中；与红色的真失败分开 */
.badge.known { background: var(--known-bg); color: var(--known); border-color: #c3cad2; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: #e3c168; }
.badge.muted { background: var(--soft); color: var(--muted); border-color: var(--line); }

tr.rowUnknown { background: var(--unknown-bg); }
.warn-dot { color: var(--warn); cursor: help; }

/* ---- 登录 ---- */
.login-wrap { display: flex; justify-content: center; padding: 40px 16px; }
.login { width: 100%; max-width: 520px; }
.login .sub { color: var(--muted); margin: 0 0 16px; }
.login button.primary { width: 100%; padding: 8px; margin-top: 8px; }
.calls { margin-top: 18px; }
.call-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; flex-wrap: wrap; }

/* ---- 顶栏 ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 16px;
}
.idline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.figures { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fig {
  flex: 1 1 140px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--soft);
}
.fig label { display: block; margin: 0; font-size: 11px; color: var(--muted); }
.fig b { font-size: 17px; font-variant-numeric: tabular-nums; }
/* ★ 查不到就是查不到：灰底 + 虚线，和"数值 0"完全不同的样子 */
.fig.missing { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f0f0f0 6px, #f0f0f0 12px); border-style: dashed; }
.fig.missing b { color: var(--muted); }
.recon { margin: 8px 0 0; }

/* ---- Tab ---- */
.tabs, .subtabs { display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap; }
.subtabs { padding: 0 0 10px; }
.tabs button, .subtabs button { border-radius: 6px 6px 0 0; }
.tabs button.on, .subtabs button.on {
  background: #0969da; color: #fff; border-color: #0969da;
}
main { padding: 12px 16px 60px; }

/* ---- 表格 ---- */
table.grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.grid th, table.grid td {
  border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top;
}
table.grid th { background: var(--soft); white-space: nowrap; }

table.fields { border-collapse: collapse; width: 100%; margin: 8px 0; }
table.fields td { padding: 3px 6px 3px 0; vertical-align: middle; }
table.fields td.fname { white-space: nowrap; }
table.fields input { width: 100%; min-width: 180px; }

/* ---- 面板 / 卡片 ---- */
.panel {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0;
}
.epcard { scroll-margin-top: 140px; }
.kv { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 4px 0; }
.kv > label { margin: 0; min-width: 120px; color: var(--muted); font-size: 12px; }
.call { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.result { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }

pre.raw {
  background: var(--soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; overflow: auto; max-height: 320px;
  white-space: pre-wrap; word-break: break-all; font-size: 12px; margin: 4px 0;
}
pre.raw.bad, code.bad { background: var(--failed-bg); border-color: #e9a3a4; }

.cards { display: flex; flex-wrap: wrap; gap: 10px; }
.gcard {
  flex: 1 1 200px; max-width: 260px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; background: var(--bg);
}
.gcard:hover { background: var(--soft); border-color: #0969da; }
.gname { font-weight: 600; }
.gmeta { margin-top: 6px; display: flex; gap: 6px; align-items: center; }

.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-inline label { margin: 0; }
.form-inline input { width: 160px; }

/* ---- 弹框 ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow: auto; z-index: 100;
}
.modal {
  background: var(--bg); border-radius: 10px; padding: 16px 18px;
  width: 100%; max-width: 560px;
}
.modal.wide { max-width: 900px; }