/* Responsive breakpoints for FinTrack — Sky Glass 3D */

@media (max-width: 1100px) {
    .auth-wrap { grid-template-columns: 1fr 1fr; }
    .auth-showcase { padding: 2rem; }
}

@media (max-width: 1024px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .hero { grid-template-columns: 1fr 0.8fr; padding: 1.6rem; }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -290px;
        margin: 10px;
        height: calc(100vh - 20px);
        transition: left .35s var(--ease-spring);
    }
    .sidebar.open { left: 0; }
    .menu-toggle { display: inline-flex; }
    .sidebar-overlay.open {
        display: block;
        position: fixed; inset: 0;
        background: rgba(8, 47, 73, 0.35);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 35;
    }
    .topbar { margin: 10px 10px 0; top: 10px; padding: 0.7rem 0.9rem; }
    .content { padding: 1.1rem 1rem 2rem; }
    .topbar-date { display: none; }

    /* auth: banner on top, compact */
    .auth-wrap { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
    .auth-showcase { padding: 1.5rem; border-radius: 24px; }
    .showcase-copy { margin-top: 1.2rem; }
    .showcase-art { min-height: 0; }
    .showcase-art img { max-width: 340px; }
}

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .stat-card { padding: 1rem; }
    .stat-card::before { width: 26px; height: 26px; top: 10px; right: 10px; }
    .stat-label { padding-right: 32px; font-size: 0.75rem; }
    .stat-value { font-size: 1.2rem; }
    .page-title { font-size: 1.1rem; }
    .panel { padding: 1rem; }
    .filters-bar .form-field { min-width: 100%; }
    table.table { font-size: 0.82rem; }
    .table th, .table td { padding: 0.55rem; }
    .auth-card { padding: 1.75rem 1.3rem; }
    .showcase-art, .showcase-chips { display: none; }
    .showcase-copy h1 { font-size: 1.5rem; }

    .hero { grid-template-columns: 1fr; padding: 1.4rem; }
    .hero-art { order: -1; }
    .hero-art img { max-width: 280px; }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
    .user-name { display: none; }
    .topbar-user { padding: 0.2rem; }
}