.period-analytics-panel {
  border: 1px solid rgba(53, 92, 73, 0.22);
  background:
    radial-gradient(circle at 92% 0%, rgba(65, 129, 94, 0.13), transparent 32%),
    var(--panel, #fff);
}

.period-analytics-heading {
  align-items: flex-start;
}

.period-analytics-heading h2,
.period-analytics-section h3 {
  margin: 0;
}

.period-analytics-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin: 14px 0 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 248, 0.9);
}

.period-analytics-controls label {
  display: grid;
  gap: 7px;
  color: #516057;
  font-size: 12px;
  font-weight: 600;
}

.period-analytics-controls select,
.period-analytics-controls input,
.period-analytics-controls button {
  min-height: 40px;
}

.period-analytics-scope-note,
.period-analytics-status,
.period-assets-status {
  margin: 8px 0 12px;
  color: #68766e;
  font-size: 12px;
}

.period-analytics-metrics,
.period-assets-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.period-analytics-metric,
.period-assets-summary article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.period-analytics-metric > span,
.period-assets-summary span {
  display: block;
  color: #69776f;
  font-size: 12px;
}

.period-analytics-metric > strong,
.period-assets-summary strong {
  display: block;
  margin-top: 7px;
  color: #183428;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.05;
}

.period-analytics-metric p {
  display: flex;
  gap: 7px;
  align-items: baseline;
  margin: 9px 0 0;
}

.period-analytics-metric p b {
  color: #54665b;
  font-size: 12px;
}

.period-analytics-metric.up p b,
.period-analytics-delta.positive {
  color: #18734a;
}

.period-analytics-metric.down p b,
.period-analytics-delta.negative {
  color: #b84b3c;
}

.period-analytics-metric p small,
.period-analytics-contract {
  color: #829087;
  font-size: 10px;
}

.period-analytics-contract {
  min-height: 28px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.09);
}

.period-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 14px;
  margin-top: 14px;
}

.period-analytics-section {
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.period-analytics-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.period-analytics-section-title h3 {
  color: #213a2f;
  font-size: 15px;
}

.period-analytics-section-title span {
  color: #7b8981;
  font-size: 11px;
}

.period-analytics-chart-wrap {
  overflow-x: auto;
}

.period-analytics-chart {
  display: block;
  width: 100%;
  min-width: 560px;
  height: 245px;
}

.period-analytics-chart line {
  stroke: rgba(35, 64, 51, 0.17);
  stroke-width: 1;
}

.period-analytics-chart polyline {
  fill: none;
  stroke: #2d7b57;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.period-analytics-chart circle {
  fill: #fff;
  stroke: #2d7b57;
  stroke-width: 2;
}

.period-analytics-chart text {
  fill: #6d7a72;
  font-size: 11px;
}

.period-analytics-contributions {
  display: grid;
  gap: 8px;
  max-height: 275px;
  overflow: auto;
}

.period-analytics-contribution {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(92px, auto);
  gap: 9px;
  align-items: center;
}

.period-analytics-rank {
  color: #87938c;
  font-size: 11px;
  text-align: center;
}

.period-analytics-contribution-main > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.period-analytics-contribution-main strong {
  overflow: hidden;
  color: #2c3f35;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.period-analytics-contribution-main span {
  color: #8a958f;
  font-size: 10px;
  white-space: nowrap;
}

.period-analytics-bar {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #edf1ee;
}

.period-analytics-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.period-analytics-bar i.positive {
  background: #46a875;
}

.period-analytics-bar i.negative {
  background: #d87364;
}

.period-analytics-delta {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.period-analytics-insights-section {
  margin-top: 14px;
}

.period-analytics-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.period-analytics-insight {
  padding: 12px;
  border-left: 3px solid #94a39a;
  border-radius: 10px;
  background: #f7f9f7;
}

.period-analytics-insight.positive {
  border-left-color: #3a9b69;
}

.period-analytics-insight.attention,
.period-analytics-insight.warning {
  border-left-color: #ce6a55;
}

.period-analytics-insight div {
  display: grid;
  gap: 5px;
}

.period-analytics-insight span {
  color: #78867e;
  font-size: 10px;
}

.period-analytics-insight strong {
  color: #263d32;
  font-size: 13px;
}

.period-analytics-insight p,
.period-analytics-insight small {
  display: block;
  margin: 8px 0 0;
  color: #5f6e65;
  font-size: 11px;
  line-height: 1.55;
}

.period-analytics-insight small {
  color: #7d8982;
}

.period-analytics-notes {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 10px;
}

.period-analytics-notes summary {
  cursor: pointer;
  color: #526158;
  font-size: 12px;
  font-weight: 600;
}

.period-analytics-notes p {
  margin: 7px 0 0;
  color: #78857d;
  font-size: 11px;
}

.period-assets-panel {
  border-color: rgba(53, 92, 73, 0.2);
}

.period-assets-summary {
  margin: 12px 0;
}

.period-assets-summary article p {
  margin: 7px 0 0;
  color: #829087;
  font-size: 10px;
}

.period-assets-table {
  overflow-x: auto;
}

.period-assets-table table {
  min-width: 820px;
}

.period-assets-table td small {
  display: block;
  margin-top: 3px;
  color: #89958e;
}

.period-analytics-empty {
  padding: 28px 14px;
  color: #7b8981;
  text-align: center;
}

@media (max-width: 1100px) {
  .period-analytics-controls {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .period-analytics-metrics,
  .period-assets-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .period-analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .period-analytics-controls,
  .period-analytics-metrics,
  .period-assets-summary,
  .period-analytics-insights {
    grid-template-columns: 1fr;
  }

  .period-analytics-contribution {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .period-analytics-delta {
    grid-column: 2;
    text-align: left;
  }
}