/* +----------------------------------------------------------------------
/* | Static Plugin for ThinkAdmin
/* +----------------------------------------------------------------------
/* | 官方网站: https://thinkadmin.top
/* +----------------------------------------------------------------------
/* | 版权所有 2014~2023 Anyon<zoujingli@qq.com>
/* +----------------------------------------------------------------------
/* | 开源协议 ( https://mit-license.org )
/* | 免责声明 ( https://thinkadmin.top/disclaimer )
/* +----------------------------------------------------------------------
/* | gitee 代码仓库：https://gitee.com/zoujingli/think-plugs-static
/* | github 代码仓库：https://github.com/zoujingli/think-plugs-static
/* +----------------------------------------------------------------------
/* | 自定义后台扩展样式，需要在加载 console.css 后载入
/* | 使用 composer require zoujingli/think-plugs-static 时不会更新此文件
/* +---------------------------------------------------------------------- */
    /* 页面自定义样式 */
    .report-container {
        padding: 20px;
        background: #f5f7fa;
        min-height: 100vh;
    }

    .report-header {
        margin-bottom: 24px;
    }

    .report-header h1 {
        font-size: 24px;
        font-weight: 600;
        color: #1f2329;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .report-header h1::before {
        content: '';
        width: 4px;
        height: 20px;
        background: linear-gradient(180deg, #4080ff 0%, #00d4ff 100%);
        border-radius: 2px;
    }

    .report-header .subtitle {
        font-size: 14px;
        color: #8f959e;
        margin-top: 8px;
        margin-left: 14px;
    }

    /* 统计卡片 */
    .stats-cards {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }

    .stat-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #4080ff 0%, #00d4ff 100%);
    }

    .stat-card .stat-label {
        font-size: 13px;
        color: #8f959e;
        margin-bottom: 8px;
    }

    .stat-card .stat-value {
        font-size: 28px;
        font-weight: 600;
        color: #1f2329;
        margin-bottom: 4px;
    }

    .stat-card .stat-value.small {
        font-size: 24px;
    }

    .stat-card .stat-unit {
        font-size: 14px;
        color: #8f959e;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-card .stat-change {
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .stat-card .stat-change.up {
        color: #10b981;
    }

    .stat-card .stat-change.down {
        color: #ef4444;
    }

    .stat-card .stat-change.up::before {
        content: '↑';
    }

    .stat-card .stat-change.down::before {
        content: '↓';
    }

    .stat-card .stat-date {
        font-size: 12px;
        color: #8f959e;
        margin-top: 8px;
    }

    /* 图表区域 */
    .chart-section {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        margin-bottom: 24px;
    }

    .section-header {
        margin-bottom: 20px;
    }

    .section-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1f2329;
        margin: 0;
    }

    .section-header .section-subtitle {
        font-size: 13px;
        color: #8f959e;
        margin-top: 4px;
    }

    .chart-container {
        height: 350px;
    }

    /* 表格区域 */
    .table-section {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .search-box {
        position: relative;
    }

    .search-box input {
        width: 200px;
        height: 36px;
        padding: 0 32px 0 12px;
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        font-size: 13px;
        color: #1f2329;
        outline: none;
        transition: border-color 0.3s ease;
    }

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

    .search-box::after {
        content: '🔍';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
    }

    .ratio-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

    .ratio-badge.up {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .ratio-badge.down {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    /* 响应式 */
    @media (max-width: 1200px) {
        .stats-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .stats-cards {
            grid-template-columns: 1fr;
        }
    }