/* 账号、邀请券、定价与锁态：与 app.css 共用同一套设计令牌，不新增配色。 */

.auth-wrap{max-width:460px;margin:12px auto 60px}
.auth-card{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:32px;box-shadow:var(--shadow-soft);
}
.auth-card h1{font-family:var(--serif);font-size:32px;font-weight:600;margin:6px 0 8px;letter-spacing:.02em}
.auth-sub{font-size:13px;line-height:1.8;color:var(--ink-2);margin:0 0 24px}
.auth-field{display:block;margin:0 0 16px}
.auth-field span{display:block;font-size:11px;letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px}
.auth-field input{
  width:100%;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.5);
  padding:12px 14px;font-size:14px;color:var(--ink);outline:none;
}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(178,59,46,.10)}
.auth-field small{display:block;margin-top:6px;font-size:10px;color:var(--ink-3)}
.auth-error{
  margin:0 0 16px;padding:10px 12px;border-left:3px solid var(--accent);
  background:rgba(178,59,46,.06);border-radius:0 8px 8px 0;font-size:12px;color:var(--accent-deep);
}
.auth-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.auth-actions .btn{min-width:140px}
.auth-switch{margin:20px 0 0;font-size:12px;color:var(--ink-3)}
.auth-switch button{border:0;background:none;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:12px;padding:0}
.auth-note{margin:14px 0 0;font-size:10px;line-height:1.8;color:var(--ink-3)}

.account-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow-soft)}
.account-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.account-avatar{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--paper-deep);border:1px solid var(--line);font-family:var(--serif);font-size:22px;
}
.account-top h2{font-family:var(--serif);font-size:22px;margin:0;font-weight:600}
.account-top p{margin:4px 0 0;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 18px}
.account-stat{background:var(--card);padding:14px 16px}
.account-stat b{display:block;font-family:var(--serif);font-size:24px;line-height:1.2}
.account-stat span{font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.account-actions{display:flex;flex-wrap:wrap;gap:10px}
.unlock-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.unlock-chip{border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11px;color:var(--ink-2);background:rgba(255,255,255,.3)}

.status-tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.08em;border:1px solid currentColor;
}
.status-tag.ok{color:#4f6b46;background:rgba(79,107,70,.08)}
.status-tag.warn{color:#8a5a2b;background:rgba(138,90,43,.09)}
.status-tag.off{color:var(--ink-3);background:rgba(30,27,22,.05)}

.invite-code-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.invite-code{
  font-family:var(--en);font-size:20px;letter-spacing:.14em;padding:10px 16px;border-radius:12px;
  border:1px dashed var(--accent);color:var(--accent-deep);background:rgba(178,59,46,.05);
}
.invite-link{
  flex:1 1 260px;min-width:0;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid var(--line);padding:8px 2px;
}
.coupon-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft);margin-bottom:20px}
.coupon-panel h2{font-family:var(--serif);font-size:22px;margin:0 0 6px;font-weight:600}
.coupon-panel p{margin:0 0 16px;font-size:12px;line-height:1.8;color:var(--ink-3)}
.coupon-empty{padding:18px 0;font-size:12px;color:var(--ink-3)}
.book-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.book-pick{
  display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.35);padding:10px;cursor:pointer;text-align:left;font-size:12px;color:var(--ink-2);
  transition:border-color .18s,background .18s;
}
.book-pick:hover{border-color:var(--ink-3)}
.book-pick[aria-pressed="true"]{border-color:var(--accent);background:rgba(178,59,46,.07);color:var(--ink)}
.book-pick[disabled]{opacity:.45;cursor:not-allowed}
.book-pick .pick-mark{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:10px;flex:none}
.book-pick[aria-pressed="true"] .pick-mark{background:var(--accent);border-color:var(--accent);color:#fff7ee}
.pick-count{font-size:11px;color:var(--ink-3);letter-spacing:.06em;margin-left:6px}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:22px 0}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.plan-card.featured{border-color:rgba(178,59,46,.36);background:linear-gradient(160deg,rgba(178,59,46,.055),rgba(250,246,236,.9))}
.plan-price{font-family:var(--serif);font-size:44px;line-height:1.1;margin:10px 0 2px}
.plan-price small{font-size:13px;font-family:var(--sans);color:var(--ink-3);margin-left:4px}
.plan-card ul{margin:14px 0 22px;padding:0;list-style:none;display:grid;gap:8px}
.plan-card li{font-size:12px;line-height:1.7;color:var(--ink-2);padding-left:16px;position:relative}
.plan-card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.plan-card .btn{margin-top:auto}
.plan-note{font-size:10px;line-height:1.8;color:var(--ink-3);margin:10px 0 0}
.lock-body{font-size:13px;line-height:1.85;color:var(--ink-2)}
.lock-body p{margin:0 0 14px}
.lock-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lock-free-note{font-size:11px;color:var(--ink-3);margin-top:12px}

@media (max-width:560px){
  .auth-wrap{margin:4px auto 40px}
  .auth-card{padding:24px 20px}
  .account-stats{grid-template-columns:repeat(3,1fr)}
  .plan-price{font-size:36px}
}

.pay-sheet .sheet-title{font-family:var(--serif);font-size:28px;margin:4px 0 16px;font-weight:600}
.pay-body{display:grid;gap:12px;justify-items:center;text-align:center;padding-bottom:6px}
.pay-qr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;place-items:center}
.pay-qr svg{width:200px;height:200px;display:block}
.pay-price{font-family:var(--serif);font-size:20px;margin:2px 0 0}
.pay-hint{font-size:12px;line-height:1.8;color:var(--ink-3);margin:0}
.pay-hint code{font-family:var(--en);color:var(--ink-2);word-break:break-all}
.pay-trade{font-size:11px;color:var(--ink-3);margin:0;letter-spacing:.04em}
.pay-trade code{font-family:var(--en);color:var(--ink-2)}
.pay-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}

/* 登录弹窗：宽屏是居中的独立对话框，窄屏退回成底部抽屉（沿用 .sheet 的行为）。
   只在 ≥821px 改写 transform，避免和底部抽屉的 translate(-50%,104%) 打架。 */
.auth-sheet .sheet-title{font-family:var(--serif);font-size:26px;margin:4px 0 16px;font-weight:600}
.auth-sheet .eyebrow{margin-bottom:2px}
.auth-sheet-body{font-size:13px}
@media (min-width:821px){
  .auth-sheet{
    top:50%;bottom:auto;left:50%;
    width:min(440px,calc(100vw - 48px));
    max-height:min(86vh,720px);
    border-radius:26px;
    padding:30px 30px 26px;
    box-shadow:0 26px 70px rgba(0,0,0,.26);
    transform:translate(-50%,-47%) scale(.98);
    opacity:0;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  }
  .auth-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .auth-sheet .sheet-grip{display:none}
  .auth-sheet .auth-actions .btn{min-width:0;flex:1 1 auto}
}