/**
 * Google Material Symbols (Rounded) sizing + state helpers.
 * Nav surfaces use Flaticon / Facebook-style colorful PNG via .nav-icon.
 */

.material-symbols-rounded.icon,
.icon.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transition: color 180ms ease, font-variation-settings 180ms ease;
  user-select: none;
}

.icon--sm {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.icon--lg {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.nav-menu__item--active .icon,
.navbar__tab--active .icon,
.bottom-nav__item--active .icon {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Flaticon / Facebook-style colorful nav icons (local PNG) */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.nav-icon img,
.nav-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}

.nav-icon--md {
  width: 32px;
  height: 32px;
}

.nav-icon--sm {
  width: 28px;
  height: 28px;
}

.nav-icon--xs {
  width: 24px;
  height: 24px;
}

.nav-icon--lg {
  width: 36px;
  height: 36px;
}

.nav-menu__item .nav-icon {
  width: 36px;
  height: 36px;
}

.navbar__tab .nav-icon {
  width: 28px;
  height: 28px;
}

.navbar__icon-btn .nav-icon {
  width: 28px;
  height: 28px;
}

.menu-toggle .nav-icon {
  width: 28px;
  height: 28px;
}

.bottom-nav__item .nav-icon {
  width: 24px;
  height: 24px;
}

.profile-menu button .nav-icon {
  width: 22px;
  height: 22px;
}

.premium-card__icon .nav-icon {
  width: 36px;
  height: 36px;
}

.navbar__tab .icon { width: 18px; height: 18px; font-size: 18px; }
.navbar__search .icon { width: 16px; height: 16px; font-size: 16px; }
.navbar__icon-btn .icon { width: 20px; height: 20px; font-size: 20px; }
.menu-toggle .icon { width: 22px; height: 22px; font-size: 22px; }
.bottom-nav__item .icon { width: 22px; height: 22px; font-size: 22px; }
.nav-menu__item .icon { width: 20px; height: 20px; font-size: 20px; }
.profile-menu button .icon { width: 16px; height: 16px; font-size: 16px; }
.composer__action .icon { width: 16px; height: 16px; font-size: 16px; }
.composer__monetize .icon { width: 16px; height: 16px; font-size: 16px; }
.quick-stat__icon .icon { width: 18px; height: 18px; font-size: 18px; }
.post__action .icon { width: 18px; height: 18px; font-size: 18px; }
.post__more .icon { width: 18px; height: 18px; font-size: 18px; }
.post__play .icon { width: 28px; height: 28px; font-size: 28px; color: #fff; }
.room-invite__icon .icon { width: 28px; height: 28px; font-size: 28px; }
.room-chip .icon { width: 12px; height: 12px; font-size: 12px; }
.room-invite__copy .icon { width: 14px; height: 14px; font-size: 14px; }
.creator-earnings__icon .icon { width: 18px; height: 18px; font-size: 18px; }
.premium-card__icon .icon { width: 22px; height: 22px; font-size: 22px; color: #fbbf24; }
.friend-item__actions .icon { width: 16px; height: 16px; font-size: 16px; }
.play-room-card__meta .icon { width: 14px; height: 14px; font-size: 14px; }
.play-shortcut__icon .icon { width: 22px; height: 22px; font-size: 22px; }
.play-qa .icon { width: 22px; height: 22px; font-size: 22px; color: #fff; }
.tm-post-btn .icon { width: 16px; height: 16px; font-size: 16px; }
.tm-more-filters-btn .icon { width: 14px; height: 14px; font-size: 14px; }
.tm-refresh .icon { width: 14px; height: 14px; font-size: 14px; }
.tm-rep .icon { width: 12px; height: 12px; font-size: 12px; }
.tm-player__langs .icon { width: 14px; height: 14px; font-size: 14px; }
.tm-icon-btn .icon { width: 16px; height: 16px; font-size: 16px; }
.tm-role-tile__icon .icon { width: 18px; height: 18px; font-size: 18px; }
.tm-bottom-cta__icon .icon { width: 22px; height: 22px; font-size: 22px; }
.empty-state .icon { width: 40px; height: 40px; font-size: 40px; opacity: 0.45; margin-bottom: 8px; }
.random-call .btn .icon { width: 16px; height: 16px; font-size: 16px; }