web mobile changes

web/static/style.css

@@ -430,11 +430,40 @@ a:hover {
     color: rgba(255,255,255,0.2);
 }
 
+/* ── Table scroll wrapper ── */
+
+.table-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* ── 2-col form row ── */
+
+.form-row-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0 16px;
+}
+
+/* ── Faction breakdown grid ── */
+
+.faction-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
 /* ── Responsive ── */
 
 @media (max-width: 600px) {
     .brand-name { display: none; }
     .hero-title { font-size: 36px; }
+    .hero { padding: 40px 0 32px; margin-bottom: 32px; }
     .auth-card { padding: 24px; }
     .card-grid { grid-template-columns: 1fr; }
+    .form-row-2 { grid-template-columns: 1fr; }
+    .faction-grid { grid-template-columns: 1fr; }
+    .site-main { padding: 28px 0 40px; }
 }