@media (max-width: 1440px) {
    .cs-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cs-span-8 { grid-column: span 7; }
    .cs-span-4 { grid-column: span 5; }
}

@media (max-width: 1280px) {
    .cs-dash-grid { grid-template-columns: 1fr; }
    .cs-span-8,
    .cs-span-4,
    .cs-span-6,
    .cs-span-12 { grid-column: span 1; }
    .cs-split { grid-template-columns: 1fr; }
    .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .cs-search-trigger kbd { display: none; }
    .cs-search-trigger { width: min(420px, 42vw); }
}

@media (max-width: 1023px) {
    .cs-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
        padding: 8px;
        gap: 8px;
    }
    .cs-nav-collapsed { --cs-sidebar-width: 0px; }
    .cs-topbar {
        top: 8px;
        height: 52px;
        min-height: 52px;
    }
    .cs-search-trigger { display: none; }
    .cs-content { padding: 10px 4px 88px; }
    .cs-hero { max-height: none; }
    .cs-hero h1 { font-size: 1.25rem; }
    .cs-hero-metrics { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .cs-metrics,
    .cs-metrics-secondary,
    .cs-hero-metrics { grid-template-columns: 1fr; }
    .cs-table-wrap[data-cards] table,
    .cs-table-wrap[data-cards] thead { display: none; }
    .cs-table-wrap[data-cards] tbody,
    .cs-table-wrap[data-cards] tr,
    .cs-table-wrap[data-cards] td {
        display: block;
        width: 100%;
    }
    .cs-table-wrap[data-cards] tr {
        padding: .7rem .85rem;
        border-bottom: 1px solid var(--cs-border);
    }
    .cs-table-wrap[data-cards] td::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        color: var(--cs-text-muted);
        font-weight: 650;
        margin-bottom: .1rem;
    }
    .cs-toast-host {
        top: auto;
        bottom: calc(88px + env(safe-area-inset-bottom));
        right: 12px;
        left: 12px;
        z-index: var(--cs-z-toast);
    }
    .cs-card { padding: 14px; }
}

@media (max-width: 430px) {
    .cs-page-heading { font-size: .9rem; }
    .cs-hero-actions .btn { width: auto; }
}