/* icons.css — 统一矢量图标的排版规则（前台与后台共用）
   所有 SVG 由 js/ui/icons.js 输出，尺寸由所在容器通过 CSS 变量 --ic 控制。 */

.jf-icon{
  display:inline-block;vertical-align:-.15em;flex:0 0 auto;
  width:var(--ic,20px);height:var(--ic,20px);
}
.jf-brand{stroke-width:1.7}
.jf-pay{flex:0 0 auto}

/* 品牌：渐变圆角块 + 细微投影，替换原来的 🎒 Emoji */
.brand-logo,[data-site-logo]{
  display:inline-grid;place-items:center;
  width:34px;height:34px;flex:0 0 auto;line-height:1;
  border-radius:11px;overflow:hidden;
  box-shadow:0 6px 14px -8px rgba(37,99,235,.85);
  font-size:22px;               /* 兼容后台仍填 Emoji 的情况 */
}
.brand-logo .jf-icon,[data-site-logo] .jf-icon{width:100%;height:100%;border-radius:11px}
.tb-brand [data-site-logo]{width:30px;height:30px;border-radius:9px}
.tb-brand [data-site-logo] .jf-icon{border-radius:9px}
.brand-logo:not(:has(.jf-icon)),[data-site-logo]:not(:has(.jf-icon)){
  background:linear-gradient(135deg,#eff6ff,#e0e7ff);box-shadow:none;
}
.as-logo{font-size:0;background:rgba(255,255,255,.2)}
.as-logo .jf-icon{width:30px;height:30px}

/* 侧栏与抽屉 */
.si-icon{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  font-size:16px;color:#64748b}
.si-icon .jf-icon{--ic:19px}
.side-item:hover .si-icon,.side-item.active .si-icon{color:#2563eb}

.sv-title,.ma-btn,.admin-tab,.br-icon,.td-icon,.li-icon,.feature-icon,
.modal-icon,.panel h3,.quick-icon,.list-head,.block h2,.user-page .panel h3{
  /* 具体图标尺寸由下方规则覆盖 */
}
.sv-title{display:flex;align-items:center;gap:7px}
.sv-title .jf-icon{--ic:17px;color:#d97706}
.side-vip.active .sv-title .jf-icon{color:#059669}
.ma-btn{--ic:18px}
.ma-btn .jf-icon{color:#64748b}
.ma-btn.vip .jf-icon{color:#d97706}
.icon-btn{--ic:19px}
.icon-btn .jf-icon{color:#334155}
.icon-btn:hover .jf-icon{color:#2563eb}
.drawer-close{--ic:15px}

/* 卡片 / 最新上架 / 详情 */
.card-icon,.lc-icon,.detail-icon,.td-swatch,.li-icon{
  display:grid;place-items:center;line-height:1;
}
.card-icon{--ic:26px;width:46px;height:46px;font-size:24px}
.card-icon .jf-icon{color:#1d4ed8}
.lc-icon{--ic:21px;width:38px;height:38px;font-size:19px}
.lc-icon .jf-icon{color:#1d4ed8}
.detail-icon{--ic:36px;width:76px;height:76px;font-size:36px}
.detail-icon .jf-icon{color:#1d4ed8}
.li-icon{--ic:22px;width:40px;height:40px;font-size:20px}
.li-icon .jf-icon{color:#2563eb}
.quick-icon{--ic:24px;display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:#eff6ff;font-size:22px}
.quick-icon .jf-icon{color:#2563eb}
.feature-icon{--ic:21px;width:38px;height:38px;font-size:19px}
.feature-icon .jf-icon{color:#2563eb}
.modal-icon{--ic:34px;width:56px;height:56px;font-size:30px}
.modal-icon .jf-icon{color:#2563eb}
.panel h3 .jf-icon,.block h2 .jf-icon,.page-head h1 .jf-icon{--ic:19px;color:#2563eb}
.shot{--ic:34px;display:grid;place-items:center}
.shot .jf-icon{color:#64748b}
.benefits li .jf-icon{--ic:17px;color:#16a34a}

/* 后台 Tab、区块行、表格图标 */
.admin-tab{--ic:17px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.admin-tab .jf-icon{color:currentColor}
.br-icon{--ic:20px;display:grid;place-items:center;width:24px;color:#2563eb}
.td-icon{--ic:21px;font-size:20px}
.td-swatch{--ic:20px}
.td-swatch .jf-icon{color:#1d4ed8}
.admin-tab.active .jf-icon{color:#fff}

/* 复用的行内小图标 */
.jf-inline{--ic:15px;vertical-align:-.2em;margin-right:3px}

/* 支付：渠道卡、收银台 */
.pay-channels{display:grid;gap:10px;margin:16px 0 4px}
.pay-channel{
  display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  border:1.5px solid #e2e8f0;border-radius:13px;background:#fff;transition:.18s;
}
.pay-channel:hover{border-color:#93c5fd;background:#f8fbff}
.pay-channel.sel{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.pay-channel input{accent-color:#2563eb;width:17px;height:17px;flex:0 0 auto}
.pay-channel .jf-pay{width:30px;height:30px}
.pc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pc-main b{font-size:14px;font-weight:700;color:#0f172a}
.pc-main small{font-size:12px;color:#64748b;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-tag{font-size:11px;font-weight:700;color:#b45309;background:#fef3c7;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.pay-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:13px 16px;margin-bottom:6px;
}
.pay-summary span{font-size:13px;color:#475569}
.pay-summary b{font-size:22px;font-weight:800;color:#dc2626}
.pay-qr{
  width:168px;height:168px;margin:14px auto 8px;border-radius:14px;
  border:1px solid #e2e8f0;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px -18px rgba(15,23,42,.5);position:relative;overflow:hidden;
}
.pay-qr .jf-icon{--ic:120px;color:#0f172a;opacity:.82}
/* 真实二维码：SVG 随容器缩放并保留静区（白边），避免被固定尺寸裁切导致扫不出 */
.pay-qr svg{display:block;width:100%;height:100%}
.pay-qr .qr-img{display:block;width:100%;height:100%;object-fit:contain}
.pay-qr::after{
  content:'演示码 · 不可扫码';position:absolute;bottom:0;left:0;right:0;
  background:rgba(15,23,42,.82);color:#fff;font-size:11px;text-align:center;padding:5px 0;
}
/* 真实二维码不盖底部标签，提示改由下方文字承担 */
.pay-qr.real::after{display:none}
.pay-qr.live::after{content:'请使用对应的 App 扫码支付'}
.pay-state{text-align:center;font-size:13px;color:#475569;line-height:1.7}
.pay-state b{color:#0f172a}
.pay-steps{display:flex;justify-content:center;gap:8px;margin:12px 0 2px;flex-wrap:wrap}
.pay-steps span{font-size:11.5px;color:#64748b;background:#f1f5fb;border-radius:999px;padding:4px 10px}

/* 订单表 */
.order-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.order-table th{text-align:left;font-size:12px;color:#64748b;font-weight:700;
  padding:10px 8px;border-bottom:1px solid #eef2f8;white-space:nowrap}
.order-table td{padding:11px 8px;border-bottom:1px dashed #eef2f8;color:#334155;vertical-align:middle}
.order-table tr:last-child td{border-bottom:none}
.order-no{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.order-amount{font-weight:800;color:#dc2626;white-space:nowrap}
.pay-method-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.pay-method-tag .jf-pay{width:18px;height:18px}
.status-pill.wait{background:#fef3c7;color:#92400e}
.status-pill.paid{background:#dcfce7;color:#166534}
.status-pill.cancel{background:#f1f5f9;color:#64748b}
/* 订单状态标签在前台「我的订单」与后台「订单管理」都会用到，
   因此放在共用层，避免依赖只在后台加载的 pages-admin.css */
.status-pill{display:inline-block;font-size:11.5px;font-weight:700;
  padding:4px 11px;border-radius:999px;white-space:nowrap}

/* 后台支付设置：渠道分区 */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay-card{border:1px solid #e9eef6;border-radius:16px;padding:18px;background:#fff}
.pay-card.off{background:#f8fafc;opacity:.75}
.pay-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pay-card-head .jf-pay{width:34px;height:34px}
.pay-card-head b{font-size:15px;font-weight:800}
.pay-card-head small{display:block;font-size:12px;color:#64748b;margin-top:2px}
.pay-card .field{margin-bottom:13px}
.pay-card textarea.input{height:74px;resize:vertical;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.pay-warn{
  border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:12px;
  padding:12px 15px;font-size:12.5px;line-height:1.75;margin-bottom:16px;
}
.pay-warn b{font-weight:800}
.api-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:4px 10px;background:#f1f5fb;color:#475569}
.api-badge.live{background:#dcfce7;color:#166534}
.api-badge.demo{background:#fef3c7;color:#92400e}
@media (max-width:760px){ .pay-grid{grid-template-columns:1fr} }
@media (max-width:420px){
  .pay-channel .pc-tag{display:none}
  .pay-qr{width:150px;height:150px}
  .pay-qr .jf-icon{--ic:104px}
  .admin-tab{min-width:88px;padding:9px 8px;font-size:12.5px}
}