@media (max-width: 1100px) { .app-shell { grid-template-columns: 1fr; } .sidebar { display: none; } .mobile-nav { display: grid; } .page-content { padding: 20px; padding-bottom: 96px; } .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid, .lower-grid, .editor-grid { grid-template-columns: 1fr; } .topbar { align-items: flex-start; flex-direction: column; } .topbar-actions { width: 100%; justify-content: flex-start; } .search-input { width: 100%; } }
@media (max-width: 860px) { .login-page { grid-template-columns: 1fr; align-items: start; gap: 24px; padding: 24px 0; } .login-hero { gap: 20px; } .login-copy p:not(.eyebrow) { font-size: 1rem; } .login-badge { max-width: none; } }
@media (max-width: 640px) { .page-content { padding: 16px; padding-bottom: 94px; } .summary-grid { grid-template-columns: 1fr; } .summary-card { min-height: 124px; border-radius: 18px; } .panel { border-radius: 18px; padding: 16px; } .transaction-item, .table-row { grid-template-columns: 1fr; } .row-actions { justify-content: stretch; } .row-actions .icon-button { flex: 1; } .topbar-actions .ghost-button, .file-button { flex: 1; } .login-page { width: min(100% - 24px, 440px); } .login-options { align-items: flex-start; flex-direction: column; } }