/* 胶膜资讯网站样式 - 简洁商务风 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #222;
    background-color: #ffffff;
}

a {
    color: #1677ff;
    text-decoration: none;
}

a:hover {
    color: #0d5bd7;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: #fff;
    border-bottom: 2px solid #1677ff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #1677ff;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: #1677ff;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.logo-text {
    color: #222;
}

.nav {
    display: flex;
    gap: 30px;
}

.nav-item {
    color: #555;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.nav-item:hover {
    color: #1677ff;
    border-bottom-color: #1677ff;
}

.search-box {
    display: flex;
}

.search-box input {
    width: 200px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-box input:focus {
    border-color: #1677ff;
}

.search-box button {
    height: 36px;
    padding: 0 16px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* Main */
.main {
    min-height: calc(100vh - 70px - 200px);
    padding: 30px 0;
}

/* 原油实时监控数据条(极简: 浅色底, 红涨绿跌) */
.oil-ticker {
    background: #ffffff;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
}

.oil-ticker-inner {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 20px;
}

.oil-ticker-title {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1677ff;
    white-space: nowrap;
}

.oil-ticker-list {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.oil-ticker-loading {
    color: #999;
    font-size: 13px;
}

.oil-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.oil-item .oil-label {
    color: #555;
}

.oil-item .oil-price {
    font-weight: 700;
    color: #222;
    font-size: 14px;
}

.oil-item .oil-unit {
    color: #999;
    font-size: 12px;
}

.oil-item .oil-change {
    font-size: 12px;
    font-weight: 600;
}

.oil-up .oil-change {
    color: #e63946;
}

.oil-down .oil-change {
    color: #2a9d8f;
}

.oil-ticker-time {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .oil-ticker-title {
        display: none;
    }
    .oil-ticker-list {
        gap: 16px;
    }
    .oil-item .oil-unit {
        display: none;
    }
}

/* Section */
.section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #1677ff;
}

.section-header h2 {
    font-size: 18px;
    color: #222;
}

.section-header .more {
    font-size: 13px;
    color: #999;
}

.section-header .more:hover {
    color: #1677ff;
}

/* Home Layout */
.home-main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

.home-left {
    min-width: 0;
}

.home-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* News List */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-thumb {
    width: 180px;
    flex-shrink: 0;
}

.news-thumb img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.news-info {
    flex: 1;
    min-width: 0;
}

.news-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.news-info h3 a {
    color: #222;
}

.news-info h3 a:hover {
    color: #1677ff;
}

.news-desc {
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 15px;
}

/* Market Table */
.market-table {
    overflow-x: auto;
}

.market-table table {
    width: 100%;
    border-collapse: collapse;
}

.market-table th,
.market-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.market-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #666;
}

.market-table .price {
    color: #e63946;
    font-weight: 600;
}

.up {
    color: #e63946;
}

.down {
    color: #2a9d8f;
}

.flat {
    color: #999;
}

/* Supply List */
.supply-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supply-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.supply-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.supply-type.supply {
    background: #e63946;
    color: #fff;
}

.supply-type.demand {
    background: #2a9d8f;
    color: #fff;
}

.supply-title {
    flex: 1;
    color: #222;
    font-weight: 500;
}

.supply-company {
    color: #666;
}

.supply-time {
    color: #999;
    font-size: 12px;
}

/* Sidebar */
.sidebar-widget {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sidebar-widget h3 {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1677ff;
}

.hot-news {
    list-style: none;
}

.hot-news li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.hot-news li:last-child {
    border-bottom: none;
}

.hot-news .rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #f0f0f0;
    color: #666;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.hot-news .rank.top {
    background: #e63946;
    color: #fff;
}

.hot-news a {
    color: #222;
    font-size: 13px;
    line-height: 1.4;
}

.hot-news a:hover {
    color: #1677ff;
}

.category-list {
    list-style: none;
}

.category-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.category-list li:last-child {
    border-bottom: none;
}

.category-list a {
    color: #222;
}

.category-list a.active,
.category-list a:hover {
    color: #1677ff;
}

.category-list .count {
    color: #999;
    font-size: 12px;
}

.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
}

.quick-link .icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.quick-link:hover {
    background: #e8f0fe;
    color: #1677ff;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: #fff;
    padding: 40px 0 20px;
    margin-top: 40px;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 30px;
}

.footer-col h4 {
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-col p,
.footer-col li {
    color: #bbb;
    font-size: 13px;
    line-height: 2;
}

.footer-col ul {
    list-style: none;
}

.footer-col a {
    color: #bbb;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #3d5166;
    color: #888;
    font-size: 12px;
}

/* News Detail Page */
.news-detail-page {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.breadcrumb {
    margin-bottom: 20px;
    color: #999;
    font-size: 13px;
}

.breadcrumb a {
    color: #666;
}

.article-cover {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.article-cover img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

/* 弹窗(前台) */
.modal-mask {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.modal-box {
    background: #fff; border-radius: 8px; padding: 24px;
    width: 440px; max-width: 90vw; max-height: 80vh; overflow: auto;
}
.modal-box .form-group { margin-bottom: 12px; }
.modal-box label { display: block; margin-bottom: 4px; font-weight: 500; }
.modal-box input, .modal-box textarea, .modal-box select {
    width: 100%; padding: 6px 10px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;
}
.modal-box h3 { margin-top: 0; }

/* VIP 专属锁定提示(历史走势) */
.vip-lock {
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed #e5a33b;
    background: #fffdf7;
    border-radius: 8px;
}

.vip-lock-icon { font-size: 44px; line-height: 1; }
.vip-lock-title { font-size: 18px; font-weight: 700; color: #333; margin: 14px 0 8px; }
.vip-lock-desc { font-size: 13px; color: #999; margin-bottom: 20px; line-height: 1.7; }

.vip-lock-btn {
    display: inline-block;
    background: #e67e22;
    color: #fff !important;
    padding: 10px 26px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
}

.vip-lock-btn:hover { background: #d35400; }

/* 历史走势增强: 行情速览卡片 + 新手提示 */
.kline-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.ks-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.ks-main { background: #1677ff; border-color: #1677ff; }
.ks-main .ks-label, .ks-main .ks-value, .ks-main .ks-unit { color: #fff; }
.ks-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
.ks-value { font-size: 18px; font-weight: 700; color: #222; }
.ks-unit { font-size: 11px; color: #999; margin-left: 2px; }
.ks-sub { display: block; font-size: 12px; margin-top: 2px; }

.kline-tip {
    background: #fffbea;
    border: 1px solid #f0df9e;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #7a6a2a;
    line-height: 1.9;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .kline-summary { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 会员中心 ===== */
.mc-wrap { display: flex; gap: 14px; align-items: flex-start; }

.mc-nav {
    width: 200px; flex-shrink: 0; background: #fff; border: 1px solid #eee;
    border-radius: 8px; overflow: hidden;
}

.mc-user { padding: 22px 16px; text-align: center; background: #fafafa; border-bottom: 1px solid #eee; }
.mc-avatar {
    width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; color: #fff;
    font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mc-uname { font-size: 16px; font-weight: 700; color: #222; }
.mc-ulevel { margin-top: 6px; }
.mc-vip-badge { color: #b8860b; font-size: 12px; font-weight: 700; }
.mc-free-badge { color: #999; font-size: 12px; }

.mc-nav-list { padding: 8px 0; }
.mc-nav-item {
    display: block; padding: 11px 18px; color: #555; text-decoration: none; font-size: 14px;
    border-left: 3px solid transparent;
}
.mc-nav-item:hover { background: #fdf0ef; color: #1677ff; }
.mc-nav-item.active { background: #fdf0ef; color: #1677ff; font-weight: 700; border-left-color: #1677ff; }
.mc-nav-footer { padding: 12px 18px; border-top: 1px solid #eee; }
.mc-logout { color: #999; font-size: 13px; text-decoration: none; }
.mc-logout:hover { color: #e74c3c; }

.mc-content { flex: 1; min-width: 0; }
.mc-panel { display: block; }
.mc-card {
    background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 18px;
    margin-bottom: 14px;
}
.mc-card-title { margin: 0 0 14px; font-size: 15px; }

.mc-profile-card { display: flex; gap: 16px; align-items: center; }
.mc-avatar-lg {
    width: 72px; height: 72px; border-radius: 50%; color: #fff; font-size: 30px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mc-profile-info h3 { margin: 0 0 6px; font-size: 18px; color: #222; }
.mc-profile-info p { margin: 3px 0; font-size: 13px; color: #999; }

.mc-vip-card { border-color: #e8d48b; background: linear-gradient(135deg, #fffdf5, #fdf6e3); }
.mc-vip-title { font-size: 15px; font-weight: 700; color: #8a6d1a; margin-bottom: 8px; }
.mc-vip-info { font-size: 13px; color: #8a6d1a; margin-bottom: 10px; }
.mc-vip-days { font-size: 18px; }
.mc-vip-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.mc-vip-bar-fill { height: 100%; background: linear-gradient(90deg, #f5c842, #e67e22); border-radius: 4px; }

.mc-upgrade-card { border-color: #f0c36d; background: linear-gradient(135deg, #fffaf0, #fdf3e0); }
.mc-upgrade-title { font-size: 15px; font-weight: 700; color: #ad6800; margin-bottom: 8px; }
.mc-upgrade-card p { font-size: 13px; color: #ad6800; margin: 0 0 12px; }

.mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mc-stat { background: #fafafa; border-radius: 6px; padding: 14px; text-align: center; }
.mc-stat-num { display: block; font-size: 22px; font-weight: 700; color: #222; }
.mc-stat-label { font-size: 12px; color: #999; margin-top: 4px; display: block; }

.mc-empty { text-align: center; padding: 40px 0; color: #999; font-size: 14px; }

.mc-unread {
    display: inline-block; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
    background: #e74c3c; color: #fff; font-size: 11px; border-radius: 8px; text-align: center; margin-left: 6px;
}

/* ============ 会员中心表单美化(商务中心/黄页认证/个人资料统一) ============ */
.mc-card form .form-label {
    display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500;
}
.mc-card form .form-label .hint { color: #999; font-weight: normal; font-style: normal; font-size: 12px; margin-left: 4px; }
.mc-card form input[type="text"],
.mc-card form input[type="tel"],
.mc-card form input[type="date"],
.mc-card form input[type="password"],
.mc-card form input[type="email"],
.mc-card form input[type="number"],
.mc-card form textarea,
.mc-card form select {
    width: 100%; box-sizing: border-box; border: 1px solid #dcdfe6; border-radius: 6px;
    padding: 9px 12px; font-size: 14px; color: #333; background: #fff;
    transition: border-color .2s, box-shadow .2s; outline: none;
}
.mc-card form input:focus,
.mc-card form textarea:focus,
.mc-card form select:focus {
    border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,.08);
}
.mc-card form input:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
.mc-card form textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.mc-card form select { appearance: auto; }

/* 供需发布: 两列栅格 */
.biz-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.biz-form-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .biz-form-grid { grid-template-columns: 1fr; } }

/* 类型卡片切换 */
.biz-type { display: flex; gap: 12px; }
.biz-type .type-option { flex: 1; max-width: 220px; cursor: pointer; }
.biz-type .type-option input { display: none; }
.biz-type .type-card {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 0; border: 2px solid #e5e5e5; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: #888; background: #fafafa;
    transition: all .2s; user-select: none;
}
.biz-type .type-option:hover .type-card { border-color: #ccc; color: #666; }
.biz-type .type-option.on .type-card { border-color: #1677ff; color: #1677ff; background: #fdf1f1; box-shadow: 0 1px 6px rgba(22,119,255,.15); }
.biz-type .type-option.on.demand .type-card { border-color: #2a9d8f; color: #2a9d8f; background: #eef8f6; box-shadow: 0 1px 6px rgba(42,157,143,.15); }

/* 提交行 */
.biz-submit-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.biz-submit-row .btn { padding: 10px 28px; font-size: 14px; }
.biz-form-tip { font-size: 12px; color: #999; }
.biz-form-tip b { color: #e67e22; }

@media (max-width: 768px) {
    .mc-wrap { flex-direction: column; }
    .mc-nav { width: 100%; }
    .mc-nav-list { display: flex; flex-wrap: wrap; }
    .mc-nav-item { flex: 1; min-width: 40%; text-align: center; }
    .mc-stats { grid-template-columns: 1fr; }
}

.article-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #222;
    line-height: 1.4;
}

.article-meta {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    color: #999;
    font-size: 13px;
    margin-bottom: 30px;
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #222;
}

.article-content img {
    max-width: 100%;
    margin: 15px 0;
    border-radius: 8px;
}

.article-tags {
    margin-top: 30px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.article-tags a {
    display: inline-block;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 3px;
    font-size: 12px;
}

.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.article-nav a {
    display: block;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.article-nav a span {
    display: block;
    color: #999;
    font-size: 12px;
    margin-bottom: 5px;
}

.article-nav a p {
    color: #222;
    font-size: 14px;
}

.article-nav .next {
    text-align: right;
}

/* Market Page */
.market-page .page-header {
    text-align: center;
    margin-bottom: 30px;
}

.market-page .page-header h1 {
    font-size: 28px;
    color: #222;
}

.market-page .page-desc {
    color: #666;
    margin-top: 10px;
}

.market-filter {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.market-filter form {
    display: flex;
    gap: 20px;
    align-items: end;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 13px;
}

.filter-group select,
.filter-group input {
    width: 200px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

.market-filter button {
    padding: 8px 24px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.market-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.market-summary,
.market-detail {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.market-summary h3,
.market-detail h3 {
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1677ff;
}

.summary-table table,
.market-detail table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table th,
.summary-table td,
.market-detail th,
.market-detail td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.summary-table th,
.market-detail th {
    background: #f8f9fa;
}

.material-group {
    margin-bottom: 30px;
}

.material-group .group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.material-group h4 {
    color: #222;
}

.material-group .group-header span {
    color: #666;
    font-size: 13px;
}

.market-notice {
    background: #fff9e6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.market-notice h4 {
    color: #d48806;
    margin-bottom: 10px;
}

.market-notice ul {
    list-style: disc;
    padding-left: 20px;
    color: #666;
}

/* Calculator Page */
.calculator-page .page-header {
    text-align: center;
    margin-bottom: 30px;
}

.calculator-page .page-header h1 {
    font-size: 28px;
    color: #222;
}

.calculator-page .page-desc {
    color: #666;
    margin-top: 10px;
}

.calculator-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.calc-form,
.calc-result {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.calc-form h3,
.calc-result h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1677ff;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #222;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1677ff;
}

.form-group .hint {
    display: block;
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}

.btn-calc,
.btn-reset {
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-calc {
    background: #1677ff;
    color: #fff;
    margin-right: 10px;
}

.btn-calc:hover {
    background: #0d5bd7;
}

.btn-reset {
    background: #f0f0f0;
    color: #666;
}

.btn-reset:hover {
    background: #e0e0e0;
}

.result-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.result-item.highlight {
    background: #e8f0fe;
    border: 2px solid #1677ff;
    font-size: 18px;
}

.result-item .label {
    color: #666;
}

.result-item .value {
    font-weight: 600;
    color: #222;
}

.result-item.highlight .value {
    color: #1677ff;
}

.result-note {
    margin-top: 20px;
    padding: 15px;
    background: #fff9e6;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
}

.result-note ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 8px;
}

.calc-tips {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.calc-tips h4 {
    margin-bottom: 10px;
    color: #222;
}

.formula {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-family: monospace;
}

/* Supply Page */
.supply-page .page-header {
    text-align: center;
    margin-bottom: 30px;
}

.supply-page .page-header h1 {
    font-size: 28px;
    color: #222;
}

.supply-filter {
    margin-bottom: 20px;
}

.tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.tab:hover {
    color: #1677ff;
}

.tab.active {
    color: #1677ff;
    border-bottom-color: #1677ff;
    background: #f8f9fa;
}

.supply-list-page {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.supply-card {
    display: flex;
    gap: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.supply-card .supply-top-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #e67e22;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 0 8px 0 8px;
}

.supply-card {
    position: relative;
}

.supply-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.supply-badge.supply {
    background: #e63946;
    color: #fff;
}

.supply-badge.demand {
    background: #2a9d8f;
    color: #fff;
}

.supply-body {
    flex: 1;
}

.supply-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.supply-title a {
    color: #222;
}

.supply-title a:hover {
    color: #1677ff;
}

.supply-content {
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.supply-meta {
    display: flex;
    gap: 20px;
    color: #999;
    font-size: 13px;
    margin-bottom: 10px;
}

.supply-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
}

.btn-primary {
    background: #1677ff;
    color: #fff;
}

.btn-primary:hover {
    background: #0d5bd7;
    color: #fff;
}

.btn-default {
    background: #f0f0f0;
    color: #666;
}

.btn-default:hover {
    background: #e0e0e0;
}

/* About Page */
.about-page .page-header {
    text-align: center;
    margin-bottom: 40px;
}

.about-page .page-header h1 {
    font-size: 28px;
    color: #222;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.about-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1677ff;
}

.about-section p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.8;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.service-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.service-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.service-item h3 {
    margin-bottom: 10px;
    color: #222;
}

.service-item p {
    color: #666;
    font-size: 13px;
}

.contact-info p {
    color: #666;
    margin-bottom: 10px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.pagination .page-list {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    background: #fff;
    color: #4e5969;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    user-select: none;
    box-sizing: border-box;
}

.pagination .page-btn:hover {
    border-color: #1677ff;
    color: #1677ff;
    background: #fff7f7;
}

.pagination .page-btn.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(22, 119, 255, .25);
}

.pagination .page-btn.disabled {
    color: #c9cdd4;
    border-color: #f2f3f5;
    cursor: not-allowed;
    background: #fafafa;
    box-shadow: none;
}

.pagination .page-btn.dots {
    border: none;
    background: none;
    cursor: default;
    color: #c9cdd4;
    min-width: 20px;
    padding: 0;
}

.pagination .page-info {
    font-size: 12px;
    color: #86909c;
    white-space: nowrap;
}

/* Banner */
.banner {
    margin-bottom: 20px;
}

.banner-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

/* Ad Slot */
.ad-slot {
    margin: 20px 0;
    text-align: center;
}

.ad-slot img {
    max-width: 100%;
    border-radius: 8px;
}

/* News List Page */
.news-page {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
}

.news-main .page-header {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.news-main .page-header h1 {
    margin-bottom: 15px;
}

.filter form {
    display: flex;
    gap: 10px;
}

.filter select,
.filter input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter button {
    padding: 8px 20px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.news-list-page .news-list {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-news {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.related-news h3 {
    margin-bottom: 20px;
}

.related-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.related-item {
    text-align: center;
}

.related-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.related-item span {
    font-size: 12px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 992px) {
    .home-main,
    .calculator-main,
    .news-page {
        grid-template-columns: 1fr;
    }

    .service-list {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .nav {
        display: none;
    }
}

/* ================= 大宗商品门户新布局 ================= */
body { background: #f5f6f8; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 12px; }

/* 公告条 */
.notice-bar { background: #1677ff; color: #fff; font-size: 13px; overflow: hidden; }
.notice-inner { display: flex; align-items: center; height: 32px; gap: 10px; }
.notice-icon { font-weight: 700; white-space: nowrap; }
.notice-list { overflow: hidden; white-space: nowrap; flex: 1; }
.notice-list a { color: #fff; margin-right: 30px; text-decoration: none; }

/* 主导航 */
.main-nav { background: #fff; border-bottom: 3px solid #1677ff; }
.nav-inner { display: flex; align-items: center; height: 60px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-icon { background: #1677ff; color: #fff; font-weight: 700; padding: 6px 10px; border-radius: 4px; }
.logo-text { font-size: 20px; font-weight: 700; color: #1677ff; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav-item { padding: 8px 14px; color: #222; text-decoration: none; font-size: 15px; border-radius: 4px; }
.nav-item:hover { background: #1677ff; color: #fff; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.search-box input { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; width: 160px; }
.search-box button { padding: 6px 10px; border: 1px solid #1677ff; background: #1677ff; color: #fff; border-radius: 0 4px 4px 0; cursor: pointer; }
.user-box { display: flex; gap: 8px; font-size: 14px; }
.user-link { color: #222; text-decoration: none; }
.logout-link { color: #999; text-decoration: none; }
.register-link { color: #1677ff; text-decoration: none; }

/* 两栏主体(快捷工具已移至右侧栏) */
.body-wrap { display: flex; gap: 14px; margin: 14px auto; align-items: flex-start; }
.side-box .tool-list { padding: 6px 0; }
.main-center { flex: 1; min-width: 0; }
.sidebar-right { width: 230px; flex-shrink: 0; }

/* 产业链导航 */
.chain-box, .side-tool { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.chain-title { background: #fafafa; border-bottom: 1px solid #eee; font-size: 14px; padding: 10px 14px; margin: 0; color: #222; }
.chain-menu { list-style: none; margin: 0; padding: 6px 0; }
.chain-parent-link { display: flex; align-items: center; gap: 6px; padding: 9px 14px; color: #222; text-decoration: none; font-size: 14px; border-left: 3px solid transparent; }
.chain-parent-link:hover { background: #fdf0ef; color: #1677ff; border-left-color: #1677ff; }
.chain-icon { font-size: 15px; }
.chain-arrow { margin-left: auto; color: #bbb; }
.chain-children { list-style: none; padding: 0 0 4px 30px; }
.chain-children a { display: block; padding: 5px 8px; color: #666; text-decoration: none; font-size: 13px; }
.chain-children a:hover { color: #1677ff; }
.tool-list { list-style: none; margin: 0; padding: 6px 0; }
.tool-list a { display: block; padding: 8px 14px; color: #555; text-decoration: none; font-size: 13px; }
.tool-list a:hover { color: #1677ff; background: #fdf0ef; }

/* 右侧边栏 */
.side-box { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.side-title { font-size: 14px; padding: 10px 14px; margin: 0; background: #fafafa; border-bottom: 1px solid #eee; }
.side-box .oil-mini, .side-box ul { padding: 10px 14px; }
.hot-goods, .side-news { list-style: none; margin: 0; padding: 0; }
.hot-goods li, .side-news li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; font-size: 13px; }
.hot-goods a, .side-news a { color: #222; text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-goods a:hover, .side-news a:hover { color: #1677ff; }
.loading-item { color: #999; justify-content: center !important; }
.oil-price { font-weight: 700; color: #e67e22; font-size: 18px; }
.oil-change.up { color: #e63946; }
.oil-change.down { color: #2a9d8f; }


/* 首页指数卡片 */
.index-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.index-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px 14px; }
.index-card-head { display: flex; justify-content: space-between; align-items: center; }
.index-name { font-size: 13px; color: #666; }
.index-code { font-size: 11px; color: #bbb; }
.index-value { font-size: 22px; font-weight: 700; margin: 6px 0; color: #222; }
.index-change.up { color: #e63946; font-size: 13px; }
.index-change.down { color: #2a9d8f; font-size: 13px; }

/* 轮播 */
.banner-slider { position: relative; background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 14px; height: 180px; }
.banner-track { display: flex; height: 100%; transition: transform .4s; }
.banner-slide { min-width: 100%; height: 100%; }
.banner-slide img { width: 100%; height: 180px; object-fit: cover; }
.banner-prev, .banner-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: none; padding: 10px 12px; cursor: pointer; font-size: 20px; border-radius: 4px; }
.banner-prev { left: 10px; }
.banner-next { right: 10px; }

/* 面板 */
.panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head .more { color: #999; font-size: 13px; text-decoration: none; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 涨跌榜/报价表 */
.rank-table, .quote-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th, .quote-table th { background: #fafafa; padding: 8px 14px; text-align: left; color: #666; border-bottom: 1px solid #eee; }
.rank-table td, .quote-table td { padding: 8px 14px; border-bottom: 1px dashed #f0f0f0; }
.rank-table a, .quote-table a { color: #222; text-decoration: none; }
.rank-table a:hover, .quote-table a:hover { color: #1677ff; }
.up { color: #e63946; }
.down { color: #2a9d8f; }
.price-cell { font-weight: 700; }
.btn-mini { display: inline-block; background: #f2f3f5; padding: 2px 8px; border-radius: 3px; font-size: 12px; color: #666 !important; }

/* 资讯/供需列表 */
.news-line-list, .supply-line-list { list-style: none; margin: 0; padding: 6px 0; }
.news-line-list li, .supply-line-list li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px dashed #f0f0f0; font-size: 13px; }
.news-cat { background: #fdf0ef; color: #1677ff; padding: 1px 6px; border-radius: 3px; font-size: 12px; }
.news-title, .supply-title { color: #222; text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-title:hover, .supply-title:hover { color: #1677ff; }
.news-date { color: #999; font-size: 12px; }
.supply-tag { padding: 1px 6px; border-radius: 3px; font-size: 12px; }
.supply-tag.supply { background: #e8f5e9; color: #2a9d8f; }
.supply-tag.demand { background: #fff3e0; color: #e67e22; }
.supply-company { color: #999; font-size: 12px; }

/* 商品详情页 */
.goods-detail { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; }
.goods-detail-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #eee; padding-bottom: 16px; margin-bottom: 16px; }
.goods-title { margin: 0; font-size: 22px; }
.goods-spec { color: #999; margin-top: 6px; }
.goods-price-box { text-align: right; }
.goods-price { font-size: 32px; font-weight: 700; color: #1677ff; }
.goods-unit { color: #999; }
.goods-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eee; margin-bottom: 16px; }
.goods-tab { padding: 10px 20px; cursor: pointer; color: #666; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 14px; }
.goods-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 700; }
.goods-params { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goods-params li { background: #fafafa; padding: 8px 12px; border-radius: 4px; font-size: 13px; }
.goods-params span { color: #999; }

/* 页面头 */
.page-header { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px 20px; margin-bottom: 14px; }
.page-header h1 { margin: 0 0 6px; font-size: 20px; }
.page-desc { color: #999; margin: 0; font-size: 13px; }

/* 会员/表单 */
.auth-box { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; max-width: 400px; margin: 40px auto; padding: 30px; }
.auth-box h2 { margin: 0 0 20px; text-align: center; }
.auth-box .form-item { margin-bottom: 16px; }
.auth-box label { display: block; margin-bottom: 6px; color: #666; }
.auth-box input { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.auth-box button { width: 100%; padding: 10px; background: #1677ff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; }

/* 响应式 */
@media (max-width: 1024px) {
    .sidebar-left { display: none; }
    .body-wrap { flex-direction: column; }
    .sidebar-right { width: 100%; }
    .index-cards { grid-template-columns: repeat(2, 1fr); }
    .home-grid, .home-grid-2 { grid-template-columns: 1fr; }
}

/* 补充细节样式 */
.home-page { min-width: 0; }
.home-col { min-width: 0; }
.index-spark { height: 36px; }
.goods-link { color: #1677ff; font-weight: 600; }
.oil-loading { color: #999; font-size: 13px; }
.vip-badge { background: #1677ff; color: #fff !important; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.company-card h3 { color: #222; }
.company-card { transition: box-shadow .2s; }

/* ================= 导航多级下拉菜单 ================= */
.dropdown { position: relative; }
.caret { font-size: 10px; color: #999; margin-left: 2px; }

/* 一级下拉面板 */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 1000;
    padding: 6px 0;
}
.dropdown:hover > .dropdown-menu { display: block; }

/* 二级下拉(右侧弹出) */
.dropdown-sub { position: relative; }
.dropdown-sub > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 1px;
    min-width: 170px;
}
.dropdown-sub:hover > .dropdown-menu { display: block; }

/* 菜单项 */
.dropdown-item {
    display: block;
    padding: 9px 16px;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    border-left: 3px solid transparent;
}
.dropdown-item:hover { background: #fdf0ef; color: #1677ff; border-left-color: #1677ff; }
.dropdown-all { border-bottom: 1px dashed #eee; color: #1677ff; font-weight: 600; }
.drop-icon { margin-right: 6px; }
.drop-arrow { float: right; color: #bbb; margin-left: 20px; }
.dropdown-sub:hover > .dropdown-item { background: #fdf0ef; color: #1677ff; border-left-color: #1677ff; }


/* ================= 产业链分类导航条(一级平铺+二级下拉) ================= */
.category-nav { background: #1677ff; }
.category-nav-inner { display: flex; align-items: stretch; }
.cat-item { position: relative; }
.cat-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s;
}
.cat-link:hover, .cat-item:hover > .cat-link { background: #0d5bd7; color: #fff; }
.cat-all { font-weight: 700; background: rgba(255,255,255,.14); }
.cat-icon { font-size: 14px; }

/* 二级下拉(垂直向下弹出) */
.cat-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px;
    border: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    z-index: 1000;
    padding: 6px 0;
}
.cat-item:hover > .cat-menu { display: block; }
.cat-menu-item {
    display: block;
    padding: 9px 18px;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    border-left: 3px solid transparent;
}
.cat-menu-item:hover { background: #fdf0ef; color: #1677ff; border-left-color: #1677ff; }

.company-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* ================= 首页新版大气排版 ================= */
/* Hero 主视觉区: 轮播 + 指数速览 */
.home-hero { margin-bottom: 14px; }
.home-hero .banner-slider { height: 260px; margin-bottom: 0; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.home-hero .banner-slider img { height: 260px; }
.banner-link { display: block; position: relative; }
.banner-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 20px 14px;
    color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 1px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}
.banner-fallback {
    height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1677ff, #8a0f14); color: #fff;
}
.banner-fallback h2 { font-size: 30px; margin-bottom: 10px; letter-spacing: 3px; }
.banner-fallback p { font-size: 15px; opacity: .85; }

/* 指数速览面板(极简数据风: 纯白卡片) */
.hero-index {
    background: #ffffff; border: 1px solid #eeeeee; border-radius: 8px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04); display: flex; flex-direction: column;
}
.hero-index-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; color: #222; border-bottom: 1px solid #f2f2f2;
}
.hero-index-head h3 { margin: 0; font-size: 15px; font-weight: 600; padding-left: 8px; border-left: 3px solid #1677ff; }
.hero-index-more { color: #999; font-size: 12px; text-decoration: none; }
.hero-index-more:hover { color: #1677ff; }
.hero-index-list { flex: 1; display: flex; flex-direction: column; }
.hero-index-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 16px; color: #222; text-decoration: none;
    border-bottom: 1px solid #f5f5f5; transition: background .15s;
}
.hero-index-item:hover { background: #fafafa; }
.hero-index-item:last-child { border-bottom: none; }
.hi-name { font-size: 13px; color: #555; }
.hi-value { font-size: 17px; font-weight: 700; color: #222; margin-left: auto; padding-right: 10px; }
.hi-change { font-size: 12px; font-weight: 600; }
.hi-change.up { color: #e63946; }
.hi-change.down { color: #2a9d8f; }

/* ===== 核心行情看板(老板版首页第一屏: 胶带母卷 + 四大上游) ===== */
.core-board {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.core-main {
    background: linear-gradient(135deg, #1677ff, #0a4dc4);
    border-radius: 12px;
    color: #fff;
    padding: 20px 22px;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 4px 16px rgba(22, 119, 255, .28);
}
.core-main-top { display: flex; align-items: center; justify-content: space-between; }
.core-label { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.core-tag { background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.core-price { margin: 12px 0 2px; line-height: 1; }
.core-price-num { font-size: 34px; font-weight: 800; letter-spacing: .5px; }
.core-price-unit { font-size: 13px; opacity: .85; margin-left: 4px; }
.core-change { font-size: 14px; }
.core-change .up { color: #ffe066; font-weight: 700; }
.core-change .down { color: #a5d6a7; font-weight: 700; }
.core-main-foot { font-size: 12px; opacity: .85; margin-top: 8px; }
.core-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.core-card {
    background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: #222;
    transition: all .18s;
}
.core-card:hover {
    border-color: #1677ff;
    background: #eef5ff;
    box-shadow: 0 6px 18px rgba(22, 119, 255, .18);
    transform: translateY(-2px);
}
.core-card:hover .core-card-name { color: #1677ff; }
.core-card:hover .core-card-price { color: #1677ff; }
.core-card-name { font-size: 13px; color: #666; transition: color .18s; }
.core-card-price { font-size: 20px; font-weight: 700; transition: color .18s; }
.core-card-chg { font-size: 13px; font-weight: 600; align-self: flex-start; }
.core-card-chg.up { color: #e63946; }
.core-card-chg.down { color: #2a9d8f; }

/* 母卷主卡 hover */
.core-main { transition: all .18s; }
.core-main:hover {
    box-shadow: 0 10px 24px rgba(22, 119, 255, .35);
    transform: translateY(-2px);
}
.core-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.core-act-btn {
    background: #fff; border: 1px solid #1677ff; color: #1677ff; border-radius: 8px;
    padding: 8px 20px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.core-act-btn:hover { background: #1677ff; color: #fff; }
@media (max-width: 768px) {
    .core-board { grid-template-columns: 1fr; }
    .core-side { grid-template-columns: 1fr 1fr; }
}

/* 行情导览快捷入口(极简) */
.home-quick {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px;
}
.quick-card {
    background: #fff; border: 1px solid #eeeeee; border-radius: 8px; padding: 14px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    text-decoration: none; color: #222; transition: border-color .15s, box-shadow .15s;
}
.quick-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); border-color: #1677ff; }
.quick-name { font-size: 14px; font-weight: 600; color: #222; }
.quick-desc { font-size: 12px; color: #999; }

/* 首页指数卡片(大气版) */
.index-card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.index-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1677ff, #ff6b6b); }
.index-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
.index-value { font-size: 24px; }

/* 首页面板标题(大气版) */
.home-page .panel { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.home-page .panel-head { background: linear-gradient(90deg, #fafafa, #fff); }
.home-page .panel-head h3 { font-size: 16px; padding-left: 10px; border-left: 4px solid #1677ff; line-height: 1.2; }
.home-page .panel-head .more { font-size: 13px; }

/* Banner 箭头按钮在大Banner下更醒目 */
.home-hero .banner-prev, .home-hero .banner-next { padding: 12px 14px; font-size: 22px; border-radius: 8px; }


/* 首页新版响应式 */
@media (max-width: 1024px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-quick { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .home-quick { grid-template-columns: repeat(2, 1fr); }
    .home-hero .banner-slider { height: 200px; }
    .home-hero .banner-slider img { height: 200px; }
}


/* ================= 富文本文章排版(wangEditor输出内容) ================= */
.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
    margin: 22px 0 12px;
    line-height: 1.4;
    color: #222;
    font-weight: 700;
}
.article-content h1 { font-size: 24px; padding-bottom: 8px; border-bottom: 2px solid #1677ff; }
.article-content h2 { font-size: 21px; padding-left: 12px; border-left: 4px solid #1677ff; }
.article-content h3 { font-size: 18px; }
.article-content h4 { font-size: 16px; }
.article-content p { margin: 10px 0; }
.article-content ul, .article-content ol { margin: 10px 0; padding-left: 28px; }
.article-content li { margin: 5px 0; }
.article-content strong, .article-content b { color: #1677ff; font-weight: 700; }
.article-content em, .article-content i { color: #555; }
.article-content blockquote {
    margin: 14px 0; padding: 10px 16px; color: #666;
    background: #f8f9fa; border-left: 4px solid #1677ff; border-radius: 4px;
}
.article-content table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
.article-content table th, .article-content table td { border: 1px solid #e0e0e0; padding: 8px 12px; }
.article-content table th { background: #fafafa; font-weight: 600; }
.article-content a { color: #1677ff; }
.article-content code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-family: Consolas, monospace; font-size: 14px; }
.article-content pre { background: #1e1e1e; color: #eee; padding: 14px; border-radius: 8px; overflow-x: auto; margin: 14px 0; }
.article-content pre code { background: none; color: #eee; padding: 0; }
.article-content video { max-width: 100%; }
.article-content .w-e-text table { margin: 0; }

/* ================= 首页胶膜行情速览板块(位于"国际原油实时"下方) ================= */
.glance-section {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 18px 0 22px;
}

.glance-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.glance-title h2 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.glance-title h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #1677ff;
    border-radius: 2px;
    margin-right: 10px;
}

.glance-title p {
    font-size: 13px;
    color: #999;
    margin-top: 6px;
    padding-left: 14px;
}

.glance-more {
    flex-shrink: 0;
    background: #1677ff;
    color: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.glance-more:hover { background: #0d5bd7; color: #fff; }

.glance-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    align-items: start;
}

/* 左侧面板 */
.glance-side { display: flex; flex-direction: column; gap: 12px; }

.glance-panel {
    flex: 1;
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 12px 14px;
}

.glance-panel h4 {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid #1677ff;
    line-height: 1.2;
}

.glance-focus-list li, .glance-chain-list li {
    list-style: none;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px dashed #e8e8e8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.glance-focus-list li:last-child, .glance-chain-list li:last-child { border-bottom: none; }

.glance-focus-list a {
    color: #444;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.glance-focus-list a:hover { color: #1677ff; }

.glance-chain-list .gcl-name {
    color: #444;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.glance-chain-list .gcl-name:hover { color: #1677ff; }

.gcl-change { font-weight: 600; font-size: 12px; flex-shrink: 0; }
.gcl-change.up { color: #e63946; }
.gcl-change.down { color: #2a9d8f; }

/* 三大品种卡片区(2列: 首个高卡占满两行) */
.glance-cards {
    display: grid;
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 12px;
}

.glance-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 14px 16px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.glance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1677ff, #ff6b6b);
}

.glance-card:hover {
    border-color: #1677ff;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.glance-card.gc-tall { grid-row: 1 / span 2; }

.glance-card .gc-name { font-size: 17px; font-weight: 700; color: #222; display: block; }
.glance-card .gc-sub { display: block; font-size: 12px; color: #999; margin-top: 2px; }

.glance-card .gc-price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.glance-card .gc-cur { font-size: 26px; font-weight: 700; color: #222; }
.glance-card .gc-unit { font-size: 12px; color: #999; }

.glance-card .gc-change { display: inline-block; font-size: 13px; font-weight: 600; }
.glance-card .gc-change.up { color: #e63946; }
.glance-card .gc-change.down { color: #2a9d8f; }

.glance-card .gc-trend { margin-top: 10px; }
.glance-card .gc-trend-label { font-size: 12px; color: #999; }
.glance-card .gc-spark { width: 100%; height: 44px; display: block; margin-top: 2px; }

.glance-card .gc-link {
    align-self: flex-end;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1677ff;
}

.glance-card:hover .gc-link { text-decoration: underline; }

/* 胶膜行情速览响应式 */
@media (max-width: 1024px) {
    .glance-body { grid-template-columns: 1fr; }
    .glance-cards { grid-column: span 1; }
    .glance-side { flex-direction: row; }
    .glance-side .glance-panel { flex: 1; }
    .glance-card.gc-tall { grid-row: auto; }
}
@media (max-width: 640px) {
    .glance-side { flex-direction: column; }
    .glance-cards { grid-template-columns: 1fr; }
    .glance-title h2 { font-size: 18px; }
}

/* 底部声明链接 */
.footer-legal-links { margin-top: 6px; }
.footer-legal-links a { color: #aaa; }
.footer-legal-links a:hover { color: #fff; }
.footer-legal-links .sep { margin: 0 8px; color: #555; }

/* 声明页面 */
.legal-page .about-section strong { color: #1677ff; }
.legal-page .legal-list { margin: 0 0 15px; padding-left: 20px; }
.legal-page .legal-list li { color: #666; line-height: 1.9; margin-bottom: 8px; }

/* 行情页数据来源标注 */
.src-collect { background: #fff3e0; color: #ad6800; }
.src-mock { background: #f5f5f5; color: #999; }


/* ================= 移动端导航适配(修复手机导航竖排) ================= */
@media (max-width: 992px) {
    .nav-inner { gap: 8px; }
    .logo-icon { padding: 4px 8px; font-size: 14px; }
    .logo-text { font-size: 15px; }
    .search-box { display: none; }
    .nav {
        display: flex !important;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav-item { white-space: nowrap; padding: 8px 10px; font-size: 14px; flex-shrink: 0; }
    .user-box { font-size: 13px; gap: 6px; white-space: nowrap; }

    /* 分类导航横向滚动 */
    .category-nav-inner {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .category-nav-inner .cat-item,
    .category-nav-inner .cat-all { display: inline-flex; }
}