/* =============================================================================
   交易/账号前台样式（Stage 6）—— 只允许取 app.css 的 tokens
   ============================================================================= */

/* ---------- 顶部导航 ---------- */
.site-header__nav{display:flex;gap:var(--sp-4);align-items:center;}
.site-header__nav a{font-size:var(--fs-sm);color:var(--c-ink-2);white-space:nowrap;}
.site-header__nav a:hover{color:var(--c-accent);}

/* ---------- 用户态页头（账号条） ---------- */
.account-bar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);background:var(--c-bg-2);
  border:1px solid var(--c-line);border-radius:var(--r-md);font-size:var(--fs-sm);}
.account-bar a{color:var(--c-ink-2);}
.account-bar form{margin:0;}

/* ---------- 提示条 ---------- */
.alert{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);font-size:var(--fs-sm);}
.alert--ok{background:var(--c-ok-bg);color:var(--c-ok);border:1px solid var(--c-ok-line);}
.alert--warn{background:var(--c-warn-bg);color:var(--c-warn);border:1px solid var(--c-warn-line);}
.alert--error{background:var(--c-danger-bg);color:var(--c-danger);border:1px solid var(--c-danger-line);}

/* ---------- 表单 ---------- */
.form{display:flex;flex-direction:column;gap:var(--sp-3);max-width:520px;}
.form--wide{max-width:100%;}
.field{display:flex;flex-direction:column;gap:6px;}
.field__label{font-size:var(--fs-sm);color:var(--c-ink-2);}
.field__input{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:9px var(--sp-3);
  font-size:var(--fs-base);font-family:var(--ff);background:var(--c-surface);color:var(--c-ink);width:100%;}
.field__input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft);}
.form-actions{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
@media(max-width:640px){.grid-2{grid-template-columns:1fr;}}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;border:1px solid transparent;border-radius:var(--r-sm);padding:9px var(--sp-4);
  font-size:var(--fs-base);font-family:var(--ff);cursor:pointer;line-height:1.2;text-align:center;}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--c-accent);color:var(--c-on-accent);}
.btn--primary:hover{background:var(--c-accent-2);}
.btn--ghost{background:transparent;border-color:var(--c-line);color:var(--c-ink-2);}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent);}
.btn--danger{background:transparent;border-color:#e6b8bb;color:var(--c-danger);}
.btn--danger:hover{background:var(--c-danger-bg);}
.btn--sm{padding:5px var(--sp-2);font-size:var(--fs-sm);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.inline{display:inline;margin:0;}

/* ---------- 卡片 / 表格 ---------- */
.card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-4);}
.card--narrow{max-width:460px;margin:var(--sp-6) auto;}
.card__title{font-size:var(--fs-md);margin-bottom:var(--sp-3);}
.card__hint{color:var(--c-ink-2);font-size:var(--fs-sm);}
.card__foot{color:var(--c-ink-3);font-size:var(--fs-sm);margin-top:var(--sp-4);text-align:center;}

.table{width:100%;border-collapse:collapse;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;font-size:var(--fs-sm);}
.table th,.table td{border-bottom:1px solid var(--c-line);padding:var(--sp-3);text-align:left;vertical-align:middle;}
.table th{background:var(--c-bg-2);font-weight:600;color:var(--c-ink-2);white-space:nowrap;}
.table tr:last-child td{border-bottom:none;}
.table .num{text-align:right;white-space:nowrap;}
.muted{color:var(--c-ink-3);font-size:var(--fs-sm);}
.nowrap{white-space:nowrap;}

.thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--c-line);display:block;}
.thumb--empty{background:linear-gradient(135deg,var(--ph-1),var(--ph-2));}

.badge-status{display:inline-block;padding:1px var(--sp-2);border-radius:999px;font-size:var(--fs-xs);background:var(--c-bg-2);color:var(--c-ink-2);}
.badge-status--pending_payment{background:var(--c-warn-bg);color:var(--c-warn);}
.badge-status--paid,.badge-status--processing,.badge-status--shipped{background:var(--c-accent-soft);color:var(--c-accent-2);}
.badge-status--completed{background:var(--c-ok-bg);color:var(--c-ok);}
.badge-status--cancelled,.badge-status--closed{background:#eef0f3;color:var(--c-ink-3);}
.badge-status--refunding,.badge-status--refunded{background:var(--c-danger-bg);color:var(--c-danger);}

/* ---------- 商品页加购 ---------- */
.pdp__buy{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-4);
  padding:var(--sp-4);background:var(--c-bg-2);border:1px solid var(--c-line);border-radius:var(--r-md);}
.pdp__buy-label{font-size:var(--fs-sm);color:var(--c-ink-2);}
.pdp__buy-qty{width:88px;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:8px var(--sp-2);
  font-size:var(--fs-base);font-family:var(--ff);background:var(--c-surface);color:var(--c-ink);}
.pdp__buy-msg{flex-basis:100%;margin:0;font-size:var(--fs-sm);color:var(--c-ink-2);}
.pdp__buy-msg.is-ok{color:var(--c-ok);}
.pdp__buy-msg.is-err{color:var(--c-danger);}

/* ---------- 购物车 ---------- */
.cart-row{display:grid;grid-template-columns:72px minmax(0,1fr) 150px 130px 96px;gap:var(--sp-3);
  align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line);}
.cart-row:last-child{border-bottom:none;}
.cart-row__title a{color:var(--c-ink);font-weight:600;}
.cart-row__reason{color:var(--c-danger);font-size:var(--fs-xs);}
.cart-row--invalid{opacity:.65;}
.cart-summary{display:flex;justify-content:flex-end;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-4) 0;flex-wrap:wrap;}
.cart-summary__amount{font-size:var(--fs-lg);font-weight:700;color:var(--c-accent);}
.cart-actions{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;}
.qty-input{width:76px;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:6px var(--sp-2);
  font-family:var(--ff);font-size:var(--fs-sm);background:var(--c-surface);color:var(--c-ink);}
@media(max-width:820px){
  .cart-row{grid-template-columns:64px minmax(0,1fr);}
  .cart-row__cell--qty,.cart-row__cell--total,.cart-row__cell--act{grid-column:2;}
}

/* ---------- 订单 ---------- */
.order-card{border:1px solid var(--c-line);border-radius:var(--r-md);margin-bottom:var(--sp-4);overflow:hidden;}
.order-card__head{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);background:var(--c-bg-2);font-size:var(--fs-sm);color:var(--c-ink-2);}
.order-card__body{padding:var(--sp-3) var(--sp-4);}
.order-card__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-line);flex-wrap:wrap;}
.order-line{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;}
.order-line__title{flex:1 1 auto;min-width:0;}
.sub-block{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:var(--sp-3);margin-bottom:var(--sp-3);}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);}
.kv dt{color:var(--c-ink-3);}
.kv dd{margin:0;}
.tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4);}
.tabs a{padding:5px var(--sp-3);border:1px solid var(--c-line);border-radius:999px;font-size:var(--fs-sm);color:var(--c-ink-2);}
.tabs a.is-active{background:var(--c-accent-soft);border-color:var(--c-accent);color:var(--c-accent);font-weight:600;}

/* ---------- 支付 ---------- */
.pay-channels{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4);}
.pay-channel{display:flex;align-items:center;gap:var(--sp-3);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);cursor:pointer;}
.pay-channel:hover{border-color:var(--c-accent);background:var(--c-accent-soft);}
.pay-qr{display:flex;justify-content:center;margin:var(--sp-4) 0;}
.pay-qr svg{width:240px;height:240px;border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-2);background:var(--c-surface);}
.pay-amount{font-size:var(--fs-2xl);font-weight:700;color:var(--c-accent);}

/* ---------- 地址 ---------- */
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3);}
.addr-card{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4);font-size:var(--fs-sm);}
.addr-card.is-default{border-color:var(--c-accent);background:var(--c-accent-soft);}
.addr-card__name{font-weight:600;margin-bottom:var(--sp-1);}
.addr-card__actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);}

/* ---------- 分页 ---------- */
.pager{margin-top:var(--sp-5);}

/* ---------- 消息中心（Stage 13） ---------- */
.chat{border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg);overflow:hidden;}
.chat__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-line);background:var(--c-bg-2);}
.chat__list{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  max-height:60vh;overflow-y:auto;}
.chat__empty{padding:var(--sp-6) 0;text-align:center;}
.chat__hint{margin:0;padding:0 var(--sp-4) var(--sp-2);font-size:var(--fs-sm);}
.chat-sys{align-self:center;max-width:80%;padding:3px var(--sp-3);border-radius:999px;
  background:var(--c-bg-2);color:var(--c-ink-3);font-size:var(--fs-xs);text-align:center;}
.chat-msg{display:flex;flex-direction:column;gap:4px;max-width:78%;}
.chat-msg--user{align-self:flex-end;align-items:flex-end;}
.chat-msg--admin,.chat-msg--ai{align-self:flex-start;align-items:flex-start;}
.chat-msg__who{font-size:var(--fs-xs);color:var(--c-ink-3);}
.chat-msg__bubble{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--c-bg-2);color:var(--c-ink);word-break:break-word;}
.chat-msg__bubble p{margin:0;}
.chat-msg__bubble img{border-radius:var(--r-sm);max-width:240px;}
.chat-msg--user .chat-msg__bubble{background:var(--c-accent);color:var(--c-on-accent);}
.chat-msg--ai .chat-msg__bubble{background:var(--c-accent-soft);}
.chat-msg__at{font-size:var(--fs-xs);color:var(--c-ink-3);}
.chat-form{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) 0;border-top:1px solid var(--c-line);}
.chat-form__input{width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:var(--sp-3);font-family:var(--ff);font-size:var(--fs-base);resize:vertical;
  background:var(--c-surface);color:var(--c-ink);}
.chat-form__input:focus{outline:none;border-color:var(--c-accent);}
.chat-form__actions{display:flex;justify-content:flex-end;}
.chat-attach{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4) var(--sp-4);}
.chat-attach input[type=file]{font-size:var(--fs-sm);max-width:100%;}
.chat-attach .muted{font-size:var(--fs-xs);}

/* ---------- 以图搜图（Stage 14） ---------- */
.site-header__search-img{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--c-line);border-radius:var(--r-sm);
  color:var(--c-ink-2);background:var(--c-surface);flex:none;}
.site-header__search-img:hover{border-color:var(--c-accent);color:var(--c-accent);}

.image-search{max-width:640px;display:flex;flex-direction:column;gap:var(--sp-3);}
.image-search__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:var(--sp-6) var(--sp-4);border:2px dashed var(--c-line);border-radius:var(--r-md);
  background:var(--c-bg-2);cursor:pointer;text-align:center;}
.image-search__drop:hover{border-color:var(--c-accent);background:var(--c-accent-soft);}
.image-search__drop-title{font-size:var(--fs-md);font-weight:600;color:var(--c-ink);}
.image-search__drop-hint{font-size:var(--fs-sm);color:var(--c-ink-3);}
.image-search__preview{display:flex;justify-content:center;}
.image-search__preview img{max-width:100%;max-height:320px;border:1px solid var(--c-line);
  border-radius:var(--r-md);background:var(--c-surface);}
.image-search__status{margin:0;}
.image-search-results{margin-top:var(--sp-5);}