:root {
  --green:  #1F3A5F;   /* ObraLink 主色 深蓝(沿用变量名) */
  --navy:   #1F3A5F;
  --orange: #F2661B;   /* 强调橙 */
  --gold:   #F7A11D;
  --red:    #c02b3a;
  --ink:    #1b2733;
  --muted:  #667586;
  --line:   #e3e8ee;
  --bg:     #f4f6f9;
  --card:   #ffffff;
  --amber:  #b7791f;
  --blue:   #1c5d99;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.5;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px; background: var(--card); border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .logo { height: 40px; width: auto; display: block; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: .01em; }
.brand-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: var(--ink); font-size: 14px; }

.btn-primary, button.btn-primary {
  background: var(--green); color: #fff !important; padding: 8px 16px;
  border-radius: 8px; border: 0; font-size: 14px; cursor: pointer; font-weight: 600;
}
.btn-primary:hover { background: #1d1049; text-decoration: none; }
.btn-ghost {
  background: #fff; color: var(--ink) !important; border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--green); }

main { max-width: 1040px; margin: 0 auto; padding: 28px 24px 60px; }
footer { max-width: 1040px; margin: 0 auto; padding: 24px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); margin-top: 30px; }
.foot-cols { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-cols a { color: var(--muted); }
.foot-cols a:hover { color: var(--orange); }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 28px 0 12px; }
.sub { color: var(--muted); margin: 0 0 20px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 16px;
}
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
label .es { color: var(--muted); font-weight: 400; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); border-color: var(--green); }
.row { display: flex; gap: 14px; }
.row > div { flex: 1; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: 14px; margin-top: 5px; }
.chk input { width: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr.best td { background: #f0f9f4; }

.tag {
  display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px;
  font-weight: 600;
}
.tag.searching { background: #eef2ff; color: #3730a3; }
.tag.contacting { background: #fef3c7; color: #92400e; }
.tag.quoted, .tag.quoting { background: #dcfce7; color: #166534; }
.tag.ordered { background: #dbeafe; color: #1e40af; }
.tag.paid { background: #d1fae5; color: #065f46; }
.tag.best { background: var(--green); color: #fff; }
.tag.no_answer { background: #f1f5f9; color: #64748b; }
.tag.replied { background: #dcfce7; color: #166534; }
.tag.sent { background: #fef3c7; color: #92400e; }

.muted { color: var(--muted); }
.big { font-size: 26px; font-weight: 700; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.stars { color: var(--amber); letter-spacing: -1px; }

.steps { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 120px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.step.done { border-color: var(--green); background: #f0f9f4; color: var(--green); font-weight: 600; }
.step.active { border-color: var(--amber); background: #fffbeb; color: var(--amber); font-weight: 600; }

.pre {
  white-space: pre-wrap; font-size: 13px; background: #fafbfa; border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; color: #33413b; margin-top: 6px;
}
details summary { cursor: pointer; font-size: 13px; color: var(--green); }
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line);
  border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--muted); padding: 40px; }
.pill-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-list a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); background: #fff; }
.pill-list a.on { background: var(--green); color: #fff; border-color: var(--green); }

/* ---------------- 响应式 / 手机端 ---------------- */
@media (max-width: 760px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px; }
  .brand .logo { height: 34px; }
  .brand-name { font-size: 15px; }
  .brand-sub { font-size: 10.5px; }
  .topbar nav { flex-wrap: wrap; gap: 10px 14px; justify-content: flex-start; }
  .topbar nav a { font-size: 13px; }
  main { padding: 18px 16px 50px; }
  h1 { font-size: 20px; }
  /* 多列表单/网格改单列 */
  .row { flex-direction: column; gap: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* 含表格的卡片横向可滑 */
  .card { overflow-x: auto; }
  table { min-width: 560px; }
  /* 输入框发送改纵向 */
  .composer { flex-direction: column; }
  .composer .btn-primary { width: 100%; }
  .steps { gap: 6px; }
  .step { min-width: calc(50% - 6px); }
  .bubble { max-width: 90%; }
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .step { min-width: 100%; }
}

/* ================= 门户/材料库 组件 ================= */
.btn-accent { background: var(--orange); color:#fff !important; padding:8px 16px; border-radius:8px; border:0;
  font-size:14px; cursor:pointer; font-weight:700; display:inline-block; }
.btn-accent:hover { background:#d9550f; text-decoration:none; }
.btn-sm { padding:5px 11px; font-size:13px; }
.btn-wa { background:#25D366; color:#fff !important; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; display:inline-block; }
.btn-wa:hover { background:#1da851; text-decoration:none; }
.chip-ok { display:inline-block; background:#dcfce7; color:#166534; font-size:12px; font-weight:700; border-radius:6px; padding:3px 9px; margin-right:6px; }
.chip-mut { display:inline-block; background:#f1f5f9; color:#64748b; font-size:12px; font-weight:600; border-radius:6px; padding:3px 9px; margin-right:6px; }

/* nav 搜索 */
.nav-search { display:flex; gap:6px; align-items:center; flex:1; max-width:360px; margin:0 8px; }
.nav-search input { padding:7px 11px; font-size:13px; }
.nav-search button { background:var(--navy); color:#fff; border:0; border-radius:8px; padding:7px 12px; cursor:pointer; font-size:13px; }

/* 语言切换 */
.lang-switch { display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.lang-switch a { padding:5px 9px; font-size:12px; color:var(--muted); font-weight:600; }
.lang-switch a:hover { background:#f1f5f9; text-decoration:none; }
.lang-switch a.on { background:var(--navy); color:#fff; }

/* Hero */
.hero { background:linear-gradient(120deg,#1F3A5F,#2b5688); color:#fff; border-radius:16px; padding:40px 34px; margin-bottom:22px; }
.hero h1 { font-size:30px; margin:0 0 8px; color:#fff; }
.hero p { font-size:16px; opacity:.92; margin:0 0 18px; max-width:640px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-search { display:flex; gap:8px; max-width:560px; margin:18px 0 4px; }
.hero-search input { padding:12px 14px; border-radius:10px; border:0; font-size:15px; }
.hero-search button { border:0; border-radius:10px; padding:12px 20px; background:var(--orange); color:#fff; font-weight:700; cursor:pointer; font-size:15px; }
.hero-stats { display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; }
.hero-stats .n { font-size:24px; font-weight:800; }
.hero-stats .l { font-size:12px; opacity:.85; }

/* 分类快捷 */
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:8px; }
.cat-tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 8px; text-align:center; color:var(--ink); font-size:12.5px; }
.cat-tile:hover { border-color:var(--orange); text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.cat-tile .e { font-size:26px; display:block; margin-bottom:6px; }

/* 产品网格 */
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.prod-card { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.prod-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; }
.prod-card img { width:100%; height:150px; object-fit:cover; display:block; background:#eef1f5; }
.prod-card .body { padding:11px 13px 13px; display:flex; flex-direction:column; gap:4px; flex:1; }
.prod-card .pn { font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; }
.prod-card .pn-es { font-size:12px; color:var(--muted); }
.prod-card .price { color:var(--orange); font-weight:800; font-size:16px; margin-top:auto; }
.prod-card .price small { color:var(--muted); font-weight:500; font-size:11px; }
.prod-card .store { font-size:11.5px; color:var(--muted); }
.badge-feat { display:inline-block; background:var(--gold); color:#4a3208; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; }

/* 店铺/供应商卡 */
.store-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.store-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.store-card:hover { border-color:var(--navy); text-decoration:none; }
.store-logo { width:46px; height:46px; border-radius:10px; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; }

.section-h { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.section-h h2 { margin:0; font-size:18px; }
.section-h a { font-size:13px; }

/* 认证表单 */
.auth-wrap { max-width:440px; margin:8px auto; }
.role-pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:700; }
.role-admin { background:#fee2e2; color:#991b1b; }
.role-supplier { background:#ffedd5; color:#9a3412; }
.role-buyer { background:#dbeafe; color:#1e40af; }

.flash { padding:11px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.flash.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.flash.ok { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }

@media (max-width:760px) {
  .cat-grid { grid-template-columns:repeat(3,1fr); }
  .prod-grid { grid-template-columns:repeat(2,1fr); }
  .store-grid { grid-template-columns:1fr; }
  .nav-search { order:3; max-width:100%; width:100%; margin:6px 0 0; }
  .hero h1 { font-size:23px; }
}

/* ================= bmlink 风门户首页 ================= */
.home-hero { text-align:center; margin:6px auto 14px; max-width:820px; }
.home-hero h1 { font-size:27px; color:var(--navy); margin:0 0 8px; }
.home-hero p { color:var(--muted); font-size:15px; margin:0; }
.home-hero-search { display:flex; gap:8px; max-width:640px; margin:0 auto 16px; }
.home-hero-search input { flex:1; padding:12px 15px; font-size:15px; border:2px solid var(--navy); border-radius:10px 0 0 10px; }
.home-hero-search button { border:0; border-radius:0 10px 10px 0; padding:12px 22px; background:var(--navy); color:#fff; font-weight:700; cursor:pointer; font-size:15px; }

.home-top { display:grid; grid-template-columns:248px 1fr; gap:16px; margin-bottom:24px; }
.cat-tree { background:#fff; border:1px solid var(--line); border-radius:12px; padding-bottom:6px; overflow:hidden; }
.cat-tree-h { background:var(--navy); color:#fff; font-weight:700; font-size:14px; padding:11px 15px; }
.cat-tree .grp { padding:8px 14px; border-bottom:1px solid #f1f3f7; }
.cat-tree .grp:last-child { border-bottom:0; }
.cat-tree .grp > b { display:block; color:var(--navy); font-size:13px; margin-bottom:2px; }
.cat-tree .grp a { display:inline-block; color:var(--muted); font-size:12px; margin:1px 9px 1px 0; line-height:1.7; }
.cat-tree .grp a:hover { color:var(--orange); text-decoration:none; }

.banner { position:relative; border-radius:12px; overflow:hidden; min-height:372px; background:var(--navy); }
.banner .slide { position:absolute; inset:0; padding:52px 44px; color:#fff; opacity:0; animation:bfade 15s infinite; }
.banner .slide:nth-child(1) { animation-delay:0s; background:linear-gradient(120deg,#1F3A5F,#2f5f92); }
.banner .slide:nth-child(2) { animation-delay:5s; background:linear-gradient(120deg,#F2661B,#F7A11D); }
.banner .slide:nth-child(3) { animation-delay:10s; background:linear-gradient(120deg,#0e7c66,#2fa088); }
.banner .slide h2 { font-size:32px; color:#fff; margin:0 0 10px; max-width:70%; }
.banner .slide p { font-size:17px; opacity:.93; margin:0 0 22px; max-width:60%; }
@keyframes bfade { 0%{opacity:0} 2%{opacity:1} 30%{opacity:1} 34%{opacity:0} 100%{opacity:0} }
.banner-stats { position:absolute; left:0; right:0; bottom:0; display:flex; gap:0; background:rgba(0,0,0,.22); backdrop-filter:blur(2px); }
.banner-stats span { flex:1; text-align:center; color:#fff; padding:11px 4px; font-size:12px; opacity:.92; border-right:1px solid rgba(255,255,255,.15); }
.banner-stats b { display:block; font-size:19px; font-weight:800; }

.floor { margin:22px 0; }
.floor-head { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--navy); padding-bottom:8px; margin-bottom:14px; flex-wrap:wrap; gap:6px; }
.floor-head h3 { margin:0; font-size:19px; color:var(--navy); }
.floor-head .tags a { font-size:12.5px; color:var(--muted); margin-left:12px; }
.floor-head .tags a:hover { color:var(--orange); }
.floor-head .tags a.more { color:var(--orange); font-weight:600; }
.floor-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }

.brand-wall { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.brand-item { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center; color:var(--ink); }
.brand-item:hover { border-color:var(--orange); text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.brand-item .lg { font-size:28px; }
.brand-item .bn { font-size:12px; font-weight:700; margin:5px 0 2px; line-height:1.3; height:31px; overflow:hidden; }
.v-badge { display:inline-block; margin-top:5px; font-size:10px; font-weight:700; color:#166534; background:#dcfce7; border-radius:4px; padding:1px 6px; }

/* 工业项目专区 */
.ind-zone { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:center; background:linear-gradient(120deg,#1F3A5F,#2f5f92); color:#fff; border-radius:14px; padding:26px 30px; margin:26px 0; }
.ind-zone h2 { color:#fff; margin:0 0 8px; font-size:22px; }
.ind-zone p { opacity:.92; margin:0 0 16px; }
.ind-zone .cta { display:flex; gap:12px; flex-wrap:wrap; }
.ind-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.ind-tiles a { background:rgba(255,255,255,.12); color:#fff; border-radius:8px; padding:11px 12px; font-size:13px; font-weight:600; }
.ind-tiles a:hover { background:rgba(255,255,255,.22); text-decoration:none; }

/* 资讯卡 */
.news-card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.news-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; }
.news-card img { width:100%; height:120px; object-fit:cover; display:block; }
.news-card .nc-body { padding:12px 14px; }
.news-card .nc-title { font-size:14px; font-weight:700; color:var(--ink); line-height:1.4; }

@media (max-width:760px) { .ind-zone { grid-template-columns:1fr; } }

@media (max-width:860px) {
  .home-top { grid-template-columns:1fr; }
  .cat-tree { display:none; }               /* 手机隐藏分类树,靠导航搜索 */
  .banner { min-height:280px; }
  .banner .slide { padding:32px 24px; }
  .banner .slide h2 { font-size:23px; max-width:100%; }
  .banner .slide p { max-width:100%; font-size:15px; }
  .floor-row { grid-template-columns:repeat(2,1fr); }
  .brand-wall { grid-template-columns:repeat(3,1fr); }
}