/* ============================================================================
   HERMES UI · App layout
   Каркас супер-аппа: оболочка, скролл-область, экраны-модули.
   ============================================================================ */

#app {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: var(--maxw); margin: 0 auto;
  background: var(--bg);
}

/* Прокручиваемая область между app-bar и нижней навигацией */
.app-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
}

/* Экран-модуль: показывается только активный (data-active) */
.screen { display: none; }
.screen[data-active] { display: block; animation: screen-in var(--dur-base) var(--ease); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Переключатель команд */
.team-switch { margin-bottom: var(--sp-4); }

/* Логотип в app-bar */
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: -0.01em;
}
.brand__mark {
  width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--c-brand-600));
  color: #fff; font-size: 16px;
}

/* Точка-индикатор команды на hero */
.team-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.18); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

/* График: контейнер */
.chart-wrap { width: 100%; }
.chart-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-soft); }
.chart-legend__dot { width: 9px; height: 9px; border-radius: 3px; }

/* Заглушка "в разработке" для будущих модулей */
.coming-soon { padding-top: var(--sp-12); }
.coming-soon .h-empty__emoji { font-size: 56px; }

/* Скелетон-строка транзакции */
.skeleton-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }