/* Shared by the HTML startup screen and React loading states. */
.brand-logo { display: block; width: 40px; height: 40px; flex: none; object-fit: contain; }
.topbar-logo { width: 20px; height: 20px; }
.brand-loading { display: flex; align-items: center; gap: 12px; color: #52687b; font: 14px/22px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.brand-loading p { margin: 0; }
.brand-loading__mark { position: relative; display: grid; place-items: center; flex: none; width: 56px; height: 56px; }
.brand-loading__mark::before { content: ""; position: absolute; inset: 0; border: 2px solid #dfe4e8; border-top-color: #1261ad; border-radius: 50%; animation: brand-loading-spin 1s linear infinite; }
.brand-loading__mark .brand-logo { width: 36px; height: 36px; }
.brand-loading--screen { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; flex-direction: column; justify-content: center; padding: 24px; gap: 20px; background: #f6f7f8; }
.brand-loading--screen .brand-loading__mark { width: 88px; height: 88px; }
.brand-loading--screen .brand-logo { width: 60px; height: 60px; }
@keyframes brand-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brand-loading__mark::before { animation: none; } }