/* 域名代续费系统 基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f5f6fa; color: #333; }
a { color: #1677ff; text-decoration: none; }
h1, h2, h3 { font-weight: 600; }

.page { max-width: 640px; margin: 40px auto 60px; padding: 0 16px; }
.page-wide { max-width: 1100px; margin: 20px auto 60px; padding: 0 16px; }

.card { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 28px; margin-bottom: 16px; }
.card h1 { font-size: 22px; margin-bottom: 6px; }
.card .sub { color: #888; font-size: 13px; margin-bottom: 20px; }

.steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.steps .step { background: #e8f3ff; color: #1677ff; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.steps .step.on { background: #1677ff; color: #fff; }

label { display: block; font-size: 14px; margin: 14px 0 6px; color: #555; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 15px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #1677ff; }
.btn { display: inline-block; background: #1677ff; color: #fff; border: 0; border-radius: 6px; padding: 11px 26px; font-size: 15px; cursor: pointer; }
.btn:hover { background: #4096ff; }
.btn.gray { background: #8c8c8c; }
.btn.green { background: #52c41a; }
.btn.red { background: #ff4d4f; }
.btn.sm { padding: 5px 12px; font-size: 13px; }
.btn:disabled { background: #ccc; cursor: not-allowed; }

.tip { background: #fffbe6; border: 1px solid #ffe58f; color: #ad6800; border-radius: 6px; padding: 10px 14px; font-size: 13px; margin: 14px 0; }
.ok { background: #f6ffed; border-color: #b7eb8f; color: #389e0d; }
.err { background: #fff2f0; border-color: #ffa39e; color: #cf1322; }

.price-box { background: #f0f7ff; border: 1px dashed #91caff; border-radius: 8px; padding: 16px; margin: 16px 0; }
.price-box .row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: #555; }
.price-box .row.total { font-size: 18px; font-weight: 700; color: #d4380d; border-top: 1px dashed #91caff; margin-top: 8px; padding-top: 10px; }
.price-box .row.total .v { color: #d4380d; }

.qr { text-align: center; margin: 18px 0; }
.qr img { max-width: 240px; border: 1px solid #eee; border-radius: 8px; }
.qr .big { font-size: 30px; font-weight: 700; color: #d4380d; margin: 8px 0; }
.qr .tag { font-size: 13px; color: #888; }

table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; font-size: 14px; }
table.list th, table.list td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
table.list th { background: #fafafa; color: #555; font-weight: 600; white-space: nowrap; }
table.list tr:hover td { background: #fafcff; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.tag.wait { background: #fff7e6; color: #d48806; }
.tag.paid { background: #e6f4ff; color: #1677ff; }
.tag.done { background: #f6ffed; color: #389e0d; }
.tag.fail { background: #fff2f0; color: #cf1322; }
.tag.cancel { background: #f5f5f5; color: #999; }
.tag.warn { background: #fff2f0; color: #cf1322; }
.tag.due14 { background: #fffbe6; color: #ad6800; }
.tag.safe { background: #f6ffed; color: #389e0d; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.stat .n { font-size: 26px; font-weight: 700; color: #1677ff; }
.stat .l { font-size: 13px; color: #888; margin-top: 2px; }
.stat.green .n { color: #52c41a; }
.stat.orange .n { color: #fa8c16; }
.stat.red .n { color: #ff4d4f; }

.topbar { background: #001529; color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar .brand { font-size: 16px; font-weight: 600; }
.topbar a { color: #a9c7e8; margin-left: 14px; font-size: 13px; }
.topbar a:hover { color: #fff; }

.filterbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filterbar select, .filterbar input { width: auto; min-width: 120px; }
.muted { color: #999; font-size: 12px; }
.mt { margin-top: 14px; }
.flex { display: flex; gap: 8px; align-items: center; }
.pager { margin-top: 14px; display: flex; gap: 6px; }
.pager a, .pager span { padding: 5px 11px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
.pager .cur { background: #1677ff; color: #fff; border-color: #1677ff; }