/* Circle and its dashboard entry use the same quiet charcoal hierarchy as the
   workspace. Colour identifies content and state, not every container. */
.community-page,
.community-dialog,
.community-settings,
.community-admin,
.social-dashboard {
  --social-panel: #1b1b1b;
  --social-panel-2: #222;
  --social-line: #383838;
  --social-text: #f5f5f5;
  --social-muted: #b6b6b6;
  --circle-surface: #1b1b1b;
  --circle-surface-soft: #151515;
  --circle-border: #393939;
  --circle-accent: #62d4ca;
  --circle-blue: #5ab1ed;
  --circle-green: #40ca76;
  --circle-orange: #f49a62;
  --circle-red: #f16b77;
  --circle-gold: #e9bc55;
}
.community-page,
.circle-playlists-page { background: #111!important; color: var(--social-text); }
.community-top { background: #151515f2; border-bottom-color: #363636; box-shadow: none; }
.community-top .circle-logo { background: #252525; box-shadow: none; }
.community-top .circle-logo::after { border-color: var(--circle-blue); }
.community-top nav>a:hover,
.community-top nav>a[aria-current=page] { background: #292929; }
.community-layout { width: min(100% - 40px, 1120px); grid-template-columns: 210px minmax(0, 700px); gap: 30px; }
.community-side { border-inline-start: 1px solid #303030; padding-inline-start: 15px; }
.community-side-links a,
.community-side-links button { color: #c2c2c2; }
.community-side-links span { color: #c5c5c5; }
.community-side-links a:hover,
.community-side-links button:hover,
.community-side-links a[aria-current=page] { border-color: #3d3d3d; background: #252525; color: #fff; }
.community-side-links a[aria-current=page] span { color: var(--circle-blue); }
.community-side-links a:nth-child(3) span { color: var(--circle-gold); }
.community-side-links a:nth-child(4) span { color: var(--circle-green); }
.community-side-links a:nth-child(5) span { color: var(--circle-orange); }
.community-side-links a:nth-child(6) span { color: var(--circle-blue); }
.community-side-links .circle-menu-publish,
.community-studio-link { background: #2b3a3b; border-color: #477a7d; color: #f5f5f5; box-shadow: none; }
.community-side-links .circle-menu-publish span { background: #31585a; color: #b8f3ef; box-shadow: none; }
.community-studio-link:hover { background: #365050; border-color: #72b5b2; }
.circle-side-footer { border-color: #393939; }
.community-feed-head h1,
.community-feed-head h2 { color: #fff; }
.community-tabs,
.community-search,
.community-discovery select { background: #202020; border-color: #3b3b3b; }
.community-tabs a:hover,
.community-tabs a[aria-current=page] { background: #343434; color: #fff; }
.community-post { border-color: #3a3a3a; background: #1b1b1b; box-shadow: none; }
.community-post::before { display: none; }
.community-author-name small,
.community-views { color: #aaa; }
.community-follow,
.community-profile-actions a,
.community-profile-actions button { color: var(--circle-blue); }
.community-caption { color: #ccc; }
.community-caption a,
.community-hashtag,
.community-mention,
.community-inline-hashtag { color: var(--circle-blue)!important; }
.community-hashtag:hover { color: #a9defc!important; }
.community-tags span,
.community-tags button { background: #292929; border-color: #404040; color: #b9d9df; }
.community-post-tab { background: #2c3735!important; border-color: #497268!important; color: #a3e6c8!important; }
.community-post-foot { border-top-color: #353535; }
.community-post-foot button { background: #242424; border-color: #3b3b3b; color: #ddd; }
.community-post-foot button[data-reaction="1"][aria-pressed=true] { color: var(--circle-red)!important; }
.community-save[aria-pressed=true] { color: var(--circle-gold)!important; }
.circle-audio-stage:not(.has-video):not(.has-image-post) { background: linear-gradient(145deg,#282828,#181818); }
.community-post:nth-child(4n+2) .circle-audio-stage:not(.has-video):not(.has-image-post) { background: linear-gradient(145deg,#302722,#191919); }
.community-post:nth-child(4n+3) .circle-audio-stage:not(.has-video):not(.has-image-post) { background: linear-gradient(145deg,#1c3031,#191919); }
.podly-social-player { background: #222; border-color: #444; }
.social-play { background: #303030; border-color: #666; box-shadow: none; }
.social-play span { color: var(--circle-green); }
.podly-social-player.playing { border-color: var(--circle-green); box-shadow: none; }
.community-profile,
.community-settings :is(.profile-data-card,.profile-avatar-card,.profile-links-card),
.community-admin-stats article { background: #1d1d1d; border-color: #3e3e3e; box-shadow: none; }
.community-profile-cover { background: linear-gradient(110deg,#164b4b,#243039 55%,#302d27); }
.community-profile-tile,
.community-profile-tile-info { background: #202020; border-color: #404040; }
.community-profile-tile-link { background: #282828; }
.community-profile-tile-placeholder { color: var(--circle-blue); }
.community-profile-tile-info button { background: #303030; color: #ddd; }
.community-profile-post-stats { border-color: #444; }
.community-profile-post-menu>a,
.community-profile-post-menu>button { background: #292929; border-color: #494949; }
.community-profile-gallery-head { border-bottom-color: #444; }
.community-page .community-empty { background: #202020; border-color: #4b4b4b; color: #bcbcbc; }
.community-page .community-empty>span { background: #303030; color: var(--circle-blue); }
.community-page .community-empty h3 { color: #f5f5f5; }
.community-page .community-empty :is(a,button) { background: #2d2d2d; border-color: #5a5a5a; color: #f4f4f4; }
.community-page .community-profile-actions :is(a,button) { background: #292929; border-color: #565656; color: #f5f5f5; }
.community-page .community-profile-actions :is(a,button):hover { background: #373737; border-color: #8a8a8a; }
.community-page .community-profile-actions [data-follow][data-following="1"] { background: #283831; border-color: #4f8965; color: #bce8ca; }
.community-profile-link-main b,
.community-profile-link-main i { color: var(--circle-blue); }
.community-profile-link-more { background: #292929!important; color: #d5d5d5!important; }
.circle-profile-page #communityProfile>.community-profile-tabs { background: #1d1d1d; border-color: #393939; box-shadow: none; }
.circle-profile-page #communityProfile>.community-profile-tabs a:hover { background: #292929; border-color: #4a4a4a; }
.circle-profile-page #communityProfile>.community-profile-tabs a.active { background: #303030; border-color: #575757; box-shadow: inset 0 -2px var(--circle-blue)!important; }
.circle-profile-page #communityProfile>.community-profile-tabs a i { color: var(--circle-blue); }
.circle-profile-page #communityProfile>.community-profile-tabs a.active i { background: #173138; color: #8cdded; }
.community-primary,
.community-dialog button[type=submit] { background: #343434!important; border-color: #666!important; color: #fff!important; box-shadow: none!important; }
.community-primary:hover,
.community-dialog button[type=submit]:hover { background: #454545!important; border-color: #aaa!important; }
.community-dialog { background: #1b1b1b; border-color: #494949; box-shadow: 0 26px 80px #000a; }
.community-dialog p { color: #bdbdbd; }
.community-dialog :is(input,textarea,select),
.community-settings :is(input,textarea),
.community-admin :is(input,textarea,select) { background: #151515; border-color: #484848; color: #f4f4f4; }
.community-dialog :is(input,textarea,select):focus-visible,
.community-settings :is(input,textarea):focus-visible { border-color: var(--circle-blue); outline: 2px solid #5ab1ed55; outline-offset: 1px; box-shadow: none; }
.community-dialog footer :is(button,a) { background: #292929; border-color: #505050; color: #f2f2f2; }
.community-dialog-icon { background: #263638; color: var(--circle-blue); }
.community-step,
.community-publish-form>header span,
.community-settings-head span { color: var(--circle-blue); }
.community-republish-options button { background: #252525; border-color: #4b4b4b; }
.community-republish-options button:hover,
.community-republish-options button:focus-visible { background: #2c3333; border-color: var(--circle-blue); }
.community-republish-options button i { background: #26383a; color: var(--circle-blue); }
.community-category-picker span,
.community-media-choice label>span { background: #242424; border-color: #484848; color: #ddd; }
.community-category-picker input:checked+span,
.community-media-choice input:checked+span { background: #263638; border-color: var(--circle-blue); color: #fff; box-shadow: inset 0 0 0 1px #5ab1ed44; }
.community-dialog.circle-search-dialog { background: #1b1b1b; border-color: #444; }
.circle-search-results { background: #202020f5; border-color: #444; }
.circle-search-account:hover,
.circle-search-post:hover,
.circle-search-tag:hover { background: #333; }
.circle-search-tag>span,
.circle-search-post-icon { background: #2a383a; color: var(--circle-blue); }
.circle-search-panel>header { border-bottom-color: #424242; }
.circle-search-panel>header small,
.circle-search-form>span,
.circle-search-section-head button,
.circle-search-empty>span { color: var(--circle-blue); }
.circle-search-panel>header button { background: #292929; border-color: #505050; }
.circle-search-form { background: #161616; border-color: #505050; }
.circle-search-form:focus-within { border-color: var(--circle-blue); box-shadow: 0 0 0 2px #5ab1ed33; }
.circle-search-all { background: #263638; border-color: #4b858a; color: #d7f5f2!important; }
.circle-search-loading i { border-color: #454545; border-top-color: var(--circle-blue); }
.circle-notification-button { background: #242424; border-color: #494949; color: #d5d5d5; }
.circle-notification-button:hover,
.circle-notification-button[aria-expanded=true] { background: #303a3b; border-color: #6299a0; color: #fff; box-shadow: none; }
.circle-notification-button b { background: var(--circle-red); border-color: #191919; }
.circle-notification-menu { background: #202020; border-color: #494949; box-shadow: 0 18px 55px #000a; }
.circle-notification-menu>header,
.circle-notification-menu>a { border-color: #404040; }
.circle-notification-menu>header span,
.circle-notification-menu>header button,
.circle-notification-menu>a { color: var(--circle-blue); }
.circle-notification-item { border-color: #3d3d3d; }
.circle-notification-item.unread { background: #263335; }
.circle-notification-item:hover,
.circle-notification-menu>a:hover { background: #303030; }
.circle-notification-item>i { background: #315154; color: #9cdeeb; }
.circle-notification-item small { color: #c0c0c0; }
.circle-notification-item time { color: #a5a5a5; }
.community-comments-dialog,
.community-settings,
.social-dashboard { color: #f5f5f5; }
.community-comment,
.community-comment-compose,
.community-comment-rules,
.community-comments-empty,
.community-comments-login { background: #222; border-color: #424242; }
.community-comments-list { background: #1b1b1b; }
.community-comment-form textarea { background: #171717; border-color: #4a4a4a; }
.community-settings-head>a,
.community-settings button,
.community-admin button { border-color: #555; }
.community-settings :is(.profile-cover-card,.profile-interest-card,.profile-verification-card) { background: #202020; border-color: #444; }
.community-settings :is(.profile-cover-card,.profile-interest-card,.profile-verification-card) h3 { color: #fff; }
.community-settings .profile-verification-card.is-verified { background: #1e3028; border-color: #4c9f72; }
.community-settings .profile-verification-card.is-pending { background: #1d2c32; border-color: var(--circle-blue); }
.social-dashboard-hero { background: #202020; border-color: #424242; box-shadow: none; }
.social-dashboard-hero::after { display: none; }
.social-dashboard-stats article,
.community-manage-card { background: #222; border-color: #404040; }
.social-dashboard-stats article:nth-child(3n+1)>span { color: var(--circle-blue); }
.social-dashboard-stats article:nth-child(3n+2)>span { color: var(--circle-green); }
.social-dashboard-stats article:nth-child(3n)>span { color: var(--circle-orange); }
.social-dashboard-posts,
.community-manage-card { background: #202020; border-color: #444; }
.social-dashboard-hero a { background: #303030; border-color: #666; color: #fff; }
.social-dashboard-hero a:hover { background: #3b3b3b; border-color: #999; }
.community-page :is(.cover-project-dialog,.cover-preview-dialog) { background: #1b1b1b; border-color: #4b4b4b; color: #f4f4f4; }
.community-page .cover-project-dialog :is(input,textarea),
.community-page .cover-project-dialog .cover-style-card,
.community-page .cover-project-dialog .cover-model-option { background: #252525; border-color: #484848; color: #f4f4f4; }
.community-page .cover-project-dialog :is(.cover-style-card,.cover-model-option):has(input:checked) { background: #273738; border-color: var(--circle-blue); }
.playlist-studio { --pl-accent: #62d4ca; --pl-line: #3c3c3c; --pl-panel: #1b1b1b; color: #f4f4f4; }
.playlist-now,
.playlist-now.is-drive-mode { background: #202020; border-color: #424242; box-shadow: none; }
.playlist-now::after { background: linear-gradient(105deg,#1b1b1bf2,#1b1b1bca); }
.playlist-art { background: #303030; border-color: #656565; box-shadow: none; }
.playlist-now.is-playing .playlist-play,
.playlist-now.is-playing .playlist-play:hover,
.playlist-now.is-drive-mode.is-playing .playlist-main-controls .playlist-play { background: #343434; color: #fff; box-shadow: 0 0 0 2px var(--pl-accent); }
.playlist-playing-bars b,
.playlist-track.current::after { background: var(--circle-green); }
.playlist-progress input::-webkit-slider-thumb { background: var(--circle-green); box-shadow: none; }
.playlist-track.current { background: #263030; }
.playlist-track.current .playlist-track-play { background: #2a4441; border-color: var(--circle-green); }
.playlist-studio-head span,
.playlist-player-head small,
.playlist-now-copy small,
.playlist-queue>header span { color: var(--circle-blue); }
.playlist-transport button.active,
.playlist-transport button[aria-pressed=true] { color: var(--circle-green); }
.playlist-volume input[type="range"] { accent-color: var(--circle-blue); }
.playlist-list-arrow { color: var(--circle-blue); }
.playlist-list-card,
.playlist-list-card.active { background: #222; border-color: #444; }
.playlist-list-card.active { border-color: var(--circle-blue); }
.playlist-list-card:hover { border-color: #668c8c; }
.community-page .podly-skeleton-card { background: #1b1b1b!important; border-color: #3c3c3c!important; box-shadow: none!important; }
.community-page .circle-profile-settings-page :is(.settings-loading,.settings-error) { background: #202020; border-color: #414141; color: #ccc; }
.community-page :is(.podly-skeleton,.playlist-skeleton,.playlist-now-copy.is-loading>*) { background: #303030!important; }
.community-page :is(.playlist-library-skeleton i,.playlist-track-skeleton :is(i,b,span)) { background: #303030!important; }
.community-page :is(.playlist-list-icon,.playlist-track-cover).image-loading { background: #303030!important; }
.community-page img[data-podly-image-loading] { background-color: #303030!important; }
.community-page :is(.settings-loading,.billing-loading,.loading-state,.community-comments-loading,.social-dashboard-loading) i { background-color: #303030!important; }
.community-page .playlist-track-skeleton { border-bottom-color: #3c3c3c; }
.community-page .playlist-track:not(.current):hover { background: #292929; }
.community-page :is(.playlist-art,.playlist-launch-cover).image-loading,
.community-page :is(.playlist-track-skeleton,.playlist-library-skeleton) .playlist-skeleton { background: #303030!important; }
.community-page .playlist-now.is-mobile-open { background: #202020; }
.community-page .playlist-now.is-mobile-open::after { background: linear-gradient(180deg,#1b1b1ba8,#1b1b1bf0 54%,#1b1b1b); }
/* Keep secondary information usable on phones and at normal desktop zoom. */
.community-page .playlist-studio-head :is(span,p),
.community-page .playlist-studio-head>button,
.community-page .playlist-player-head :is(small,strong),
.community-page .playlist-now-copy :is(small,a),
.community-page .playlist-progress div,
.community-page .playlist-queue>header :is(span,button),
.community-page .playlist-track :is(strong,small),
.community-page .playlist-list-card :is(strong,small),
.community-page .playlist-empty :is(h3,p),
.community-page .playlist-now [data-player-status] { font-size: max(12px, 0.75rem); }
.community-page .playlist-now-copy h2 { white-space: normal; overflow-wrap: anywhere; }
.community-page .playlist-studio :is(button,a,input):focus-visible { outline-offset: 2px; }
.playlist-queue,
.playlist-library-dialog { background: #202020; border-color: #444; }
.playlist-list-menu { background: #292929; border-color: #555; }
.playlist-picker-dialog,
.playlist-picker>header { background: #1b1b1b; border-color: #444; }
.playlist-picker-heading>i,
.playlist-picker-empty>i { background: #284042; border-color: #507c81; color: var(--circle-blue); box-shadow: none; }
.playlist-picker-list>button { background: #252525; border-color: #454545; }
.playlist-picker-list>button[aria-pressed=true] { background: #273a3a; border-color: var(--circle-blue); }
.playlist-picker-list>button[aria-pressed=true]::before { background: var(--circle-blue); }
.playlist-picker-create { background: #202020; border-color: #444; }
.playlist-studio :is(button,a,input):focus-visible,
.community-page :is(button,a,input):focus-visible,
.community-dialog :is(button,a):focus-visible { outline: 2px solid var(--circle-blue); outline-offset: 2px; }
@media(max-width:780px) {
  .community-layout { width: 100%; display: block; padding-inline: 10px; }
  .community-side { display: none; }
  .community-post { border-radius: 15px; }
  .circle-mobile-nav,
  .circle-mobile-more { background: #1b1b1b; border-color: #444; }
  .circle-mobile-nav .publish { background: transparent; color: var(--circle-blue); }
  .circle-mobile-nav .publish span { background: #31585a; border-color: #1b1b1b; box-shadow: none; }
  .circle-mobile-nav .publish small { color: #a4e6e2; }
  .circle-mobile-nav>a[aria-current=page]:not(.publish),
  .circle-mobile-nav>button.active { color: var(--circle-blue); }
  .circle-mobile-nav>a[aria-current=page]:not(.publish) span,
  .circle-mobile-nav>button.active span { color: var(--circle-blue); }
  .circle-mobile-nav>a[aria-current=page]:not(.publish) small,
  .circle-mobile-nav>button.active small { color: #a6ddf5; }
}

/* Dialogs are short enough to scan on desktop while long discussions still scroll. */
@media (min-width:781px) {
  .community-comments-dialog { height:auto!important; max-height:calc(100dvh - 48px)!important; }
  .community-comments { height:auto!important; max-height:calc(100dvh - 48px)!important; grid-template-rows:auto minmax(190px,auto) auto auto!important; }
  .community-comments-list { min-height:190px!important; max-height:min(430px,48dvh)!important; }
  .community-comments-empty { min-height:190px; }
}

/* Keep secondary actions readable across the Circle dialogs and search sheet. */
.community-page .community-profile-post-menu>button,
.community-page .community-profile-post-menu>a { min-height:46px; font-size:12px; }
.community-page .community-profile-post-stats span,
.community-page .community-dialog :is(p,label,legend),
.community-page .community-dialog footer :is(button,a),
.community-page .community-dialog :is(input,textarea,select),
.community-page .community-comments-empty small,
.community-page .community-comment-rules,
.community-page .circle-search-account small,
.community-page .circle-search-post small,
.community-page .circle-search-tag small { font-size:12px; }
.community-page .community-dialog legend small,
.community-page .playlist-picker-heading :is(span,p),
.community-page .playlist-picker-list :is(small,b),
.community-page .playlist-picker-create :is(strong,small,input,button),
.community-page .playlist-picker>footer a span { font-size:11px; }
.community-page .playlist-picker-list strong { font-size:12px; }
.community-page .community-comments-empty strong { font-size:13px; }
.community-page .community-comment-rules { color:#a9b0b7; }
.community-page .community-profile-post-menu>button:hover,
.community-page .community-profile-post-menu>a:hover,
.community-page .playlist-picker-list>button:hover { border-color:#718e92; background:#303838; }