Add maximum damage effect optimizer

styles.css

@@ -180,6 +180,7 @@ h3 { margin-bottom: 0; }
 .recommendation-list li { padding-left: 0.25rem; }
 .recommendation-list strong { color: var(--accent); }
 .recommendation-list small { display: block; color: var(--muted); margin-top: 0.2rem; }
+.muted-copy { color: var(--muted); margin-bottom: 0.85rem; }
 
 .effect-totals {
   display: grid;
@@ -255,6 +256,34 @@ h3 { margin-bottom: 0; }
 .delta-positive { color: #86efac; }
 .delta-neutral { color: var(--muted); }
 .delta-negative { color: #f87171; }
+.optimum-card {
+  display: grid;
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+.optimum-results {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+.optimum-results > div {
+  border: 1px solid var(--border);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.75rem;
+}
+.optimum-results span {
+  display: block;
+  color: var(--muted);
+  margin-bottom: 0.25rem;
+}
+.optimum-results strong { font-size: 1.35rem; }
+.optimum-suggestion {
+  margin: 0;
+  color: var(--accent);
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
 .swap-actions {
   display: flex;
   flex-wrap: wrap;
@@ -270,6 +299,6 @@ h3 { margin-bottom: 0; }
 
 @media (max-width: 560px) {
   main, .hero { width: min(100% - 1rem, 1440px); }
-  .summary-grid, .inline-fields, .effect-row { grid-template-columns: 1fr; }
+  .summary-grid, .inline-fields, .effect-row, .optimum-results { grid-template-columns: 1fr; }
   .save-grid { grid-template-columns: 1fr; }
 }