.stats-notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 17px;
  margin-bottom: 16px;
  color: var(--accent);
  background: #171d16;
  border: 1px solid #35422f;
  border-radius: 8px;
}

.stats-notice > span { font-size: 18px; }
.stats-notice strong { color: #dcebd6; font-size: 11px; }
.stats-notice p { margin: 5px 0 0; color: #929e8e; font-size: 10px; line-height: 1.6; }

.stats-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .7fr) auto;
  gap: 13px;
  align-items: end;
  padding: 17px;
  background: #11141b;
  border: 1px solid #252b35;
  border-radius: 9px;
}

.stats-controls label { display: grid; gap: 7px; color: #aab1bd; font-size: 10px; }
.stats-controls .primary-button { min-height: 38px; white-space: nowrap; }
.stats-empty { margin-top: 16px; padding: 48px 20px; text-align: center; border: 1px dashed #2a3039; border-radius: 9px; }
.stats-empty h3 { margin: 11px 0 5px; font: 600 16px var(--display); }
.stats-empty p { margin: 0; color: #808895; font-size: 10px; }
.stats-results { margin-top: 17px; }
.stats-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stats-summary article { padding: 13px 15px; background: #14171e; border: 1px solid #252b35; border-radius: 8px; }
.stats-summary small { display: block; color: #818a97; font-size: 8px; letter-spacing: .8px; }
.stats-summary strong { display: block; margin-top: 7px; color: var(--accent); font: 600 21px var(--display); }
.stats-result-list { overflow: hidden; background: #11141b; border: 1px solid #252b35; border-radius: 9px; }
.stats-table-head, .stats-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 1fr) minmax(110px, .8fr); gap: 18px; align-items: center; }
.stats-table-head { padding: 11px 15px; color: #717a87; background: #14171e; font-size: 8px; letter-spacing: .8px; }
.stats-row { min-height: 74px; padding: 12px 15px; border-top: 1px solid #222731; }
.stats-item { display: flex; gap: 9px; align-items: center; min-width: 0; }
.stats-item strong { overflow: hidden; color: #dfe2e8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stats-item small { color: #818a97; font-size: 8px; }
.stats-value strong { display: block; color: #dfe2e8; font-size: 10px; font-weight: 600; }
.stats-value strong small { color: #aeb5c0; font-size: 9px; font-weight: 400; }
.stats-bar { height: 5px; margin-top: 8px; overflow: hidden; background: #282e38; border-radius: 5px; }
.stats-bar i { display: block; height: 100%; min-width: 1px; border-radius: inherit; }
.stats-bar .observed { background: var(--accent); }
.stats-bar .expected { background: var(--blue); }
.stats-footnote { margin: 12px 3px; color: #77808c; font-size: 9px; line-height: 1.6; }

@media (max-width: 700px) {
  .stats-controls { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .stats-controls .primary-button { grid-column: 1 / -1; }
  .stats-summary { gap: 6px; }
  .stats-summary article { padding: 10px 8px; }
  .stats-summary small { font-size: 7px; }
  .stats-summary strong { font-size: 17px; }
  .stats-table-head, .stats-row { grid-template-columns: minmax(80px, 1fr) minmax(70px, .9fr) minmax(60px, .7fr); gap: 5px; padding-left: 7px; padding-right: 7px; }
  .stats-item { gap: 5px; flex-wrap: wrap; }
  .stats-item small { display: none; }
  .stats-item strong { font-size: 9px; }
  .stats-table-head { font-size: 7px; }
}