/* 百汇油价 baihuiyoujia — 经典查询站气质；类名前缀 bh- */
:root {
  --bh-ink: #222;
  --bh-muted: #666;
  --bh-line: #d9e2ef;
  --bh-blue: #1e5bb8;
  --bh-blue-2: #0d3d82;
  --bh-warm: #fff8e8;
  --bh-accent: #e85d04;
  --bh-bg: #eef3f9;
  --bh-card: #fff;
  --bh-max: 1100px;
  --bh-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--bh-font);
  color: var(--bh-ink);
  background: linear-gradient(180deg, #dce8f6 0, var(--bh-bg) 180px);
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: var(--bh-blue); text-decoration: none; }
a:hover { color: var(--bh-accent); text-decoration: underline; }
img { max-width: 100%; height: auto; }
.bh-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bh-blue); color: #fff; padding: .5rem 1rem; z-index: 99;
}
.bh-skip:focus { left: 0; }
.bh-wrap {
  width: 100%;
  max-width: var(--bh-max);
  margin: 0 auto;
  padding: 0 14px;
  min-width: 0;
}

/* 顶栏：双层，异于 youjiatong 单条 header */
.bh-topline {
  background: #1a3358;
  color: #c5d4ea;
  font-size: .82rem;
}
.bh-topline__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px 16px; padding: 6px 0;
}
.bh-topline a { color: #dce8f8; }
.bh-mast {
  background: var(--bh-card);
  border-bottom: 3px solid var(--bh-blue);
  box-shadow: 0 2px 0 rgba(30, 91, 184, .08);
}
.bh-mast__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 14px 0 10px;
}
.bh-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--bh-blue-2); font-weight: 800; font-size: 1.35rem;
}
.bh-logo:hover { text-decoration: none; color: var(--bh-blue); }
.bh-logo__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #1e5bb8, #0d3d82);
  color: #ffd166; font-size: 1.25rem; font-weight: 800;
  line-height: 1; letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(13, 61, 130, .25);
}
.bh-logo__tag { display: block; font-size: .72rem; font-weight: 500; color: var(--bh-muted); }
.bh-mast__find {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--bh-warm); border: 1px solid #f0d9a8; border-radius: 6px;
  padding: 8px 10px;
}
.bh-mast__find label { font-size: .88rem; color: var(--bh-accent); font-weight: 700; white-space: nowrap; }
.bh-mast__find select {
  flex: 1 1 140px; min-width: 0; max-width: 100%;
  padding: 7px 8px; border: 1px solid var(--bh-line); border-radius: 4px; background: #fff;
}
.bh-btn {
  display: inline-block; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #2a6fd0, var(--bh-blue-2));
  color: #fff; font-weight: 700; padding: 8px 16px; border-radius: 4px;
}
.bh-btn:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }
.bh-btn--ghost {
  background: #fff; color: var(--bh-blue-2); border: 1px solid var(--bh-blue);
}

.bh-navwrap { background: var(--bh-blue); }
.bh-nav {
  display: flex; flex-wrap: wrap; gap: 0; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
}
.bh-nav a {
  display: block; color: #fff; padding: 11px 14px; font-size: .95rem; font-weight: 600;
}
.bh-nav a:hover, .bh-nav a.is-on { background: var(--bh-blue-2); text-decoration: none; color: #fff; }
.bh-nav-toggle {
  display: none; background: transparent; border: 0; color: #fff; padding: 10px 12px; cursor: pointer;
}

.bh-main { padding: 16px 0 28px; min-width: 0; }
.bh-crumb {
  font-size: .88rem; color: var(--bh-muted); margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
}
.bh-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.bh-crumb li::after { content: "›"; margin-left: 6px; color: #99a; }
.bh-crumb li:last-child::after { content: none; }

.bh-board {
  background: var(--bh-card);
  border: 1px solid var(--bh-line);
  border-radius: 2px;
  padding: 16px 16px 14px;
  margin-bottom: 14px;
  min-width: 0;
}
.bh-board__hd {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  border-left: 4px solid var(--bh-accent);
  padding-left: 10px; margin-bottom: 12px;
}
.bh-board__hd h1, .bh-board__hd h2 {
  margin: 0; font-size: 1.25rem; color: var(--bh-blue-2);
}
.bh-board__hd h2 { font-size: 1.08rem; }
.bh-lede { margin: 0 0 10px; color: var(--bh-ink); }
.bh-meta { margin: 0 0 10px; font-size: .9rem; color: var(--bh-muted); }
.bh-filter {
  width: 100%; max-width: 320px; margin: 0 0 12px;
  padding: 8px 10px; border: 1px solid var(--bh-line); border-radius: 4px;
}

/* 全国价：定义列表（异于 youjiatong 的 table） */
.bh-price-dl { margin: 0; padding: 0; }
.bh-price-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr));
  gap: 6px 8px;
  padding: 9px 6px;
  border-bottom: 1px dashed var(--bh-line);
  align-items: center;
  min-width: 0;
}
.bh-price-dl > div:nth-child(even) { background: #f7fafd; }
.bh-price-dl dt {
  margin: 0; font-weight: 700; min-width: 0;
  overflow-wrap: anywhere;
}
.bh-price-dl dd {
  margin: 0; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--bh-ink); min-width: 0;
}
.bh-price-dl__head {
  background: #e8f0fb !important;
  font-size: .82rem; color: var(--bh-muted); font-weight: 600;
  border-bottom: 1px solid var(--bh-line) !important;
}
.bh-price-dl__head dt, .bh-price-dl__head dd { text-align: center; }
.bh-hint { margin: 10px 0 0; font-size: .86rem; color: var(--bh-muted); }

/* 热门城：有序列表流 */
.bh-hot {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.bh-hot li { min-width: 0; }
.bh-hot a {
  display: inline-block; padding: 6px 10px;
  background: #eef4fc; border: 1px solid var(--bh-line); border-radius: 999px;
  font-size: .88rem; color: var(--bh-blue-2);
}
.bh-hot a:hover { background: var(--bh-blue); color: #fff; text-decoration: none; border-color: var(--bh-blue); }

/* 排行：ol */
.bh-rank { margin: 0; padding: 0 0 0 1.3rem; }
.bh-rank li {
  padding: 7px 0; border-bottom: 1px dotted var(--bh-line);
  display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 8px;
  min-width: 0;
}
.bh-rank__n { color: var(--bh-accent); font-weight: 800; margin-right: 4px; }

.bh-banner {
  background: linear-gradient(90deg, #fff3cd, #fff);
  border: 1px solid #ffe08a;
  padding: 10px 12px; margin-bottom: 14px; font-size: .92rem;
}

.bh-pulse { border-top: 2px solid var(--bh-blue); }
.bh-pulse__sum { margin: 0 0 10px; }
.bh-pulse__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.bh-pulse__row li {
  background: #f5f8fc; border: 1px solid var(--bh-line); padding: 8px 10px; min-width: 0;
}
.bh-pulse__k { display: block; font-size: .78rem; color: var(--bh-muted); }
.bh-pulse__v { display: block; font-weight: 700; color: var(--bh-blue-2); }
.bh-chg-up { color: #c0392b; }
.bh-chg-down { color: #0d6e4f; }

.bh-calc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 10px;
}
.bh-calc label { display: block; font-size: .86rem; margin-bottom: 4px; color: var(--bh-muted); }
.bh-calc input {
  width: 100%; padding: 8px; border: 1px solid var(--bh-line); border-radius: 4px;
}
.bh-calc__out {
  background: #f0f6ff; border: 1px dashed var(--bh-blue); padding: 10px; margin-top: 8px;
  font-size: .92rem;
}

/* 地区页：价格用 dl 横排；城市用 ol */
.bh-spot {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 12px; padding: 0; list-style: none;
}
.bh-spot li {
  background: var(--bh-warm); border: 1px solid #f0d9a8; padding: 12px 10px; text-align: center; min-width: 0;
}
.bh-spot span { display: block; font-size: .8rem; color: var(--bh-muted); }
.bh-spot strong { display: block; font-size: 1.35rem; color: var(--bh-accent); margin-top: 4px; }

.bh-cities {
  margin: 0; padding-left: 1.25rem;
  columns: 3; column-gap: 18px;
}
.bh-cities li { break-inside: avoid; padding: 3px 0; }

.bh-timeline { margin: 0; padding: 0 0 0 1.1rem; }
.bh-timeline li {
  padding: 8px 0; border-bottom: 1px dashed var(--bh-line);
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, .9fr));
  gap: 6px; font-size: .9rem; min-width: 0;
}
.bh-timeline time { font-weight: 700; color: var(--bh-blue-2); }

.bh-sched {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.bh-sched li {
  border: 1px solid var(--bh-line); background: #f8fbff; padding: 10px; min-width: 0;
}
.bh-sched strong { display: block; color: var(--bh-blue-2); }
.bh-sched span { display: block; font-size: .86rem; color: var(--bh-muted); margin-top: 4px; }

.bh-intl {
  margin: 0; padding: 0; list-style: none;
}
.bh-intl li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1.2fr;
  gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--bh-line); min-width: 0;
}

.bh-tools {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.bh-tools a {
  padding: 6px 12px; background: #eef4fc; border: 1px solid var(--bh-line); font-size: .88rem;
}

.bh-list { margin: 0; padding: 0; list-style: none; }
.bh-list li {
  padding: 10px 0; border-bottom: 1px solid var(--bh-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px;
}
.bh-article h1 { margin: 0 0 8px; font-size: 1.4rem; color: var(--bh-blue-2); }
.bh-article__meta { color: var(--bh-muted); font-size: .88rem; margin-bottom: 12px; }
.bh-article__body { line-height: 1.8; overflow-wrap: anywhere; }

.bh-foot {
  background: #152a45; color: #b8c7db; padding: 22px 0 18px; margin-top: 8px; font-size: .88rem;
}
.bh-foot a { color: #d7e4f7; }
.bh-foot__cols {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 14px;
}
.bh-foot__cols h3 { margin: 0 0 8px; color: #fff; font-size: .95rem; }
.bh-foot__links { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bh-foot__friends { margin-top: 8px; }
.bh-foot__copy { margin: 0; opacity: .85; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }

@media (max-width: 900px) {
  .bh-price-dl > div { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .bh-price-dl > div dd:nth-of-type(n+3) { grid-column: span 1; }
  .bh-pulse__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-spot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-cities { columns: 2; }
  .bh-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-calc { grid-template-columns: 1fr; }
  .bh-timeline li { grid-template-columns: 1fr 1fr; }
  .bh-foot__cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bh-nav-toggle { display: inline-block; }
  .bh-nav { display: none; width: 100%; flex-direction: column; }
  .bh-nav.is-open { display: flex; }
  .bh-navwrap .bh-wrap { display: flex; flex-wrap: wrap; align-items: center; }
  .bh-price-dl > div {
    grid-template-columns: 1fr 1fr;
  }
  .bh-price-dl__head { display: none; }
  .bh-intl li { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .bh-cities { columns: 1; }
  .bh-sched { grid-template-columns: 1fr; }
  .bh-pulse__row { grid-template-columns: 1fr; }
  .bh-spot { grid-template-columns: 1fr 1fr; }
}