/**
 * 商城与用户中心样式
 */

/* ==================== 通用页面头 ==================== */
/* 卡片化：内页（用户中心/订单/地址/工具中心）没有 hero，标题原先裸排在
   随机背景图上，文字直接压图非常难看。统一给卡片底。 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  box-shadow: var(--shadow-xs);
  position: relative;
}
/* base.css 给 .page-header 配的渐变下划线在卡片里多余，关掉 */
.page-header::after { content: none; }

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-header p {
  color: var(--text-2);
  margin-top: 0.25rem;
}

/* ==================== 商城头部 ====================
   已与 .page-header 统一：商城/购物车页的头部标记改用 page-header 类，
   这里保留一份「同款卡」规则兜底（旧缓存/第三方页引用 shop-header 时不再裸排）。
   2026-09-27：全站内页顶栏统一为 page-header 卡片样式。 */
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  box-shadow: var(--shadow-xs);
  position: relative;
}
.shop-header::after { content: none; }

.shop-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shop-header h1 .fas { color: var(--primary); font-size: .82em; }

.shop-header p {
  color: var(--text-2);
  margin-top: 0.25rem;
}

/* ==================== 商品网格 ==================== */
/* ==================== 商城公告条 ====================
 * 后台「商城设置 → 商城公告」的出口；此前后台能存值、前台没有任何渲染，
 * 所以一直是「设了没效果」。留空时整块不输出（见 shop.php）。 */
.shop-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .95rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text-2);
  font-size: .86rem;
  line-height: 1.65;
}
.shop-notice > .fas { color: var(--primary); margin-top: .2rem; flex-shrink: 0; }
.shop-notice-body { min-width: 0; word-break: break-word; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.product-image {
  aspect-ratio: 1/1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image .no-img {
  font-size: 2rem;
  color: var(--text-3);
}

.product-info {
  padding: 0.75rem 1rem 1rem;
}

.product-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.35rem;
}

.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.product-meta {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}

/* ==================== 购物车 ==================== */
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cart-item-image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.cart-item-sku {
  font-size: 0.8rem;
  color: var(--text-2);
  margin-top: 0.25rem;
}

.cart-item-price {
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.25rem;
}

/* ==================== 个人中心 ==================== */
.user-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* 余额 / 积分两个数值块：桌面端定宽靠右并排；窄屏各占一半，**仍然是一行**。
   加了「我的积分」这块之后，三个块按内容宽度挤，一旦放不下就整块折行，
   把整张卡片撑成两排 —— 这里把数值块的伸缩规则定死，避免wrap到第二排。 */
.user-card-header .user-info { flex: 1 1 200px; }
.user-card-header .user-balance {
  flex: 0 1 auto;
  min-width: 132px;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
@media (max-width: 640px) {
  .user-card-header { gap: .9rem; }
  .user-card-header .user-info { flex: 1 1 100%; }
  .user-card-header .user-balance {
    flex: 1 1 calc(50% - .45rem);
    text-align: left;
    padding-left: .85rem;
  }
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  font-size: 1.1rem;
}

.user-email {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-top: 0.25rem;
}

.user-balance {
  text-align: right;
}

.user-balance-label {
  font-size: 0.75rem;
  color: var(--text-3);
}

.user-balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* 快捷入口 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quick-action {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  display: block;
}

.quick-action-icon {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.quick-action-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.quick-action-meta {
  font-size: 0.75rem;
  color: var(--text-3);
}

/* 余额日志 */
.balance-log {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.balance-log-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg);
  border-radius: var(--radius-xs);
}

.balance-log-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-log-info {
  flex: 1;
}

.balance-log-type {
  font-weight: 500;
  font-size: 0.9rem;
}

.balance-log-time {
  font-size: 0.75rem;
  color: var(--text-3);
}

.balance-log-amount {
  font-weight: 700;
}

.balance-log-amount.positive { color: var(--success); }
.balance-log-amount.negative { color: var(--danger); }

/* ==================== 订单列表 ==================== */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.order-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.order-no {
  font-weight: 600;
  font-size: 0.9rem;
}

.order-type {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
}

.order-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-product {
  font-size: 0.9rem;
  font-weight: 500;
}

.order-count {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-left: 0.5rem;
}

.order-time {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}

.order-amount {
  font-weight: 700;
  color: var(--primary);
}

/* ==================== 支付页面 ==================== */
.pay-container { max-width: 600px; margin: 0 auto; }
.pay-header { text-align: center; margin-bottom: 1.5rem; }
.pay-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.pay-subtitle { color: var(--text-2); }
.pay-amount-box { background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 1.25rem; margin-bottom: 1.5rem; }
.pay-amount-row { display: flex; justify-content: space-between; padding: 0.5rem 0; }
.pay-amount-label { color: var(--text-2); }
.pay-btn-full { width: 100%; padding: 0.85rem; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; }
.pay-btn-success { background: var(--success); color: var(--text-onbrand); display: block; text-align: center; }
.pay-btn-alipay { background: var(--alipay); color: var(--text-onbrand); }
.pay-btn-alipay:hover { background: var(--alipay-hover); }
.pay-alert { background: var(--danger-soft); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; display: none; }
.pay-alert-content { display: flex; align-items: center; gap: 0.5rem; color: var(--danger); margin-bottom: 0.75rem; }
.pay-confirm-btn { background: var(--primary); color: var(--text-onbrand); border: none; padding: 0.6rem 1.5rem; border-radius: var(--radius-xs); cursor: pointer; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--scrim); display: none; align-items: center; justify-content: center; z-index: var(--z-overlay); }

/* ==================== 支付方式选择 ==================== */
.pay-methods-section { margin-bottom: 1.5rem; }
.pay-methods-title { font-weight: 600; margin-bottom: 0.75rem; }
.pay-method-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; cursor: pointer; transition: all 0.2s; }
.pay-method-item:hover { border-color: var(--primary); }
.pay-method-item.selected { border-color: var(--primary); background: var(--primary-soft); }
.pay-method-left { display: flex; align-items: center; gap: 0.75rem; }
.pay-method-icon { font-size: 1.5rem; width: 40px; text-align: center; }
.pay-method-icon.balance { color: var(--accent); }
.pay-method-icon.alipay { color: var(--alipay); }
.pay-method-info p { font-size: 0.9rem; }
.pay-method-info p:first-child { font-weight: 600; }
.pay-method-info p:last-child { color: var(--text-2); font-size: 0.8rem; }
.pay-method-check { color: var(--primary); display: none; }
.pay-method-disabled { opacity: 0.5; cursor: not-allowed; }
.pay-form { margin-bottom: 1rem; }
.pay-confirm-box { text-align: center; padding: 1.5rem; background: var(--bg-sunken); border-radius: var(--radius-sm); margin-bottom: 1rem; display: none; }
.pay-confirm-icon { font-size: 2rem; color: var(--primary); margin-bottom: 0.5rem; }
.pay-confirm-text { font-weight: 600; }
.pay-confirm-subtext { color: var(--text-2); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
.pay-cancel-link { display: block; text-align: center; color: var(--text-2); margin-top: 1rem; font-size: 0.9rem; }
.pay-cancel-link:hover { color: var(--text); }
.modal-btn { background: var(--primary); color: var(--text-onbrand); border: none; padding: 0.6rem 2rem; border-radius: var(--radius-xs); cursor: pointer; }

/* ==================== 支付结果页 ==================== */
.pay-result-container { max-width: 600px; margin: 3rem auto; }
.pay-result-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; }
.pay-result-icon { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 3rem; }
.pay-result-icon.success { background: var(--grad-success-soft); color: var(--success); }
.pay-result-icon.warning { background: var(--grad-warning-soft); color: var(--warning); }
.pay-result-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.pay-result-title.success { color: var(--success); }
.pay-result-title.warning { color: var(--warning); }
.pay-result-message { font-size: 1rem; color: var(--text-2); margin-bottom: 2rem; line-height: 1.6; }
.pay-result-details { background: var(--glass); border-radius: var(--radius-sm); padding: 1.5rem; margin-bottom: 2rem; text-align: left; }
.pay-result-detail-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.pay-result-detail-item:last-child { border-bottom: none; }
.pay-result-detail-label { color: var(--text-2); }
.pay-result-detail-value { font-weight: 600; }
.pay-result-actions { display: flex; gap: 1rem; justify-content: center; }
.pay-result-actions .btn { min-width: 120px; }
@media (max-width: 480px) {
  .pay-result-card { padding: 2rem 1.5rem; }
  .pay-result-actions { flex-direction: column; }
  .pay-result-actions .btn { width: 100%; }
}

/* ==================== 关于页面（ab- 前缀，避免与 homepage.css 的 .hero-* 互撞） ====================
   旧版这里用的是 .about-hero / .hero-badge / .hero-stats / .stat-value 之类泛名：
   homepage.css 也有 .hero-badge / .hero-stats，而前台样式栈里 content.css 排在后面，
   结果 about 页的规则反过来盖住首页 hero。全部加 ab- 前缀后各管各的。 */

.ab-hero {
  position: relative;
  padding: 92px 0 68px;
  text-align: center;
  overflow: hidden;
}
/* 与首页 hero 同语言的双色极光，尺寸收敛些，不与标题抢视线 */
.ab-hero::before,
.ab-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .55;
}
.ab-hero::before {
  width: 620px; height: 380px;
  top: -200px; left: 50%;
  transform: translateX(-85%);
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 70%);
}
.ab-hero::after {
  width: 560px; height: 340px;
  top: -160px; left: 50%;
  transform: translateX(-10%);
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-hover) 28%, transparent) 0%, transparent 70%);
}
.ab-hero > .container { position: relative; z-index: var(--z-base); }

.ab-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.ab-hero-title {
  margin: 20px 0 0;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--text);
}
.ab-hero-title em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-hero-sub {
  margin: 14px auto 0;
  max-width: 620px;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.8;
}
.ab-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.ab-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.ab-stat {
  min-width: 132px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.ab-stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-stat-num i { font-style: normal; font-size: .62em; }
.ab-stat-label { margin-top: 4px; font-size: 13px; color: var(--text-3); }

/* ---- 我们是谁 ---- */
.ab-prose {
  max-width: 780px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.9;
}
.ab-prose p { margin-bottom: 1rem; }
.ab-prose p:last-child { margin-bottom: 0; }

/* ---- 平台能力 ---- */
.ab-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ab-cap {
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ab-cap:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}
.ab-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--grad-brand);
  color: var(--text-onbrand);
  font-size: 1.2rem;
  box-shadow: var(--shadow-brand);
}
.ab-cap h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 700; color: var(--text); }
.ab-cap p { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.75; }

/* ---- 联系我们 ---- */
.ab-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ab-contact {
  padding: 22px 18px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ab-contact:hover { border-color: var(--primary); transform: translateY(-2px); }
.ab-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.15rem;
}
.ab-contact h4 { margin: 0 0 6px; font-size: .98rem; font-weight: 600; color: var(--text); }
.ab-contact p { margin: 0; font-size: .9rem; color: var(--text-2); word-break: break-all; }
.ab-contact a { color: var(--primary); }
.ab-contact a:hover { text-decoration: underline; }

/* ---- 条款（原生 details 折叠，无需额外 JS） ---- */
.ab-legal { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.ab-legal-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ab-legal-item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur) var(--ease);
}
.ab-legal-item summary::-webkit-details-marker { display: none; }
.ab-legal-item summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--text-3);
  font-size: .8rem;
  transition: transform var(--dur) var(--ease);
}
.ab-legal-item[open] summary::after { transform: rotate(180deg); }
.ab-legal-item summary:hover { background: var(--bg-soft); }
.ab-legal-item summary i { color: var(--primary); }
.ab-legal-body {
  padding: 0 20px 18px;
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.85;
}
.ab-legal-body p { margin-bottom: .6rem; }
.ab-legal-body p:last-child { margin-bottom: 0; }
.ab-icp { margin-top: 4px; font-size: .88rem; color: var(--text-3); }
.ab-icp a { color: var(--text-2); }
.ab-icp a:hover { color: var(--primary); }

@media (max-width: 900px) {
  .ab-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ab-hero { padding: 60px 0 44px; }
  .ab-cap-grid { grid-template-columns: 1fr; }
  .ab-stats { gap: 10px; }
  .ab-stat { flex: 1 1 130px; min-width: 0; padding: 14px 12px; }
  .ab-stat-num { font-size: 1.5rem; }
}


/* ==================== 空状态 ==================== */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-3);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* ==================== 支付页面 ==================== */
.pay-container {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 0 20px;
}

.pay-container > .card {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.pay-header {
  padding: 30px 32px 24px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.pay-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 15px;
}

.pay-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: 0;
}

.pay-subtitle {
  margin: 0;
  color: var(--text-3);
  font-size: .88rem;
}

.pay-amount-box {
  margin: 20px 24px 26px;
  padding: 20px 22px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
}

.pay-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
}

.pay-amount-row + .pay-amount-row {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pay-amount-label {
  color: var(--text-2);
  font-size: .88rem;
}

.pay-amount-value {
  color: var(--primary);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.pay-methods-section {
  margin: 0 24px 20px;
}

.pay-methods-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
}

.pay-method-item {
  min-height: 66px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.pay-method-item:last-child { margin-bottom: 0; }
.pay-method-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(15, 148, 136, .1);
}
.pay-method-item.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.pay-method-left { gap: 12px; }
.pay-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1.15rem;
  background: var(--bg-soft);
}
.pay-method-icon.balance { color: var(--accent); }
.pay-method-icon.alipay { color: #1677ff; background: #eaf3ff; }
.pay-method-info p { margin: 0; font-size: .9rem; line-height: 1.35; }
.pay-method-info p:first-child { font-weight: 700; }
.pay-method-info p:last-child { margin-top: 3px; color: var(--text-3); font-size: .78rem; }
.pay-method-check { color: var(--primary); font-size: 1.05rem; }
.pay-method-disabled { opacity: .55; cursor: not-allowed; }

.pay-form { margin: 0 24px 12px; }
.pay-btn-full {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  font-size: .94rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}
.pay-btn-full:not(:disabled):hover { filter: brightness(.97); }
.pay-btn-full:not(:disabled):active { transform: translateY(1px); }
.pay-btn-full:disabled {
  color: var(--text-3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  cursor: not-allowed;
}
#payBtn {
  width: calc(100% - 48px);
  margin: 0 24px 12px;
}
.pay-btn-success { background: var(--success); color: var(--text-onbrand); display: block; text-align: center; }
.pay-btn-alipay { background: var(--alipay); color: var(--text-onbrand); }
.pay-btn-alipay:hover { background: var(--alipay-hover); }

.pay-alert {
  margin: 0 24px 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--danger-soft);
}
.pay-alert-content { margin-bottom: 10px; }
.pay-confirm-box {
  margin: 0 24px 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
}
.pay-confirm-icon { font-size: 1.7rem; }
.pay-confirm-text { margin: 0; font-weight: 700; }
.pay-confirm-subtext { margin: 5px 0 14px; font-size: .84rem; }
.pay-confirm-btn { min-height: 40px; padding: 0 18px; border-radius: 10px; }
.pay-cancel-link {
  display: block;
  margin: 4px 0 22px;
  color: var(--text-3);
  text-align: center;
  font-size: .84rem;
}
.pay-cancel-link:hover { color: var(--text); }

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
  .shop-header { flex-direction: column; align-items: flex-start; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .page-header { padding: 1rem 1.1rem; }
  .cart-item { flex-direction: column; align-items: flex-start; }
  .pay-container { padding: 0 12px 16px; }
  .pay-header { padding: 26px 22px 22px; }
  .pay-amount-box,
  .pay-methods-section,
  .pay-form,
  .pay-alert,
  .pay-confirm-box { margin-left: 16px; margin-right: 16px; }
  #payBtn { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .pay-amount-value { font-size: 2rem; }
}

/* ==================== 工具页容器（tools/ 63 个页面共用） ====================
 * 工具页是直接访问的独立页（tools/xxx.php），不经过单入口 layout 的 <main>。
 * 这里自己承担 .container 的职责（限宽 + 左右留白 + 上下间距），
 * 不要再套一层 .container，否则限宽和留白会被叠加两次。 */
.tool-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.tool-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tool-header-left { min-width: 0; }

.tool-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-page-title i { color: var(--primary); }

.tool-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all .2s;
}

.tool-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.tool-share-btn { color: var(--primary); border-color: var(--primary); }

.tool-page-body { min-width: 0; }

/* ==================== 海报分享弹窗 ==================== */
.poster-modal-content { max-width: 420px; padding: 0; text-align: left; overflow: hidden; }
.poster-modal-body { padding: 16px; }

.poster-preview-wrapper {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-canvas { width: 100%; }
.poster-canvas img { width: 100%; border-radius: var(--radius-sm); display: block; }

.poster-actions { display: flex; gap: 10px; }

.poster-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s;
}

.poster-btn-primary { background: var(--primary); color: var(--text-onbrand); }
.poster-btn-primary:hover { background: var(--primary-hover); }

.poster-btn-secondary {
  background: var(--bg-soft);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* 海报卡片（html2canvas 渲染目标） */
.poster-card {
  width: 320px;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.9rem;
}

.poster-header {
  padding: 16px;
  background: var(--primary);
  color: var(--text-onbrand);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.poster-site-logo { font-weight: 700; }

.poster-tool-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  opacity: .95;
}

.poster-body { padding: 20px 16px; text-align: center; color: var(--text); }

.poster-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.poster-qr-img { width: 64px; height: 64px; border-radius: 6px; }

.poster-qr-text {
  font-size: 0.72rem;
  color: var(--text-3);
  text-align: center;
  margin-top: 4px;
}

.poster-site-name { font-weight: 700; color: var(--text); }
.poster-slogan { font-size: 0.78rem; color: var(--text-2); }

.poster-default-icon,
.poster-quote-icon,
.poster-fortune-icon,
.poster-counter-icon,
.poster-wheel-icon,
.poster-answer-icon,
.poster-poem-icon,
.poster-tab-icon { font-size: 2.6rem; margin-bottom: 10px; }

.poster-quote-title,
.poster-fortune-label,
.poster-counter-label,
.poster-wheel-label,
.poster-answer-label,
.poster-poem-title,
.poster-tab-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.poster-quote-content,
.poster-fortune-detail,
.poster-counter-hint,
.poster-wheel-hint,
.poster-answer-hint {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}

.poster-counter-num,
.poster-fortune-result,
.poster-wheel-result,
.poster-counter-time {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin: 6px 0;
}

.poster-tab-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.poster-tab-feature {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}

.poster-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.88rem;
  padding: 40px 0;
}

/* 工具页移动端适配 */
@media (max-width: 768px) {
  .tool-page { padding: 16px 16px 32px; }
  .tool-page-title { font-size: 1.15rem; }
  .tool-action-btn .btn-text { display: none; }
  .tool-action-btn { padding: 0 12px; }
  .poster-card { width: 100%; }
  .poster-modal-content { max-width: 100%; }
  .poster-actions { flex-direction: column; }
}

/* ==================== 前台弹窗组件 ====================
 * 此前 .modal-content / .modal-success / .modal-icon / .modal-title / .modal-message
 * 在前台 CSS 中均无定义（只有 admin.css 有同名类），
 * 导致 pay.php 支付成功弹窗渲染为半透明黑底上的裸文字。
 *
 * 同理 .modal 基类此前也只有 admin.css 有：templates/footer.php 的赞赏弹窗
 * 和 tools/_footer.php 的海报弹窗都写 class="modal hidden"，前台缺这条规则时
 * 弹窗内容会直接摊在页面流里。这里补齐整套弹窗壳。
 */
.modal {
  position: fixed;
  inset: 0;
  /* 1200：高于底部 TabBar(98) / 顶部导航(100) / 底部购买条(90)。
     前提是它所在的那条链路上没有别的层叠上下文 —— 见 base.css 里 body > * 的说明。 */
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--scrim-strong);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* 默认隐藏靠 .hidden（base.css: display:none !important），语义与后台一致 */
.modal.hidden { display: none !important; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-header .modal-title { margin: 0; text-align: left; }
.modal-header-actions { display: flex; align-items: center; gap: .5rem; }
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.modal-close:hover { border-color: var(--danger); color: var(--danger); }

.modal-content {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-hover);
}
/* 带 .modal-header 的弹窗（海报 / 赞赏）走左对齐版式，内边距交给内容容器 */
.modal-small { max-width: 360px; padding: 0; text-align: left; overflow: hidden; }

.modal-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.modal-success .modal-icon { color: var(--success); }
.modal-error .modal-icon { color: var(--danger); }

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}

.modal-message {
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* 赞赏弹窗（templates/partials/site-footer.php 输出） */
.donate-content { padding: 1.25rem 1.5rem 1.5rem; text-align: center; }
.donate-icon { color: var(--danger); }
.donate-message {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.donate-methods { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.donate-method { flex: 1 1 140px; max-width: 180px; }
.donate-method-title {
  font-size: .82rem;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.donate-qr { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ==================== 按钮补齐 ====================
 * .btn-primary / .btn-secondary / .btn-ghost 此前只有配色，
 * 缺少 .btn 提供的 padding / 圆角 / display，单独使用时渲染成浏览器原生按钮。
 */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0.7rem 1.6rem;
  font-size: 0.92rem;
  font-weight: 550;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-full { width: 100%; }

@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost { min-height: 44px; }
  .modal-content { padding: 1.5rem 1.25rem; }
}

/* ==================== 订单详情（orders.php?id=N） ====================
 * 此前订单卡片点击跳转 orders?id=N，但页面从不读取 id，
 * 现在补详情分支，这里配套样式。
 */
.card-title {
  font-size: .98rem;
  font-weight: 650;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.card-title .fas { color: var(--primary); }

.order-status-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.order-status-badge .fas { font-size: .5rem; }

.order-flow {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
}
.order-flow-step {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: .78rem;
}
.order-flow-step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  flex-shrink: 0;
}
.order-flow-step.done { color: var(--primary); font-weight: 600; }
.order-flow-step.done .dot {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-onbrand);
}

.order-detail-card { margin-bottom: 1rem; overflow: hidden; }

.od-item-list { padding: .35rem 0; }
.od-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1.1rem;
}
.od-item + .od-item { border-top: 1px solid var(--border); }

.od-item-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  overflow: hidden;
}
.od-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.od-item-main { flex: 1; min-width: 0; }
.od-item-name { font-weight: 600; font-size: .9rem; line-height: 1.4; }
.od-item-sku { font-size: .76rem; color: var(--text-3); margin-top: .2rem; }
.od-item-qty { font-size: .78rem; color: var(--text-2); margin-top: .2rem; }
.od-item-price { font-weight: 650; font-size: .92rem; white-space: nowrap; }

.od-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: .88rem;
}
.od-total strong { font-size: 1.15rem; color: var(--danger); }

.od-info { padding: .5rem 0; }
.od-info-row {
  display: flex;
  gap: 1rem;
  padding: .5rem 1.1rem;
  font-size: .86rem;
}
.od-info-row .k { flex: 0 0 78px; color: var(--text-3); }
.od-info-row .v { flex: 1; min-width: 0; color: var(--text); word-break: break-all; }
.od-tracking { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }

.od-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.od-actions .btn-primary,
.od-actions .btn-secondary,
.od-actions .btn-ghost { padding: .65rem 1.3rem; font-size: .88rem; }

@media (max-width: 768px) {
  .order-status-bar { padding: .85rem .9rem; gap: .75rem; }
  .order-flow { flex-basis: 100%; }
  .od-item { padding: .75rem .9rem; }
  .od-info-row { padding: .45rem .9rem; flex-direction: column; gap: .15rem; }
  .od-info-row .k { flex: none; }
  .od-actions .btn-primary,
  .od-actions .btn-secondary,
  .od-actions .btn-ghost { flex: 1 1 auto; min-width: 0; }
}

/* ==================== 商品详情（product.php） ====================
 * shop.php 此前链接 ?id=N 但无人读取，详情页缺失；这里配套样式。
 * H5 优先：单列 + 底部固定购买条（避开 iPhone 安全区）。
 */
.product-detail { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.pd-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

/* 图片区 */
.pd-gallery { min-width: 0; }
.pd-main-img {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 3rem;
}
/* 商品主图：cover 会把长图（竖版详情图）上下裁掉，
   详情页要看清整张图，改成 contain —— 完整展示，留白用卡片底色补上。 */
.pd-main-img img { width: 100%; height: 100%; object-fit: contain; }

.pd-thumbs {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s;
}
.pd-thumb.active { border-color: var(--primary); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 信息区 */
.pd-info { min-width: 0; }
.pd-name { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }

.pd-price { margin-top: .75rem; display: flex; align-items: baseline; gap: .3rem; }
.pd-price-now { font-size: 1.6rem; font-weight: 700; color: var(--danger); }
.pd-price-unit { font-size: .82rem; color: var(--text-3); }

.pd-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--text-3);
}

.pd-sku { margin-top: 1.25rem; }
.pd-sku-label,
.pd-qty-label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .55rem;
  display: block;
}
.pd-sku-list { display: flex; gap: .5rem; flex-wrap: wrap; }
.pd-sku-item {
  padding: .5rem .9rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  transition: all .18s;
}
.pd-sku-item small { font-size: .7rem; color: var(--text-3); font-weight: 400; }
.pd-sku-item em { font-size: .68rem; color: var(--danger); font-style: normal; }
.pd-sku-item:hover { border-color: var(--primary); }
.pd-sku-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.pd-qty { margin-top: 1.25rem; }
.pd-qty-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
}
.pd-qty-box button {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.pd-qty-box button:hover { background: var(--bg-soft); color: var(--primary); }
.pd-qty-box input {
  width: 56px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  background: var(--card);
  color: var(--text);
  font-size: .95rem;
  -moz-appearance: textfield;
}
.pd-qty-box input::-webkit-outer-spin-button,
.pd-qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-desc { margin-top: 1.5rem; }
.pd-desc-title {
  font-size: .9rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.pd-desc-title .fas { color: var(--primary); }
.pd-desc-body { font-size: .88rem; color: var(--text-2); line-height: 1.8; }
.pd-desc-body img { max-width: 100%; height: auto; border-radius: var(--radius-xs); }

/* 底部固定购买条 */
.pd-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 22px var(--hairline);
}
.pd-bar-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 54px;
  color: var(--text-2);
  text-decoration: none;
  font-size: .68rem;
}
.pd-bar-cart .fas { font-size: 1.05rem; }
.pd-bar-btn {
  flex: 1;
  min-height: 44px;
  padding: .6rem .8rem;
  font-size: .88rem;
}

/* 移动端：底部已有全局 TabBar（62px，z-index 98），
 * 购买条必须上移一层，否则会被 TabBar 盖住。 */
@media (max-width: 768px) {
  .pd-bar { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .product-detail { padding-bottom: calc(150px + env(safe-area-inset-bottom) * 2); }
}

@media (min-width: 860px) {
  .pd-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .product-detail { padding-bottom: 0; }
  .pd-bar {
    position: static;
    max-width: var(--container-max);
    margin: 2rem auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
  }
  .pd-bar-btn { flex: 0 1 200px; }
}

/* ==================== 账户充值（user.php） ====================
 * 此前 api/recharge.php + recharge_orders 表已存在，但前台没有充值入口，
 * 用户只能靠后台改余额。这里补上充值面板。
 */
.recharge-card { margin-bottom: 1.25rem; overflow: hidden; }
.recharge-body { padding: 1rem 1.1rem 1.1rem; }

.recharge-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-bottom: .9rem;
}
.recharge-amt {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.recharge-amt:hover { border-color: var(--primary); color: var(--primary); }
.recharge-amt.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.recharge-custom {
  position: relative;
  margin-bottom: .9rem;
}
.recharge-cur {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  font-weight: 600;
  pointer-events: none;
}
.recharge-custom input {
  width: 100%;
  min-height: 46px;
  padding: .6rem .9rem .6rem 1.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
.recharge-custom input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.recharge-submit { min-height: 46px; font-weight: 600; }
.recharge-tip {
  font-size: .76rem;
  color: var(--text-3);
  margin-top: .7rem;
  text-align: center;
}

@media (min-width: 640px) {
  .recharge-amounts { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
  .recharge-custom input { font-size: 16px; }
}

/* ==================== 商城工具条 / 搜索 / 分页 ==================== */
.shop-toolbar {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.shop-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 .4rem 0 0;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.shop-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.shop-search > .fas {
  padding: 0 .2rem 0 .95rem;
  color: var(--text-3);
  font-size: .85rem;
}
.shop-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: .9rem;
  padding: .62rem .3rem;
  font-family: inherit;
}
.shop-search button {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--grad-brand);
  color: var(--text-inv);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: var(--radius-pill);
  transition: opacity var(--dur);
}
.shop-search button:hover { opacity: .88; }

/* ---- 价格区间 + 仅看有货 ----
   沿用搜索框的胶囊 + 卡片观感，避免筛选区像从别处搬来的控件。 */
.shop-filter {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 1 auto;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .5rem .3rem .95rem;
  box-shadow: var(--shadow-xs);
  font-size: .87rem;
  color: var(--text-2);
}

.shop-filter-label {
  color: var(--text-3);
  font-size: .82rem;
  flex-shrink: 0;
}
.shop-filter-sep { color: var(--text-3); }

.shop-filter-price {
  width: 5.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-soft);
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
  padding: .34rem .5rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.shop-filter-price:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.shop-filter-stock {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  white-space: nowrap;
  font-size: .85rem;
}
.shop-filter-stock input { accent-color: var(--primary); cursor: pointer; }

.shop-filter-apply {
  border: none;
  cursor: pointer;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur), color var(--dur);
}
.shop-filter-apply:hover {
  background: var(--primary);
  color: var(--text-onbrand);
}

/* 窄屏：筛选区单独占一行，输入框与按钮放宽到好点按的尺寸 */
@media (max-width: 640px) {
  .shop-filter { flex: 1 1 100%; }
  .shop-filter-price { width: 4.6rem; min-height: 38px; }
  .shop-filter-apply { min-height: 38px; flex: 1 1 auto; }
}

.shop-sort {
  flex: 0 0 auto;
  padding: .6rem 2rem .6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: .87rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395A5A2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px;
}
.shop-sort:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.shop-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text-2);
  background: var(--primary-soft);
  border: 1px solid var(--primary-ring);
  border-radius: var(--radius-sm);
  padding: .55rem .9rem;
  margin-bottom: 1rem;
}
.shop-result-bar b { color: var(--primary); font-variant-numeric: tabular-nums; }
.shop-result-bar a { color: var(--text-3); font-size: .8rem; }
.shop-result-bar a:hover { color: var(--danger); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.pager-btn,
.pager-num {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text-2);
  font-size: .86rem;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
  font-variant-numeric: tabular-nums;
}
.pager-btn:hover,
.pager-num:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.pager-num.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--text-inv);
  box-shadow: var(--shadow-brand);
}
.pager-btn.disabled {
  opacity: .4;
  pointer-events: none;
}
.pager-gap { color: var(--text-3); padding: 0 .2rem; }

/* ==================== 结算卡片（购物车） ==================== */
.checkout-card { margin-top: 1rem; }

.checkout-card-more {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
}
.checkout-card-more:hover { opacity: .75; }

.checkout-card-body { padding: .9rem 1.1rem; }

.addr-empty {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  font-size: .86rem;
  color: var(--text-2);
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
}
.addr-empty > i { color: var(--warning); }
.addr-empty .btn-primary { margin-left: auto; padding: .5rem 1.1rem; font-size: .84rem; }

.addr-picker { display: flex; flex-direction: column; gap: .55rem; }

.addr-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-soft);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.addr-option:hover { border-color: var(--primary); }
.addr-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.addr-option input { position: absolute; opacity: 0; pointer-events: none; }

.addr-option-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.addr-option-line { font-size: .88rem; color: var(--text-2); }
.addr-option-line strong { color: var(--text); margin-right: .4rem; }
.addr-option-detail { font-size: .8rem; color: var(--text-3); }

.addr-option-tick {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: .7rem;
  transition: all var(--dur) var(--ease);
}
.addr-option.active .addr-option-tick {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--text-onbrand);
}

.addr-tag {
  display: inline-block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: var(--radius-xs);
  background: var(--primary-soft);
  color: var(--primary);
  margin-left: .35rem;
}

.checkout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem;
}
.checkout-total { display: flex; align-items: baseline; gap: .6rem; }
.checkout-total span { font-size: .85rem; color: var(--text-2); }
.checkout-total strong {
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.checkout-balance { font-size: .82rem; color: var(--text-3); }
.checkout-balance b { color: var(--text); font-variant-numeric: tabular-nums; }

.checkout-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 0 1.1rem 1.1rem;
}
.checkout-actions .btn-primary,
.checkout-actions .btn-alipay { flex: 1 1 160px; min-height: 46px; font-weight: 600; }

.btn-alipay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .7rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--grad-alipay);
  color: var(--text-onbrand);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px var(--alipay-ring);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-alipay:hover {
  color: var(--text-onbrand);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--alipay-ring-2);
}

/* ==================== 收货地址簿（address.php） ==================== */
.addr-page { padding-top: 1.5rem; padding-bottom: 3rem; }

.addr-list { display: flex; flex-direction: column; gap: .8rem; }

.addr-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  transition: all var(--dur) var(--ease);
}
.addr-card:hover { box-shadow: var(--shadow-hover); }
.addr-card.is-default {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--card) 60%);
}

.addr-main { margin-bottom: .7rem; }
.addr-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.addr-name { font-weight: 700; font-size: .98rem; color: var(--text); }
.addr-phone { font-size: .88rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.addr-detail { font-size: .85rem; color: var(--text-2); line-height: 1.6; }

.addr-ops { display: flex; gap: .5rem; flex-wrap: wrap; }
.addr-op {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 36px;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.addr-op:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.addr-op.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

.addr-fab {
  position: fixed;
  right: 18px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--text-onbrand);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  z-index: var(--z-fab);
  transition: transform var(--dur) var(--ease);
}
.addr-fab:hover { transform: scale(1.07); }

@media (min-width: 861px) {
  .addr-fab { position: static; margin: 1.2rem auto 0; display: block; }
}

.addr-modal { max-width: 420px; text-align: left; }
.addr-modal .modal-title { text-align: center; margin-bottom: 1rem; }

.addr-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 1.1rem;
  user-select: none;
}
.addr-check input { width: 16px; height: 16px; accent-color: var(--primary); }

.addr-modal-ops { display: flex; gap: .6rem; }
.addr-modal-ops .btn-ghost,
.addr-modal-ops .btn-primary { flex: 1; min-height: 44px; }

/* ==================== 主题统一修补 ====================
 * 把散落在各内页组件里的旧硬编码阴影/色值收敛到令牌上。
 */
.svc-card,
.tool-card,
.product-card,
.nav-card { box-shadow: var(--shadow-sm); }

.product-price,
.pd-price-now,
.od-total strong,
.good-price {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .shop-search { flex-basis: 100%; }
  .shop-sort { flex: 1 1 100%; }
  .checkout-actions .btn-primary,
  .checkout-actions .btn-alipay { flex: 1 1 100%; }
  .addr-op { flex: 1 1 auto; justify-content: center; }
}

/* ==================== 工具中心（tools.php） ==================== */
.tool-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 .4rem 0 0;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.tool-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.tool-search > .fas {
  padding: 0 .2rem 0 1rem;
  color: var(--text-3);
  font-size: .85rem;
}
.tool-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  padding: .68rem .3rem;
  font-family: inherit;
}
.tool-search button {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--grad-brand);
  color: var(--text-inv);
  font-size: .85rem;
  font-weight: 600;
  padding: .48rem 1.2rem;
  border-radius: var(--radius-pill);
  transition: opacity var(--dur);
}
.tool-search button:hover { opacity: .88; }

.tool-cats {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tool-cats::-webkit-scrollbar { display: none; }

.tool-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .95rem;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: .85rem;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.tool-cat:hover { border-color: var(--primary); color: var(--primary); }
.tool-cat.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--text-inv);
  font-weight: 650;
  box-shadow: var(--shadow-brand);
}
.tool-cat span {
  font-size: .72rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* 「推荐工具」区块：后台指定、独立于分类列表，
   故视觉上要能和下面的普通分类区块区分开（暖色标题 + 强调边框）。
   注意它只在「纯浏览态」（无搜索词、无分类筛选）出现，
   且里面的工具已从各自分类中剔除，两边不会重复。 */
.recommended-tools-group {
  padding: 1.1rem 1.15rem .35rem;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 26%, transparent);
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--warning, #f59e0b) 7%, transparent),
    transparent 70%
  );
}

.recommended-tools-group .tool-group-title .fas { color: var(--warning, #f59e0b); }

.tool-group { margin-bottom: 2rem; }

.tool-group-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
}
.tool-group-title .fas { color: var(--primary); }
.tool-group-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  padding: .1rem .5rem;
}

.tool-grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (max-width: 768px) {
  .tool-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .tool-search input { font-size: 16px; }
}

/* ==================== 移动端顶部区域（内页页头 / 商城工具条 / 商品详情） ====================
 * 小屏常见问题：页头标题偏大撑两行、搜索框与排序挤在一行互相压扁、
 * 商品图区过高把首屏顶下去。这里统一在 768px 以下做一遍收敛。
 */
@media (max-width: 768px) {
  /* 页头：标题降一档，副标题收紧，整体更「贴顶」 */
  .page-header,
  .shop-header {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    gap: .5rem;
  }
  .page-header h1,
  .shop-header h1 { font-size: 1.15rem; letter-spacing: -.4px; }
  .page-header p,
  .shop-header p { font-size: .82rem; margin-top: .2rem; }
  .page-header .page-header-actions { width: 100%; }

  /* 搜索框独占一行，排序框固定宽度不再被压扁 */
  .shop-toolbar { gap: .55rem; margin-bottom: .9rem; }
  .shop-search { flex: 1 1 100%; }
  .shop-sort { flex: 0 0 auto; min-width: 116px; padding: .55rem 1.8rem .55rem .8rem; }

  /* 商品图：两列网格 + 高度上限，首屏不至于被一张长图占满 */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .product-card:hover { transform: none; }
  .product-info { padding: .6rem .7rem .8rem; }
  .product-name { font-size: .82rem; }
  .product-price { font-size: .92rem; }

  /* 详情页：图片区限高，价格 / 标题不再被顶到屏幕外 */
  .pd-main-img { aspect-ratio: 4 / 3; }
  .pd-thumbs { margin-top: .5rem; }
  .pd-thumb { width: 52px; height: 52px; }
  .pd-name { font-size: 1.1rem; }
  .pd-price-now { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  .page-header h1,
  .shop-header h1 { font-size: 1.05rem; }
  .shop-notice { font-size: .82rem; padding: .6rem .8rem; }
  .pd-main-img { aspect-ratio: 1; }
}