/* AppStateViews.kt AppStateView — the shared loading / error / empty card. */
.appstate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 16px 12px; padding: 24px 20px; border-radius: 20px;
  background: color-mix(in srgb, var(--md-surface-variant) 35%, transparent);
}
.appstate .ic {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(color-mix(in srgb, var(--md-primary) 16%, transparent),
                              color-mix(in srgb, var(--md-primary) 8%, transparent));
  color: var(--md-primary); margin-bottom: 16px;
}
.appstate .ic svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }
.appstate .t { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--md-on-surface); }
.appstate .b { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.appstate .btn { margin-top: 16px; flex: 0 0 auto; }

/* EmptyPlaceholder.kt — a 64 icon tinted onBackground, 12 gap, bodyLarge text. */
.empty { display: flex; flex-direction: column; align-items: center; padding: 32px 20px; text-align: center; }
.empty .ic { width: 64px; height: 64px; color: var(--md-on-background); opacity: .7; margin-bottom: 12px; }
.empty .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.empty p { margin: 0; font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant); }

/* ZemerLoadingIndicator.kt — the inline "this section is loading" block. */
.loading { display: grid; place-items: center; padding: 24px 0; }
/* ContainedLoadingIndicator — the morphing shape on a filled container. */
.m3-loader { display: inline-grid; place-items: center; color: var(--md-primary); }
.m3-loader.contained {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.m3-loader .xspin { display: block; }