/*
 * Mobile social + settings redesign
 * Loaded after the existing feature styles. This layer intentionally keeps the
 * current DOM and behaviour while replacing the phone and tablet presentation.
 */

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  :root {
    --mobile-ui-surface: #fbfdff;
    --mobile-ui-surface-soft: #f1f6f9;
    --mobile-ui-surface-raised: #ffffff;
    --mobile-ui-border: rgba(48, 78, 94, 0.13);
    --mobile-ui-border-strong: rgba(55, 137, 157, 0.25);
    --mobile-ui-text: #13222c;
    --mobile-ui-muted: #657681;
    --mobile-ui-faint: #8b99a2;
    --mobile-ui-accent: #28788a;
    --mobile-ui-accent-soft: #e3f2f5;
    --mobile-ui-danger: #bd3e51;
    --mobile-ui-danger-soft: #fff1f3;
    --mobile-ui-shadow: 0 14px 38px rgba(42, 65, 78, 0.09);
    --mobile-ui-sheet-shadow: 0 -22px 64px rgba(14, 29, 39, 0.2);
    --mobile-ui-card-radius: 22px;
    --mobile-ui-sheet-radius: 28px;
  }

  /* Community shell and compact sharing status. */
  .community-view {
    gap: 14px;
  }

  .community-view > .topbar {
    margin-bottom: 2px;
  }

  .community-share-panel {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    padding: 13px 14px;
    overflow: hidden;
  }

  html[data-theme^="glass-"] .community-share-panel {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-share-title {
    color: var(--mobile-ui-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
  }

  .community-share-copy {
    display: -webkit-box;
    min-height: 0;
    margin-top: 4px;
    overflow: hidden;
    color: var(--mobile-ui-muted);
    font-size: 12px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .share-switch {
    display: grid;
    justify-items: center;
    gap: 4px;
  }

  html[data-theme^="glass-"] .share-switch-track {
    width: 46px;
    height: 26px;
    padding: 3px;
    background: #cdd8de;
  }

  html[data-theme^="glass-"] .share-switch-track span {
    width: 20px;
    height: 20px;
  }

  html[data-theme^="glass-"] .share-switch input:checked + .share-switch-track span {
    transform: translateX(20px);
  }

  .share-switch-text {
    min-width: 0;
    color: var(--mobile-ui-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* The content switch stays visible while a long social feed scrolls. */
  .community-content-tabs {
    position: sticky;
    z-index: 60;
    top: max(8px, env(safe-area-inset-top, 0px));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    box-sizing: border-box;
    border-radius: 15px;
    padding: 3px;
    overflow: hidden;
    isolation: isolate;
  }

  html[data-theme^="glass-"] .community-content-tabs {
    border: 1px solid var(--mobile-ui-border);
    background: rgba(245, 249, 251, 0.96);
    box-shadow: 0 10px 26px rgba(42, 65, 78, 0.09);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-content-tab {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none;
  }

  html[data-theme^="glass-"] body .community-content-tab,
  html[data-theme^="glass-"] body .community-content-tab:hover:not(:disabled),
  html[data-theme^="glass-"] body .community-content-tab:focus-visible,
  html[data-theme^="glass-"] body .community-content-tab:active:not(:disabled) {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    transform: none;
  }

  html[data-theme^="glass-"] .community-content-tab:not(.is-active),
  html[data-theme^="glass-"] .community-content-tab:not(.is-active):hover:not(:disabled),
  html[data-theme^="glass-"] .community-content-tab:not(.is-active):focus-visible,
  html[data-theme^="glass-"] .community-content-tab:not(.is-active):active:not(:disabled) {
    border-color: transparent;
    background: transparent;
    color: var(--mobile-ui-muted);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-content-tab.is-active,
  html[data-theme^="glass-"] .community-content-tab.is-active:hover:not(:disabled),
  html[data-theme^="glass-"] .community-content-tab.is-active:focus-visible {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: 0 3px 10px rgba(42, 65, 78, 0.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Two-column, media-first community masonry feed. */
  .community-section {
    min-height: 48svh;
  }

  .community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
    margin-top: 2px;
    /* Keep the full feed paintable in iOS WebViews while scrolling. */
    content-visibility: visible;
  }

  .community-masonry-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 10px;
  }

  .community-card {
    --community-media-width: 100%;
    --community-cover-height: auto;
    --community-card-content-height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    content-visibility: visible;
    contain-intrinsic-size: none;
    transform: none;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-theme^="glass-"] .community-card,
  html[data-theme^="glass-"] .community-card:hover,
  html[data-theme^="glass-"] .community-card:focus-visible {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: var(--mobile-ui-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-card:active {
    background: var(--mobile-ui-surface-soft);
    /* Avoid creating a transformed layer while touch-scroll is active. */
    transform: none;
  }

  .community-card-media {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
  }

  .community-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-accent);
    font-size: 11px;
  }

  .community-card.community-cover-type-body .community-cover {
    aspect-ratio: 3 / 4;
  }

  .community-card.community-cover-type-food .community-cover,
  .community-card.has-no-community-cover .community-cover {
    aspect-ratio: 1 / 1;
  }

  .community-cover img {
    object-position: center center;
  }

  .community-card-body {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 11px;
    overflow: visible;
  }

  .community-card-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
  }

  .community-card-profile {
    gap: 7px;
  }

  .community-member-avatar {
    width: 30px;
    height: 30px;
    border-color: var(--mobile-ui-border);
    font-size: 11px;
  }

  .community-alias {
    color: var(--mobile-ui-text);
    font-size: 13px;
    font-weight: 700;
  }

  .community-card-time {
    color: var(--mobile-ui-faint);
    font-size: 9px;
    font-weight: 550;
  }

  .community-card-mood {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mobile-ui-text);
    font-size: 11.5px;
    line-height: 1.42;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .community-card .community-weight-mini {
    display: none;
  }

  .community-card-separator {
    display: none;
  }

  .community-card-footer {
    min-height: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 7px;
    color: var(--mobile-ui-muted);
    font-size: 9px;
    line-height: 1.25;
  }

  html[data-theme^="glass-"] .community-card-records {
    color: var(--mobile-ui-accent);
  }

  .community-card-actions {
    justify-content: flex-start;
    gap: 7px;
  }

  .community-empty {
    width: 100%;
    grid-column: 1 / -1;
    min-height: 260px;
    border-radius: var(--mobile-ui-card-radius);
    padding: 32px 24px;
  }

  html[data-theme^="glass-"] .community-empty {
    border: 1px dashed var(--mobile-ui-border-strong);
    background: var(--mobile-ui-surface);
    color: var(--mobile-ui-muted);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Ranking is deliberately quiet: a compact activity list, not a podium. */
  .community-ranking {
    border: 0;
    padding: 5px 0 18px;
  }

  .community-ranking-header {
    gap: 10px;
  }

  .community-ranking-kicker {
    margin: 2px 2px 0;
    color: var(--mobile-ui-muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .ranking-periods {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    border-radius: 14px;
    padding: 3px;
    overflow: hidden;
    isolation: isolate;
  }

  html[data-theme^="glass-"] .ranking-periods {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  .ranking-period {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0;
    border-radius: 10px;
    padding: 0 6px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none;
  }

  html[data-theme^="glass-"] body .ranking-period,
  html[data-theme^="glass-"] body .ranking-period:hover:not(:disabled),
  html[data-theme^="glass-"] body .ranking-period:focus-visible,
  html[data-theme^="glass-"] body .ranking-period:active:not(:disabled) {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 6px;
    transform: none;
  }

  html[data-theme^="glass-"] .ranking-period:not(.is-active),
  html[data-theme^="glass-"] .ranking-period:not(.is-active):hover:not(:disabled),
  html[data-theme^="glass-"] .ranking-period:not(.is-active):focus-visible,
  html[data-theme^="glass-"] .ranking-period:not(.is-active):active:not(:disabled) {
    border-color: transparent;
    background: transparent;
    color: var(--mobile-ui-muted);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .ranking-period.is-active,
  html[data-theme^="glass-"] .ranking-period.is-active:hover:not(:disabled),
  html[data-theme^="glass-"] .ranking-period.is-active:focus-visible {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: 0 2px 8px rgba(42, 65, 78, 0.07);
  }

  .ranking-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--mobile-ui-border);
    border-radius: 20px;
    background: var(--mobile-ui-surface-raised);
  }

  .ranking-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 26px 42px minmax(0, 1fr) minmax(40px, max-content);
    gap: 9px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--mobile-ui-border);
    border-radius: 0;
    padding: 10px 12px;
    overflow: hidden;
    transform: none;
  }

  html[data-theme^="glass-"] body .ranking-item,
  html[data-theme^="glass-"] body .ranking-item:hover:not(:disabled),
  html[data-theme^="glass-"] body .ranking-item:focus-visible,
  html[data-theme^="glass-"] body .ranking-item:active:not(:disabled) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 26px 42px minmax(0, 1fr) minmax(40px, max-content);
    gap: 9px;
    box-sizing: border-box;
    border-radius: 0;
    padding: 10px 12px;
    transform: none;
  }

  .ranking-item:last-child {
    border-bottom: 0;
  }

  html[data-theme^="glass-"] .ranking-item,
  html[data-theme^="glass-"] .ranking-item.rank-1,
  html[data-theme^="glass-"] .ranking-item.rank-2,
  html[data-theme^="glass-"] .ranking-item.rank-3,
  html[data-theme^="glass-"] .ranking-item:hover:not(:disabled) {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ranking-number,
  .rank-1 .ranking-number {
    color: var(--mobile-ui-faint);
    font-size: 15px;
    font-weight: 700;
  }

  .ranking-avatar {
    width: 42px;
    height: 42px;
    border-color: var(--mobile-ui-border);
  }

  .ranking-main strong {
    max-width: 100%;
    color: var(--mobile-ui-text);
    font-size: 14px;
  }

  .ranking-main small {
    max-width: 100%;
    margin-top: 3px;
    color: var(--mobile-ui-muted);
    font-size: 10px;
  }

  .ranking-score {
    min-width: 40px;
    max-width: 64px;
    justify-self: end;
    overflow: hidden;
    color: var(--mobile-ui-accent);
  }

  .ranking-score strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
  }

  .ranking-score small {
    color: var(--mobile-ui-faint);
    font-size: 9px;
  }

  .ranking-empty {
    margin: 0;
    padding: 28px 18px;
    color: var(--mobile-ui-muted);
    text-align: center;
  }

  /* Community detail and comments use the same full-width bottom-sheet shape. */
  .community-detail-backdrop,
  .community-comments-backdrop,
  .notification-backdrop {
    align-items: end;
    padding: 0;
    background: rgba(13, 27, 36, 0.28);
  }

  .community-detail-panel,
  .community-comments-panel,
  .notification-panel {
    width: 100vw;
    max-width: 100vw;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--mobile-ui-sheet-radius) var(--mobile-ui-sheet-radius) 0 0;
  }

  .community-detail-panel {
    height: calc(100dvh - var(--modal-safe-top-gap));
    max-height: calc(100dvh - var(--modal-safe-top-gap));
  }

  .community-comments-panel,
  .notification-panel {
    height: min(90dvh, 760px);
    max-height: 90dvh;
  }

  html[data-theme^="glass-"] .community-detail-panel,
  html[data-theme^="glass-"] .community-comments-panel,
  html[data-theme^="glass-"] .notification-panel {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface);
    color: var(--mobile-ui-text);
    box-shadow: var(--mobile-ui-sheet-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-detail-header,
  .community-comments-modal-header,
  .notification-header {
    position: relative;
    min-height: 74px;
    padding: 24px 15px 11px;
    border-bottom: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
  }

  .community-detail-header,
  .community-comments-modal-header {
    cursor: grab;
    touch-action: none;
  }

  .community-detail-header :is(button, a, input, textarea, select),
  .community-comments-modal-header :is(button, a, input, textarea, select) {
    touch-action: manipulation;
  }

  .community-detail-backdrop.is-sheet-dragging .community-detail-panel,
  .community-comments-backdrop.is-sheet-dragging .community-comments-panel {
    transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
    transition: none;
  }

  .community-detail-backdrop.is-sheet-drag-releasing .community-detail-panel,
  .community-comments-backdrop.is-sheet-drag-releasing .community-comments-panel {
    transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
    transition: transform 280ms cubic-bezier(0.22, 0.82, 0.24, 1);
  }

  .community-detail-backdrop.is-sheet-drag-releasing,
  .community-comments-backdrop.is-sheet-drag-releasing {
    transition: background-color 280ms ease;
  }

  .community-detail-header::before,
  .community-comments-modal-header::before,
  .notification-header::before {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(78, 100, 112, 0.22);
    content: "";
    transform: translateX(-50%);
  }

  html[data-theme^="glass-"] .community-detail-header,
  html[data-theme^="glass-"] .community-comments-modal-header,
  html[data-theme^="glass-"] .notification-header {
    border-bottom-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
  }

  .community-detail-header > div {
    min-width: 0;
  }

  .community-detail-header p,
  .community-comments-modal-header p,
  .notification-header p {
    color: var(--mobile-ui-accent);
    font-size: 10px;
    font-weight: 700;
  }

  .community-detail-header h2,
  .community-comments-modal-header h2,
  .notification-header h2 {
    color: var(--mobile-ui-text);
    font-size: 19px;
    font-weight: 700;
  }

  .community-detail-title-row {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 10px;
  }

  .community-detail-avatar {
    width: 40px;
    height: 40px;
    box-shadow: none;
  }

  .community-detail-name-row {
    height: 40px;
  }

  .community-detail-close,
  .community-comments-close,
  .notification-close,
  .notification-mark-read {
    min-height: 36px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 650;
  }

  html[data-theme^="glass-"] .community-detail-close,
  html[data-theme^="glass-"] .community-comments-close,
  html[data-theme^="glass-"] .notification-close,
  html[data-theme^="glass-"] .notification-mark-read {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-detail-content {
    background: var(--mobile-ui-surface-soft);
  }

  .community-detail-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid var(--mobile-ui-border);
    padding: 12px 13px 15px;
    background: var(--mobile-ui-surface-raised);
  }

  html[data-theme^="glass-"] .community-detail-profile {
    border-bottom-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
  }

  .community-detail-cover {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-accent);
  }

  html[data-theme^="glass-"] .community-detail-cover {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  .community-detail-summary {
    gap: 6px;
    padding: 0 2px;
  }

  .community-detail-latest {
    color: var(--mobile-ui-faint);
    font-size: 11px;
  }

  .community-detail-mood {
    color: var(--mobile-ui-text);
    font-size: 15px;
    line-height: 1.55;
  }

  .community-detail-action-row {
    grid-template-columns: minmax(78px, 1fr) auto;
    gap: 9px;
  }

  .community-detail-actions {
    height: 42px;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .community-detail-replay {
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
  }

  html[data-theme^="glass-"] .community-detail-replay {
    border-color: var(--mobile-ui-border-strong);
    background: var(--mobile-ui-accent-soft);
    color: var(--mobile-ui-accent);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-social-button,
  .community-like-button.community-social-button {
    height: 42px;
    min-height: 42px;
  }

  html[data-theme^="glass-"] .community-social-button,
  html[data-theme^="glass-"] .community-like-button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-detail-record-area {
    gap: 12px;
    padding: 12px;
    background: var(--mobile-ui-surface-soft);
  }

  html[data-theme^="glass-"] .community-detail-record-area {
    background: var(--mobile-ui-surface-soft);
  }

  .community-detail-record-area > .weight-chart,
  .community-detail-record-area > .weight-calendar,
  .community-detail-record-area > .community-detail-goal-chart,
  .community-detail-history-section {
    border-radius: 18px;
  }

  html[data-theme^="glass-"] .community-detail-weight-chart,
  html[data-theme^="glass-"] .community-detail-history-section {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-detail-history-section {
    padding: 13px;
  }

  /* Comments: readable message stream, with composer anchored to the sheet. */
  .community-comments-content {
    background: var(--mobile-ui-surface);
  }

  html[data-theme^="glass-"] .community-comments-content,
  html[data-theme^="glass-"] .community-comments-panel .community-comments {
    background: var(--mobile-ui-surface);
  }

  .community-comments-panel .community-comments {
    padding: 8px 12px max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }

  .community-comment-list {
    gap: 10px;
    margin-top: 4px;
    padding: 4px 0 10px;
  }

  .community-comment-item {
    grid-template-columns: 30px minmax(0, 1fr) 38px;
    gap: 8px;
    margin-left: calc(var(--comment-depth, 0) * 10px);
    padding-top: 7px;
  }

  .community-comment-item.is-own {
    margin-left: calc(var(--comment-depth, 0) * 10px);
  }

  .community-comment-children {
    padding-left: 8px;
    border-left-color: var(--mobile-ui-border-strong);
  }

  html[data-theme^="glass-"] .community-comment-bubble,
  html[data-theme^="glass-"] .community-comment-item.is-own .community-comment-bubble {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .community-comment-meta strong {
    color: var(--mobile-ui-muted);
    font-size: 12px;
  }

  .community-comment-bubble p {
    color: var(--mobile-ui-text);
    font-size: 14px;
    line-height: 1.55;
  }

  .community-comment-footer,
  .community-comment-footer time,
  .community-comment-like,
  .community-comment-more {
    color: var(--mobile-ui-faint);
  }

  .community-comment-form {
    gap: 7px;
    margin-top: 8px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-comment-form input {
    min-height: 46px;
    border-radius: 15px;
    padding: 0 14px;
    font-size: 16px;
  }

  .community-comment-form button {
    min-width: 58px;
    min-height: 46px;
    border-radius: 15px;
    padding: 0 13px;
  }

  html[data-theme^="glass-"] .community-comment-form input {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme^="glass-"] .community-comment-form button {
    border: 1px solid var(--mobile-ui-border-strong);
    background: var(--mobile-ui-accent);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .community-reply-target {
    border-radius: 12px;
    background: var(--mobile-ui-accent-soft);
  }

  .community-comment-empty {
    min-height: 210px;
    border-radius: 18px;
  }

  html[data-theme^="glass-"] .community-comment-empty {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-muted);
    box-shadow: none;
  }

  .community-comment-action-sheet-backdrop {
    padding: 0 10px max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    background: rgba(13, 27, 36, 0.34);
  }

  .community-comment-action-sheet {
    width: 100%;
    border-radius: 22px;
    padding: 10px;
  }

  html[data-theme^="glass-"] .community-comment-action-sheet {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: var(--mobile-ui-sheet-shadow);
  }

  .community-comment-action-button {
    min-height: 52px;
    border-radius: 14px;
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-accent);
    box-shadow: none;
  }

  /* Settings overview becomes a familiar system-style grouped list. */
  .settings-view {
    gap: 18px;
    min-height: 0;
    padding-bottom: 20px;
  }

  .settings-view > .topbar {
    margin-bottom: 2px;
  }

  .settings-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-top: 0;
  }

  .settings-panel {
    min-width: 0;
    align-content: start;
    gap: 14px;
  }

  html[data-theme^="glass-"] .settings-panel,
  html[data-theme^="glass-"] .settings-detail-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .settings-group {
    border: 0;
    padding: 0;
  }

  html[data-theme^="glass-"] .settings-panel > .settings-group {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .account-overview-group {
    padding: 0;
  }

  .account-management-entry {
    min-height: 78px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 11px;
    border-radius: 19px;
    padding: 11px 13px;
  }

  html[data-theme^="glass-"] .account-management-entry,
  html[data-theme^="glass-"] .account-management-entry:hover:not(:disabled),
  html[data-theme^="glass-"] .account-management-entry:focus-visible {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: var(--mobile-ui-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .account-management-entry .settings-account-avatar {
    width: 44px;
    height: 44px;
    border-width: 1px;
    font-size: 16px;
    box-shadow: none;
  }

  .account-management-summary {
    gap: 5px;
  }

  .account-management-summary > strong {
    color: var(--mobile-ui-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }

  .account-overview-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
  }

  .account-overview-fields > span {
    display: inline-flex;
    gap: 5px;
    border: 0;
    padding: 0;
    background: transparent;
  }

  html[data-theme^="glass-"] .account-overview-fields > span {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .account-overview-fields small,
  .account-overview-fields em {
    color: var(--mobile-ui-muted);
    font-size: 11px;
    font-weight: 550;
  }

  .account-overview-fields small::after {
    content: " ·";
  }

  .settings-options,
  .native-health-sync {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--mobile-ui-border);
    border-radius: 18px;
    padding: 0;
    background: var(--mobile-ui-surface-raised);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
  }

  html[data-theme^="glass-"] .settings-panel > .settings-options,
  html[data-theme^="glass-"] .settings-panel > .native-health-sync {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
  }

  .settings-option-button,
  .native-health-sync .settings-option-button {
    min-height: 80px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--mobile-ui-border);
    border-radius: 0;
    padding: 12px 14px;
  }

  .settings-option-button:last-child,
  .native-health-sync .settings-option-button:last-child {
    border-bottom: 0;
  }

  html[data-theme^="glass-"] .settings-option-button,
  html[data-theme^="glass-"] .native-health-sync .settings-option-button,
  html[data-theme^="glass-"] .settings-option-button:hover:not(:disabled),
  html[data-theme^="glass-"] .settings-option-button:focus-visible,
  html[data-theme^="glass-"] .settings-option-button:active:not(:disabled) {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .settings-option-button > span:first-child {
    gap: 3px;
  }

  .settings-option-button small {
    color: var(--mobile-ui-accent);
    font-size: 10px;
    font-weight: 700;
  }

  .settings-option-button strong {
    color: var(--mobile-ui-text);
    font-size: 15px;
    font-weight: 650;
  }

  .settings-option-button em,
  .native-health-last-sync {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mobile-ui-muted);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .settings-options .settings-option-button em {
    -webkit-line-clamp: 1;
  }

  .native-health-sync .settings-option-button {
    min-height: 100px;
  }

  .native-health-last-sync {
    margin-top: 1px;
    font-size: 11px;
  }

  .settings-status-pill {
    max-width: none;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    overflow-wrap: normal;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
  }

  .settings-option-meta {
    align-items: center;
    gap: 5px;
  }

  .settings-option-arrow {
    color: var(--mobile-ui-faint);
    font-size: 22px;
  }

  .settings-overview-actions {
    padding: 2px 0 0;
  }

  .settings-logout-button {
    min-height: 48px;
    border-radius: 16px;
  }

  html[data-theme^="glass-"] .settings-logout-button {
    border: 1px solid rgba(189, 62, 81, 0.16);
    background: var(--mobile-ui-danger-soft);
    color: var(--mobile-ui-danger);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Settings overview: every destination is one complete surface.  Keeping the
     groups structural (instead of drawing a card around cards) removes the
     doubled outline and gives each action enough room to read at phone widths. */
  #settingsOverviewPanel {
    gap: 14px;
  }

  #settingsOverviewPanel > .settings-group,
  html[data-theme^="glass-"] #settingsOverviewPanel > .settings-group {
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #settingsOverviewPanel > .settings-options,
  #settingsOverviewPanel > .native-health-sync,
  html[data-theme^="glass-"] #settingsOverviewPanel > .settings-options,
  html[data-theme^="glass-"] #settingsOverviewPanel > .native-health-sync {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #settingsOverviewPanel .account-management-entry {
    min-height: 76px;
    border-radius: 18px;
    padding: 12px 14px;
  }

  #settingsOverviewPanel .settings-option-button,
  #settingsOverviewPanel .native-health-sync .settings-option-button {
    box-sizing: border-box;
    min-height: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--mobile-ui-border);
    border-radius: 17px;
    padding: 13px 14px;
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme^="glass-"] #settingsOverviewPanel .settings-option-button,
  html[data-theme^="glass-"] #settingsOverviewPanel .native-health-sync .settings-option-button,
  html[data-theme^="glass-"] #settingsOverviewPanel .settings-option-button:hover:not(:disabled),
  html[data-theme^="glass-"] #settingsOverviewPanel .settings-option-button:focus-visible,
  html[data-theme^="glass-"] #settingsOverviewPanel .settings-option-button:active:not(:disabled) {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
  }

  html[data-theme^="glass-"] #settingsOverviewPanel .settings-option-button:active:not(:disabled) {
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  #settingsOverviewPanel .settings-option-button > span:first-child {
    min-width: 0;
    gap: 4px;
  }

  #settingsOverviewPanel .settings-option-button small {
    line-height: 1.2;
  }

  #settingsOverviewPanel .settings-option-button strong {
    font-size: 16px;
    line-height: 1.24;
  }

  #settingsOverviewPanel .settings-option-button em,
  #settingsOverviewPanel .native-health-last-sync {
    line-height: 1.45;
  }

  #settingsOverviewPanel .settings-options .settings-option-button em {
    -webkit-line-clamp: 2;
  }

  #settingsOverviewPanel .settings-status-pill {
    max-width: none;
    flex: 0 0 auto;
    padding: 6px 9px;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
  }

  #settingsOverviewPanel .native-health-sync .settings-option-button {
    min-height: 112px;
  }

  #settingsOverviewPanel .settings-option-meta {
    min-width: 0;
    align-self: center;
  }

  #settingsOverviewPanel .settings-overview-actions {
    margin-top: 2px;
    padding: 0;
  }

  #settingsOverviewPanel .settings-logout-button {
    min-height: 50px;
    border-radius: 16px;
  }

  /* Settings detail pages. */
  .settings-detail-panel {
    gap: 10px;
    padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  }

  .settings-back-button {
    width: fit-content !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    margin: 0 0 -1px !important;
    border: 1px solid var(--mobile-ui-border) !important;
    border-radius: 12px !important;
    padding: 0 11px 0 8px !important;
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
  }

  .settings-back-button::before {
    margin-right: 4px;
    color: currentColor;
    font-size: 21px;
    font-weight: 500;
    line-height: 0.8;
  }

  html[data-theme^="glass-"] .settings-back-button,
  html[data-theme^="glass-"] .settings-back-button:hover:not(:disabled),
  html[data-theme^="glass-"] .settings-back-button:focus-visible,
  html[data-theme^="glass-"] .settings-back-button:active:not(:disabled) {
    border: 1px solid var(--mobile-ui-border) !important;
    border-radius: 12px !important;
    padding: 0 11px 0 8px !important;
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: none;
    text-decoration: none;
  }

  html[data-theme^="glass-"] .settings-back-button:active:not(:disabled) {
    background: var(--mobile-ui-surface-soft);
    transform: scale(0.97);
  }

  .settings-group-heading,
  .danger-zone {
    gap: 12px;
    padding: 2px 2px 0;
  }

  .settings-group h2 {
    color: var(--mobile-ui-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
  }

  .settings-kicker {
    margin-bottom: 5px;
    color: var(--mobile-ui-accent);
    font-size: 10px;
    font-weight: 700;
  }

  .settings-description {
    margin-top: 5px;
    color: var(--mobile-ui-muted);
    font-size: 13px;
    line-height: 1.55;
  }

  .account-management-panel .account-management-section,
  .settings-detail-panel > .settings-group {
    border: 1px solid var(--mobile-ui-border);
    border-radius: 20px;
    padding: 14px;
    background: var(--mobile-ui-surface-raised);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
  }

  .account-management-panel > .settings-group:first-of-type {
    border: 0;
    padding: 1px 2px 2px;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme^="glass-"] .account-management-panel .account-management-section,
  html[data-theme^="glass-"] .settings-detail-panel > .settings-group {
    border: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: 0 8px 24px rgba(42, 65, 78, 0.05);
  }

  html[data-theme^="glass-"] .account-management-panel > .settings-group:first-of-type {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .account-profile-readonly {
    margin-top: 9px;
    border-radius: 16px;
  }

  html[data-theme^="glass-"] .account-profile-readonly {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  .account-profile-item {
    height: 54px;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    border-bottom-color: var(--mobile-ui-border);
    padding: 0 12px;
  }

  .account-profile-item .settings-account-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .account-profile-item > span:first-child {
    color: var(--mobile-ui-muted);
    font-size: 12px;
  }

  .account-profile-item strong {
    color: var(--mobile-ui-text);
    font-size: 14px;
  }

  .account-binding-list {
    gap: 8px;
  }

  .account-binding-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    border-radius: 16px;
    padding: 11px;
  }

  .account-management-section .settings-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* A settings subpage is its own mobile navigation level. The persistent tab
     bar obscured account rows and actions, so it leaves the stage until Back. */
  body:has(.settings-view:not(.hidden) .settings-detail-panel:not(.hidden)) .settings-view > .topbar {
    display: none;
  }

  body:has(.settings-view:not(.hidden) .settings-detail-panel:not(.hidden)) .bottom-tabs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + 24px + env(safe-area-inset-bottom, 0px)), 0);
  }

  html[data-theme^="glass-"] body.has-bottom-tabs:has(.settings-view:not(.hidden) .settings-detail-panel:not(.hidden)) .app-shell {
    padding-bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  }

  .settings-view:not(.hidden):has(.settings-detail-panel:not(.hidden)) ~ .site-footer {
    display: none;
  }

  html[data-theme^="glass-"] .account-binding-card {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  .account-binding-card .account-binding-actions,
  .account-binding-card > .account-bind-button {
    grid-column: 1 / -1;
  }

  .account-bind-button {
    min-height: 42px;
    border-radius: 13px;
  }

  html[data-theme^="glass-"] .account-bind-button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: none;
  }

  .mode-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
  }

  .mode-selector button {
    min-height: 82px;
    border-radius: 16px;
    padding: 13px;
  }

  html[data-theme^="glass-"] .mode-selector button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .mode-selector button.is-active {
    border-color: var(--mobile-ui-border-strong);
    background: var(--mobile-ui-accent-soft);
    color: var(--mobile-ui-accent);
    box-shadow: inset 0 0 0 1px rgba(40, 120, 138, 0.06);
  }

  .document-links {
    gap: 8px;
    margin-top: 15px;
  }

  .document-link {
    min-height: 42px;
    border-radius: 13px;
    background: var(--mobile-ui-surface-soft);
  }

  .privacy-audit-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--mobile-ui-border);
  }

  .privacy-audit-summary span {
    border-bottom: 1px solid var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
  }

  .privacy-audit-summary span:last-child {
    border-bottom: 0;
  }

  .native-health-switch-list {
    gap: 8px;
    margin-top: 16px;
  }

  .native-health-switch {
    border-radius: 16px;
    padding: 13px;
  }

  html[data-theme^="glass-"] .native-health-switch {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .passkey-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    border-radius: 16px;
    margin-top: 16px;
    padding: 14px;
  }

  html[data-theme^="glass-"] .passkey-card,
  html[data-theme^="glass-"] .passkey-list-item,
  html[data-theme^="glass-"] .passkey-empty {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .passkey-add-button {
    width: 100%;
    min-height: 44px;
    border-radius: 13px;
  }

  html[data-theme^="glass-"] .passkey-add-button {
    border-color: var(--mobile-ui-border-strong);
    background: var(--mobile-ui-accent);
    color: #fff;
    box-shadow: none;
  }

  .passkey-list-item,
  .passkey-empty {
    border-radius: 15px;
  }

  .danger-zone {
    border-color: rgba(189, 62, 81, 0.16) !important;
    background: var(--mobile-ui-danger-soft) !important;
  }

  .account-delete-button,
  .withdraw-button {
    width: 100%;
    min-height: 44px;
    border-radius: 13px;
  }

  /* Notification list. */
  .notification-content {
    padding: 0 0 max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--mobile-ui-surface-raised);
  }

  .notification-list {
    gap: 0;
    background: var(--mobile-ui-surface-raised);
  }

  .notification-swipe-row {
    border-radius: 0;
  }

  .notification-item {
    min-height: 82px;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 0;
    padding: 10px 14px;
  }

  html[data-theme^="glass-"] .notification-item,
  html[data-theme^="glass-"] .notification-item:hover,
  html[data-theme^="glass-"] .notification-item:focus-visible {
    min-height: 82px;
    border-color: transparent;
    border-radius: 0;
    padding: 10px 14px;
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .notification-item.is-unread {
    border-color: transparent;
    box-shadow: none;
  }

  html[data-theme^="glass-"] .notification-item:active:not(:disabled) {
    border-color: transparent;
    background: var(--mobile-ui-surface-soft);
    box-shadow: none;
  }

  .notification-item-icon-wrap {
    width: 50px;
    height: 50px;
  }

  .notification-item-icon {
    width: 50px;
    height: 50px;
    margin-top: 0;
    border-radius: 12px;
  }

  .notification-item-icon svg {
    width: 21px;
    height: 21px;
  }

  .notification-item-heading strong {
    color: var(--mobile-ui-text);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
  }

  html[data-theme^="glass-"] .notification-item-copy,
  html[data-theme^="glass-"] .notification-item-heading time,
  html[data-theme^="glass-"] .notification-loading,
  html[data-theme^="glass-"] .notification-empty {
    color: var(--mobile-ui-muted);
  }

  .notification-item-copy {
    font-size: 14px;
    line-height: 1.35;
  }

  html[data-theme^="glass-"] .notification-item-actor {
    color: inherit;
  }

  .notification-item-heading time {
    font-size: 11px;
  }

  .notification-item-unread {
    border-color: var(--mobile-ui-surface-raised);
  }

  /* Unified mobile sheets: consent, profile, Passkey, feedback and policy. */
  .consent-backdrop,
  .policy-backdrop {
    align-items: end;
    place-items: end center;
    padding: 0;
    background: rgba(13, 27, 36, 0.42);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .consent-dialog,
  .privacy-consent-dialog,
  .passkey-prompt-dialog,
  .profile-edit-dialog,
  .confirmation-dialog,
  .action-confirm-dialog,
  .feedback-dialog,
  .policy-panel {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--mobile-ui-sheet-radius) var(--mobile-ui-sheet-radius) 0 0;
    padding: 30px 18px max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    background: var(--mobile-ui-surface-raised);
    box-shadow: var(--mobile-ui-sheet-shadow);
    opacity: 1;
    transform: translate3d(0, 100%, 0);
  }

  .consent-backdrop.is-open .consent-dialog,
  .consent-backdrop.is-open .profile-edit-dialog,
  .consent-backdrop.is-open .confirmation-dialog,
  .consent-backdrop.is-open .action-confirm-dialog,
  .consent-backdrop.is-open .feedback-dialog,
  .policy-backdrop.is-open .policy-panel {
    transform: translate3d(0, 0, 0);
  }

  .consent-dialog::before,
  .profile-edit-dialog::before,
  .confirmation-dialog::before,
  .action-confirm-dialog::before,
  .feedback-dialog::before,
  .policy-panel::before {
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(78, 100, 112, 0.22);
    content: "";
    transform: translateX(-50%);
  }

  html[data-theme^="glass-"] .consent-dialog,
  html[data-theme^="glass-"] .privacy-consent-dialog,
  html[data-theme^="glass-"] .passkey-prompt-dialog,
  html[data-theme^="glass-"] .profile-edit-dialog,
  html[data-theme^="glass-"] .confirmation-dialog,
  html[data-theme^="glass-"] .action-confirm-dialog,
  html[data-theme^="glass-"] .feedback-dialog,
  html[data-theme^="glass-"] .policy-panel {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: var(--mobile-ui-sheet-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .consent-dialog h2,
  .confirmation-dialog h2,
  .action-confirm-dialog h2,
  .feedback-dialog h2,
  .profile-edit-dialog h2 {
    color: var(--mobile-ui-text);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
  }

  .consent-dialog > p:not(.eyebrow),
  .consent-dialog li,
  .confirmation-dialog > p:not(.danger-kicker):not(.confirmation-message),
  .action-confirm-dialog > p:not(.eyebrow),
  .feedback-dialog > p:not(.eyebrow):not(.feedback-message) {
    color: var(--mobile-ui-muted);
    font-size: 13px;
    line-height: 1.6;
  }

  .consent-actions,
  .action-confirm-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 18px;
  }

  .consent-actions button,
  .action-confirm-actions button {
    min-height: 48px;
    border-radius: 15px;
  }

  .privacy-highlights {
    gap: 6px;
  }

  .privacy-highlights span,
  .passkey-prompt-visual {
    border-radius: 13px;
    background: var(--mobile-ui-surface-soft);
  }

  html[data-theme^="glass-"] .privacy-highlights span,
  html[data-theme^="glass-"] .passkey-prompt-visual {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-muted);
    box-shadow: none;
  }

  .passkey-prompt-visual {
    margin-top: 13px;
    padding: 12px;
  }

  .profile-edit-dialog {
    gap: 12px;
  }

  .profile-edit-avatar-row {
    padding: 2px 0 0;
  }

  .profile-edit-avatar-row .settings-account-avatar {
    width: 74px;
    height: 74px;
    font-size: 24px;
  }

  .account-profile-field input,
  .account-profile-field select,
  .profile-gender-options button,
  .profile-birthday-clear-button,
  .birthday-picker-toggle,
  .birthday-picker-done {
    min-height: 46px;
    border-radius: 13px;
  }

  html[data-theme^="glass-"] .account-profile-field input,
  html[data-theme^="glass-"] .account-profile-field select,
  html[data-theme^="glass-"] .profile-gender-options button,
  html[data-theme^="glass-"] .profile-birthday-clear-button,
  html[data-theme^="glass-"] .birthday-picker-toggle,
  html[data-theme^="glass-"] .birthday-picker-done {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  .profile-birthday-control {
    gap: 8px;
  }

  .profile-birthday-clear-button {
    min-width: 72px;
    padding: 0 14px;
  }

  .profile-gender-options.profile-gender-scroll {
    grid-auto-columns: minmax(104px, 1fr);
  }

  .profile-gender-scroll button {
    min-height: 46px;
  }

  .birthday-picker {
    border-radius: 16px;
  }

  .profile-edit-dialog .account-profile-actions {
    gap: 8px;
    margin-top: 4px;
  }

  .profile-edit-dialog .profile-action-button {
    height: 48px;
    min-height: 48px;
    border-radius: 15px;
  }

  html[data-theme^="glass-"] .profile-edit-dialog .profile-action-button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .profile-edit-dialog .profile-action-button[type="submit"] {
    border-color: var(--mobile-ui-border-strong);
    background: var(--mobile-ui-accent);
    color: #fff;
  }

  .feedback-dialog {
    overflow-y: auto;
  }

  .feedback-dialog > p:not(.eyebrow):not(.feedback-message) {
    margin: 8px 0 15px;
  }

  .feedback-dialog label {
    gap: 6px;
    margin-bottom: 11px;
    color: var(--mobile-ui-muted);
    font-size: 12px;
  }

  .feedback-dialog select,
  .feedback-dialog textarea,
  .confirmation-dialog input {
    border-radius: 14px;
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
  }

  html[data-theme^="glass-"] .feedback-dialog select,
  html[data-theme^="glass-"] .feedback-dialog textarea,
  html[data-theme^="glass-"] .confirmation-dialog input {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  .feedback-attachments {
    border: 1px solid var(--mobile-ui-border);
    border-radius: 16px;
    padding: 11px;
    background: var(--mobile-ui-surface-soft);
  }

  .feedback-upload-button {
    min-height: 36px;
    border-radius: 12px;
  }

  html[data-theme^="glass-"] .feedback-upload-button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: none;
  }

  .feedback-image-preview {
    border-radius: 13px;
  }

  .policy-panel {
    height: 94dvh;
    max-height: 94dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
  }

  .policy-header {
    position: relative;
    padding: 28px 15px 12px;
    border-bottom-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
  }

  .policy-header h2 {
    color: var(--mobile-ui-text);
    font-size: 20px;
    font-weight: 700;
  }

  .policy-header .secondary-button {
    min-height: 36px;
    border-radius: 999px;
    padding: 0 13px;
  }

  .policy-content {
    padding: 18px 17px max(30px, calc(env(safe-area-inset-bottom, 0px) + 22px));
    background: var(--mobile-ui-surface);
    color: #334752;
    font-size: 14px;
    line-height: 1.78;
  }

  html[data-theme^="glass-"] .policy-content {
    background: var(--mobile-ui-surface);
    color: #334752;
  }

  .policy-content h3 {
    color: var(--mobile-ui-text);
    font-size: 16px;
  }
}

/* The three SF Symbols share one alpha-mask treatment so every visual theme
   can tint the original SVG artwork with its own primary and muted colors. */
.action-entry-glyph {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
  color: inherit;
  background: var(--theme-primary, currentColor);
}

.replay-launch-button:disabled .action-entry-glyph {
  background: var(--theme-muted, currentColor);
}

.camera-entry-glyph {
  -webkit-mask: url("../assets/actions/camera.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
  mask: url("../assets/actions/camera.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
}

.food-entry-glyph {
  -webkit-mask: url("../assets/actions/fork.knife.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
  mask: url("../assets/actions/fork.knife.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
}

.replay-entry-glyph {
  -webkit-mask: url("../assets/actions/play.circle.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
  mask: url("../assets/actions/play.circle.svg?v=20260716-sf-symbol-icons2") center / contain no-repeat;
}

@media (max-width: 360px) {
  .action-entry-glyph {
    width: 30px;
    height: 30px;
  }

  .community-grid {
    gap: 8px;
  }

  .community-masonry-column {
    gap: 8px;
  }

  .community-card {
    border-radius: 16px;
  }

  .community-card-body {
    gap: 7px;
    padding: 8px 8px 9px;
  }

  .community-card-profile {
    gap: 6px;
  }

  .community-member-avatar {
    width: 28px;
    height: 28px;
  }

  .community-alias {
    font-size: 12px;
  }

  .community-card-footer {
    font-size: 8.5px;
  }

  .community-card-actions {
    gap: 6px;
  }

  .ranking-item {
    grid-template-columns: 22px 38px minmax(0, 1fr) minmax(40px, 54px);
    gap: 7px;
    padding-inline: 9px;
  }

  html[data-theme^="glass-"] body .ranking-item,
  html[data-theme^="glass-"] body .ranking-item:hover:not(:disabled),
  html[data-theme^="glass-"] body .ranking-item:focus-visible,
  html[data-theme^="glass-"] body .ranking-item:active:not(:disabled) {
    grid-template-columns: 22px 38px minmax(0, 1fr) minmax(40px, 54px);
    gap: 7px;
    padding-inline: 9px;
  }

  .ranking-avatar {
    width: 38px;
    height: 38px;
  }

  .community-detail-profile {
    padding-inline: 11px;
  }

  .community-detail-action-row {
    grid-template-columns: minmax(70px, 1fr) auto;
    gap: 6px;
  }

  .community-detail-actions {
    gap: 4px;
  }

  .community-like-button.community-social-button,
  .community-comment-button {
    flex-basis: 56px;
    width: 56px;
    min-width: 56px;
    padding-inline: 7px;
  }

  .community-more-button {
    width: 40px;
    min-width: 40px;
  }

  .settings-option-button,
  .native-health-sync .settings-option-button {
    padding-inline: 12px;
  }

  #settingsOverviewPanel {
    gap: 12px;
  }

  #settingsOverviewPanel > .settings-options,
  #settingsOverviewPanel > .native-health-sync {
    gap: 8px;
  }

  #settingsOverviewPanel .settings-option-button,
  #settingsOverviewPanel .native-health-sync .settings-option-button {
    min-height: 86px;
    gap: 8px;
    border-radius: 16px;
    padding: 12px;
  }

  #settingsOverviewPanel .settings-option-button strong {
    font-size: 15px;
  }

  #settingsOverviewPanel .settings-option-button em,
  #settingsOverviewPanel .native-health-last-sync {
    font-size: 11px;
  }

  #settingsOverviewPanel .settings-status-pill {
    max-width: none;
    padding-inline: 7px;
  }

  #settingsOverviewPanel .native-health-sync .settings-option-button {
    min-height: 108px;
  }

  .account-management-entry {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 12px;
  }

  .account-management-entry .settings-account-avatar {
    width: 40px;
    height: 40px;
  }

  .account-management-summary > strong {
    font-size: 17px;
  }

  .account-overview-fields {
    gap: 3px 8px;
  }

  .account-management-panel .account-management-section,
  .settings-detail-panel > .settings-group {
    border-radius: 18px;
    padding: 12px;
  }

  .account-profile-item {
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
    padding-inline: 10px;
  }

  .settings-status-pill {
    max-width: none;
    padding-inline: 6px;
  }

  .consent-dialog,
  .privacy-consent-dialog,
  .passkey-prompt-dialog,
  .profile-edit-dialog,
  .confirmation-dialog,
  .action-confirm-dialog,
  .feedback-dialog {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 1024px) and (prefers-color-scheme: dark),
  (max-width: 1366px) and (any-pointer: coarse) and (prefers-color-scheme: dark) {
  html[data-theme^="glass-"] {
    --mobile-ui-surface: #0c1622;
    --mobile-ui-surface-soft: #111e2b;
    --mobile-ui-surface-raised: #162432;
    --mobile-ui-border: rgba(185, 224, 236, 0.13);
    --mobile-ui-border-strong: rgba(134, 211, 229, 0.3);
    --mobile-ui-text: #f0f7fa;
    --mobile-ui-muted: rgba(216, 232, 239, 0.7);
    --mobile-ui-faint: rgba(190, 207, 217, 0.52);
    --mobile-ui-accent: #8ed9e9;
    --mobile-ui-accent-soft: #173442;
    --mobile-ui-danger: #ff8fa3;
    --mobile-ui-danger-soft: #321d29;
    --mobile-ui-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
    --mobile-ui-sheet-shadow: 0 -24px 68px rgba(0, 0, 0, 0.44);
  }

  html[data-theme^="glass-"] .community-share-panel,
  html[data-theme^="glass-"] .community-card,
  html[data-theme^="glass-"] .community-card:hover,
  html[data-theme^="glass-"] .community-card:focus-visible,
  html[data-theme^="glass-"] .ranking-item,
  html[data-theme^="glass-"] .ranking-item.rank-1,
  html[data-theme^="glass-"] .ranking-item.rank-2,
  html[data-theme^="glass-"] .ranking-item.rank-3,
  html[data-theme^="glass-"] .ranking-item:hover:not(:disabled),
  html[data-theme^="glass-"] .account-management-entry,
  html[data-theme^="glass-"] .account-management-entry:hover:not(:disabled),
  html[data-theme^="glass-"] .account-management-entry:focus-visible,
  html[data-theme^="glass-"] .settings-panel > .settings-options,
  html[data-theme^="glass-"] .settings-panel > .native-health-sync,
  html[data-theme^="glass-"] .settings-option-button,
  html[data-theme^="glass-"] .native-health-sync .settings-option-button,
  html[data-theme^="glass-"] .settings-option-button:hover:not(:disabled),
  html[data-theme^="glass-"] .settings-option-button:focus-visible,
  html[data-theme^="glass-"] .settings-option-button:active:not(:disabled),
  html[data-theme^="glass-"] .account-management-panel .account-management-section,
  html[data-theme^="glass-"] .settings-detail-panel > .settings-group,
  html[data-theme^="glass-"] .notification-item,
  html[data-theme^="glass-"] .notification-item:hover,
  html[data-theme^="glass-"] .notification-item:focus-visible {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
    box-shadow: var(--mobile-ui-shadow);
  }

  html[data-theme^="glass-"] .ranking-item,
  html[data-theme^="glass-"] .ranking-item.rank-1,
  html[data-theme^="glass-"] .ranking-item.rank-2,
  html[data-theme^="glass-"] .ranking-item.rank-3,
  html[data-theme^="glass-"] .settings-option-button,
  html[data-theme^="glass-"] .native-health-sync .settings-option-button,
  html[data-theme^="glass-"] .notification-item {
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-content-tabs,
  html[data-theme^="glass-"] .ranking-periods,
  html[data-theme^="glass-"] .community-card .community-weight-mini,
  html[data-theme^="glass-"] .community-detail-content,
  html[data-theme^="glass-"] .community-detail-record-area,
  html[data-theme^="glass-"] .community-comment-empty,
  html[data-theme^="glass-"] .notification-content,
  html[data-theme^="glass-"] .account-profile-readonly,
  html[data-theme^="glass-"] .account-binding-card,
  html[data-theme^="glass-"] .mode-selector button,
  html[data-theme^="glass-"] .native-health-switch,
  html[data-theme^="glass-"] .passkey-card,
  html[data-theme^="glass-"] .passkey-list-item,
  html[data-theme^="glass-"] .passkey-empty,
  html[data-theme^="glass-"] .privacy-highlights span,
  html[data-theme^="glass-"] .passkey-prompt-visual,
  html[data-theme^="glass-"] .account-profile-field input,
  html[data-theme^="glass-"] .account-profile-field select,
  html[data-theme^="glass-"] .profile-gender-options button,
  html[data-theme^="glass-"] .birthday-picker-toggle,
  html[data-theme^="glass-"] .birthday-picker-done,
  html[data-theme^="glass-"] .feedback-dialog select,
  html[data-theme^="glass-"] .feedback-dialog textarea,
  html[data-theme^="glass-"] .confirmation-dialog input {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-content-tab.is-active,
  html[data-theme^="glass-"] .community-content-tab.is-active:hover:not(:disabled),
  html[data-theme^="glass-"] .community-content-tab.is-active:focus-visible,
  html[data-theme^="glass-"] .ranking-period.is-active,
  html[data-theme^="glass-"] .ranking-period.is-active:hover:not(:disabled),
  html[data-theme^="glass-"] .ranking-period.is-active:focus-visible {
    border-color: var(--mobile-ui-border-strong);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }

  html[data-theme^="glass-"] .community-detail-panel,
  html[data-theme^="glass-"] .community-comments-panel,
  html[data-theme^="glass-"] .notification-panel,
  html[data-theme^="glass-"] .consent-dialog,
  html[data-theme^="glass-"] .privacy-consent-dialog,
  html[data-theme^="glass-"] .passkey-prompt-dialog,
  html[data-theme^="glass-"] .profile-edit-dialog,
  html[data-theme^="glass-"] .confirmation-dialog,
  html[data-theme^="glass-"] .action-confirm-dialog,
  html[data-theme^="glass-"] .feedback-dialog,
  html[data-theme^="glass-"] .policy-panel {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface);
    color: var(--mobile-ui-text);
    box-shadow: var(--mobile-ui-sheet-shadow);
  }

  html[data-theme^="glass-"] .community-detail-header,
  html[data-theme^="glass-"] .community-comments-modal-header,
  html[data-theme^="glass-"] .notification-header,
  html[data-theme^="glass-"] .community-detail-profile,
  html[data-theme^="glass-"] .policy-header {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
  }

  html[data-theme^="glass-"] .community-detail-cover,
  html[data-theme^="glass-"] .community-detail-weight-chart,
  html[data-theme^="glass-"] .community-detail-history-section,
  html[data-theme^="glass-"] .community-comments-content,
  html[data-theme^="glass-"] .community-comments-panel .community-comments,
  html[data-theme^="glass-"] .policy-content {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-comment-bubble,
  html[data-theme^="glass-"] .community-comment-item.is-own .community-comment-bubble {
    background: transparent;
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-comment-meta strong,
  html[data-theme^="glass-"] .community-comment-footer,
  html[data-theme^="glass-"] .community-comment-footer time,
  html[data-theme^="glass-"] .community-comment-like,
  html[data-theme^="glass-"] .community-comment-more,
  html[data-theme^="glass-"] .notification-item-copy,
  html[data-theme^="glass-"] .notification-item-meta time,
  html[data-theme^="glass-"] .notification-item-type,
  html[data-theme^="glass-"] .notification-loading,
  html[data-theme^="glass-"] .notification-empty {
    color: var(--mobile-ui-muted);
  }

  html[data-theme^="glass-"] .community-comment-bubble p,
  html[data-theme^="glass-"] .community-detail-header h2,
  html[data-theme^="glass-"] .community-comments-modal-header h2,
  html[data-theme^="glass-"] .notification-header h2,
  html[data-theme^="glass-"] .policy-header h2,
  html[data-theme^="glass-"] .policy-content h3,
  html[data-theme^="glass-"] .settings-group h2,
  html[data-theme^="glass-"] .settings-option-button strong,
  html[data-theme^="glass-"] .account-management-summary > strong,
  html[data-theme^="glass-"] .account-profile-item strong,
  html[data-theme^="glass-"] .notification-item-heading strong,
  html[data-theme^="glass-"] .notification-item-actor {
    color: var(--mobile-ui-text);
  }

  html[data-theme^="glass-"] .community-comment-form input {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    color: var(--mobile-ui-text);
  }

  html[data-theme^="glass-"] .community-comment-form button,
  html[data-theme^="glass-"] .passkey-add-button,
  html[data-theme^="glass-"] .profile-edit-dialog .profile-action-button[type="submit"] {
    border-color: var(--mobile-ui-border-strong);
    background: #28788a;
    color: #fff;
  }

  html[data-theme^="glass-"] .community-detail-close,
  html[data-theme^="glass-"] .community-comments-close,
  html[data-theme^="glass-"] .notification-close,
  html[data-theme^="glass-"] .notification-mark-read,
  html[data-theme^="glass-"] .settings-back-button,
  html[data-theme^="glass-"] .account-bind-button,
  html[data-theme^="glass-"] .feedback-upload-button,
  html[data-theme^="glass-"] .profile-edit-dialog .profile-action-button {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-text);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .community-comment-action-sheet {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-raised);
    box-shadow: var(--mobile-ui-sheet-shadow);
  }

  html[data-theme^="glass-"] .community-comment-action-button {
    background: var(--mobile-ui-surface-soft);
    color: var(--mobile-ui-accent);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .feedback-attachments {
    border-color: var(--mobile-ui-border);
    background: var(--mobile-ui-surface-soft);
  }

  html[data-theme^="glass-"] .settings-logout-button,
  html[data-theme^="glass-"] .danger-zone {
    border-color: rgba(255, 143, 163, 0.2) !important;
    background: var(--mobile-ui-danger-soft) !important;
    color: var(--mobile-ui-danger);
  }

  html[data-theme^="glass-"] .notification-content,
  html[data-theme^="glass-"] .notification-list,
  html[data-theme^="glass-"] .notification-item,
  html[data-theme^="glass-"] .notification-item:hover,
  html[data-theme^="glass-"] .notification-item:focus-visible {
    border-color: transparent;
    background: var(--mobile-ui-surface-raised);
    box-shadow: none;
  }

  html[data-theme^="glass-"] .notification-item:active:not(:disabled) {
    background: var(--mobile-ui-surface-soft);
  }

  html[data-theme^="glass-"] .notification-item-copy,
  html[data-theme^="glass-"] .notification-item-actor,
  html[data-theme^="glass-"] .notification-item-heading time {
    color: var(--mobile-ui-muted);
  }

  html[data-theme^="glass-"] .notification-item::after {
    background: var(--mobile-ui-border);
  }

  html[data-theme^="glass-"] .notification-item-unread {
    border-color: var(--mobile-ui-surface-raised);
  }

  .community-detail-header::before,
  .community-comments-modal-header::before,
  .notification-header::before,
  .consent-dialog::before,
  .profile-edit-dialog::before,
  .confirmation-dialog::before,
  .action-confirm-dialog::before,
  .feedback-dialog::before,
  .policy-panel::before {
    background: rgba(211, 231, 239, 0.22);
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce),
  (max-width: 1366px) and (any-pointer: coarse) and (prefers-reduced-motion: reduce) {
  .community-card,
  .community-detail-panel,
  .community-comments-panel,
  .notification-panel,
  .consent-dialog,
  .profile-edit-dialog,
  .confirmation-dialog,
  .action-confirm-dialog,
  .feedback-dialog,
  .policy-panel {
    transition: none;
  }
}