/* FXDog · 会员套餐与额度（vip.html 及 account.html 中的 #commerce，由 commerce.js 渲染）
   旧文件 /assets/commerce.css 保留给后台 admin 页面使用 */
#commerce{color:var(--text);font-size:var(--fs-14)}
#commerce [hidden]{display:none}
#commerce p{color:var(--muted);line-height:1.75}
#commerce .muted{color:var(--muted);font-size:var(--fs-12)}
#commerce a{color:var(--primary-text)}

/* 页面头部（#hero 与统一 page-hero 对齐） */
#commerce #hero{padding:var(--sp-10) 0 var(--sp-8);border-bottom:1px solid var(--border);margin-bottom:var(--sp-8)}
#commerce #hero h1{font-size:var(--fs-44);line-height:1.25;margin:var(--sp-3) 0;max-width:780px}
#commerce #hero p{font-size:var(--fs-16);max-width:720px;margin:0 0 var(--sp-5)}
#commerce .pill{display:inline-flex;align-items:center;padding:6px var(--sp-3);border-radius:var(--r-full);background:var(--panel-2);border:1px solid var(--border);color:var(--muted);font-size:var(--fs-12)}

/* 状态消息：统一 alert 外观 */
#commerce #message{display:none;margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border:1px solid var(--primary-border);border-left-width:3px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--text);font-size:var(--fs-14);white-space:pre-wrap}

/* 卡片 */
#commerce .card{padding:var(--sp-6);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--sp-6)}
#commerce .card h2,#commerce h2{font-size:var(--fs-20);margin:0 0 var(--sp-3)}

/* 套餐 */
#commerce .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-6)}
#commerce .grid>.fx-state,#commerce .grid>.fx-skeleton-grid{grid-column:1/-1}
#commerce .plan-card{display:flex;flex-direction:column;margin:0;transition:border-color .15s var(--ease)}
#commerce .plan-card:hover{border-color:var(--primary-border)}
#commerce .plan-card h2{font-size:var(--fs-20);margin:0}
#commerce .price{font-size:var(--fs-32);font-weight:700;color:var(--text-strong);margin:var(--sp-5) 0 var(--sp-1);font-variant-numeric:tabular-nums}
#commerce .price small{font-size:var(--fs-14);font-weight:500;color:var(--muted)}
#commerce .plan-allowance{font-size:var(--fs-14);color:var(--text);margin:0 0 var(--sp-4)}
#commerce .plan-allowance strong{color:var(--primary-text);font-variant-numeric:tabular-nums}
#commerce .plan-benefits{list-style:none;padding:var(--sp-4) 0 0;margin:0 0 var(--sp-6);border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-14);line-height:2}
#commerce .plan-benefits li::before{content:"✓";color:var(--primary-text);margin-right:var(--sp-2)}
#commerce .plan-card>button{margin-top:auto;width:100%}

/* 按钮：commerce.js 输出裸 <button>，按统一组件规范渲染 */
#commerce button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control-h);padding:0 var(--sp-5);border:1px solid var(--primary);border-radius:var(--r-md);background:var(--primary);color:var(--primary-ink);font:inherit;font-size:var(--fs-14);font-weight:600;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
#commerce button:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
#commerce button:disabled{opacity:.5;cursor:not-allowed}
#commerce button.secondary,#commerce .secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
#commerce button.secondary:hover{border-color:var(--primary);color:var(--primary-text);background:transparent}
#commerce .danger{background:var(--down);border-color:var(--down);color:#fff}
#commerce .fx-state button{min-height:36px}

/* 表单 */
#commerce form{max-width:620px}
#commerce label{display:block;color:var(--muted);margin-top:var(--sp-3);font-size:var(--fs-14)}
#commerce input,#commerce select,#commerce textarea{display:block;width:100%;margin:var(--sp-2) 0 var(--sp-4)}
#commerce label input[type="checkbox"]{display:inline-block;width:auto;margin:0 var(--sp-2) 0 0}
#commerce form button{margin:var(--sp-1) var(--sp-2) var(--sp-1) 0}

/* 余额 */
.balance-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border);padding-bottom:var(--sp-5);margin-bottom:var(--sp-4)}
#commerce .balance-top h2{font-size:var(--fs-14);color:var(--muted);font-weight:500;margin:0 0 var(--sp-2)}
.balance-number{font-size:var(--fs-44);font-weight:700;line-height:1.1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.balance-number small{font-size:var(--fs-14);font-weight:400;color:var(--muted)}
.balance-meta{display:grid;gap:var(--sp-2)}
.balance-grant{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);font-size:var(--fs-14);padding:var(--sp-2) 0}
.balance-grant strong{color:var(--primary-text);font-variant-numeric:tabular-nums}
.balance-grant time{font-size:var(--fs-12);color:var(--muted)}
.account-ledger{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.account-ledger summary{cursor:pointer;font-size:var(--fs-14);color:var(--primary-text)}
.account-ledger-scroll{overflow-x:auto}
.account-ledger table{width:100%;min-width:480px;margin-top:var(--sp-4);border-collapse:collapse;font-variant-numeric:tabular-nums}
.account-ledger th,.account-ledger td{font-size:var(--fs-12);text-align:left;padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border)}
.account-ledger th{color:var(--muted);font-weight:500}
.account-ledger .ledger-expired{opacity:.6}

/* 订单 / 付款 */
#commerce .order{border-top:1px solid var(--border);padding:var(--sp-5) 0}
#commerce .order:first-of-type{border-top:0}
#commerce .payment-qr{display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap;margin:var(--sp-5) 0}
#commerce .payment-qr img{background:#fff;border-radius:var(--r-md);padding:var(--sp-2);flex-shrink:0}
#commerce code,#commerce .payment-address{display:block;overflow-wrap:anywhere;word-break:break-all;margin:var(--sp-3) 0;padding:var(--sp-3);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--fs-12);color:var(--text)}

/* 旗舰店列表（#brokers） */
#commerce #brokers .quota-rules{margin-top:0;padding:0;border:0;background:none}
#commerce .flagship-actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.commerce-note,#commerce .commerce-note{font-size:var(--fs-12);color:var(--muted);margin-top:var(--sp-4)}

/* 常见问题 */
.plan-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border)}
.plan-details h3{font-size:var(--fs-16);margin:0 0 var(--sp-2)}
.plan-details p{font-size:var(--fs-14);line-height:1.8;color:var(--muted);margin:0}

@media (max-width:960px){#commerce .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  #commerce #hero{padding:var(--sp-6) 0;margin-bottom:var(--sp-6)}
  #commerce #hero h1{font-size:var(--fs-32)}
  #commerce #hero p{font-size:var(--fs-14)}
  #commerce .grid,.plan-details{grid-template-columns:1fr}
  #commerce .card{padding:var(--sp-5)}
  .balance-number{font-size:var(--fs-32)}
}

/* ===== v4：套餐卡片平面化；价格层级更清楚，无渐变顶条 / 发光 / 上浮 ===== */
#commerce .card{border-radius:var(--r-lg)}
#commerce .plan-card{padding:28px}
#commerce .plan-card h2{font-size:var(--fs-16);font-weight:650;color:var(--text-strong)}
#commerce .price{font-size:36px;letter-spacing:-.01em;margin:var(--sp-4) 0 var(--sp-1)}
#commerce .plan-allowance{margin-bottom:var(--sp-5)}
#commerce .pill{border-radius:var(--r-sm)}
#commerce button{border-radius:var(--r-md)}
.plan-details{gap:var(--sp-8)}

/* ===== v5：页头按统一字号；套餐改为对比表（每行一个套餐，数字右对齐，细分隔线）。
   结构仍由 commerce.js 输出 article.plan-card；这里只用 CSS 把卡片排成表格行，JS 未改。 ===== */
#commerce #hero{padding:0 0 var(--sp-8);margin-bottom:var(--sp-10)}
#commerce #hero h1{font-size:var(--text-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0 0 var(--sp-2);max-width:780px}
#commerce #hero p{font-size:var(--text-body);line-height:var(--lh-body);margin:0}
#commerce #hero .pill{display:block;margin-top:var(--sp-3);padding:0;border:0;background:none;color:var(--subtle);font-size:var(--text-small);line-height:var(--lh-ui)}
#commerce .card h2,#commerce h2{font-size:var(--text-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading);margin:0 0 var(--sp-2)}
#commerce .card{padding:var(--sp-6);margin-bottom:var(--sp-8)}

.plan-table{--plan-cols:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 176px;margin:0 0 var(--sp-8);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.plan-table:has(> #plans[hidden]){display:none}
.plan-table:has(> #plans > .fx-state){border:0;background:none}
.plan-table:has(> #plans > .fx-state) .plan-table-head{display:none}
.plan-table-head{display:grid;grid-template-columns:var(--plan-cols);align-items:center;gap:var(--sp-4);height:var(--row-h-head);padding:0 var(--sp-6);background:var(--panel-2);border-bottom:1px solid var(--border);color:var(--muted);font-size:var(--text-caption);font-weight:var(--fw-medium)}
.plan-table-head .num{text-align:right}
#commerce .plan-table #plans{display:block;margin:0}
#commerce .plan-table #plans>.fx-skeleton-grid{display:grid;grid-template-columns:1fr;gap:0}
#commerce .plan-table #plans>.fx-skeleton-grid>.fx-skeleton-card{border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;padding:var(--sp-4) var(--sp-6)}
#commerce .plan-table .plan-card{display:grid;grid-template-columns:var(--plan-cols);align-items:center;gap:0 var(--sp-4);min-height:72px;margin:0;padding:var(--sp-3) var(--sp-6);border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;transition:background-color .15s var(--ease)}
#commerce .plan-table .plan-card:hover{background:var(--panel-2);border-color:var(--border)}
#commerce .plan-table .plan-card h2{grid-column:1;grid-row:1;margin:0;font-size:var(--text-body);font-weight:var(--fw-semibold)}
#commerce .plan-table .plan-allowance{grid-column:2;grid-row:1;margin:0;text-align:right;color:var(--muted);font-size:var(--text-small)}
#commerce .plan-table .plan-allowance strong{color:var(--text-strong);font-size:var(--text-body);font-weight:var(--fw-semibold);margin-right:2px}
#commerce .plan-table .price{grid-column:3;grid-row:1;margin:0;text-align:right;font-size:var(--text-h3);font-weight:var(--fw-semibold);letter-spacing:0;line-height:1.2}
#commerce .plan-table .price small{margin-left:2px;font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--fw-regular)}
#commerce .plan-table .plan-card>button{grid-column:4;grid-row:1;justify-self:end;width:auto;min-width:144px;margin:0}
/* 三个套餐的权益相同：只在表格底部显示一次 */
#commerce .plan-table .plan-benefits{display:none}
#commerce .plan-table .plan-card:last-child{border-bottom:0}
#commerce .plan-table .plan-card:last-child .plan-benefits{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-6);grid-column:1/-1;grid-row:2;margin:var(--sp-3) calc(var(--sp-6) * -1) calc(var(--sp-3) * -1);padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border);background:var(--panel-2);font-size:var(--text-caption);line-height:var(--lh-ui)}
#commerce .plan-table .plan-card:last-child:hover{background:none}
#commerce .plan-table .plan-benefits li::before{margin-right:var(--sp-1)}

/* 余额 / 订单数字 */
.balance-number{font-size:var(--text-h1);font-weight:var(--fw-bold);line-height:1.2}
#commerce .balance-top h2{font-size:var(--text-small)}
.account-ledger th:not(:first-child),.account-ledger td:not(:first-child){text-align:right;font-family:var(--font-num)}
.account-ledger th,.account-ledger td{height:44px;padding:var(--sp-2)}

/* 状态 */
#commerce form button{margin:var(--sp-1) var(--sp-2) var(--sp-1) 0}
#commerce button:active{background:color-mix(in srgb,var(--primary) 82%,#000)}
#commerce button.secondary:active{background:var(--panel-2)}
#commerce button:disabled,#commerce button:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--primary);border-color:var(--primary)}
#commerce button.secondary:disabled:hover{background:transparent;border-color:var(--border-strong);color:var(--text)}
#commerce button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.plan-details{gap:var(--sp-8);margin-top:var(--space-block);padding-top:var(--sp-8)}
.plan-details h3{font-size:var(--text-body);font-weight:var(--fw-semibold)}

@media (max-width:720px){
  #commerce #hero{padding:0 0 var(--sp-6);margin-bottom:var(--sp-6)}
  .plan-table-head{display:none}
  #commerce .plan-table .plan-card{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-4);padding:var(--sp-4)}
  #commerce .plan-table .plan-card h2{grid-column:1;grid-row:1}
  #commerce .plan-table .price{grid-column:2;grid-row:1}
  #commerce .plan-table .plan-allowance{grid-column:1/-1;grid-row:2;text-align:left}
  #commerce .plan-table .plan-card>button{grid-column:1/-1;grid-row:3;width:100%;margin-top:var(--sp-2)}
  #commerce .plan-table .plan-card:last-child .plan-benefits{grid-row:4;margin:var(--sp-3) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);padding:var(--sp-3) var(--sp-4)}
}
/* 表格行内按钮用描边样式，避免一列三个实心按钮；悬停 / 按下转为主色 */
#commerce .plan-table .plan-card>button{background:transparent;border-color:var(--primary-border);color:var(--primary-text)}
#commerce .plan-table .plan-card>button:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
#commerce .plan-table .plan-card>button:active{background:color-mix(in srgb,var(--primary) 82%,#000);color:var(--primary-ink)}
#commerce .plan-table .plan-card>button:disabled,#commerce .plan-table .plan-card>button:disabled:hover{background:transparent;border-color:var(--border-strong);color:var(--muted)}