/* Match the light and dark site palettes while keeping media dimensions stable. */
.media-frame { position:relative; }
.media-avatar-frame { display:block; flex-shrink:0; width:var(--media-avatar-size,40px); height:var(--media-avatar-size,40px); border-radius:50%; overflow:hidden; }
.media-avatar-frame > img { display:block; width:100%; height:100%; }
.media-placeholder { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; pointer-events:none; background:var(--bg-secondary); color:var(--text-muted); }
.media-placeholder::before, .creator-skeleton::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,color-mix(in srgb,var(--interactive-text) 10%,transparent) 45%,transparent 70%); transform:translateX(-100%); animation:media-shimmer 1.6s ease-in-out infinite; }
.media-placeholder > svg { opacity:.3; width:28px; height:28px; }
.media-avatar-frame .media-placeholder > svg, .hero-avatar .media-placeholder > svg { width:24px; height:24px; }
.media-retry > svg { width:22px; height:22px; }
.media-transition-image { transition:opacity .18s ease; }
.media-frame[data-media-state="loading"] > .media-transition-image, .media-frame[data-media-state="error"] > .media-transition-image, .media-frame[data-media-state="empty"] > .media-transition-image { opacity:0; }
.media-frame[data-media-state="ready"] > .media-placeholder { display:none; }
.media-frame[data-media-state="error"] > .media-placeholder { pointer-events:auto; }
.media-frame[data-media-state="error"] > .media-placeholder::before, .media-frame[data-media-state="empty"] > .media-placeholder::before { animation:none; }
.media-retry { display:grid; place-items:center; width:36px; height:36px; background:var(--card-bg); color:var(--interactive-text); border:1px solid var(--card-border); border-radius:50%; cursor:pointer; }
.creator-loading .creator-name, .creator-loading .creator-tagline, .creator-loading .creator-members { min-height:1em; color:transparent; position:relative; overflow:hidden; background:var(--bg-secondary); border-radius:8px; }
.creator-loading .creator-name { width:55%; }
.creator-loading .creator-tagline { width:90%; height:2em; }
.creator-loading .creator-members { width:30%; }
.creator-loading .btn-subscribe { opacity:.45; }
.creator-skeleton { position:relative; overflow:hidden; background:var(--bg-secondary); border-radius:12px; }
.creator-post-skeleton { padding:16px; }
.creator-post-skeleton .skeleton-line { height:20px; width:45%; margin-bottom:12px; }
.creator-post-skeleton .skeleton-media { aspect-ratio:4/3; }
.creator-load-status { padding:24px 12px; text-align:center; color:var(--text-muted); }
.creator-load-status button { margin-top:12px; border:1px solid var(--card-border); border-radius:12px; padding:10px 22px; color:var(--interactive-text); background:var(--card-bg); cursor:pointer; }
#discoverSectionListPagination, #discoverListPagination { margin-bottom:calc(32px + env(safe-area-inset-bottom,0px)); }
#view-account .account-content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; margin-bottom:24px; }
.account-grid-item { min-width:0; min-height:78px; height:100%; font-family:inherit; }
.account-grid-text { min-width:0; }
.account-grid-title, .account-grid-desc { overflow-wrap:anywhere; }
@keyframes media-shimmer { to { transform:translateX(100%); } }
@media (max-width:360px) { .account-grid-item { padding:14px 10px; gap:8px; } .account-grid-icon { width:34px; height:34px; } }
@media (prefers-reduced-motion:reduce) { .media-placeholder::before, .creator-skeleton::before { animation:none; } .media-transition-image { transition:none; } }