/* 我的账户页（me.html）样式 —— 复用 css/style.css 的变量与基础样式 */
.me-wrap { max-width: 900px; margin: 0 auto; padding: 26px 18px 70px; }
.me-card { background: #fff; border-radius: 16px; padding: 26px; box-shadow: var(--shadow); max-width: 460px; margin: 30px auto 0; }
.me-card h2 { color: var(--navy); font-size: 22px; margin-bottom: 6px; }
.me-card .muted { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.me-card label, .ref-link-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.me-card input, .ref-link-label input {
  width: 100%; margin-top: 5px; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 15px; font-family: inherit;
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; font-size: 14px; font-family: inherit; color: var(--muted); }
.auth-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-main { width: 100%; padding: 13px; border: none; border-radius: 12px; background: var(--accent);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 6px; }
.btn-main:hover { background: #0d625c; }
.tip { font-size: 13px; margin-top: 10px; min-height: 18px; color: var(--muted); }
.tip.err { color: #c0392b; }

.me-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 16px; }
.me-head h2 { color: var(--navy); font-size: 22px; }
.me-head .muted { font-size: 13px; color: var(--muted); margin-top: 4px; }
.balance-box { text-align: right; }
.balance-box span { display: block; font-size: 12px; color: var(--muted); }
.balance-box strong { display: block; font-size: 26px; color: #d33400; margin: 2px 0 8px; }
.btn-mini { border: none; border-radius: 999px; padding: 8px 18px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-mini.danger { background: #fdecec; color: #c0392b; }

.me-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.me-tab { white-space: nowrap; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 14px; font-family: inherit; color: var(--muted); }
.me-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.me-panel { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }
.me-panel h3 { color: var(--navy); font-size: 17px; margin-bottom: 12px; }
.me-panel .muted { font-size: 13px; color: var(--muted); }

.o-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.o-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.o-no { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--navy); }
.o-time { font-size: 12px; color: var(--muted); margin-left: auto; }
.o-line { font-size: 13.5px; color: #374151; line-height: 1.9; }
.o-line .pay { color: #d33400; }
.o-line .bonus { color: var(--green); }
.o-actions { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.pill { font-size: 12px; padding: 3px 11px; border-radius: 999px; }
.pill.ok { background: #dcfce7; color: var(--green); }
.pill.wait { background: #fef3c7; color: #b45309; }
.pill.off { background: #f1f5f9; color: var(--muted); }

.tier-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tier { border: 2px solid var(--line); border-radius: 14px; background: #fff; padding: 16px 12px; cursor: pointer;
  font-family: inherit; text-align: center; transition: all .15s ease; }
.tier:hover { border-color: var(--accent); background: #f0fdfa; }
.tier strong { display: block; font-size: 19px; color: var(--navy); }
.tier span { display: block; font-size: 13px; color: #d33400; margin: 4px 0 2px; }
.tier small { font-size: 12px; color: var(--muted); }
.recharge-ok { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px; padding: 14px; font-size: 14px; line-height: 1.9; margin-top: 12px; }

.coupon { display: flex; gap: 14px; align-items: center; border: 1px dashed #f0c36d; background: #fffbf0;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.coupon.used { border-color: var(--line); background: #f8fafc; opacity: .7; }
.c-amount { font-size: 22px; font-weight: 800; color: #d33400; min-width: 74px; text-align: center; }
.coupon.used .c-amount { color: var(--muted); }
.c-body strong { display: block; font-size: 15px; color: var(--navy); }
.c-body span { font-size: 13px; color: var(--muted); }
.c-body small { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; }

.cash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cash-table th, .cash-table td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; }
.cash-table th { background: #f0f3f9; color: var(--muted); font-weight: 600; font-size: 12px; }
.cash-table .plus { color: var(--green); font-weight: 700; }
.cash-table .minus { color: #d33400; font-weight: 700; }

.ref-box { display: flex; align-items: center; gap: 14px; background: #f0f7ff; border: 1px solid #cfe0ff;
  border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.ref-box span { font-size: 13px; color: var(--muted); }
.ref-box strong { font-size: 24px; letter-spacing: 2px; color: var(--navy); font-family: ui-monospace, Menlo, monospace; }
.ref-box .btn-mini { margin-left: auto; }

@media (max-width: 640px) {
  .me-head { flex-direction: column; align-items: flex-start; }
  .balance-box { text-align: left; }
  .coupon { flex-direction: column; align-items: flex-start; }
  .c-amount { text-align: left; }
}

/* ---------- 订单付款区 ---------- */
.pay-box { border: 2px solid var(--accent); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; background: #f0fdfa; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-head h3 { font-size: 16px; color: var(--navy); }
.btn-mini.ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.pay-amount { font-size: 15px; margin: 10px 0 6px; }
.pay-amount strong { font-size: 26px; color: #d33400; }
.pay-picks { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.pay-pick { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; font-family: inherit; }
.pay-pick.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.pay-detail { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 14px; }
.pay-detail img { width: 168px; height: 168px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pay-detail .pay-info { font-size: 13.5px; line-height: 2; color: #374151; }
.pay-detail .pay-info b { color: var(--navy); font-size: 15px; }
.pay-upload { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.upload-btn { width: auto; padding: 10px 20px; font-size: 14px; margin: 0; cursor: pointer; }
.pay-progress { margin-top: 10px; font-size: 13.5px; }
.pay-progress .ok { color: var(--green); font-weight: 600; }
.pay-progress .wait { color: #b45309; }
.pay-progress .bad { color: #c0392b; }

/* 官方支付二维码 */
.wx-gate-qr { margin-top: 10px; text-align: center; }
.wx-gate-qr img { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* hidden 属性必须真的隐藏（display:flex 等会覆盖默认样式） */
[hidden] { display: none !important; }