/* 新订阅系统样式 */

.subscription-active {
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  margin-bottom: 20px;
}

.subscription-active h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 18px;
}

.quota-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.quota-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.quota-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.quota-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.quota-detail {
  font-size: 11px;
  color: var(--muted);
}

.subscription-empty {
  padding: 40px 20px;
  text-align: center;
}

.subscription-empty p {
  margin-bottom: 20px;
  color: var(--muted);
}

.package-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.package-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background: var(--panel);
}

.package-item h3 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--ink);
}

.package-item .price {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  margin: 8px 0;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.plan-card {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--panel);
  transition: all 0.2s;
}

.plan-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.plan-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--ink);
}

.plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 20px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}

.plan-features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-features li:before {
  content: "✓ ";
  color: var(--primary);
  font-weight: bold;
  margin-right: 8px;
}

/* 快速拆解按钮 */
.quick-analysis-banner {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.quick-analysis-banner h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink);
}

.quick-analysis-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* 官方模版标识 */
.template-official-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fbbf24;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  margin-left: 8px;
}

.template-official-badge:before {
  content: "⭐";
}

/* 额度不足提示 */
.quota-insufficient {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  color: #991b1b;
  font-size: 13px;
}

.quota-insufficient a {
  color: #991b1b;
  text-decoration: underline;
  font-weight: 600;
}

/* 使用统计 */
.template-usage-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.template-usage-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.billing-ledger .table{min-width:0;width:100%}
.billing-ledger td{white-space:normal;overflow-wrap:anywhere}
.billing-page .metric{border:0}

/* Monthly membership comparison and the independent bean wallet. */
.billing-page{max-width:1280px;gap:28px}
.billing-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 0}
.billing-eyebrow{font-size:13px;letter-spacing:.08em;color:var(--mint);margin:0 0 10px}
.billing-intro h2{font-size:clamp(24px,2.3vw,34px);line-height:1.35;letter-spacing:-.035em;margin:0;text-wrap:balance}
.billing-intro .sub{margin:10px 0 0}
.billing-period{flex-shrink:0;border:1px solid var(--line);padding:8px 14px;border-radius:6px;font-size:13px;color:var(--muted)}
.membership-status{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:center;gap:24px;padding:22px 26px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.membership-status h3{font-size:19px;margin:4px 0 6px}.membership-status p{margin:5px 0 0}
.membership-status strong{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}.membership-status strong span{font-size:17px;color:var(--muted)}
.membership-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.membership-card{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 20px}
.membership-featured{border-color:var(--mint);background:#1a211b}
.membership-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px}.membership-card-head h3{font-size:19px;margin:0}
.membership-label{font-size:11px;color:var(--mint);white-space:nowrap}
.membership-description{font-size:13px;min-height:46px;margin:12px 0 18px}
.membership-quota{display:flex;align-items:baseline;gap:8px}.membership-quota strong{font-size:52px;line-height:1.1;letter-spacing:-.05em;font-weight:600;font-variant-numeric:tabular-nums}.membership-quota span{font-size:14px;color:var(--muted)}
.membership-quota+.hint{margin:7px 0 24px}
.membership-gift{font-size:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.membership-gift b{color:var(--mint);font-weight:600}
.membership-features{list-style:none;padding:0;margin:20px 0 28px;color:var(--muted);font-size:13px;line-height:2.2}.membership-features li:before{content:'✓';color:var(--mint);margin-right:8px}
.membership-footer{margin-top:auto}.membership-footer p{margin:0 0 14px}.membership-footer strong{font-size:20px;font-weight:600}.membership-footer span{font-size:12px;color:var(--muted)}.membership-footer .btn{width:100%;min-height:42px}
.membership-note{margin:16px 0 0;line-height:1.8}
.billing-bottom{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.billing-bottom .panel{min-width:0;padding:26px}
.bean-balance{display:flex;align-items:baseline;gap:12px;margin:22px 0 14px}.bean-balance strong{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.bean-balance span{font-size:13px;color:var(--muted)}
.bean-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;list-style:none;padding:18px 0;margin:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.bean-prices li{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.bean-prices b{font-weight:500;color:var(--ink);white-space:nowrap}
.bean-redemption form{margin:26px 0 22px}.bean-redemption input{width:100%;font-size:15px}.bean-redemption .field{margin:0 0 16px}.bean-redemption form>.btn{width:100%}.bean-redemption [role=status]{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:1150px){.membership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.membership-description{min-height:0}.bean-prices{grid-template-columns:1fr}}
@media(max-width:650px){.billing-page{gap:22px}.billing-intro{align-items:flex-start}.billing-period{display:none}.membership-status{grid-template-columns:1fr 1fr;gap:20px;padding:20px}.membership-status>div:first-child{grid-column:1/-1}.membership-status>.btn{grid-column:1/-1}.billing-bottom{grid-template-columns:1fr}.membership-card{padding:20px 16px}.membership-card-head{align-items:flex-start;flex-direction:column;min-height:48px}.membership-quota strong{font-size:44px}.membership-gift{font-size:12px}.membership-description{min-height:46px}.membership-footer strong{font-size:17px}.membership-footer span{display:block;margin-top:5px}.membership-features{font-size:12px}.billing-bottom .panel{padding:22px}}
@media(max-width:380px){.membership-grid{grid-template-columns:1fr}.membership-card-head{flex-direction:row;min-height:26px}.membership-description{min-height:0}}
.billing-ledger .table{min-width:640px}
.billing-ledger td:first-child{max-width:280px}
.billing-ledger td:nth-child(n+3){white-space:nowrap}
.billing-ledger .table{table-layout:fixed}
.billing-ledger th:first-child{width:40%}
.billing-ledger th:nth-child(2){width:30%}
.billing-ledger .table:not(.radar-hits) th:last-child,.billing-ledger .table:not(.radar-hits) td:last-child{position:static;background:transparent}