/* 面板在官网账号区样式（app.css）之上多出来的那一点。 */
.wrap.wide{max-width:760px}
/* 官网的 .top 自带 560px 宽和左右内边距（它在 .wrap 外面用）；面板把它放在 .wrap 里，要和卡片对齐 */
.wrap .top{max-width:none;padding:var(--s2) 0 var(--s5)}
.top .home{font-size:15px}
.top nav a[aria-current="page"]{color:var(--t1);font-weight:600}
h1.pg{font-size:22px;margin-top:var(--s2)}
h2.hd{font-size:13px;font-weight:600;color:var(--t2);letter-spacing:.04em;margin:var(--s7) 0 var(--s3)}

/* 邀请码：一眼能抄下来 */
.code{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.code .c{font:600 28px/1.2 var(--mono);letter-spacing:.14em}
.code button{width:auto;margin:0;padding:9px 18px}
.code .rule{flex-basis:100%;color:var(--t2);font-size:13px}

/* 官网的 .card + .card 只管卡片接卡片；面板里 hero 后面接卡片、卡片后面接积分三格也要留同样的缝 */
.hero + .card,.card + .wallet{margin-top:var(--s3)}

/* 积分三格 */
.wallet{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.wallet .cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.wallet .k{color:var(--t2);font-size:13px}
.wallet .n{font:600 22px/1.3 var(--sans);font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.wallet .a{color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums}
.wallet .cell.main{border-color:var(--line2);background:var(--card2)}
.wallet .cell.main .n{color:var(--cy)}
@media (max-width:520px){
  .wallet{grid-template-columns:1fr}
  .wallet .cell{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
  .wallet .n{margin-top:0}
  /* 数字那一列右对齐：「待确认」下面那行小字比别的长，不对齐的话三个数左右错开 */
  .wallet .cell > div{text-align:right}
}

/* 三层付费好友 */
.tiers .kv .v b{color:var(--ok);font-weight:600;margin-left:var(--s3)}

/* 明细 */
.stmt .row{display:flex;justify-content:space-between;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line)}
.stmt .row:last-child{border-bottom:0}
.stmt .l{min-width:0}
.stmt .d{color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums}
.stmt .t{overflow-wrap:anywhere}
.stmt .s{color:var(--t2);font-size:12px}
.stmt .p{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.stmt .p.plus{color:var(--ok)}
.stmt .p.minus{color:var(--t2)}
/* 作废 / 扣回的那一笔没有到他手里：不许用「到账」的绿色画它 */
.stmt .p.gone{color:var(--t3);text-decoration:line-through}

/* 规则 */
.rules section + section{margin-top:var(--s6)}
.rules h2{font-size:16px;color:var(--t1);letter-spacing:0;text-transform:none;margin:0 0 var(--s2)}
.rules p{color:var(--t2);font-size:14px;line-height:1.8}
.rules p + p{margin-top:var(--s2)}
.rules b{color:var(--t1);font-weight:600}