fix(analytics): link report data to selected period

web/static/css/page-growth-bem.css

@@ -59,6 +59,35 @@
   font-feature-settings: "tnum";
 }
 
+.growth-analysis-page .ga-period-filter {
+  display: flex;
+  align-items: end;
+  gap: var(--momo-space-2, 8px);
+  padding: var(--momo-space-3, 12px) var(--momo-space-4, 16px);
+  margin: var(--momo-space-3, 12px) 0 var(--momo-space-4, 16px);
+  background: var(--momo-bg-surface);
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: var(--momo-radius-md, 4px);
+}
+
+.growth-analysis-page .ga-period-filter label {
+  display: grid;
+  gap: 4px;
+  min-width: 170px;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-meta);
+  font-weight: 700;
+}
+
+.growth-analysis-page .ga-period-filter input {
+  min-height: 36px;
+  padding: 6px 10px;
+  color: var(--momo-text-primary);
+  background: var(--momo-bg-canvas);
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: var(--momo-radius-sm, 4px);
+}
+
 .growth-analysis-page .ga-empty-state {
   display: grid;
   gap: var(--momo-space-2, 8px);
@@ -458,6 +487,36 @@
   text-decoration: underline;
 }
 
+.growth-analysis-page .ga-competitor-period-gap {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  min-height: 190px;
+  width: 100%;
+  border-left: 4px solid var(--momo-page-accent);
+  border-radius: 8px;
+  padding: 18px;
+  background: var(--momo-surface-muted, rgba(248, 250, 252, 0.88));
+}
+
+.growth-analysis-page .ga-competitor-period-gap i {
+  margin-bottom: 12px;
+  color: var(--momo-page-accent);
+  font-size: 1.25rem;
+}
+
+.growth-analysis-page .ga-competitor-period-gap strong {
+  color: var(--momo-text-primary);
+  font-size: var(--momo-text-body, 14px);
+}
+
+.growth-analysis-page .ga-competitor-period-gap p {
+  margin: 6px 0 0;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-body-sm, 13px);
+  line-height: 1.55;
+}
+
 @media (max-width: 640px) {
   .growth-analysis-page .ga-page-head {
     align-items: flex-start;
@@ -474,6 +533,16 @@
     text-align: left;
   }
 
+  .growth-analysis-page .ga-period-filter {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+
+  .growth-analysis-page .ga-period-filter label {
+    flex: 1 1 calc(50% - 4px);
+    min-width: 132px;
+  }
+
   .growth-analysis-page .ga-kpi {
     min-height: 112px;
     padding: var(--momo-space-4, 16px);

web/static/css/page-monthly-summary-bem.css

@@ -134,6 +134,28 @@
   top: 12px;
   z-index: 30;
 }
+.ms-period-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 248, 239, 0.18);
+}
+.ms-period-bar label {
+  margin: 0;
+  color: rgba(255, 248, 239, 0.82);
+  font-size: var(--momo-text-label, 11px);
+  font-weight: 700;
+}
+.ms-period-bar input {
+  min-height: 34px;
+  padding: 5px 8px;
+  color: var(--momo-text-primary);
+  background: var(--momo-surface-raised);
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: 4px;
+}
 .ms-filter-group__label {
   display: flex; align-items: center; gap: 6px;
   font-family: var(--momo-font-display);
@@ -365,6 +387,20 @@
     padding: var(--momo-space-3);
   }
 
+  .ms-period-bar {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+
+  .ms-period-bar label {
+    flex: 1 0 100%;
+  }
+
+  .ms-period-bar input {
+    flex: 1 1 132px;
+    min-width: 0;
+  }
+
   .ms-filter-group::before {
     top: 30px;
     bottom: 4px;