/* 数据洞察页面样式系统 */

.insights-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    padding: 2.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.insights-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(255,255,255,0.02) 35px,
        rgba(255,255,255,0.02) 70px
    );
}
.insights-hero .container { position: relative; z-index: 2; }
.insights-hero-title { font-size: 1.8rem; font-weight: 700; }
.insights-hero-subtitle { font-size: 1rem; opacity: 0.8; margin-top: 0.5rem; }

.insights-data-scope {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.scope-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
}
.scope-tag-info {
    background: rgba(22,93,255,0.25);
    border-color: rgba(22,93,255,0.4);
    font-weight: 400;
    font-size: 0.78rem;
}

.insights-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
    border: 1px solid rgba(255,255,255,0.2);
}
.insights-back-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.summary-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-left: 4px solid #165DFF;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: all 0.2s;
    height: 100%;
}
.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.summary-card.card-blue { border-left-color: #165DFF; }
.summary-card.card-green { border-left-color: #00B42A; }
.summary-card.card-orange { border-left-color: #FF7D00; }
.summary-card.card-red { border-left-color: #F53F3F; }
.summary-card.card-purple { border-left-color: #722ED1; }
.summary-card .summary-icon {
    width: 36px; height: 36px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}
.summary-card .summary-text {
    font-size: 0.9rem;
    color: #4E5969;
    line-height: 1.6;
}

.insights-chart-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 1.5rem;
    border: 1px solid #f2f3f5;
    position: relative;
}
.insights-chart-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trend-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.trend-tag-up { background: #e8f7ef; color: #00B42A; }
.trend-tag-down { background: #fdeded; color: #F53F3F; }
.trend-tag-flat { background: #f2f3f5; color: #86909C; }

.tier-card {
    border-radius: 0.75rem;
    padding: 1.25rem;
    height: 100%;
}
.tier-high { background: linear-gradient(135deg, #fff5f5, #ffe8e8); border: 1px solid #ffc9c9; }
.tier-steady { background: linear-gradient(135deg, #fff8f0, #ffedd5); border: 1px solid #ffd8a8; }
.tier-low { background: linear-gradient(135deg, #f0f5ff, #e8f0fe); border: 1px solid #c4d5f8; }
.tier-negative { background: linear-gradient(135deg, #f0faf4, #d9f5e6); border: 1px solid #b2e6c8; }
.tier-card .tier-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.tier-card .tier-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.tier-card .tier-item:last-child { border-bottom: none; }

.rank-change-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f2f3f5;
}
.rank-change-item:last-child { border-bottom: none; }
.rank-change-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
.rank-up-badge { background: linear-gradient(135deg, #00B42A, #23C343); }
.rank-down-badge { background: linear-gradient(135deg, #F53F3F, #FF6B6B); }

.insights-content { position: relative; }
.insights-blur-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
.vip-lock-card {
    text-align: center;
    padding: 2.5rem;
    background: rgba(255,255,255,0.95);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    max-width: 360px;
}
.vip-crown-icon {
    font-size: 3rem;
    color: #FFD700;
    display: block;
    margin-bottom: 1rem;
}
.vip-lock-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 0.5rem;
}
.vip-lock-card p {
    font-size: 0.9rem;
    color: #86909C;
    margin-bottom: 1.5rem;
}

.insights-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1d2129;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(255,165,0,0.3);
    white-space: nowrap;
}
.insights-entry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,165,0,0.4);
    color: #1d2129;
}
.insights-entry-btn .crown-icon {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .insights-hero { padding: 1.5rem 0 2rem; }
    .insights-hero-title { font-size: 1.4rem; }
    .insights-chart-card { padding: 1rem; }
    .tier-card { padding: 1rem; }
    .vip-lock-card { padding: 1.5rem; margin: 1rem; }
    .summary-card { padding: 1rem; }
    .insights-data-scope { gap: 0.5rem; }
    .scope-tag { font-size: 0.72rem; padding: 0.25rem 0.65rem; }
    .scope-tag-info { font-size: 0.7rem; }
}