dasd

public/assets/app.css

@@ -28,9 +28,9 @@
 }
 
 .mm-shell {
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
-  padding: 3rem 2rem 4rem;
+  padding: 2.5rem 1.5rem 4rem;
   animation: fadeUp 0.6s ease both;
 }
 
@@ -161,8 +161,81 @@
   vertical-align: top;
 }
 
-.mm-table tbody td[title] {
-  cursor: help;
+
+.mm-info-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: #fff7ed;
+  color: #9a3412;
+  padding: 0.15rem 0.5rem;
+  margin-top: 0.3rem;
+}
+
+.mm-tooltip {
+  position: fixed;
+  z-index: 50;
+  max-width: 280px;
+  background: #101018;
+  color: #f4f4f7;
+  border-radius: 12px;
+  padding: 0.6rem 0.75rem;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
+  font-size: 0.75rem;
+  line-height: 1.35;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.mm-tooltip.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mm-details-row {
+  background: #fffaf3;
+}
+
+.mm-details {
+  padding: 0.9rem 1rem;
+  border-left: 3px solid var(--accent);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.6rem 1rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+  position: relative;
+}
+
+.mm-details strong {
+  color: var(--ink);
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.mm-row-toggle {
+  cursor: pointer;
+}
+
+.mm-details-close {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.8rem;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+  color: var(--muted);
+  cursor: pointer;
 }
 
 .mm-table tbody tr:nth-child(even) {