Stabilize project flows and reporting

templates/index.html

@@ -18,6 +18,9 @@
             --warn: #fff0c9;
             --table-alt: #f9fbfc;
             --white: #ffffff;
+            --page-gutter: clamp(14px, 1.8vw, 24px);
+            --panel-pad: clamp(16px, 1.4vw, 20px);
+            --page-frame-width: min(1520px, calc(100vw - (var(--page-gutter) * 2)));
         }
 
         * {
@@ -33,21 +36,25 @@
                 radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 28%),
                 linear-gradient(155deg, var(--bg-a), var(--bg-b));
             min-height: 100vh;
-            padding: 24px;
+            padding: var(--page-gutter);
         }
 
         .page {
-            max-width: 1480px;
+            width: min(100%, var(--page-frame-width));
             margin: 0 auto;
             display: grid;
-            gap: 20px;
+            gap: var(--page-gutter);
+        }
+
+        .page > * {
+            width: 100%;
         }
 
         .panel {
             background: var(--panel);
             border: 1px solid rgba(255, 255, 255, 0.6);
             border-radius: 24px;
-            padding: 24px;
+            padding: var(--panel-pad);
             box-shadow: 0 20px 45px rgba(51, 76, 92, 0.12);
             backdrop-filter: blur(10px);
         }