mobile: off-canvas sidebar, responsive grids/charts/top-bar

- Sidebar becomes slide-in overlay under 768px with backdrop
- Hamburger button in top-bar for mobile nav toggle
- Grids stack single-column, charts shrink to 280px
- Tables scroll horizontally with touch momentum
- Status text hidden on mobile (dot stays visible)
- Card headers/actions stack vertically
- Period selectors scroll horizontally

also: image size validation clamp in handleImageGenerations

static/css/dashboard.css

@@ -1395,8 +1395,150 @@ body {
     border: 1px solid var(--bg2);
 }
 
-/* Settings: Warning Card */
+/* Warning Card */
 .warning-card {
     border: 1px dashed var(--warning);
     background: rgba(215, 153, 33, 0.08);
 }
+
+/* ==================== MOBILE BAREBONES ==================== */
+@media (max-width: 767px) {
+    .sidebar {
+        transform: translateX(-100%);
+        width: 280px;
+        z-index: 2000;
+    }
+    .sidebar.mobile-visible {
+        transform: translateX(0);
+    }
+    .sidebar.collapsed {
+        width: 280px;
+    }
+    .sidebar.collapsed .menu-item span,
+    .sidebar.collapsed .menu-title,
+    .sidebar.collapsed .user-details {
+        display: block;
+    }
+    .sidebar.collapsed .menu-item {
+        justify-content: flex-start;
+        padding: 0.75rem var(--spacing-lg);
+    }
+    .sidebar.collapsed .menu-item i {
+        font-size: inherit;
+    }
+    .sidebar.collapsed .sidebar-footer {
+        justify-content: space-between;
+        padding: var(--spacing-lg);
+    }
+
+    .sidebar-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.6);
+        z-index: 1999;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s;
+    }
+    .sidebar-backdrop.visible {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .main-content {
+        padding-left: 0 !important;
+    }
+
+    .mobile-menu-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg1);
+        border: 1px solid var(--bg3);
+        color: var(--fg1);
+        width: 36px;
+        height: 36px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 1rem;
+        flex-shrink: 0;
+    }
+    .mobile-menu-btn:active {
+        background: var(--bg2);
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    .grid-2 {
+        grid-template-columns: 1fr;
+    }
+    .grid-3 {
+        grid-template-columns: 1fr;
+    }
+
+    .chart-container {
+        height: 280px;
+    }
+
+    .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .content-body {
+        padding: var(--spacing-md);
+    }
+    .top-bar {
+        padding: 0 var(--spacing-md);
+        gap: 0.5rem;
+    }
+    .top-bar .page-title h2 {
+        font-size: 1rem;
+    }
+    .top-bar-actions {
+        gap: var(--spacing-sm);
+    }
+
+    .status-indicator .status-text {
+        display: none;
+    }
+
+    .monitoring-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .card-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .card-actions {
+        width: 100%;
+    }
+
+    .login-card {
+        padding: 2rem 1.25rem;
+    }
+
+    .period-selector {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .modal-content {
+        width: 95%;
+        margin: 1rem;
+    }
+}
+
+@media (max-width: 767px) {
+    .mobile-menu-btn { display: inline-flex; }
+}
+@media (min-width: 768px) {
+    .mobile-menu-btn { display: none; }
+    .sidebar-backdrop { display: none; }
+}
+
+/* ponytail: single-breakpoint responsive layer, no card-based table fallback
+   add table→card reflow when tables get too wide to scroll horizontally */