/*
 * stats.css — экран «Аналитика» (webapp/stats-panel.js).
 *
 * Подключается ПОСЛЕ app.css, как modal.css и tour.css: правила заканчивают
 * каскад, дублировать их в app.css нельзя — разъедутся.
 *
 * Экран читают, а не разглядывают: никакой анимации, полоски статической
 * ширины. Цветом выделено только то, что требует действия.
 */
  #stats-msg {
    display: none;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--bg2);
    color: var(--hint);
    font-size: 13px;
  }

  /* Число и подпись в один ряд: подпись слева тянется, число прижато вправо
     и не переносится — колонка чисел должна читаться сверху вниз. */
  .st-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
  }
  .st-label { font-size: 13px; color: var(--hint); }
  .st-value { font-size: 17px; font-weight: 600; white-space: nowrap; }
  .st-stat.st-warn .st-value { color: var(--danger); }
  .st-hint { font-size: 11.5px; color: var(--hint); margin-top: 2px; }
  .st-sub {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hint);
  }

  .st-bar { margin-top: 10px; }
  .st-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
  }
  /* Имя сжимается и обрывается, число — нет: пропасть должно имя. */
  .st-bar-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .st-bar-head b { flex: 0 0 auto; }
  .st-track {
    height: 6px;
    margin-top: 4px;
    border-radius: 3px;
    background: var(--bg2);
    overflow: hidden;
  }
  .st-track i { display: block; height: 100%; background: var(--accent); }