/* 首页 youjia_list：31省今日油价列表 + 走势图 + 倒计时 */
.yj-page { background: #f5f5f5; padding: 0; margin-top: -1px; }
.yj-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,.04); }

/* 走势图卡片 */
.yj-trend-card { padding: 22px 24px 16px; }
.yj-trend-head { text-align: center; position: relative; }
.yj-trend-head h2 { color: #2c3e50; font-size: 20px; font-weight: 700; margin: 0; }
.yj-trend-chart { width: 100%; height: 340px; }
.yj-range-btns { display: inline-flex; border-radius: 4px; overflow: hidden; margin: 10px 0 14px; border: 1px solid #d7dde3; }
.yj-range-btns button { background: #fff; color: #5a6672; border: none; border-right: 1px solid #d7dde3; padding: 5px 18px; font-size: 13px; cursor: pointer; transition: all .15s; }
.yj-range-btns button:last-child { border-right: none; }
.yj-range-btns button:hover { color: #16588f; background: #f5f8fb; }
.yj-range-btns button.active { background: #16588f; color: #fff; font-weight: 600; }
.yj-trend-legend { text-align: center; padding-top: 12px; color: #5a6672; font-size: 13px; margin-top: 4px; }
.yj-trend-legend .yj-dot { margin: 0 14px 0 0; }
.yj-trend-legend .yj-dot + .yj-dot { margin-left: 16px; }
.yj-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.yj-dot-city { background: #279a5b; }
.yj-dot-wti { background: #e8892b; }

/* 调价倒计时 */
.yj-countdown-card { padding: 18px 26px; margin-top: 22px; }
.yj-countdown-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.yj-cd-label { color: #5a6672; font-size: 14px; text-decoration: none; }
.yj-cd-label strong { color: #2c3e50; }
.yj-cd-label:hover { color: #16588f; }
.yj-cd-pill { background: #e8f6ef; border: 1px solid #bfe6d4; color: #279a5b; border-radius: 20px; padding: 5px 20px; font-size: 14px; font-weight: 600; text-decoration: none; }
.yj-cd-pill:hover { background: #279a5b; border-color: #279a5b; color: #fff; }
.yj-progress { position: relative; height: 6px; background: #edf1f5; border-radius: 6px; margin-top: 14px; }
.yj-progress-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3d8bd4 0%, #279a5b 100%); }
.yj-progress-dot { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 3px solid #279a5b; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

/* 区块标题 */
.yj-section-title { color: #2c3e50; font-size: 19px; font-weight: 700; margin: 30px 0 18px; padding-left: 12px; border-left: 4px solid #16588f; line-height: 1.2; }

/* 省份油价表 */
.yj-price-col { display: flex; }
.yj-price-card { width: 100%; overflow: hidden; }
.yj-price-card .yj-table { height: 100%; }
.yj-table { width: 100%; margin: 0; border-collapse: collapse; }
.yj-table thead th { background: #f8f9fa; color: #5a6672; font-size: 13px; font-weight: 600; text-align: center; padding: 12px 6px; border-bottom: 1px solid #eef1f4; }
.yj-table thead th:first-child { text-align: left; padding-left: 20px; }
.yj-table tbody td { padding: 11px 6px; border-bottom: 1px solid #f1f4f7; font-size: 14px; text-align: center; }
.yj-table tbody td:first-child { text-align: left; }
.yj-table tbody tr:last-child td { border-bottom: none; }
.yj-table tbody tr:hover { background: #f6f9fc; }
.yj-prov { color: #2c3e50; font-weight: 600; text-decoration: none; display: block; padding-left: 20px; white-space: nowrap; }
.yj-prov:hover { color: #16588f; }
.yj-num { color: #222b33; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yj-num-hot { color: #d83a32; font-weight: 600; }

/* 全国城市油价 */
.yj-city-card { padding: 6px 24px; }
.yj-city-row { display: flex; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #f1f4f7; }
.yj-city-row:last-child { border-bottom: none; }
.yj-city-prov { flex: 0 0 132px; color: #16588f; font-size: 17px; font-weight: 700; text-decoration: none; line-height: 1.6; }
.yj-city-prov:hover { color: #d8a92b; }
.yj-city-list { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.yj-city { color: #5a6672; font-size: 14px; text-decoration: none; line-height: 1.6; white-space: nowrap; }
.yj-city:hover { color: #16588f; }

/* 说明 */
.yj-note { color: #98a2ab; font-size: 13px; line-height: 1.9; margin-top: 8px; }

@media (max-width: 768px) {
    .yj-city-card { padding: 4px 16px; }
    .yj-city-row { flex-direction: column; gap: 8px; }
    .yj-city-prov { flex: none; }
}