:root{
  --ink:#15161D; --bg:#F6F5F2; --card:#FFFFFF; --line:#E6E3DC;
  --prime:#E8470C; --prime2:#FF8A4C; --ok:#1E7A4D; --muted:#6B6A66; --belt:#3A6EA5;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.logo{font-weight:800;font-size:19px;letter-spacing:-.3px}
.logo b{color:var(--prime)}
.nav .links{display:flex;gap:18px;align-items:center;font-size:14px;color:#333}
.nav .links a:hover{color:var(--prime)}
.nav .right{display:flex;gap:10px;align-items:center}
.lang{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px}
.lang button{border:0;background:#fff;padding:6px 10px;cursor:pointer;color:var(--muted)}
.lang button.on{background:var(--ink);color:#fff}
.btn{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600}
.btn:hover{border-color:#cfcabf}
.btn.prime{background:var(--prime);color:#fff;border-color:var(--prime)}
.btn.prime:hover{background:#cf3f0a}
.badge-count{background:var(--prime);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;margin-left:4px;font-weight:700}
@media(max-width:760px){.nav .links{display:none}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(135deg,#15161D 0%,#2A2230 55%,var(--prime) 160%);color:#fff;padding:56px 24px;text-align:center}
.hero h1{font-size:34px;font-weight:800;line-height:1.28;max-width:760px;margin:0 auto}
.hero p{margin-top:14px;color:#E9E6E1;max-width:600px;margin-left:auto;margin-right:auto;font-size:15px}
.search{margin:24px auto 0;max-width:620px;display:flex;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.search input{flex:1;border:0;padding:14px 16px;font-size:15px;outline:none}
.search button{background:var(--prime);color:#fff;border:0;padding:0 26px;font-size:15px;font-weight:700;cursor:pointer}
.belts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.belt{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer}
.belt:hover{background:rgba(255,255,255,.22)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:36px 24px}
.sec-title{font-size:20px;font-weight:800;margin-bottom:2px}
.sec-sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.pops{display:flex;gap:10px;flex-wrap:wrap}
.pop{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--ink);transition:.15s}
.pop:hover{border-color:var(--prime);color:var(--prime);transform:translateY(-1px)}
.relbox{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.rels{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.rel{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--muted)}
.rel:hover{color:var(--prime);border-color:var(--prime)}
.lede{font-size:15px;color:#333;max-width:760px;margin:6px 0 20px}
.lede p{margin-bottom:12px}
.countbar{font-size:13px;color:var(--muted);margin-bottom:14px}
.countbar b{color:var(--prime)}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:8px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.cat:hover{border-color:var(--prime);color:var(--prime)}
.cat span{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:3px}
@media(max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
.lot{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
.lot:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.lot .img{height:150px;background:linear-gradient(135deg,#EDEAE3,#D9D4CA);display:flex;align-items:center;justify-content:center;color:#a59f95;font-size:12px;position:relative}
.lot .off{position:absolute;top:8px;left:8px;background:var(--prime);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.lot .body{padding:12px}
.lot .t{font-size:14px;font-weight:600;height:38px;overflow:hidden}
.lot .price{margin-top:6px;display:flex;align-items:baseline;gap:6px}
.lot .now{color:var(--prime);font-weight:800;font-size:18px}
.lot .was{color:var(--muted);text-decoration:line-through;font-size:13px}
.lot .meta{margin-top:6px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.vbadge{display:inline-block;background:#EAF3EE;color:var(--ok);font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700;margin-top:8px}

/* ---------- cta ---------- */
.cta{background:#FBE9DF;border:1px solid #F3C9B5;border-radius:14px;padding:24px;display:flex;justify-content:space-between;align-items:center;margin-top:30px;flex-wrap:wrap;gap:14px}
.cta h3{font-size:18px}.cta p{color:#9A5A33;font-size:13px;margin-top:4px}

/* ---------- browse ---------- */
.browse{display:grid;grid-template-columns:240px 1fr;gap:22px}
.filters{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;height:fit-content;box-shadow:var(--shadow)}
.filters h4{font-size:13px;margin:16px 0 8px;color:var(--belt)}
.filters h4:first-child{margin-top:0}
.fchk{display:flex;align-items:center;gap:8px;font-size:13px;margin:5px 0;color:#333}
.fchk input{accent-color:var(--prime)}
.frng{width:100%;accent-color:var(--prime)}
.filters select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;margin-top:6px}
.browse .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.browse .top .count{font-size:14px}.browse .top .count b{color:var(--prime)}
.browse .top select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
@media(max-width:860px){.browse{grid-template-columns:1fr}}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.gallery .main{height:340px;background:linear-gradient(135deg,#EDEAE3,#D9D4CA);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#a59f95}
.gallery .thumbs{display:flex;gap:10px;margin-top:10px}
.gallery .thumbs div{flex:1;height:70px;background:#E3DED4;border-radius:10px}
.info h1{font-size:23px;font-weight:800;line-height:1.34}
.pricerow{display:flex;align-items:baseline;gap:12px;margin:14px 0}
.now{color:var(--prime);font-weight:800;font-size:30px}.was{color:var(--muted);text-decoration:line-through;font-size:16px}
.disc{background:#FFF3D6;color:#9A6B00;font-size:12px;padding:3px 9px;border-radius:999px;font-weight:700}
table.spec{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
table.spec td{border:1px solid var(--line);padding:9px 12px}
table.spec td:first-child{background:#F1EEE8;font-weight:700;width:40%}
.tier{margin:10px 0;font-size:13px;color:var(--muted)}.tier b{color:var(--ink)}
.desc{margin:14px 0;font-size:14px;color:#333}
.supplier{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px;box-shadow:var(--shadow)}
.supplier .row{display:flex;align-items:center;gap:10px}
.supplier .av{width:42px;height:42px;border-radius:50%;background:#E3DED4;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6B6A66}
.supplier .meta{font-size:12px;color:var(--muted);margin-top:4px}
.quote{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;position:sticky;top:80px;box-shadow:var(--shadow)}
.quote h3{font-size:17px;margin-bottom:4px}
.quote p{font-size:12px;color:var(--muted);margin-bottom:12px}
.quote input,.quote textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:14px;margin:6px 0;font-family:inherit}
.quote button{width:100%;background:var(--prime);color:#fff;border:0;padding:12px;border-radius:9px;font-size:15px;font-weight:700;margin-top:8px;cursor:pointer}
.quote .wa{width:100%;background:#25D366;color:#fff;border:0;padding:11px;border-radius:9px;font-size:14px;font-weight:700;margin-top:8px;cursor:pointer}
.ok-msg{background:#EAF3EE;color:var(--ok);border:1px solid #BFE3CC;border-radius:10px;padding:14px;font-size:14px;margin-top:10px}
@media(max-width:860px){.detail{grid-template-columns:1fr}.quote{position:static}}

/* ---------- post ---------- */
.post{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.form label{display:block;font-size:13px;font-weight:700;margin:14px 0 5px}
.form label:first-child{margin-top:0}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:14px;font-family:inherit}
.form .hint{font-size:12px;color:var(--muted);margin-top:3px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preview{background:var(--ink);color:#fff;border-radius:14px;padding:22px;position:sticky;top:80px;box-shadow:var(--shadow)}
.preview .tag2{font-size:11px;background:var(--prime);padding:3px 9px;border-radius:999px;font-weight:700}
.preview h2{font-size:19px;margin:12px 0 6px;line-height:1.34}
.preview .pricerow{display:flex;align-items:baseline;gap:10px;margin:10px 0}
.preview .now{color:var(--prime2);font-weight:800;font-size:24px}.preview .was{color:#9a958b;text-decoration:line-through;font-size:14px}
.preview table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.preview td{border:1px solid #333;padding:7px 9px;color:#E9E6E1}
.preview td:first-child{color:#9a958b;width:40%}
.preview .note{font-size:11px;color:#9a958b;margin-top:12px}
@media(max-width:860px){.post{grid-template-columns:1fr}.preview{position:static}}

/* ---------- inquiries ---------- */
.inq-list{display:flex;flex-direction:column;gap:12px}
.inq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.inq .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.inq .lot{font-weight:700;font-size:14px}
.inq .time{font-size:12px;color:var(--muted)}
.inq .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px;font-size:13px}
.inq .msg{margin-top:10px;font-size:13px;color:#333;background:#F6F5F2;border-radius:8px;padding:10px}
.inq .st{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700}
.inq .st.new{background:#FBE9DF;color:var(--prime)}
.inq .st.done{background:#EAF3EE;color:var(--ok)}
.empty{text-align:center;color:var(--muted);padding:60px 0}

/* ---------- footer ---------- */
.foot{text-align:center;color:var(--muted);font-size:12px;padding:30px;border-top:1px solid var(--line);margin-top:40px}

/* ---------- faq (GEO) ---------- */
.faq{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.faq .qa{padding:14px 0;border-bottom:1px solid var(--line)}
.faq .qa:last-child{border-bottom:0}
.faq .qa h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.faq .qa p{font-size:14px;color:var(--muted)}

/* ---------- bottom nav (PWA / mobile app) ---------- */
.bottomnav{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(0,0,0,.06)
  }
  .bottomnav button{
    flex:1;border:0;background:#fff;padding:8px 0 6px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:11px
  }
  .bottomnav .bn-ic{
    width:26px;height:26px;border-radius:8px;background:var(--bg);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px
  }
  .bottomnav button.bn-post .bn-ic{background:var(--prime);color:#fff;font-size:18px}
  .bottomnav button.bn-post{color:var(--prime);font-weight:700}
}
.crumb{padding:14px 24px;font-size:13px;color:var(--muted);max-width:1180px;margin:0 auto}
.crumb a:hover{color:var(--prime)}

/* ---------- supplier banner ---------- */
.banner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:1180px;margin:18px auto 0;padding:16px 22px;background:linear-gradient(135deg,#15161D,#3A2A22);color:#fff;border-radius:14px;box-shadow:var(--shadow)}
.banner b{font-size:15px}.banner .bp{font-size:12px;color:#D9D4CA;margin-top:3px}

/* ---------- photo upload (post) ---------- */
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;cursor:pointer;transition:.12s;background:#FAFAF8}
.drop:hover{border-color:var(--prime);background:#FFF6F1}
.drop .pick{font-size:14px;font-weight:600;color:var(--prime)}
.img-prev{position:relative;margin-top:10px}
.img-prev img{width:100%;max-height:240px;object-fit:contain;border-radius:10px;border:1px solid var(--line)}
.img-prev button{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:16px;cursor:pointer;line-height:1}

/* ---------- AI button ---------- */
.ai-btn{width:100%;margin-top:14px;background:#F1EEF8;border:1px solid #D9CFF0;color:#5B3AA6;padding:12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}
.ai-btn:disabled{opacity:.45;cursor:not-allowed}
.ai-btn:not(:disabled):hover{background:#E7E0F5}
.ai-loading{font-size:13px;color:#5B3AA6;margin-top:8px}
.ai-done{font-size:13px;color:var(--ok);background:#EAF3EE;border:1px solid #BFE3CC;border-radius:10px;padding:12px;margin-top:8px}
.ai-done ul{margin:8px 0 0 18px}.ai-done li{margin:2px 0}

/* ---------- collapsible more / join ---------- */
.more,.join{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin-top:16px;box-shadow:var(--shadow)}
.more summary,.join summary{cursor:pointer;font-size:14px;font-weight:700;padding:10px 0;color:var(--belt)}
.more[open] summary,.join[open] summary{border-bottom:1px solid var(--line);margin-bottom:6px}
.join ol{margin:10px 0 12px 20px;font-size:13px;color:#333}
.join li{margin:6px 0}

/* preview image fills */
.preview .img{background:#2A2230;background-size:cover;background-position:center;border-radius:10px}