/* ============================================================
   Sourmo UI · 1688 风格覆盖层（2026-10-25）
   目标：白底 + 橙红主色 + 深灰字，提升文字对比度，去掉墨绿大面积底色。
   用法：在 index.html 的 ui_v2.css 之后引入；删掉 <link> 即完全回滚。
   原则：只覆盖视觉，不动结构与 JS 逻辑。
   ============================================================ */

:root{
  --emerald:#FF5000;
  --emerald-d:#FF4400;
  --ink:#1A1A1A;
  --gold:#FF8A00;
  --gold-soft:#FFC79B;
  --gold-deep:#E23C00;
  --clay:#FF4400;

  --page-bg:#F5F5F5;
  --card-bg:#FFFFFF;
  --text-main:#1F1F1F;
  --text-secondary:#666666;
  --border:#EDEDED;
  --line-soft:#F4F4F4;

  --main-color:#FF5000;
  --main-dark:#FF4400;
  --accent-color:#FF4400;
  --brand:#FF5000;
  --brand-dark:#FF4400;
  --best:#FF4400;

  --shadow-s:0 1px 2px rgba(0,0,0,.04), 0 4px 12px -8px rgba(0,0,0,.16);
  --shadow-m:0 4px 16px -8px rgba(255,68,0,.24);
  --radius:8px;
}

body{background:#F5F5F5;color:#1F1F1F}
.wrap{max-width:1720px;padding:0 20px}

/* ---------- 顶部公告条：1688 橙条 ---------- */
.banner{
  background:linear-gradient(90deg,#FF5000,#FF7A1A);
  color:#fff;
  border-bottom:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  padding:8px 20px;
}

/* ---------- 顶栏：白底 + 橙字 ---------- */
header{background:#fff;border-bottom:1px solid #EFEFEF;box-shadow:none}
.nav{height:66px}
.logo{color:#FF5000}
.logo .logo-icon{border-radius:8px;box-shadow:0 2px 7px -3px rgba(255,80,0,.55)}
.logo .slogan{color:#999;border-left-color:#EFEFEF}
.nav-links a{color:#333;font-size:14px;font-weight:500;border-radius:4px}
.nav-links a:hover{background:#FFF1EA;color:#FF4400}
.nav-links a[href="/agent.html"]{
  border:1px solid #FFD5C2;background:#FFF4EE;color:#E23C00;
}
.nav-links a[href="/agent.html"]:hover{background:#FFE7DB;border-color:#FF8A5C}
.nav-links .fav-btn,.nav-links .need-btn{background:#fff;border:1px solid #E5E5E5;color:#333;border-radius:4px}
.nav-links .fav-btn:hover,.nav-links .need-btn:hover{background:#FFF1EA;border-color:#FFC7AC;color:#FF4400}
.nav-tools select{border:1px solid #E5E5E5;border-radius:4px;color:#333;background:#fff}
.nav-tools select:hover{border-color:#FF9C6E}
.lang-switch button{border-radius:4px;border:1px solid #E5E5E5;color:#555}
.lang-switch button.active{background:#FF5000;border-color:#FF5000;color:#fff}

/* ---------- HERO：从墨绿夜场改白底（文字对比度优先） ---------- */
.hero{
  background:
    radial-gradient(760px 320px at 8% -22%, rgba(255,80,0,.10), transparent 66%),
    radial-gradient(680px 300px at 92% -18%, rgba(255,154,0,.10), transparent 70%),
    linear-gradient(180deg,#FFF8F4 0%,#FFFFFF 62%,#FFFFFF 100%);
  color:#1F1F1F;
  padding:24px 0 20px;
  border-bottom:1px solid #F2F2F2;
}
.hero::before{border:1px solid rgba(255,80,0,.10);background:radial-gradient(circle,rgba(255,80,0,.05),transparent 62%)}
.hero::after{border:1px solid rgba(255,80,0,.08)}
.hero .dot{background:rgba(255,80,0,.20);box-shadow:none}

.hero-center::before{
  content:"CHINA  →  SOUTHEAST ASIA";
  color:#FF5000;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3em;
  margin-bottom:12px;
  text-indent:.3em;
}
.hero h1{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#161616;
  font-size:clamp(25px,3.1vw,42px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.01em;
  text-shadow:none;
  margin-bottom:12px;
}
.hero p{color:#5A5A5A;font-size:15px;line-height:1.7;text-shadow:none;margin-bottom:18px}
.hero-seo{color:#666 !important;font-size:13.5px;line-height:1.85}
.hero-seo b{color:#E23C00}
.hero-seo a{color:#FF5000;border-bottom:1px solid rgba(255,80,0,.35)}
.hero-seo a:hover{color:#E23C00;border-bottom-color:#E23C00}

/* 搜索条：白底 + 橙色 2px 边 + 橙色实心按钮（1688 同款节奏） */
.search-box{
  background:#fff;
  border:2px solid #FF5000;
  border-radius:6px;
  padding:6px;
  box-shadow:0 6px 18px -12px rgba(255,68,0,.55);
  gap:6px;
}
.search-box input[type=text]{border:none;border-radius:4px;padding:13px 14px;font-size:15px;color:#1F1F1F;background:#fff}
.search-box input[type=text]::placeholder{color:#A3A3A3}
.search-box input[type=text]:focus{background:#FFFDFC}
.btn{border-radius:4px;font-weight:600}
.btn-primary{
  background:linear-gradient(90deg,#FF5000,#FF7A18);
  color:#fff;padding:14px 30px;font-size:15px;font-weight:700;
  border-radius:4px;box-shadow:none;
}
.btn-primary:hover{background:linear-gradient(90deg,#F04600,#F06A00);transform:none;box-shadow:none}
.upload-label{border:1px dashed #FFB08A;background:#FFF7F3;color:#E23C00;border-radius:4px}
.upload-label:hover{background:#FFEDE4;border-color:#FF5000}

/* 侧栏卡片：白底细边（原为深底半透明白，白底后必须改深字） */
.hero .panel{
  background:#fff;
  border:1px solid #EFEFEF;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:14px 14px;
}
.hero .panel h3{
  color:#333;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  margin-bottom:10px;
}
.hero .ai-panel{
  background:linear-gradient(135deg,#FFF8F4,#FFEFE6);
  border:1px solid #FFD9C7;
  border-radius:8px;
  box-shadow:none;
}
.hero .ai-panel:hover{transform:translateY(-2px);box-shadow:0 10px 24px -18px rgba(255,68,0,.5)}
.ai-panel .ai-spark{filter:none}
.ai-panel .ai-t{font-family:inherit;color:#1F1F1F;font-size:17px;font-weight:800;letter-spacing:0}
.ai-panel .ai-s{color:#666;font-size:12.5px}
.ai-panel .ai-feats span{background:#FFF3EC;border:1px solid #FFD3BE;color:#B33A00;border-radius:6px;font-size:12px;font-weight:500}
.ai-panel .ai-b{background:linear-gradient(90deg,#FF5000,#FF7A18);color:#fff;border-radius:4px;font-size:13px;font-weight:700;box-shadow:none}
.hero .hot-panel-tall{background:#fff}
.hot-item{border-bottom:1px solid #F2F2F2;padding:8px 0}
.hot-item:hover{background:#FFF7F3}
.hot-item .h-t{color:#333;font-size:12.5px}
.hot-item .h-p{color:#FF4400;font-size:13px;font-weight:700}
#hotPicksList{max-height:268px}
#hotPicksList::-webkit-scrollbar-thumb{background:#E4E4E4}

/* 类目/国家标签：浅底深字（原为深底浅字） */
.sea-row::-webkit-scrollbar-thumb{background:#E4E4E4}
.sea-tag{
  background:#fff;
  border:1px solid #E8E8E8;
  color:#333;
  border-radius:6px;
  font-size:12.8px;
  font-weight:500;
}
.sea-tag:hover{background:#FFF3EC;border-color:#FFC0A0;color:#E23C00}
.sea-tag.active{
  background:linear-gradient(90deg,#FF5000,#FF7A18);
  border-color:#FF5000;color:#fff;font-weight:700;box-shadow:none;
}
.sea-tag.active:hover{background:linear-gradient(90deg,#F04600,#F06A00);color:#fff}
.sea-sub-row .sea-tag{background:#fff;border:1px solid #EFEFEF;color:#666;border-radius:6px}
.sea-sub-row .sea-tag:hover{background:#FFF3EC;color:#E23C00;border-color:#FFC0A0}
.sea-sub-row .sea-tag.on{background:#FF5000;border-color:#FF5000;color:#fff;font-weight:600}
.country-tip{
  background:#FFFDFB;border:1px solid #F0F0F0;color:#555;border-radius:6px;
}
.country-tip .tip-body b{color:#E23C00}
.hot-tags .tag{
  background:#fff;border:1px solid #E8E8E8;color:#333;border-radius:6px;
}
.hot-tags .tag:hover{background:#FFF3EC;border-color:#FFC0A0;color:#E23C00}

/* 移动端 AI 入口横幅 */
.ai-entry{background:linear-gradient(135deg,#FFF8F4,#FFEFE6);border:1px solid #FFD9C7;border-radius:8px}
.ai-entry-t b{color:#1F1F1F}
.ai-entry-t span{color:#666}
.ai-entry-btn{background:#FF5000;color:#fff;border-radius:4px}

/* ---------- 商品区 ---------- */
main.wrap{background:#F5F5F5;padding-top:14px}
.card{
  background:#fff;
  border:1px solid #EFEFEF;
  border-radius:8px;
  box-shadow:none;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.card:hover{border-color:#FFD3BE;box-shadow:0 10px 24px -16px rgba(255,68,0,.55)}
.card-title{color:#222;font-size:14.5px;font-weight:600;line-height:1.5}
.card .meta{color:#666;font-size:12.5px}
.card .meta b,.card .meta strong{color:#333}
.price{background:#FFF9F5;border:1px solid #FFE7DA;border-radius:6px;padding:7px 10px}
.price .est{color:#FF4400;font-size:20px;font-weight:800;letter-spacing:-.02em}
.price .ref{color:#999}
.card .actions .btn-ghost{background:#fff;border:1px solid #E2E2E2;color:#444;border-radius:4px;font-weight:500}
.card .actions .btn-ghost:hover{background:#FFF3EC;border-color:#FFBB9C;color:#E23C00}
.btn-wa{background:linear-gradient(90deg,#FF5000,#FF7A18);color:#fff;border-radius:4px;font-weight:700}
.btn-wa:hover{background:linear-gradient(90deg,#F04600,#F06A00)}
.card-contact .btn-contact-main{
  background:linear-gradient(90deg,#FF5000,#FF7A18);
  border-radius:4px;font-weight:700;box-shadow:none;
}
.card-contact .btn-contact-main:hover{filter:brightness(.96)}
.card-source{color:#999}
.best-tag{background:#FF4400;color:#fff;border:none;border-radius:3px}
.market-tag{background:rgba(0,0,0,.62);color:#fff;border:none;border-radius:3px}
.fav-star{background:#fff;color:#BBB;box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}
.fav-star:hover,.fav-star.on{color:#FF4400}

/* 工具条 / 筛选 / 状态 */
.toolbar{background:#fff;border:1px solid #EFEFEF;border-radius:8px}
.filters{color:#666}
.filters input[type=number],.filters select{border:1px solid #E2E2E2;border-radius:4px;color:#333;background:#fff}
.filters input[type=number]:focus,.filters select:focus{border-color:#FF9C6E;outline:none}
.filters input[type=checkbox]{accent-color:#FF5000}
.fchip{background:#fff;border:1px solid #E5E5E5;color:#555;border-radius:4px}
.fchip:hover{border-color:#FFBB9C;background:#FFF3EC;color:#E23C00}
.fchip.on{background:#FF5000;border-color:#FF5000;color:#fff;box-shadow:none}
.status{color:#666}
.status .spinner{border-color:#F0F0F0;border-top-color:#FF5000}
.cached-tag{background:#FFF3EC;color:#E23C00;border:1px solid #FFDCCB}
.fx-strip{color:#666;background:#FFFDFB}

/* 猜你喜欢侧栏 */
.rec-sidebar{background:#fff;border:1px solid #EFEFEF;border-radius:8px}
.rec-title{color:#1F1F1F}
.rec-title::before{background:#FF5000}
.rec-sidebar::-webkit-scrollbar-thumb{background:#E2E2E2}

/* ---------- 兜底：关掉入场动画，避免任何 opacity 卡 0 的可能 ---------- */
html.ui-anim .hero h1,
html.ui-anim .hero-center>p,
html.ui-anim .search-box,
html.ui-anim .hero-side .panel,
html.ui-anim .card,
html.ui-anim .card.ui-in,
html.ui-anim .ui-fade{animation:none !important}

/* ---------- 移动端：更紧凑，价格更醒目 ---------- */
@media (max-width:820px){
  .banner{font-size:11px;line-height:1.5;padding:7px 12px}
  .hero{padding:16px 0 14px}
  .hero h1{font-size:clamp(21px,5.6vw,30px)}
  .hero p{font-size:13.5px}
  .hero-seo{font-size:12.5px}
  .search-box{border-width:2px;padding:5px}
  .btn-primary{padding:12px 18px;font-size:14px}
  .price .est{font-size:18px}
  .card-title{font-size:13.5px}
}

/* 手机端强制双列：index.html 里 .results 的 auto-fill(minmax252px) 会把手机挤成单列 */
@media (max-width:640px){
  .results{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 0 30px;align-items:start}
  .results > .card{border-radius:6px;height:auto !important;align-self:start}
  .card-body{padding:8px 9px;gap:5px}
  .card-title{font-size:12.5px;line-height:1.42}
  .price{padding:5px 7px;border-radius:4px}
  .price .est{font-size:16px}
  .card .actions{gap:5px}
  .card .actions .btn-ghost{padding:7px 0;font-size:11.5px}
  .btn-wa,.card-contact .btn-contact-main{padding:8px 0;font-size:12px}
  .filters{gap:6px}
  .search-box .upload-label{font-size:0;padding:12px 10px}
  .search-box .upload-label::before{content:"📷";font-size:16px}
}

/* ============ 第二轮：页脚 / 悬浮球 / 移动端工具条（2026-10-25） ============ */

/* ---------- 页脚：墨绿大块 → 浅灰（原来整屏最深的一块，白底后最跳） ---------- */
footer{
  --text-secondary:#666666;
  --text-main:#1F1F1F;
  background:#F7F7F7;
  border-top:1px solid #EDEDED;
  color:#666;
  padding:34px 0 30px;
}
footer .footline{color:#1F1F1F}
footer h4{color:#1F1F1F}
footer a{color:#444}
footer a:hover{color:#FF5000}
footer .disclaimer{border-top:1px solid #E8E8E8;color:#8A8A8A}
footer .beian-row a,footer .foot-qr-nums,footer .foot-extra{color:#8A8A8A}
footer .foot-qr{border:1px solid #E5E5E5}
footer .foot-cc-link{color:#333}
footer .foot-cc-link:hover{color:#FF5000}

/* ---------- 回到顶部 / 提示条 ---------- */
.to-top{background:#fff;border:1px solid #E5E5E5;color:#FF5000;box-shadow:0 8px 20px -12px rgba(0,0,0,.24)}
.to-top:hover{background:#FFF3EC;color:#FF4400}
.toast{background:#2B2B2B}

/* ---------- AI 悬浮球 / 面板：墨绿 → 1688 橙 ---------- */
#sm-ai-fab{
  background:linear-gradient(135deg,#FF6A00,#FF4400) !important;
  box-shadow:0 10px 26px -12px rgba(255,68,0,.75) !important;
}
#sm-ai-hd{background:linear-gradient(135deg,#FF6A00,#FF4400)}
#sm-ai-send{background:#FF5000 !important}
#sm-ai-msg{border:1px solid #E8E8E8 !important}
#sm-ai-msg:focus{border-color:#FF9C6E !important;box-shadow:0 0 0 3px rgba(255,80,0,.10)}
#sm-ai-log{background:#FAFAFA !important}
#sm-ai-panel{border:1px solid #EDEDED !important;box-shadow:0 24px 60px -28px rgba(0,0,0,.35) !important}

/* ---------- 移动端顶部工具条：防「外贸版 Global / 国内版 中国」被裁成半截 ---------- */
@media (max-width:640px){
  .nav-tools{gap:2px;flex-wrap:nowrap}
  .nav-tools select{max-width:44vw;font-size:10.5px;padding:5px 2px;border-radius:8px}
  .nav-tools select:first-of-type{flex-shrink:0;min-width:105px}
  .nav-tools select:nth-of-type(2){flex-shrink:0;min-width:64px}
}

/* ============ 二级分类 chips：桌面端换行显示，不用横向拖动（2026-10-25） ============ */
@media (min-width:641px){
  .sea-sub-row{flex-wrap:wrap;row-gap:6px;overflow:visible;padding-bottom:2px}
  .sea-sub-row .sea-tag{min-height:30px}
}
/* 一级类目变多（16 个），窄一点的屏收紧内边距，尽量多显示几个 */
.sea-cat-row .sea-tag{white-space:nowrap}