body { margin: 0; font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background: #f0f3f7; color: #1f2d3d; }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 20px 24px; margin-bottom: 24px; }
    .card h2 { margin: 0 0 4px; font-size: 17px; color: #1b3a5c; }
.meta { margin: 0 0 16px; font-size: 13px; color: #6b7a8c; }
.chart-wrapper { position: relative; height: 460px; }
.spinner { display: none; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 4px solid #dde4ec; border-top-color: #2e7bcf; border-radius: 50%; animation: spin 0.8s linear infinite; }
    .spinner.visible { display: block; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
    table.data th { background: #1b3a5c; color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; }
    table.data td { padding: 8px 12px; border-bottom: 1px solid #e6ebf1; }
    table.data tr:nth-child(even) td { background: #f7f9fb; }
    table.data tr:hover td { background: #eef4fb; }
    table.data tr.period-header td {
        background: #dfe8f3; color: #1b3a5c; font-weight: 600;
        border-top: 3px solid #1b3a5c; border-bottom: 1px solid #c3d1e2;
        padding-top: 12px;
    }
    table.data tr.period-header:hover td { background: #dfe8f3; }
    table.data tr.period-row td:first-child { padding-left: 24px; color: #6b7a8c; }
    table.data td:last-child, table.data th:last-child { text-align: right; }