@layer pages {
    .page__header {
        margin-bottom: 1.25rem;
    }

    .page__subtitle {
        margin: 0.25rem 0 0;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .panel {
        padding: 1.1rem;
        margin-bottom: 1.25rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .panel h2 {
        margin: 0 0 0.9rem;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

    .status-bars {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .status-bars li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        background: var(--surface-alt);
        border-radius: var(--radius);
    }

    .status-bars__label {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .status-bars__count {
        font-size: 1.15rem;
        font-weight: 650;
    }

    .state {
        padding: 2rem 1rem;
        color: var(--text-muted);
        text-align: center;
    }
}