/* 春山出品 · 煤焦钢产业信息网站 - 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #0f1419;
    color: #e8e8e8;
    line-height: 1.6;
}

a { color: #4a9eff; text-decoration: none; }
a:hover { color: #6bb3ff; }

/* ========== 导航栏 ========== */
.navbar {
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    border-bottom: 1px solid #2a3441;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.logo-icon { font-size: 28px; }
.logo-text { font-size: 20px; font-weight: 700; color: #f0c040; }
.logo-sub { font-size: 12px; color: #8899aa; margin-left: 8px; }
.nav-menu { display: flex; align-items: center; gap: 8px; }
.nav-link {
    color: #b0bec5;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}
.nav-link:hover { background: #2a3441; color: #fff; }
.nav-dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a2332;
    border: 1px solid #2a3441;
    border-radius: 8px;
    min-width: 160px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-dropdown:hover .dropdown-content { display: block; }
.dropdown-content a {
    display: block;
    padding: 8px 16px;
    color: #b0bec5;
    font-size: 14px;
}
.dropdown-content a:hover { background: #2a3441; color: #fff; }
.nav-search { display: flex; margin: 0 12px; }
.nav-search input {
    background: #0f1419;
    border: 1px solid #2a3441;
    color: #e8e8e8;
    padding: 6px 12px;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    width: 160px;
    outline: none;
}
.nav-search input:focus { border-color: #4a9eff; }
.nav-search button {
    background: #2a3441;
    border: 1px solid #2a3441;
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    padding: 6px 10px;
}
.nav-member { display: flex; align-items: center; gap: 10px; }
.member-name { color: #f0c040; font-size: 14px; font-weight: 600; }
.member-level { font-size: 11px; background: #2a3441; padding: 2px 8px; border-radius: 10px; color: #8899aa; }
.logout-btn { font-size: 12px; color: #8899aa; padding: 4px 10px; border: 1px solid #2a3441; border-radius: 4px; }
.logout-btn:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* ========== 主内容 ========== */
.main-content { max-width: 1400px; margin: 0 auto; padding: 24px; min-height: calc(100vh - 120px); }

/* ========== 标签 ========== */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 6px;
}
.tag-impact.up { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.tag-impact.down { background: rgba(76,175,80,0.15); color: #4caf50; }
.tag-impact.neutral { background: rgba(136,153,170,0.15); color: #8899aa; }
.tag-importance { background: rgba(240,192,64,0.15); color: #f0c040; }
.tag-type { background: rgba(74,158,255,0.15); color: #4a9eff; }
.tag-variety { background: rgba(156,39,176,0.15); color: #ce93d8; }

/* ========== 首页 ========== */
.welcome-banner {
    background: linear-gradient(135deg, #1a2332 0%, #2a3441 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.welcome-text h2 { color: #f0c040; margin-bottom: 8px; }
.welcome-text p { color: #8899aa; font-size: 14px; }
.welcome-stats { display: flex; gap: 32px; }
.stat-item { text-align: center; }
.stat-num { display: block; font-size: 28px; font-weight: 700; color: #4a9eff; }
.stat-label { font-size: 12px; color: #8899aa; }

.home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h3 { color: #e8e8e8; font-size: 18px; }
.more-link { font-size: 13px; color: #4a9eff; }

.news-list .news-item {
    background: #1a2332;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 3px solid #2a3441;
    transition: all 0.2s;
}
.news-list .news-item:hover { border-left-color: #f0c040; background: #1f2a3a; }
.news-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.news-title a { color: #e8e8e8; }
.news-title a:hover { color: #f0c040; }
.news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.news-source { font-size: 11px; color: #667788; }
.news-summary { font-size: 13px; color: #8899aa; }

.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.channel-card {
    background: #1a2332;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.channel-card:hover { border-color: #f0c040; background: #1f2a3a; }
.channel-icon { font-size: 24px; margin-bottom: 4px; }
.channel-name { font-size: 13px; color: #e8e8e8; }
.channel-count { font-size: 11px; color: #667788; margin-top: 2px; }

.price-quick { background: #1a2332; border-radius: 8px; padding: 12px; }
.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #2a3441;
    font-size: 13px;
}
.price-item:last-child { border-bottom: none; }
.price-name { color: #b0bec5; flex: 1; }
.price-value { color: #f0c040; font-weight: 600; margin: 0 12px; }
.price-change { font-size: 12px; min-width: 50px; text-align: right; }
.price-change.up { color: #ff6b6b; }
.price-change.down { color: #4caf50; }

/* ========== 列表页 ========== */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { color: #f0c040; }
.page-total { color: #8899aa; font-size: 14px; }

.news-item-full {
    background: #1a2332;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 14px;
    border-left: 3px solid #2a3441;
}
.news-item-full:hover { border-left-color: #f0c040; }
.news-title-full { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.news-title-full a { color: #e8e8e8; }
.news-title-full a:hover { color: #f0c040; }
.news-meta-full { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.news-summary-full { font-size: 14px; color: #b0bec5; margin-bottom: 8px; }
.news-keydata { font-size: 13px; color: #4a9eff; background: rgba(74,158,255,0.08); padding: 8px 12px; border-radius: 6px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
.page-btn { background: #2a3441; color: #e8e8e8; padding: 8px 20px; border-radius: 6px; font-size: 14px; }
.page-btn:hover { background: #f0c040; color: #0f1419; }
.page-info { color: #8899aa; font-size: 14px; }

.empty-state { text-align: center; padding: 60px; color: #667788; }

/* ========== 详情页 ========== */
.back-btn { display: inline-block; color: #8899aa; margin-bottom: 16px; font-size: 14px; }
.back-btn:hover { color: #f0c040; }
.detail-article { background: #1a2332; border-radius: 12px; padding: 32px; }
.detail-title { font-size: 24px; color: #fff; margin-bottom: 16px; line-height: 1.4; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #2a3441; }
.detail-source { font-size: 13px; color: #667788; margin-left: auto; }
.detail-summary, .detail-keydata, .detail-content { margin-bottom: 24px; }
.detail-summary h4, .detail-keydata h4, .detail-content h4 { color: #f0c040; margin-bottom: 10px; font-size: 15px; }
.detail-summary p, .detail-keydata p { color: #b0bec5; font-size: 14px; line-height: 1.8; }
.content-text { color: #d0d0d0; font-size: 14px; line-height: 1.8; }
.detail-link h4 { color: #4a9eff; margin-bottom: 8px; }
.detail-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #2a3441; }
.detail-footer .disclaimer { font-size: 12px; color: #667788; }

/* ========== 价格页 ========== */
.benchmark-section { margin-bottom: 32px; }
.benchmark-section h3 { color: #f0c040; margin-bottom: 16px; }
.benchmark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.benchmark-card {
    background: linear-gradient(135deg, #1a2332 0%, #2a3441 100%);
    border-radius: 10px;
    padding: 18px;
    border: 1px solid #f0c040;
}
.bm-name { font-size: 14px; color: #e8e8e8; font-weight: 600; margin-bottom: 4px; }
.bm-region { font-size: 12px; color: #8899aa; margin-bottom: 12px; }
.bm-price { font-size: 26px; color: #f0c040; font-weight: 700; }
.bm-unit { font-size: 13px; color: #8899aa; font-weight: normal; }
.bm-change { font-size: 14px; margin-top: 6px; }
.bm-change.up { color: #ff6b6b; }
.bm-change.down { color: #4caf50; }

.variety-section { margin-bottom: 32px; }
.variety-section h3 { color: #4a9eff; margin-bottom: 12px; font-size: 17px; }
.price-table { width: 100%; border-collapse: collapse; background: #1a2332; border-radius: 8px; overflow: hidden; }
.price-table th { background: #2a3441; color: #8899aa; padding: 12px; text-align: left; font-size: 13px; font-weight: 600; }
.price-table td { padding: 10px 12px; border-bottom: 1px solid #2a3441; font-size: 13px; color: #b0bec5; }
.price-table tr:hover { background: #1f2a3a; }
.price-num { color: #f0c040; font-weight: 600; }
.price-table .up { color: #ff6b6b; }
.price-table .down { color: #4caf50; }

/* ========== 登录页 ========== */
.login-body {
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container {
    background: #1a2332;
    border-radius: 16px;
    padding: 40px;
    width: 400px;
    border: 1px solid #2a3441;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo { font-size: 48px; margin-bottom: 12px; }
.login-header h1 { color: #f0c040; font-size: 28px; margin-bottom: 8px; }
.login-subtitle { color: #8899aa; font-size: 14px; }
.login-form .form-group { margin-bottom: 20px; }
.login-form label { display: block; color: #b0bec5; font-size: 14px; margin-bottom: 8px; }
.login-form input {
    width: 100%;
    background: #0f1419;
    border: 1px solid #2a3441;
    color: #e8e8e8;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.login-form input:focus { border-color: #f0c040; }
.login-btn {
    width: 100%;
    background: linear-gradient(135deg, #f0c040 0%, #d4a830 100%);
    color: #0f1419;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(240,192,64,0.3); }
.login-error { background: rgba(255,107,107,0.15); color: #ff6b6b; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.login-footer { text-align: center; margin-top: 24px; }
.login-footer p { color: #667788; font-size: 12px; margin-bottom: 4px; }
.disclaimer-mini { color: #556677 !important; font-size: 11px !important; }

/* ========== 页脚 ========== */
.footer { background: #0a0e12; border-top: 1px solid #2a3441; padding: 24px; text-align: center; }
.footer-content { max-width: 1400px; margin: 0 auto; }
.footer p { color: #667788; font-size: 13px; margin-bottom: 6px; }
.footer .disclaimer { font-size: 11px; color: #556677; max-width: 800px; margin: 0 auto; }

/* ========== 响应式 ========== */
@media (max-width: 900px) {
    .home-grid { grid-template-columns: 1fr; }
    .welcome-banner { flex-direction: column; gap: 16px; }
    .welcome-stats { gap: 20px; }
    .nav-search { display: none; }
    .logo-sub { display: none; }
}