* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0e1220;
  color: #e8ecf5;
  min-height: 100vh;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 14px 12px 40px; }

header { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 14px; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: 2px; }
.sub { font-size: 13px; color: #8b97b5; margin-top: 5px; }

.badge { font-size: 13px; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.badge.ok { background: rgba(46, 204, 113, .15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, .4); }
.badge.wait { background: rgba(241, 196, 15, .12); color: #f1c40f; border: 1px solid rgba(241, 196, 15, .4); }

.btn-link {
  font-size: 13px; color: #6faeff; text-decoration: none;
  border: 1px solid #2f3a5c; padding: 5px 12px; border-radius: 8px;
  margin-right: 10px; white-space: nowrap;
}
.btn-link:active { background: #232c47; }

.card { background: #171c2e; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: 15px; color: #cfd8ec; margin-bottom: 10px; }

.settings .s-row { display: flex; gap: 10px; }
.s-row { display: flex; gap: 10px; }
.settings label, .s-row label { flex: 1; font-size: 12px; color: #9aa7c2; display: flex; flex-direction: column; gap: 5px; }
.settings label span, .s-row label span { color: #5c6885; font-size: 10px; }
.settings input, .s-row input {
  background: #0e1220; border: 1px solid #2a3450; border-radius: 8px;
  color: #e8ecf5; padding: 9px 10px; font-size: 15px; width: 100%;
}
.settings input:focus, .s-row input:focus { outline: none; border-color: #3d7bfd; }
.s-btns { display: flex; gap: 8px; margin-top: 12px; }
.s-btns button {
  flex: 1; background: #232c47; color: #cfd8ec; border: 1px solid #2f3a5c;
  border-radius: 8px; padding: 9px 0; font-size: 13px; cursor: pointer;
}
.s-btns button:active { background: #2c3757; }
.quick-btns { display: flex; gap: 8px; margin-top: 10px; }
.quick-btns button {
  flex: 1; background: #1b2236; color: #6faeff; border: 1px dashed #2f3a5c;
  border-radius: 8px; padding: 8px 0; font-size: 12px; cursor: pointer;
}
.quick-btns button:active { background: #232c47; }
.s-tip { font-size: 11px; color: #f1c40f; margin-top: 10px; }
.s-tip a { color: #6faeff; }
.price-ref { margin-top: 10px; font-size: 12px; color: #9aa7c2; }
.price-ref b { color: #e8ecf5; }
.cloud-ok { color: #2ecc71; }
.cloud-wait { color: #f1c40f; }
.cloud-err { color: #e74c3c; }

.err {
  background: rgba(231, 76, 60, .12); border: 1px solid rgba(231, 76, 60, .4);
  color: #e74c3c; font-size: 12px; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  color: #7d8aa5; font-weight: normal; font-size: 12px; text-align: right;
  padding: 10px 6px; border-bottom: 1px solid #2a3450; white-space: nowrap;
}
th.gap, td.gap {
  width: 52px; padding: 0;
  border-left: 1px dashed #232c47; border-right: 1px dashed #232c47;
  border-bottom: 1px solid #1d2438;
}
td { padding: 13px 6px; text-align: right; border-bottom: 1px solid #1d2438; white-space: nowrap; }
td.dt { text-align: left; color: #9aa7c2; font-variant-numeric: tabular-nums; }
td.num { color: #e8ecf5; font-variant-numeric: tabular-nums; font-weight: 500; }
td.money { color: #6faeff; font-variant-numeric: tabular-nums; }
td.usd { color: #2ecc71; font-variant-numeric: tabular-nums; }
td.dt .st { display: block; font-size: 10px; margin-top: 2px; }
.st.ok { color: #2ecc71; }
.st.wait { color: #f1c40f; }

tr.pending td.num { color: #a8a079; }
tr.pending td.usd { color: #7d7a5a; }

/* 已结算行：灰 + 斜体；边界行拉一条绿线 */
tr.settled td { font-style: italic; }
tr.settled td.num, tr.settled td.money, tr.settled td.usd { color: #5f6a85; }
tr.settled td.dt { color: #59627a; }
tr.edge td { border-top: 2px solid #2ecc71; }

/* 结算页结果 */
.c-grid { margin-top: 4px; }
.c-grid .cline {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 2px; border-bottom: 1px solid #1d2438; font-size: 14px;
}
.c-grid .cline span:first-child { color: #9aa7c2; }
.c-grid .cline.total {
  border-top: 2px solid #2ecc71; border-bottom: none;
  color: #2ecc71; font-weight: 700; font-size: 16px;
}
.c-grid .cline.total span:first-child { color: #2ecc71; }

footer { text-align: center; color: #4c5872; font-size: 11px; margin-top: 20px; }