/* ==========================================================================
   TovTalk Screen-Specific Styles
   Styles scoped to individual screens (profile, search, settings, home, chat,
   comments, share).  Extracted from the old monolithic main.css.
   ========================================================================== */

/* --- Profile screen ------------------------------------------------------ */
.profileScreen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profileHeaderCard {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-sm);
  margin-bottom: var(--space-xs);
}
.profileHeaderTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}
.profileHeaderLeft {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.profileAvatar {
  width: var(--avatar-profile);
  height: var(--avatar-profile);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--text-secondary);
}
.profileAvatarPlaceholder {
  width: var(--avatar-profile);
  height: var(--avatar-profile);
  border-radius: 50%;
  background: var(--text-secondary);
}
.profileFullname {
  font-weight: var(--weight-semibold);
  font-size: var(--text-title-md);
  color: var(--text-primary);
  margin-top: 6px;
  text-align: center;
}
.profileUsername {
  font-size: var(--text-stats);
  color: var(--text-secondary);
  margin-top: var(--space-xxxs);
}
.profileBio {
  font-size: var(--text-stats);
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  max-lines: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profileStats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.profileStat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--overlay-light);
}
.profileStatCount {
  font-weight: var(--weight-semibold);
  font-size: var(--text-username);
  color: var(--text-primary);
}
.profileStatLabel {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-top: var(--space-xxxs);
}
.profileActions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 10px;
}
.profileActionBtn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-body-md);
  border-radius: var(--radius-md);
}
/* Collapsed profile bar — sticky at top when scrolled down */
.profileCollapsedBar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profileCollapsedBar.visible {
  display: flex;
}
.profileCollapsedBar .collapsedAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.profileCollapsedBar .collapsedAvatarPlaceholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex-shrink: 0;
}
.profileCollapsedBar .collapsedInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.profileCollapsedBar .collapsedName {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-md);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profileCollapsedBar .collapsedFollowers {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.profileCollapsedBar .collapsedActions {
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);
  align-items: center;
  flex-shrink: 0;
}
.profileCollapsedBar .collapsedActions .btn {
  padding: var(--space-xxxs) var(--space-sm);
  font-size: var(--text-body-sm);
}

.profileDivider {
  margin: var(--space-xs) 0;
  border: none;
  border-top: 1px solid var(--border);
  opacity: 0.6;
}
.profileTabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.profileTabBtn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.profileTabBtnActive {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.profileSortRow {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.profileSortBtn {
  padding: 6px var(--space-sm);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-md);
  background: var(--overlay-light);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.profileSortBtnActive {
  background: color-mix(in srgb, var(--brand-light) 20%, transparent);
  border-color: var(--brand-light);
  color: var(--brand-light);
}
.profileKashrutMsg {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-md);
  padding: var(--space-lg) var(--space-md);
  margin: 0;
}
.profileGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding-bottom: var(--space-lg);
}
.profileGridItem {
  aspect-ratio: 15 / 20;
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-overlay);
  position: relative;
}
.profileGridThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profileGridThumbPlaceholder {
  width: 100%;
  height: 100%;
  background: var(--text-secondary);
}
.profileHint,
.profileError {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-md);
}
.profileError {
  color: var(--error);
}

/* Profile Grid Item Stats Overlay */
.profileGridStats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-xs);
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  font-size: var(--text-label-sm);
  color: white;
}
.profileGridStatItem {
  display: flex;
  align-items: center;
  gap: 2px;
}
.profileGridStatItem .material-symbols-rounded {
  font-size: 12px;
}
.profileGridPin {
  position: absolute;
  top: var(--space-xxs);
  right: var(--space-xxs);
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- Settings placeholder ------------------------------------------------ */
.settingsPlaceholder {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.settingsPlaceholder h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-headline-sm);
  color: var(--text-primary);
}
.settingsPlaceholder p {
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
}
.settingsPlaceholder .btn {
  margin-top: var(--space-xs);
}

/* --- Home header --------------------------------------------------------- */
.homeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 6px 0 var(--space-sm);
}
.homeTitle {
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-bold);
}
.homeMeta {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xxs);
}

/* --- Home search button -------------------------------------------------- */
.homeSearchBtn {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 9999;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 28px;
  background: none;
  padding: 0;
}

/* --- Tabs (pill row) ----------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--space-xs);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  padding: 6px;
  border-radius: var(--radius-full);
}
.tabBtn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-xs) 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.tabBtnActive {
  color: var(--text-primary);
  background: var(--overlay-light);
}

/* --- Search screen ------------------------------------------------------- */
.searchScreen {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  height: 100%;
  overflow: hidden;
}
.searchBar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--surface-elevated);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  border: none;
}
.searchIcon { color: rgba(255,255,255,0.72); }
.searchInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--text-body-md);
}
.searchClear {
  border: 0;
  background: transparent;
  color: var(--brand-light);
  cursor: pointer;
}
.searchBody {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.searchSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-xs) 2px 6px;
}
.searchSectionTitle {
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  font-size: var(--text-stats);
}
.searchLinkBtn {
  border: 0;
  background: transparent;
  color: var(--brand-light);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}
.searchDivider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-sm) 0;
}
.searchHint { color: rgba(255,255,255,0.72); font-size: var(--text-stats); }
.searchList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.searchRow { border-bottom: 1px solid rgba(255,255,255,0.07); }
.searchRowBtn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-xxs);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.rowIcon { opacity: 0.70; }
.rowText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.searchUserRow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  position: relative;
}
.userAvatar {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.userMeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.userName {
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.userSub { font-size: var(--text-body-sm); color: rgba(255,255,255,0.72); }
.userSub2 { font-size: var(--text-body-sm); color: rgba(255,255,255,0.55); }
.userFollowing { font-size: var(--text-body-sm); color: rgba(255,255,255,0.62); }
.followBtn {
  min-width: 80px;
  height: var(--btn-height-sm);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-button);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
}
.rowClickLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Hashtag posts grid (inside search) ---------------------------------- */
.hashtagPostsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
@media (min-width: 768px) {
  .hashtagPostsGrid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .hashtagPostsGrid { grid-template-columns: repeat(5, 1fr); }
}
.hashtagPostsGrid .gridItem {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface-elevated);
}
.hashtagPostsGrid .gridItemImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hashtagPostsGrid .gridItemOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xs);
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-size: var(--text-body-sm);
}

/* --- Share options -------------------------------------------------------- */
.shareOptionsCard {
  width: min(320px, 100%);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(17,19,26,0.95);
  padding: var(--space-lg);
}
.shareOptionsTitle {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-title-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.shareOptionBtn {
  display: block;
  width: 100%;
  margin-bottom: var(--space-xs);
}

/* --- Comments sheet (TikTok-style) --------------------------------------- */
.commentsSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.commentsSheet {
  width: 100%;
  max-width: 480px;
  max-height: 75vh;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.commentsSheetHandle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  margin: 10px auto var(--space-xs);
}
.commentsSheetTitle {
  margin: 0 0 var(--space-xs);
  padding: 0 var(--space-md);
  font-size: var(--text-username);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.commentsSheetList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-xs) var(--space-md) var(--space-md);
}
.commentsSheetHint {
  padding: var(--space-lg) 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-md);
  margin: 0;
}
.commentsSheetInputRow {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-elevated);
}
.commentsSheetInput {
  flex: 1;
  padding: 10px var(--space-sm);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--overlay-light);
  color: var(--text-primary);
  font-size: var(--text-body-md);
}
.commentsSheetSend {
  padding: 10px var(--space-lg);
}
.commentRow {
  display: flex;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.commentAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.commentAvatarPlaceholder {
  background: var(--text-secondary);
}
.commentBody {
  flex: 1;
  min-width: 0;
}
.commentUser {
  font-size: var(--text-stats);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-left: 6px;
}
.commentTime {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-right: 6px;
}
.commentText {
  margin: var(--space-xxs) 0 6px;
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
}
.commentLikeBtn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  padding: 0 var(--space-xxs);
  cursor: pointer;
}
.commentLikeCount {
  margin-right: var(--space-xxs);
  font-size: var(--text-caption);
}

/* --- Chat ---------------------------------------------------------------- */
.chat-bubble-own {
  background: var(--brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  max-width: 70%;
  align-self: flex-end;
  word-wrap: break-word;
}
.chat-bubble-theirs {
  background: var(--chat-bubble-theirs);
  color: var(--text-primary);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  padding: var(--space-xs) var(--space-sm);
  max-width: 70%;
  align-self: flex-start;
  word-wrap: break-word;
}
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  overflow-y: auto;
  flex: 1;
}
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

/* --- Login screen -------------------------------------------------------- */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-md);
  background: var(--bg-primary);
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-xl);
}
.login-logo {
  text-align: center;
  font-size: var(--text-headline-lg);
  font-weight: var(--weight-bold);
  color: var(--brand);
  margin-bottom: var(--space-xl);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-error {
  color: var(--error);
  font-size: var(--text-body-sm);
  text-align: center;
}

/* --- Notifications screen ------------------------------------------------ */
.notificationsScreen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notificationsHeader {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-md) var(--space-sm);
}
.notificationsTitle {
  font-size: var(--text-headline-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.notificationsList {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notificationRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  border-bottom: 1px solid var(--border);
}
.notificationRow:hover {
  background: var(--overlay-light);
}
.notificationRowUnread {
  background: rgba(37, 99, 235, 0.06);
}
.notificationAvatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.notificationAvatarPlaceholder {
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.notificationAvatarAdmin {
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
}
.notificationBody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
}
.notificationText {
  font-size: var(--text-body-md);
  color: var(--text-primary);
  line-height: 1.4;
}
.notificationBold {
  font-weight: var(--weight-semibold);
}
.notificationTime {
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
}
.notificationIcon {
  flex-shrink: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notificationsEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) var(--space-md);
  gap: var(--space-sm);
}
.notificationsEmptyIcon {
  font-size: var(--icon-xl);
  color: var(--text-tertiary);
}
.notificationsEmptyText {
  font-size: var(--text-body-md);
  color: var(--text-tertiary);
  margin: 0;
}
.notificationsLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}
.notificationSkeleton {
  pointer-events: none;
}

/* Skeleton line helpers (used by notification & other skeletons) */
.skeletonLine {
  height: 12px;
  border-radius: var(--radius-xs);
  background: var(--overlay-light);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeletonLineLong {
  width: 75%;
}
.skeletonLineShort {
  width: 40%;
  margin-top: var(--space-xs);
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* --- Inbox (combined notifications + messages) --------------------------- */
.inbox-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.inbox-title {
  font-size: var(--text-title-lg);
  font-weight: var(--weight-bold);
  text-align: center;
  padding: var(--space-sm);
}
.inbox-tabs {
  display: flex;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--border);
}
.inbox-tab {
  flex: 1;
  padding: var(--space-sm) 0;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  font-size: var(--text-title-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  position: relative;
}
.inbox-tab-active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
  font-weight: var(--weight-bold);
}
.inbox-tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--error);
  margin-left: 4px;
  vertical-align: top;
}
.inbox-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--error);
  color: white;
  font-size: 10px;
  padding: 0 4px;
  margin-left: 4px;
}
.inbox-content {
  flex: 1;
  overflow-y: auto;
}

/* --- Language & Kashrut selection screens -------------------------------- */
.selection-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-md);
  background: var(--bg-primary);
}
.selection-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-elevated);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: var(--space-xl);
  text-align: center;
}
.selection-icon {
  font-size: 48px;
  color: var(--brand);
  margin-bottom: var(--space-md);
}
.selection-title {
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}
.selection-subtitle {
  font-size: var(--text-body-md);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
  line-height: 1.4;
}
.selection-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.selection-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-body-md);
  cursor: pointer;
  transition: all var(--duration-fast);
  width: 100%;
  text-align: start;
}
.selection-item:hover {
  background: var(--overlay-light);
  border-color: var(--brand-light);
}
.selection-item-active {
  background: color-mix(in srgb, var(--brand-light) 15%, transparent);
  border-color: var(--brand-light);
  color: var(--brand-light);
  font-weight: var(--weight-semibold);
}
.selection-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--text-secondary);
}
.selection-item-active .material-symbols-rounded {
  color: var(--brand-light);
}
.selection-error {
  color: var(--error);
  font-size: var(--text-body-sm);
  margin: var(--space-xs) 0;
}
.selection-loading {
  color: var(--text-secondary);
  font-size: var(--text-body-md);
  padding: var(--space-lg) 0;
}

/* --- Desktop content widths (TikTok-style) ------------------------------- */
/* Wide content pages: profile, search, hashtag */
.profileScreen,
.searchScreen,
.hashtagScreen {
  max-width: 1200px;
  margin: 0 auto;
}

/* Medium content pages: settings, inbox */
.settings-screen,
.inbox-screen {
  max-width: 900px;
  margin: 0 auto;
}

/* Narrow content pages: notifications */
.notificationsScreen {
  max-width: 800px;
  margin: 0 auto;
}

/* Form/sub-settings pages */
.edit-profile-screen,
.notification-settings-screen {
  max-width: 600px;
  margin: 0 auto;
}

/* --- Home feed ad items -------------------------------------------------- */
.reelItem.reelAdItem {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    scroll-snap-align: start;
    height: 100%;
}

.reelAdItem iframe {
    border: none;
    width: 90%;
    max-width: 420px;
    height: 85%;
    border-radius: 12px;
}

.adLabel {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 1;
}